GEP-168 Update storybook js

MetaCell · Jan 7, 2025 · 82a41b0 · 82a41b0
1 parent ef56d1d
commit 82a41b0
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 10 deletions.
diff --git a/examples/storybook-showcase/.storybook/main.ts b/examples/storybook-showcase/.storybook/main.ts
@@ -1,15 +1,36 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public', '../src/assets'],
   addons: [
-    '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     '@storybook/addon-mdx-gfm',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        sourceLoaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          test: [/\.stories\.tsx?$/],
+          include: [path.resolve(__dirname, '../src')],
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        },
+      },
+    },
+    // '../src/manager.tsx',
   ],
 
   framework: {

diff --git a/examples/storybook-showcase/.storybook/preview.ts b/examples/storybook-showcase/.storybook/preview.ts
@@ -8,6 +8,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    // docs: {
+    //   canvas: {
+    //     sourceState: 'shown',
+    //   },
+    // },
   },
 
   tags: ['autodocs'],

diff --git a/examples/storybook-showcase/package.json b/examples/storybook-showcase/package.json
@@ -12,7 +12,8 @@
     "lint-fix": "eslint --fix .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "storybook-docs": "storybook dev --docs"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -45,6 +46,7 @@
     "@storybook/addon-links": "^8.3.3",
     "@storybook/addon-mdx-gfm": "^8.3.3",
     "@storybook/addon-onboarding": "^8.3.3",
+    "@storybook/addon-storysource": "^8.3.5",
     "@storybook/blocks": "^8.3.3",
     "@storybook/builder-vite": "^8.3.4",
     "@storybook/react": "^8.3.3",

diff --git a/examples/storybook-showcase/src/stories/Canvas3D.stories.tsx b/examples/storybook-showcase/src/stories/Canvas3D.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta } from '@storybook/react';
 import { Title, Subtitle, Description, Primary, Controls } from '@storybook/blocks';
+import { LazyStories } from '../../.storybook/blocks/LazyStory';
 
 import Canvas from '@metacell/geppetto-meta-ui/3d-canvas/Canvas';
 
@@ -11,22 +12,31 @@ const meta = {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
     docs: {
+      canvas: {
+        // sourceState: 'shown',
+      },
+      source: {
+        type: 'dynamic',
+      },
       page: () => (
         <>
           <Title />
           <Subtitle />
           <Description />
           <Primary />
           <Controls />
+          <LazyStories />
         </>
       ),
     },
   },
   decorators: [
     Story => (
-      <div style={{ height: '700px', width: '900px' }}>
-        <Story />
-      </div>
+      <>
+        <div style={{ height: '700px', width: '900px' }}>
+          <Story />
+        </div>
+      </>
     )],
 } satisfies Meta<typeof Canvas>;
 

diff --git a/examples/storybook-showcase/tsconfig.node.json b/examples/storybook-showcase/tsconfig.node.json
@@ -1,22 +1,25 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-
+    "jsx": "react-jsx",
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}
diff --git a/examples/storybook-showcase/yarn.lock b/examples/storybook-showcase/yarn.lock
@@ -939,6 +939,15 @@
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-storysource@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-8.3.5.tgz#d24edb90fad2e9a84cf3bb217cf300813d0d6630"
+  integrity sha512-NdVVlBtVRLBeMNwaMNd+B/XDNbQGQ4yKjZOCNBzGsV0sf0fAm8BQ7D5HJFbL4/VoZmRxlYCeQRYHu+/iE2VJhg==
+  dependencies:
+    "@storybook/source-loader" "8.3.5"
+    estraverse "^5.2.0"
+    tiny-invariant "^1.3.1"
+
 "@storybook/[email protected]":
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.3.5.tgz#7328fed0f4a24c6828ba23e06b9cddd0d3e00e2b"
@@ -1106,6 +1115,16 @@
     type-fest "~2.19"
     util-deprecate "^1.0.2"
 
+"@storybook/[email protected]":
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-8.3.5.tgz#a481aa79a0c686a949e68d4e0f8a9f62f35847a7"
+  integrity sha512-rQRWMqsM2PROeQxBCX23sDKdTMpdkub3A2Q3+6JhVzYRQodQrQDbzVRULq3G7RGXdktTkE+huVO4pLKaDa7PDw==
+  dependencies:
+    "@storybook/csf" "^0.1.11"
+    estraverse "^5.2.0"
+    lodash "^4.17.21"
+    prettier "^3.1.1"
+
 "@storybook/[email protected]", "@storybook/test@^8.3.3":
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.3.5.tgz#0dffc9d4a1eaa9552e69457b16b5085e36883c8a"
@@ -5429,6 +5448,11 @@ prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==
 
+prettier@^3.1.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"