chore: upgrade to Storybook7

.github/workflows/tests.yml

@@ -46,6 +46,8 @@ jobs:
 
       - run: yarn install
 
+      - run: yarn build --ignore=@strapi/design-system-docs
+
       - name: Run lint
         run: yarn lint
 
@@ -91,14 +93,10 @@ jobs:
       - run: yarn install
 
       - name: Install Playwright
-        run: npx playwright@1.35.1 install
+        run: npx playwright@1.37.0 install
 
       - name: Build
         run: yarn build
 
-      - name: Start storybook
-        working-directory: ./docs/storybook-static
-        run: yarn add -D http-server && yarn http-server -p 6006 &
-
       - name: Run the tests
         run: yarn test:e2e:ci -- --project=${{ matrix.browser }}

.gitignore

@@ -111,7 +111,7 @@ storybook-static
 # Visual Studio Code
 ############################
 
-.vscode/
+.vscode/*
 !.vscode/settings.json
 front-workspace.code-workspace
 .yarnrc

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.workingDirectories": [{ "mode": "auto" }]
+}

docs/.eslintrc

@@ -1,29 +1,33 @@
 {
   "root": true,
-  "extends": ["plugin:react/recommended", "prettier"],
-  "plugins": ["prettier"],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
+  "extends": ["@strapi/eslint-config/front/typescript"],
   "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
+    "project": ["./tsconfig.eslint.json"]
   },
-  "rules": {
-    "no-console": 0
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.eslint.json"
+      }
+    }
   },
+  "ignorePatterns": ["**/*.mdx/*.{ts,tsx}"],
   "overrides": [
+    {
+      "files": ["*.stories.tsx"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+        "import/no-default-export": "off",
+        "no-console": "off"
+      }
+    },
     {
       "files": ["*.mdx"],
-      "settings": {
-        "mdx/code-blocks": true
-      },
-      "extends": ["plugin:mdx/recommended"]
+      "extends": ["plugin:mdx/recommended"],
+      "rules": {
+        "import/namespace": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+      }
     }
   ]
 }

docs/.storybook/main.ts

@@ -0,0 +1,54 @@
+import { dirname, join, resolve } from 'path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [getAbsolutePath('@storybook/addon-essentials'), getAbsolutePath('storybook-dark-mode')],
+  staticDirs: ['../public'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
+  viteFinal: (config) => {
+    if (config.mode !== 'production') {
+      config.optimizeDeps = {
+        ...config.optimizeDeps,
+        exclude: ['@strapi/ui-primtivies', '@strapi/design-system', '@strapi/icons'],
+      };
+
+      if (!config.resolve) {
+        config.resolve = {};
+      }
+
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        '@strapi/ui-primitives': resolve(__dirname, '..', '..', 'packages', 'primitives', 'src'),
+        '@strapi/design-system': resolve(__dirname, '..', '..', 'packages', 'strapi-design-system', 'src'),
+        '@strapi/design-system/v2': resolve(__dirname, '..', '..', 'packages', 'strapi-design-system', 'src', 'v2'),
+        '@strapi/icons': resolve(__dirname, '..', '..', 'packages', 'strapi-icons', 'src'),
+      };
+    }
+
+    return config;
+  },
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+function getAbsolutePath<T extends string>(value: T): T {
+  return dirname(require.resolve(join(value, 'package.json'))) as T;
+}
+
+export default config;

docs/.storybook/manager.js → docs/.storybook/manager.ts

@@ -1,12 +1,9 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { lightTheme } from '@strapi/design-system';
 import { createCustomTheme } from './utils/createCustomTheme';
 
 addons.setConfig({
   theme: createCustomTheme({
     theme: lightTheme,
-    options: {
-      base: 'light',
-    },
   }),
 });

docs/.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<style>
+  body {
+    padding: 0 !important;
+  }
+
+  #storybook-root:not([hidden='true']) {
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+    height: 100%;
+  }
+</style>

docs/.storybook/preview.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Preview } from '@storybook/react';
+import { useDarkMode } from 'storybook-dark-mode';
+import { parse } from 'qs';
+
+import { VisuallyHidden, DesignSystemProvider, Box, darkTheme, lightTheme } from '@strapi/design-system';
+
+import { createCustomTheme } from './utils/createCustomTheme';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Theme>
+          <main>
+            <VisuallyHidden>
+              {/* Necessary in order to prevent axe core from providing errors on main / heading */}
+              <h1>Storybook story</h1>
+            </VisuallyHidden>
+            <Box height="100%" padding={2}>
+              <Story />
+            </Box>
+          </main>
+        </Theme>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Design System', ['Primitives', 'Technical Components', 'Components']],
+      },
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    darkMode: {
+      // Override the default dark theme
+      dark: createCustomTheme({ theme: darkTheme, asStorybookTheme: false }),
+      // Override the default light theme
+      light: createCustomTheme({ theme: lightTheme, asStorybookTheme: false }),
+    },
+  },
+};
+
+const themeQueryURL = parse(document.location.search).theme;
+
+const Theme = ({ children }: { children: ReactNode }) => {
+  const isDarkAddon = useDarkMode();
+  const [isDark, setIsDark] = useState(themeQueryURL || isDarkAddon);
+
+  useEffect(() => {
+    if (!themeQueryURL && isDarkAddon !== isDark) {
+      setIsDark(isDarkAddon);
+    }
+  }, [isDarkAddon, isDark]);
+
+  return (
+    <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
+      <Box flex="1 0 100%" padding={2} background="neutral0">
+        {children}
+      </Box>
+    </DesignSystemProvider>
+  );
+};
+
+export default preview;