Upgrade storybook to v7-latest for Webpack5

.eslintrc.json

@@ -1,34 +1,26 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": [
-        "@typescript-eslint",
-        "react-hooks",
-        "iot-cardboard-js"
-    ],
+    "plugins": ["@typescript-eslint", "react-hooks", "iot-cardboard-js"],
     "extends": [
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
         "prettier",
-        "plugin:iot-cardboard-js/recommended"
+        "plugin:iot-cardboard-js/recommended",
+        "plugin:storybook/recommended"
     ],
     "rules": {
         "iot-cardboard-js/debug-logging-disabled": "warn",
         "no-console": [
             "warn",
             {
-                "allow": [
-                    "warn",
-                    "error"
-                ]
+                "allow": ["warn", "error"]
             }
         ],
         "no-debugger": "warn",
         "no-multiple-empty-lines": "warn",
         "react-hooks/exhaustive-deps": "warn",
-        "@typescript-eslint/explicit-module-boundary-types": [
-            "off"
-        ],
+        "@typescript-eslint/explicit-module-boundary-types": ["off"],
         "@typescript-eslint/no-var-requires": 0,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/no-unused-vars": [

.storybook/main.js

@@ -2,6 +2,8 @@ const path = require('path');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const postcssUrl = require('postcss-url');
 const AppSourceDir = path.join(__dirname, '..', 'src');
+import { loadCsf } from '@storybook/csf-tools';
+import { readFile } from 'fs-extra';
 
 module.exports = {
     stories:
@@ -18,19 +20,35 @@ module.exports = {
                   '../src/Models/**/*.stories.tsx',
                   '../src/Pages/**/*.stories.tsx',
                   '../src/Components/**/*.stories.local.tsx',
-                  '../src/Models/**/*.stories.local.tsx',
                   '../src/Pages/**/*.stories.local.tsx'
               ],
+    // Required for .local stories, this just parses the files and includes the stories
+    experimental_indexers: async (existingIndexers) => {
+        const localIndexer = {
+            test: /\.stories\.local\.tsx?$/,
+            createIndex: async (fileName, opts) => {
+                const code = (await readFile(fileName, 'utf-8')).toString();
+                return loadCsf(code, { ...opts, fileName }).parse().indexInputs;
+            }
+        };
+        const indexers =
+            process.env.NODE_ENV === 'production'
+                ? [...existingIndexers]
+                : [...existingIndexers, localIndexer];
+        return indexers;
+    },
     // Add any Storybook addons you want here: https://storybook.js.org/addons/
     addons: [
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
         '@storybook/addon-a11y'
     ],
+
     typescript: {
         check: false,
         reactDocgen: false
     },
+
     webpackFinal: async (config) => {
         // Disable the Storybook internal-`.svg`-rule for components loaded from our app.
         const svgRule = config.module.rules.find((rule) =>
@@ -81,5 +99,10 @@ module.exports = {
         );
 
         return config;
+    },
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {}
     }
 };

.storybook/preview.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { addDecorator } from '@storybook/react';
 import { withConsole, setConsoleOptions } from '@storybook/addon-console';
 import '../src/Resources/Styles/BaseThemeVars.scss'; // Import BaseThemeVars to access css theme variables
 import { Locale } from '../src/Models/Constants/Enums';
@@ -144,10 +143,12 @@ const decoratorWithDebug = (Story, context) => {
     );
 };
 
-addDecorator(decoratorWithConsole);
-addDecorator(decoratorWithStableGuid);
-addDecorator(decoratorWithWrapper);
-addDecorator(decoratorWithDebug);
+export const decorators = [
+    decoratorWithConsole,
+    decoratorWithStableGuid,
+    decoratorWithWrapper,
+    decoratorWithDebug
+];
 if (isChromatic()) {
-    addDecorator(decoratorWithStableMaxDateInMillis);
+    decorators.push(decoratorWithStableMaxDateInMillis);
 }