Merge pull request #402 from datalayer/fix/css-primer

enh: better theme support

Author: echarles

packages/lexical/package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
-    "@datalayer/jupyter-react": "^1.1.4",
+    "@datalayer/jupyter-react": "^1.1.5",
     "@datalayer/primer-addons": "^1.0.3",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/coreutils": "^6.0.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",

packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts

@@ -42,7 +42,7 @@ export class JupyterLabAppAdapter {
       this._ready = new Promise((resolve, _) => {
         this._readyResolve = resolve;
       });
-      this._plugins = (this._jupyterLab as any)['_plugins'];
+      this._plugins = (this._jupyterLab as any)['pluginRegistry']['_plugins'];
       this._readyResolve();
       return;
     }

packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx

@@ -13,12 +13,12 @@ import type { CommandRegistry } from '@lumino/commands';
 import type { IDisposable } from '@lumino/disposable';
 import type { PanelLayout, Widget } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
-import { JupyterReactTheme, Colormode } from '../../../../theme';
 import { CellSidebar, type ICellSidebarProps } from './CellSidebar';
 import {
   NotebookExtension,
   INotebookExtensionProps,
 } from '../../NotebookExtensions';
+import { JupyterReactTheme, Colormode } from '../../../../theme';
 
 class CellSidebarFactory implements IDisposable {
   private _isDisposed = false;
@@ -54,7 +54,6 @@ class CellSidebarFactory implements IDisposable {
     if (this._isDisposed) {
       return;
     }
-
     this._isDisposed = true;
     this.panel.content.model?.cells.changed.disconnect(
       this._onCellsChanged,

packages/react/src/examples/NotebookThemeColormode.tsx

@@ -15,15 +15,16 @@ import {
   Notebook2,
   NotebookToolbar,
 } from '../components';
-import { jupyterLabTheme, JupyterReactTheme, Colormode } from '../theme';
+import { useJupyterReactStore } from '../state';
+import { jupyterLabTheme, JupyterReactTheme } from '../theme';
 
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 
 const NotebookThemeColormode = () => {
   const { serviceManager } = useJupyter();
+  const { colormode, setColormode } = useJupyterReactStore();
   const [theme, setTheme] = useState<any>(jupyterLabTheme);
   const [isThemeOn, setIsThemeOn] = useState(false);
-  const [colormode, setColormode] = useState<Colormode>('light');
   const [isOn, setIsOn] = useState(false);
   const extensions = useMemo(
     () => [new CellSidebarExtension({ colormode })],

packages/react/src/state/JupyterReactState.ts

@@ -34,6 +34,7 @@ import {
   terminalStore,
   TerminalState,
 } from '../components/terminal/TerminalState';
+import { Colormode } from '../theme';
 
 export type OnSessionConnection = (
   kernelConnection: Session.ISessionConnection | undefined
@@ -54,9 +55,11 @@ export type JupyterReactState = {
   serviceManager?: ServiceManager.IManager;
   terminalStore: TerminalState;
   version: string;
+  colormode: Colormode;
   setJupyterConfig: (configuration?: IJupyterConfig) => void;
   setServiceManager: (serviceManager?: ServiceManager.IManager) => void;
   setVersion: (version: string) => void;
+  setColormode: (colormode: Colormode) => void;
 };
 
 export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
@@ -72,6 +75,7 @@ export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
   notebookStore: notebookStore.getState(),
   outputStore: outputsStore.getState(),
   terminalStore: terminalStore.getState(),
+  colormode: 'light',
   setJupyterConfig: (jupyterConfig?: IJupyterConfig) => {
     set(state => ({ jupyterConfig }));
   },
@@ -83,6 +87,9 @@ export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
       set(state => ({ version }));
     }
   },
+  setColormode: colormode => {
+    set(state => ({ colormode }));
+  },
 }));
 
 // TODO Reuse code portions from JupyterContext.

packages/react/src/theme/JupyterReactTheme.tsx

@@ -4,9 +4,10 @@
  * MIT License
  */
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import { BaseStyles, ThemeProvider } from '@primer/react';
 import { Colormode, JupyterLabCss, jupyterLabTheme } from '../theme';
+import { useJupyterReactStore } from '../state';
 
 import '@primer/primitives/dist/css/functional/themes/light.css';
 import '@primer/primitives/dist/css/functional/themes/dark.css';
@@ -47,10 +48,18 @@ export function JupyterReactTheme(
 ): JSX.Element {
   const {
     children,
-    colormode = 'light',
+    colormode: colormodeProps = 'light',
     loadJupyterLabCss = true,
     theme = jupyterLabTheme,
   } = props;
+  const [colormode, setColormode] = useState<Colormode>(colormodeProps);
+  const { colormode: colormodeFromStore } = useJupyterReactStore();
+  useEffect(() => {
+    setColormode(colormodeProps);
+  }, [colormodeProps]);
+  useEffect(() => {
+    setColormode(colormodeFromStore);
+  }, [colormodeFromStore]);
   return (
     <JupyterReactColormodeContext.Provider value={colormode}>
       {loadJupyterLabCss && <JupyterLabCss colormode={colormode} />}

packages/react/src/typings.d.ts

@@ -64,6 +64,11 @@ declare module '*/widgets-base.css' {
   export default value;
 }
 
+declare module '@primer/primitives/dist/css/*' {
+  const value: any;
+  export default value;
+}
+
 declare module 'jupyterlab-plotly/lib/jupyterlab-plugin' {
   const value: any;
   export default value;

packages/react/webpack.config.js

@@ -72,12 +72,12 @@ const ENTRY =
   // './src/examples/NotebookSimple';
   // './src/examples/NotebookSkeleton';
   // './src/examples/NotebookTheme';
-  // './src/examples/NotebookThemeColormode';
-  // './src/examples/NotebookToc';
-  // './src/examples/NotebookURL';
-  // './src/examples/NotebookURL';
-  // './src/examples/ObservableHQ';
-  './src/examples/Outputs';
+  './src/examples/NotebookThemeColormode';
+// './src/examples/NotebookToc';
+// './src/examples/NotebookURL';
+// './src/examples/NotebookURL';
+// './src/examples/ObservableHQ';
+// './src/examples/Outputs';
 // './src/examples/OutputIpynb';
 // './src/examples/OutputWithMonitoring';
 // './src/examples/Plotly';