Merge branch 'improvement/storybook-migration' into q/1.0

Author: bert-e

.storybook/main.ts

@@ -1,38 +1,23 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import remarkGfm from 'remark-gfm';
+
 const config: StorybookConfig = {
   stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
   staticDirs: ['./public'],
 
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-mdx-gfm',
-    '@storybook/addon-storysource',
     '@storybook/addon-webpack5-compiler-swc',
-    '@chromatic-com/storybook',
-  ],
-  swc: (config, options) => ({
-    jsc: {
-      transform: {
-        react: {
-          runtime: 'automatic',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
         },
       },
     },
-  }),
-
-  webpackFinal: async (config, { configType }) => {
-    // Resolve error when webpack-ing storybook:
-    // Can't import the named export 'Children' from non EcmaScript module (only
-    // default export is available)
-    config.module?.rules?.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
-
-    return config;
-  },
-
+  ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import Theme from './theme.storybook';
 
 addons.setConfig({

.storybook/preview.js .storybook/preview.tsx.storybook/preview.js renamed to .storybook/preview.tsx

@@ -64,6 +64,7 @@ export const parameters = {
   layout: 'fullscreen',
   docs: {
     toc: { headingSelector: 'h2,h3', title: 'Table of Contents' },
+    codePanel: true
   },
   controls: {
     //All props with color in name will automatically have a control 'color'

.storybook/theme.storybook.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 export default create({
   base: 'dark',