From 2a09854455435bd5c502b2f23d3447252d7fc7af Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 1 Apr 2026 12:18:05 +0200
Subject: [PATCH 1/2] feat(create): move storybook to CLI command

---
 .../storybook/assets/_dot_storybook/main.ts   | 17 ----
 .../assets/_dot_storybook/preview.ts          | 15 ---
 .../components/storybook/button.stories.ts    | 67 -------------
 .../src/components/storybook/button.tsx       | 50 ----------
 .../components/storybook/dialog.stories.tsx   | 92 ------------------
 .../src/components/storybook/dialog.tsx       | 33 -------
 .../assets/src/components/storybook/index.ts  | 14 ---
 .../src/components/storybook/input.stories.ts | 43 ---------
 .../assets/src/components/storybook/input.tsx | 42 ---------
 .../storybook/radio-group.stories.ts          | 53 -----------
 .../src/components/storybook/radio-group.tsx  | 52 -----------
 .../components/storybook/slider.stories.ts    | 55 -----------
 .../src/components/storybook/slider.tsx       | 57 ------------
 .../assets/src/routes/demo/storybook.tsx      | 93 -------------------
 .../react/add-ons/storybook/info.json         | 13 +--
 .../react/add-ons/storybook/package.json      | 10 --
 16 files changed, 4 insertions(+), 702 deletions(-)
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
 delete mode 100644 packages/create/src/frameworks/react/add-ons/storybook/package.json

diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts
deleted file mode 100644
index 77494d3f..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  async viteFinal(config) {
-    const { default: tailwindcss } = await import("@tailwindcss/vite");
-    config.plugins = config.plugins || [];
-    config.plugins.push(tailwindcss());
-    return config;
-  },
-};
-export default config;
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts
deleted file mode 100644
index 10047220..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-import "../src/styles.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts
deleted file mode 100644
index 97b44183..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Delete Account",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    children: "Small Button",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: "medium",
-    children: "Medium Button",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    children: "Large Button",
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: "primary",
-    children: "Disabled Button",
-    disabled: true,
-  },
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
deleted file mode 100644
index 36cb9c5d..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-export interface ButtonProps {
-  variant?: "primary" | "secondary" | "danger";
-  size?: "small" | "medium" | "large";
-  children: React.ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-  className?: string;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = "primary",
-  size = "medium",
-  children,
-  onClick,
-  disabled = false,
-  type = "button",
-  className = "",
-}) => {
-  const baseStyles =
-    "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
-
-  const variantStyles = {
-    primary:
-      "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600",
-    secondary:
-      "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-    danger:
-      "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600",
-  };
-
-  const sizeStyles = {
-    small: "px-3 py-1.5 text-sm",
-    medium: "px-4 py-2 text-base",
-    large: "px-6 py-3 text-lg",
-  };
-
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
-      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
-    >
-      {children}
-    </button>
-  );
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx
deleted file mode 100644
index 8e1783b3..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Dialog } from "./dialog";
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Dialog",
-  component: Dialog,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "User Profile",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          This is a simple dialog component with a title and content area.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const WithFooter: Story = {
-  args: {
-    title: "Confirm Action",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Are you sure you want to proceed with this action?
-        </p>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Confirm
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const Form: Story = {
-  args: {
-    title: "Create Account",
-    children: (
-      <div className="space-y-4 min-w-80">
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Email
-          </label>
-          <input
-            type="email"
-            placeholder="you@example.com"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Password
-          </label>
-          <input
-            type="password"
-            placeholder="••••••••"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Create Account
-        </Button>
-      </div>
-    ),
-  },
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
deleted file mode 100644
index 7c30108a..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-export interface DialogProps {
-  title: string;
-  children: React.ReactNode;
-  footer?: React.ReactNode;
-  className?: string;
-}
-
-export const Dialog: React.FC<DialogProps> = ({
-  title,
-  children,
-  footer,
-  className = "",
-}) => {
-  return (
-    <div
-      className={`bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden ${className}`}
-    >
-      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
-          {title}
-        </h2>
-      </div>
-      <div className="px-6 py-6">{children}</div>
-      {footer && (
-        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
-          {footer}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts
deleted file mode 100644
index de5fb579..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { Input } from "./input";
-export type { InputProps } from "./input";
-
-export { RadioGroup } from "./radio-group";
-export type { RadioGroupProps, RadioOption } from "./radio-group";
-
-export { Slider } from "./slider";
-export type { SliderProps } from "./slider";
-
-export { Dialog } from "./dialog";
-export type { DialogProps } from "./dialog";
-
-export { Button } from "./button";
-export type { ButtonProps } from "./button";
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts
deleted file mode 100644
index 6f0e5b13..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Input } from "./input";
-
-const meta = {
-  title: "Form/Input",
-  component: Input,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Email Address",
-    id: "email",
-    placeholder: "Enter your email",
-  },
-};
-
-export const Required: Story = {
-  args: {
-    label: "First Name",
-    id: "firstName",
-    placeholder: "John",
-    required: true,
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    label: "Last Name",
-    id: "lastName",
-    value: "Doe",
-    placeholder: "Enter last name",
-  },
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
deleted file mode 100644
index 1274b3bd..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-
-export interface InputProps {
-  label: string;
-  id: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  required?: boolean;
-  className?: string;
-}
-
-export const Input: React.FC<InputProps> = ({
-  label,
-  id,
-  value = "",
-  onChange,
-  placeholder,
-  required = false,
-  className = "",
-}) => {
-  return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <label
-        htmlFor={id}
-        className="text-sm font-medium text-gray-700 dark:text-gray-200"
-      >
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <input
-        type="text"
-        id={id}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder={placeholder}
-        required={required}
-        className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
-      />
-    </div>
-  );
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts
deleted file mode 100644
index a2739e63..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { RadioGroup } from "./radio-group";
-
-const meta = {
-  title: "Form/RadioGroup",
-  component: RadioGroup,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-    value: "full-time",
-  },
-};
-
-export const MultipleOptions: Story = {
-  args: {
-    label: "Subscription Plan",
-    name: "plan",
-    options: [
-      { value: "basic", label: "Basic" },
-      { value: "pro", label: "Pro" },
-      { value: "enterprise", label: "Enterprise" },
-    ],
-    value: "pro",
-  },
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
deleted file mode 100644
index e07483cc..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-
-export interface RadioOption {
-  value: string;
-  label: string;
-}
-
-export interface RadioGroupProps {
-  label: string;
-  name: string;
-  options: RadioOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  className?: string;
-}
-
-export const RadioGroup: React.FC<RadioGroupProps> = ({
-  label,
-  name,
-  options,
-  value,
-  onChange,
-  className = "",
-}) => {
-  return (
-    <div className={`flex flex-col gap-3 ${className}`}>
-      <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-        {label}
-      </label>
-      <div className="flex gap-4">
-        {options.map((option) => (
-          <label
-            key={option.value}
-            className="flex items-center gap-2 cursor-pointer group"
-          >
-            <input
-              type="radio"
-              name={name}
-              value={option.value}
-              checked={value === option.value}
-              onChange={(e) => onChange?.(e.target.value)}
-              className="w-4 h-4 text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 cursor-pointer"
-            />
-            <span className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors">
-              {option.label}
-            </span>
-          </label>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts
deleted file mode 100644
index 2fa88e08..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Slider } from "./slider";
-
-const meta = {
-  title: "Form/Slider",
-  component: Slider,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Volume",
-    id: "volume",
-    value: 50,
-  },
-};
-
-export const Skill: Story = {
-  args: {
-    label: "Plays Guitar",
-    id: "guitar",
-    value: 75,
-    min: 0,
-    max: 100,
-  },
-};
-
-export const NoValue: Story = {
-  args: {
-    label: "Experience Level",
-    id: "experience",
-    value: 30,
-    showValue: false,
-  },
-};
-
-export const CustomRange: Story = {
-  args: {
-    label: "Custom Range",
-    id: "custom-range",
-    value: 5,
-    min: 1,
-    max: 20,
-    step: 1,
-  },
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
deleted file mode 100644
index d9333821..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-
-export interface SliderProps {
-  label: string;
-  id: string;
-  value?: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  showValue?: boolean;
-  className?: string;
-}
-
-export const Slider: React.FC<SliderProps> = ({
-  label,
-  id,
-  value = 0,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  showValue = true,
-  className = "",
-}) => {
-  return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <div className="flex justify-between items-center">
-        <label
-          htmlFor={id}
-          className="text-sm font-medium text-gray-700 dark:text-gray-200"
-        >
-          {label}
-        </label>
-        {showValue && (
-          <span className="text-sm font-semibold text-blue-600 dark:text-blue-400 min-w-12 text-right">
-            {value}
-          </span>
-        )}
-      </div>
-      <input
-        type="range"
-        id={id}
-        value={value}
-        onChange={(e) => onChange?.(Number(e.target.value))}
-        min={min}
-        max={max}
-        step={step}
-        className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600 dark:accent-blue-500"
-      />
-      <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
-        <span>{min}</span>
-        <span>{max}</span>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx b/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
deleted file mode 100644
index fb600a97..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-
-import { Dialog } from "#/components/storybook/dialog";
-import { Input } from "#/components/storybook/input";
-import { RadioGroup } from "#/components/storybook/radio-group";
-import { Slider } from "#/components/storybook/slider";
-import { Button } from "#/components/storybook/button";
-
-export const Route = createFileRoute("/demo/storybook")({
-  component: StorybookDemo,
-});
-
-function StorybookDemo() {
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [employmentType, setEmploymentType] = useState("full-time");
-  const [coffeeCups, setCoffeeCups] = useState(3);
-
-  const handleSubmit = () => {};
-
-  const handleReset = () => {
-    setFirstName("");
-    setLastName("");
-    setEmploymentType("full-time");
-    setCoffeeCups(3);
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4">
-      <div className="max-w-2xl mx-auto">
-        <Dialog
-          title="Employee Information Form"
-          footer={
-            <div className="flex gap-3 justify-end">
-              <Button variant="secondary" size="medium" onClick={handleReset}>
-                Reset
-              </Button>
-              <Button
-                variant="primary"
-                size="medium"
-                type="submit"
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </div>
-          }
-        >
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <Input
-              label="First Name"
-              id="firstName"
-              value={firstName}
-              onChange={setFirstName}
-              placeholder="John"
-              required
-            />
-
-            <Input
-              label="Last Name"
-              id="lastName"
-              value={lastName}
-              onChange={setLastName}
-              placeholder="Doe"
-              required
-            />
-
-            <RadioGroup
-              label="Employment Type"
-              name="employmentType"
-              options={[
-                { value: "full-time", label: "Full Time" },
-                { value: "part-time", label: "Part Time" },
-              ]}
-              value={employmentType}
-              onChange={setEmploymentType}
-            />
-
-            <Slider
-              label="Coffee Cups Per Day"
-              id="coffeeCups"
-              value={coffeeCups}
-              onChange={setCoffeeCups}
-              min={0}
-              max={10}
-            />
-          </form>
-        </Dialog>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/info.json b/packages/create/src/frameworks/react/add-ons/storybook/info.json
index e21627c9..53aa92f2 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/info.json
+++ b/packages/create/src/frameworks/react/add-ons/storybook/info.json
@@ -8,13 +8,8 @@
   "category": "tooling",
   "color": "#FF4785",
   "priority": 18,
-  "routes": [
-    {
-      "icon": "BookOpen",
-      "url": "/demo/storybook",
-      "name": "Storybook",
-      "path": "src/routes/demo.storybook.tsx",
-      "jsName": "StorybookDemo"
-    }
-  ]
+  "command": {
+    "command": "npx",
+    "args": ["storybook", "init", "-y", "--no-dev"]
+  }
 }
diff --git a/packages/create/src/frameworks/react/add-ons/storybook/package.json b/packages/create/src/frameworks/react/add-ons/storybook/package.json
deleted file mode 100644
index 4447aac0..00000000
--- a/packages/create/src/frameworks/react/add-ons/storybook/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@storybook/react-vite": "^10.2.15",
-    "storybook": "^10.2.15"
-  }
-}

From 8d1c84026c745a870c1c1e69b9ab9861ef1142c8 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Wed, 1 Apr 2026 12:27:35 +0200
Subject: [PATCH 2/2] feat: set storybook as running last

---
 .../create/src/frameworks/react/add-ons/storybook/info.json     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create/src/frameworks/react/add-ons/storybook/info.json b/packages/create/src/frameworks/react/add-ons/storybook/info.json
index 53aa92f2..929d6c1a 100644
--- a/packages/create/src/frameworks/react/add-ons/storybook/info.json
+++ b/packages/create/src/frameworks/react/add-ons/storybook/info.json
@@ -7,7 +7,7 @@
   "type": "add-on",
   "category": "tooling",
   "color": "#FF4785",
-  "priority": 18,
+  "priority": 1,
   "command": {
     "command": "npx",
     "args": ["storybook", "init", "-y", "--no-dev"]