docs: upgraded to storybook 7

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/main.ts

@@ -1,52 +1,57 @@
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import { DefinePlugin } from 'webpack';
-import type { StorybookConfig } from '@storybook/react/types';
-
+import { StorybookConfig } from '@storybook/react-webpack5';
 const storybookConfig: StorybookConfig = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     'storybook-react-i18next',
     '@storybook/addon-essentials',
-    // 'storybook-addon-themes', // ignore until we figure out proper theme switching
+    '@storybook/addon-interactions',
     {
       name: '@storybook/addon-docs',
       options: {
         configureJSX: true,
         babelOptions: {},
         sourceLoaderOptions: null,
-        transcludeMarkdown: true,
-      },
+        transcludeMarkdown: true
+      }
     }
   ],
   core: {
-    builder: 'webpack5',
-    disableTelemetry: true,
+    builder: '@storybook/builder-webpack5',
+    disableTelemetry: true
+  },
+  docs: {
+    autodocs: true
   },
   features: {
-    emotionAlias: false,
     buildStoriesJson: true,
+    storyStoreV7: true
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
-  framework: '@storybook/react',
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
-    check: true,
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
+    }
   },
-  webpackFinal: async (config) => {
-    config.plugins?.push(
-      new DefinePlugin({
-        __DEV__: process.env.NODE_ENV !== 'production',
-      }),
-    );
-
+  webpackFinal: async config => {
+    config.plugins?.push(new DefinePlugin({
+      __DEV__: process.env.NODE_ENV !== 'production'
+    }));
     if (config.resolve) {
       config.resolve.plugins = config.resolve.plugins || [];
       config.resolve.plugins.push(new TsconfigPathsPlugin());
     }
-
     return config;
   }
 };
-
 export default storybookConfig;

.storybook/manager.ts

@@ -1,15 +1,8 @@
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming';
-
-const theme = create({
-  base: 'dark',
-  brandTitle: 'Storybook',
-  brandUrl: 'https://storybook.com',
-  brandImage: 'https://placekitten.com/350/100',
-  brandTarget: '_self',
-  colorPrimary: '#ED117D',
-});
+import { addons } from '@storybook/manager-api';
+import { theme } from './theme';
 
 addons.setConfig({
   theme: theme,
 });
+
+export default theme;

.storybook/preview.ts

@@ -0,0 +1,38 @@
+import { themes } from '@storybook/theming';
+import i18n from '@test/i18next';
+import  { theme } from './theme';
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    dependencies: {
+      // display only dependencies/dependents that have a story in storybook
+      // by default this is false
+      withStoriesOnly: true,
+
+      // completely hide a dependency/dependents block if it has no elements
+      // by default this is false
+      hideEmpty: true,
+    },
+    docs: {
+      theme: themes.dark,
+    },
+    backgrounds: { disable: true },
+    i18n,
+    locale: 'en',
+    locales: {
+      en: 'English'
+    }
+  }
+};
+
+export default preview;
+
+

.storybook/theme.ts

@@ -0,0 +1,12 @@
+import { create } from '@storybook/theming/create';
+
+export const theme = create({
+  base: 'dark',
+  brandTitle: 'Storybook',
+  brandUrl: 'https://storybook.com',
+  brandImage: 'https://placekitten.com/350/150',
+  brandTarget: '_self',
+  colorPrimary: '#ED117D',
+});
+
+export default theme;

.storybook/tsconfig.json

@@ -1,20 +1,11 @@
 {
+  "extends": "../tsconfig.json",
   "include": ["**/*"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "commonjs",
-    "jsx": "react-jsx",
     "moduleResolution": "node",
     "target": "es5",
     "rootDir": "../",
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "strict": true,
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "noEmit": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["../src/*"],
@@ -23,11 +14,5 @@
       "@styles": ["../src/styles/"],
       "@styles/*": ["../src/styles/*"]
     }
-  },
-  "ts-node": {
-    "compilerOptions": {
-      "module": "commonjs",
-      "target": "es5"
-    }
   }
 }