create-reactivite 1.0.3 → 1.1.0

package/README.md

@@ -1,177 +1,197 @@
-# 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
-
-## 📦 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.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
-
-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/
-│   ├── lib/
-│   │   └── utils.ts         # Utility functions
-│   ├── pages/
-│   │   └── Homepage/
-│   ├── App.tsx
-│   ├── 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 configuration with React and TypeScript support.
-
-## 🌙 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/)
-- [TypeScript](https://www.typescriptlang.org/)
-
----
-
-**Happy coding! 🎉**
+# 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! 🎉**

package/index.js

@@ -54,6 +54,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,6 +1,6 @@
 {
   "name": "create-reactivite",
-  "version": "1.0.3",
+  "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.",
   "bin": {
     "create-reactivite": "./index.js"

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/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',
+    },
+  },
+])