docs(storybook): vite bundler

.storybook/main.ts

@@ -0,0 +1,23 @@
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default {
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  staticDirs: ["../public"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling",
+  ],
+  framework: { name: "@storybook/react-vite" },
+  core: {
+    builder: "@storybook/builder-vite",
+    disableTelemetry: true,
+  },
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins || []), tsconfigPaths()],
+    };
+  },
+};

.storybook/manager.js → .storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({

.storybook/preview.js → .storybook/preview.tsx

@@ -1,5 +1,6 @@
 import "./style.css";
 import { DevTools } from "jotai-devtools";
+import React from "react";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package.json

@@ -52,9 +52,11 @@
     "@storybook/addon-interactions": "7.6.0",
     "@storybook/addon-links": "7.6.0",
     "@storybook/addon-styling": "1.3.7",
+    "@storybook/builder-vite": "^7.6.0",
     "@storybook/jest": "0.2.3",
+    "@storybook/manager-api": "^7.6.0",
     "@storybook/react": "7.6.0",
-    "@storybook/react-webpack5": "7.6.0",
+    "@storybook/react-vite": "^7.6.0",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.6.0",
     "@testing-library/jest-dom": "6.1.4",
@@ -85,8 +87,8 @@
     "semantic-release": "^20.1.0",
     "storybook": "7.6.0",
     "tailwindcss": "^3.3.5",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "5.3.2",
+    "vite-tsconfig-paths": "^4.2.1",
     "vitest": "0.34.6",
     "zod": "^3.22.4"
   },