Enh/storybook

storybook/.storybook/main.ts

@@ -22,13 +22,9 @@ const config: StorybookConfig = {
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    {
-      name: getAbsolutePath('@storybook/addon-essentials'),
-      options: {
-        backgrounds: false,
-      },
-    },
-    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-docs'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
@@ -132,9 +128,6 @@ const config: StorybookConfig = {
     );
     return config;
   },
-  docs: {
-    autodocs: 'tag',
-  },
 };
 
 export default config;

storybook/.storybook/manager.ts

@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/internal/manager-api';
 import theme from './theme';
 
 addons.setConfig({

storybook/.storybook/preview.tsx

@@ -5,11 +5,10 @@
  */
 
 import React from "react";
-import { CodeOrSourceMdx } from "@storybook/addon-docs";
 import { Mermaid } from "mdx-mermaid/lib/Mermaid"
 import mermaid from 'mermaid';
 import zenuml from '@mermaid-js/mermaid-zenuml';
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-webpack5';
 import { toolbarTypes, withThemeProvider } from '../src/stories/_utils/story-helpers';
 
 import '@jupyterlab/apputils/style/materialcolors.css';
@@ -33,7 +32,7 @@ const preview: Preview = {
             ? 
               <Mermaid chart={props.children} />
             :
-              <CodeOrSourceMdx {...props} />
+              <code {...props} />
         }
       },
     },

storybook/.storybook/theme.ts

@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming';
 
 export default create({
   base: 'light',

storybook/package.json

@@ -48,21 +48,17 @@
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "@playwright/test": "^1.40.1",
     "@primer/octicons-react": "^19.15.1",
-    "@storybook/addon-essentials": "9.0.0-alpha.12",
-    "@storybook/addon-interactions": "9.0.0-alpha.10",
-    "@storybook/addon-links": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/addon-themes": "^9.0.15",
-    "@storybook/blocks": "9.0.0-alpha.17",
-    "@storybook/manager-api": "9.0.0-alpha.1",
-    "@storybook/react": "^9.0.15",
-    "@storybook/react-webpack5": "^9.0.15",
-    "@storybook/test": "9.0.0-alpha.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/addon-themes": "^9.1.2",
+    "@storybook/react-webpack5": "^9.1.2",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
     "mdx-mermaid": "^2.0.0",
     "mermaid": "^10.9.0",
-    "storybook": "^9.0.15",
+    "react-is": "^19.1.1",
+    "storybook": "^9.1.2",
     "webpack": "^5.74.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.9.3",

storybook/src/stories/Button.mdx

@@ -4,7 +4,7 @@
   ~ MIT License
 */}
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import {createLabButton} from './_utils/lab-builders';
 import * as ButtonStories from './Button.stories';
 

storybook/src/stories/Button.stories.tsx

@@ -16,122 +16,139 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@datalayer/jupyter-react';
 import { createLabButton } from './_utils/lab-builders';
 
-const meta: Meta<typeof Button> = {
+const meta = {
+  component: Button,
   title: 'Components/Button',
-} as Meta<typeof Button>;
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['default', 'primary', 'danger', 'invisible'],
+    },
+    alignContent: {
+      control: { type: 'radio' },
+      options: ['center', 'start'],
+    },
+    block: {
+      control: { type: 'boolean' },
+    },
+    leadingVisual: {
+      control: { type: 'select' },
+      options: [null, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon],
+      mapping: {
+        EyeClosedIcon,
+        EyeIcon,
+        SearchIcon,
+        XIcon,
+        HeartIcon,
+      },
+    },
+    trailingVisual: {
+      control: { type: 'select' },
+      options: [null, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon],
+      mapping: {
+        EyeClosedIcon,
+        EyeIcon,
+        SearchIcon,
+        XIcon,
+        HeartIcon,
+      },
+    },
+    trailingAction: {
+      control: { type: 'select' },
+      options: [null, TriangleDownIcon],
+      mapping: {
+        TriangleDownIcon,
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof meta>;
 
-const Template = (args, { globals: { labComparison } }) => {
+// Modern render function that handles both component and lab comparison
+const renderWithLabComparison = (args, { globals }) => {
+  const { labComparison } = globals || {};
   return (
     <>
-      <Button {...args}>{args.label ?? 'Default'}</Button>
+      <Button {...args}>{args.children || args.label || 'Button'}</Button>
       {labComparison === 'display' && (
         <div
           className="vertical-spacer"
           dangerouslySetInnerHTML={{ __html: createLabButton(args) }}
-        ></div>
+        />
       )}
     </>
   );
 };
 
-export const Default: Story = Template.bind({}) as Story;
-
-export const Playground: Story = {
-  render: (args, options) =>
-    Template.bind({})({ label: 'Default', ...args }, { globals: { labComparison: true } }),
-};
-Playground.argTypes = {
-  size: {
-    control: {
-      type: 'radio',
-    },
-    options: ['small', 'medium', 'large'],
+export const Default: Story = {
+  args: {
+    block: false,
+    size: 'medium',
+    disabled: false,
+    variant: 'default',
+    alignContent: 'center',
+    children: 'Default',
+    leadingVisual: null,
+    trailingVisual: null,
+    trailingAction: null,
   },
-  disabled: {
-    control: {
-      type: 'boolean',
-    },
-  },
-  variant: {
-    control: {
-      type: 'radio',
-    },
-    options: ['default', 'primary', 'danger', 'invisible'],
-  },
-  alignContent: {
-    control: {
-      type: 'radio',
-    },
-    options: ['center', 'start'],
-  },
-  block: {
-    control: {
-      type: 'boolean',
-    },
+  render: renderWithLabComparison,
+};
+
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    variant: 'primary',
+    children: 'Primary',
   },
-  leadingVisual: ([
-    EyeClosedIcon,
-    EyeIcon,
-    SearchIcon,
-    XIcon,
-    HeartIcon,
-  ]),
-  trailingVisual: ([
-    EyeClosedIcon,
-    EyeIcon,
-    SearchIcon,
-    XIcon,
-    HeartIcon,
-  ]),
-  trailingAction: ([TriangleDownIcon]),
+  render: renderWithLabComparison,
 };
-Playground.args = {
-  block: false,
-  size: 'medium',
-  disabled: false,
-  variant: 'default',
-  alignContent: 'center',
-  trailingVisual: null,
-  leadingVisual: null,
-  trailingAction: null,
+
+export const Danger: Story = {
+  args: {
+    ...Default.args,
+    variant: 'danger',
+    children: 'Danger',
+  },
+  render: renderWithLabComparison,
 };
 
-export const Primary: Story = Template.bind({}) as Story;
-Primary.args = {
-  block: false,
-  size: 'medium',
-  disabled: false,
-  variant: 'primary',
-  alignContent: 'center',
-  trailingVisual: null,
-  leadingVisual: null,
-  trailingAction: null,
+export const Invisible: Story = {
+  args: {
+    ...Default.args,
+    variant: 'invisible',
+    children: 'Invisible',
+  },
+  render: renderWithLabComparison,
 };
 
-export const Danger: Story = Template.bind({}) as Story;
-Danger.args = {
-  block: false,
-  size: 'medium',
-  disabled: false,
-  variant: 'danger',
-  alignContent: 'center',
-  trailingVisual: null,
-  leadingVisual: null,
-  trailingAction: null,
+export const Playground: Story = {
+  args: {
+    ...Default.args,
+    children: 'Playground',
+  },
+  render: renderWithLabComparison,
 };
 
-export const Invisible: Story = Template.bind({}) as Story;
-Invisible.args = {
-  block: false,
-  size: 'medium',
-  disabled: false,
-  variant: 'invisible',
-  alignContent: 'center',
-  trailingVisual: null,
-  leadingVisual: null,
-  trailingAction: null,
+export const WithIcons: Story = {
+  args: {
+    ...Default.args,
+    children: 'Search',
+    leadingVisual: SearchIcon,
+    trailingAction: TriangleDownIcon,
+  },
+  render: renderWithLabComparison,
 };

storybook/src/stories/Cell.mdx

@@ -4,7 +4,7 @@
   ~ MIT License
 */}
 
-import { Canvas, Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as CellStories from './Cell.stories';
 
 <Meta of={CellStories} />