create-reactivite 1.1.0 → 1.3.0

package/README.md

@@ -1,197 +1,235 @@
-# create-reactivite
-
-A modern React boilerplate generator that creates production-ready applications with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui components.
-
-## 🚀 Features
-
-- **⚡ Vite 8** - Lightning fast build tool and dev server
-- **⚛️ React 19** - Latest React with modern features
-- **📘 TypeScript 6** - Full TypeScript support with strict configuration
-- **🎨 Tailwind CSS v4** - Latest Tailwind with modern CSS features
-- **🧩 shadcn/ui** - Beautiful, accessible UI components
-- **📦 Radix UI** - Unstyled, accessible components
-- **🧭 React Router v7** - Client-side routing with `createBrowserRouter`
-- **📊 Recharts** - Composable charts for the admin dashboard
-- **🌙 Dark Mode** - Built-in theme switching with next-themes
-- **📅 Date Picker** - React Day Picker integration
-- **🔔 Toast Notifications** - Sonner for elegant notifications
-- **🎯 ESLint** - Code linting with modern flat config
-- **📱 Responsive** - Mobile-first responsive design
-- **🎭 Icons** - Lucide React icon library
-
-## 📦 Installation
-
-### Using npx (Recommended)
-
-```bash
-npx create-reactivite my-app
-cd my-app
-pnpm dev
-```
-
-### Using npm
-
-```bash
-npm create reactivite my-app
-cd my-app
-npm run dev
-```
-
-### Install in current directory
-
-```bash
-npx create-reactivite .
-```
-
-## 🛠️ What's Included
-
-### Core Technologies
-
-- **React 19.2** - Latest React with concurrent features
-- **TypeScript 6.0** - Strict type checking
-- **Vite 8.0** - Fast build tool and dev server (Rolldown bundler)
-- **Tailwind CSS 4.3** - Utility-first CSS framework
-- **React Router 7** - Routing via `createBrowserRouter` (from `react-router`)
-
-### UI Components
-
-The template includes a comprehensive set of pre-built shadcn/ui components:
-
-- **Layout**: Card, Separator, Dialog
-- **Forms**: Button, Checkbox, Select, Calendar
-- **Navigation**: Accordion, Collapsible, Toggle
-- **Feedback**: Alert, Badge, Spinner, Toast (Sonner)
-- **Data Display**: Avatar, Table, Tooltip
-
-### Development Tools
-
-- **ESLint** - Code linting with React and TypeScript rules
-- **TypeScript** - Strict configuration for better code quality
-- **Path Aliases** - Clean imports with `@/` prefix
-- **Hot Reload** - Instant updates during development
-
-## 🏗️ Project Structure
-
-```
-my-app/
-├── public/
-│   └── vite.svg
-├── src/
-│   ├── assets/
-│   ├── components/
-│   │   ├── ui/                    # shadcn/ui components
-│   │   ├── home-page-components/
-│   │   └── admin-page-components/
-│   ├── lib/
-│   │   └── utils.ts              # Utility functions
-│   ├── pages/
-│   │   ├── Homepage/
-│   │   └── Dashboard/
-│   ├── App.tsx                   # createBrowserRouter route shell
-│   ├── main.tsx
-│   └── global.css
-├── components.json          # shadcn/ui configuration
-├── package.json
-├── tsconfig.json
-├── vite.config.ts
-└── eslint.config.js
-```
-
-## 🚀 Getting Started
-
-1. **Create your project**:
-   ```bash
-   npx create-reactivite my-awesome-app
-   cd my-awesome-app
-   ```
-
-2. **Install dependencies** (automatically done):
-   ```bash
-   pnpm install  # or npm install
-   ```
-
-3. **Start development server**:
-   ```bash
-   pnpm dev      # or npm run dev
-   ```
-
-4. **Open your browser** and visit `http://localhost:5173`
-
-## 📝 Available Scripts
-
-- `pnpm dev` - Start development server
-- `pnpm build` - Build for production
-- `pnpm preview` - Preview production build
-- `pnpm lint` - Run ESLint
-
-## 🎨 Adding Components
-
-This template uses shadcn/ui. To add new components:
-
-```bash
-npx shadcn@latest add button
-npx shadcn@latest add input
-npx shadcn@latest add form
-```
-
-## 🔧 Configuration
-
-### Tailwind CSS
-
-The project uses Tailwind CSS v4 with the new Vite plugin. Configuration is handled through CSS variables and the `components.json` file.
-
-### TypeScript
-
-Strict TypeScript configuration is included with path aliases:
-
-```typescript
-import { Button } from "@/components/ui/button"
-import { utils } from "@/lib/utils"
-```
-
-### ESLint
-
-Modern ESLint flat config with React and TypeScript support.
-
-### Routing
-
-Routes are defined in `App.tsx` via `createBrowserRouter` from **react-router** v7 (not `react-router-dom`). Add a page by creating it under `src/pages/<Name>/` and registering a route:
-
-```typescript
-import { createBrowserRouter } from "react-router"
-
-const router = createBrowserRouter([
-  { path: "/", element: <Homepage /> },
-  { path: "/dashboard", element: <Dashboard /> },
-])
-```
-
-## 🌙 Dark Mode
-
-Dark mode is pre-configured using `next-themes`. Toggle between light and dark themes seamlessly.
-
-## 📱 Responsive Design
-
-All components are built with mobile-first responsive design principles using Tailwind CSS.
-
-## 🤝 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## 📄 License
-
-MIT License - feel free to use this template for your projects.
-
-## 🔗 Links
-
-- [React](https://react.dev/)
-- [Vite](https://vite.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [shadcn/ui](https://ui.shadcn.com/)
-- [React Router](https://reactrouter.com/)
-- [Recharts](https://recharts.org/)
-- [TypeScript](https://www.typescriptlang.org/)
-
----
-
-**Happy coding! 🎉**
+# create-reactivite
+
+A modern frontend boilerplate generator. On run it asks which template you want, then scaffolds a production-ready app with TypeScript, Tailwind CSS v4 and shadcn/ui pre-wired.
+
+## 🚀 Templates
+
+When you run the CLI you pick one of two templates:
+
+| Template | Stack |
+| --- | --- |
+| **React + Vite** | React 19, Vite 8 (Rolldown), Tailwind v4, shadcn/ui, React Router v7, Recharts |
+| **Next.js 16** | Next.js 16 (App Router), React 19, Tailwind v4, shadcn/ui, i18n, TanStack Query, axios + orval, Zustand, react-hook-form + zod, husky, Vitest + MSW |
+| **Rspack** | React 19 + TypeScript, Rspack bundler (SWC). Minimal starter — grow it yourself. |
+
+```
+$ npx create-reactivite my-app
+
+? Project name: my-app
+? Pick a template: ›
+❯ React + Vite (Tailwind v4, shadcn/ui, React Router)
+  Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)
+  Rspack (minimal React + TypeScript starter)
+```
+
+## 📦 Installation
+
+### Using npx (Recommended)
+
+```bash
+npx create-reactivite my-app
+cd my-app
+pnpm dev
+```
+
+### Using npm
+
+```bash
+npm create reactivite my-app
+cd my-app
+npm run dev
+```
+
+### Install in current directory
+
+```bash
+npx create-reactivite .
+```
+
+Dependencies install automatically (`pnpm`, falling back to `npm`).
+
+---
+
+## ⚛️ Template 1 — React + Vite
+
+### Features
+
+- **⚡ Vite 8** — Lightning-fast build tool and dev server (Rolldown bundler)
+- **⚛️ React 19** — Latest React with modern features
+- **📘 TypeScript 6** — Full TypeScript with strict configuration
+- **🎨 Tailwind CSS v4** — Config-less, CSS-variable driven theme
+- **🧩 shadcn/ui** — Beautiful, accessible UI components (new-york)
+- **🧭 React Router v7** — Client-side routing with `createBrowserRouter`
+- **📊 Recharts** — Composable charts for the admin dashboard
+- **🌙 Dark Mode** — Built-in theme switching
+- **🔔 Toasts** — Sonner notifications
+- **🎯 ESLint** — Modern flat config
+
+### Scripts
+
+- `pnpm dev` — dev server (port 5173)
+- `pnpm build` — `tsc -b && vite build`
+- `pnpm preview` — serve the production build
+- `pnpm lint` — ESLint
+
+### Structure
+
+```
+my-app/
+├── public/
+├── src/
+│   ├── components/
+│   │   ├── ui/                    # shadcn/ui components
+│   │   ├── home-page-components/
+│   │   └── admin-page-components/
+│   ├── lib/utils.ts
+│   ├── pages/
+│   │   ├── Homepage/
+│   │   └── Dashboard/
+│   ├── App.tsx                   # createBrowserRouter route shell
+│   ├── main.tsx
+│   └── global.css
+├── components.json
+├── vite.config.ts
+└── eslint.config.js
+```
+
+### Routing
+
+Routes live in `App.tsx` via `createBrowserRouter` from **react-router** v7 (not `react-router-dom`):
+
+```typescript
+import { createBrowserRouter } from "react-router"
+
+const router = createBrowserRouter([
+  { path: "/", element: <Homepage /> },
+  { path: "/dashboard", element: <Dashboard /> },
+])
+```
+
+---
+
+## ▲ Template 2 — Next.js 16
+
+A locale-scoped App Router boilerplate with a full data layer and tooling.
+
+### Features
+
+- **▲ Next.js 16** — App Router, `output: "standalone"`
+- **🌍 i18n** — `app/[locale]` routing, lightweight `TranslationProvider` + `locales/*.json`
+- **🔁 TanStack Query** — `QueryClientProvider` + Devtools
+- **🔌 axios + orval** — typed API hooks generated from your OpenAPI schema
+- **🐻 Zustand** — state stores (persisted `user-store`)
+- **📝 react-hook-form + zod** — typed forms
+- **🧪 Vitest + MSW** — unit tests with mocked network
+- **🐶 husky** — pre-commit: lint + format + tests
+- **🎨 Tailwind v4 + shadcn/ui**
+
+### Scripts
+
+- `pnpm dev` — dev server (port 3000, redirects `/` → `/az`)
+- `pnpm build` — `next build`
+- `pnpm test` / `pnpm test:run` — Vitest
+- `pnpm generate:api` — orval codegen into `services/generated/`
+- `pnpm lint` / `pnpm format`
+
+### Structure
+
+```
+my-app/
+├── app/
+│   ├── layout.tsx              # root passthrough
+│   ├── page.tsx                # redirects to /{DEFAULT_LOCALE}
+│   ├── globals.css
+│   ├── api/clear-session/
+│   └── [locale]/
+│       ├── layout.tsx          # html/body shell + providers
+│       ├── locales.ts          # server-only dictionary loader
+│       ├── page.tsx            # Home
+│       ├── (public)/login/
+│       └── (private)/dashboard/
+├── components/ui/              # shadcn/ui
+├── config/                     # env + constants (LOCALES)
+├── contexts/                   # translation-context
+├── hoc/                        # QueryProvider
+├── lib/                        # utils, paramsSerializer
+├── services/
+│   ├── httpClient/             # axios + orval mutator
+│   └── generated/              # orval output
+├── store/                      # zustand
+├── locales/                    # az.json, en.json
+├── testing/msw/
+└── orval.config.ts
+```
+
+### API codegen (orval)
+
+1. Point `orval.config.ts` `input.target` at your OpenAPI schema (or set `OPENAPI_TARGET`).
+2. `pnpm generate:api` → writes react-query hooks + models to `services/generated/`.
+
+> The `@/` path alias maps to the **project root** in this template (not `src/`).
+
+---
+
+## 🦀 Template 3 — Rspack (minimal)
+
+A deliberately bare **React + TypeScript** starter on [Rspack](https://rspack.dev/) (Rust-based bundler, built-in SWC). No router, no UI kit — a clean base to build on.
+
+### Scripts
+
+- `pnpm dev` — dev server (port 5174)
+- `pnpm build` — production build → `dist/`
+- `pnpm preview` — serve the production build
+
+### Structure
+
+```
+my-app/
+├── index.html
+├── rspack.config.mjs       # entry, swc loader, html plugin, native CSS
+├── tsconfig.json
+└── src/
+    ├── main.tsx
+    ├── App.tsx
+    ├── index.css
+    └── components/author-credit.tsx
+```
+
+---
+
+## 👤 Author
+
+Every template renders a small credit linking to the author. Built by **Javid Salimov** —
+[GitHub](https://github.com/javidselimov) ·
+[LinkedIn](https://www.linkedin.com/in/javidsalim/) ·
+[npm](https://www.npmjs.com/~ubuligan).
+
+---
+
+## 🎨 Adding shadcn/ui Components
+
+The React + Vite and Next.js templates use shadcn/ui (new-york, lucide icons):
+
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add form
+```
+
+## 🤝 Contributing
+
+Contributions welcome — open a PR.
+
+## 📄 License
+
+MIT
+
+## 🔗 Links
+
+- [React](https://react.dev/) · [Next.js](https://nextjs.org/) · [Vite](https://vite.dev/) · [Rspack](https://rspack.dev/)
+- [Tailwind CSS](https://tailwindcss.com/) · [shadcn/ui](https://ui.shadcn.com/)
+- [React Router](https://reactrouter.com/) · [TanStack Query](https://tanstack.com/query) · [orval](https://orval.dev/)
+- [Zustand](https://zustand.docs.pmnd.rs/) · [Recharts](https://recharts.org/) · [TypeScript](https://www.typescriptlang.org/)
+
+---
+
+**Happy coding! 🎉**

package/index.js

@@ -6,11 +6,29 @@ import { fileURLToPath } from "url";
 import { copy } from "fs-extra";
 import prompts from "prompts";
 import { execa } from "execa";
+import figlet from "figlet";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// ANSI rəng köməkçiləri (xarici asılılıq olmadan)
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
+const dim = (s) => `\x1b[2m${s}\x1b[0m`;
+
+// 🧩 Banner — CLI açılışında göstərilir
+const printBanner = () => {
+  try {
+    console.log(cyan(figlet.textSync("Reactivite", { font: "Standard" })));
+  } catch {
+    // figlet uğursuz olsa sadə mətnə keç
+    console.log(cyan("\n  create-reactivite"));
+  }
+  console.log(dim("  Scaffold React / Next.js / Rspack apps · by Javid Salimov\n"));
+};
+
 (async () => {
+  printBanner();
+
   const { projectName } = await prompts({
     type: "text",
     name: "projectName",
@@ -18,13 +36,42 @@ const __dirname = path.dirname(__filename);
     initial: "my-react-app",
   });
 
+  // 🧩 0. Hansı template istifadə olunacaq — istifadəçi seçir
+  const { template } = await prompts({
+    type: "select",
+    name: "template",
+    message: "Pick a template:",
+    choices: [
+      {
+        title: "React + Vite (Tailwind v4, shadcn/ui, React Router)",
+        value: "template",
+      },
+      {
+        title:
+          "Next.js 16 (App Router, i18n, TanStack Query, orval, Zustand, husky)",
+        value: "template2",
+      },
+      {
+        title: "Rspack (minimal React + TypeScript starter)",
+        value: "template3",
+      },
+    ],
+    initial: 0,
+  });
+
+  // İstifadəçi seçimi ləğv etdisə (Ctrl+C) — çıx
+  if (!template) {
+    console.log("❌ Operation cancelled.");
+    process.exit(1);
+  }
+
   // 🧩 1. Target folderı müəyyən edirik
   const isCurrentDir = projectName === "." || projectName === "./";
   const targetPath = isCurrentDir
     ? process.cwd()
     : path.resolve(process.cwd(), projectName);
 
-  const templatePath = path.resolve(__dirname, "template");
+  const templatePath = path.resolve(__dirname, template);
 
   // 🧩 2. Əgər current folderdirsə — içi boşdursa davam et, yoxsa xəbərdarlıq ver
   if (isCurrentDir) {

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "create-reactivite",
-  "version": "1.1.0",
-  "description": "⚡ Effortlessly scaffold modern React + Vite + Tailwind CSS projects with a clean structure and ready-to-use configuration. Create Reactivite helps you instantly start new React apps with best practices, Shadcn/UI support, and zero setup hassle.",
+  "version": "1.3.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.",
   "bin": {
     "create-reactivite": "./index.js"
   },
   "type": "module",
   "files": [
     "index.js",
-    "template/"
+    "template/",
+    "template2/",
+    "template3/"
   ],
   "dependencies": {
     "prompts": "^2.4.2",
     "fs-extra": "^11.2.0",
-    "execa": "^7.1.0"
+    "execa": "^7.1.0",
+    "figlet": "^1.9.3"
   },
   "repository": {
     "type": "git",

package/template/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/src/App.tsx

@@ -5,6 +5,7 @@ import { createBrowserRouter } from "react-router";
 import { RouterProvider } from "react-router/dom";
 import Home from './pages/Homepage/Homepage';
 import DashboardPage from './pages/Dashboard/Dashboard';
+import { AuthorCredit } from './components/author-credit';
 const router = createBrowserRouter([
   {
     path: "/",
@@ -20,8 +21,12 @@ const router = createBrowserRouter([
   },
 ]);
 function App() {
-  return   <RouterProvider router={router} />
-
+  return (
+    <>
+      <RouterProvider router={router} />
+      <AuthorCredit />
+    </>
+  );
 }
 
 export default App

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

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

package/template2/.env.example

@@ -0,0 +1,8 @@
+# Public API base URL used by the browser (axios httpClient).
+NEXT_PUBLIC_API_BASE_URL=/api/backend
+
+# Server-side backend URL proxied via next.config.ts rewrites.
+API_BASE_URL=http://localhost:8080/api
+
+# OpenAPI schema used by orval (npm run generate:api).
+OPENAPI_TARGET=http://localhost:8080/v3/api-docs

package/template2/.husky/pre-commit

@@ -0,0 +1,4 @@
+npx figlet "Nextivite"
+echo "Pre-commit: lint + format + tests"
+
+npm run lint && npm run format && npm run test:run

package/template2/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}