WIP: add lazy compilation config

.storybook/main.ts

@@ -12,13 +12,37 @@ module.exports = {
     'storybook-addon-designs',
     'storybook-mobile',
   ],
+  // In case you'd like to disable docgen-typescript (70% Sealing typescript step)
+  // typescript: {
+  //   reactDocgen: 'react-docgen',
+  // },
+  webpackFinal: (config) => {
+    // Preset CRA does not take these into consideration, gotta do it manually
+    return {
+      ...config,
+      cache: {
+        type: 'filesystem',
+      },
+      experiments: {
+        lazyCompilation: {
+          entries: false,
+        },
+      },
+    }
+  },
   staticDirs: ['../public'],
   features: {
-    storyStoreV7: false,
+    storyStoreV7: true,
+
     interactionsDebugger: true,
   },
   framework: '@storybook/react',
   core: {
     builder: 'webpack5',
+    // don't work in this project
+    options: {
+      fsCache: true,
+      lazyCompilation: true,
+    },
   },
 }

.storybook/preview-head.html

@@ -1,4 +1,18 @@
 <style>
+  /* Temporary fix for elements flashing */
+  body > * {
+    display: none !important;
+  }
+
+  .sb-show-preparing-story > .sb-preparing-story,
+  .sb-show-preparing-docs > .sb-preparing-docs,
+  .sb-show-nopreview > .sb-nopreview,
+  .sb-show-errordisplay > .sb-errordisplay,
+  .sb-show-main > #root,
+  .sb-show-main > #docs-root {
+    display: block !important;
+  }
+
   #root {
     position: static;
   }

package.json

@@ -51,16 +51,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-storyshots": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/addon-a11y": "^6.5.0-alpha.45",
+    "@storybook/addon-essentials": "^6.5.0-alpha.45",
+    "@storybook/addon-interactions": "^6.5.0-alpha.45",
+    "@storybook/addon-storyshots": "^6.5.0-alpha.45",
+    "@storybook/builder-webpack5": "^6.5.0-alpha.45",
     "@storybook/jest": "^0.0.9",
-    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.5.0-alpha.45",
     "@storybook/preset-create-react-app": "^4.0.1",
-    "@storybook/react": "^6.4.19",
-    "@storybook/test-runner": "^0.0.4",
+    "@storybook/react": "^6.5.0-alpha.45",
+    "@storybook/test-runner": "^0.0.5-canary.cb8b66e.0",
     "@storybook/testing-library": "^0.0.9",
     "@storybook/testing-react": "^1.2.3",
     "@testing-library/jest-dom": "^5.16.1",
@@ -85,13 +85,13 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-storybook": "^0.5.7",
     "husky": ">=6",
     "jest-axe": "^4.1.0",
     "jest-canvas-mock": "^2.3.1",
     "lint-staged": ">=10",
     "msw": "^0.36.0",
-    "msw-storybook-addon": "^1.6.0",
+    "msw-storybook-addon": "^1.6.1",
     "prettier": "^2.5.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",