@vyriy/storybook-config 0.3.4 → 0.3.8

package/README.md

@@ -56,7 +56,7 @@ export { default } from '@vyriy/storybook-config/preview';
 If you customize preview locally, the preview module also exposes `Preview`.
 
 ```ts
-import config, { type Preview } from '@vyriy/storybook-config/main';
+import config, { type Preview } from '@vyriy/storybook-config/preview';
 
 const preview: Preview = {
   ...config,
@@ -64,6 +64,38 @@ const preview: Preview = {
 };
 ```
 
+When a project needs custom docs themes, use `createThemedDocsContainer` so shared Markdown behavior stays enabled.
+
+```ts
+import config, { createThemedDocsContainer, type Preview } from '@vyriy/storybook-config/preview';
+import themeDark from './theme-dark';
+import themeLight from './theme-light';
+
+const preview: Preview = {
+  ...config,
+  parameters: {
+    ...config.parameters,
+    docs: {
+      container: createThemedDocsContainer({
+        dark: themeDark,
+        light: themeLight,
+      }),
+    },
+  },
+};
+```
+
+The shared preview container configures Storybook `Markdown` blocks to render Mermaid fenced code blocks.
+
+```tsx
+import Structure from './STRUCTURE.md?raw';
+import { Markdown } from '@storybook/addon-docs/blocks';
+
+<Markdown>{Structure}</Markdown>;
+```
+
+The underlying renderer is also available as `@vyriy/storybook-config/mermaid-markdown` for custom docs surfaces outside the shared preview container.
+
 ## Current Vyriy Usage
 
 In this repository:

package/mermaid-markdown.d.ts

@@ -0,0 +1,4 @@
+export type MermaidMarkdownProps = {
+    readonly children: string;
+};
+export declare const MermaidMarkdown: ({ children }: MermaidMarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/mermaid-markdown.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Markdown } from '@storybook/addon-docs/blocks';
+import { useDarkMode } from '@vueless/storybook-dark-mode';
+import mermaid from 'mermaid';
+import { useEffect, useId, useMemo, useState } from 'react';
+const mermaidBlockPattern = /```mermaid\s*\n([\s\S]*?)```/g;
+const parseMarkdownParts = (markdown) => {
+    const parts = [];
+    let cursor = 0;
+    for (const match of markdown.matchAll(mermaidBlockPattern)) {
+        const [block, diagram] = match;
+        const { index } = match;
+        if (index > cursor) {
+            parts.push({
+                content: markdown.slice(cursor, index),
+                key: `markdown-${cursor}-${index}`,
+                type: 'markdown',
+            });
+        }
+        parts.push({
+            content: diagram.trim(),
+            key: `mermaid-${index}`,
+            type: 'mermaid',
+        });
+        cursor = index + block.length;
+    }
+    if (cursor < markdown.length) {
+        parts.push({
+            content: markdown.slice(cursor),
+            key: `markdown-${cursor}-${markdown.length}`,
+            type: 'markdown',
+        });
+    }
+    return parts;
+};
+const MermaidDiagram = ({ chart }) => {
+    const id = `mermaid-${useId().replaceAll(':', '')}`;
+    const isDark = useDarkMode();
+    const [svg, setSvg] = useState('');
+    const [error, setError] = useState();
+    useEffect(() => {
+        let mounted = true;
+        mermaid.initialize({
+            securityLevel: 'strict',
+            startOnLoad: false,
+            theme: isDark ? 'dark' : 'default',
+        });
+        void mermaid
+            .render(id, chart)
+            .then(({ svg: renderedSvg }) => {
+            if (!mounted) {
+                return;
+            }
+            setError(undefined);
+            setSvg(renderedSvg);
+        })
+            .catch((unknownError) => {
+            if (!mounted) {
+                return;
+            }
+            setSvg('');
+            setError(unknownError instanceof Error ? unknownError.message : 'Unable to render Mermaid diagram.');
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [
+        chart,
+        id,
+        isDark,
+    ]);
+    if (error) {
+        return (_jsx("pre", { children: _jsx("code", { children: error }) }));
+    }
+    return (_jsx("div", { className: "vyriy-mermaid", dangerouslySetInnerHTML: { __html: svg } }));
+};
+export const MermaidMarkdown = ({ children }) => {
+    const parts = useMemo(() => parseMarkdownParts(children), [children]);
+    return (_jsx(_Fragment, { children: parts.map((part) => part.type === 'mermaid' ? (_jsx(MermaidDiagram, { chart: part.content }, part.key)) : (_jsx(Markdown, { children: part.content }, part.key))) }));
+};

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@vyriy/storybook-config",
-  "version": "0.3.4",
+  "version": "0.3.8",
   "description": "Shared Storybook config for Vyriy projects",
   "type": "module",
   "main": "./main.js",
   "dependencies": {
+    "@mdx-js/react": "^3.1.1",
     "@storybook/addon-a11y": "^10.4.0",
     "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-themes": "^10.4.0",
@@ -12,16 +13,17 @@
     "@storybook/react-webpack5": "^10.4.0",
     "@vueless/storybook-dark-mode": "^10.0.8",
     "css-loader": "^7.1.4",
+    "mermaid": "^11.15.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "sass": "^1.99.0",
-    "sass-loader": "^16.0.8",
+    "sass-loader": "^17.0.0",
     "storybook": "^10.4.0",
     "storybook-addon-pseudo-states": "^10.4.0",
     "storybook-addon-tag-badges": "^3.1.0",
     "style-loader": "^4.0.0",
     "typescript": "^6.0.3",
-    "webpack": "^5.106.2"
+    "webpack": "^5.107.0"
   },
   "agents": "./AGENTS.md",
   "license": "MIT",
@@ -47,6 +49,16 @@
       "import": "./main.js",
       "default": "./main.js"
     },
+    "./mermaid-markdown": {
+      "types": "./mermaid-markdown.d.ts",
+      "import": "./mermaid-markdown.js",
+      "default": "./mermaid-markdown.js"
+    },
+    "./mermaid-markdown.js": {
+      "types": "./mermaid-markdown.d.ts",
+      "import": "./mermaid-markdown.js",
+      "default": "./mermaid-markdown.js"
+    },
     "./preview": {
       "types": "./preview.d.ts",
       "import": "./preview.js",

package/preview.d.ts

@@ -1,4 +1,12 @@
 import type { Preview as ReactWebpackPreview } from '@storybook/react-webpack5';
+import { type DocsContainerProps } from '@storybook/addon-docs/blocks';
+import { type PropsWithChildren } from 'react';
+import { type ThemeVars } from 'storybook/theming';
 export type { Preview } from '@storybook/react-webpack5';
+export type DocsThemes = {
+    readonly dark: ThemeVars;
+    readonly light: ThemeVars;
+};
+export declare const createThemedDocsContainer: (docsThemes: DocsThemes) => ({ children, context }: PropsWithChildren<DocsContainerProps>) => import("react/jsx-runtime").JSX.Element;
 declare const preview: ReactWebpackPreview;
 export default preview;

package/preview.js

@@ -1,11 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { MDXProvider } from '@mdx-js/react';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { lazy, Suspense } from 'react';
 import { themes } from 'storybook/theming';
 import { useDarkMode } from '@vueless/storybook-dark-mode';
-const ThemedDocsContainer = ({ children, context }) => {
-    const isDark = useDarkMode();
-    return (_jsx(DocsContainer, { context: context, theme: isDark ? themes.dark : themes.light, children: children }));
+const LazyMermaidMarkdown = lazy(async () => {
+    const { MermaidMarkdown } = await import('./mermaid-markdown.js');
+    return { default: MermaidMarkdown };
+});
+const MermaidMarkdownOverride = ({ children }) => (_jsx(Suspense, { fallback: null, children: _jsx(LazyMermaidMarkdown, { children: children }) }));
+export const createThemedDocsContainer = (docsThemes) => {
+    const ThemedDocsContainer = ({ children, context }) => {
+        const isDark = useDarkMode();
+        return (_jsx(DocsContainer, { context: context, theme: isDark ? docsThemes.dark : docsThemes.light, children: _jsx(MDXProvider, { components: { Markdown: MermaidMarkdownOverride }, children: children }) }));
+    };
+    return ThemedDocsContainer;
 };
+const ThemedDocsContainer = createThemedDocsContainer({
+    dark: themes.dark,
+    light: themes.light,
+});
 const preview = {
     tags: ['autodocs'],
     argTypes: {