From bb43ff76ba0afc806940c132d3dd4e8a665be1d0 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 18 Dec 2024 04:21:41 +0100 Subject: [PATCH 1/5] fix: cra examples --- {examples => attic}/slate/Makefile | 0 {examples => attic}/slate/README.md | 0 {examples => attic}/slate/gulpfile.js | 0 {examples => attic}/slate/package.json | 0 {examples => attic}/slate/public/index.html | 0 {examples => attic}/slate/src/Example.tsx | 0 {examples => attic}/slate/src/MuiSetup.ts | 0 {examples => attic}/slate/src/bootstrap.tsx | 0 .../slate/src/editor/JupyterSlate.tsx | 0 .../slate/src/editor/buttons/ButtonGroup.tsx | 0 .../slate/src/editor/buttons/MarkButton.tsx | 0 .../src/editor/components/Components.tsx | 0 .../slate/src/editor/elements/Element.tsx | 0 .../src/editor/hooks/useEditorConfig.tsx | 0 .../slate/src/editor/hooks/useSelection.tsx | 0 .../slate/src/editor/keys/KeyBindings.tsx | 0 .../slate/src/editor/leafs/Leaf.tsx | 0 .../slate/src/editor/menus/NewBlockMenu.tsx | 0 .../slate/src/editor/plugins/images/Image.tsx | 0 .../src/editor/plugins/images/withImages.tsx | 0 .../editor/plugins/jupyter/JupyterCell.tsx | 0 .../plugins/jupyter/JupyterFileBrowser.tsx | 0 .../editor/plugins/jupyter/withJupyter.tsx | 0 .../slate/src/editor/utils/EditorUtils.ts | 0 .../slate/src/editor/utils/MarkUtils.ts | 0 {examples => attic}/slate/src/empty-shim.js | 0 .../slate/src/example/EditorExample.tsx | 0 .../slate/src/example/JupyterExample.tsx | 0 .../slate/src/example/LayoutExample.tsx | 0 .../slate/src/example/header/Header.tsx | 0 .../src/example/header/HeaderToolbar.tsx | 0 .../slate/src/example/initialValue.ts | 0 .../src/example/placeholder/Placeholder.tsx | 0 .../slate/src/example/popover/CellPopover.tsx | 0 .../src/example/popover/FormatPopover.tsx | 0 .../slate/src/example/theme.ts | 0 {examples => attic}/slate/src/index.tsx | 0 {examples => attic}/slate/src/slate.d.ts | 0 {examples => attic}/slate/src/types.ts | 0 {examples => attic}/slate/style/index.css | 0 {examples => attic}/slate/tsconfig.json | 0 {examples => attic}/slate/typedoc.json | 0 {examples => attic}/slate/webpack.config.js | 0 docs/package.json | 2 +- examples/cra/src/examples/AllExamples.tsx | 16 +++++------ .../cra/src/examples/FileBrowserExample.tsx | 28 +++++++++++-------- examples/cra/src/examples/GalleryExample.tsx | 14 ++++++---- examples/cra/src/examples/NotebookExample.tsx | 2 +- .../src/examples/NotebookSidebarExample.tsx | 2 +- .../cra/src/examples/cell/CellComponents.tsx | 10 ++++--- .../cra/src/examples/cell/CellToolbar.tsx | 7 +++-- .../examples/labapp/JupyterLabHeadlessApp.tsx | 2 +- .../src/examples/notebook/NotebookToolbar.tsx | 8 +++--- .../notebook/NotebookToolbarSimple.tsx | 2 +- .../examples/notebook/cell/CellSidebar.tsx | 24 ++++++++-------- packages/react/package.json | 2 +- 56 files changed, 65 insertions(+), 54 deletions(-) rename {examples => attic}/slate/Makefile (100%) rename {examples => attic}/slate/README.md (100%) rename {examples => attic}/slate/gulpfile.js (100%) rename {examples => attic}/slate/package.json (100%) rename {examples => attic}/slate/public/index.html (100%) rename {examples => attic}/slate/src/Example.tsx (100%) rename {examples => attic}/slate/src/MuiSetup.ts (100%) rename {examples => attic}/slate/src/bootstrap.tsx (100%) rename {examples => attic}/slate/src/editor/JupyterSlate.tsx (100%) rename {examples => attic}/slate/src/editor/buttons/ButtonGroup.tsx (100%) rename {examples => attic}/slate/src/editor/buttons/MarkButton.tsx (100%) rename {examples => attic}/slate/src/editor/components/Components.tsx (100%) rename {examples => attic}/slate/src/editor/elements/Element.tsx (100%) rename {examples => attic}/slate/src/editor/hooks/useEditorConfig.tsx (100%) rename {examples => attic}/slate/src/editor/hooks/useSelection.tsx (100%) rename {examples => attic}/slate/src/editor/keys/KeyBindings.tsx (100%) rename {examples => attic}/slate/src/editor/leafs/Leaf.tsx (100%) rename {examples => attic}/slate/src/editor/menus/NewBlockMenu.tsx (100%) rename {examples => attic}/slate/src/editor/plugins/images/Image.tsx (100%) rename {examples => attic}/slate/src/editor/plugins/images/withImages.tsx (100%) rename {examples => attic}/slate/src/editor/plugins/jupyter/JupyterCell.tsx (100%) rename {examples => attic}/slate/src/editor/plugins/jupyter/JupyterFileBrowser.tsx (100%) rename {examples => attic}/slate/src/editor/plugins/jupyter/withJupyter.tsx (100%) rename {examples => attic}/slate/src/editor/utils/EditorUtils.ts (100%) rename {examples => attic}/slate/src/editor/utils/MarkUtils.ts (100%) rename {examples => attic}/slate/src/empty-shim.js (100%) rename {examples => attic}/slate/src/example/EditorExample.tsx (100%) rename {examples => attic}/slate/src/example/JupyterExample.tsx (100%) rename {examples => attic}/slate/src/example/LayoutExample.tsx (100%) rename {examples => attic}/slate/src/example/header/Header.tsx (100%) rename {examples => attic}/slate/src/example/header/HeaderToolbar.tsx (100%) rename {examples => attic}/slate/src/example/initialValue.ts (100%) rename {examples => attic}/slate/src/example/placeholder/Placeholder.tsx (100%) rename {examples => attic}/slate/src/example/popover/CellPopover.tsx (100%) rename {examples => attic}/slate/src/example/popover/FormatPopover.tsx (100%) rename {examples => attic}/slate/src/example/theme.ts (100%) rename {examples => attic}/slate/src/index.tsx (100%) rename {examples => attic}/slate/src/slate.d.ts (100%) rename {examples => attic}/slate/src/types.ts (100%) rename {examples => attic}/slate/style/index.css (100%) rename {examples => attic}/slate/tsconfig.json (100%) rename {examples => attic}/slate/typedoc.json (100%) rename {examples => attic}/slate/webpack.config.js (100%) diff --git a/examples/slate/Makefile b/attic/slate/Makefile similarity index 100% rename from examples/slate/Makefile rename to attic/slate/Makefile diff --git a/examples/slate/README.md b/attic/slate/README.md similarity index 100% rename from examples/slate/README.md rename to attic/slate/README.md diff --git a/examples/slate/gulpfile.js b/attic/slate/gulpfile.js similarity index 100% rename from examples/slate/gulpfile.js rename to attic/slate/gulpfile.js diff --git a/examples/slate/package.json b/attic/slate/package.json similarity index 100% rename from examples/slate/package.json rename to attic/slate/package.json diff --git a/examples/slate/public/index.html b/attic/slate/public/index.html similarity index 100% rename from examples/slate/public/index.html rename to attic/slate/public/index.html diff --git a/examples/slate/src/Example.tsx b/attic/slate/src/Example.tsx similarity index 100% rename from examples/slate/src/Example.tsx rename to attic/slate/src/Example.tsx diff --git a/examples/slate/src/MuiSetup.ts b/attic/slate/src/MuiSetup.ts similarity index 100% rename from examples/slate/src/MuiSetup.ts rename to attic/slate/src/MuiSetup.ts diff --git a/examples/slate/src/bootstrap.tsx b/attic/slate/src/bootstrap.tsx similarity index 100% rename from examples/slate/src/bootstrap.tsx rename to attic/slate/src/bootstrap.tsx diff --git a/examples/slate/src/editor/JupyterSlate.tsx b/attic/slate/src/editor/JupyterSlate.tsx similarity index 100% rename from examples/slate/src/editor/JupyterSlate.tsx rename to attic/slate/src/editor/JupyterSlate.tsx diff --git a/examples/slate/src/editor/buttons/ButtonGroup.tsx b/attic/slate/src/editor/buttons/ButtonGroup.tsx similarity index 100% rename from examples/slate/src/editor/buttons/ButtonGroup.tsx rename to attic/slate/src/editor/buttons/ButtonGroup.tsx diff --git a/examples/slate/src/editor/buttons/MarkButton.tsx b/attic/slate/src/editor/buttons/MarkButton.tsx similarity index 100% rename from examples/slate/src/editor/buttons/MarkButton.tsx rename to attic/slate/src/editor/buttons/MarkButton.tsx diff --git a/examples/slate/src/editor/components/Components.tsx b/attic/slate/src/editor/components/Components.tsx similarity index 100% rename from examples/slate/src/editor/components/Components.tsx rename to attic/slate/src/editor/components/Components.tsx diff --git a/examples/slate/src/editor/elements/Element.tsx b/attic/slate/src/editor/elements/Element.tsx similarity index 100% rename from examples/slate/src/editor/elements/Element.tsx rename to attic/slate/src/editor/elements/Element.tsx diff --git a/examples/slate/src/editor/hooks/useEditorConfig.tsx b/attic/slate/src/editor/hooks/useEditorConfig.tsx similarity index 100% rename from examples/slate/src/editor/hooks/useEditorConfig.tsx rename to attic/slate/src/editor/hooks/useEditorConfig.tsx diff --git a/examples/slate/src/editor/hooks/useSelection.tsx b/attic/slate/src/editor/hooks/useSelection.tsx similarity index 100% rename from examples/slate/src/editor/hooks/useSelection.tsx rename to attic/slate/src/editor/hooks/useSelection.tsx diff --git a/examples/slate/src/editor/keys/KeyBindings.tsx b/attic/slate/src/editor/keys/KeyBindings.tsx similarity index 100% rename from examples/slate/src/editor/keys/KeyBindings.tsx rename to attic/slate/src/editor/keys/KeyBindings.tsx diff --git a/examples/slate/src/editor/leafs/Leaf.tsx b/attic/slate/src/editor/leafs/Leaf.tsx similarity index 100% rename from examples/slate/src/editor/leafs/Leaf.tsx rename to attic/slate/src/editor/leafs/Leaf.tsx diff --git a/examples/slate/src/editor/menus/NewBlockMenu.tsx b/attic/slate/src/editor/menus/NewBlockMenu.tsx similarity index 100% rename from examples/slate/src/editor/menus/NewBlockMenu.tsx rename to attic/slate/src/editor/menus/NewBlockMenu.tsx diff --git a/examples/slate/src/editor/plugins/images/Image.tsx b/attic/slate/src/editor/plugins/images/Image.tsx similarity index 100% rename from examples/slate/src/editor/plugins/images/Image.tsx rename to attic/slate/src/editor/plugins/images/Image.tsx diff --git a/examples/slate/src/editor/plugins/images/withImages.tsx b/attic/slate/src/editor/plugins/images/withImages.tsx similarity index 100% rename from examples/slate/src/editor/plugins/images/withImages.tsx rename to attic/slate/src/editor/plugins/images/withImages.tsx diff --git a/examples/slate/src/editor/plugins/jupyter/JupyterCell.tsx b/attic/slate/src/editor/plugins/jupyter/JupyterCell.tsx similarity index 100% rename from examples/slate/src/editor/plugins/jupyter/JupyterCell.tsx rename to attic/slate/src/editor/plugins/jupyter/JupyterCell.tsx diff --git a/examples/slate/src/editor/plugins/jupyter/JupyterFileBrowser.tsx b/attic/slate/src/editor/plugins/jupyter/JupyterFileBrowser.tsx similarity index 100% rename from examples/slate/src/editor/plugins/jupyter/JupyterFileBrowser.tsx rename to attic/slate/src/editor/plugins/jupyter/JupyterFileBrowser.tsx diff --git a/examples/slate/src/editor/plugins/jupyter/withJupyter.tsx b/attic/slate/src/editor/plugins/jupyter/withJupyter.tsx similarity index 100% rename from examples/slate/src/editor/plugins/jupyter/withJupyter.tsx rename to attic/slate/src/editor/plugins/jupyter/withJupyter.tsx diff --git a/examples/slate/src/editor/utils/EditorUtils.ts b/attic/slate/src/editor/utils/EditorUtils.ts similarity index 100% rename from examples/slate/src/editor/utils/EditorUtils.ts rename to attic/slate/src/editor/utils/EditorUtils.ts diff --git a/examples/slate/src/editor/utils/MarkUtils.ts b/attic/slate/src/editor/utils/MarkUtils.ts similarity index 100% rename from examples/slate/src/editor/utils/MarkUtils.ts rename to attic/slate/src/editor/utils/MarkUtils.ts diff --git a/examples/slate/src/empty-shim.js b/attic/slate/src/empty-shim.js similarity index 100% rename from examples/slate/src/empty-shim.js rename to attic/slate/src/empty-shim.js diff --git a/examples/slate/src/example/EditorExample.tsx b/attic/slate/src/example/EditorExample.tsx similarity index 100% rename from examples/slate/src/example/EditorExample.tsx rename to attic/slate/src/example/EditorExample.tsx diff --git a/examples/slate/src/example/JupyterExample.tsx b/attic/slate/src/example/JupyterExample.tsx similarity index 100% rename from examples/slate/src/example/JupyterExample.tsx rename to attic/slate/src/example/JupyterExample.tsx diff --git a/examples/slate/src/example/LayoutExample.tsx b/attic/slate/src/example/LayoutExample.tsx similarity index 100% rename from examples/slate/src/example/LayoutExample.tsx rename to attic/slate/src/example/LayoutExample.tsx diff --git a/examples/slate/src/example/header/Header.tsx b/attic/slate/src/example/header/Header.tsx similarity index 100% rename from examples/slate/src/example/header/Header.tsx rename to attic/slate/src/example/header/Header.tsx diff --git a/examples/slate/src/example/header/HeaderToolbar.tsx b/attic/slate/src/example/header/HeaderToolbar.tsx similarity index 100% rename from examples/slate/src/example/header/HeaderToolbar.tsx rename to attic/slate/src/example/header/HeaderToolbar.tsx diff --git a/examples/slate/src/example/initialValue.ts b/attic/slate/src/example/initialValue.ts similarity index 100% rename from examples/slate/src/example/initialValue.ts rename to attic/slate/src/example/initialValue.ts diff --git a/examples/slate/src/example/placeholder/Placeholder.tsx b/attic/slate/src/example/placeholder/Placeholder.tsx similarity index 100% rename from examples/slate/src/example/placeholder/Placeholder.tsx rename to attic/slate/src/example/placeholder/Placeholder.tsx diff --git a/examples/slate/src/example/popover/CellPopover.tsx b/attic/slate/src/example/popover/CellPopover.tsx similarity index 100% rename from examples/slate/src/example/popover/CellPopover.tsx rename to attic/slate/src/example/popover/CellPopover.tsx diff --git a/examples/slate/src/example/popover/FormatPopover.tsx b/attic/slate/src/example/popover/FormatPopover.tsx similarity index 100% rename from examples/slate/src/example/popover/FormatPopover.tsx rename to attic/slate/src/example/popover/FormatPopover.tsx diff --git a/examples/slate/src/example/theme.ts b/attic/slate/src/example/theme.ts similarity index 100% rename from examples/slate/src/example/theme.ts rename to attic/slate/src/example/theme.ts diff --git a/examples/slate/src/index.tsx b/attic/slate/src/index.tsx similarity index 100% rename from examples/slate/src/index.tsx rename to attic/slate/src/index.tsx diff --git a/examples/slate/src/slate.d.ts b/attic/slate/src/slate.d.ts similarity index 100% rename from examples/slate/src/slate.d.ts rename to attic/slate/src/slate.d.ts diff --git a/examples/slate/src/types.ts b/attic/slate/src/types.ts similarity index 100% rename from examples/slate/src/types.ts rename to attic/slate/src/types.ts diff --git a/examples/slate/style/index.css b/attic/slate/style/index.css similarity index 100% rename from examples/slate/style/index.css rename to attic/slate/style/index.css diff --git a/examples/slate/tsconfig.json b/attic/slate/tsconfig.json similarity index 100% rename from examples/slate/tsconfig.json rename to attic/slate/tsconfig.json diff --git a/examples/slate/typedoc.json b/attic/slate/typedoc.json similarity index 100% rename from examples/slate/typedoc.json rename to attic/slate/typedoc.json diff --git a/examples/slate/webpack.config.js b/attic/slate/webpack.config.js similarity index 100% rename from examples/slate/webpack.config.js rename to attic/slate/webpack.config.js diff --git a/docs/package.json b/docs/package.json index 299c1b4c..82194849 100644 --- a/docs/package.json +++ b/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", diff --git a/examples/cra/src/examples/AllExamples.tsx b/examples/cra/src/examples/AllExamples.tsx index 56a58fe8..b6a96b7f 100755 --- a/examples/cra/src/examples/AllExamples.tsx +++ b/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 👍 <=')" } /> - - + + @@ -110,12 +112,10 @@ const AllExample = () => { */} - + {serviceManager && } - - + + diff --git a/examples/cra/src/examples/FileBrowserExample.tsx b/examples/cra/src/examples/FileBrowserExample.tsx index e1367080..e5e84daa 100755 --- a/examples/cra/src/examples/FileBrowserExample.tsx +++ b/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 + ? + : <> + ) +} + const div = document.createElement('div'); document.body.appendChild(div); +const root = createRoot(div); -render( - - - - - - - , - div +root.render( + + + + ); diff --git a/examples/cra/src/examples/GalleryExample.tsx b/examples/cra/src/examples/GalleryExample.tsx index 1d96f620..c930961d 100755 --- a/examples/cra/src/examples/GalleryExample.tsx +++ b/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,9 +223,9 @@ const GalleryExample = () => { {tab === 'Notebook' && ( <> - + @@ -231,8 +233,8 @@ const GalleryExample = () => { )} {tab === 'Cell' && ( <> - - + + )} {tab === 'LabApp' && ( @@ -288,7 +290,7 @@ const GalleryExample = () => { - + {serviceManager && } diff --git a/examples/cra/src/examples/NotebookExample.tsx b/examples/cra/src/examples/NotebookExample.tsx index 45b43ddd..e32b0683 100755 --- a/examples/cra/src/examples/NotebookExample.tsx +++ b/examples/cra/src/examples/NotebookExample.tsx @@ -21,7 +21,7 @@ const Example = () => { - + ); }; diff --git a/examples/cra/src/examples/NotebookSidebarExample.tsx b/examples/cra/src/examples/NotebookSidebarExample.tsx index 9cb56b43..1a2f4452 100755 --- a/examples/cra/src/examples/NotebookSidebarExample.tsx +++ b/examples/cra/src/examples/NotebookSidebarExample.tsx @@ -19,7 +19,7 @@ export default function NotebookSidebarComponent() { diff --git a/examples/cra/src/examples/cell/CellComponents.tsx b/examples/cra/src/examples/cell/CellComponents.tsx index b2eda44d..0e3ef2e8 100755 --- a/examples/cra/src/examples/cell/CellComponents.tsx +++ b/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 ( <> -
source: {cellStore.source}
+
source: {cellStore.getSource(CELL_ID)}

-
kernel available: {String(cellStore.kernelAvailable)}
+
kernel available: {String(cellStore.isKernelSessionAvailable)}

) @@ -50,8 +52,8 @@ const CellPreview = () => { const CellComponents = () => ( <> - - + + ) diff --git a/examples/cra/src/examples/cell/CellToolbar.tsx b/examples/cra/src/examples/cell/CellToolbar.tsx index 01cdebbf..5202a1ef 100755 --- a/examples/cra/src/examples/cell/CellToolbar.tsx +++ b/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 ( <> Cell Example @@ -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)} /> diff --git a/examples/cra/src/examples/labapp/JupyterLabHeadlessApp.tsx b/examples/cra/src/examples/labapp/JupyterLabHeadlessApp.tsx index 39ec5164..b6a639e1 100644 --- a/examples/cra/src/examples/labapp/JupyterLabHeadlessApp.tsx +++ b/examples/cra/src/examples/labapp/JupyterLabHeadlessApp.tsx @@ -53,7 +53,7 @@ export const JupyterLabHeadlessAppExample = () => { } return ( <> - + { boxPanel &&
{ 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(), }) } diff --git a/examples/cra/src/examples/notebook/NotebookToolbarSimple.tsx b/examples/cra/src/examples/notebook/NotebookToolbarSimple.tsx index a79351a8..b404bf88 100755 --- a/examples/cra/src/examples/notebook/NotebookToolbarSimple.tsx +++ b/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()}) } /> diff --git a/examples/cra/src/examples/notebook/cell/CellSidebar.tsx b/examples/cra/src/examples/notebook/cell/CellSidebar.tsx index ce2ac282..13a266ef 100644 --- a/examples/cra/src/examples/notebook/cell/CellSidebar.tsx +++ b/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 ? { @@ -57,7 +57,7 @@ export const CellSidebar = (props: CellSidebarProps) => { @@ -66,14 +66,14 @@ export const CellSidebar = (props: CellSidebarProps) => { { activeCell.model.type === "code" ? : @@ -82,7 +82,7 @@ export const CellSidebar = (props: CellSidebarProps) => { @@ -90,7 +90,7 @@ export const CellSidebar = (props: CellSidebarProps) => { diff --git a/packages/react/package.json b/packages/react/package.json index 2e95e098..942b961d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -132,7 +132,7 @@ "@jupyterlite/server": "^0.4.0", "@jupyterlite/server-extension": "^0.4.0", "@lumino/default-theme": "^2.0.0", - "@primer/react": "^36.25.0", + "@primer/react": "^36.27.0", "assert": "^2.0.0", "bufferutil": "^4.0.8", "codemirror": "^6.0.1", From d99baaa0b6dbc976770c1bbfd5b87258cda3dbab Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 18 Dec 2024 04:42:11 +0100 Subject: [PATCH 2/5] fix: next-js example --- examples/next-js/src/app/page.tsx | 26 ++++++------------- .../next-js/src/components/CellComponent.tsx | 3 ++- .../src/components/NotebookComponent.tsx | 8 +++--- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/examples/next-js/src/app/page.tsx b/examples/next-js/src/app/page.tsx index 67496e30..d4a306d6 100644 --- a/examples/next-js/src/app/page.tsx +++ b/examples/next-js/src/app/page.tsx @@ -9,10 +9,9 @@ import { useState, useEffect, useCallback } from 'react'; import { theme as primerTheme, Text, ToggleSwitch, Box } from '@primer/react'; import { Theme } from '@primer/react/lib/ThemeProvider'; -import { ColorMode } from '@datalayer/jupyter-react/lib/jupyter/lab/JupyterLabColorMode'; -import { jupyterTheme } from '@datalayer/jupyter-react/lib/jupyter/theme'; import dynamic from 'next/dynamic'; import { useTheme, ThemeProvider } from "next-themes"; +import { Colormode, jupyterTheme } from '@datalayer/jupyter-react'; const NotebookComponentNoSSR = dynamic( () => import('../components/NotebookComponent'), @@ -25,16 +24,12 @@ const CellComponentNoSSR = dynamic( ); const JupyterDemo = () => { - // next theme can be 'light', 'dark' or 'system'. const { theme: nextColorMode, setTheme: setNextColorMode } = useTheme(); - - const [colorMode, setColorMode] = useState('light'); + const [colorMode, setColorMode] = useState('light'); const [isOn, setIsOn] = useState(false); - const [theme, setTheme] = useState(jupyterTheme); const [isThemeOn, setIsThemeOn] = useState(false); - useEffect(() => { if (isOn) { setColorMode('dark'); @@ -50,7 +45,6 @@ const JupyterDemo = () => { const handleSwitchChange = useCallback((on: boolean) => { setIsOn(on); }, []); - useEffect(() => { if (isThemeOn) { setTheme(primerTheme); @@ -64,7 +58,6 @@ const JupyterDemo = () => { const handleThemeSwitchChange = useCallback((on: boolean) => { setIsThemeOn(on); }, []); - return ( <> @@ -89,11 +82,11 @@ const JupyterDemo = () => { Primer Theme @@ -107,14 +100,13 @@ const JupyterDemo = () => { /> - + ) } export default function Home() { - // See https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch const [mounted, setMounted] = useState(false) // useEffect only runs on the client, so now we can safely show the UI @@ -124,11 +116,9 @@ export default function Home() { if (!mounted) { return null; } - return ( ) - } diff --git a/examples/next-js/src/components/CellComponent.tsx b/examples/next-js/src/components/CellComponent.tsx index 87deb289..40e0de41 100644 --- a/examples/next-js/src/components/CellComponent.tsx +++ b/examples/next-js/src/components/CellComponent.tsx @@ -22,8 +22,9 @@ export const CellComponent = (props: CellComponentProps) => { diff --git a/examples/next-js/src/components/NotebookComponent.tsx b/examples/next-js/src/components/NotebookComponent.tsx index faeb9f34..afc9866c 100644 --- a/examples/next-js/src/components/NotebookComponent.tsx +++ b/examples/next-js/src/components/NotebookComponent.tsx @@ -7,7 +7,7 @@ 'use client' import { Jupyter, Notebook, CellSidebar } from '@datalayer/jupyter-react'; -import { NotebookToolbar } from '@datalayer/jupyter-react/lib/examples/toolbars/NotebookToolbar'; +import { NotebookToolbar } from '@datalayer/jupyter-react'; import { Theme } from '@primer/react/lib/ThemeProvider'; type NotebookComponentProps = { @@ -23,13 +23,15 @@ export const NotebookComponent = (props: NotebookComponentProps) => { From 44fcff82ce569dcace63020564e7c0bf2b05d837 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 18 Dec 2024 05:02:16 +0100 Subject: [PATCH 3/5] fix: nextjs eslint --- examples/next-js/.eslintrc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/next-js/.eslintrc.json b/examples/next-js/.eslintrc.json index bffb357a..15b1ed91 100644 --- a/examples/next-js/.eslintrc.json +++ b/examples/next-js/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": "next" } From 2c2a8449ae4bfee9baf66fbedd54f69061d29544 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 18 Dec 2024 05:08:45 +0100 Subject: [PATCH 4/5] ci: bump setup-miniconda --- .github/workflows/build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 44e4e55d..299e5746 100644 --- a/.github/workflows/build.yml +++ b/.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 From 86405585e9453941fde37250cb4ac636e4eff2d6 Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 18 Dec 2024 05:46:01 +0100 Subject: [PATCH 5/5] deps: bump primer-addons to latest --- attic/slate/package.json | 2 +- examples/cra/package.json | 2 +- examples/lexical/package.json | 2 +- examples/next-js/package.json | 2 +- packages/docusaurus-plugin/package.json | 2 +- packages/lexical/package.json | 2 +- packages/react/package.json | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/attic/slate/package.json b/attic/slate/package.json index 735f3afa..1026d990 100644 --- a/attic/slate/package.json +++ b/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", diff --git a/examples/cra/package.json b/examples/cra/package.json index 0029f2f7..a4589216 100644 --- a/examples/cra/package.json +++ b/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", diff --git a/examples/lexical/package.json b/examples/lexical/package.json index 2ef00008..f4f9d5b2 100644 --- a/examples/lexical/package.json +++ b/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" diff --git a/examples/next-js/package.json b/examples/next-js/package.json index 8336c704..b924ef7a 100644 --- a/examples/next-js/package.json +++ b/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", diff --git a/packages/docusaurus-plugin/package.json b/packages/docusaurus-plugin/package.json index 1d2b8eec..0dddfd5d 100644 --- a/packages/docusaurus-plugin/package.json +++ b/packages/docusaurus-plugin/package.json @@ -24,7 +24,7 @@ "dependencies": { "@datalayer/icons-react": "^0.3.2", "@datalayer/jupyter-react": "^0.17.0", - "@datalayer/primer-addons": "^0.3.1", + "@datalayer/primer-addons": "^0.3.2", "@docusaurus/core": "^2.4.0", "@docusaurus/types": "^2.1.0" }, diff --git a/packages/lexical/package.json b/packages/lexical/package.json index 11e53ad9..a576ed87 100644 --- a/packages/lexical/package.json +++ b/packages/lexical/package.json @@ -60,7 +60,7 @@ "dependencies": { "@datalayer/icons-react": "^0.3.2", "@datalayer/jupyter-react": "^0.17.0", - "@datalayer/primer-addons": "^0.3.1", + "@datalayer/primer-addons": "^0.3.2", "@jupyterlab/application": "^4.0.0", "@jupyterlab/coreutils": "^6.0.0", "@jupyterlab/services": "^7.0.0", diff --git a/packages/react/package.json b/packages/react/package.json index 942b961d..372c5937 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -66,7 +66,7 @@ }, "dependencies": { "@codemirror/lang-python": "^6.0.1", - "@datalayer/primer-addons": "^0.3.1", + "@datalayer/primer-addons": "^0.3.2", "@jupyter-widgets/base": "^6.0.0", "@jupyter-widgets/controls": "^5.0.0", "@jupyter-widgets/html-manager": "^1.0.0",