Refactor apputils widgets (#10758)

* Move widgets from apputils to ui-components * Refactor styles * Refactor tests * Export the correct `Collapse` components * Use new API * Correct integrity * Fix integrity
jupyterlab · Aug 6, 2021 · cb406d3 · cb406d3
1 parent 358f2e5
commit cb406d3
Show file tree

Hide file tree

Showing 105 changed files with 1,696 additions and 1,610 deletions.
diff --git a/docs/source/extension/notebook.rst b/docs/source/extension/notebook.rst
@@ -165,7 +165,7 @@ released npm packages, not the development versions.
 
 ::
 
-    npm install --save @jupyterlab/notebook @jupyterlab/application @jupyterlab/apputils @jupyterlab/docregistry @lumino/disposable --legacy-peer-deps
+    npm install --save @jupyterlab/notebook @jupyterlab/application @jupyterlab/ui-components @jupyterlab/docregistry @lumino/disposable --legacy-peer-deps
 
 Copy the following to ``src/index.ts``:
 
@@ -181,7 +181,7 @@ Copy the following to ``src/index.ts``:
 
     import {
       ToolbarButton
-    } from '@jupyterlab/apputils';
+    } from '@jupyterlab/ui-components';
 
     import {
       DocumentRegistry

diff --git a/docs/source/extension/virtualdom.create.tsx b/docs/source/extension/virtualdom.create.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Widget } from '@lumino/widgets';
-import { ReactWidget } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
 
 function MyComponent() {
   return <div>My Widget</div>;

diff --git a/docs/source/extension/virtualdom.reactwidget.tsx b/docs/source/extension/virtualdom.reactwidget.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Widget } from '@lumino/widgets';
-import { ReactWidget } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
 
 function MyComponent() {
   return <div>My Widget</div>;

diff --git a/docs/source/extension/virtualdom.rst b/docs/source/extension/virtualdom.rst
@@ -13,7 +13,7 @@ which have some additional features over native DOM elements, including:
 -  Both CSS-based and absolutely positioned layouts.
 
 We support wrapping React components to turn them into Lumino
-widgets using the ``ReactWidget`` class from ``@jupyterlab/apputils``:
+widgets using the ``ReactWidget`` class from ``@jupyterlab/ui-components``:
 
 .. literalinclude:: virtualdom.create.tsx
    :force:
@@ -34,7 +34,7 @@ override the ``render`` method to return a React element:
 
 We use Lumino `Signals <https://jupyterlab.github.io/lumino/signaling/interfaces/isignal.html>`__ to represent
 data that changes over time in JupyterLab.
-To have your React element change in response to a signal event, use the ``UseSignal`` component from ``@jupyterlab/apputils``,
+To have your React element change in response to a signal event, use the ``UseSignal`` component from ``@jupyterlab/ui-components``,
 which implements the `"render props" <https://reactjs.org/docs/render-props.html>`__:
 
 

diff --git a/docs/source/extension/virtualdom.usesignal.tsx b/docs/source/extension/virtualdom.usesignal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { ReactWidget, UseSignal } from '@jupyterlab/apputils';
+import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';
 
 import { ISignal, Signal } from '@lumino/signaling';
 

diff --git a/examples/cell/src/index.ts b/examples/cell/src/index.ts
@@ -13,7 +13,8 @@ import '@jupyterlab/theme-light-extension/style/theme.css';
 import '@jupyterlab/completer/style/index.css';
 import '../index.css';
 
-import { SessionContext, Toolbar } from '@jupyterlab/apputils';
+import { Toolbar as AppToolbar, SessionContext } from '@jupyterlab/apputils';
+import { Toolbar } from '@jupyterlab/ui-components';
 
 import { CodeCell, CodeCellModel } from '@jupyterlab/cells';
 
@@ -109,10 +110,13 @@ function main(): void {
   // Create a toolbar for the cell.
   const toolbar = new Toolbar();
   toolbar.addItem('spacer', Toolbar.createSpacerItem());
-  toolbar.addItem('interrupt', Toolbar.createInterruptButton(sessionContext));
-  toolbar.addItem('restart', Toolbar.createRestartButton(sessionContext));
-  toolbar.addItem('name', Toolbar.createKernelNameItem(sessionContext));
-  toolbar.addItem('status', Toolbar.createKernelStatusItem(sessionContext));
+  toolbar.addItem(
+    'interrupt',
+    AppToolbar.createInterruptButton(sessionContext)
+  );
+  toolbar.addItem('restart', AppToolbar.createRestartButton(sessionContext));
+  toolbar.addItem('name', AppToolbar.createKernelNameItem(sessionContext));
+  toolbar.addItem('status', AppToolbar.createKernelStatusItem(sessionContext));
 
   // Lay out the widgets.
   const panel = new BoxPanel();

diff --git a/examples/filebrowser/src/index.ts b/examples/filebrowser/src/index.ts
@@ -21,7 +21,7 @@ import { DockPanel, Menu, SplitPanel, Widget } from '@lumino/widgets';
 
 import { ServiceManager } from '@jupyterlab/services';
 
-import { Dialog, showDialog, ToolbarButton } from '@jupyterlab/apputils';
+import { Dialog, showDialog } from '@jupyterlab/apputils';
 
 import {
   CodeMirrorEditorFactory,
@@ -42,7 +42,7 @@ import {
   TranslationManager
 } from '@jupyterlab/translation';
 
-import { addIcon } from '@jupyterlab/ui-components';
+import { addIcon, ToolbarButton } from '@jupyterlab/ui-components';
 
 const LANG = 'en';
 

diff --git a/packages/apputils/package.json b/packages/apputils/package.json
@@ -59,20 +59,17 @@
     "@lumino/disposable": "^1.4.3",
     "@lumino/domutils": "^1.2.3",
     "@lumino/messaging": "^1.4.3",
-    "@lumino/properties": "^1.2.3",
     "@lumino/signaling": "^1.4.3",
     "@lumino/virtualdom": "^1.8.0",
     "@lumino/widgets": "^1.19.0",
     "@types/react": "^17.0.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "sanitize-html": "~2.3.3",
     "url": "^0.11.0"
   },
   "devDependencies": {
     "@jupyterlab/testutils": "^3.3.0-alpha.0",
     "@types/jest": "^26.0.10",
-    "@types/react-dom": "^17.0.0",
     "@types/sanitize-html": "^2.3.1",
     "jest": "^26.4.2",
     "rimraf": "~3.0.0",

diff --git a/packages/apputils/src/commandpalette.ts b/packages/apputils/src/commandpalette.ts
@@ -3,49 +3,9 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-import { Token } from '@lumino/coreutils';
-import { IDisposable } from '@lumino/disposable';
+import { searchIcon } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { CommandPalette, Panel, Widget } from '@lumino/widgets';
-import { searchIcon } from '@jupyterlab/ui-components';
-
-/* tslint:disable */
-/**
- * The command palette token.
- */
-export const ICommandPalette = new Token<ICommandPalette>(
-  '@jupyterlab/apputils:ICommandPalette'
-);
-/* tslint:enable */
-
-/**
- * The options for creating a command palette item.
- */
-export interface IPaletteItem extends CommandPalette.IItemOptions {}
-
-/**
- * The interface for a Jupyter Lab command palette.
- */
-export interface ICommandPalette {
-  /**
-   * The placeholder text of the command palette's search input.
-   */
-  placeholder: string;
-
-  /**
-   * Activate the command palette for user input.
-   */
-  activate(): void;
-
-  /**
-   * Add a command item to the command palette.
-   *
-   * @param options - The options for creating the command item.
-   *
-   * @returns A disposable that will remove the item from the palette.
-   */
-  addItem(options: IPaletteItem): IDisposable;
-}
 
 /**
  * Class name identifying the input group with search icon.

diff --git a/packages/apputils/src/dialog.tsx b/packages/apputils/src/dialog.tsx
@@ -1,14 +1,18 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Button, closeIcon, LabIcon } from '@jupyterlab/ui-components';
+import {
+  Button,
+  closeIcon,
+  LabIcon,
+  ReactWidget,
+  Styling
+} from '@jupyterlab/ui-components';
 import { ArrayExt, each, map, toArray } from '@lumino/algorithm';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Message, MessageLoop } from '@lumino/messaging';
 import { Panel, PanelLayout, Widget } from '@lumino/widgets';
 import * as React from 'react';
-import { Styling } from './styling';
-import { ReactWidget } from './vdom';
 import { WidgetTracker } from './widgettracker';
 
 /**

diff --git a/packages/apputils/src/index.ts b/packages/apputils/src/index.ts
@@ -4,27 +4,65 @@
  * @packageDocumentation
  * @module apputils
  */
+import { Toolbar as UIToolbar } from '@jupyterlab/ui-components';
+import { Widget } from '@lumino/widgets';
+import { Toolbar as ApputilsToolbar } from './toolbar';
+
+/**
+ * @deprecated since v4
+ * The widgets are now in @jupyterlab/ui-components
+ */
+export {
+  addCommandToolbarButtonClass,
+  addToolbarButtonClass,
+  Collapser as Collapse,
+  CommandToolbarButton,
+  CommandToolbarButtonComponent,
+  IFrame,
+  IUseSignalProps,
+  IUseSignalState,
+  ReactWidget,
+  Spinner,
+  Styling,
+  ToolbarButton,
+  ToolbarButtonComponent,
+  UseSignal,
+  VDomModel,
+  VDomRenderer
+} from '@jupyterlab/ui-components';
 
 export * from './clipboard';
-export * from './collapse';
 export * from './commandlinker';
 export * from './commandpalette';
 export * from './dialog';
 export * from './domutils';
 export * from './hoverbox';
-export * from './iframe';
 export * from './inputdialog';
 export * from './mainareawidget';
 export * from './menufactory';
 export * from './printing';
 export * from './sanitizer';
 export * from './sessioncontext';
-export * from './spinner';
-export * from './splash';
-export * from './styling';
 export * from './thememanager';
 export * from './tokens';
-export * from './toolbar';
-export * from './vdom';
 export * from './widgettracker';
 export * from './windowresolver';
+
+// Merge Toolbar namespace to preserve API
+/**
+ * @deprecated since v4
+ * This class is in @jupyterlab/ui-components
+ */
+export class Toolbar<T extends Widget = Widget> extends UIToolbar<T> {}
+
+export namespace Toolbar {
+  export const createInterruptButton = ApputilsToolbar.createInterruptButton;
+  export const createKernelNameItem = ApputilsToolbar.createKernelNameItem;
+  export const createKernelStatusItem = ApputilsToolbar.createKernelStatusItem;
+  export const createRestartButton = ApputilsToolbar.createRestartButton;
+  /**
+   * @deprecated since v4
+   * This helper function is in @jupyterlab/ui-components
+   */
+  export const createSpacerItem = UIToolbar.createSpacerItem;
+}
diff --git a/packages/apputils/src/inputdialog.ts b/packages/apputils/src/inputdialog.ts
@@ -1,9 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import { Styling } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import { Dialog, showDialog } from './dialog';
-import { Styling } from './styling';
 
 const INPUT_DIALOG_CLASS = 'jp-Input-Dialog';
 

diff --git a/packages/apputils/src/mainareawidget.ts b/packages/apputils/src/mainareawidget.ts
@@ -2,12 +2,11 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { Spinner, Toolbar } from '@jupyterlab/ui-components';
 import { Message, MessageLoop } from '@lumino/messaging';
 import { BoxLayout, BoxPanel, Widget } from '@lumino/widgets';
 import { DOMUtils } from './domutils';
 import { Printing } from './printing';
-import { Spinner } from './spinner';
-import { Toolbar } from './toolbar';
 
 /**
  * A widget meant to be contained in the JupyterLab main area.

diff --git a/packages/apputils/src/splash.ts b/packages/apputils/src/splash.ts
diff --git a/packages/apputils/src/thememanager.ts b/packages/apputils/src/thememanager.ts
@@ -13,8 +13,7 @@ import { DisposableDelegate, IDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
 import { Dialog, showDialog } from './dialog';
-import { ISplashScreen } from './splash';
-import { IThemeManager } from './tokens';
+import { ISplashScreen, IThemeManager } from './tokens';
 
 /**
  * The number of milliseconds between theme loading attempts.