Assist_Design/apps/portal/.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: ["@storybook/addon-essentials"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  staticDirs: ["../public"],
  viteFinal: async config => {
    config.plugins = config.plugins || [];
    config.plugins.push(tailwindcss());

    // Ensure JSX runtime is available (auto-imports React)
    config.esbuild = {
      ...config.esbuild,
      jsx: "automatic",
    };

    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "../src"),
      "next/link": path.resolve(__dirname, "mocks/next-link.tsx"),
      "next/image": path.resolve(__dirname, "mocks/next-image.tsx"),
      "next/navigation": path.resolve(__dirname, "mocks/next-navigation.tsx"),
    };

    // Pre-bundle ESM dependencies so Vite can resolve their exports
    config.optimizeDeps = config.optimizeDeps || {};
    config.optimizeDeps.include = [
      ...(config.optimizeDeps.include || []),
      "framer-motion",
      "@heroicons/react/24/outline",
      "@heroicons/react/24/solid",
      "radix-ui",
      "lucide-react",
      "class-variance-authority",
      "input-otp",
    ];

    // Disable PostCSS — @tailwindcss/vite handles CSS directly
    config.css = config.css || {};
    config.css.postcss = { plugins: [] };

    // Polyfill process.env for Next.js code that uses it
    config.define = {
      ...config.define,
      "process.env": JSON.stringify({
        NODE_ENV: "development",
      }),
    };

    return config;
  },
};

export default config;