♻️ Split legacy MDX stories into CSF + MDX

.storybook/main.ts

@@ -9,7 +9,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

package.json

@@ -60,6 +60,7 @@
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
     "@storybook/jest": "^0.2.3",
     "@storybook/react": "^7.6.14",
     "@storybook/react-webpack5": "^7.6.14",

src/0001-intro.stories.mdx → src/0001-intro.mdx

@@ -1,4 +1,4 @@
-import {Meta} from '@storybook/addon-docs';
+import {Meta} from '@storybook/blocks';
 
 import ownTokens from '../lib/tokens/tokens';
 import TokensTable from './TokensTable';

src/ColorPreview.mdx

@@ -0,0 +1,34 @@
+import {Canvas, Meta, ArgsTable} from '@storybook/blocks';
+import * as ColorPreviewStories from './ColorPreview.stories';
+
+import ColorPreview from './ColorPreview';
+
+<Meta of={ColorPreviewStories} />
+
+## Color preview
+
+Show a preview of what a color looks like.
+
+### Formats
+
+Any valid way to specify a CSS color is accepted.
+
+<Canvas of={ColorPreviewStories.HEX} />
+<Canvas of={ColorPreviewStories.RGB} />
+<Canvas of={ColorPreviewStories.RGBA} />
+<Canvas of={ColorPreviewStories.HSLA} />
+
+<ArgsTable of={ColorPreview} />
+
+### `isColor` utility
+
+Use the `isColor` utility to check if a value is a valid CSS color before rendering this
+component.
+
+```jsx
+import ColorPreview, {isColor} from './ColorPreview';
+
+const MyComponent = () => {
+  return isColor('rgb(255, 0, 0)') ? <ColorPreview color="rgb(255, 0, 0)" /> : null;
+};
+```

src/ColorPreview.stories.ts

@@ -0,0 +1,43 @@
+import {Meta, StoryObj} from '@storybook/react';
+
+import ColorPreview from './ColorPreview';
+
+const meta = {
+  title: 'Private API/ColorPreview',
+  component: ColorPreview,
+} satisfies Meta<typeof ColorPreview>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const HEX: Story = {
+  name: 'Hex',
+
+  args: {
+    color: '#FF0000',
+  },
+};
+
+export const RGB: Story = {
+  name: 'RGB',
+
+  args: {
+    color: 'rgb(0, 255, 0)',
+  },
+};
+
+export const RGBA: Story = {
+  name: 'RGBA',
+
+  args: {
+    color: 'rgba(0, 0, 255, 0.5)',
+  },
+};
+
+export const HSLA: Story = {
+  name: 'HSLA',
+
+  args: {
+    color: 'hsla(20, 80%, 75%, 1)',
+  },
+};

src/ColorPreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface ColorPreviewProps {
+export interface ColorPreviewProps {
   color: string;
 }
 

src/TokenEditor.mdx

@@ -0,0 +1,27 @@
+import {useState} from 'react';
+import {Canvas, Meta, ArgsTable} from '@storybook/blocks';
+import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js';
+import * as TokenEditorStories from './TokenEditor.stories';
+
+import TokenEditor from './TokenEditor';
+
+<Meta of={TokenEditorStories} />
+
+## Token editor
+
+Given a style-dictionary tokens output (resolved state of all token files), show an
+editor to inspect and modify values of design tokens.
+
+The underlying components can be used to document components in your own storybook
+instance or even expose controls for theme builders.
+
+When changes are made in the editor, the new style-dictionary tree of the tokens is
+provided to the `onChange` callback prop.
+
+<Canvas of={TokenEditorStories.Default} />
+
+<ArgsTable of={TokenEditor} />
+
+## With a callback function to capture edits
+
+<Canvas of={TokenEditorStories.OnChangeCallback} />

src/TokenEditor.stories.tsx

@@ -0,0 +1,82 @@
+import {useState} from 'react';
+import {Meta, StoryObj, StoryFn} from '@storybook/react';
+// @ts-expect-error
+import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js';
+
+import TokenEditor from './TokenEditor';
+import type {TopLevelContainer} from './types';
+
+const meta = {
+  title: 'Public API/TokenEditor',
+  component: TokenEditor,
+} satisfies Meta<typeof TokenEditor>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Default',
+
+  args: {
+    tokens: ofDesignTokens,
+
+    initialValues: {
+      // TODO: look into better (recursive) type definitions
+      // @ts-expect-error
+      of: {
+        button: {
+          primary: {
+            bg: {
+              value: '#0177b2',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const callbackRender: StoryFn<typeof TokenEditor> = ({tokens, initialValues}) => {
+  const [changeCounter, setChangeCounter] = useState(0);
+  const [values, setValues] = useState(initialValues);
+
+  const onChange = (newValues: TopLevelContainer) => {
+    setValues(newValues);
+    setChangeCounter(changeCounter + 1);
+  };
+
+  return (
+    <>
+      <div style={{padding: '1em', marginBottom: '1em', background: '#eee'}}>
+        <div>Changes received: {changeCounter}</div>
+        <code>
+          <pre>{JSON.stringify(values, null, 2)}</pre>
+        </code>
+      </div>
+      <TokenEditor tokens={tokens} initialValues={initialValues} onChange={onChange} />
+    </>
+  );
+};
+
+export const OnChangeCallback: Story = {
+  render: callbackRender,
+  name: 'onChange callback',
+
+  args: {
+    tokens: ofDesignTokens,
+
+    initialValues: {
+      // TODO: look into better (recursive) type definitions
+      // @ts-expect-error
+      of: {
+        button: {
+          primary: {
+            bg: {
+              value: '#0177b2',
+            },
+          },
+        },
+      },
+    },
+  },
+};

src/TokenEditor.tsx

@@ -12,7 +12,7 @@ type StyleDictValue = {
   value: string;
 };
 
-type StyleDictValueMap = {
+export type StyleDictValueMap = {
   [key: string]: StyleDictValue | StyleDictValueMap;
 };
 
@@ -166,7 +166,7 @@ const ViewModePicker = ({
   );
 };
 
-interface TokenEditorProps {
+export interface TokenEditorProps {
   tokens: TopLevelContainer;
   initialValues?: TopLevelContainer;
   onChange?: (values: StyleDictValueMap) => void;

src/TokenFilter.mdx

@@ -0,0 +1,12 @@
+import {Canvas, Meta} from '@storybook/blocks';
+import * as TokenFilterStories from './TokenFilter.stories';
+
+import TokenFilter from './TokenFilter';
+
+<Meta of={TokenFilterStories} />
+
+## Token filter
+
+Provide filter controls to limit the tokens displayed.
+
+<Canvas of={TokenFilterStories.Default} />