fix: storybook

packages/react/src/examples/NotebookLite.tsx

@@ -18,6 +18,7 @@ const NotebookLite = () => (
   <JupyterReactTheme>
     <Box as="h1">A Jupyter Notebook with a Lite Kernel</Box>
     <Notebook
+      startDefaultKernel={true}
       lite={true}
       nbformat={nbformat as INotebookContent}
       id="notebook-lite-id"

packages/react/src/examples/notebooks/NotebookExample1.ipynb.json

@@ -21,45 +21,45 @@
       "execution_count": 1,
       "metadata": {
         "datalayer": {
-          "sql": true
+          "_about": "Accelerated and Trusted Jupyter"
         }
       },
       "outputs": [
         {
           "data": {
-            "text/plain": [""]
+            "text/plain": ["4"]
           },
           "execution_count": 1,
           "metadata": {},
           "output_type": "execute_result"
         }
       ],
       "source": [
-        "-- I am a SQL cell.\n",
-        "SELECT * FROM LOGS"
+        "# I am a Python cell.\n",
+        "print('2+2')"
       ]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
       "metadata": {
-        "datalayer": {
-          "_about": "Accelerated and Trusted Jupyter"
-        }
       },
       "outputs": [
         {
           "data": {
-            "text/plain": ["4"]
+            "text/plain": []
           },
           "execution_count": 1,
           "metadata": {},
           "output_type": "execute_result"
         }
       ],
       "source": [
-        "# I am a Python cell.\n",
-        "print('2+2')"
+        "# import piplite\n",
+        "# await piplite.install('ipywidgets')\n",
+        "from ipywidgets import IntSlider\n",
+        "w = IntSlider()\n",
+        "w"
       ]
     },
     {
@@ -78,28 +78,30 @@
         }
       ],
       "source": [
-        "from ipywidgets import IntSlider\n",
-        "w = IntSlider()\n",
         "w"
       ]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
       "metadata": {
+        "datalayer": {
+          "sql": true
+        }
       },
       "outputs": [
         {
           "data": {
-            "text/plain": []
+            "text/plain": [""]
           },
           "execution_count": 1,
           "metadata": {},
           "output_type": "execute_result"
         }
       ],
       "source": [
-        "w"
+        "-- I am a SQL cell.\n",
+        "SELECT * FROM LOGS"
       ]
     },
     {

packages/react/stories/Notebook.stories.tsx

@@ -4,6 +4,7 @@
  * MIT License
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Jupyter, Notebook } from '@datalayer/jupyter-react';
 
@@ -65,13 +66,13 @@ Default.args = {
   browser: 'false',
   initCode: '',
   path: undefined,
-  uid: undefined,
+  id: undefined,
   cellMetadataPanel: false,
   cellSidebarMargin: 120,
   height: '100vh',
   maxHeight: '100vh',
   nbgrader: false,
-  readOnly: false,
+  readonly: false,
   renderers: [],
 };
 
@@ -82,7 +83,7 @@ export const Playground: Story = {
 Playground.args = {
   ...Default.args,
   path: 'ipywidgets.ipynb',
-  uid: 'uid-1',
+  id: 'id-1',
 };
 
 const WIDGETS_EXAMPLE = {
@@ -91,55 +92,101 @@ const WIDGETS_EXAMPLE = {
       metadata: {},
       cell_type: 'code',
       outputs: [],
-      source: 'import ipywidgets as widgets\nw = widgets.IntSlider()\nw',
+      source: `import ipywidgets as widgets
+w = widgets.IntSlider()
+w`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
-      source: 'from IPython.display import display\ndisplay(w)',
+      source: `from IPython.display import display
+display(w)`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
-      source:
-        "a = widgets.FloatText()\nb = widgets.FloatSlider()\ndisplay(a,b)\nlink = widgets.jslink((a, 'value'), (b, 'value'))",
+      source: `a = widgets.FloatText()
+b = widgets.FloatSlider()
+display(a,b)
+link = widgets.jslink((a, 'value'), (b, 'value'))`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
       source:
-        'import numpy as np\nimport bqplot.pyplot as plt\nsize = 100\nscale = 100.0\nnp.random.seed(0)\nx_data = np.arange(size)\ny_data = np.cumsum(np.random.randn(size) * scale)\nfig = plt.figure(title="First Example")\nplt.plot(y_data)\nfig',
+      `import numpy as np
+import bqplot.pyplot as plt
+size = 100
+scale = 100.0
+np.random.seed(0)
+x_data = np.arange(size)
+y_data = np.cumsum(np.random.randn(size) * scale)
+fig = plt.figure(title="First Example")
+plt.plot(y_data)
+fig`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
       source:
-        'from ipyleaflet import Map, Marker\ncenter = (52.204793, 360.121558)\nm = Map(center=center, zoom=15)\nmarker = Marker(location=center, draggable=True)\nm.add(marker)\nmarker.location = (50, 356)\nm',
+      `from ipyleaflet import Map, Marker
+center = (52.204793, 360.121558)
+m = Map(center=center, zoom=15)
+marker = Marker(location=center, draggable=True)
+m.add(marker)
+marker.location = (50, 356)
+m`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
       source:
-        'import ipyreact\nclass ConfettiWidget(ipyreact.ReactWidget):\n    _esm = """\n    import confetti from "canvas-confetti";\n    import * as React from "react";\n\n    export default function({value, set_value, debug}) {\n        return <button onClick={() => confetti() && set_value(value + 1)}>\n            {value || 0} times confetti\n        </button>\n    };"""\nConfettiWidget()',
+        `import ipyreact
+class ConfettiWidget(ipyreact.ReactWidget):
+    _esm = """
+    import confetti from "canvas-confetti";
+    import * as React from "react";
+
+    export default function({value, set_value, debug}) {
+        return <button onClick={() => confetti() && set_value(value + 1)}>
+            {value || 0} times confetti
+        </button>
+    };"""
+ConfettiWidget()',
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
       source:
-        'import plotly.express as px\ndf = px.data.stocks()\nfig = px.line(df, x="date", y=df.columns,\n              hover_data={"date": "|%B %d, %Y"},\n              title=\'custom tick labels\')\nfig.update_xaxes(\n    dtick="M1",\n    tickformat="%b %Y",\n    range=["2018-01-01", "2018-12-31"])\nfig.show()',
+        'import plotly.express as px
+df = px.data.stocks()
+fig = px.line(df, x="date", y=df.columns,
+              hover_data={"date": "|%B %d, %Y"},
+              title=\'custom tick labels\')
+fig.update_xaxes(
+    dtick="M1",
+    tickformat="%b %Y",
+    range=["2018-01-01", "2018-12-31"])
+fig.show()`,
     },
     {
       metadata: {},
       cell_type: 'code',
       outputs: [],
       source:
-        'from matplotlib import pyplot as plt\nimport numpy as np\n%matplotlib widget\nx = np.linspace(0, 1, 100)\ny = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x)\nplt.figure(figsize=(6, 6))\nplt.plot(x, y)',
+      `from matplotlib import pyplot as plt
+import numpy as np
+%matplotlib widget
+x = np.linspace(0, 1, 100)
+y = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x)
+plt.figure(figsize=(6, 6))
+plt.plot(x, y)`,
     },
   ],
   metadata: {
@@ -175,7 +222,14 @@ const INIT_EXAMPLE = {
       },
       outputs: [],
       source:
-        "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')",
+      `import piplite
+await piplite.install('ipywidgets')
+await piplite.install('bqplot')
+await piplite.install('ipyleaflet')
+await piplite.install('ipyreact')
+await piplite.install('plotly')
+await piplite.install('nbformat')
+await piplite.install('ipympl')`,
     },
     ...WIDGETS_EXAMPLE.cells,
   ],
@@ -219,6 +273,13 @@ LitePythonInit.args = {
   ...Default.args,
   browser: 'true',
   initCode:
-    "import piplite\nawait piplite.install('ipywidgets')\nawait piplite.install('bqplot')\nawait piplite.install('ipyleaflet')\nawait piplite.install('ipyreact')\nawait piplite.install('plotly')\nawait piplite.install('nbformat')\nawait piplite.install('ipympl')",
+    `import piplite
+await piplite.install('ipywidgets')
+await piplite.install('bqplot')
+await piplite.install('ipyleaflet')
+await piplite.install('ipyreact')
+await piplite.install('plotly')
+await piplite.install('nbformat')
+await piplite.install('ipympl')`,
   nbformat: WIDGETS_EXAMPLE,
 };

packages/react/stories/Terminal.stories.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Jupyter, JupyterProps, Terminal } from '@datalayer/jupyter-react';
+import { Jupyter, Terminal } from '@datalayer/jupyter-react';
 import React from 'react';
 
 const meta: Meta<typeof Terminal> = {
@@ -15,7 +15,7 @@ const meta: Meta<typeof Terminal> = {
     // height: {
     //   type: 'string',
     // },
-    colorMode: {
+    colormode: {
       options: ['dark', 'light'],
     },
   },
@@ -41,14 +41,14 @@ const Template = (args, { globals: { labComparison } }) => {
 export const Default: Story = Template.bind({});
 Default.args = {
   height: '800px',
-  colorMode: 'light',
+  colormode: 'light',
 };
 
 export const Playground: Story = Template.bind({});
 Playground.args = {
   ...Default.args,
   height: '800px',
-  colorMode: 'dark',
+  colormode: 'dark',
 };
 
 export const WithInitialization: Story = Template.bind({});

packages/react/webpack.config.js

@@ -20,7 +20,7 @@ const ENTRY =
   // './src/app/App';
   // './src/examples/Bokeh';
   // './src/examples/Bqplot';
-  './src/examples/Cell';
+  // './src/examples/Cell';
   // './src/examples/CellLite';
   // './src/examples/Cells';
   // './src/examples/CellsExecute';
@@ -50,7 +50,7 @@ const ENTRY =
   // './src/examples/NotebookExtension';
   // './src/examples/NotebookKernelChange';
   // './src/examples/NotebookLess';
-  // './src/examples/NotebookLite';
+  './src/examples/NotebookLite';
   // './src/examples/NotebookLiteContext';
   // './src/examples/NotebookMutationsKernel';
   // './src/examples/NotebookMutationsServiceManager';

storybook/package.json

@@ -21,6 +21,7 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
+    "start": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "storybook:ci": "storybook dev -p 6006 --ci --quiet",
     "build:storybook": "storybook build"

storybook/src/stories/Cell.stories.tsx

@@ -6,7 +6,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Jupyter, Cell } from '@datalayer/jupyter-react';
-import { colorModeFromScheme } from './_utils/story-helpers';
+import { colormodeFromScheme } from './_utils/story-helpers';
 
 const meta: Meta<typeof Cell> = {
   title: 'Components/Cell',
@@ -54,9 +54,10 @@ const Template = (args, { globals: { colorScheme } }) => {
 
   return (
     <Jupyter
+      startDefaultKernel={true}
       lite={lite}
       initCode={initCode}
-      colorMode={colorModeFromScheme(colorScheme)}
+      colormode={colormodeFromScheme(colorScheme)}
       defaultKernelName={kernelName}
       jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
       jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"

storybook/src/stories/Console.mdx

@@ -14,6 +14,7 @@ import * as ConsoleStories from './Console.stories';
 This component displays a Jupyter Console.
 
 <Canvas of={ConsoleStories.Default} source={{code: `<Jupyter
+    startDefaultKernel={true}
     jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
     jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
 >
@@ -34,6 +35,7 @@ To use the [Pyodide](https://pyodide.org/) Python [kernel](https://github.com/ju
 you can simply set `lite` to `true`:
 
 <Canvas of={ConsoleStories.LitePython} source={{code: `<Jupyter
+    startDefaultKernel={true}
     lite={true}
 >
     <Console />
@@ -43,6 +45,7 @@ But you can also load your own JupyterLite kernel. For example here, the console
 the [JavaScript kernel](https://github.com/jupyterlite/jupyterlite/tree/main/py/jupyterlite-javascript-kernel).
 
 <Canvas of={ConsoleStories.LiteJavascript} source={{code: `<Jupyter
+    startDefaultKernel={true}
     lite={import('@jupyterlite/javascript-kernel-extension')}
     defaultKernelName={'javascript'}
 >