Migrate Storybook to Vite

darekkay · May 24, 2024 · c0c4b5f · c0c4b5f
1 parent e4dbb98
commit c0c4b5f
Show file tree

Hide file tree

Showing 10 changed files with 7,742 additions and 12,516 deletions.
diff --git a/.idea/runConfigurations/_storybook__start.xml b/.idea/runConfigurations/_storybook__start.xml
diff --git a/app/src/components/modal/index.tsx b/app/src/components/modal/index.tsx
@@ -10,7 +10,11 @@ import Icon from "components/icon";
 
 if (!IS_TEST) {
   // bind modal to the root app element
-  ReactModal.setAppElement("#root");
+  if (document.querySelector("#storybook-root")) {
+    ReactModal.setAppElement("#storybook-root");
+  } else {
+    ReactModal.setAppElement("#root");
+  }
 } else {
   // create a mock modal root
   const modalRoot = document.createElement("div");

diff --git a/storybook/.ncurc.yml b/storybook/.ncurc.yml
diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
@@ -0,0 +1,51 @@
+// @ts-nocheck
+
+import { resolve } from "path";
+
+/** @type {import("@storybook/core-common").StorybookConfig} */
+export default {
+  core: {
+    disableTelemetry: true,
+  },
+  stories: ["../../app/src/**/__stories__/*.stories.tsx"],
+
+  addons: ["storybook-addon-themes"],
+
+  staticDirs: ["../../app/public", "./assets"],
+
+  features: {
+    postcss: false,
+  },
+
+  typescript: {
+    // https://github.com/storybookjs/storybook/issues/12585
+    check: false,
+    reactDocgen: false,
+  },
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+
+  async viteFinal(config, { configType }) {
+    config.resolve = {
+      alias: config.resolve.alias.concat(
+        [
+          "api",
+          "common",
+          "components",
+          "entry",
+          "state",
+          "styles",
+          "templates",
+          "widgets",
+        ].map((folder) => ({
+          find: RegExp(`^${folder}`),
+          replacement: resolve(__dirname, `../../app/src/${folder}`),
+        }))
+      ),
+    };
+    return config;
+  },
+};
diff --git a/storybook/.storybook/preview.js → storybook/.storybook/preview.ts b/storybook/.storybook/preview.js → storybook/.storybook/preview.ts
@@ -1,15 +1,20 @@
+// @ts-nocheck
+
 import { addDecorator, addParameters } from "@storybook/react";
 
-import initStore from "state/store";
-import "common/i18n";
+import initStore from "../../app/src/state/store";
+import "../../app/src/common/i18n";
 
 import "../../app/src/styles/index.scss";
+
+// TODO: check if required, causes issues with vite-storybook
+// import "../src/styles/index.scss";
 import "./storybook.scss";
 
 initStore();
 
 // Define UI themes
-addParameters({
+export const parameters = {
   themes: {
     default: "Default",
     list: [
@@ -32,4 +37,4 @@ addParameters({
         theme?.class.substring(6) || "default";
     },
   },
-});
+};