Added jupyterlab-toparea-text widget example. (#240)

* Added jupyterlab-toparea-text widget example.

* Added README updates and preview image.

* Updated README with toparea-text-widget links.

* Removed unnecessary files, updated metadata/examples lists.

* Added Jeremy's video tutorial link.

* Remove empty types in tsconfig

* Removed junk file.

* Added guide link.

* Updated README for the example.

* Update README.

* Update README.

* Revise README.

* Update README.

* Update root README with improved description.

* Fixed links.

* Updated title.

* Added basic playwright test.

* Changed license metadata.

* Added suppression to kebab case for styles, formatting.

* Updated ESLint ignore entries in the example's package.json.

* Update toparea-text-widget/README.md

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

* Update example

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
Co-authored-by: Frédéric Collonval <fcollonval@gmail.com>

.github/workflows/main.yml

@@ -36,6 +36,7 @@ jobs:
           - signals
           - state
           - toolbar-button
+          - toparea-text-widget
           - widgets
         os: [ubuntu-latest, macos-latest, windows-latest]
 

README.md

@@ -29,6 +29,7 @@
    1. [Signals](#signals)
    1. [State](#state)
    1. [Toolbar Item](#toolbar-item)
+   1. [Top Area Text Widget](#top-area-text-widget)
    1. [Widgets](#widgets)
 1. [Prerequisites](#prerequisites)
 1. [Develop and Use the Examples](#develop-and-use-the-examples)
@@ -116,6 +117,7 @@ Start with the [Hello World](hello-world) and then jump to the topic you are int
 - [Signals](signals)
 - [State](state)
 - [Toolbar item](toolbar-button)
+- [Top Area Text Widget](toparea-text-widget)
 - [Widgets](widgets)
 
 You can expect from each example:
@@ -225,7 +227,7 @@ Add user interface to edit cell or notebook metadata.
 
 [![Metadata Form](metadata-form/preview.gif)](metadata-form)
 
-## [MIME Renderer](mimerenderer)
+### [MIME Renderer](mimerenderer)
 
 Add a MIME renderer for mp4 content to the application.
 
@@ -273,6 +275,13 @@ Add a new button to the notebook toolbar.
 
 [![Toolbar button](toolbar-button/preview.gif)](toolbar-button)
 
+### [Top Area Text Widget](toparea-text-widget)
+
+A very simple example that adds a basic text widget to the top area. See [related video.](https://www.youtube.com/watch?v=mqotG1MkHa4).
+This example is part of the [Extension Dual Compatibility Guide](https://jupyterlab.readthedocs.io/en/latest/extension_dual_compatibility.html).
+
+[![Top Area Text Widget](toparea-text-widget/preview.jpg)](toparea-text-widget)
+
 ### [Widgets](widgets)
 
 Add a new Widget element to the main window.

package.json

@@ -41,6 +41,7 @@
     "signals",
     "state",
     "toolbar-button",
+    "toparea-text-widget",
     "widgets"
   ],
   "devDependencies": {

toparea-text-widget/.copier-answers.yml

@@ -0,0 +1,19 @@
+# Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
+_commit: v4.2.4
+_src_path: https://github.com/jupyterlab/extension-template
+author_email: ''
+author_name: Project Jupyter Contributors
+data_format: string
+file_extension: ''
+has_binder: true
+has_settings: false
+kind: frontend
+labextension_name: '@jupyterlab-examples/toparea'
+mimetype: ''
+mimetype_name: ''
+project_short_description: A JupyterLab extension to add text in the top area.
+python_name: jupyterlab_examples_toparea
+repository: https://github.com/jupyterlab/extension-examples
+test: false
+viewer_name: ''
+

toparea-text-widget/.gitignore

@@ -0,0 +1,121 @@
+*.bundle.*
+lib/
+node_modules/
+*.log
+.eslintcache
+.stylelintcache
+*.egg-info/
+.ipynb_checkpoints
+*.tsbuildinfo
+jupyterlab_examples_toparea/labextension
+# Version file is handled by hatchling
+jupyterlab_examples_toparea/_version.py
+
+# Created by https://www.gitignore.io/api/python
+# Edit at https://www.gitignore.io/?templates=python
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage/
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# Mr Developer
+.mr.developer.cfg
+.project
+.pydevproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# End of https://www.gitignore.io/api/python
+
+# OSX files
+.DS_Store
+
+# Yarn cache
+.yarn/

toparea-text-widget/.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+**/node_modules
+**/lib
+**/package.json
+!/package.json
+jupyterlab_examples_toparea

toparea-text-widget/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

toparea-text-widget/README.md

@@ -0,0 +1,41 @@
+# Top area widget (cross compatible extension)
+
+This example defines an extension that adds a single self-contained text widget
+to the top bar of the UI.
+
+![preview](./preview.jpg)
+
+## Jupyter Notebook / JupyterLab compatibility
+
+As Jupyter Notebook 7+ is built with components from JupyterLab, and since
+both use the same building blocks, that means your extension can work
+on both (or any other frontend built with JupyterLab components) with
+little or no modification depending on its design.
+
+This extension doesn't need to do anything at all to be compatible
+with both JupyterLab and Notebook 7+ (both apps have a top area that can hold the
+widget, so it will be visible in both JupyterLab and Notebook 7+ upon install and
+after launch). This will be the case if your extension only uses features
+that both applications have.
+
+## Adding a widget to the top area
+
+You can add a widget to the top area by calling the following
+method of the application shell:
+
+```ts
+// src/index.ts#L34-L34
+
+app.shell.add(widget, 'top', { rank: 1000 });
+```
+
+The _rank_ is used to order the widget within the top area.
+
+## Where to Go Next
+
+If your extension is using features that are not common to both interfaces,
+special steps needs to be taken. You can have a look at the [Shout button example](../shout-button-message)
+that uses a feature available in JupyterLab but not in Notebook 7+.
+
+You can have more information about this in the
+[Extension Dual Compatibility Guide](https://jupyterlab.readthedocs.io/en/latest/extension_dual_compatibility.html).

toparea-text-widget/install.json

@@ -0,0 +1,5 @@
+{
+  "packageManager": "python",
+  "packageName": "jupyterlab_examples_toparea",
+  "uninstallInstructions": "Use your Python package manager (pip, conda, etc.) to uninstall the package jupyterlab_examples_toparea"
+}

toparea-text-widget/jupyterlab_examples_toparea/__init__.py

@@ -0,0 +1,16 @@
+try:
+    from ._version import __version__
+except ImportError:
+    # Fallback when using the package in dev mode without installing
+    # in editable mode with pip. It is highly recommended to install
+    # the package from a stable release or in editable mode: https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs
+    import warnings
+    warnings.warn("Importing 'jupyterlab_examples_toparea' outside a proper installation.")
+    __version__ = "dev"
+
+
+def _jupyter_labextension_paths():
+    return [{
+        "src": "labextension",
+        "dest": "@jupyterlab-examples/toparea"
+    }]