create-reactivite 1.1.0 → 1.2.0

package/README.md

@@ -1,197 +1,198 @@
-# 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 |
+
+```
+$ 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
+
+### 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/`).
+
+---
+
+## 🎨 Adding shadcn/ui Components
+
+Both 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/)
+- [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

@@ -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) {

package/package.json

@@ -1,14 +1,15 @@
 {
   "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.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/_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/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
+}

package/template2/README.md

@@ -0,0 +1,73 @@
+# Nextivite
+
+Next.js 16 (App Router) boilerplate scaffolded by **create-reactivite**.
+
+## Stack
+
+- **Next.js 16** + React 19 (App Router, `output: "standalone"`)
+- **Tailwind CSS v4** (`@tailwindcss/postcss`, config-less) + shadcn/ui (new-york)
+- **i18n** — `app/[locale]` routing with a lightweight `TranslationProvider` + `locales/*.json`
+- **TanStack Query** (+ Devtools) via `hoc/provider.tsx`
+- **axios** httpClient with interceptors + **orval** for type-safe API hooks
+- **Zustand** stores (`store/`)
+- **react-hook-form** + **zod** forms
+- **Vitest** + **MSW** + Testing Library
+- **husky** pre-commit (lint + format + tests), **prettier**, **eslint-config-next**
+
+## Getting started
+
+```bash
+pnpm install      # or npm install
+pnpm dev          # http://localhost:3000  → redirects to /az
+```
+
+## Structure
+
+```
+app/
+  layout.tsx              # root passthrough
+  page.tsx                # redirects to /{DEFAULT_LOCALE}
+  globals.css             # Tailwind v4 theme tokens
+  api/clear-session/      # cookie-clearing route
+  [locale]/
+    layout.tsx            # html/body shell + all providers
+    locales.ts            # server-only dictionary loader
+    page.tsx              # Home
+    (public)/login/       # login (react-hook-form + zod)
+    (private)/dashboard/  # guarded page
+components/
+  ui/                     # shadcn/ui components
+  theme-provider.tsx
+  AuthEventListener.tsx
+config/                   # env + constants (LOCALES, timeouts)
+contexts/                 # translation-context
+hoc/                      # QueryProvider
+lib/                      # utils, paramsSerializer
+services/
+  httpClient/             # axios instance + orval mutator
+  generated/              # orval output (git-ignored content)
+store/                    # zustand stores
+locales/                  # az.json, en.json
+testing/msw/              # mock server + handlers
+__tests__/                # vitest specs
+```
+
+## 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/`.
+
+## Scripts
+
+- `pnpm dev` / `pnpm build` / `pnpm start`
+- `pnpm lint` / `pnpm format`
+- `pnpm test` / `pnpm test:run`
+- `pnpm generate` / `pnpm generate:api`
+
+## Adding components
+
+```bash
+npx shadcn@latest add <name>
+```
+
+`components.json` points `css` at `app/globals.css`.

package/template2/__tests__/example.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { paramsSerializer } from '@/lib/paramsSerializer';
+
+describe('paramsSerializer', () => {
+  it('flattens nested objects', () => {
+    expect(paramsSerializer({ pageable: { page: 0, size: 10 } })).toBe(
+      'page=0&size=10',
+    );
+  });
+
+  it('repeats array values', () => {
+    expect(paramsSerializer({ sort: ['name,asc', 'id,desc'] })).toBe(
+      'sort=name%2Casc&sort=id%2Cdesc',
+    );
+  });
+
+  it('omits null and undefined', () => {
+    expect(paramsSerializer({ a: 1, b: null, c: undefined })).toBe('a=1');
+  });
+});

package/template2/_gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts