create-reactivite 1.6.0 → 1.7.0

package/index.js

@@ -20,18 +20,65 @@ const TEMPLATES = ["template", "template2", "template3"];
 
 // 🧩 argv parse — `name` positional + `--template/-t <val>` + `--help/--version`
 const parseArgs = (argv) => {
-  const args = { _: [], template: undefined, help: false, version: false };
+  // storybook: undefined = soruş, false = --no-storybook ilə açıq imtina
+  const args = {
+    _: [],
+    template: undefined,
+    help: false,
+    version: false,
+    storybook: undefined,
+  };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "--help" || a === "-h") args.help = true;
     else if (a === "--version" || a === "-v") args.version = true;
     else if (a === "--template" || a === "-t") args.template = argv[++i];
     else if (a.startsWith("--template=")) args.template = a.split("=")[1];
+    else if (a === "--no-storybook") args.storybook = false;
+    else if (a === "--storybook") args.storybook = true;
     else if (!a.startsWith("-")) args._.push(a);
   }
   return args;
 };
 
+// 🧩 Storybook-u target layihədən tamamilə çıxarır (user istəməyəndə).
+// Yalnız `template`-də Storybook var. Strip mexaniki: config qovluğu,
+// bütün *.stories.* faylları, package.json-dakı dep + skriptlər.
+const stripStorybook = (targetPath) => {
+  // .storybook config qovluğu
+  fs.rmSync(path.join(targetPath, ".storybook"), {
+    recursive: true,
+    force: true,
+  });
+
+  // src altındakı bütün story fayllarını rekursiv sil
+  const walk = (dir) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) walk(full);
+      else if (/\.stories\.(t|j)sx?$/.test(entry.name)) fs.rmSync(full);
+    }
+  };
+  const srcDir = path.join(targetPath, "src");
+  if (fs.existsSync(srcDir)) walk(srcDir);
+
+  // package.json-dan storybook dep + skriptlərini təmizlə
+  const pkgPath = path.join(targetPath, "package.json");
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    delete pkg.scripts?.storybook;
+    delete pkg.scripts?.["build-storybook"];
+    for (const dep of Object.keys(pkg.devDependencies || {})) {
+      if (dep === "storybook" || dep.startsWith("@storybook/")) {
+        delete pkg.devDependencies[dep];
+      }
+    }
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+  } catch {
+    // package.json oxunmadı — keç
+  }
+};
+
 const printHelp = () => {
   console.log(`
   ${cyan("create-reactivite")} — scaffold React / Next.js / Rspack apps
@@ -41,6 +88,7 @@ const printHelp = () => {
 
   ${dim("Options:")}
     -t, --template <name>   ${TEMPLATES.join(" | ")}
+    --no-storybook          Skip Storybook (template only)
     -h, --help              Show this help
     -v, --version           Show version
 
@@ -162,6 +210,27 @@ const printBanner = () => {
     }
   }
 
+  // 🧩 0a. Storybook — yalnız `template`-də mövcuddur. argv ilə qərar
+  // verilməyibsə soruş (default: bəli). Digər template-lərdə bu addım yoxdur.
+  let wantStorybook = true;
+  if (template === "template") {
+    if (argv.storybook !== undefined) {
+      wantStorybook = argv.storybook;
+    } else {
+      const res = await prompts({
+        type: "confirm",
+        name: "sb",
+        message: "Include Storybook (UI library workbench + stories)?",
+        initial: true,
+      });
+      if (res.sb === undefined) {
+        console.log("❌ Operation cancelled.");
+        process.exit(1);
+      }
+      wantStorybook = res.sb;
+    }
+  }
+
   // 🧩 1. Target folderı müəyyən edirik
   const isCurrentDir = projectName === "." || projectName === "./";
   const targetPath = isCurrentDir
@@ -205,6 +274,12 @@ const printBanner = () => {
     fs.renameSync(gitignoreSrc, path.join(targetPath, ".gitignore"));
   }
 
+  // Storybook istənilmirsə — config, story faylları və dep-ləri çıxar
+  if (template === "template" && !wantStorybook) {
+    console.log("🧹 Removing Storybook...");
+    stripStorybook(targetPath);
+  }
+
   // 🧩 3a. Layihənin adını target package.json-a yazırıq
   // (template-dən gələn ad `template`/`template2`/`template3` olur)
   const pkgPath = path.join(targetPath, "package.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-reactivite",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "⚡ Scaffold modern frontend projects in seconds — pick a template: React + Vite, Next.js 16 (App Router), or Rspack. All ship Tailwind v4, shadcn/ui, TypeScript and a clean, production-ready structure. The Next.js template adds i18n, TanStack Query, axios/orval, Zustand, husky and Vitest. Zero setup hassle.",
   "bin": {
     "create-reactivite": "./index.js"

package/template/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+/**
+ * Storybook is OPTIONAL. The generator (create-reactivite) asks whether
+ * to keep it; if you said no, this folder, the *.stories.tsx files and
+ * the storybook devDependencies/scripts were stripped out.
+ *
+ * Stories live next to the components in src/. The @ alias and Tailwind
+ * are inherited from vite.config.ts automatically.
+ */
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+
+export default config;

package/template/.storybook/preview.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { Decorator, Preview } from "@storybook/react-vite";
+
+import "../src/global.css";
+
+/** The three UI-library themes, exposed in the Storybook toolbar. */
+const THEMES = [
+  { value: "minimal", title: "Minimal", left: "⬜" },
+  { value: "brutalist", title: "Brutalist", left: "🟨" },
+  { value: "aurora", title: "Aurora", left: "🟪" },
+];
+
+/**
+ * Applies the selected theme by setting `data-theme` on both the
+ * <html> element (so the iframe body background matches) and the story
+ * wrapper (so the rendered subtree picks up the CSS vars).
+ */
+const withTheme: Decorator = (Story, context) => {
+  const theme = (context.globals.theme as string) ?? "minimal";
+
+  React.useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+
+  return (
+    <div
+      data-theme={theme}
+      className="bg-background text-foreground flex min-h-screen items-center justify-center p-8"
+    >
+      <Story />
+    </div>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    layout: "fullscreen",
+    controls: { expanded: true },
+  },
+  globalTypes: {
+    theme: {
+      description: "UI library theme",
+      defaultValue: "minimal",
+      toolbar: {
+        title: "Theme",
+        icon: "paintbrush",
+        items: THEMES,
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [withTheme],
+};
+
+export default preview;

package/template/_gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# Storybook build output
+storybook-static
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package/template/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="minimal">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

package/template/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.14",
@@ -37,6 +39,10 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "storybook": "^10.4.6",
     "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",

package/template/src/components/ui-lib/auth-form.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { AuthForm } from "./auth-form";
+
+const meta = {
+  title: "UI Library/AuthForm",
+  component: AuthForm,
+  tags: ["autodocs"],
+  args: {
+    onSubmit: fn(),
+  },
+} satisfies Meta<typeof AuthForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SignIn: Story = {};
+
+export const Custom: Story = {
+  args: {
+    title: "Log in to Acme",
+    description: "Enter your credentials below",
+    submitLabel: "Continue",
+  },
+};

package/template/src/components/ui-lib/auth-form.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export interface AuthFormProps
+  extends Omit<React.ComponentProps<typeof Card>, "onSubmit"> {
+  title?: string
+  description?: string
+  submitLabel?: string
+  /** Receives the entered email + password. */
+  onSubmit?: (data: { email: string; password: string }) => void
+}
+
+/**
+ * AuthForm — sign-in card composed from Card + Input + Checkbox +
+ * Button + Separator. Self-contained controlled inputs.
+ */
+export function AuthForm({
+  title = "Welcome back",
+  description = "Sign in to your account to continue",
+  submitLabel = "Sign in",
+  onSubmit,
+  className,
+  ...props
+}: AuthFormProps) {
+  const [email, setEmail] = React.useState("")
+  const [password, setPassword] = React.useState("")
+
+  return (
+    <Card className={cn("w-full max-w-sm", className)} {...props}>
+      <CardHeader className="text-center">
+        <CardTitle className="text-xl">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form
+          className="grid gap-4"
+          onSubmit={(e) => {
+            e.preventDefault()
+            onSubmit?.({ email, password })
+          }}
+        >
+          <div className="grid gap-2">
+            <label htmlFor="auth-email" className="text-sm font-medium">
+              Email
+            </label>
+            <Input
+              id="auth-email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="email"
+            />
+          </div>
+          <div className="grid gap-2">
+            <div className="flex items-center justify-between">
+              <label htmlFor="auth-pass" className="text-sm font-medium">
+                Password
+              </label>
+              <a
+                href="#"
+                className="text-muted-foreground text-xs underline-offset-4 hover:underline"
+              >
+                Forgot?
+              </a>
+            </div>
+            <Input
+              id="auth-pass"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+            />
+          </div>
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox id="auth-remember" defaultChecked />
+            Remember me for 30 days
+          </label>
+          <Button type="submit" className="w-full">
+            {submitLabel}
+          </Button>
+        </form>
+        <div className="my-4 flex items-center gap-3">
+          <Separator className="flex-1" />
+          <span className="text-muted-foreground text-xs">OR</span>
+          <Separator className="flex-1" />
+        </div>
+        <Button variant="outline" className="w-full">
+          Continue with GitHub
+        </Button>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <span className="text-muted-foreground text-sm">
+          No account?{" "}
+          <a href="#" className="text-foreground font-medium underline-offset-4 hover:underline">
+            Sign up
+          </a>
+        </span>
+      </CardFooter>
+    </Card>
+  )
+}

package/template/src/components/ui-lib/empty-state.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { SearchX, FolderPlus } from "lucide-react";
+
+import { EmptyState } from "./empty-state";
+
+const meta = {
+  title: "UI Library/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+  args: { onAction: fn() },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "No projects yet",
+    description: "Create your first project to get started.",
+    actionLabel: "New project",
+    icon: FolderPlus,
+  },
+};
+
+export const NoResults: Story = {
+  args: {
+    title: "No results found",
+    description: "Try adjusting your search or filters.",
+    icon: SearchX,
+  },
+};

package/template/src/components/ui-lib/empty-state.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { type LucideIcon, Inbox } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+export interface EmptyStateProps extends React.ComponentProps<"div"> {
+  icon?: LucideIcon
+  title: string
+  description?: string
+  actionLabel?: string
+  onAction?: () => void
+}
+
+/**
+ * EmptyState — zero-data placeholder composed from a dashed frame +
+ * icon chip + Button. Used for empty lists, tables, search results.
+ */
+export function EmptyState({
+  icon: Icon = Inbox,
+  title,
+  description,
+  actionLabel,
+  onAction,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "border-border bg-card flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed px-6 py-14 text-center",
+        className
+      )}
+      {...props}
+    >
+      <span className="bg-muted text-muted-foreground flex size-12 items-center justify-center rounded-full">
+        <Icon className="size-6" />
+      </span>
+      <div className="space-y-1">
+        <h3 className="text-base font-semibold">{title}</h3>
+        {description && (
+          <p className="text-muted-foreground mx-auto max-w-xs text-sm">
+            {description}
+          </p>
+        )}
+      </div>
+      {actionLabel && (
+        <Button onClick={onAction} className="mt-1">
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  )
+}

package/template/src/components/ui-lib/feature-card.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Zap, ShieldCheck, Sparkles } from "lucide-react";
+
+import { FeatureCard } from "./feature-card";
+
+const meta = {
+  title: "UI Library/FeatureCard",
+  component: FeatureCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof FeatureCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: Zap,
+    title: "Blazing fast",
+    description:
+      "Vite + SWC give you instant HMR and sub-second cold starts out of the box.",
+  },
+};
+
+export const Grid: Story = {
+  args: { icon: Zap, title: "Blazing fast", description: "..." },
+  render: () => (
+    <div className="grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-3">
+      <FeatureCard
+        icon={Zap}
+        title="Blazing fast"
+        description="Instant HMR and sub-second cold starts out of the box."
+      />
+      <FeatureCard
+        icon={ShieldCheck}
+        title="Type safe"
+        description="End-to-end TypeScript with strict mode enabled by default."
+      />
+      <FeatureCard
+        icon={Sparkles}
+        title="Themeable"
+        description="Swap the whole look with a single data-theme attribute."
+      />
+    </div>
+  ),
+};

package/template/src/components/ui-lib/feature-card.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { type LucideIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export interface FeatureCardProps extends React.ComponentProps<typeof Card> {
+  icon: LucideIcon
+  title: string
+  description: string
+}
+
+/**
+ * FeatureCard — marketing/feature tile composed from Card.
+ * The icon chip uses primary/accent vars so it re-skins per theme.
+ */
+export function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  className,
+  ...props
+}: FeatureCardProps) {
+  return (
+    <Card
+      className={cn(
+        "gap-4 transition-shadow hover:shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <CardHeader>
+        <span className="bg-primary text-primary-foreground mb-2 flex size-11 items-center justify-center rounded-lg">
+          <Icon className="size-5" />
+        </span>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="text-muted-foreground text-sm">
+        <span className="text-foreground font-medium underline-offset-4 hover:underline cursor-pointer">
+          Learn more →
+        </span>
+      </CardContent>
+    </Card>
+  )
+}

package/template/src/components/ui-lib/index.ts

@@ -0,0 +1,13 @@
+/**
+ * ui-lib — composed components built on top of shadcn/ui primitives
+ * (src/components/ui). These are the building blocks meant for use
+ * inside the template's pages. Every one is var-driven, so it adapts
+ * to the active `data-theme` (minimal | brutalist | aurora) with no
+ * per-theme code. See each component's Storybook story for variants.
+ */
+export { StatCard, type StatCardProps } from "./stat-card"
+export { FeatureCard, type FeatureCardProps } from "./feature-card"
+export { PricingCard, type PricingCardProps } from "./pricing-card"
+export { AuthForm, type AuthFormProps } from "./auth-form"
+export { EmptyState, type EmptyStateProps } from "./empty-state"
+export { PageHeader, type PageHeaderProps } from "./page-header"

package/template/src/components/ui-lib/page-header.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Plus, Download } from "lucide-react";
+
+import { PageHeader } from "./page-header";
+import { Button } from "@/components/ui/button";
+
+const meta = {
+  title: "UI Library/PageHeader",
+  component: PageHeader,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    eyebrow: "Workspace",
+    title: "Projects",
+    description: "Manage and organize all of your team's projects.",
+  },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <PageHeader
+        {...args}
+        actions={
+          <>
+            <Button variant="outline">
+              <Download /> Export
+            </Button>
+            <Button>
+              <Plus /> New
+            </Button>
+          </>
+        }
+      />
+    </div>
+  ),
+};
+
+export const TitleOnly: Story = {
+  args: { title: "Settings" },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <PageHeader {...args} />
+    </div>
+  ),
+};

package/template/src/components/ui-lib/page-header.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+export interface PageHeaderProps extends React.ComponentProps<"div"> {
+  title: string
+  description?: string
+  /** Right-aligned action slot, e.g. buttons. */
+  actions?: React.ReactNode
+  /** Optional eyebrow / breadcrumb line above the title. */
+  eyebrow?: string
+}
+
+/**
+ * PageHeader — the title block at the top of a page/section.
+ * title + description on the left, actions on the right, then a rule.
+ */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  eyebrow,
+  className,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <div className={cn("space-y-4", className)} {...props}>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="space-y-1">
+          {eyebrow && (
+            <p className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+              {eyebrow}
+            </p>
+          )}
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          )}
+        </div>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </div>
+      <Separator />
+    </div>
+  )
+}