chore(deps): update storybook monorepo to v7 (major) (#220)

Co-authored-by: Tom Adler <[email protected]>

.babelrc.js

@@ -0,0 +1,8 @@
+export default process.env.npm_lifecycle_event !== 'storybook' ? {} : {
+  sourceType: 'unambiguous',
+  presets: [
+    ['@babel/preset-env', { targets: { chrome: 100, }, },],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+};

.eslintrc.json

@@ -7,7 +7,8 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
-    "plugin:jest/recommended"
+    "plugin:jest/recommended",
+    "plugin:storybook/recommended"
   ],
   "parserOptions": {
     "ecmaVersion": 2020,
@@ -17,24 +18,52 @@
     }
   },
   "rules": {
-    "no-restricted-globals": ["error", "describe", "it", "jest", "beforeEach", "afterEach"],
+    "no-restricted-globals": [
+      "error",
+      "describe",
+      "it",
+      "jest",
+      "beforeEach",
+      "afterEach"
+    ],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "react-hooks/exhaustive-deps": "error",
     "import/no-extraneous-dependencies": "error",
-    "import/no-unresolved": ["error", { "ignore": ["\\.js$"] }],
-    "import/order": ["error", {
-      "newlines-between": "always-and-inside-groups",
-      "groups": ["builtin", "type", "external", "internal", "parent", "sibling", "index", "object"],
-      "pathGroups": [
-        {
-          "patternOptions": { "matchBase": true },
-          "pattern": "*.module.css",
-          "group": "internal",
-          "position": "before"
-        }
-      ]
-    }],
+    "import/no-unresolved": [
+      "error",
+      {
+        "ignore": [
+          "\\.js$"
+        ]
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always-and-inside-groups",
+        "groups": [
+          "builtin",
+          "type",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "pathGroups": [
+          {
+            "patternOptions": {
+              "matchBase": true
+            },
+            "pattern": "*.module.css",
+            "group": "internal",
+            "position": "before"
+          }
+        ]
+      }
+    ],
     "@typescript-eslint/no-unused-vars": "error"
   },
   "settings": {

.storybook/main.js

@@ -0,0 +1,28 @@
+export default {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-viewport',
+    '@storybook/addon-controls',
+    '@storybook/addon-toolbars',
+  ],
+  async webpackFinal(config) {
+    const cssRule = config.module.rules.find(
+      ({ test }) => test.toString() === '/\\.css$/',
+    );
+
+    const cssLoaderOptions = cssRule.use[1].options;
+    cssLoaderOptions.modules = { namedExport: true };
+
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      stream: require.resolve('stream-browserify'),
+    };
+
+    return config;
+  },
+};

.storybook/preview.jsx

@@ -1,5 +1,4 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { withConsole, setConsoleOptions } from '@storybook/addon-console';
 import { init } from '@kiltprotocol/sdk-js';
 
 import { TxProviderMock } from '../src/frontend/utilities/TxContext/TxProvider.mock';
@@ -16,16 +15,8 @@ const paypal = {
 };
 
 init();
-// You'll start to receive all console messages, warnings, errors in your action logger panel - Everything except HMR logs.
-setConsoleOptions({
-  panelExclude: [],
-});
 
 export const decorators = [
-  // You'll receive console outputs as a console,
-  // warn and error actions in the panel. You might want to know from
-  // what stories they come. In this case, add withConsole decorator:
-  (storyFn, context) => withConsole()(storyFn)(context),
   AppDecorator,
   (Story) => (
     <TxProviderMock>

package.json

@@ -17,7 +17,7 @@
     "build": "rm -rf dist && NODE_OPTIONS=--no-experimental-fetch yarn parcel build",
     "start": "node --enable-source-maps dist/backend/server.js",
     "dev-start": "echo '{\"type\":\"commonjs\"}' > dist/package.json && supervisor --watch dist/backend/ --enable-source-maps dist/backend/server.js",
-    "storybook": "start-storybook --port 6007 --modern"
+    "storybook": "storybook dev --port 6007"
   },
   "dependencies": {
     "@hapi/basic": "^7.0.1",
@@ -41,17 +41,18 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@jest/globals": "^29.5.0",
     "@paypal/paypal-js": "^5.1.6",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-controls": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-toolbars": "^6.5.16",
-    "@storybook/addon-viewport": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-actions": "^7.0.3",
+    "@storybook/addon-controls": "^7.0.3",
+    "@storybook/addon-links": "^7.0.3",
+    "@storybook/addon-toolbars": "^7.0.3",
+    "@storybook/addon-viewport": "^7.0.3",
+    "@storybook/react": "^7.0.3",
+    "@storybook/react-webpack5": "^7.0.3",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -73,6 +74,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "hapi-dev-errors": "^4.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -81,6 +83,7 @@
     "path-browserify": "^1.0.1",
     "pino-pretty": "^10.0.0",
     "prettier": "^2.8.7",
+    "storybook": "^7.0.3",
     "stream-browserify": "^3.0.0",
     "stylelint": "^15.4.0",
     "stylelint-config-css-modules": "^4.2.0",