;
+
+export default meta;
+type Story = StoryObj
+
+ ),
+ },
+};
+
+export const LongTitle: Story = {
+ args: {
+ title: 'This is a Very Long Title That Might Wrap to Multiple Lines',
+ linkLabel: 'See More',
+ linkRoute: '/details',
+ children: 'Content for the box with a long title.',
+ },
+};
diff --git a/src/components/display/HorizontalCenter.stories.tsx b/src/components/display/HorizontalCenter.stories.tsx
new file mode 100644
index 00000000..118f948b
--- /dev/null
+++ b/src/components/display/HorizontalCenter.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { HorizontalCenter } from './HorizontalCenter';
+
+const meta = {
+ title: 'Datalayer/Display/HorizontalCenter',
+ component: HorizontalCenter,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ },
+ argTypes: {
+ margin: {
+ control: 'text',
+ description: 'CSS margin value',
+ },
+ },
+} satisfies MetaRecent activity summary:
+-
+
- 5 notebooks created this week +
- 12 experiments completed +
- 3 models deployed +
+ Centered Content
+
+ ),
+ },
+};
+
+export const WithMargin: Story = {
+ args: {
+ margin: '20px',
+ children: (
+
+ Content with margin
+
+ ),
+ },
+};
+
+export const MultipleElements: Story = {
+ args: {
+ margin: '10px',
+ children: (
+ <>
+
+ Element 1
+
+
+ Element 2
+
+ Element 3
+
+ ),
+ },
+};
diff --git a/src/components/display/JupyterDialog.stories.tsx b/src/components/display/JupyterDialog.stories.tsx
new file mode 100644
index 00000000..cd4f80df
--- /dev/null
+++ b/src/components/display/JupyterDialog.stories.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { createElement } from 'react';
+import { Dialog } from '@jupyterlab/apputils';
+
+import { JupyterDialog } from './JupyterDialog';
+
+const meta = {
+ title: 'Datalayer/Display/JupyterDialog',
+ component: JupyterDialog,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ title: {
+ control: 'text',
+ description: 'Dialog title',
+ },
+ },
+} satisfies Meta$1
') + .replace(/^## (.+)$/gm, '$1
') + .replace(/\*\*(.+?)\*\*/g, '$1') + .replace(/\*(.+?)\*/g, '$1') + .replace(/\n/g, ''); + }, +}; + +export const SimpleMarkdown: Story = { + args: { + text: '# Hello World\nThis is **bold** and this is *italic*', + markdownParser: mockMarkdownParser as any, + }, +}; + +export const ComplexMarkdown: Story = { + args: { + text: `# Main Title +## Subtitle +This is a paragraph with **bold** and *italic* text. + +Another paragraph here.`, + markdownParser: mockMarkdownParser as any, + }, +}; + +export const WithSanitizer: Story = { + args: { + text: '# Hello World\n', + markdownParser: mockMarkdownParser as any, + sanitizer: { + sanitize: (html: string) => + html.replace(/
+
+ ),
+ ],
+};
diff --git a/src/components/display/VisuallyHidden.stories.tsx b/src/components/display/VisuallyHidden.stories.tsx
new file mode 100644
index 00000000..df9bec90
--- /dev/null
+++ b/src/components/display/VisuallyHidden.stories.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { VisuallyHidden } from './VisuallyHidden';
+
+const meta = {
+ title: 'Datalayer/Display/VisuallyHidden',
+ component: VisuallyHidden,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ },
+ argTypes: {
+ isVisible: {
+ control: 'boolean',
+ description: 'Whether the content should be visible',
+ },
+ },
+} satisfies Meta
+
+ Scroll down to see the "Go Top" button in action
+This is some content that makes the page scrollable.
+The button is positioned fixed at the bottom left.
+
+
+ Middle of content
+More content here...
+
+
+ End of content
+Try clicking the "Go Top" button to scroll back to top.
+
+
+ This is hidden text that provides additional context for screen readers.
+
+
+ ),
+ args: {
+ children:
+ 'Screen reader only: This section contains accessibility information',
+ },
+};
diff --git a/src/components/echarts/EChartsReact.stories.tsx b/src/components/echarts/EChartsReact.stories.tsx
new file mode 100644
index 00000000..6c97a1df
--- /dev/null
+++ b/src/components/echarts/EChartsReact.stories.tsx
@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { EChartsOption } from 'echarts';
+
+import { EChartsReact } from './EChartsReact';
+
+const meta = {
+ title: 'Datalayer/ECharts/EChartsReact',
+ component: EChartsReact,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ },
+ argTypes: {
+ loading: {
+ control: 'boolean',
+ description: 'Show loading state',
+ },
+ theme: {
+ control: 'select',
+ options: ['light', 'dark'],
+ description: 'Chart theme',
+ },
+ },
+} satisfies MetaHere is some visible content.
+And here is more visible content.
+
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ surveyName: {
+ control: 'text',
+ description: 'Specific survey name to show',
+ },
+ },
+} satisfies MetaMock Survey Component
+ +
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+};
+
+export const WhiteLabelHidden: Story = {
+ parameters: {
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../hooks',
+ default: {
+ useToast: () => ({
+ enqueueToast: (message: string, options?: any) => {
+ console.log('Toast:', message, options);
+ },
+ }),
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useSurveysStore: () => ({
+ surveys: new Map(),
+ createSurvey: (name: string, data: any) => {
+ console.log('Creating survey:', name, data);
+ },
+ }),
+ useCoreStore: () => ({
+ configuration: { whiteLabel: true },
+ }),
+ },
+ },
+ {
+ path: './surveys',
+ default: {
+ Survey2025_1: ({ formData, onSubmit }: any) => (
+ Mock Survey Component (Already Completed)
+Previous data: {JSON.stringify(formData)}
+ +Survey Component (should be hidden)
+ ),
+ },
+ },
+ ],
+ },
+ },
+};
diff --git a/src/components/flashes/FlashUnauthorized.stories.tsx b/src/components/flashes/FlashUnauthorized.stories.tsx
new file mode 100644
index 00000000..bf4eea7d
--- /dev/null
+++ b/src/components/flashes/FlashUnauthorized.stories.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FlashUnauthorized } from './FlashUnauthorized';
+
+const meta = {
+ title: 'Datalayer/Flashes/FlashUnauthorized',
+ component: FlashUnauthorized,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../hooks',
+ default: {
+ useNavigate: () => (path: string, e?: Event) => {
+ console.log('Navigate to:', path);
+ },
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta
+
+
+ );
+ },
+ },
+ {
+ path: '@rjsf/validator-ajv8',
+ default: {
+ // Mock validator - in a real implementation this would validate the form
+ validate: () => ({ errors: [] }),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ readonly: {
+ control: 'boolean',
+ description: 'Whether the form is readonly',
+ },
+ formData: {
+ control: 'object',
+ description: 'Pre-populated form data',
+ },
+ },
+} satisfies Meta
+
+ );
+ },
+ args: {
+ onSubmit: (data, e) => {
+ console.log('Survey submitted:', data);
+ alert('Survey submitted! Check console for data.');
+ },
+ readonly: false,
+ },
+};
diff --git a/src/components/iam/ExternalTokenSilentLogin.stories.tsx b/src/components/iam/ExternalTokenSilentLogin.stories.tsx
new file mode 100644
index 00000000..8cda6bbd
--- /dev/null
+++ b/src/components/iam/ExternalTokenSilentLogin.stories.tsx
@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ExternalTokenSilentLogin } from './ExternalTokenSilentLogin';
+
+const meta = {
+ title: 'Datalayer/IAM/ExternalTokenSilentLogin',
+ component: ExternalTokenSilentLogin,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../state',
+ default: {
+ useIAMStore: () => ({
+ logout: () => {
+ console.log('Logging out');
+ },
+ checkIAMToken: () => Promise.resolve({ valid: true }),
+ externalToken: 'mock-external-token',
+ }),
+ },
+ },
+ {
+ path: '../../hooks',
+ default: {
+ useToast: () => ({
+ enqueueToast: (message: string, options?: any) => {
+ console.log('Toast:', message, options);
+ },
+ }),
+ useIAM: () => ({
+ loginAndNavigate: (
+ token: string,
+ logout: Function,
+ checkToken: Function,
+ ) => {
+ console.log('Login and navigate with token:', token);
+ return Promise.resolve();
+ },
+ }),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ message: {
+ control: 'text',
+ description: 'Message to display during login',
+ },
+ },
+} satisfies Meta2025 Data Survey
++ Help us understand your data needs and how we can better serve you. + This survey includes questions about your profile and data-related + activities. +
+
+
+ + Survey Features: +
+-
+
- Profile selection (required) +
- Multiple activity selection (required) +
- Form validation +
- Readonly mode available +
+
+ ),
+};
+
+export const AllTypes: Story = {
+ render: () => (
+
+ {[
+ 'assignment',
+ 'authoring',
+ 'cell',
+ 'content',
+ 'credits',
+ 'dataset',
+ 'datasource',
+ 'document',
+ 'documentation',
+ 'environment',
+ 'exercise',
+ 'growth',
+ 'home',
+ 'invite',
+ 'runtime',
+ 'runtime-snapshot',
+ 'library',
+ 'lesson',
+ 'mail',
+ 'management',
+ 'notebook',
+ 'organization',
+ 'onboarding',
+ 'page',
+ 'settings',
+ 'share',
+ 'space',
+ 'success',
+ 'support',
+ 'storage',
+ 'tag',
+ 'team',
+ 'usage',
+ 'user',
+ 'undefined',
+ ].map(type => (
+
+ ),
+};
diff --git a/src/components/labels/VisibilityLabel.stories.tsx b/src/components/labels/VisibilityLabel.stories.tsx
new file mode 100644
index 00000000..55b15c7e
--- /dev/null
+++ b/src/components/labels/VisibilityLabel.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { VisibilityLabel } from './VisibilityLabel';
+
+const meta = {
+ title: 'Datalayer/Labels/VisibilityLabel',
+ component: VisibilityLabel,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ isPublic: {
+ control: { type: 'select' },
+ options: [true, false, undefined],
+ description: 'Whether the item is public, private, or undefined',
+ },
+ },
+} satisfies Meta
+
+ ))}
+ {type}
+ + {children} +
+ ), + Text: ({ children, sx, ...props }) => ( + + {children} + + ), + }, + }, + { + path: '@datalayer/primer-addons', + default: { + Box: ({ children, mt, ...props }) => ( +
+ {children}
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ studentItem: {
+ description: 'Student item data containing grades information',
+ },
+ },
+} satisfies Meta{children}
,
+ },
+ },
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ Lumino: ({ children }) => (
+
+ Mock Jupyter Notebook Panel:{' '}
+ {children?.title?.label || 'Untitled'}
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ height: {
+ control: 'text',
+ description: 'Height of the notebook component',
+ },
+ },
+} satisfies Meta
+ {children}
+
+ ),
+ },
+ },
+ {
+ path: 'react-sparklines',
+ default: {
+ Sparklines: ({ children, data }) => (
+
+ ),
+ SparklinesBars: () => null,
+ SparklinesLine: () => null,
+ SparklinesReferenceLine: () => null,
+ },
+ },
+ {
+ path: '../../theme',
+ default: {
+ DatalayerThemeProvider: ({ children }) => children,
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta
+
+ ),
+ },
+};
+
+export const ContainerWithCustomStyle: Story = {
+ args: {
+ children: (
+ Container Content
+This content is centered within a max-width container of 1024px.
+
+
+ ),
+ style: {
+ background: '#ffffff',
+ padding: '1rem',
+ border: '2px solid #0366d6',
+ borderRadius: '8px',
+ },
+ },
+};
+
+export const ContainerWithMultipleChildren: Story = {
+ args: {
+ children: [
+ Custom Styled Container
+Container with custom background and styling.
+
+
,
+ First Child
+This is the first child element.
+
+
,
+ ],
+ },
+};
+
+const RedlineBackgroundMeta = {
+ title: 'Datalayer/Primer/RedlineBackground',
+ component: RedlineBackground,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component:
+ 'A diagnostic component that shows a red checkerboard background pattern, useful for debugging layouts.',
+ },
+ },
+ },
+ argTypes: {
+ height: {
+ control: 'number',
+ description: 'Height of the redline background in pixels',
+ },
+ hasBorder: {
+ control: 'boolean',
+ description: 'Whether to show a border around the component',
+ },
+ },
+} satisfies MetaSecond Child
+This is the second child element.
+
+ Content over redline background
+
+ ),
+ },
+ };
+
+export const RedlineBackgroundNoBorder: StoryObj
+ No border redline background
+
+ ),
+ },
+ };
+
+export const RedlineBackgroundTall: StoryObj
+
+ ),
+ },
+};
+
+export const RedlineBackgroundEmpty: StoryObjTall Redline Background
++ This demonstrates a taller redline background for debugging larger + layouts. +
+
+
+ );
+};
+
+const meta = {
+ title: 'Datalayer/Primer/Portals',
+ component: PortalsDemo,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component:
+ 'Sets up the Primer portal root for React components. This is a utility function that configures the DOM for Primer portals.',
+ },
+ },
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ registerPortalRoot: element => {
+ console.log('Registered portal root:', element);
+ },
+ },
+ },
+ ],
+ },
+ },
+} satisfies MetaPrimer Portals Setup
+This component sets up the Primer portal root for React components.
++ Check the DOM to see the portal root has been configured on the body + element. +
+
+ Portal Configuration:
+
+ -
+
- Portal root ID: __primerPortalRoot__ +
- Color mode: light +
- Light theme: light +
- Dark theme: dark +
+ Theme: {theme?.name || 'JupyterLab'}
+ {children}
+
+ ),
+ BaseStyles: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ jupyterLabTheme: {
+ name: 'JupyterLab',
+ colorScheme: 'light',
+ colors: {
+ primary: '#0969da',
+ secondary: '#656d76',
+ },
+ },
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Shows how the Styles component applies theming to content.',
+ },
+ },
+ },
+};
diff --git a/src/components/progress/ConsumptionBar.stories.tsx b/src/components/progress/ConsumptionBar.stories.tsx
new file mode 100644
index 00000000..bf073f9d
--- /dev/null
+++ b/src/components/progress/ConsumptionBar.stories.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ConsumptionBar } from './ConsumptionBar';
+
+const meta = {
+ title: 'Datalayer/Progress/ConsumptionBar',
+ component: ConsumptionBar,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ burningRate: {
+ control: { type: 'number', min: 0, step: 0.1 },
+ description: 'Credits burning rate per second',
+ },
+ startedAt: {
+ control: { type: 'number' },
+ description: 'Start timestamp (Unix seconds)',
+ },
+ expiredAt: {
+ control: { type: 'number' },
+ description: 'Expiration timestamp (Unix seconds)',
+ },
+ },
+} satisfies Meta
+
+ Styled Content
++ This content should inherit the base Primer styles and JupyterLab + theme. +
+ +
+ {children}
+
+ ),
+ },
+ },
+ {
+ path: '../../components/progress',
+ default: {
+ ConsumptionBar: ({
+ startedAt,
+ expiredAt,
+ burningRate,
+ onClick,
+ onUpdate,
+ style,
+ }) => (
+
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ serviceManager: createMockServiceManager(),
+ kernelId: 'kernel-1',
+ onClick: () => console.log('Credits indicator clicked'),
+ onUpdate: (progress, duration) =>
+ console.log('Progress:', progress, 'Duration:', duration),
+ },
+};
+
+export const HighBurningRate: Story = {
+ args: {
+ serviceManager: createMockServiceManager(),
+ kernelId: 'kernel-2',
+ onClick: () => console.log('High burning rate kernel clicked'),
+ onUpdate: (progress, duration) =>
+ console.log('High burning rate progress:', progress),
+ },
+};
+
+export const LowBurningRate: Story = {
+ args: {
+ serviceManager: createMockServiceManager(),
+ kernelId: 'kernel-3',
+ onClick: () => console.log('Low burning rate kernel clicked'),
+ onUpdate: (progress, duration) =>
+ console.log('Low burning rate progress:', progress),
+ },
+};
+
+export const WithoutCallbacks: Story = {
+ args: {
+ serviceManager: createMockServiceManager(),
+ kernelId: 'kernel-1',
+ },
+};
+
+const NonExistentKernelServiceManager = {
+ runtimesManager: {
+ findById: async (kernelId: string) => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return undefined; // Simulate kernel not found
+ },
+ },
+};
+
+export const KernelNotFound: Story = {
+ args: {
+ serviceManager: NonExistentKernelServiceManager,
+ kernelId: 'non-existent-kernel',
+ onClick: () => console.log('Non-existent kernel clicked'),
+ },
+};
diff --git a/src/components/progress/ProgressBar.stories.tsx b/src/components/progress/ProgressBar.stories.tsx
new file mode 100644
index 00000000..15e7d506
--- /dev/null
+++ b/src/components/progress/ProgressBar.stories.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProgressBar } from './ProgressBar';
+
+const meta = {
+ title: 'Datalayer/Progress/ProgressBar',
+ component: ProgressBar,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'padded',
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/progress/ProgressRing.stories.tsx b/src/components/progress/ProgressRing.stories.tsx
new file mode 100644
index 00000000..b1e02dd2
--- /dev/null
+++ b/src/components/progress/ProgressRing.stories.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProgressRing } from './ProgressRing';
+
+const meta = {
+ title: 'Datalayer/Progress/ProgressRing',
+ component: ProgressRing,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ progress: {
+ control: { type: 'range', min: 0, max: 100, step: 1 },
+ description: 'Progress value (0-100)',
+ },
+ color: {
+ control: 'color',
+ description: 'Color of the progress ring',
+ },
+ title: {
+ control: 'text',
+ description: 'Accessible title for the progress ring',
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ progress: 75,
+ title: 'Loading progress',
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ progress: 0,
+ title: 'Not started',
+ },
+};
+
+export const Complete: Story = {
+ args: {
+ progress: 100,
+ title: 'Complete',
+ },
+};
+
+export const CustomColor: Story = {
+ args: {
+ progress: 60,
+ color: '#ff6b6b',
+ title: 'Custom colored progress',
+ },
+};
+
+export const MultipleRings: Story = {
+ render: () => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ duration: 30,
+ },
+};
+
+export const ShortTimer: Story = {
+ args: {
+ duration: 10,
+ },
+};
+
+export const LongTimer: Story = {
+ args: {
+ duration: 300,
+ },
+};
diff --git a/src/components/runtimes/RuntimeCellVariables.stories.tsx b/src/components/runtimes/RuntimeCellVariables.stories.tsx
new file mode 100644
index 00000000..50cee59f
--- /dev/null
+++ b/src/components/runtimes/RuntimeCellVariables.stories.tsx
@@ -0,0 +1,313 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimeCellVariables } from './RuntimeCellVariables';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimeCellVariables',
+ component: RuntimeCellVariables,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Autocomplete: {
+ Input: ({ tokens, onTokenRemove, onChange, value, ...props }) => (
+
+ {children}
+
+ );
+ },
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: (key, ...args) => {
+ if (args.length > 0) {
+ return key.replace('%1', args[0]);
+ }
+ return key;
+ },
+ }),
+ },
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ inputs: {
+ control: 'object',
+ description: 'Variable names to be imported',
+ },
+ output: {
+ control: 'text',
+ description: 'Variable name to be exported',
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const InteractiveTemplate = args => {
+ const [inputs, setInputs] = useState(args.inputs || []);
+ const [output, setOutput] = useState(args.output || '');
+
+ const mockGetInputOptions = async () => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ return ['df', 'x', 'y', 'model', 'data', 'results', 'config'];
+ };
+
+ const mockGetOutputOptions = async () => {
+ await new Promise(resolve => setTimeout(resolve, 300));
+ return ['processed_data', 'analysis_results', 'final_model', 'predictions'];
+ };
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const PythonDataAnalysis: Story = {
+ args: {
+ model: createMockCellModel(`
+import pandas as pd
+import numpy as np
+
+# Load data
+df = pd.read_csv('data.csv')
+x = df['feature1']
+y = df['target']
+
+# Create model
+from sklearn.linear_model import LinearRegression
+model = LinearRegression()
+model.fit(x.values.reshape(-1, 1), y)
+
+# Make predictions
+result = model.predict(x.values.reshape(-1, 1))
+ `),
+ onClose: () => console.log('Dialog closed'),
+ preference: {
+ id: 'python3-kernel',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ },
+};
+
+export const SimpleCalculation: Story = {
+ args: {
+ model: createMockCellModel(`
+a = 10
+b = 20
+result = a + b
+print(f"Result: {result}")
+ `),
+ onClose: () => console.log('Dialog closed'),
+ preference: {
+ id: 'python3-kernel',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ },
+};
+
+export const MachineLearning: Story = {
+ args: {
+ model: createMockCellModel(`
+from sklearn.datasets import load_iris
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.model_selection import train_test_split
+
+# Load dataset
+data = load_iris()
+X, y = data.data, data.target
+
+# Split data
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=42)
+
+# Train model
+classifier = RandomForestClassifier(n_estimators=100, random_state=42)
+classifier.fit(X_train, y_train)
+
+# Evaluate
+accuracy = classifier.score(X_test, y_test)
+predictions = classifier.predict(X_test)
+ `),
+ onClose: () => console.log('Dialog closed'),
+ preference: {
+ id: 'python3-kernel',
+ kernelDisplayName: 'Python 3 (ML)',
+ language: 'python',
+ },
+ },
+};
+
+export const EmptyCell: Story = {
+ args: {
+ model: createMockCellModel(''),
+ onClose: () => console.log('Dialog closed'),
+ preference: {
+ id: 'python3-kernel',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ },
+};
+
+export const NoPreference: Story = {
+ args: {
+ model: createMockCellModel(`
+data = [1, 2, 3, 4, 5]
+mean_value = sum(data) / len(data)
+ `),
+ onClose: () => console.log('Dialog closed'),
+ },
+};
diff --git a/src/components/runtimes/RuntimeLauncherDialog.stories.tsx b/src/components/runtimes/RuntimeLauncherDialog.stories.tsx
new file mode 100644
index 00000000..9ff04e39
--- /dev/null
+++ b/src/components/runtimes/RuntimeLauncherDialog.stories.tsx
@@ -0,0 +1,438 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimeLauncherDialog } from './RuntimeLauncherDialog';
+import type { IRemoteServicesManager } from '../../api';
+import type { IRuntimeDesc } from '../../models';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimeLauncherDialog',
+ component: RuntimeLauncherDialog,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Button: ({ children, onClick, variant = 'primary', ...props }) => (
+
+ ),
+ FormControl: {
+ Label: ({ children, ...props }) => (
+
+ ),
+ },
+ Select: ({ children, value, onChange, ...props }) => (
+
+ ),
+ TextInput: ({ value, onChange, placeholder, ...props }) => (
+
+ ),
+ ToggleSwitch: ({ checked, onClick, disabled, ...props }) => (
+
+ ),
+ Spinner: ({ size = 'medium' }) => (
+
+ ),
+ Text: ({ children, ...props }) => (
+ {children}
+ ),
+ Tooltip: ({ children }) =>
+ {children}
+
+ );
+ },
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ iamStore: {
+ getState: () => ({
+ user: { name: 'Test User', email: 'test@example.com' },
+ }),
+ },
+ useCoreStore: () => ({
+ configuration: { some: 'config' },
+ }),
+ useIAMStore: () => ({
+ credits: { available: 100, used: 20 },
+ refreshCredits: () => {},
+ }),
+ useRuntimesStore: () => ({
+ jupyterLabAdapter: {},
+ }),
+ },
+ },
+ {
+ path: '../../hooks',
+ default: {
+ useNavigate: () => url => console.log('Navigate to:', url),
+ },
+ },
+ {
+ path: '../../utils',
+ default: {
+ createNotebook: () => Promise.resolve({ content: 'notebook' }),
+ sleep: ms => new Promise(resolve => setTimeout(resolve, ms)),
+ },
+ },
+ {
+ path: '../display',
+ default: {
+ Markdown: ({ children }) => ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock manager for stories
+const createMockManager = (): IRemoteServicesManager =>
+ ({
+ environments: {
+ get: () => [
+ {
+ name: 'python-3.11',
+ title: 'Python 3.11',
+ kernel: {
+ givenNameTemplate: 'Python Environment',
+ },
+ example: {
+ content: 'print("Hello World")',
+ },
+ },
+ {
+ name: 'r-4.3',
+ title: 'R 4.3',
+ kernel: {
+ givenNameTemplate: 'R Environment',
+ },
+ },
+ {
+ name: 'julia-1.9',
+ title: 'Julia 1.9',
+ kernel: {
+ givenNameTemplate: 'Julia Environment',
+ },
+ example: {
+ content: 'println("Hello Julia")',
+ },
+ },
+ ],
+ },
+ runtimes: {
+ create: async () => ({
+ id: 'runtime-123',
+ name: 'Test Runtime',
+ status: 'running',
+ }),
+ },
+ }) as any;
+
+export const Default: Story = {
+ args: {
+ dialogTitle: 'Start New Runtime',
+ manager: createMockManager(),
+ onSubmit: (spec?: IRuntimeDesc) => {
+ console.log('Runtime submitted:', spec);
+ },
+ startKernel: true,
+ },
+};
+
+export const WithExample: Story = {
+ args: {
+ dialogTitle: 'Start Runtime with Example',
+ manager: createMockManager(),
+ onSubmit: (spec?: IRuntimeDesc) => {
+ console.log('Runtime with example submitted:', spec);
+ },
+ startKernel: 'with-example',
+ },
+};
+
+export const DeferredStart: Story = {
+ args: {
+ dialogTitle: 'Configure Runtime (Deferred Start)',
+ manager: createMockManager(),
+ onSubmit: (spec?: IRuntimeDesc) => {
+ console.log('Deferred runtime submitted:', spec);
+ },
+ startKernel: 'defer',
+ },
+};
+
+export const WithSnapshot: Story = {
+ args: {
+ dialogTitle: 'Restore from Snapshot',
+ manager: createMockManager(),
+ onSubmit: (spec?: IRuntimeDesc) => {
+ console.log('Snapshot runtime submitted:', spec);
+ },
+ startKernel: true,
+ kernelSnapshot: {
+ id: 'snapshot-123',
+ name: 'My Snapshot',
+ environment: 'python-3.11',
+ created_at: '2023-01-01T00:00:00Z',
+ } as any,
+ },
+};
+
+export const WithUpgradeOption: Story = {
+ args: {
+ dialogTitle: 'Runtime Launcher',
+ manager: createMockManager(),
+ onSubmit: (spec?: IRuntimeDesc) => {
+ console.log('Runtime submitted:', spec);
+ },
+ startKernel: true,
+ upgradeSubscription: '/upgrade',
+ },
+};
diff --git a/src/components/runtimes/RuntimeLauncherDialog.tsx b/src/components/runtimes/RuntimeLauncherDialog.tsx
index 5e9555d7..06a7d12d 100644
--- a/src/components/runtimes/RuntimeLauncherDialog.tsx
+++ b/src/components/runtimes/RuntimeLauncherDialog.tsx
@@ -533,3 +533,6 @@ export function KernelLauncherDialog(
);
}
+
+// Alias for consistency with component naming convention
+export const RuntimeLauncherDialog = KernelLauncherDialog;
diff --git a/src/components/runtimes/RuntimePickerBase.stories.tsx b/src/components/runtimes/RuntimePickerBase.stories.tsx
new file mode 100644
index 00000000..e14a33ef
--- /dev/null
+++ b/src/components/runtimes/RuntimePickerBase.stories.tsx
@@ -0,0 +1,466 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimePickerBase } from './RuntimePickerBase';
+import type { IRuntimeDesc, IMultiServiceManager } from '../../api';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimePickerBase',
+ component: RuntimePickerBase,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ ActionList: {
+ Item: ({ children, onClick, selected, ...props }) => (
+
+ {children}
+
+ );
+ },
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ CpuIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/icons-react',
+ default: {
+ BrowserIcon: () => (
+
+ ),
+ LaptopSimpleIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/icons-react/data1/CloudUploadIcon',
+ default: () => (
+
+ ),
+ },
+ {
+ path: '../../components/progress',
+ default: {
+ CreditsIndicator: ({ credits }) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock runtime descriptions
+const mockRuntimeDescs: IRuntimeDesc[] = [
+ {
+ id: 'python-3.11-local',
+ name: 'python3',
+ display_name: 'Python 3.11',
+ language: 'python',
+ location: 'local',
+ spec: {},
+ },
+ {
+ id: 'python-3.11-remote',
+ name: 'python3-remote',
+ display_name: 'Python 3.11 (Remote)',
+ language: 'python',
+ location: 'remote',
+ spec: {},
+ },
+ {
+ id: 'r-4.3-remote',
+ name: 'ir-remote',
+ display_name: 'R 4.3 (Remote)',
+ language: 'r',
+ location: 'remote',
+ spec: {},
+ },
+ {
+ id: 'julia-1.9-remote',
+ name: 'julia-remote',
+ display_name: 'Julia 1.9 (Remote)',
+ language: 'julia',
+ location: 'remote',
+ spec: {},
+ },
+];
+
+// Mock multi service manager
+const mockMultiServiceManager: IMultiServiceManager = {
+ local: {
+ kernelspecs: {
+ specs: {
+ python3: mockRuntimeDescs[0],
+ },
+ },
+ },
+ remote: {
+ kernelspecs: {
+ specs: {
+ 'python3-remote': mockRuntimeDescs[1],
+ 'ir-remote': mockRuntimeDescs[2],
+ 'julia-remote': mockRuntimeDescs[3],
+ },
+ },
+ },
+} as any;
+
+const InteractiveTemplate = args => {
+ const [runtimeDesc, setRuntimeDesc] = useState(
+ args.runtimeDesc,
+ );
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock CodeCellModel
+const createMockModel = (hasCellKernel = false, isForeign = false) => ({
+ id: 'cell-123',
+ getMetadata: (key: string) => {
+ if (key === 'datalayer') {
+ return isForeign
+ ? {
+ kernel: {
+ id: 'python-3.11',
+ name: 'python3',
+ display_name: 'Python 3.11',
+ language: 'python',
+ params: { notebook: !hasCellKernel },
+ },
+ }
+ : {};
+ }
+ return {};
+ },
+ metadataChanged: {
+ connect: () => {},
+ disconnect: () => {},
+ },
+ setMetadata: () => {},
+});
+
+// Mock multi service manager
+const mockMultiServiceManager: IMultiServiceManager = {
+ local: {
+ kernelspecs: {
+ specs: {
+ python3: {
+ id: 'python3-local',
+ name: 'python3',
+ display_name: 'Python 3.11',
+ language: 'python',
+ location: 'local',
+ spec: {},
+ },
+ },
+ },
+ },
+ remote: {
+ environments: {
+ get: () => [
+ {
+ name: 'python3',
+ language: 'python',
+ title: 'Python 3.11',
+ snippets: [
+ { id: '1', title: 'Hello World', content: 'print("Hello")' },
+ {
+ id: '2',
+ title: 'Import Libraries',
+ content: 'import numpy as np',
+ },
+ ],
+ },
+ {
+ name: 'ir',
+ language: 'r',
+ title: 'R 4.3',
+ snippets: [{ id: '3', title: 'Basic Plot', content: 'plot(1:10)' }],
+ },
+ ],
+ },
+ },
+} as any;
+
+export const Default: Story = {
+ args: {
+ model: createMockModel(),
+ multiServiceManager: mockMultiServiceManager,
+ logIn: () => console.log('Login requested'),
+ },
+};
+
+export const WithCellKernel: Story = {
+ args: {
+ model: createMockModel(true, true),
+ multiServiceManager: mockMultiServiceManager,
+ logIn: () => console.log('Login requested'),
+ },
+};
+
+export const ForeignKernel: Story = {
+ args: {
+ model: createMockModel(false, true),
+ multiServiceManager: mockMultiServiceManager,
+ logIn: () => console.log('Login requested'),
+ },
+};
+
+export const WithSessionContext: Story = {
+ args: {
+ model: createMockModel(),
+ multiServiceManager: mockMultiServiceManager,
+ sessionContext: {
+ session: {
+ kernel: {
+ name: 'python3',
+ },
+ },
+ } as any,
+ logIn: () => console.log('Login requested'),
+ },
+};
diff --git a/src/components/runtimes/RuntimePickerNotebook.stories.tsx b/src/components/runtimes/RuntimePickerNotebook.stories.tsx
new file mode 100644
index 00000000..261dca27
--- /dev/null
+++ b/src/components/runtimes/RuntimePickerNotebook.stories.tsx
@@ -0,0 +1,449 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { RuntimePickerNotebook } from './RuntimePickerNotebook';
+import type { IMultiServiceManager, IDatalayerSessionContext } from '../../api';
+import type { CommandRegistry } from '@lumino/commands';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimePickerNotebook',
+ component: RuntimePickerNotebook,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ ActionList: {
+ Item: ({ children, onClick, selected, ...props }) => (
+
+ {children}
+
+ );
+ },
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ AlertIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ KernelExecutor: ({ children }) => ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock session context
+const createMockSessionContext = (
+ hasKernel = false,
+): IDatalayerSessionContext =>
+ ({
+ specsManager: {
+ specs: {
+ kernelspecs: {
+ python3: {
+ id: 'python3',
+ name: 'python3',
+ display_name: 'Python 3.11',
+ language: 'python',
+ spec: {},
+ },
+ },
+ },
+ },
+ session: hasKernel
+ ? {
+ kernel: {
+ name: 'python3',
+ id: 'kernel-123',
+ },
+ }
+ : null,
+ sessionChanged: {
+ connect: () => {},
+ disconnect: () => {},
+ },
+ }) as any;
+
+// Mock multi service manager
+const mockMultiServiceManager: IMultiServiceManager = {
+ local: {
+ kernelspecs: {
+ specs: {
+ python3: {
+ id: 'python3-local',
+ name: 'python3',
+ display_name: 'Python 3.11',
+ language: 'python',
+ location: 'local',
+ spec: {},
+ },
+ },
+ },
+ },
+ remote: {
+ environments: {
+ get: () => [
+ {
+ name: 'python3',
+ language: 'python',
+ title: 'Python 3.11',
+ },
+ {
+ name: 'ir',
+ language: 'r',
+ title: 'R 4.3',
+ },
+ ],
+ },
+ },
+} as any;
+
+// Mock command registry
+const mockCommands: CommandRegistry = {
+ execute: () => Promise.resolve(),
+} as any;
+
+export const Default: Story = {
+ args: {
+ sessionContext: createMockSessionContext(),
+ multiServiceManager: mockMultiServiceManager,
+ setValue: value => console.log('Value set:', value),
+ close: () => console.log('Dialog closed'),
+ commands: mockCommands,
+ logIn: () => console.log('Login requested'),
+ },
+};
+
+export const WithActiveKernel: Story = {
+ args: {
+ sessionContext: createMockSessionContext(true),
+ multiServiceManager: mockMultiServiceManager,
+ setValue: value => console.log('Value set:', value),
+ close: () => console.log('Dialog closed'),
+ commands: mockCommands,
+ logIn: () => console.log('Login requested'),
+ },
+};
+
+export const WithVariableTransfer: Story = {
+ args: {
+ sessionContext: createMockSessionContext(true),
+ multiServiceManager: mockMultiServiceManager,
+ setValue: value => console.log('Value set:', value),
+ close: () => console.log('Dialog closed'),
+ commands: mockCommands,
+ logIn: () => console.log('Login requested'),
+ },
+};
diff --git a/src/components/runtimes/RuntimeReservationControl.stories.tsx b/src/components/runtimes/RuntimeReservationControl.stories.tsx
new file mode 100644
index 00000000..405556ca
--- /dev/null
+++ b/src/components/runtimes/RuntimeReservationControl.stories.tsx
@@ -0,0 +1,279 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimeReservationControl } from './RuntimeReservationControl';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimeReservationControl',
+ component: RuntimeReservationControl,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ FormControl: ({ children, disabled, sx }) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+const InteractiveTemplate = args => {
+ const [time, setTime] = useState(args.time);
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock session connection
+const createMockSessionConnection = (connected = true) => {
+ if (!connected) return undefined;
+
+ return {
+ kernel: {
+ id: 'kernel-123',
+ name: 'python3',
+ connectionStatus: 'connected',
+ status: 'idle',
+ },
+ statusChanged: {
+ connect: () => {},
+ disconnect: () => {},
+ },
+ connectionStatusChanged: {
+ connect: () => {},
+ disconnect: () => {},
+ },
+ };
+};
+
+export const Default: Story = {
+ args: {
+ assignRuntime: async (options: IRuntimeAssignOptions) => {
+ console.log('Runtime assigned:', options);
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ sessionConnection: createMockSessionConnection(false),
+ },
+};
+
+export const WithActiveSession: Story = {
+ args: {
+ assignRuntime: async (options: IRuntimeAssignOptions) => {
+ console.log('Runtime assigned:', options);
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ sessionConnection: createMockSessionConnection(true),
+ },
+};
+
+export const WithBusyKernel: Story = {
+ args: {
+ assignRuntime: async (options: IRuntimeAssignOptions) => {
+ console.log('Runtime assigned:', options);
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ sessionConnection: {
+ ...createMockSessionConnection(true),
+ kernel: {
+ ...createMockSessionConnection(true)?.kernel,
+ status: 'busy',
+ },
+ },
+ },
+};
+
+export const DisconnectedKernel: Story = {
+ args: {
+ assignRuntime: async (options: IRuntimeAssignOptions) => {
+ console.log('Runtime assigned:', options);
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ sessionConnection: {
+ ...createMockSessionConnection(true),
+ kernel: {
+ ...createMockSessionConnection(true)?.kernel,
+ connectionStatus: 'disconnected',
+ status: 'dead',
+ },
+ },
+ },
+};
diff --git a/src/components/runtimes/RuntimeVariables.stories.tsx b/src/components/runtimes/RuntimeVariables.stories.tsx
new file mode 100644
index 00000000..bea680d1
--- /dev/null
+++ b/src/components/runtimes/RuntimeVariables.stories.tsx
@@ -0,0 +1,270 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimeVariables } from './RuntimeVariables';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimeVariables',
+ component: RuntimeVariables,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ IconButton: ({
+ icon: Icon,
+ onClick,
+ 'aria-label': ariaLabel,
+ ...props
+ }) => (
+
+ ),
+ ToggleSwitch: ({ checked, onChange, ...props }) => (
+
+ ),
+ FormControl: ({ children }) => (
+
+ {children}
+
+ ),
+ Cell: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: key => key,
+ }),
+ },
+ },
+ },
+ {
+ path: '@jupyterlab/ui-components',
+ default: {
+ checkIcon: () => (
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ kernelVariables: {
+ control: 'object',
+ description: 'Available kernel variables mapping (name -> type)',
+ },
+ transferVariables: {
+ control: 'boolean',
+ description: 'Whether to enable variable transfer',
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const InteractiveTemplate = args => {
+ const [selectedVariables, setSelectedVariables] = useState(
+ args.selectedVariables || [],
+ );
+ const [transferVariables, setTransferVariables] = useState(
+ args.transferVariables ?? true,
+ );
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const WithButton: Story = {
+ args: {
+ onEndCapture: url => {
+ console.log('Screenshot captured:', url);
+ },
+ onStartCapture: () => {
+ console.log('Screenshot started');
+ },
+ },
+ render: args => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const InToolbar: Story = {
+ render: () => (
+ {children} ;
+ },
+ Flash: ({ children, variant }) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ disabled: false,
+ children: 'Snapshot',
+ },
+};
+
+export const WithBrowserKernel: Story = {
+ args: {
+ disabled: false,
+ connection: mockConnection,
+ multiServiceManager: mockMultiServiceManager,
+ children: 'Browser Snapshot',
+ },
+};
+
+export const WithRemoteKernel: Story = {
+ args: {
+ disabled: false,
+ podName: 'runtime-pod-12345',
+ multiServiceManager: mockMultiServiceManager,
+ children: 'Remote Snapshot',
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ children: 'Disabled Snapshot',
+ },
+};
+
+export const LoadingState: Story = {
+ args: {
+ disabled: false,
+ connection: mockConnection,
+ multiServiceManager: mockMultiServiceManager,
+ children: 'Taking Snapshot...',
+ },
+ parameters: {
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../state',
+ default: {
+ useRuntimesStore: () => ({
+ addRuntimeSnapshot: snapshot => {
+ console.log('Adding runtime snapshot:', snapshot);
+ },
+ runtimesRunUrl: 'https://example.com',
+ runtimeSnapshots: mockSnapshots,
+ setRuntimeSnapshots: snapshots => {
+ console.log('Setting runtime snapshots:', snapshots);
+ },
+ }),
+ },
+ },
+ ],
+ },
+ },
+};
+
+export const EmptySnapshots: Story = {
+ args: {
+ disabled: false,
+ connection: mockConnection,
+ multiServiceManager: mockMultiServiceManager,
+ children: 'No Snapshots',
+ },
+ parameters: {
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../api',
+ default: {
+ createRuntimeSnapshot: async () => ({}),
+ getRuntimeSnapshots: async () => [],
+ loadBrowserRuntimeSnapshot: async () => {},
+ loadRuntimeSnapshot: async () => {},
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useRuntimesStore: () => ({
+ addRuntimeSnapshot: () => {},
+ runtimesRunUrl: 'https://example.com',
+ runtimeSnapshots: [],
+ setRuntimeSnapshots: () => {},
+ }),
+ },
+ },
+ ],
+ },
+ },
+};
diff --git a/src/components/snippets/SnippetDialog.stories.tsx b/src/components/snippets/SnippetDialog.stories.tsx
new file mode 100644
index 00000000..10de7ad0
--- /dev/null
+++ b/src/components/snippets/SnippetDialog.stories.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const SnippetDialog = ({ onClose, title = 'Code Snippet' }) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ onClose: () => console.log('Dialog closed'),
+ title: 'Insert Code Snippet',
+ },
+};
diff --git a/src/components/storage/ContentsBrowser.stories.tsx b/src/components/storage/ContentsBrowser.stories.tsx
new file mode 100644
index 00000000..4bf4668e
--- /dev/null
+++ b/src/components/storage/ContentsBrowser.stories.tsx
@@ -0,0 +1,192 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const ContentsBrowser = ({
+ path = '/',
+ onNavigate,
+ onSelect,
+ selectedItems = [],
+}) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ path: '/',
+ onNavigate: path => console.log('Navigate to:', path),
+ onSelect: file => console.log('Selected file:', file),
+ selectedItems: [],
+ },
+};
+
+export const WithSelection: Story = {
+ args: {
+ path: '/',
+ onNavigate: path => console.log('Navigate to:', path),
+ onSelect: file => console.log('Selected file:', file),
+ selectedItems: ['analysis.ipynb', 'dataset.csv'],
+ },
+};
+
+export const NestedPath: Story = {
+ args: {
+ path: '/notebooks/experiments',
+ onNavigate: path => console.log('Navigate to:', path),
+ onSelect: file => console.log('Selected file:', file),
+ selectedItems: [],
+ },
+};
diff --git a/src/components/storage/ContentsItems.stories.tsx b/src/components/storage/ContentsItems.stories.tsx
new file mode 100644
index 00000000..ada6a381
--- /dev/null
+++ b/src/components/storage/ContentsItems.stories.tsx
@@ -0,0 +1,436 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { DirectoryItem, TreeItem, modelToView } from './ContentsItems';
+import type { IContentsView } from './ContentsItems';
+import type { Contents } from '@jupyterlab/services';
+
+const meta = {
+ title: 'Datalayer/Storage/ContentsItems',
+ component: DirectoryItem,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ TreeView: {
+ Item: ({ children, current, onSelect, id, ...props }) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+// Mock contents manager
+const createMockContents = (path: string = ''): Contents.IManager => {
+ const mockContents: { [key: string]: Contents.IModel } = {
+ '': {
+ name: '',
+ path: '',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: [
+ {
+ name: 'notebooks',
+ path: 'notebooks',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ {
+ name: 'data',
+ path: 'data',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ {
+ name: 'example.ipynb',
+ path: 'example.ipynb',
+ type: 'notebook',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'application/x-ipynb+json',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ {
+ name: 'README.md',
+ path: 'README.md',
+ type: 'file',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'text/markdown',
+ content: null,
+ writable: true,
+ format: 'text',
+ },
+ ],
+ writable: true,
+ format: 'json',
+ },
+ notebooks: {
+ name: 'notebooks',
+ path: 'notebooks',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: [
+ {
+ name: 'analysis.ipynb',
+ path: 'notebooks/analysis.ipynb',
+ type: 'notebook',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'application/x-ipynb+json',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ {
+ name: 'visualization.ipynb',
+ path: 'notebooks/visualization.ipynb',
+ type: 'notebook',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'application/x-ipynb+json',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ ],
+ writable: true,
+ format: 'json',
+ },
+ data: {
+ name: 'data',
+ path: 'data',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: [
+ {
+ name: 'dataset.csv',
+ path: 'data/dataset.csv',
+ type: 'file',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'text/csv',
+ content: null,
+ writable: true,
+ format: 'text',
+ },
+ ],
+ writable: true,
+ format: 'json',
+ },
+ };
+
+ return {
+ get: async (path: string) => {
+ await new Promise(resolve => setTimeout(resolve, 200));
+ return mockContents[path] || mockContents[''];
+ },
+ } as any;
+};
+
+// Mock document registry
+const mockDocumentRegistry = {
+ getFileTypeForModel: (model: Contents.IModel) => {
+ if (model.type === 'directory') {
+ return {
+ name: 'directory',
+ icon: {
+ react: () => (
+
+ ),
+ },
+ };
+ }
+ if (model.name?.endsWith('.ipynb')) {
+ return {
+ name: 'notebook',
+ icon: {
+ react: () => (
+
+ ),
+ },
+ };
+ }
+ return {
+ name: 'file',
+ icon: {
+ react: () => (
+
+ ),
+ },
+ };
+ },
+} as any;
+
+const InteractiveTemplate = args => {
+ const [current, setCurrent] = useState(null);
+ const contents = createMockContents();
+
+ const handleSelect = (item: IContentsView, refresh?: () => void) => {
+ setCurrent(item);
+ console.log('Selected item:', item);
+ if (refresh) refresh();
+ };
+
+ const handleContextMenu = ref => {
+ console.log('Context menu requested for:', ref.current);
+ };
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const CompletedDataset: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-1',
+ type: 'student_item',
+ itemId: 'dataset-1',
+ itemType: 'dataset',
+ completed: true,
+ } as IStudentItem,
+ },
+};
+
+export const IncompleteDataset: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-2',
+ type: 'student_item',
+ itemId: 'dataset-2',
+ itemType: 'dataset',
+ completed: false,
+ } as IStudentItem,
+ },
+};
+
+export const CompletedLesson: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-3',
+ type: 'student_item',
+ itemId: 'lesson-1',
+ itemType: 'lesson',
+ completed: true,
+ } as IStudentItem,
+ },
+};
+
+export const IncompleteLesson: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-4',
+ type: 'student_item',
+ itemId: 'lesson-2',
+ itemType: 'lesson',
+ completed: false,
+ } as IStudentItem,
+ },
+};
+
+export const CompletedExercise: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-5',
+ type: 'student_item',
+ itemId: 'exercise-1',
+ itemType: 'exercise',
+ points: 85,
+ completed: true,
+ } as IStudentItem,
+ },
+};
+
+export const IncompleteExercise: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-6',
+ type: 'student_item',
+ itemId: 'exercise-2',
+ itemType: 'exercise',
+ points: 0,
+ completed: false,
+ } as IStudentItem,
+ },
+};
+
+export const AssignmentWithGrades: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-7',
+ type: 'student_item',
+ itemId: 'assignment-1',
+ itemType: 'assignment',
+ nbgrades: [
+ {
+ grade_id_s: 'Problem 1',
+ score_f: 10,
+ points_f: 10,
+ },
+ {
+ grade_id_s: 'Problem 2',
+ score_f: 8,
+ points_f: 10,
+ },
+ {
+ grade_id_s: 'Problem 3',
+ score_f: 7,
+ points_f: 10,
+ },
+ ],
+ nbgradesTotalScore: 25,
+ nbgradesTotalPoints: 30,
+ completed: true,
+ } as IStudentItem,
+ },
+};
+
+export const AssignmentPartialGrades: Story = {
+ args: {
+ student: mockStudent,
+ studentItem: {
+ id: 'item-8',
+ type: 'student_item',
+ itemId: 'assignment-2',
+ itemType: 'assignment',
+ nbgrades: [
+ {
+ grade_id_s: 'Question 1',
+ score_f: 5,
+ points_f: 10,
+ },
+ {
+ grade_id_s: 'Question 2',
+ score_f: 10,
+ points_f: 10,
+ },
+ ],
+ nbgradesTotalScore: 15,
+ nbgradesTotalPoints: 20,
+ completed: false,
+ } as IStudentItem,
+ },
+};
+
+export const NoStudent: Story = {
+ args: {
+ student: undefined,
+ studentItem: undefined,
+ },
+};
+
+export const AllItemTypes: Story = {
+ render: () => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ data: [
+ { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+ { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+ { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' },
+ ],
+ },
+};
+
+export const LargeDataset: Story = {
+ args: {
+ data: Array.from({ length: 50 }, (_, i) => ({
+ id: i + 1,
+ name: `User ${i + 1}`,
+ email: `user${i + 1}@example.com`,
+ role: ['Admin', 'User', 'Editor'][i % 3],
+ department: ['Engineering', 'Marketing', 'Sales', 'Support'][i % 4],
+ joinDate: new Date(2020 + (i % 4), i % 12, (i % 28) + 1)
+ .toISOString()
+ .split('T')[0],
+ })),
+ },
+};
+
+export const EmptyData: Story = {
+ args: {
+ data: [],
+ },
+};
+
+export const ComplexData: Story = {
+ args: {
+ data: [
+ {
+ id: 1,
+ project: 'Data Analysis Dashboard',
+ status: 'Active',
+ progress: 85,
+ team: ['Alice', 'Bob', 'Charlie'],
+ budget: 50000,
+ deadline: '2024-03-15',
+ metrics: { views: 1250, users: 89, conversion: 0.12 },
+ },
+ {
+ id: 2,
+ project: 'ML Model Training',
+ status: 'In Progress',
+ progress: 60,
+ team: ['Dave', 'Eve'],
+ budget: 75000,
+ deadline: '2024-04-30',
+ metrics: { accuracy: 0.94, precision: 0.87, recall: 0.91 },
+ },
+ {
+ id: 3,
+ project: 'API Integration',
+ status: 'Planning',
+ progress: 20,
+ team: ['Frank', 'Grace', 'Henry', 'Ivy'],
+ budget: 30000,
+ deadline: '2024-06-01',
+ metrics: { endpoints: 12, tests: 45, coverage: 0.78 },
+ },
+ ],
+ },
+};
diff --git a/src/components/text-reveal/TextRevealAnimation.stories.tsx b/src/components/text-reveal/TextRevealAnimation.stories.tsx
new file mode 100644
index 00000000..0b1dd866
--- /dev/null
+++ b/src/components/text-reveal/TextRevealAnimation.stories.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const TextRevealAnimation = ({
+ text = 'Welcome to Datalayer Platform',
+ delay = 100,
+ className = '',
+}) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ text: 'Welcome to Datalayer',
+ delay: 100,
+ },
+};
+
+export const FastAnimation: Story = {
+ args: {
+ text: 'Fast Animation',
+ delay: 50,
+ },
+};
+
+export const SlowAnimation: Story = {
+ args: {
+ text: 'Slow Animation',
+ delay: 200,
+ },
+};
+
+export const LongText: Story = {
+ args: {
+ text: 'Data Science Platform for Modern Teams',
+ delay: 80,
+ },
+};
+
+export const ShortText: Story = {
+ args: {
+ text: 'Hello!',
+ delay: 150,
+ },
+};
diff --git a/src/components/tokens/SpaceVariantToken.stories.tsx b/src/components/tokens/SpaceVariantToken.stories.tsx
new file mode 100644
index 00000000..3476fe0a
--- /dev/null
+++ b/src/components/tokens/SpaceVariantToken.stories.tsx
@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SpaceVariantToken } from './SpaceVariantToken';
+
+const meta = {
+ title: 'Datalayer/Tokens/SpaceVariantToken',
+ component: SpaceVariantToken,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Token: ({ text, leadingVisual: Icon }) => (
+
+ {Icon && ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ variant: 'default',
+ },
+};
+
+export const Course: Story = {
+ args: {
+ variant: 'course',
+ },
+};
+
+export const AllVariants: Story = {
+ render: () => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+// Create a wrapper component to control notebook state
+const ToolbarWrapper = ({ notebookId, kernelStatus = 'idle' }) => {
+ // Mock the notebook store to return different kernel statuses
+ const originalGetState = (window as any).__mockNotebookStore?.getState;
+ (window as any).__mockNotebookStore = {
+ getState: () => ({
+ selectNotebook: id => ({
+ id,
+ kernelStatus,
+ }),
+ runAll: id => console.log('Running all cells in notebook:', id),
+ interrupt: id => console.log('Interrupting notebook:', id),
+ }),
+ };
+
+ // Update the mock in the story context
+ if (typeof window !== 'undefined' && (window as any).mockAddonConfigs) {
+ const jupyterReactMock = (window as any).mockAddonConfigs.find(
+ config => config.path === '@datalayer/jupyter-react',
+ );
+ if (jupyterReactMock) {
+ jupyterReactMock.default.notebookStore.getState = () => ({
+ selectNotebook: id => ({
+ id,
+ kernelStatus,
+ }),
+ runAll: id => console.log('Running all cells in notebook:', id),
+ interrupt: id => console.log('Interrupting notebook:', id),
+ });
+ }
+ }
+
+ return ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
+
+export const InteractiveDemo: Story = {
+ render: () => {
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+const mockCommandRegistry = {
+ execute: (id: string) => {
+ console.log('Executing command:', id);
+ return Promise.resolve();
+ },
+ isEnabled: (id: string) => true,
+};
+
+const mockSessionConnection = {
+ kernel: {
+ status: 'idle',
+ statusChanged: {
+ connect: (callback: Function) => {
+ console.log('Connected to status changed');
+ },
+ disconnect: (callback: Function) => {
+ console.log('Disconnected from status changed');
+ },
+ },
+ },
+};
+
+export const Default: Story = {
+ args: {
+ commandRegistry: mockCommandRegistry,
+ runtimeDesc: {
+ name: 'python3',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ save: () => console.log('Notebook saved'),
+ sessionConnection: mockSessionConnection,
+ },
+};
+
+export const BusyKernel: Story = {
+ args: {
+ commandRegistry: mockCommandRegistry,
+ runtimeDesc: {
+ name: 'python3',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ save: () => console.log('Notebook saved'),
+ sessionConnection: {
+ kernel: {
+ status: 'busy',
+ statusChanged: {
+ connect: (callback: Function) => {},
+ disconnect: (callback: Function) => {},
+ },
+ },
+ },
+ },
+};
+
+export const NoSession: Story = {
+ args: {
+ commandRegistry: mockCommandRegistry,
+ runtimeDesc: {
+ name: 'python3',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ save: () => console.log('Notebook saved'),
+ sessionConnection: undefined,
+ },
+};
+
+export const NoCommandRegistry: Story = {
+ args: {
+ runtimeDesc: {
+ name: 'python3',
+ kernelDisplayName: 'Python 3',
+ language: 'python',
+ },
+ save: () => console.log('Notebook saved'),
+ sessionConnection: mockSessionConnection,
+ },
+};
diff --git a/src/components/users/PeerIndicator.stories.tsx b/src/components/users/PeerIndicator.stories.tsx
new file mode 100644
index 00000000..ed62b255
--- /dev/null
+++ b/src/components/users/PeerIndicator.stories.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PeersIndicator } from './PeerIndicator';
+
+// Mock Awareness for Storybook
+const mockAwareness = {
+ getStates: () => new Map(),
+ on: () => {},
+ off: () => {},
+};
+
+const meta = {
+ title: 'Datalayer/Users/PeersIndicator',
+ component: PeersIndicator,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '../../utils',
+ default: {
+ getAvatarURL: (url: string) => url,
+ getRelativeTime: (date: Date) => '2 minutes ago',
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const NoPeers: Story = {
+ args: {
+ awareness: mockAwareness,
+ currentUserHandle: 'currentuser',
+ },
+};
+
+export const WithPeers: Story = {
+ args: {
+ awareness: {
+ getStates: () =>
+ new Map([
+ [
+ 1,
+ {
+ user: {
+ name: 'alice',
+ display_name: 'Alice Smith',
+ username: 'alice',
+ color: '#ff6b6b',
+ initials: 'AS',
+ avatar_url: 'https://github.com/alice.png',
+ },
+ },
+ ],
+ [
+ 2,
+ {
+ user: {
+ name: 'bob',
+ display_name: 'Bob Johnson',
+ username: 'bob',
+ color: '#4ecdc4',
+ initials: 'BJ',
+ avatar_url: 'https://github.com/bob.png',
+ },
+ },
+ ],
+ ]),
+ on: () => {},
+ off: () => {},
+ } as any,
+ currentUserHandle: 'currentuser',
+ },
+};
+
+export const WithAgent: Story = {
+ args: {
+ awareness: {
+ getStates: () =>
+ new Map([
+ [
+ 1,
+ {
+ user: {
+ name: 'alice',
+ display_name: 'Alice Smith',
+ username: 'alice',
+ color: '#ff6b6b',
+ initials: 'AS',
+ avatar_url: 'https://github.com/alice.png',
+ },
+ },
+ ],
+ [
+ 2,
+ {
+ user: {
+ name: 'ai-agent',
+ agent: 'Claude Assistant',
+ color: '#9b59b6',
+ },
+ notification: {
+ message: 'Processing your request...',
+ timestamp: Date.now(),
+ message_type: 0,
+ },
+ },
+ ],
+ ]),
+ on: () => {},
+ off: () => {},
+ } as any,
+ currentUserHandle: 'currentuser',
+ },
+};
diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
deleted file mode 100644
index a4c1ae7d..00000000
--- a/src/stories/Button.stories.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { fn } from 'storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: 'Example/Button',
- component: Button,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: 'centered',
- },
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- backgroundColor: { control: 'color' },
- },
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- args: { onClick: fn() },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
-};
-
-export const Secondary: Story = {
- args: {
- label: 'Button',
- },
-};
-
-export const Large: Story = {
- args: {
- size: 'large',
- label: 'Button',
- },
-};
-
-export const Small: Story = {
- args: {
- size: 'small',
- label: 'Button',
- },
-};
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
deleted file mode 100644
index da300453..00000000
--- a/src/stories/Header.stories.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { fn } from 'storybook/test';
-
-import { Header } from './Header';
-
-const meta = {
- title: 'Example/Header',
- component: Header,
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
- args: {
- onLogin: fn(),
- onLogout: fn(),
- onCreateAccount: fn(),
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const LoggedIn: Story = {
- args: {
- user: {
- name: 'Jane Doe',
- },
- },
-};
-
-export const LoggedOut: Story = {};
diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts
deleted file mode 100644
index 8a50383d..00000000
--- a/src/stories/Page.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { expect, userEvent, within } from 'storybook/test';
-
-import { Page } from './Page';
-
-const meta = {
- title: 'Example/Page',
- component: Page,
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const LoggedOut: Story = {};
-
-// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
-export const LoggedIn: Story = {
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
- const loginButton = canvas.getByRole('button', { name: /Log in/i });
- await expect(loginButton).toBeInTheDocument();
- await userEvent.click(loginButton);
- await expect(loginButton).not.toBeInTheDocument();
-
- const logoutButton = canvas.getByRole('button', { name: /Log out/i });
- await expect(logoutButton).toBeInTheDocument();
- },
-};
0.7
+ ? '#d73a49'
+ : burningRate > 0.3
+ ? '#f66a0a'
+ : '#28a745',
+ borderRadius: 4,
+ transition: 'width 0.3s ease',
+ }}
+ />
+
+ {burningRate}/s credits
+
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ kernelId: {
+ control: 'select',
+ options: ['kernel-1', 'kernel-2', 'kernel-3'],
+ description: 'Kernel ID to track credits for',
+ },
+ onClick: {
+ action: 'clicked',
+ description: 'Callback when progress bar is clicked',
+ },
+ onUpdate: {
+ action: 'updated',
+ description: 'Callback when progress is updated',
+ },
+ },
+} satisfies Meta
+
+ ),
+};
diff --git a/src/components/progress/Timer.stories.tsx b/src/components/progress/Timer.stories.tsx
new file mode 100644
index 00000000..bc15b9fd
--- /dev/null
+++ b/src/components/progress/Timer.stories.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Timer } from './Timer';
+
+const meta = {
+ title: 'Datalayer/Progress/Timer',
+ component: Timer,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ duration: {
+ control: { type: 'number', min: 0 },
+ description: 'Timer duration in seconds',
+ },
+ },
+} satisfies Meta
+
+
+
+
+
+
+
+
+ {tokens &&
+ tokens.map(token => (
+
+ {token.text}
+
+
+ ))}
+
+
+ ),
+ Overlay: ({ children }) => (
+
+ {children}
+
+ ),
+ Menu: ({
+ items = [],
+ selectedItemIds = [],
+ onSelectedChange,
+ loading,
+ emptyStateText,
+ selectionVariant,
+ addNewItem,
+ }) => (
+
+ {loading &&
+ ),
+ },
+ FormControl: {
+ Label: ({ children, ...props }) => (
+
+ ),
+ },
+ TextInputWithTokens: ({ tokens, onTokenRemove, ...props }) => (
+ Loading...
}
+ {!loading && items.length === 0 && (
+
+ {emptyStateText}
+
+ )}
+ {items.map(item => (
+ {
+ if (selectionVariant === 'multiple') {
+ const isSelected = selectedItemIds.includes(item.id);
+ const newSelection = isSelected
+ ? selectedItemIds.filter(id => id !== item.id)
+ : [...selectedItemIds, item.id];
+ onSelectedChange?.(
+ items.filter(i => newSelection.includes(i.id)),
+ );
+ } else {
+ onSelectedChange?.(item);
+ }
+ }}
+ style={{
+ padding: '8px 12px',
+ cursor: 'pointer',
+ backgroundColor: selectedItemIds.includes(item.id)
+ ? '#f1f8ff'
+ : 'transparent',
+ ':hover': {
+ backgroundColor: '#f6f8fa',
+ },
+ }}
+ >
+ {selectionVariant === 'multiple' && (
+
+ )}
+ {item.text}
+
+ ))}
+ {addNewItem && (
+ addNewItem.handleAddItem(addNewItem)}
+ style={{
+ padding: '8px 12px',
+ cursor: 'pointer',
+ borderTop: '1px solid #d1d9e0',
+ color: '#0969da',
+ }}
+ >
+ {addNewItem.text}
+
+ )}
+ Mock TextInputWithTokens
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, as = 'div', sx, ...props }) => {
+ const Component = as;
+ return (
+
+
+ );
+};
+
+export const Default: Story = {
+ render: InteractiveTemplate,
+ args: {
+ inputs: ['df', 'x'],
+ output: 'results',
+ },
+};
+
+export const Empty: Story = {
+ render: InteractiveTemplate,
+ args: {
+ inputs: [],
+ output: '',
+ },
+};
+
+export const WithManyInputs: Story = {
+ render: InteractiveTemplate,
+ args: {
+ inputs: ['df_train', 'df_test', 'model', 'scaler', 'predictions'],
+ output: 'final_results',
+ },
+};
+
+export const NoOptionsProvided: Story = {
+ render: args => {
+ const [inputs, setInputs] = useState(args.inputs || []);
+ const [output, setOutput] = useState(args.output || '');
+
+ return (
+
+
+ );
+ },
+ args: {
+ inputs: ['manual_var'],
+ output: 'manual_output',
+ },
+};
diff --git a/src/components/runtimes/RuntimeCellVariables.tsx b/src/components/runtimes/RuntimeCellVariables.tsx
index cb99e517..4d4ce4d3 100644
--- a/src/components/runtimes/RuntimeCellVariables.tsx
+++ b/src/components/runtimes/RuntimeCellVariables.tsx
@@ -305,3 +305,6 @@ export function KernelCellVariables(
}
export default KernelCellVariables;
+
+// Alias for consistency with component naming convention
+export const RuntimeCellVariables = KernelCellVariables;
diff --git a/src/components/runtimes/RuntimeCellVariablesDialog.stories.tsx b/src/components/runtimes/RuntimeCellVariablesDialog.stories.tsx
new file mode 100644
index 00000000..c1091358
--- /dev/null
+++ b/src/components/runtimes/RuntimeCellVariablesDialog.stories.tsx
@@ -0,0 +1,323 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
+
+// Mock CodeCellModel
+const createMockCellModel = (sourceCode: string) => ({
+ id: 'mock-cell-id',
+ type: 'code',
+ source: sourceCode,
+ metadata: {},
+ outputs: [],
+ executionCount: null,
+ trusted: false,
+ mimeType: 'text/x-python',
+});
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimeCellVariablesDialog',
+ component: RuntimeCellVariablesDialog,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react/experimental',
+ default: {
+ Dialog: ({ children, onClose, title, ...props }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: key => key,
+ }),
+ },
+ },
+ },
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ KernelExecutor: ({ children }) => (
+
+
+ + {title || 'Runtime Cell Variables'} +
+ +{children}
+
+
+ ),
+ },
+ },
+ {
+ path: '../../api',
+ default: {
+ RuntimeSnippetsFacade: class {
+ static async getInputVariables() {
+ return ['df', 'x', 'y', 'model'];
+ }
+ static async getOutputVariable() {
+ return 'result';
+ }
+ },
+ },
+ },
+ {
+ path: './RuntimeCellVariables',
+ default: {
+ KernelCellVariables: ({
+ inputs,
+ output,
+ onInputsChange,
+ onOutputChange,
+ }) => (
+
+ Mock Kernel Executor
+
+ {children}
+
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ model: {
+ description: 'Code cell model containing the source code',
+ },
+ onClose: {
+ action: 'dialog closed',
+ description: 'Callback when dialog is closed',
+ },
+ preference: {
+ control: 'object',
+ description: 'Session preference with kernel details',
+ },
+ },
+} satisfies Meta
+
+ + Input Variables +
+
+ {inputs.map(input => (
+
+ {input}
+
+ ))}
+ {inputs.length === 0 && (
+
+ No input variables detected
+
+ )}
+
+
+
+ + Output Variable +
+ {output ? ( + + {output} + + ) : ( + + No output variable detected + + )} +{children}
,
+ IconButton: ({ icon: Icon, onClick, ...props }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@primer/react/experimental',
+ default: {
+ Dialog: ({ children, isOpen = true, title, ...props }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ AlertIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, as = 'div', sx, ...props }) => {
+ const Component = as;
+ return (
+
+ {title && (
+
+ + {title} +
+ )} + {children} +{children}
,
+ },
+ },
+ {
+ path: '../progress',
+ default: {
+ Timer: ({ duration, onComplete }) => (
+ Timer: {duration}min
+ ),
+ },
+ },
+ {
+ path: '../flashes',
+ default: {
+ FlashClosable: ({ children, variant = 'default', actions }) => (
+
+ {children}
+ {actions}
+
+ ),
+ },
+ },
+ {
+ path: './RuntimeReservationControl',
+ default: {
+ RuntimeReservationControl: ({ timeLimit, setTimeLimit }) => (
+
+
+ setTimeLimit(Number(e.target.value))}
+ />
+
+ ),
+ MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES: 60,
+ },
+ },
+ {
+ path: 'usehooks-ts',
+ default: {
+ useIsMounted: () => () => true,
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ dialogTitle: {
+ control: 'text',
+ description: 'Dialog title',
+ },
+ startKernel: {
+ control: { type: 'select' },
+ options: [true, false, 'with-example', 'defer'],
+ description: 'Whether to start the kernel',
+ },
+ },
+} satisfies Meta
+ {children}
+
+ ),
+ LinkItem: ({ children, href, ...props }) => (
+
+ {children}
+
+ ),
+ },
+ ActionMenu: {
+ Button: ({ children, ...props }) => (
+
+ ),
+ Overlay: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ IconButton: ({ icon: Icon, onClick, ...props }) => (
+
+ ),
+ Text: ({
+ children,
+ size = 'normal',
+ color = 'default',
+ ...props
+ }) => (
+
+ {children}
+
+ ),
+ RadioGroup: ({ children, name, onChange, ...props }) => (
+
+ {children}
+
+ ),
+ Radio: ({ checked, onChange, value, children, ...props }) => (
+
+ ),
+ FormControl: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ LabelGroup: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ Label: ({ children, variant = 'default', ...props }) => (
+
+ {children}
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, as = 'div', sx, ...props }) => {
+ const Component = as;
+ return (
+
+ Credits: {credits}
+
+ ),
+ },
+ },
+ {
+ path: './RuntimeUtils',
+ default: {
+ getGroupedRuntimeDescs: descs => ({
+ remote: descs.filter(d => d.location === 'remote'),
+ local: descs.filter(d => d.location === 'local'),
+ }),
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: key => key,
+ }),
+ },
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ display: {
+ control: { type: 'radio' },
+ options: ['menu', 'radio'],
+ description: 'Display mode for the picker',
+ },
+ variant: {
+ control: { type: 'radio' },
+ options: ['document', 'cell'],
+ description: 'Visual variant',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the picker is disabled',
+ },
+ },
+} satisfies Meta
+
+ );
+};
+
+export const MenuMode: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'document',
+ disabled: false,
+ },
+};
+
+export const RadioMode: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'radio',
+ variant: 'document',
+ disabled: false,
+ },
+};
+
+export const CellVariant: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'cell',
+ disabled: false,
+ },
+};
+
+export const Disabled: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'document',
+ disabled: true,
+ },
+};
+
+export const WithPreselection: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'document',
+ disabled: false,
+ runtimeDesc: mockRuntimeDescs[1],
+ },
+};
+
+export const WithPreActions: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'document',
+ disabled: false,
+ preActions: (
+
+ Custom Pre Actions
+
+ ),
+ },
+};
+
+export const WithPostActions: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'menu',
+ variant: 'document',
+ disabled: false,
+ postActions: (
+
+ Custom Post Actions
+
+ ),
+ },
+};
+
+export const FilteredRuntimes: Story = {
+ render: InteractiveTemplate,
+ args: {
+ display: 'radio',
+ variant: 'document',
+ disabled: false,
+ filterKernel: (desc: IRuntimeDesc) => desc.language === 'python',
+ },
+};
diff --git a/src/components/runtimes/RuntimePickerCell.stories.tsx b/src/components/runtimes/RuntimePickerCell.stories.tsx
new file mode 100644
index 00000000..2bd9e311
--- /dev/null
+++ b/src/components/runtimes/RuntimePickerCell.stories.tsx
@@ -0,0 +1,364 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RuntimePickerCell } from './RuntimePickerCell';
+import type { IMultiServiceManager } from '../../api';
+
+const meta = {
+ title: 'Datalayer/Runtimes/RuntimePickerCell',
+ component: RuntimePickerCell,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ ActionList: {
+ Item: ({ children, onClick, selected, ...props }) => (
+
+ {children}
+
+ ),
+ },
+ },
+ },
+ {
+ path: '@datalayer/icons-react',
+ default: {
+ CloudUploadIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '../../components/iam',
+ default: {
+ ExternalTokenSilentLogin: ({ children }) => {children}
,
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useIAMStore: () => ({
+ token: 'mock-token',
+ }),
+ useCoreStore: () => ({
+ configuration: {},
+ }),
+ },
+ },
+ {
+ path: './RuntimeLauncherDialog',
+ default: {
+ KernelLauncherDialog: ({
+ manager,
+ onSubmit,
+ startKernel,
+ markdownParser,
+ sanitizer,
+ }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: './RuntimePickerBase',
+ default: {
+ RuntimePickerBase: ({
+ display,
+ variant,
+ preActions,
+ postActions,
+ disabled,
+ multiServiceManager,
+ setRuntimeDesc,
+ runtimeDesc,
+ }) => (
+
+
+ Mock Launcher Dialog
+Start Kernel: {String(startKernel)}
+ +
+ {preActions}
+
+ ),
+ },
+ },
+ {
+ path: './RuntimeCellVariablesDialog',
+ default: {
+ RuntimeCellVariablesDialog: ({ model, onClose }) => (
+
+
+ Runtime Picker ({display} mode, {variant} variant)
+
+
+
+ Current: {runtimeDesc?.display_name || 'None selected'}
+
+
+ {postActions}
+
+
+ ),
+ },
+ },
+ {
+ path: './../snippets/SnippetDialog',
+ default: {
+ SnippetDialog: ({
+ snippets,
+ onClose,
+ markdownParser,
+ sanitizer,
+ }) => (
+
+
+ Mock Variables Dialog
+Cell ID: {model?.id || 'unknown'}
+ +
+
+ ),
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: key => key,
+ }),
+ },
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {},
+} satisfies Meta
+
+ Mock Snippet Dialog
+Snippets: {snippets?.length || 0}
+ +
+ {children}
+
+ ),
+ },
+ FormControl: {
+ Label: ({ children, ...props }) => (
+
+ ),
+ },
+ ToggleSwitch: ({ checked, onClick, disabled, ...props }) => (
+
+ ),
+ Tooltip: ({ children }) => {children}
,
+ IconButton: ({ icon: Icon, onClick, ...props }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, as = 'div', sx, ...props }) => {
+ const Component = as;
+ return (
+ {children}
,
+ },
+ },
+ {
+ path: '../../theme',
+ default: {
+ DatalayerThemeProvider: ({ children }) => {children}
,
+ },
+ },
+ {
+ path: '../../api',
+ default: {
+ RuntimeSnippetsFacade: class MockSnippetsFacade {
+ static async getSnippets() {
+ return [];
+ }
+ },
+ },
+ },
+ {
+ path: '../../components/iam',
+ default: {
+ ExternalTokenSilentLogin: ({ children }) => {children}
,
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useCoreStore: () => ({
+ configuration: {},
+ }),
+ useIAMStore: () => ({
+ credits: { available: 100, used: 20 },
+ refreshCredits: () => {},
+ token: 'mock-token',
+ }),
+ },
+ },
+ {
+ path: './RuntimeReservationControl',
+ default: {
+ RuntimeReservationControl: ({ timeLimit, setTimeLimit }) => (
+
+
+ setTimeLimit(Number(e.target.value))}
+ style={{ width: '100%' }}
+ />
+
+ ),
+ MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES: 60,
+ },
+ },
+ {
+ path: './RuntimeVariables',
+ default: {
+ RuntimeVariables: ({
+ kernelVariables,
+ selectedVariables,
+ setSelectVariable,
+ transferVariables,
+ setTransferVariable,
+ }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: './RuntimePickerBase',
+ default: {
+ RuntimePickerBase: ({
+ display = 'menu',
+ variant = 'document',
+ preActions,
+ postActions,
+ disabled,
+ multiServiceManager,
+ setRuntimeDesc,
+ runtimeDesc,
+ }) => (
+
+ Runtime Variables
+
+
+ Variables:{' '}
+ {Object.keys(kernelVariables || {}).join(', ') || 'None'}
+
+
+ Selected: {selectedVariables?.join(', ') || 'None'}
+
+
+
+ {preActions}
+
+ ),
+ },
+ },
+ {
+ path: './RuntimeTransfer',
+ default: {
+ RuntimeTransfer: class MockRuntimeTransfer {
+ constructor(
+ public kernelId: string,
+ public transferVariables: boolean,
+ public variableNames: string[],
+ ) {}
+ },
+ },
+ },
+ {
+ path: '@jupyterlab/translation',
+ default: {
+ nullTranslator: {
+ load: () => ({
+ __: key => key,
+ }),
+ },
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {},
+} satisfies Meta
+
+ Runtime Picker ({display} mode, {variant} variant)
+
+
+
+ Current: {runtimeDesc?.display_name || 'None selected'}
+
+
+ {postActions}
+
+ {children}
+
+ ),
+ 'FormControl.Label': ({ children }) => (
+
+ ),
+ 'FormControl.Caption': ({ children }) => (
+
+ {children}
+
+ ),
+ 'FormControl.Validation': ({ children, variant }) => (
+
+ {children}
+
+ ),
+ IconButton: ({
+ icon: Icon,
+ onClick,
+ 'aria-label': ariaLabel,
+ ...props
+ }) => (
+
+ ),
+ Text: ({ children }) => {children},
+ TextInput: ({
+ value,
+ onChange,
+ type,
+ step,
+ min,
+ max,
+ disabled,
+ ...props
+ }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, style }) => {children}
,
+ Slider: ({ min, max, value, onChange, disabled, step }) => (
+ onChange(parseFloat(e.target.value))}
+ disabled={disabled}
+ step={step}
+ style={{
+ width: '200px',
+ opacity: disabled ? 0.6 : 1,
+ }}
+ />
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ PlusIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ label: {
+ control: 'text',
+ description: 'Control label',
+ },
+ time: {
+ control: { type: 'number', min: 1, max: 1440 },
+ description: 'Time value in minutes',
+ },
+ max: {
+ control: { type: 'number', min: 1, max: 1440 },
+ description: 'Maximum time in minutes',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Disabled state',
+ },
+ burningRate: {
+ control: { type: 'number', min: 0.1, max: 5.0, step: 0.1 },
+ description: 'Credits burning rate per minute',
+ },
+ error: {
+ control: 'text',
+ description: 'Error message',
+ },
+ },
+} satisfies Meta
+
+ {status || (sessionConnection ? 'Connected' : 'Disconnected')}
+
+ ),
+ },
+ },
+ {
+ path: '@primer/react',
+ default: {
+ ActionList: {
+ Item: ({ children, onClick, selected, ...props }) => (
+
+ {children}
+
+ ),
+ },
+ ActionMenu: {
+ Button: ({ children, ...props }) => (
+
+ ),
+ Overlay: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ Box: ({ children, ...props }) => {children}
,
+ Button: ({
+ children,
+ onClick,
+ variant = 'primary',
+ size = 'medium',
+ ...props
+ }) => (
+
+ ),
+ Tooltip: ({ children }) => {children}
,
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ CloudIcon: () => (
+
+ ),
+ EyeIcon: () => (
+
+ ),
+ UnfoldIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/icons-react',
+ default: {
+ BrowserIcon: () => (
+
+ ),
+ PlusIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '../../components/icons',
+ default: {
+ ArtifactIcon: () => (
+
+ ),
+ },
+ },
+ {
+ path: '../../components/runtimes',
+ default: {
+ KernelLauncherDialog: ({
+ manager,
+ onSubmit,
+ startKernel,
+ markdownParser,
+ sanitizer,
+ }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useRuntimesStore: () => ({
+ runtimeModels: [
+ {
+ id: 'runtime-1',
+ name: 'Python Runtime 1',
+ kernelId: 'python3-kernel-1',
+ status: 'running',
+ location: 'remote',
+ },
+ {
+ id: 'runtime-2',
+ name: 'R Runtime 1',
+ kernelId: 'ir-kernel-1',
+ status: 'idle',
+ location: 'remote',
+ },
+ ],
+ multiServiceManager: {
+ remote: {
+ environments: {
+ get: () => [
+ {
+ name: 'python3',
+ title: 'Python 3.11',
+ language: 'python',
+ },
+ { name: 'ir', title: 'R 4.3', language: 'r' },
+ ],
+ },
+ },
+ },
+ jupyterLabAdapter: {},
+ }),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {},
+} satisfies Meta
+
+ Mock Launcher Dialog
+Start Kernel: {String(startKernel)}
+ +{children}
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, ...props }) => {children}
,
+ },
+ },
+ {
+ path: '@primer/react/experimental',
+ default: {
+ Blankslate: ({ children }) => (
+
+ {children}
+
+ ),
+ DataTable: ({ children, ...props }) => (
+
+
+ {children}
+
+
+ ),
+ Table: {
+ Head: ({ children }) => {children},
+ Body: ({ children }) => {children},
+ Row: ({ children, selected, onClick, ...props }) => (
+
+
+ {({ onStartCapture }) => (
+
+ )}
+
+
+ ),
+};
+
+export const WithCustomTrigger: Story = {
+ args: {
+ onEndCapture: url => {
+ console.log('Screenshot captured:', url);
+ // Create a preview element
+ const img = document.createElement('img');
+ img.src = url;
+ img.style.maxWidth = '300px';
+ img.style.border = '2px solid #0366d6';
+ img.style.borderRadius = '8px';
+ img.style.marginTop = '1rem';
+
+ // Find or create preview container
+ let preview = document.getElementById('screenshot-preview');
+ if (!preview) {
+ preview = document.createElement('div');
+ preview.id = 'screenshot-preview';
+ preview.style.position = 'fixed';
+ preview.style.top = '20px';
+ preview.style.right = '20px';
+ preview.style.zIndex = '1000';
+ preview.style.background = 'white';
+ preview.style.padding = '1rem';
+ preview.style.border = '1px solid #d1d9e0';
+ preview.style.borderRadius = '8px';
+ preview.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+ document.body.appendChild(preview);
+ }
+ preview.innerHTML = '
+
+ Sample Content to Capture
+This is some content that can be captured in a screenshot.
+
+
+
+
+ Box 1
+Some content here
+
+
+ Box 2
+More content here
+Captured Screenshot:
'; + preview.appendChild(img); + }, + }, + render: args => ( +
+
+ {({ onStartCapture }) => (
+
+
+
+ ),
+};
+
+export const FunctionAsChildren: Story = {
+ args: {
+ children: ({ onStartCapture }) => (
+
+
+ )}
+ Screen Capture Demo
+Click the button below to start capturing a screenshot
+ +
+ {[1, 2, 3, 4].map(i => (
+
+
+
+ ))}
+ Card {i}
+This is sample content in card {i} that can be captured.
+ +
+ 📸
+ Ready to capture screen?
+
+
+ ),
+ onEndCapture: url => console.log('Captured:', url.slice(0, 50) + '...'),
+ },
+};
diff --git a/src/components/screenshot/ScreenCaptureButton.stories.tsx b/src/components/screenshot/ScreenCaptureButton.stories.tsx
new file mode 100644
index 00000000..4f99224e
--- /dev/null
+++ b/src/components/screenshot/ScreenCaptureButton.stories.tsx
@@ -0,0 +1,395 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ScreenCaptureButton } from './ScreenCaptureButton';
+
+const meta = {
+ title: 'Datalayer/Screenshot/ScreenCaptureButton',
+ component: ScreenCaptureButton,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component:
+ 'A ready-to-use screen capture button with tooltip and toast notifications.',
+ },
+ },
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Link: ({ children, onClick, sx, href, ...props }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, text, direction }) => (
+
+ {children}
+
+ ),
+ Button: ({ children, variant, ...props }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ ScreenFullIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ {
+ path: '../../utils',
+ default: {
+ lazyWithPreload: importFn => importFn,
+ WithSuspense: Component => Component,
+ },
+ },
+ {
+ path: '../../hooks',
+ default: {
+ useToast: () => ({
+ enqueueToast: (message, options) => {
+ console.log('Toast:', message, options);
+ // Create a mock toast notification
+ const toast = document.createElement('div');
+ toast.style.position = 'fixed';
+ toast.style.top = '20px';
+ toast.style.right = '20px';
+ toast.style.padding = '12px 16px';
+ toast.style.backgroundColor =
+ options?.variant === 'success' ? '#28a745' : '#0366d6';
+ toast.style.color = 'white';
+ toast.style.borderRadius = '6px';
+ toast.style.zIndex = '1001';
+ toast.textContent = message;
+ document.body.appendChild(toast);
+ setTimeout(() => {
+ if (document.body.contains(toast)) {
+ document.body.removeChild(toast);
+ }
+ }, 3000);
+ },
+ }),
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useLayoutStore: () => ({
+ setScreenCapture: capture => {
+ console.log('Screen capture stored:', capture);
+ // Store in sessionStorage for demo
+ sessionStorage.setItem('datalayer-screenshot', capture);
+ },
+ hideScreenshot: () => {
+ console.log('Screenshot hidden');
+ },
+ }),
+ },
+ },
+ {
+ path: '../screenshot/ScreenCapture',
+ default: ({ children, onEndCapture, onStartCapture }) => {
+ const handleClick = () => {
+ if (onStartCapture) onStartCapture();
+ // Simulate capturing after a short delay
+ setTimeout(() => {
+ // Create a mock data URL
+ const canvas = document.createElement('canvas');
+ canvas.width = 400;
+ canvas.height = 300;
+ const ctx = canvas.getContext('2d');
+ if (ctx) {
+ ctx.fillStyle = '#f6f8fa';
+ ctx.fillRect(0, 0, 400, 300);
+ ctx.fillStyle = '#0366d6';
+ ctx.fillRect(20, 20, 360, 260);
+ ctx.fillStyle = '#ffffff';
+ ctx.font = '16px Arial';
+ ctx.textAlign = 'center';
+ ctx.fillText('Mock Screenshot', 200, 150);
+ }
+ onEndCapture(canvas.toDataURL());
+ }, 500);
+ };
+
+ if (typeof children === 'function') {
+ return children({ onStartCapture: handleClick });
+ }
+ return children;
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta
+ {text}
+
+
+ Toolbar:
+
+
+
+ ),
+};
+
+export const WithContent: Story = {
+ render: () => (
+
+
+ ),
+};
+
+export const MultipleButtons: Story = {
+ render: () => (
+
+
+
+ Dashboard
+
+
+
+
+
+
+ Analytics
+View your data insights
+
+ Chart Placeholder
+
+
+
+ Reports
+Generate and view reports
+
+ Table Placeholder
+
+ + Click the screen capture button in the top-right corner to capture this + content. +
+
+
+ ),
+};
diff --git a/src/components/snapshots/RuntimeSnapshotMenu.stories.tsx b/src/components/snapshots/RuntimeSnapshotMenu.stories.tsx
new file mode 100644
index 00000000..8295f72e
--- /dev/null
+++ b/src/components/snapshots/RuntimeSnapshotMenu.stories.tsx
@@ -0,0 +1,495 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { RuntimeSnapshotMenu } from './RuntimeSnapshotMenu';
+
+// Mock data
+const mockSnapshots = [
+ {
+ id: 'snapshot-1',
+ name: 'Data Analysis Session',
+ description: 'Snapshot with loaded datasets and models',
+ createdAt: '2024-01-15T10:30:00Z',
+ size: 1024 * 1024 * 5, // 5MB
+ },
+ {
+ id: 'snapshot-2',
+ name: 'ML Training Complete',
+ description: 'Trained model and evaluation results',
+ createdAt: '2024-01-14T16:45:00Z',
+ size: 1024 * 1024 * 12, // 12MB
+ },
+ {
+ id: 'snapshot-3',
+ name: 'Feature Engineering',
+ description: 'Processed features and transformers',
+ createdAt: '2024-01-13T09:15:00Z',
+ size: 1024 * 1024 * 8, // 8MB
+ },
+];
+
+const mockConnection = {
+ model: {
+ id: 'kernel-123',
+ name: 'python3',
+ last_activity: '2024-01-15T11:00:00Z',
+ execution_state: 'idle',
+ connections: 1,
+ },
+ dispose: () => {},
+ isDisposed: false,
+};
+
+const mockMultiServiceManager = {
+ browser: {
+ kernels: {
+ connectTo: model => ({
+ model,
+ dispose: () => {},
+ isDisposed: false,
+ }),
+ },
+ },
+ remote: {
+ runtimesManager: {
+ snapshot: async ({ podName, name, description, stop }) => {
+ console.log('Creating snapshot:', { podName, name, description, stop });
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return {
+ id: `snapshot-${Date.now()}`,
+ name,
+ description,
+ createdAt: new Date().toISOString(),
+ size: Math.random() * 10 * 1024 * 1024,
+ };
+ },
+ },
+ },
+};
+
+const meta = {
+ title: 'Datalayer/Snapshots/RuntimeSnapshotMenu',
+ component: RuntimeSnapshotMenu,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@datalayer/icons-react',
+ default: {
+ CameraIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@primer/react',
+ default: {
+ ActionList: ({ children }) => (
+ Multiple Screen Capture Buttons
+Each button works independently:
+ +
+
+
+ Header Section
+
+
+
+ Content Section
+
+
+
+ Footer Section
+
+
+ {children}
+
+ ),
+ 'ActionList.Item': ({ children, onSelect, disabled }) => (
+ {
+ if (!disabled) e.target.style.backgroundColor = '#f6f8fa';
+ }}
+ onMouseLeave={e => {
+ if (!disabled) e.target.style.backgroundColor = 'transparent';
+ }}
+ >
+ {children}
+
+ ),
+ ActionMenu: ({ children }) => {children}
,
+ 'ActionMenu.Button': ({
+ children,
+ leadingVisual: Icon,
+ variant,
+ size,
+ disabled,
+ onClick,
+ }) => (
+
+ ),
+ 'ActionMenu.Overlay': ({ children }) => (
+
+ {children}
+
+ ),
+ Box: ({ children, as = 'div', ...props }) => {
+ const Component = as;
+ return
+ {children}
+
+ ),
+ FormControl: ({ children }) => (
+ {children}
+ ),
+ 'FormControl.Label': ({ children }) => (
+
+ ),
+ Select: ({ children, name, value, onChange, block }) => (
+
+ ),
+ 'Select.Option': ({ children, value }) => (
+
+ ),
+ Spinner: ({ size }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@primer/react/experimental',
+ default: {
+ Dialog: ({ children, title, onClose, footerButtons }) => (
+
+
+ ),
+ },
+ },
+ {
+ path: '../../hooks',
+ default: {
+ useToast: () => ({
+ trackAsyncTask: (task, options) => {
+ console.log('Tracking async task:', options);
+ return task;
+ },
+ }),
+ },
+ },
+ {
+ path: '../../api',
+ default: {
+ createRuntimeSnapshot: async ({
+ connection,
+ metadata,
+ onUploadProgress,
+ }) => {
+ console.log('Creating runtime snapshot:', {
+ connection,
+ metadata,
+ });
+ if (onUploadProgress) {
+ setTimeout(onUploadProgress, 500);
+ }
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return {
+ id: `snapshot-browser-${Date.now()}`,
+ name: metadata.filename.replace('.data', ''),
+ description: 'Browser runtime snapshot',
+ createdAt: new Date().toISOString(),
+ size: Math.random() * 5 * 1024 * 1024,
+ };
+ },
+ getRuntimeSnapshots: async () => {
+ await new Promise(resolve => setTimeout(resolve, 300));
+ return mockSnapshots;
+ },
+ loadBrowserRuntimeSnapshot: async ({ connection, id }) => {
+ console.log('Loading browser runtime snapshot:', {
+ connection,
+ id,
+ });
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ loadRuntimeSnapshot: async ({ id, from }) => {
+ console.log('Loading runtime snapshot:', { id, from });
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ },
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useRuntimesStore: () => ({
+ addRuntimeSnapshot: snapshot => {
+ console.log('Adding runtime snapshot:', snapshot);
+ },
+ runtimesRunUrl: 'https://example.com',
+ runtimeSnapshots: mockSnapshots,
+ setRuntimeSnapshots: snapshots => {
+ console.log('Setting runtime snapshots:', snapshots);
+ },
+ }),
+ },
+ },
+ {
+ path: '../../utils',
+ default: {
+ createRuntimeSnapshotName: type => `${type}-snapshot-${Date.now()}`,
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ disabled: {
+ control: 'boolean',
+ description: 'Whether the menu is disabled',
+ },
+ podName: {
+ control: 'text',
+ description: 'Pod name for remote kernels',
+ },
+ },
+} satisfies Meta
+
+ {title}
+ +{children}
+
+ {footerButtons?.map((button, index) => (
+
+ ))}
+
+
+
+);
+
+const meta = {
+ title: 'Datalayer/Snippets/SnippetDialog',
+ component: SnippetDialog,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ onClose: {
+ action: 'dialog closed',
+ description: 'Callback when dialog is closed',
+ },
+ title: {
+ control: 'text',
+ description: 'Dialog title',
+ },
+ },
+} satisfies Meta
+
+ {title}
+ +
+
+
+ {`import pandas as pd
+import numpy as np
+
+# Load data
+df = pd.read_csv('data.csv')
+print(df.head())`}
+
+
+
+
+
+
+ {/* Header */}
+
+);
+
+const mockFiles = [
+ { name: 'notebooks', type: 'directory', modified: '2024-01-15', size: 0 },
+ { name: 'data', type: 'directory', modified: '2024-01-14', size: 0 },
+ { name: 'analysis.ipynb', type: 'file', modified: '2024-01-15', size: 15420 },
+ { name: 'dataset.csv', type: 'file', modified: '2024-01-13', size: 2048576 },
+ { name: 'model.pkl', type: 'file', modified: '2024-01-12', size: 524288 },
+ { name: 'README.md', type: 'file', modified: '2024-01-10', size: 1024 },
+];
+
+const getFileIcon = filename => {
+ const ext = filename.split('.').pop()?.toLowerCase();
+ switch (ext) {
+ case 'ipynb':
+ return '📓';
+ case 'py':
+ return '🐍';
+ case 'csv':
+ return '📊';
+ case 'json':
+ return '📋';
+ case 'pkl':
+ return '🎯';
+ case 'md':
+ return '📄';
+ default:
+ return '📄';
+ }
+};
+
+const formatFileSize = bytes => {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
+const meta = {
+ title: 'Datalayer/Storage/ContentsBrowser',
+ component: ContentsBrowser,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ path: {
+ control: 'text',
+ description: 'Current directory path',
+ },
+ onNavigate: {
+ action: 'navigate',
+ description: 'Callback when navigating to a directory',
+ },
+ onSelect: {
+ action: 'select',
+ description: 'Callback when selecting a file',
+ },
+ selectedItems: {
+ control: 'object',
+ description: 'Array of selected item names',
+ },
+ },
+} satisfies Meta
+
+
+ {/* File List */}
+
+
+ {path}
+
+
+
+ {mockFiles.map((file, index) => (
+
+ onSelect?.(file)}
+ onDoubleClick={() =>
+ file.type === 'directory' && onNavigate?.(file.name)
+ }
+ >
+
+ {file.type === 'directory' ? '📁' : getFileIcon(file.name)}
+
+ {file.name}
+
+ {file.type === 'directory' ? '--' : formatFileSize(file.size)}
+
+
+ {file.modified}
+
+
+ ))}
+
+ {children}
+
+ ),
+ SubTree: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ LeadingVisual: ({ children, ...props }) => (
+
+ {children}
+
+ ),
+ },
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ FileIcon: () => (
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {},
+} satisfies Meta
+
+ );
+};
+
+export const RootDirectory: Story = {
+ render: InteractiveTemplate,
+ args: {
+ item: {
+ name: '',
+ path: '',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ },
+};
+
+export const SubDirectory: Story = {
+ render: InteractiveTemplate,
+ args: {
+ item: {
+ name: 'notebooks',
+ path: 'notebooks',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ },
+};
+
+// Single TreeItem story
+export const SingleFileItem: Story = {
+ render: args => {
+ const [current, setCurrent] = useState(false);
+
+ const handleSelect = (item: IContentsView) => {
+ setCurrent(true);
+ console.log('Selected item:', item);
+ };
+
+ const handleContextMenu = ref => {
+ console.log('Context menu requested for:', ref.current);
+ };
+
+ return (
+
+
+ );
+ },
+ args: {
+ item: {
+ name: 'example.ipynb',
+ path: 'example.ipynb',
+ type: 'notebook',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'application/x-ipynb+json',
+ content: null,
+ writable: true,
+ format: 'json',
+ fileType: {
+ name: 'notebook',
+ icon: {
+ react: () => (
+
+ ),
+ },
+ },
+ },
+ },
+};
+
+export const ModelToViewUtility: Story = {
+ render: () => {
+ const mockModels: Contents.IModel[] = [
+ {
+ name: 'data.csv',
+ path: 'data.csv',
+ type: 'file',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'text/csv',
+ content: null,
+ writable: true,
+ format: 'text',
+ },
+ {
+ name: 'notebooks',
+ path: 'notebooks',
+ type: 'directory',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ {
+ name: '.hidden',
+ path: '.hidden',
+ type: 'file',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: '',
+ content: null,
+ writable: true,
+ format: 'text',
+ },
+ {
+ name: 'analysis.ipynb',
+ path: 'analysis.ipynb',
+ type: 'notebook',
+ created: '2023-01-01T00:00:00Z',
+ last_modified: '2023-01-01T00:00:00Z',
+ mimetype: 'application/x-ipynb+json',
+ content: null,
+ writable: true,
+ format: 'json',
+ },
+ ];
+
+ const processed = modelToView(mockModels, mockDocumentRegistry);
+
+ return (
+
+
+ );
+ },
+ args: {},
+};
diff --git a/src/components/students/StudentItemStatus.stories.tsx b/src/components/students/StudentItemStatus.stories.tsx
new file mode 100644
index 00000000..95a0eb3d
--- /dev/null
+++ b/src/components/students/StudentItemStatus.stories.tsx
@@ -0,0 +1,341 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { StudentItemStatus } from './StudentItemStatus';
+import { IStudent, IStudentItem } from '../../models';
+
+const mockStudent: IStudent = {
+ id: 'student-1',
+ name: 'John Doe',
+ email: 'john.doe@example.com',
+ username: 'johndoe',
+};
+
+const meta = {
+ title: 'Datalayer/Students/StudentItemStatus',
+ component: StudentItemStatus,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ useTheme: () => ({
+ theme: {
+ colorSchemes: {
+ light: {
+ colors: {
+ success: { muted: '#28a745' },
+ severe: { muted: '#d73a49' },
+ },
+ },
+ },
+ },
+ }),
+ Tooltip: ({ children, text }) => (
+ modelToView Utility Demo
++ Processes: {mockModels.length} items → {processed.length} visible + items +
+-
+ {processed.map(item => (
+
- + {item.type === 'directory' ? '📁' : '📄'} {item.name} + + ))} +
+ + Note: Hidden files (.hidden) are filtered out, directories are + sorted first + +
+
+ {children}
+
+ ),
+ Button: ({ children, variant, ...props }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/primer-addons',
+ default: {
+ Box: ({ children, sx, display, ml, ...props }) => (
+
+ {text}
+
+
+ {children}
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ student: {
+ control: 'object',
+ description: 'Student information',
+ },
+ studentItem: {
+ control: 'object',
+ description: 'Student item with status information',
+ },
+ },
+} satisfies Meta
+
+ ),
+};
diff --git a/src/components/subnav/SubNav.stories.tsx b/src/components/subnav/SubNav.stories.tsx
new file mode 100644
index 00000000..4e2460bb
--- /dev/null
+++ b/src/components/subnav/SubNav.stories.tsx
@@ -0,0 +1,212 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { SubNav } from './SubNav';
+
+const meta = {
+ title: 'Datalayer/SubNav/SubNav',
+ component: SubNav,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react-brand',
+ default: {
+ Button: ({ children, variant, size, ...props }) => (
+
+ ),
+ ButtonGroup: ({ children }) => (
+
+ Completed Dataset:
+
+
+
+ Incomplete Lesson:
+
+
+
+ Completed Exercise:
+
+
+
+ Graded Assignment:
+
+ {children}
+ ),
+ Text: ({ children, ...props }) => (
+ {children}
+ ),
+ ThemeProvider: ({ children }) => children,
+ useWindowSize: () => ({ isMedium: true, isLarge: true }),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ ChevronDownIcon: ({ size = 16 }) => (
+
+ ),
+ ChevronUpIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ {
+ path: '../../hooks',
+ default: {
+ useId: prefix => `${prefix}-${Math.random().toString(36).slice(2)}`,
+ useKeyboardEscape: () => {},
+ useOnClickOutside: () => {},
+ useProvidedRefOrCreate: () => ({ current: null }),
+ useContainsFocus: () => false,
+ },
+ },
+ {
+ path: '../primer',
+ default: {
+ BaseProps: {},
+ },
+ },
+ ],
+ },
+ },
+} satisfies Meta
+
+ ),
+};
+
+export const WithDropdown: Story = {
+ render: () => (
+
+
+ Mock SubNav Component
++ This is a placeholder for the SubNav component as it's a complex + navigation component. +
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/src/components/tables/DataTable.stories.tsx b/src/components/tables/DataTable.stories.tsx
new file mode 100644
index 00000000..e47d9163
--- /dev/null
+++ b/src/components/tables/DataTable.stories.tsx
@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DataTable } from './DataTable';
+
+const meta = {
+ title: 'Datalayer/Tables/DataTable',
+ component: DataTable,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Box: ({ children, ...props }) =>
+
+ SubNav with Dropdown
+Navigation component with dropdown functionality.
+
+
+
+
+
+ {children}
,
+ Button: ({ children, onClick, ...props }) => (
+
+ ),
+ PageLayout: ({
+ children,
+ containerWidth,
+ padding,
+ sx,
+ ...props
+ }) => (
+
+ {children}
+
+ ),
+ 'PageLayout.Content': ({ children }) => (
+
+ {children || 'Data table content would be rendered here'}
+
+ ),
+ },
+ },
+ {
+ path: '@primer/react/experimental',
+ default: {
+ Dialog: ({ children, sx, onClose }) => (
+
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ data: {
+ control: 'object',
+ description: 'Array of data to display in the table',
+ },
+ },
+} satisfies Meta
+
+ {children}
+ + Data Table - Zoomed View +
+ +
+ {text.split('').map((char, index) => (
+
+ {char === ' ' ? '\u00A0' : char}
+
+ ))}
+
+
+);
+
+const meta = {
+ title: 'Datalayer/TextReveal/TextRevealAnimation',
+ component: TextRevealAnimation,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ text: {
+ control: 'text',
+ description: 'Text to animate',
+ },
+ delay: {
+ control: { type: 'number', min: 0, max: 300, step: 10 },
+ description: 'Delay between each character animation (ms)',
+ },
+ className: {
+ control: 'text',
+ description: 'Additional CSS class',
+ },
+ },
+} satisfies Meta
+
+ ),
+};
+
+export const InList: Story = {
+ render: () => (
+
+
+
+ Default Space:
+
+
+
+
+ Course Space:
+
+
+
+ ),
+};
diff --git a/src/components/toolbars/AssignmentEditorToolbar.stories.tsx b/src/components/toolbars/AssignmentEditorToolbar.stories.tsx
new file mode 100644
index 00000000..899d31ae
--- /dev/null
+++ b/src/components/toolbars/AssignmentEditorToolbar.stories.tsx
@@ -0,0 +1,249 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AssignmentEditorToolbar } from './AssignmentEditorToolbar';
+
+const meta = {
+ title: 'Datalayer/Toolbars/AssignmentEditorToolbar',
+ component: AssignmentEditorToolbar,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Button: ({
+ children,
+ onClick,
+ variant = 'primary',
+ size = 'medium',
+ leadingVisual: LeadingVisual,
+ ...props
+ }) => (
+
+ ),
+ Box: ({ children, display = 'block', ...props }) => (
+ Space Types
+
+
+
+ My Data Science Project
+
+
+ Machine Learning 101
+
+
+ Personal Workspace
+
+
+ {children}
+
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ RepoPushIcon: ({ size = 16 }) => (
+
+ ),
+ PlayIcon: ({ size = 16 }) => (
+
+ ),
+ StopIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ notebookStore: {
+ getState: () => ({
+ selectNotebook: id => ({
+ id,
+ kernelStatus: 'idle', // Will be overridden by story args
+ }),
+ runAll: id => console.log('Running all cells in notebook:', id),
+ interrupt: id => console.log('Interrupting notebook:', id),
+ }),
+ },
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ useGradeStore: () => ({
+ grade: date => console.log('Grading assignment at:', date),
+ }),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ notebookId: {
+ control: 'text',
+ description: 'ID of the notebook',
+ },
+ },
+} satisfies Meta
+
+ );
+ },
+ args: {
+ notebookId: 'demo-notebook',
+ },
+};
diff --git a/src/components/toolbars/DocumentEditorToolbar.stories.tsx b/src/components/toolbars/DocumentEditorToolbar.stories.tsx
new file mode 100644
index 00000000..6413dffb
--- /dev/null
+++ b/src/components/toolbars/DocumentEditorToolbar.stories.tsx
@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DocumentEditorToolbar } from './DocumentEditorToolbar';
+
+const meta = {
+ title: 'Datalayer/Toolbars/DocumentEditorToolbar',
+ component: DocumentEditorToolbar,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@primer/react',
+ default: {
+ Button: ({
+ children,
+ onClick,
+ variant = 'primary',
+ size = 'medium',
+ leadingVisual: LeadingVisual,
+ ...props
+ }) => (
+
+ ),
+ Box: ({ children, display = 'block', ...props }) => (
+ Assignment Editor Toolbar Demo
+
+
+ Idle State (shows Grade + Run All):
+
+
+ Busy State (shows Grade + Interrupt):
+
+
+ + Click buttons to see console output +
+
+ {children}
+
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ RepoPushIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ {
+ path: '../../state',
+ default: {
+ documentStore: {
+ getState: () => ({
+ save: date => console.log('Saving document at:', date),
+ }),
+ },
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {},
+} satisfies Meta
+
+ );
+ },
+ args: {},
+};
+
+export const InDocumentContext: Story = {
+ render: () => {
+ return (
+ Document Editor Toolbar Demo
+
+
+ This toolbar provides document editing functionality.
+
+
+ + Click the Save button to see console output +
+
+
+ );
+ },
+ args: {},
+};
diff --git a/src/components/toolbars/NotebookEditorToolbar.stories.tsx b/src/components/toolbars/NotebookEditorToolbar.stories.tsx
new file mode 100644
index 00000000..5cca9255
--- /dev/null
+++ b/src/components/toolbars/NotebookEditorToolbar.stories.tsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NotebookEditorToolbar } from './NotebookEditorToolbar';
+
+const meta = {
+ title: 'Datalayer/Toolbars/NotebookEditorToolbar',
+ component: NotebookEditorToolbar,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ mockAddonConfigs: {
+ globalMockData: [
+ {
+ path: '@datalayer/jupyter-react',
+ default: {
+ NotebookCommandIds: {
+ save: 'notebook:save',
+ runAll: 'notebook:run-all',
+ interrupt: 'notebook:interrupt',
+ },
+ },
+ },
+ {
+ path: '@lumino/commands',
+ default: {
+ CommandRegistry: class {
+ execute(id: string) {
+ console.log('Executing command:', id);
+ return Promise.resolve();
+ }
+ isEnabled(id: string) {
+ return true;
+ }
+ },
+ },
+ },
+ {
+ path: '@primer/react',
+ default: {
+ Button: ({
+ children,
+ onClick,
+ disabled,
+ size,
+ variant,
+ ...props
+ }) => (
+
+ ),
+ },
+ },
+ {
+ path: '@primer/octicons-react',
+ default: {
+ PlayIcon: ({ size = 16 }) => (
+
+ ),
+ StopIcon: ({ size = 16 }) => (
+
+ ),
+ },
+ },
+ ],
+ },
+ },
+ argTypes: {
+ save: {
+ action: 'saved',
+ description: 'Callback to save the notebook',
+ },
+ },
+} satisfies Meta
+
+
+
+ Document Title
++ This is where the document content would appear. The toolbar above + provides editing actions. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+