Bump storybook from 6.3.8 to 7.0.6

storybook/.babelrc.json

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

storybook/.storybook/main.js

@@ -1,30 +1,15 @@
 const path = require('path');
 const fs = require('fs');
 const webpack = require('webpack');
-const NM_REGEX  = /node_modules\/(.*)/
-
+const NM_REGEX = /node_modules\/(.*)/;
 module.exports = {
-  "stories": [
-    "../stories/**/Welcome.stories.mdx",
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y",
-    "storybook-dark-mode",
-    "@storybook/addon-actions"
-  ],
-
-  staticDirs: [
-    'public',
-    '../../shell/assets'
-  ],
-
-  webpackFinal: async (config, { configType }) => {
+  "stories": ["../stories/**/Welcome.stories.mdx", "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y", "storybook-dark-mode", "@storybook/addon-actions", '@storybook/addon-mdx-gfm'],
+  staticDirs: ['public', '../../shell/assets'],
+  webpackFinal: async (config, {
+    configType
+  }) => {
     const baseFolder = path.resolve(__dirname, '..', '..');
-
     const sassLoader = {
       loader: 'sass-loader',
       options: {
@@ -33,26 +18,28 @@ module.exports = {
           importer: (url, prev, done) => {
             if (url.indexOf('~/') === 0) {
               const file = path.resolve(baseFolder, url.substr(2));
-              return fs.exists(file, (ok) => {
+              return fs.exists(file, ok => {
                 if (ok) {
-                  return done({ file });
+                  return done({
+                    file
+                  });
                 }
                 return done(null);
               });
             } else if (url.indexOf('@/node_modules') === 0) {
               const file = path.resolve(baseFolder, url.substr(2));
-
-              return done({ file });
+              return done({
+                file
+              });
             }
-
             done(null);
           }
         }
-      },
-    }
+      }
+    };
 
     // Replace js-modal and xterm imports with absolute paths
-    const nmrp = new webpack.NormalModuleReplacementPlugin(/js-modal|xterm|diff2html/, function(resource) {
+    const nmrp = new webpack.NormalModuleReplacementPlugin(/js-modal|xterm|diff2html/, function (resource) {
       const split = resource.request.split('!');
       const p = split.pop();
       const match = p.match(NM_REGEX);
@@ -61,22 +48,21 @@ module.exports = {
       } else {
         split.push(p);
       }
-
       resource.request = split.join('!');
     });
-
     config.plugins.unshift(nmrp);
 
     config.module.rules.push({
       test: /\.scss$/,
       use: ['style-loader', 'css-loader', sassLoader],
-      include: baseFolder,
+      include: baseFolder
     });
-
     config.module.rules.unshift({
-      test:    /\.ya?ml$/i,
-      loader:  'js-yaml-loader',
-      options: { name: '[path][name].[ext]' },
+      test: /\.ya?ml$/i,
+      loader: 'js-yaml-loader',
+      options: {
+        name: '[path][name].[ext]'
+      }
     });
 
     // Root path
@@ -97,7 +83,13 @@ module.exports = {
         }
       });
     });
-
     return config;
-  },  
-}
+  },
+  framework: {
+    name: '@storybook/vue-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: true
+  }
+};

storybook/package.json

@@ -10,20 +10,30 @@
     "node": ">=12"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o ../storybook-static"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o ../storybook-static"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/vue": "^6.3.8",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-a11y": "^7.0.6",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-mdx-gfm": "^7.0.6",
+    "@storybook/cli": "^7.0.6",
+    "@storybook/vue": "^7.0.6",
+    "@storybook/vue-webpack5": "^7.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "shell": "file:./..",
+    "storybook": "^7.0.6",
     "storybook-auto-events": "^0.1.1",
-    "storybook-dark-mode": "^1.0.8"
+    "storybook-dark-mode": "^3.0.0"
   },
   "dependencies": {
-    "tsconfig-paths-webpack-plugin": "^4.0.0"
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "vue-loader": "^16.1.2"
   }
 }

storybook/stories/InputFields.stories.mdx

@@ -1,6 +1,8 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import InputFieldsExample from './InputFieldsExample.vue';
-<style>{`.labeled-select { font-size: unset' }`}</style>
+<style>
+  {`.labeled-select { font-size: unset' }  `}
+</style>
 
 <Meta
   title="Examples/Input Fields"

storybook/stories/InputFieldsAdvanced.stories.mdx

@@ -1,6 +1,8 @@
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import InputFieldsAdvancedExample from './InputFieldsAdvancedExample.vue';
-<style>{`.labeled-select { font-size: unset' }`}</style>
+<style>
+  {`.labeled-select { font-size: unset' }  `}
+</style>
 
 <Meta
   title="Examples/Input Fields Advanced"

storybook/stories/WIP/Buttons.stories.mdx

@@ -1,6 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<style>{``}</style>
+<style>
+  {`  `}
+</style>
 
 <Meta title="WIP/Buttons" />
 

storybook/stories/foundation/Icons.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 
-<style>{`
+<style>
+  {`
 .sb-icons {
   // display: flex;
 }
@@ -24,7 +25,8 @@ import { Meta } from '@storybook/addon-docs';
   width: 32px;
   height: 32px;
 }
-`}</style>
+  `}
+</style>
 
 <Meta title="Foundation/Icons" />
 

storybook/stories/foundation/ProviderImages.stories.mdx

@@ -2,7 +2,8 @@
 import { Meta } from "@storybook/addon-docs";
 import icons from './provider-icons.json';
 
-<style>{`
+<style>
+  {`
 .sb-icons {
   // display: flex;
 }
@@ -36,7 +37,8 @@ import icons from './provider-icons.json';
   width: 64px;
   height: 64px;
 }
-`}</style>
+  `}
+</style>
 
 <Meta title="Foundation/Provider Images" />