🤖 Fix Chromatic emotion/styled bundling issue

Configure Vite and TypeScript for proper emotion support:
- Add jsxImportSource to tsconfig.json
- Configure @vitejs/plugin-react with emotion babel plugin
- Add viteFinal to Storybook main.ts with emotion optimizeDeps
- Add @emotion/babel-plugin as dev dependency

This ensures emotion/styled components are properly bundled
in Chromatic's production build environment.

_Generated with `cmux`_

Author: ammario

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import type { UserConfig } from 'vite';
 
 const config: StorybookConfig = {
   "stories": [
@@ -15,6 +16,28 @@ const config: StorybookConfig = {
   "framework": {
     "name": "@storybook/react-vite",
     "options": {}
-  }
+  },
+  async viteFinal(config: UserConfig) {
+    return {
+      ...config,
+      plugins: config.plugins,
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        include: [
+          ...(config.optimizeDeps?.include || []),
+          '@emotion/react',
+          '@emotion/styled',
+          '@emotion/cache',
+        ],
+      },
+      build: {
+        ...config.build,
+        commonjsOptions: {
+          ...config.build?.commonjsOptions,
+          include: [/node_modules/],
+        },
+      },
+    };
+  },
 };
 export default config;

package.json

@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
+    "@emotion/babel-plugin": "^11.13.5",
     "@eslint/js": "^9.36.0",
     "@storybook/addon-a11y": "^9.1.10",
     "@storybook/addon-docs": "^9.1.10",

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,

vite.config.ts

@@ -8,7 +8,16 @@ import { fileURLToPath } from "url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
-  plugins: [react(), wasm(), topLevelAwait()],
+  plugins: [
+    react({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin'],
+      },
+    }),
+    wasm(),
+    topLevelAwait(),
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),