create-reactivite 1.4.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
 
@@ -148,7 +196,7 @@ const printBanner = () => {
           value: "template2",
         },
         {
-          title: "Rspack (minimal React + TypeScript starter)",
+          title: "Rspack (Tailwind v4, shadcn/ui, React Router, Matrix theme)",
           value: "template3",
         },
       ],
@@ -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,7 +1,7 @@
 {
   "name": "create-reactivite",
-  "version": "1.4.0",
-  "description": "⚡ Scaffold modern frontend projects in seconds — pick a template: React + Vite or Next.js 16 (App Router). Both 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.",
+  "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"
   },
@@ -29,6 +29,8 @@
   "keywords": [
     "react",
     "vite",
+    "nextjs",
+    "rspack",
     "tailwind",
     "tailwindcss",
     "shadcn",

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,47 +7,53 @@
     "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.13",
-    "@radix-ui/react-avatar": "^1.1.12",
-    "@radix-ui/react-checkbox": "^1.3.4",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-select": "^2.3.0",
-    "@radix-ui/react-separator": "^1.1.9",
-    "@radix-ui/react-slot": "^1.2.5",
-    "@radix-ui/react-toggle": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.9",
-    "@tailwindcss/vite": "^4.3.0",
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-collapsible": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-separator": "^1.1.10",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-toggle": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.10",
+    "@tailwindcss/vite": "^4.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
-    "lucide-react": "^1.17.0",
+    "lucide-react": "^1.21.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.7",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.7",
-    "react-router": "^7.17.0",
-    "recharts": "^3.8.1",
+    "react-router": "^8.0.1",
+    "recharts": "^3.9.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.0"
+    "tailwindcss": "^4.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^25.9.3",
+    "@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",
-    "@vitejs/plugin-react": "^6.0.2",
-    "eslint": "^10.4.1",
+    "@vitejs/plugin-react": "^6.0.3",
+    "eslint": "^10.5.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.6.0",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.61.0",
-    "vite": "^8.0.16"
+    "typescript-eslint": "^8.62.0",
+    "vite": "^8.1.0"
   }
 }

package/template/src/components/author-credit.tsx

@@ -1,25 +1,25 @@
-const links = [
-  { label: "GitHub", href: "https://github.com/javidselimov" },
-  { label: "LinkedIn", href: "https://www.linkedin.com/in/javidsalim/" },
-  { label: "npm", href: "https://www.npmjs.com/~ubuligan" },
-];
-
-export function AuthorCredit() {
-  return (
-    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-full border bg-background/80 px-4 py-2 text-sm shadow-lg backdrop-blur">
-      <span className="font-medium">Javid Salimov</span>
-      <span className="text-muted-foreground">·</span>
-      {links.map((l) => (
-        <a
-          key={l.label}
-          href={l.href}
-          target="_blank"
-          rel="noreferrer"
-          className="text-muted-foreground transition-colors hover:text-foreground"
-        >
-          {l.label}
-        </a>
-      ))}
-    </div>
-  );
-}
+const links = [
+  { label: "GitHub", href: "https://github.com/javidselimov" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/javidsalim/" },
+  { label: "npm", href: "https://www.npmjs.com/~ubuligan" },
+];
+
+export function AuthorCredit() {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 rounded-full border bg-background/80 px-4 py-2 text-sm shadow-lg backdrop-blur">
+      <span className="font-medium">Javid Salimov</span>
+      <span className="text-muted-foreground">·</span>
+      {links.map((l) => (
+        <a
+          key={l.label}
+          href={l.href}
+          target="_blank"
+          rel="noreferrer"
+          className="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {l.label}
+        </a>
+      ))}
+    </div>
+  );
+}

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>
+  ),
+};