chore: update dependencies and migrate from Rollup to Vite

.storybook/main.js

@@ -7,9 +7,8 @@ module.exports = {
     "@storybook/preset-create-react-app",
     "@storybook/addon-mdx-gfm",
   ],
-
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
 

.vite/commands/setEnv.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from "fs";
+import { loadEnv } from "vite";
+
+export function setEnv(mode: string) {
+  Object.assign(
+    process.env,
+    loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]),
+  );
+  process.env.NODE_ENV ||= mode;
+  const { homepage } = JSON.parse(readFileSync("package.json", "utf-8"));
+  process.env.PUBLIC_URL ||= homepage
+    ? `${
+        homepage.startsWith("http") || homepage.startsWith("/")
+          ? homepage
+          : `/${homepage}`
+      }`.replace(/\/$/, "")
+    : "";
+}

.vite/plugins/svgr.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from "node:fs";
+
+import { createFilter, Plugin, transformWithEsbuild } from "vite";
+
+// In Create React App, SVGs can be imported directly as React components. This is achieved by svgr libraries.
+// https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
+export function svgrPlugin(): Plugin {
+  const filter = createFilter("**/*.svg");
+  const postfixRE = /[?#].*$/s;
+
+  return {
+    name: "svgr-plugin",
+    async transform(code, id) {
+      if (filter(id)) {
+        const { transform } = await import("@svgr/core");
+        const { default: jsx } = await import("@svgr/plugin-jsx");
+
+        const filePath = id.replace(postfixRE, "");
+        const svgCode = readFileSync(filePath, "utf8");
+
+        const componentCode = await transform(svgCode, undefined, {
+          filePath,
+          caller: {
+            previousExport: code,
+            defaultPlugins: [jsx],
+          },
+        });
+
+        const res = await transformWithEsbuild(componentCode, id, {
+          loader: "jsx",
+        });
+
+        return {
+          code: res.code,
+          map: null,
+        };
+      }
+    },
+  };
+}