Merge branch 'ft/rich/1' into ft/rich-editor/1

Author: echarles

.gitignore

@@ -40,7 +40,8 @@ node_modules/
 # Version file is handled by hatchling
 **/jupyter_react/_version.py
 
-**/jupyter_react/static
+**/jupyter_react/static/*.js
+**/jupyter_react/static/*.css
 
 # Integration tests
 test-results/
@@ -174,4 +175,4 @@ packages/react/.vscode/launch.json
 !.licenserc.yaml
 !dev/notebooks/.datalayer
 !docs/static/img
-!packages/react/jupyter_react/static/README.md
+!**/static/README.md

examples/cra/src/App.test.tsx

@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

examples/cra/src/App.tsx

@@ -14,7 +14,7 @@ const App = () => {
   return (
     <>
       <Layers/>
-      <Jupyter startDefaultKernel={true} terminals={true}>
+      <Jupyter startDefaultKernel terminals>
         <GalleryExample/>
       </Jupyter>
     </>

examples/cra/src/examples/AllExamples.tsx

@@ -83,7 +83,7 @@ const AllExample = () => {
     <>
       <OutputToolbar />
       <Output
-        showEditor={true}
+        showEditor
         autoRun={false}
         kernel={kernel}
         code={"print('Hello Datalayer 👍')"}
@@ -93,16 +93,20 @@ const AllExample = () => {
         kernel={kernel}
         code={"print('Hello Datalayer 👍')"}
       />
-      <Output autoRun={true} kernel={kernel} code={source} />
+      <Output autoRun kernel={kernel} code={source} />
       <Output
-        autoRun={true}
+        autoRun
         kernel={kernel}
         code={
           "print('=> Hello Datalayer again... I am the output of an non-shown editor 👍 <=')"
         }
       />
       <CellToolbar cellId={CELL_ID} />
-      <Cell id={CELL_ID} source={source} />
+      <Cell
+        id={CELL_ID}
+        kernel={kernel}
+        source={source}
+      />
       <CommandsToolbar />
       <Commands />
       <ConsoleToolbar />
@@ -115,7 +119,7 @@ const AllExample = () => {
       {serviceManager && <FileBrowser serviceManager={serviceManager}/> }
       <FileManagerJupyterLab />
       <NotebookToolbar notebookId={NOTEBOOK_ID} />
-      <Notebook id={NOTEBOOK_ID} path="ping.ipynb"/>
+      <Notebook id={NOTEBOOK_ID} path=".datalayer/ping.ipynb"/>
       <SettingsToolbar />
       <Settings />
       <LuminoComponent />
@@ -129,7 +133,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={true} terminals={true}>
+  <Jupyter startDefaultKernel collaborative terminals>
     <AllExample />
   </Jupyter>,
   div

examples/cra/src/examples/CellExample.tsx

@@ -15,7 +15,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={false}>
+  <Jupyter startDefaultKernel collaborative={false} terminals={false}>
     <Layers />
     <CellComponents />
   </Jupyter>,

examples/cra/src/examples/ConsoleExample.tsx

@@ -15,7 +15,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={false}>
+  <Jupyter startDefaultKernel collaborative={false} terminals={false}>
     <Layers />
     <ConsoleToolbar />
     <Console />

examples/cra/src/examples/LuminoExample.tsx

@@ -14,7 +14,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={false}>
+  <Jupyter startDefaultKernel collaborative={false} terminals={false}>
     <Layers />
     <LuminoToolbar />
     <LuminoComponent />

examples/cra/src/examples/NotebookExample.tsx

@@ -18,10 +18,10 @@ const NOTEBOOK_UID = 'notebook-uid-example';
  */
 const Example = () => {
   return (
-    <Jupyter collaborative={false} terminals={false}>
+    <Jupyter startDefaultKernel collaborative={false} terminals={false}>
       <Layers />
       <NotebookSimpleToolbar notebookId={NOTEBOOK_UID} />
-      <Notebook id={NOTEBOOK_UID} path="ping.ipynb" />
+      <Notebook id={NOTEBOOK_UID} path=".datalayer/ping.ipynb" />
     </Jupyter>
   );
 };

examples/cra/src/examples/NotebookSidebarExample.tsx

@@ -13,12 +13,12 @@ const NOTEBOOK_UID = 'notebook-id-simple';
 
 export default function NotebookSidebarComponent() {
   return (
-    <Jupyter collaborative={false} terminals={true}>
+    <Jupyter startDefaultKernel collaborative={false} terminals>
       <div style={{padding: '2rem'}}>
         <Box sx={{width: '100%'}}>
           <NotebookToolbar notebookId={NOTEBOOK_UID} />
           <Notebook
-            path="ping.ipynb"
+            path=".datalayer/ping.ipynb"
             id={NOTEBOOK_UID}
             extensions={[new CellSidebarExtension({ factory: CellSidebar })]}
           />

examples/cra/src/examples/OutputsExample.tsx

@@ -16,7 +16,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={false}>
+  <Jupyter startDefaultKernel collaborative={false} terminals={false}>
     <Layers />
     <OutputsToolbar />
     <OutputsComponents />

examples/cra/src/examples/TerminalExample.tsx

@@ -15,7 +15,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={true}>
+  <Jupyter startDefaultKernel collaborative={false} terminals>
     <Layers />
     <TerminalToolbar />
     <Terminal height="500px" />

examples/cra/src/examples/cell/CellToolbar.tsx

@@ -4,7 +4,6 @@
  * MIT License
  */
 
-import React from 'react';
 import { Box, IconButton, Text, Tooltip } from '@primer/react';
 import { PlayIcon, ReplyIcon, ThreeBarsIcon } from '@primer/octicons-react';
 import { useCellsStore } from '@datalayer/jupyter-react';
@@ -39,12 +38,12 @@ const CellToolbar = (props: {cellId: string}) => {
             onClick={() => cellStore.execute()}
           />
         </Tooltip>
-        <Tooltip aria-label="Run the cell">
+        <Tooltip aria-label="Reset output count">
           <IconButton
             size="small"
             variant="invisible"
             icon={ReplyIcon}
-            aria-label="Rest the outputcount"
+            aria-label="Reset the output count"
             onClick={() => cellStore.setOutputsCount(cellId, 0)}
           />
         </Tooltip>

examples/cra/src/examples/ipywidgets/IPyWidgetsExample.tsx

@@ -16,7 +16,7 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 
 render(
-  <Jupyter collaborative={false} terminals={false}>
+  <Jupyter startDefaultKernel collaborative={false} terminals={false}>
     <Layers />
     <IPyWidgetsToolbar />
     <OutputIPyWidgets state={state} view={view} />

examples/cra/src/examples/labapp/JupyterLabHeadlessApp.tsx

@@ -53,7 +53,7 @@ export const JupyterLabHeadlessAppExample = () => {
   }
   return (
     <>
-      <Jupyter startDefaultKernel={false} disableCssLoading={true} colormode="light">
+      <Jupyter startDefaultKernel={false} disableCssLoading colormode="light">
         { boxPanel &&
           <div style={{ position: "relative" }}>
             <Box className="jp-LabShell"
@@ -79,7 +79,7 @@ export const JupyterLabHeadlessAppExample = () => {
           mimeRenderers={[
             mimePlotlyExtension,
           ]}
-          headless={true}
+          headless
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
           PluginType={ThemeManager}

examples/cra/src/examples/outputs/OutputsComponents.tsx

@@ -153,13 +153,13 @@ export const OutputsComponents = () => {
   return  <>
     <h3>Simple Output</h3>
     <Output
-      autoRun={true}
+      autoRun
       kernel={kernel}
       code={"print('Hello Datalayer 👍')"}
     />
     <h3>IPyWidget Output</h3>
     <Output
-      autoRun={true}
+      autoRun
       kernel={kernel}
       code={SOURCE_IPYWIDGET}
     />

packages/react/Makefile

@@ -82,3 +82,11 @@ publish-storybook: build-storybook ## publish to s3
 		--paths "/*" \
 		--profile datalayer && \
 	echo open ✨ https://jupyter-ui-storybook.datalayer.tech )
+
+publish-pypi: # publish the pypi package
+	git clean -fdx && \
+		python -m build
+	@exec echo
+	@exec echo twine upload ./dist/*-py3-none-any.whl
+	@exec echo
+	@exec echo https://pypi.org/project/jupyter-react/#history

packages/react/src/components/console/Console.tsx

@@ -13,21 +13,20 @@ import useConsoleStore from './ConsoleState';
 import './Console.css';
 
 export const Console = (options: Console.IConsoleOptions) => {
-  const { defaultKernel, defaultKernelIsLoading, serviceManager } =
-    useJupyter();
+  const { defaultKernel, serviceManager } = useJupyter();
   const [adapter, setAdapter] = useState<ConsoleAdapter>();
-  const consoleStore = useConsoleStore();
+  const store = useConsoleStore();
   useEffect(() => {
-    if (serviceManager && !defaultKernelIsLoading) {
+    if (serviceManager) {
       const adapter = new ConsoleAdapter({
         kernel: defaultKernel,
         serviceManager,
         code: options.code,
       });
       setAdapter(adapter);
-      consoleStore.setAdapter(adapter);
+      store.setAdapter(adapter);
     }
-  }, [defaultKernel, defaultKernelIsLoading, serviceManager]);
+  }, [defaultKernel, serviceManager]);
   return adapter ? (
     <Lumino>{adapter.panel}</Lumino>
   ) : (

packages/react/src/components/notebook/Notebook.tsx

@@ -38,9 +38,9 @@ import {
 import { CellMetadataEditor } from './cell/metadata';
 import { NotebookAdapter } from './NotebookAdapter';
 import { useNotebookStore } from './NotebookState';
-import { INotebookToolbarProps } from './toolbar/NotebookToolbar';
-
+import { INotebookToolbarProps } from './toolbar';
 import { Loader } from '../utils';
+
 import './Notebook.css';
 
 export type ExternalIPyWidgets = {
@@ -147,7 +147,6 @@ export const Notebook = (props: INotebookProps) => {
   const portals = notebookStore.selectNotebookPortals(id);
 
   const [isLoading, setIsLoading] = useState(false);
-  console.log(isLoading);
 
   // Bootstrap the Notebook Adapter.
   const bootstrapAdapter = async (
@@ -260,7 +259,7 @@ export const Notebook = (props: INotebookProps) => {
   }, [serviceManager, kernel]);
 
   useEffect(() => {
-    // As the server has the content source of thruth, we
+    // As the server has the content source of truth, we
     // must ensure that the shared model is pristine before
     // to connect to the server. More over we should ensure,
     // the connection is disposed in case the server room is
@@ -300,7 +299,6 @@ export const Notebook = (props: INotebookProps) => {
               });
           }
         }
-
         // FIXME inform the user.
       }
     };
@@ -402,6 +400,7 @@ export const Notebook = (props: INotebookProps) => {
       }
       sharedModel?.dispose();
     };
+
   }, [adapter?.notebookPanel, collaborative]);
 
   useEffect(() => {

packages/react/src/components/output/Output.tsx

@@ -102,7 +102,7 @@ export const Output = (props: IOutputProps) => {
       }
     };
     if (id && kernel) {
-      const adapter = propsAdapter ?? new OutputAdapter(id, kernel, outputs ?? [], model,suppressCodeExecutionErrors);
+      const adapter = propsAdapter ?? new OutputAdapter(id, kernel, outputs ?? [], model, suppressCodeExecutionErrors);
       setAdapter(adapter);
       outputStore.setAdapter(id, adapter);
       if (model) {
@@ -139,7 +139,7 @@ export const Output = (props: IOutputProps) => {
         });
       });
       return () => {
-        //        kernel.connection.then(k => k.shutdown().then(() => console.log(`Kernel ${k.id} is terminated.`)));
+        // kernel.connection.then(k => k.shutdown().then(() => console.log(`Kernel ${k.id} is terminated.`)));
       };
     }
   }, [kernel]);
@@ -170,17 +170,17 @@ export const Output = (props: IOutputProps) => {
           }}
         >
           {/*
-          <CodeMirrorDatalayerEditor
-            autoRun={autoRun}
-            code={code}
-            codePre={codePre}
-            disableRun={disableRun}
-            insertText={insertText}
-            kernel={kernel}
-            outputAdapter={adapter}
-            sourceId={id}
-            toolbarPosition={toolbarPosition}
-          />
+            <CodeMirrorDatalayerEditor
+              autoRun={autoRun}
+              code={code}
+              codePre={codePre}
+              disableRun={disableRun}
+              insertText={insertText}
+              kernel={kernel}
+              outputAdapter={adapter}
+              sourceId={id}
+              toolbarPosition={toolbarPosition}
+            />
           */}
         </Box>
       )}

packages/react/src/components/output/OutputAdapter.ts

@@ -59,8 +59,8 @@ export class OutputAdapter {
       },
       0
     );
-    //    const widgetRegistry = activateWidgetExtension(this._rendermime);
-    //    activatePlotlyWidgetExtension(widgetRegistry);
+    // const widgetRegistry = activateWidgetExtension(this._rendermime);
+    // activatePlotlyWidgetExtension(widgetRegistry);
     const model =
       outputAreaModel ??
       new OutputAreaModel({

packages/react/src/examples/CellLite.tsx

@@ -14,11 +14,11 @@ document.body.appendChild(div);
 const root = createRoot(div);
 
 root.render(
-  <Jupyter lite>
+  <Jupyter startDefaultKernel lite>
     <Box as="h1">A Jupyter Cell with a Lite Kernel</Box>
     <Cell
       source={`import sys
-print(f"👋 Hello Jupyter UI Lite {sys.platform} {get_ipython()}")`}
+print(f"👋 Hello Jupyter UI Lite - Platform: {sys.platform} - IPython: {get_ipython()}")`}
     />
   </Jupyter>
 );

packages/react/src/examples/ConsoleLite.tsx

@@ -14,13 +14,13 @@ document.body.appendChild(div);
 const root = createRoot(div);
 
 root.render(
-  <Jupyter lite>
+  <Jupyter startDefaultKernel lite>
     <Box as="h1">A Jupyter Console with a Lite Kernel</Box>
     <Console
       code={`import micropip
 await micropip.install('numpy')
 import numpy
-print(f'👋 Hello Jupyter Console with a Lite Kernel and numpy {numpy.__version__}')`}
+print(f'👋 Hello Jupyter Console with a Lite Kernel - Platform: {sys.platform} - IPython: {get_ipython()}") - numpy {numpy.__version__}')`}
     />
   </Jupyter>
 );