Fix: CRA and Next.js examples (#340)

* fix: cra examples

* fix: next-js example

* fix: nextjs eslint

* ci: bump setup-miniconda

* deps: bump primer-addons to latest

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v3
     - name: Setup conda
-      uses: conda-incubator/setup-miniconda@v2
+      uses: conda-incubator/setup-miniconda@v3
       with:
         mamba-version: "*"
         channels: conda-forge,defaults

examples/slate/package.json → attic/slate/package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@datalayer/icons-react": "^0.3.2",
     "@datalayer/jupyter-react": "^0.15.0",
-    "@datalayer/primer-addons": "^0.3.1",
+    "@datalayer/primer-addons": "^0.3.2",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",

docs/package.json

@@ -21,7 +21,7 @@
     "@docusaurus/theme-live-codeblock": "3.5.2",
     "@docusaurus/theme-mermaid": "3.5.2",
     "@mdx-js/react": "^3.0.1",
-    "@primer/react-brand": "0.37.0-rc.ab1bfc11",
+    "@primer/react-brand": "^0.44.1",
     "clsx": "^2.1.1",
     "docusaurus-lunr-search": "3.5.0",
     "docusaurus-plugin-typedoc": "~0.17.5",

examples/cra/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@datalayer/icons-react": "^0.3.2",
     "@datalayer/jupyter-react": "^0.15.0",
-    "@datalayer/primer-addons": "^0.3.1",
+    "@datalayer/primer-addons": "^0.3.2",
     "jupyterlab-plotly": "^5.17.0",
     "plotly.js": "^2.26.2",
     "react": "^18.2.0",

examples/cra/src/examples/AllExamples.tsx

@@ -56,7 +56,9 @@ ax2.set_xlabel('time (s)')
 ax2.set_ylabel('Undamped')
 plt.show()`;
 
-const NOTEBOOK_UID = 'notebook-uid-1';
+const CELL_ID = 'cell-id-1';
+
+const NOTEBOOK_ID = 'notebook-id-1';
 
 /**
  * A simple example for the Jupyter UI.
@@ -99,8 +101,8 @@ const AllExample = () => {
           "print('=> Hello Datalayer again... I am the output of an non-shown editor 👍 <=')"
         }
       />
-      <CellToolbar />
-      <Cell source={source} />
+      <CellToolbar cellId={CELL_ID} />
+      <Cell id={CELL_ID} source={source} />
       <CommandsToolbar />
       <Commands />
       <ConsoleToolbar />
@@ -110,12 +112,10 @@ const AllExample = () => {
       <Dialog />
       */}
       <FileBrowserToolbar />
-      <FileBrowser />
+      {serviceManager && <FileBrowser serviceManager={serviceManager}/> }
       <FileManagerJupyterLab />
-      <NotebookToolbar notebookId={NOTEBOOK_UID} />
-      <Notebook
-         uid={NOTEBOOK_UID} path="ping.ipynb"
-      />
+      <NotebookToolbar notebookId={NOTEBOOK_ID} />
+      <Notebook id={NOTEBOOK_ID} path="ping.ipynb"/>
       <SettingsToolbar />
       <Settings />
       <LuminoComponent />

examples/cra/src/examples/FileBrowserExample.tsx

@@ -4,22 +4,28 @@
  * MIT License
  */
 
-import {render} from 'react-dom';
-import {Jupyter, FileBrowser, FileManagerJupyterLab} from '@datalayer/jupyter-react';
+import { createRoot } from 'react-dom/client';
+import { FileBrowser, useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
 import Layers from './../layout/Layers';
 
 import './../App.css';
 
+const FileBrowserExample = () => {
+  const { serviceManager } = useJupyter();
+  return (
+    serviceManager
+      ? <FileBrowser serviceManager={serviceManager}/>
+      : <></>
+  )
+}
+
 const div = document.createElement('div');
 document.body.appendChild(div);
+const root = createRoot(div);
 
-render(
-  <Jupyter collaborative={false} terminals={false}>
-    <Layers />
-    <Jupyter collaborative={false} terminals={true}>
-      <FileBrowser />
-      <FileManagerJupyterLab />
-    </Jupyter>
-  </Jupyter>,
-  div
+root.render(
+  <JupyterReactTheme>
+    <Layers/>
+    <FileBrowserExample />
+  </JupyterReactTheme>
 );

examples/cra/src/examples/GalleryExample.tsx

@@ -76,7 +76,9 @@ const OUTPUTS: IOutput[] = [
   },
 ];
 
-const NOTEBOOK_UID = 'notebook-id-gallery';
+const CELL_ID = 'cell-id-gallery';
+
+const NOTEBOOK_ID = 'notebook-id-gallery';
 
 const GalleryExample = () => {
   const [tab, setTab] = useState('Notebook');
@@ -221,18 +223,18 @@ const GalleryExample = () => {
       <Box>
         {tab === 'Notebook' && (
           <>
-            <NotebookToolbarSimple notebookId={NOTEBOOK_UID} />
+            <NotebookToolbarSimple notebookId={NOTEBOOK_ID} />
             <Notebook
-              uid={NOTEBOOK_UID}
+              id={NOTEBOOK_ID}
               path="ping.ipynb"
               CellSidebar={CellSidebar}
             />
           </>
         )}
         {tab === 'Cell' && (
           <>
-            <CellToolbar />
-            <Cell source={SOURCE} />
+            <CellToolbar cellId={CELL_ID} />
+            <Cell id={CELL_ID} source={SOURCE} />
           </>
         )}
         {tab === 'LabApp' && (
@@ -288,7 +290,7 @@ const GalleryExample = () => {
             <FileBrowserToolbar />
             <Box display="flex">
               <Box sx={{width: 400}}>
-                <FileBrowser />
+                {serviceManager && <FileBrowser serviceManager={serviceManager}/> }
               </Box>
               <Box ml={3} sx={{width: 400}}>
                 <FileManagerJupyterLab />

examples/cra/src/examples/NotebookExample.tsx

@@ -21,7 +21,7 @@ const Example = () => {
     <Jupyter collaborative={false} terminals={false}>
       <Layers />
       <NotebookSimpleToolbar notebookId={NOTEBOOK_UID} />
-      <Notebook uid={NOTEBOOK_UID} path="ping.ipynb" />
+      <Notebook id={NOTEBOOK_UID} path="ping.ipynb" />
     </Jupyter>
   );
 };

examples/cra/src/examples/NotebookSidebarExample.tsx

@@ -19,7 +19,7 @@ export default function NotebookSidebarComponent() {
           <NotebookToolbar notebookId={NOTEBOOK_UID} />
           <Notebook
             path="ping.ipynb"
-            uid={NOTEBOOK_UID}
+            id={NOTEBOOK_UID}
             CellSidebar={CellSidebar}
           />
         </Box>

examples/cra/src/examples/cell/CellComponents.tsx

@@ -7,6 +7,8 @@
 import { useCellsStore, Cell } from "@datalayer/jupyter-react";
 import CellToolbar from './CellToolbar';
 
+const CELL_ID = "cell-id-1"
+
 const SOURCE_EXAMPLE = `"""
 import ipywidgets as widgets
 widgets.IntSlider(
@@ -39,9 +41,9 @@ const CellPreview = () => {
   const cellStore = useCellsStore();
   return (
     <>
-      <div>source: {cellStore.source}</div>
+      <div>source: {cellStore.getSource(CELL_ID)}</div>
       <br/>
-      <div>kernel available: {String(cellStore.kernelAvailable)}</div>
+      <div>kernel available: {String(cellStore.isKernelSessionAvailable)}</div>
       <br/>
     </>
   )
@@ -50,8 +52,8 @@ const CellPreview = () => {
 const CellComponents = () => (
   <>
     <CellPreview/>
-    <CellToolbar />
-    <Cell source={SOURCE_EXAMPLE} />
+    <CellToolbar cellId={CELL_ID} />
+    <Cell id={CELL_ID} source={SOURCE_EXAMPLE} />
   </>
 )
 

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

@@ -9,9 +9,10 @@ import { Box, IconButton, Text, Tooltip } from '@primer/react';
 import { PlayIcon, ReplyIcon, ThreeBarsIcon } from '@primer/octicons-react';
 import { useCellsStore } from '@datalayer/jupyter-react';
 
-const CellToolbar: React.FC = () => {
+const CellToolbar = (props: {cellId: string}) => {
+  const { cellId } = props;
   const cellStore = useCellsStore();
-  const outputsCount = cellStore.outputsCount;
+  const outputsCount = cellStore.getOutputsCount(cellId);
   return (
     <>
       <Text as="h3">Cell Example</Text>
@@ -44,7 +45,7 @@ const CellToolbar: React.FC = () => {
             variant="invisible"
             icon={ReplyIcon}
             aria-label="Rest the outputcount"
-            onClick={() => cellStore.setOutputsCount(0)}
+            onClick={() => cellStore.setOutputsCount(cellId, 0)}
           />
         </Tooltip>
       </Box>

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={true} colormode="light">
         { boxPanel &&
           <div style={{ position: "relative" }}>
             <Box className="jp-LabShell"

examples/cra/src/examples/notebook/NotebookToolbar.tsx

@@ -46,7 +46,7 @@ const NotebookToolbar = (props: {notebookId: string}) => {
               onClick={e => {
                 e.preventDefault();
                 notebookStore.insertBelow({
-                  uid: notebookId,
+                  id: notebookId,
                   cellType: 'raw',
                 });
               }}
@@ -60,7 +60,7 @@ const NotebookToolbar = (props: {notebookId: string}) => {
               onClick={e => {
                 e.preventDefault();
                 notebookStore.insertBelow({
-                  uid: notebookId,
+                  id: notebookId,
                   cellType: 'markdown',
                 });
               }}
@@ -74,7 +74,7 @@ const NotebookToolbar = (props: {notebookId: string}) => {
               onClick={e => {
                 e.preventDefault();
                 notebookStore.insertBelow({
-                  uid: notebookId,
+                  id: notebookId,
                   cellType: 'code',
                 });
               }}
@@ -116,7 +116,7 @@ const NotebookToolbar = (props: {notebookId: string}) => {
               leadingVisual={FileIcon}
               onClick={() =>
                 notebookStore.save({
-                  uid: notebookId,
+                  id: notebookId,
                   date: new Date(),
                 })
               }

examples/cra/src/examples/notebook/NotebookToolbarSimple.tsx

@@ -43,7 +43,7 @@ const NotebookToolbarSimple = (props: {notebookId: string}) => {
             variant="invisible"
             icon={FileIcon}
             aria-label="Save"
-            onClick={() => notebookStore.save({uid: notebookId, date: new Date()}) }
+            onClick={() => notebookStore.save({id: notebookId, date: new Date()}) }
           />
         </Tooltip>
       </Box>

examples/cra/src/examples/notebook/cell/CellSidebar.tsx

@@ -8,20 +8,20 @@ import { useState } from 'react';
 import { PanelLayout } from '@lumino/widgets';
 import { ActionMenu, Button, Box } from "@primer/react";
 import { ChevronRightIcon, XIcon, ChevronUpIcon, ChevronDownIcon, SquareIcon } from "@primer/octicons-react";
-import { useNotebookStore, CellSidebarProps, CellMetadataEditor, DATALAYER_CELL_HEADER_CLASS } from '@datalayer/jupyter-react';
+import { useNotebookStore, ICellSidebarProps, CellMetadataEditor, DATALAYER_CELL_SIDEBAR_CLASS_NAME } from '@datalayer/jupyter-react';
 
-export const CellSidebar = (props: CellSidebarProps) => {
+export const CellSidebar = (props: ICellSidebarProps) => {
   const [visible, setVisible] = useState(false);
-  const { notebookId, cellId, nbgrader } = props;
+  const { notebookId, cellNodeId, nbgrader } = props;
   const notebookStore = useNotebookStore();
   const activeCell = notebookStore.selectActiveCell(notebookId);
   const layout = (activeCell?.layout);
   if (layout) {
     const cellWidget = (layout as PanelLayout).widgets[0];
-    if (!visible && (cellWidget?.node.id === cellId)) {
+    if (!visible && (cellWidget?.node.id === cellNodeId)) {
       setVisible(true);
     }
-    if (visible && (cellWidget?.node.id !== cellId)) {
+    if (visible && (cellWidget?.node.id !== cellNodeId)) {
       setVisible(false);
     }
   }
@@ -31,7 +31,7 @@ export const CellSidebar = (props: CellSidebarProps) => {
   return (
     activeCell ? 
       <Box
-        className={DATALAYER_CELL_HEADER_CLASS}
+        className={DATALAYER_CELL_SIDEBAR_CLASS_NAME}
         sx={{
           '& p': {
             marginBottom: '0 !important',
@@ -49,15 +49,15 @@ export const CellSidebar = (props: CellSidebarProps) => {
         <span style={{ display: "flex" }}>
           <Button leadingVisual={ChevronUpIcon} variant="invisible" size="small" onClick={(e: any) => {
             e.preventDefault();
-            notebookStore.insertAbove({ uid: notebookId, cellType: "code" });
+            notebookStore.insertAbove({ id: notebookId, cellType: "code" });
           }}>
             Code
           </Button>
         </span>
         <span style={{ display: "flex" }}>
           <Button leadingVisual={ChevronUpIcon} variant="invisible" size="small" onClick={(e: any) => {
             e.preventDefault();
-            notebookStore.insertAbove({ uid: notebookId, cellType: "markdown" });
+            notebookStore.insertAbove({ id: notebookId, cellType: "markdown" });
           }}>
             Markdown
           </Button>
@@ -66,14 +66,14 @@ export const CellSidebar = (props: CellSidebarProps) => {
         { activeCell.model.type === "code" ?
             <Button leadingVisual={SquareIcon} variant="invisible" size="small" onClick={(e: any) => {
               e.preventDefault();
-              notebookStore.changeCellType({ uid: notebookId, cellType: "markdown" });
+              notebookStore.changeCellType({ id: notebookId, cellType: "markdown" });
             }}>
               To Mardown
             </Button>
           :
             <Button leadingVisual={SquareIcon} variant="invisible" size="small" onClick={(e: any) => {
               e.preventDefault();
-              notebookStore.changeCellType({ uid: notebookId, cellType: "code" });
+              notebookStore.changeCellType({ id: notebookId, cellType: "code" });
             }}>
               To Code
             </Button>
@@ -82,15 +82,15 @@ export const CellSidebar = (props: CellSidebarProps) => {
         <span style={{ display: "flex" }}>
           <Button leadingVisual={ChevronDownIcon} variant="invisible" size="small" onClick={(e: any) => {
             e.preventDefault();
-            notebookStore.insertBelow({ uid: notebookId, cellType: "markdown" });
+            notebookStore.insertBelow({ id: notebookId, cellType: "markdown" });
           }}>
             Markdown
           </Button>
         </span>
         <span style={{ display: "flex" }}>
           <Button leadingVisual={ChevronDownIcon} variant="invisible" size="small" onClick={(e: any) => {
             e.preventDefault();
-            notebookStore.insertBelow({ uid: notebookId, cellType: "code" });
+            notebookStore.insertBelow({ id: notebookId, cellType: "code" });
           }}>
             Code
           </Button>

examples/lexical/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@datalayer/jupyter-lexical": "0.0.1",
-    "@datalayer/primer-addons": "^0.3.1",
+    "@datalayer/primer-addons": "^0.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-json-tree": "^0.17.0"

examples/next-js/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next"
 }

examples/next-js/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@datalayer/icons-react": "^0.3.2",
     "@datalayer/jupyter-react": "^0.15.0",
-    "@datalayer/primer-addons": "^0.3.1",
+    "@datalayer/primer-addons": "^0.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.40.0",
     "eslint-config-next": "^13.4.1",