use webpack5 to build storybook

rodrimaia · rodrimaia · commit ba78c5ddc983 · 2023-04-11T18:14:43.000-03:00
diff --git a/site/.babelrc.json b/site/.babelrc.json
@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/site/.storybook/main.ts b/site/.storybook/main.ts
@@ -3,7 +3,8 @@
  *
  * @see <https://storybook.js.org/docs/react/configure/overview>
  */
-import type { StorybookConfig } from '@storybook/react-vite';
+const path = require("path");
+import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
   // Automatically loads all stories in source ending in 'stories.tsx'
   //
@@ -17,8 +18,7 @@ const config: StorybookConfig = {
     options: {
       actions: false
     }
-  },
-  ],
+  }],
   // SEE: https://storybook.js.org/docs/react/configure/babel
   babel: async options => ({
     ...options,
@@ -30,16 +30,32 @@ const config: StorybookConfig = {
   //
   // SEE: https://storybook.js.org/docs/react/configure/overview#using-storybook-api
   staticDirs: ["../static"],
-  typescript: { check: false },
+  // Storybook internally uses its own Webpack configuration instead of ours.
+  //
+  // SEE: https://storybook.js.org/docs/react/configure/webpack
+  webpackFinal: async config => {
+    config.resolve!.modules = [path.resolve(__dirname, ".."), "node_modules", "../src"];
+    return config;
+  },
   framework: {
-    name: "@storybook/react-vite",
+    name: "@storybook/react-webpack5",
     options: {}
   },
   features: {
-    storyStoreV7: true
+    storyStoreV7: true,
+  },
+  core: {
+    builder: {
+      name: "@storybook/builder-webpack5",
+      options: {
+        lazyCompilation: true,
+        fsCache: true,
+      }
+    }
   },
   docs: {
     autodocs: true
   }
 };
+
 export default config
diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx
@@ -8,7 +8,6 @@ import "../src/i18n"
 import React from "react"
 import { Preview } from '@storybook/react';
 
-
 const themeProviderDecorator = (story) => (
   <ThemeProvider theme={dark}>
     <CssBaseline />
diff --git a/site/package.json b/site/package.json
@@ -92,11 +92,16 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@playwright/test": "1.29.2",
+    "@storybook/addon-actions": "7.0.2",
     "@storybook/addon-essentials": "7.0.2",
     "@storybook/addon-links": "7.0.2",
+    "@storybook/addon-mdx-gfm": "7.0.2",
     "@storybook/react": "7.0.2",
-    "@storybook/react-vite": "7.0.2",
+    "@storybook/react-webpack5": "^7.0.2",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.16.5",
@@ -142,6 +147,7 @@
     "resize-observer": "1.0.4",
     "semver": "7.3.7",
     "storybook": "7.0.2",
+    "storybook-addon-mock": "^4.0.0",
     "storybook-react-context": "^0.6.0",
     "typescript": "4.8.2"
   },
diff --git a/site/yarn.lock b/site/yarn.lock
