ft: lexical editor (#356)

* example: notebook simple

* chore: lite notebook

* notebook lite

* chore: rm defaultkernelisloading

* fix: cra example

* Automatic application of license header

* examples: more fixes

* fix: storybook

* fix: examples

* bump: jupyter-react

* bump: jupyter-react

* fix: jupyter-react python package build

* chore: datalayer notebook

* fix: notebook simple

* Automatic application of license header

* makefile: storybook

* fix: theme

* bump: version

* lexical: refactor

* lexical: styles

* lexical: styles

* react: theme example

* css: refactor

* fix: style

* fix: style

* lexical: more plugins

* bump: versions

* lexical: components

* lexical: components

* lint

* lexical: hooks

* fix: build

* fix: build

* Automatic application of license header

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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/GalleryExample.tsx

@@ -9,7 +9,7 @@ import { UnderlineNav } from '@primer/react';
 import { Box } from '@primer/react';
 import {
   useJupyter, Cell, Commands, Console, Dialog, FileBrowser, FileManagerJupyterLab,
-  OutputIPyWidgets, Notebook, Kernel, Settings, Terminal,
+  OutputIPyWidgets, Notebook, Kernel, Settings, Terminal, CellSidebarExtension,
 } from '@datalayer/jupyter-react';
 import { Output } from '@datalayer/jupyter-react/lib/components/output/Output';
 import { IOutput } from '@jupyterlab/nbformat';
@@ -227,7 +227,7 @@ const GalleryExample = () => {
             <Notebook
               id={NOTEBOOK_ID}
               path="ping.ipynb"
-              CellSidebar={CellSidebar}
+              extensions={[new CellSidebarExtension({ factory: CellSidebar })]}
             />
           </>
         )}

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

@@ -4,23 +4,23 @@
  * MIT License
  */
 
-import {Jupyter, Notebook} from '@datalayer/jupyter-react';
-import {Box} from '@primer/react';
+import { Jupyter, Notebook, CellSidebarExtension } from "@datalayer/jupyter-react";
+import { Box } from '@primer/react';
 import NotebookToolbar from './notebook/NotebookToolbar';
 import CellSidebar from './notebook/cell/CellSidebar';
 
 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}
-            CellSidebar={CellSidebar}
+            extensions={[new CellSidebarExtension({ factory: CellSidebar })]}
           />
         </Box>
       </div>

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}