create-reactivite 1.0.4 → 1.2.0

package/README.md

@@ -1,21 +1,24 @@
 # create-reactivite
 
-A modern React boilerplate generator that creates production-ready applications with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui components.
-
-## 🚀 Features
-
-- **⚡ Vite** - Lightning fast build tool and dev server
-- **⚛️ React 19** - Latest React with modern features
-- **📘 TypeScript** - 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
-- **🌙 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 configuration
-- **📱 Responsive** - Mobile-first responsive design
-- **🎭 Icons** - Lucide React icon library
+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 |
+
+```
+$ 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)
+```
 
 ## 📦 Installation
 
@@ -41,136 +44,154 @@ npm run dev
 npx create-reactivite .
 ```
 
-## 🛠️ What's Included
+Dependencies install automatically (`pnpm`, falling back to `npm`).
 
-### Core Technologies
-
-- **React 19.1.1** - Latest React with concurrent features
-- **TypeScript 5.9.3** - Strict type checking
-- **Vite 7.1.7** - Fast build tool and dev server
-- **Tailwind CSS 4.1.14** - Utility-first CSS framework
+---
 
-### UI Components
+## ⚛️ Template 1 — React + Vite
 
-The template includes a comprehensive set of pre-built shadcn/ui components:
+### Features
 
-- **Layout**: Card, Separator, Dialog
-- **Forms**: Button, Checkbox, Select, Calendar
-- **Navigation**: Accordion, Collapsible, Toggle
-- **Feedback**: Alert, Badge, Spinner, Toast (Sonner)
-- **Data Display**: Avatar, Table, Tooltip
+- **⚡ 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
 
-### Development Tools
+### Scripts
 
-- **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
+- `pnpm dev` — dev server (port 5173)
+- `pnpm build` — `tsc -b && vite build`
+- `pnpm preview` — serve the production build
+- `pnpm lint` — ESLint
 
-## 🏗️ Project Structure
+### Structure
 
 ```
 my-app/
 ├── public/
-│   └── vite.svg
 ├── src/
-│   ├── assets/
 │   ├── components/
-│   │   ├── ui/              # shadcn/ui components
-│   │   └── home-page-components/
-│   ├── lib/
-│   │   └── utils.ts         # Utility functions
+│   │   ├── ui/                    # shadcn/ui components
+│   │   ├── home-page-components/
+│   │   └── admin-page-components/
+│   ├── lib/utils.ts
 │   ├── pages/
-│   │   └── Homepage/
-│   ├── App.tsx
+│   │   ├── Homepage/
+│   │   └── Dashboard/
+│   ├── App.tsx                   # createBrowserRouter route shell
 │   ├── main.tsx
 │   └── global.css
-├── components.json          # shadcn/ui configuration
-├── package.json
-├── tsconfig.json
+├── components.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
-   ```
+### Routing
 
-3. **Start development server**:
-   ```bash
-   pnpm dev      # or npm run dev
-   ```
+Routes live in `App.tsx` via `createBrowserRouter` from **react-router** v7 (not `react-router-dom`):
 
-4. **Open your browser** and visit `http://localhost:5173`
-
-## 📝 Available Scripts
+```typescript
+import { createBrowserRouter } from "react-router"
 
-- `pnpm dev` - Start development server
-- `pnpm build` - Build for production
-- `pnpm preview` - Preview production build
-- `pnpm lint` - Run ESLint
+const router = createBrowserRouter([
+  { path: "/", element: <Homepage /> },
+  { path: "/dashboard", element: <Dashboard /> },
+])
+```
 
-## 🎨 Adding Components
+---
 
-This template uses shadcn/ui. To add new components:
+## ▲ Template 2 — Next.js 16
 
-```bash
-npx shadcn@latest add button
-npx shadcn@latest add input
-npx shadcn@latest add form
-```
+A locale-scoped App Router boilerplate with a full data layer and tooling.
 
-## 🔧 Configuration
+### Features
 
-### Tailwind CSS
+- **▲ 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**
 
-The project uses Tailwind CSS v4 with the new Vite plugin. Configuration is handled through CSS variables and the `components.json` file.
+### Scripts
 
-### TypeScript
+- `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`
 
-Strict TypeScript configuration is included with path aliases:
+### Structure
 
-```typescript
-import { Button } from "@/components/ui/button"
-import { utils } from "@/lib/utils"
 ```
+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)
 
-### ESLint
+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/`.
 
-Modern ESLint configuration with React and TypeScript support.
+> The `@/` path alias maps to the **project root** in this template (not `src/`).
 
-## 🌙 Dark Mode
+---
 
-Dark mode is pre-configured using `next-themes`. Toggle between light and dark themes seamlessly.
+## 🎨 Adding shadcn/ui Components
 
-## 📱 Responsive Design
+Both templates use shadcn/ui (new-york, lucide icons):
 
-All components are built with mobile-first responsive design principles using Tailwind CSS.
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add form
+```
 
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions welcome — open a PR.
 
 ## 📄 License
 
-MIT License - feel free to use this template for your projects.
+MIT
 
 ## 🔗 Links
 
-- [React](https://react.dev/)
-- [Vite](https://vite.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [shadcn/ui](https://ui.shadcn.com/)
-- [TypeScript](https://www.typescriptlang.org/)
+- [React](https://react.dev/) · [Next.js](https://nextjs.org/) · [Vite](https://vite.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/)
 
 ---
 

package/index.js

@@ -18,13 +18,38 @@ 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",
+      },
+    ],
+    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) {
@@ -54,6 +79,13 @@ const __dirname = path.dirname(__filename);
   console.log("📦 Creating project...");
   await copy(templatePath, targetPath);
 
+  // npm publish `.gitignore` faylını tarball-dan silir, ona görə
+  // template-də `_gitignore` saxlanılır və kopyadan sonra adı dəyişdirilir.
+  const gitignoreSrc = path.join(targetPath, "_gitignore");
+  if (fs.existsSync(gitignoreSrc)) {
+    fs.renameSync(gitignoreSrc, path.join(targetPath, ".gitignore"));
+  }
+
   // 🧩 4. Asılılıqları quraşdırırıq
   console.log("📥 Installing dependencies...");
   try {

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "create-reactivite",
-  "version": "1.0.4",
-  "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.2.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/"
   ],
   "dependencies": {
     "prompts": "^2.4.2",

package/template/README.md

@@ -1,73 +1,73 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

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/components.json

@@ -1,22 +1,22 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
-}
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/template/eslint.config.js

@@ -1,23 +1,30 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  {
+    // shadcn/ui components co-locate cva variant helpers with components.
+    files: ['src/components/ui/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+])

package/template/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>reactivite-plate</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>reactivite-plate</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>