Scaffolding UI (#4)

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@jupyter-suggestions/jupyter-suggestions-root",
+    "name": "@jupyter/jupyter-suggestions-root",
     "version": "0.1.0",
     "private": true,
     "description": "A JupyterLab extension for suggesting changes.",

packages/base/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@jupyter/jupyter-suggestions-base",
+  "version": "0.1.0",
+  "description": "Base components of jupyter-suggestions extension",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/QuantStack/jupyterlab-suggestions",
+  "bugs": {
+    "url": "https://github.com/QuantStack/jupyterlab-suggestions/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "QuantStack",
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "src/**/*.{ts,tsx,svg}"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/QuantStack/jupyterlab-suggestions.git"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "build:prod": "jlpm run clean && jlpm run build",
+    "clean": "rimraf tsconfig.tsbuildinfo",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "clean:all": "jlpm run clean:lib",
+    "watch": "tsc -w"
+  },
+  "dependencies": {
+    "@jupyterlab/apputils": "^4.0.0",
+    "@jupyterlab/docregistry": "^4.0.0",
+    "@jupyterlab/ui-components": "^4.0.0",
+    "@lumino/widgets": "^2.0.0"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "typescript": "^5"
+  },
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
+  ],
+  "styleModule": "style/index.js",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/base/src/icons.ts

@@ -0,0 +1,7 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import hintStr from '../style/icon/hint.svg';
+
+export const hintIcon = new LabIcon({
+  name: 'jupyter-suggestions:hintIcon',
+  svgstr: hintStr
+});

packages/base/src/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './suggestionsPanel';
+export * from './icons';

packages/base/src/suggestionsPanel/header.ts

@@ -0,0 +1,22 @@
+import { Widget } from '@lumino/widgets';
+
+export class SuggestionsPanelHeader extends Widget {
+  /**
+   * Instantiate a new sidebar header.
+   */
+  constructor() {
+    super({ node: createHeader() });
+    this.title.changed.connect(_ => {
+      this.node.textContent = this.title.label;
+    });
+  }
+}
+
+/**
+ * Create a sidebar header node.
+ */
+export function createHeader(): HTMLElement {
+  const title = document.createElement('h2');
+  title.textContent = '-';
+  return title;
+}

packages/base/src/suggestionsPanel/index.ts

@@ -0,0 +1,2 @@
+export * from './model';
+export * from './panel';

packages/base/src/suggestionsPanel/model.ts

@@ -0,0 +1,5 @@
+import { ISuggestionsModel } from '../types';
+
+export class SuggestionsModel implements ISuggestionsModel {
+  filePath = '';
+}

packages/base/src/suggestionsPanel/panel.ts

@@ -0,0 +1,42 @@
+import { IWidgetTracker } from '@jupyterlab/apputils';
+import { IDocumentWidget } from '@jupyterlab/docregistry';
+import { SidePanel } from '@jupyterlab/ui-components';
+
+import { ISuggestionsModel } from '../types';
+import { SuggestionsPanelHeader } from './header';
+
+export class SuggestionsPanelWidget extends SidePanel {
+  constructor(options: SuggestionsPanelWidget.IOptions) {
+    super();
+    this.addClass('jp-suggestions-sidepanel-widget');
+    this.node.tabIndex = 0;
+    this._model = options.model;
+
+    const header = new SuggestionsPanelHeader();
+    this.header.addWidget(header);
+    options.tracker.currentChanged.connect(async (_, changed) => {
+      if (changed) {
+        header.title.label = changed.context.localPath;
+        await changed.context.ready;
+      } else {
+        header.title.label = '-';
+      }
+    });
+  }
+
+  get model(): ISuggestionsModel {
+    return this._model;
+  }
+
+  dispose(): void {
+    super.dispose();
+  }
+  private _model: ISuggestionsModel;
+}
+
+export namespace SuggestionsPanelWidget {
+  export interface IOptions {
+    model: ISuggestionsModel;
+    tracker: IWidgetTracker<IDocumentWidget>;
+  }
+}

packages/base/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const value: string; // @ts-ignore
+  export default value;
+}

packages/base/src/types.ts

@@ -0,0 +1,7 @@
+export interface IDict<T = any> {
+  [key: string]: T;
+}
+
+export interface ISuggestionsModel {
+  filePath?: string;
+}

packages/base/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfigbase.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*", "style/icon"]
+}

python/jupyter_suggestions_core/jupyter_suggestions_core/__init__.py

@@ -12,5 +12,5 @@
 def _jupyter_labextension_paths():
     return [{
         "src": "labextension",
-        "dest": "@jupyter-suggestions/jupyter-suggestions-core"
+        "dest": "@jupyter/jupyter-suggestions-core"
     }]

python/jupyter_suggestions_core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@jupyter-suggestions/jupyter-suggestions-core",
+  "name": "@jupyter/jupyter-suggestions-core",
   "version": "0.1.0",
   "description": "Jupyter Suggestions core extension",
   "keywords": [
@@ -16,7 +16,8 @@
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
     "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "src/**/*.{ts,tsx}"
+    "src/**/*.{ts,tsx}",
+    "schema/*.json"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -43,7 +44,9 @@
     "watch:labextension": "jupyter labextension watch ."
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0"
+    "@jupyter/jupyter-suggestions-base": "^0.1.0",
+    "@jupyterlab/application": "^4.0.0",
+    "@jupyterlab/notebook": "^4.0.0"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^4.0.0",
@@ -72,6 +75,7 @@
     },
     "extension": true,
     "outputDir": "jupyter_suggestions_core/labextension",
-    "sharedPackages": {}
+    "sharedPackages": {},
+    "schemaDir": "schema"
   }
 }

python/jupyter_suggestions_core/pyproject.toml

@@ -36,8 +36,8 @@ artifacts = ["jupyter_suggestions_core/labextension"]
 exclude = [".github", "binder", "node_modules"]
 
 [tool.hatch.build.targets.wheel.shared-data]
-"install.json" = "share/jupyter/labextensions/@jupyter-suggestions/jupyter-suggestions-core/install.json"
-"jupyter_suggestions_core/labextension" = "share/jupyter/labextensions/@jupyter-suggestions/jupyter-suggestions-core"
+"install.json" = "share/jupyter/labextensions/@jupyter/jupyter-suggestions-core/install.json"
+"jupyter_suggestions_core/labextension" = "share/jupyter/labextensions/@jupyter/jupyter-suggestions-core"
 
 [tool.hatch.build.hooks.version]
 path = "jupyter_suggestions_core/_version.py"

python/jupyter_suggestions_core/schema/commands.json

@@ -0,0 +1,14 @@
+{
+  "title": "@jupyter/jupyter-suggestions-core",
+  "description": "@jupyter/jupyter-suggestions-core settings.",
+  "type": "object",
+  "additionalProperties": false,
+  "jupyter.lab.toolbars": {
+    "Cell": [
+      {
+        "name": "jupyter-suggestions-core:add-cell-suggestion",
+        "command": "jupyter-suggestions-core:add-cell-suggestion"
+      }
+    ]
+  }
+}

python/jupyter_suggestions_core/src/index.ts

@@ -1,15 +1,7 @@
 import {
-  JupyterFrontEnd,
-  JupyterFrontEndPlugin
-} from '@jupyterlab/application';
+  suggestionsModelPlugin,
+  suggestionsPanelPlugin,
+  commandsPlugin
+} from './plugins';
 
-const plugin: JupyterFrontEndPlugin<void> = {
-  id: 'jupyter-suggestions:plugin',
-  description: 'A JupyterLab extension for suggesting changes.',
-  autoStart: true,
-  activate: (app: JupyterFrontEnd) => {
-    console.log('JupyterLab extension jupyter-suggestions is activated!');
-  }
-};
-
-export default plugin;
+export default [suggestionsModelPlugin, suggestionsPanelPlugin, commandsPlugin];

python/jupyter_suggestions_core/src/plugins.ts

@@ -0,0 +1,84 @@
+import {
+  hintIcon,
+  ISuggestionsModel,
+  SuggestionsModel,
+  SuggestionsPanelWidget
+} from '@jupyter/jupyter-suggestions-base';
+import {
+  ILayoutRestorer,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { INotebookTracker } from '@jupyterlab/notebook';
+
+import { ISuggestionsModelToken } from './tokens';
+
+const NAME_SPACE = '@jupyter/jupyter-suggestions-core';
+
+export const suggestionsModelPlugin: JupyterFrontEndPlugin<ISuggestionsModel> =
+  {
+    id: `${NAME_SPACE}:suggestion-model`,
+    description: 'The model of the suggestions panel',
+    autoStart: true,
+    requires: [ILayoutRestorer, INotebookTracker],
+    provides: ISuggestionsModelToken,
+    activate: (
+      app: JupyterFrontEnd,
+      restorer: ILayoutRestorer,
+      tracker: INotebookTracker
+    ): ISuggestionsModel => {
+      console.log(`${NAME_SPACE}:suggestion-model is activated`);
+      const model = new SuggestionsModel();
+
+      return model;
+    }
+  };
+
+export const COMMAND_IDS = {
+  /**
+   * Command to add a cell suggestion.
+   */
+  addCellSuggestion: 'jupyter-suggestions-core:add-cell-suggestion'
+};
+
+export const commandsPlugin: JupyterFrontEndPlugin<void> = {
+  id: `${NAME_SPACE}:commands`,
+  description: 'A JupyterLab extension for suggesting changes.',
+  autoStart: true,
+  requires: [ISuggestionsModelToken],
+  activate: (app: JupyterFrontEnd, model: ISuggestionsModel) => {
+    console.log(`${NAME_SPACE}:suggestion-commands is activated`);
+    const { commands } = app;
+    commands.addCommand(COMMAND_IDS.addCellSuggestion, {
+      icon: hintIcon,
+      caption: 'Add suggestion',
+      execute: () => {
+        //
+      },
+      isVisible: () => true
+    });
+  }
+};
+
+export const suggestionsPanelPlugin: JupyterFrontEndPlugin<void> = {
+  id: `${NAME_SPACE}:suggestion-panel`,
+  description: 'A JupyterLab extension for suggesting changes.',
+  autoStart: true,
+  requires: [ISuggestionsModelToken, ILayoutRestorer, INotebookTracker],
+  activate: (
+    app: JupyterFrontEnd,
+    model: ISuggestionsModel,
+    restorer: ILayoutRestorer,
+    tracker: INotebookTracker
+  ) => {
+    console.log(`${NAME_SPACE}:suggestion-panel is activated`);
+    const panel = new SuggestionsPanelWidget({ model, tracker });
+    panel.id = 'jupyter-suggestions::main-panel';
+    panel.title.caption = 'Jupyter Suggestions';
+    panel.title.icon = hintIcon;
+    if (restorer) {
+      restorer.add(panel, NAME_SPACE);
+    }
+    app.shell.add(panel, 'right', { rank: 2000, activate: false });
+  }
+};

python/jupyter_suggestions_core/src/tokens.ts

@@ -0,0 +1,6 @@
+import { Token } from '@lumino/coreutils';
+import { ISuggestionsModel } from '@jupyter/jupyter-suggestions-base';
+
+export const ISuggestionsModelToken = new Token<ISuggestionsModel>(
+  'jupyter-suggestions:suggestionsModel'
+);