deps: upgrade storybook

.gitignore

@@ -46,3 +46,5 @@ publish_keys.json
 docs/.vitepress/cache
 
 project.zip
+
+*storybook.log

.storybook/main.ts

@@ -1,28 +1,30 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
-import { defineConfig } from 'vite';
-
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
     "@storybook/addon-interactions",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
   viteFinal: (config) => {
     config.define = {
       ...config.define,
-      'process.env': process.env,
+      "process.env": process.env,
+      esbuild: {
+        jsx: "automatic",
+      },
     };
     return config;
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
+
 export default config;

.storybook/preview.ts

@@ -1,9 +1,8 @@
 import type { Preview } from "@storybook/react";
-import '../src/style.content.css';
+import "../src/style.content.css";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -11,6 +10,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ["autodocs"],
 };
 
 export default preview;

package.json

@@ -26,6 +26,7 @@
     "@changesets/cli": "^2.27.1",
     "@plasmohq/messaging": "^0.6.2",
     "@plasmohq/storage": "^1.12.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "framer-motion": "^11.11.11",
     "plasmo": "^0.84.2",
     "react": "18.2.0",
@@ -36,15 +37,16 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
+    "@chromatic-com/storybook": "^3.2.2",
     "@plasmohq/prettier-plugin-sort-imports": "4.0.1",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
-    "@storybook/test": "^7.6.12",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@types/chrome": "0.0.260",
     "@types/node": "20.11.16",
     "@types/react": "18.2.51",
@@ -53,8 +55,9 @@
     "daisyui": "^4.6.1",
     "lefthook": "^1.8.4",
     "postcss": "^8.4.33",
+    "postcss-nesting": "^13.0.1",
     "prettier": "3.2.4",
-    "storybook": "^7.6.12",
+    "storybook": "^8.4.5",
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3"
   },
@@ -78,8 +81,5 @@
       }
     },
     "web_accessible_resources": []
-  },
-  "volta": {
-    "node": "16.20.0"
   }
 }

postcss.config.js

@@ -3,6 +3,7 @@
  */
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': 'postcss-nesting',
     tailwindcss: {},
     autoprefixer: {}
   }

src/lib/components/UserCard.stories.tsx

@@ -27,8 +27,7 @@ const demoUser: Props["user"] = {
     Twitter: twitter.com/KawamataRyo
     GitHub: github.com/kawamataryo
     Zenn: zenn.dev/ryo_kawamata`,
-  avatar:
-    "https://cdn.bsky.app/img/avatar/plain/did:plc:hcp53er6pefwijpdceo5x4bp/bafkreibm42fe6ionzntt2oryzv2coulgiwh5ejman4vf53bpkdtotszpp4@jpeg",
+  avatar: "https://avatar.iran.liara.run/public",
   matchType: BSKY_USER_MATCH_TYPE.HANDLE,
   isFollowing: false,
   followingUri: "",

vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});