Lint and make it more homogeneous

Author: fcollonval

.github/workflows/main.yml

@@ -13,7 +13,6 @@ jobs:
       fail-fast: false
       matrix:
         example:
-          - clear-cell-outputs
           - kernel-messaging
           - kernel-output
           - datagrid
@@ -29,6 +28,7 @@ jobs:
           - react-widget
           - settings
           - state
+          - toolbar-button
           - widgets
         os: [ubuntu-latest, macos-latest, windows-latest]
     steps:

README.md

@@ -52,7 +52,6 @@ You may find it easier to learn how to create extensions _by examples_, instead
 
 Start with the [Hello World](hello-world) and then jump to the topic you are interested in.
 
-- [Clear Cell Outputs](clear_cell_outputs)
 - [Commands](commands)
 - [Command Palette](command-palette)
 - [Context Menu](context-menu)
@@ -69,6 +68,7 @@ Start with the [Hello World](hello-world) and then jump to the topic you are int
 - [Settings](settings)
 - [Signals](signals)
 - [State](state)
+- [Toolbar item](toolbar-button)
 - [Widgets](widgets)
 
 You can expect from each example:
@@ -178,6 +178,12 @@ Use State persistence in an extension.
 
 [![State](state/preview.gif)](state)
 
+### [Toolbar item](toolbar-button)
+
+Add a new button to the notebook toolbar.
+
+[![Toolbar button](toolbar-button/Preview.gif)](toolbar-button)
+
 ### [Widgets](widgets)
 
 Add a new Widget element to the main window.

kernel-messaging/README.md

@@ -284,5 +284,5 @@ example, you will explore how you can reuse some Jupyter components to have a ni
 This example uses React to define UI elements. You can
 learn more about React in JupyterLab in [that example](../react-widget/README.md).
 
-The UI refresh is triggered by signal emitions. To know more about it,
+The UI refresh is triggered by signal emissions. To know more about it,
 you can have a look at the [signal example](../signals/README.md).

toolbar-button/.eslintrc.js

@@ -15,11 +15,11 @@ module.exports = {
     '@typescript-eslint/naming-convention': [
       'error',
       {
-        'selector': 'interface',
-        'format': ['PascalCase'],
-        'custom': {
-          'regex': '^I[A-Z]',
-          'match': true
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true
         }
       }
     ],

toolbar-button/README.md

@@ -1,54 +1,61 @@
-# clear cell outputs
+# Toolbar Item
 
-This example shows how to clear all cell outputs at once by clicking on the button.
+This example shows how to add a button to the notebook toolbar.
 
-![Github Actions Status](https://github.com/yash112-lang/extension-examples/blob/master/toolbar-button/Preview.gif)
+![Toolbar button](Preview.gif)
+
+In this particular example, the button will clear all cell outputs
+
+To use it first you need to import the following packages:
 
-To use it first we need to import the packages
 ```ts
-// src/index.ts#L1-L19
+// src/index.ts#L1-L16
 
-import {
-  IDisposable, DisposableDelegate
-} from '@lumino/disposable';
+import { IDisposable, DisposableDelegate } from '@lumino/disposable';
 
 import {
-  JupyterFrontEnd, JupyterFrontEndPlugin
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import {
-  ToolbarButton
-} from '@jupyterlab/apputils';
+import { ToolbarButton } from '@jupyterlab/apputils';
 
-import {
-  DocumentRegistry
-} from '@jupyterlab/docregistry';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import {
-  NotebookActions, NotebookPanel, INotebookModel
+  NotebookActions,
+  NotebookPanel,
+  INotebookModel
 } from '@jupyterlab/notebook';
 ```
 
-Firstly we have to register the plugin information. In this we have to pass a activate **function** & the plugin **id**.
+Firstly you have to register the plugin information. For that you have to pass a activate **function** and the plugin **id**.
 
 ```ts
-// src/index.ts#L25-L29
+// src/index.ts#L21-L25
+
 const plugin: JupyterFrontEndPlugin<void> = {
   activate,
-  id: 'clear-cell-outputs:buttonPlugin',
+  id: 'toolbar-button',
   autoStart: true
 };
 ```
-Now creating a notebook widget extension that adds a button to the toolbar. For more info [IWidgetExtension](https://jupyterlab.readthedocs.io/en/latest/api/interfaces/docregistry.documentregistry.iwidgetextension.html)
+
+New widgets can be added to a document widget by implementing the interface [DocumentRegistry.IWidgetExtension](https://jupyterlab.readthedocs.io/en/latest/api/interfaces/docregistry.documentregistry.iwidgetextension.html). In particular, you need to add your widget in the `createNew` method that is called when creating a new
+document widget; in this case a notebook panel.
 
 ```ts
-// src/index.ts#L35-L56
-export
-  class ButtonExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
-  
-   // Create a new extension object.
-   
-  createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {
+// src/index.ts#L30-L54
+
+export class ButtonExtension
+  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
+  /**
+   * Create a new extension for the notebook panel widget.
+   */
+  createNew(
+    panel: NotebookPanel,
+    context: DocumentRegistry.IContext<INotebookModel>
+  ): IDisposable {
     let clearOutput = () => {
       NotebookActions.clearAllOutputs(panel.content);
     };
@@ -66,15 +73,18 @@ export
   }
 }
 ```
-Now activating the extension
+
+Finally you need to tell the document registry about your widget extension:
+
 ```ts
-// src/index.ts#L61-L63
+// src/index.ts#L59-L61
+
 function activate(app: JupyterFrontEnd) {
   app.docRegistry.addWidgetExtension('Notebook', new ButtonExtension());
-};
-```
-Finally exporting the plugin
-```ts
-// src/index.ts#L69-L69
-export default plugin;
+}
 ```
+
+## Where to Go Next
+
+This example uses a command to display the widget. Have a look a the
+[commands example](../commands/README.md) for more information about it.

toolbar-button/src/index.ts

@@ -1,43 +1,41 @@
-import {
-  IDisposable, DisposableDelegate
-} from '@lumino/disposable';
+import { IDisposable, DisposableDelegate } from '@lumino/disposable';
 
 import {
-  JupyterFrontEnd, JupyterFrontEndPlugin
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import {
-  ToolbarButton
-} from '@jupyterlab/apputils';
+import { ToolbarButton } from '@jupyterlab/apputils';
 
-import {
-  DocumentRegistry
-} from '@jupyterlab/docregistry';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import {
-  NotebookActions, NotebookPanel, INotebookModel
+  NotebookActions,
+  NotebookPanel,
+  INotebookModel
 } from '@jupyterlab/notebook';
 
-
 /**
  * The plugin registration information.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
   activate,
-  id: 'clear-cell-outputs:buttonPlugin',
+  id: 'toolbar-button',
   autoStart: true
 };
 
-
 /**
  * A notebook widget extension that adds a button to the toolbar.
  */
-export
-  class ButtonExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
+export class ButtonExtension
+  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
   /**
-   * Create a new extension object.
+   * Create a new extension for the notebook panel widget.
    */
-  createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {
+  createNew(
+    panel: NotebookPanel,
+    context: DocumentRegistry.IContext<INotebookModel>
+  ): IDisposable {
     let clearOutput = () => {
       NotebookActions.clearAllOutputs(panel.content);
     };
@@ -60,10 +58,9 @@ export
  */
 function activate(app: JupyterFrontEnd) {
   app.docRegistry.addWidgetExtension('Notebook', new ButtonExtension());
-};
-
+}
 
 /**
  * Export the plugin as default.
  */
-export default plugin;
+export default plugin;

widgets/README.md

@@ -98,3 +98,4 @@ widgets in the following examples:
 - Widget showing a [Datagrid](../datagrid/README.md)
 - Widget integrating [React components](../react-widget/README.md)
 - Widget interacting with a [Kernel](../kernel-messaging/README.md)
+- Extending document widget (like the notebook panel) with a new [Toolbar Button](../toolbar-button/README.md)