chroe: storybook update

packages/doc/.gitignore

@@ -23,3 +23,5 @@ storybook-static
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

packages/doc/.storybook/main.js → packages/doc/.storybook/main.ts

@@ -1,26 +1,46 @@
-const { merge } = require('lodash');
-const path = require('path');
-const webpack = require('webpack');
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import { merge } from 'lodash';
+
+import path, { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    // "@storybook/addon-interactions",
-    '@storybook/addon-docs',
-    // https://storybook.js.org/addons/storybook-addon-designs/
-    'storybook-addon-designs',
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
   },
+
+  docs: {
+    autodocs: false,
+  },
+
   webpackFinal: async (config) => {
-    const svgLoaderRule = config.module.rules.find(
+    const svgLoaderRule = (config.module?.rules ?? []).find(
+      // @ts-ignore
       (rule) => rule.test && rule.test.test && rule.test.test('.svg'),
     );
-    svgLoaderRule.exclude = /svg$/;
+    if (svgLoaderRule) {
+      // @ts-ignore
+      svgLoaderRule.exclude = /svg$/;
+    }
     return merge(config, {
       resolve: {
         ...config.resolve,
@@ -36,7 +56,7 @@ module.exports = {
             'src/',
           ),
           '@dodoex/icons': path.resolve(__dirname, '../../dodoex-icons'),
-          ...config.resolve.alias,
+          ...config.resolve?.alias,
         },
         fallback: {
           ...(config.resolve || {}).fallback,
@@ -69,7 +89,7 @@ module.exports = {
       },
       module: {
         rules: [
-          ...config.module.rules,
+          ...(config.module?.rules ?? []),
           {
             test: /\.svg$/,
             // type: 'asset/inline',
@@ -103,16 +123,7 @@ module.exports = {
           },
         ],
       },
-      plugins: [
-        ...config.plugins,
-        // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
-        new webpack.ProvidePlugin({
-          Buffer: ['buffer', 'Buffer'],
-        }),
-        new webpack.ProvidePlugin({
-          process: 'process/browser',
-        }),
-      ],
     });
   },
 };
+export default config;

packages/doc/.storybook/preview.tsx

@@ -0,0 +1,74 @@
+import { RootPage } from '../src/components/RootPage';
+import React, { Suspense, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setColorMode } from '../src/configure-store/actions/settings';
+import { Box } from '@dodoex/components';
+
+const SwitchTheme = ({ themeMode }) => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    // @ts-ignore
+    dispatch(setColorMode(themeMode));
+  }, [themeMode]);
+  return null;
+};
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: {
+      disable: true,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Property that specifies if the name of the item will be displayed
+        name: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      return (
+        <RootPage>
+          <Suspense fallback={<div />}>
+            <SwitchTheme themeMode={context.globals.theme} />
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                backgroundColor: 'background.default',
+              }}
+            />
+            <Box
+              sx={{
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
+              <Story />
+            </Box>
+          </Suspense>
+        </RootPage>
+      );
+    },
+  ],
+};
+
+export default preview;

packages/doc/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    // '@lingui/babel-preset-react',
+  ],
+  plugins: ['macros'],
+};

packages/doc/package.json

@@ -3,18 +3,14 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "start-storybook -p 6006",
-    "build": "build-storybook"
-  },
-  "peerDependencies": {
-    "@dodoex/api": ">=0.0.1",
-    "@dodoex/widgets": "^2.6.4"
+    "start": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
     "@dodoex/components": "^3.0.0-beta.0",
     "@emotion/styled": "^11.10.0",
-    "@storybook/addon-docs": "^6.5.7",
+    "@storybook/addon-docs": "^8.3.5",
     "@web3modal/ethers5": "^3.5.5",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
@@ -27,22 +23,29 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-interactions": "^6.5.7",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.7",
-    "@storybook/manager-webpack5": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@storybook/testing-library": "^0.0.11",
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
     "@svgr/webpack": "^6.3.1",
     "@types/react": "^18.0.14",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.5",
     "@vitejs/plugin-react": "^1.3.2",
     "babel-loader": "^8.2.5",
     "file-loader": "^6.2.0",
+    "storybook": "^8.3.5",
+    "stream-browserify": "^3.0.0",
     "typescript": "^5.6.3",
     "webpack": "5"
   }
-}
+}

packages/doc/src/components/RootPage.tsx

@@ -3,5 +3,9 @@ import { store } from '../configure-store';
 import { WithMuiTheme } from './theme/WithMuiTheme';
 
 export function RootPage({ children }: { children: React.ReactNode }) {
-  return <ReduxProvider store={store}>{children}</ReduxProvider>;
+  return (
+    <ReduxProvider store={store}>
+      <WithMuiTheme>{children}</WithMuiTheme>
+    </ReduxProvider>
+  );
 }