upgrade Storybook to v8

.github/workflows/tests.yaml

@@ -3,14 +3,14 @@ name: basic tests
 on:
   push:
     branches:
-      - "user/**"
-      - "feature/**"
-      - "improvement/**"
-      - "bugfix/**"
-      - "w/**"
-      - "q/**"
-      - "hotfix/**"
-      - "dependabot/**"
+      - 'user/**'
+      - 'feature/**'
+      - 'improvement/**'
+      - 'bugfix/**'
+      - 'w/**'
+      - 'q/**'
+      - 'hotfix/**'
+      - 'dependabot/**'
   pull_request:
     types:
       - opened
@@ -22,11 +22,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Install node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: 20
       - run: npm ci
       - run: npm run test
       - run: npm run lint

.storybook/main.ts

@@ -2,11 +2,23 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
   stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
   staticDirs: ['./public'],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
     '@storybook/addon-mdx-gfm',
+    '@storybook/addon-webpack5-compiler-swc',
+    '@chromatic-com/storybook',
   ],
+  swc: (config, options) => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
 
   webpackFinal: async (config, { configType }) => {
     // Resolve error when webpack-ing storybook:
@@ -20,19 +32,24 @@ const config: StorybookConfig = {
 
     return config;
   },
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
 
   docs: {
-    autodocs: true,
     defaultName: 'Stories',
   },
+
   managerHead: (head) => `
   ${head}
   <link rel="icon" href="/favicon.ico" />
 `,
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;

.storybook/preview.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
 import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
-import { ScrollbarWrapper, ToastProvider } from '../src/lib';
+import { ToastProvider } from '../src/lib';
 
 export const globalTypes = {
   theme: {
@@ -101,3 +101,4 @@ export const parameters = {
     },
   },
 };
+export const tags = ['autodocs'];