@aditokmo/react-cli-setup 0.1.0

package/README.md

@@ -0,0 +1,120 @@
+# @aditokmo/react-cli-setup 🚀
+
+[![npm version](https://img.shields.io/npm/v/@aditokmo/react-cli-setup?color=blue)](https://www.npmjs.com/package/@aditokmo/react-cli-setup)
+
+A React CLI built with Vite that helps you build and structure your projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
+
+## What it does
+
+* **Automated Installation:** Installs all selected libraries (listed below) for you.
+* **Structuring:** Automatically generates a scalable folder structure based on your choices.
+* **Boilerplate Injection:** Pre-configures Providers, Router paths, etc., so you can start coding features immediately
+
+---
+
+##  Usage
+
+Run the following command in your terminal to start CLI
+
+```bash
+# Using NPM
+npx @aditokmo/react-cli-setup
+
+# Using PNPM
+pnpm dlx @aditokmo/react-cli-setup
+
+# Using Yarn
+yarn dlx @aditokmo/react-cli-setup
+```
+
+---
+
+## Features
+
+| Category | Options |
+| :--- | :--- |
+| **Folder Structure** | Feature-based |
+| **Modules** | Common, Auth |
+| **Routing** | React Router, TanStack Router |
+| **Data Fetching** | TanStack Query (React Query) & Axios |
+| **State Management** | Zustand |
+| **Form** | React Hook Form, TanStack Form |
+| **Schema** | Zod, Yup |
+| **Styling** | CSS, SCSS, Tailwind CSS |
+| **UI Components** | Shadcn |
+| **Icons** | React Icons, Font Awesome |
+| **Toast** | React Toastify, React Hot Toast, Sonner |
+| **Custom Hooks** |  |
+| **Helpers** |  |
+
+---
+
+## Folder Structure
+
+Note: This is the complete folder structure. The actual folders generated will depend on the libraries and options you select during the setup process.
+
+```text
+src/
+├── api/                # Global API client & Axios config
+├── components/         # Shared UI components
+├── hooks/              # Global reusable custom hooks
+├── providers/          # Providers (React Query, Tanstack Router)
+├── routes/             # Route definitions
+├── styles/             # Styles (Tailwind, CSS, SCSS)
+├── layout/             # Layout to split protected and unprotected routes
+│   ├── MainLayout.tsx
+│   ├── AuthLayout.tsx
+├── modules/            # Feature-based modules (The core of your app)
+│   └── auth/           # Example: Auth module
+│       ├── components/
+│       ├── hooks/
+│       ├── pages/
+│       ├── services/
+│       └── types/
+├── store/              # Global State Managemenet (Zustand)
+│   ├── useAuthStore.ts
+│   └── useThemeStore.ts
+└── utils/              # Helper functions
+```
+
+---
+
+## Local Setup
+
+To do your own changes and use this CLI locally:
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/aditokmo/react-cli.git
+   cd react-cli
+
+2. **Install dependencies:**
+   ```bash
+   pnpm install
+
+3. **Build the project:**
+   ```bash
+   pnpm run build
+
+4. **Link globally:**
+   ```bash
+   pnpm link --global
+
+5. **Run command in your terminal to start CLI locally:**
+```bash
+react-cli-setup
+```
+
+---
+
+
+## Project Structure
+
+* `cli/` - Logic for the CLI.
+* `templates/` - Pre-defined boilerplates and configurations.
+
+---
+
+<p align="center">
+  Developed with ❤️ by <a href="https://github.com/aditokmo">aditokmo</a>
+</p>

package/dist/index.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+import fs from 'fs-extra';
+import path from 'path';
+import { execSync } from 'child_process';
+import { askQuestions } from './questions.js';
+import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile } from './utils.js';
+import { collectDependencies } from './installers.js';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+async function main() {
+    console.log('⚛️ Welcome to React CLI Setup by github/aditokmo');
+    let projectDir = '';
+    try {
+        const answers = await askQuestions();
+        projectDir = path.join(process.cwd(), answers.projectName);
+        const templateRoot = path.join(__dirname, '../templates');
+        const appFilePath = path.join(projectDir, 'src', 'App.tsx');
+        const viteConfigPath = path.join(projectDir, 'vite.config.ts');
+        fs.ensureDirSync(projectDir);
+        copyTemplate(path.join(templateRoot, 'base'), projectDir);
+        // Styles
+        if (answers.style === 'tailwind') {
+            copyTemplate(path.join(templateRoot, 'styles', 'tailwind', 'src'), path.join(projectDir, 'src/styles'));
+            patchViteConfig(viteConfigPath, false, 'import tailwindcss from "@tailwindcss/vite"', 'tailwindcss()');
+        }
+        if (answers.style === 'css') {
+            copyTemplate(path.join(templateRoot, 'styles', 'css', 'src'), path.join(projectDir, 'src/styles'));
+        }
+        // State Management
+        if (answers.reactQuery) {
+            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src'), path.join(projectDir, 'src/providers'));
+            patchAppFile(appFilePath, "import { ReactQueryProvider } from './providers'", "<ReactQueryProvider>", "</ReactQueryProvider>");
+        }
+        if (answers.globalState === 'zustand') {
+            copyTemplate(path.join(templateRoot, 'state', 'zustand', 'src'), path.join(projectDir, 'src/store'));
+        }
+        // Router
+        if (answers.router === 'react-router') {
+            copyTemplate(path.join(templateRoot, 'router', 'react-router', 'src', 'routes'), path.join(projectDir, 'src/routes'));
+            copyTemplate(path.join(templateRoot, 'router', 'react-router', 'src', 'components'), path.join(projectDir, 'src/components'));
+            copyTemplate(path.join(templateRoot, 'router', 'react-router', 'src', 'modules', 'auth', 'routes'), path.join(projectDir, 'src/modules/auth/routes'));
+            patchAppFile(appFilePath, "import { BrowserRouter } from 'react-router'\nimport { AppRoutes } from './routes'", "<BrowserRouter>\n      <AppRoutes />", "</BrowserRouter>");
+        }
+        else if (answers.router === 'tanstack-router') {
+            copyTemplate(path.join(templateRoot, 'router', 'tanstack-router', 'src', 'routes'), path.join(projectDir, 'src/routes'));
+            copyTemplate(path.join(templateRoot, 'router', 'tanstack-router', 'src', 'providers'), path.join(projectDir, 'src/providers'));
+            patchAppFile(appFilePath, "import { TanStackRouterProvider } from './providers/TanstackRouterProvider'", "<TanStackRouterProvider />", "");
+            patchViteConfig(viteConfigPath, true, "import { tanstackRouter } from '@tanstack/router-plugin/vite'", "tanstackRouter({ target: 'react', autoCodeSplitting: true })");
+        }
+        finalizeAppFile(appFilePath);
+        finalizeViteConfig(viteConfigPath);
+        const { dependency, devDependency, cmd } = collectDependencies(answers);
+        process.chdir(projectDir);
+        if (dependency.length) {
+            console.log('📦 Installing dependencies...');
+            execSync(`pnpm add ${dependency.join(' ')}`, { stdio: 'inherit' });
+        }
+        if (devDependency.length) {
+            console.log('📦 Installing dev dependencies...');
+            execSync(`pnpm add -D ${devDependency.join(' ')}`, { stdio: 'inherit' });
+        }
+        // Extra cmds like shadcn
+        for (const command of cmd) {
+            console.log(`⚙️ Running: ${command}`);
+            execSync(command, { stdio: 'inherit' });
+        }
+        console.log('✅ Project setup completed');
+        console.log(`👉 cd ${answers.projectName} && pnpm run dev`);
+    }
+    catch (error) {
+        console.error('\n❌ Error while creating a project:');
+        console.error(`👉 ${error.message}`);
+        if (projectDir && fs.existsSync(projectDir)) {
+            console.log('🧹 Cleaning... Deleting failed project installation.');
+            fs.removeSync(projectDir);
+        }
+        process.exit(1);
+    }
+}
+main();

package/dist/installers.js

@@ -0,0 +1,23 @@
+import { installers } from './mapper.js';
+import { axiosInstaller, shadcnInstaller } from './packages.js';
+export function collectDependencies(answers) {
+    const dependency = new Set();
+    const devDependency = new Set();
+    const cmd = [];
+    // Default base packages
+    axiosInstaller.dependency?.forEach(d => dependency.add(d));
+    // Packages from answers
+    Object.entries(answers).forEach(([key, value]) => {
+        const installer = installers[value === true ? key : value];
+        installer?.dependency?.forEach(d => dependency.add(d));
+        installer?.devDependency?.forEach(d => devDependency.add(d));
+    });
+    if (answers.shadcn && answers.style === 'tailwind') {
+        cmd.push(...shadcnInstaller.cmd);
+    }
+    return {
+        dependency: Array.from(dependency),
+        devDependency: Array.from(devDependency),
+        cmd
+    };
+}

package/dist/mapper.js

@@ -0,0 +1,17 @@
+import { fontAwesomeIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
+export const installers = {
+    'reactQuery': reactQueryInstaller,
+    'zustand': zustandInstaller,
+    'react-router': reactRouterInstaller,
+    'tanstack-router': tanstackRouterInstaller,
+    'tailwind': tailwindInstaller,
+    'react-icons': reactIconsInstaller,
+    'font-awesome': fontAwesomeIconsInstaller,
+    'react-hot-toast': reactHotToastInstaller,
+    'react-toastify': reactToastifyInstaller,
+    'sonner': sonnerInstaller,
+    'react-hook-form': reactFormHookInstaller,
+    'tanstack-form': tanstackFormInstaller,
+    'zod': zodInstaller,
+    'yup': yupInstaller,
+};

package/dist/packages.js

@@ -0,0 +1,60 @@
+// React Query
+export const reactQueryInstaller = {
+    dependency: ['@tanstack/react-query'],
+    devDependency: ['@tanstack/react-query-devtools']
+};
+// Global State Management
+export const zustandInstaller = {
+    dependency: ['zustand'],
+};
+// Styles
+export const tailwindInstaller = {
+    dependency: ['tailwindcss', '@tailwindcss/vite'],
+};
+// Icons
+export const reactIconsInstaller = {
+    dependency: ['react-icons'],
+};
+export const fontAwesomeIconsInstaller = {
+    dependency: ['@fortawesome/fontawesome-svg-core', '@fortawesome/react-fontawesome', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons'],
+};
+// Toast
+export const reactHotToastInstaller = {
+    dependency: ['react-hot-toast'],
+};
+export const reactToastifyInstaller = {
+    dependency: ['react-toastify'],
+};
+export const sonnerInstaller = {
+    dependency: ['sonner'],
+};
+// UI Libs
+export const shadcnInstaller = {
+    cmd: ['pnpm dlx shadcn@latest init']
+};
+// Routers
+export const reactRouterInstaller = {
+    dependency: ['react-router', 'react-router-dom'],
+};
+export const tanstackRouterInstaller = {
+    dependency: ['@tanstack/react-router'],
+    devDependency: ['@tanstack/react-router-devtools', '@tanstack/router-plugin'],
+};
+// Forms
+export const reactFormHookInstaller = {
+    dependency: ['react-hook-form'],
+};
+export const tanstackFormInstaller = {
+    dependency: ['@tanstack/react-form'],
+};
+// Schemas
+export const zodInstaller = {
+    dependency: ['zod', '@hookform/resolvers'],
+};
+export const yupInstaller = {
+    dependency: ['yup', '@hookform/resolvers'],
+};
+// Base installation
+export const axiosInstaller = {
+    dependency: ['axios'],
+};

package/dist/questions.js

@@ -0,0 +1,82 @@
+import { group, text, select, confirm, isCancel, cancel } from '@clack/prompts';
+export async function askQuestions() {
+    const results = await group({
+        projectName: () => text({
+            message: 'Project name:',
+            placeholder: 'my-app',
+            validate: (value) => (value.length < 0 ? 'Project name is required' : undefined),
+        }),
+        style: () => select({
+            message: 'Choose styling:',
+            options: [
+                { value: 'tailwind', label: 'Tailwind' },
+                { value: 'css', label: 'CSS' },
+            ],
+        }),
+        shadcn: ({ results }) => {
+            if (results.style !== 'tailwind')
+                return Promise.resolve(false);
+            return confirm({ message: 'Include Shadcn UI?' });
+        },
+        icons: () => select({
+            message: 'Choose icon library:',
+            options: [
+                { value: 'react-icons', label: 'React Icons' },
+                { value: 'font-awesome', label: 'Font Awesome' },
+            ]
+        }),
+        toast: () => select({
+            message: 'Choose toast library:',
+            options: [
+                { value: 'react-hot-toast', label: 'React Hot Toast' },
+                { value: 'react-toastify', label: 'React Toastify' },
+                { value: 'sonner', label: 'Sonner' },
+            ]
+        }),
+        router: () => select({
+            message: 'Choose router:',
+            options: [
+                { value: 'react-router', label: 'React Router' },
+                { value: 'tanstack-router', label: 'Tanstack Router' },
+            ],
+        }),
+        form: () => select({
+            message: 'Choose form library:',
+            options: [
+                { value: 'react-hook-form', label: 'React Hook Form' },
+                { value: 'tanstack-form', label: 'TanStack Form' },
+            ],
+        }),
+        schema: () => select({
+            message: 'Choose schema library:',
+            options: [
+                { value: 'zod', label: 'Zod' },
+                { value: 'yup', label: 'Yup' },
+            ]
+        }),
+        globalState: () => select({
+            message: 'Choose global state management library:',
+            options: [
+                { value: 'zustand', label: 'Zustand' },
+            ]
+        }),
+        reactQuery: () => confirm({ message: 'Include React Query?' }),
+    }, {
+        onCancel: () => {
+            cancel('Operation cancelled.');
+            process.exit(0);
+        },
+    });
+    if (isCancel(results.projectName) ||
+        isCancel(results.style) ||
+        isCancel(results.router) ||
+        isCancel(results.shadcn) ||
+        isCancel(results.reactQuery)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    return {
+        ...results,
+        shadcn: results.shadcn,
+    };
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.js

@@ -0,0 +1,74 @@
+import fs from 'fs-extra';
+export function copyTemplate(src, path) {
+    if (!fs.existsSync(src)) {
+        console.warn(`⚠️ Template folder ${src} dosn't exist`);
+        return;
+    }
+    fs.copySync(src, path, { overwrite: true });
+}
+export function patchAppFile(filePath, importLine, openTag, closeTag) {
+    if (!fs.existsSync(filePath))
+        return;
+    let content = fs.readFileSync(filePath, 'utf-8');
+    if (importLine) {
+        content = content.replace('// [IMPORTS]', `${importLine}\n// [IMPORTS]`);
+    }
+    if (openTag) {
+        if (content.includes('// [PROVIDERS]')) {
+            const initialContent = closeTag
+                ? `${openTag}\n      // [PROVIDERS]\n    ${closeTag}`
+                : openTag;
+            content = content.replace('// [PROVIDERS]', initialContent);
+        }
+        else {
+            content = content.replace(/return \(([\s\S]*?)\)/, (match, inner) => {
+                return `return (\n    ${openTag}${inner.trim()}\n    ${closeTag}\n  )`;
+            });
+        }
+    }
+    fs.writeFileSync(filePath, content);
+}
+export function patchViteConfig(filePath, beforeReactPlugin, importLine, pluginLine) {
+    if (!fs.existsSync(filePath))
+        return;
+    let content = fs.readFileSync(filePath, 'utf-8');
+    if (importLine && !content.includes(importLine)) {
+        content = content.replace('// [IMPORTS]', `${importLine}\n// [IMPORTS]`);
+    }
+    if (beforeReactPlugin) {
+        if (pluginLine && !content.includes(pluginLine)) {
+            content = content.replace('// [BEFORE_REACT_PLUGINS]', `${pluginLine},\n    // [BEFORE_REACT_PLUGINS]`);
+        }
+    }
+    else {
+        if (pluginLine && !content.includes(pluginLine)) {
+            content = content.replace('// [AFTER_REACT_PLUGINS]', `${pluginLine},\n    // [AFTER_REACT_PLUGINS]`);
+        }
+    }
+    fs.writeFileSync(filePath, content);
+}
+export function finalizeViteConfig(filePath) {
+    if (!fs.existsSync(filePath))
+        return;
+    let content = fs.readFileSync(filePath, 'utf-8');
+    content = content
+        // Briše marker i sav prazan prostor (redove) oko njega
+        .replace(/\s*\/\/ \[IMPORTS\]\s*/g, '\n')
+        .replace(/\s*\/\/ \[AFTER_REACT_PLUGINS\]\s*/g, '\n')
+        .replace(/\s*\/\/ \[BEFORE_REACT_PLUGINS\]\s*/g, '\n')
+        // Sređuje višestruke prazne redove u jedan
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    fs.writeFileSync(filePath, content + '\n');
+}
+export function finalizeAppFile(filePath) {
+    if (!fs.existsSync(filePath))
+        return;
+    let content = fs.readFileSync(filePath, 'utf-8');
+    content = content
+        .replace(/\s*\/\/ \[IMPORTS\]\s*/g, '\n')
+        .replace(/\s*\/\/ \[PROVIDERS\]\s*/g, '\n')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    fs.writeFileSync(filePath, content + '\n');
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@aditokmo/react-cli-setup",
+  "version": "0.1.0",
+  "description": "A fast React CLI to jumpstart your projects. It sets up your libraries and organizes a scalable folder structure so you can skip the configuration and go straight to coding.",
+  "main": "dist/index.js",
+  "type": "module",
+  "bin": {
+    "react-cli-setup": "./dist/index.js"
+  },
+  "keywords": [
+    "react",
+    "cli",
+    "vite",
+    "boilerplate",
+    "tanstack-router",
+    "tanstack-query",
+    "tanstack-form",
+    "zustand",
+    "shadcn-ui",
+    "tailwind",
+    "project-generator",
+    "react-hook-form",
+    "zod",
+    "enterprise-architecture",
+    "frontend-architecture",
+    "react-architecture"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aditokmo/react-cli-setup.git"
+  },
+  "bugs": {
+    "url": "https://github.com/aditokmo/react-cli-setup/issues"
+  },
+  "homepage": "https://github.com/aditokmo/react-cli-setup#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "author": "aditokmo",
+  "license": "ISC",
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "chalk": "^5.6.2",
+    "fs-extra": "^11.3.3",
+    "ora": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.0.3",
+    "tsx": "^4.19.2",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start:cli": "tsx cli/index.ts",
+    "watch": "tsc --watch"
+  }
+}

package/templates/base/README.md

@@ -0,0 +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 currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+
+## 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/templates/base/eslint.config.js

@@ -0,0 +1,23 @@
+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,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/templates/base/index.html

@@ -0,0 +1,14 @@
+<!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" />
+    <link rel="stylesheet" href="./src/styles/main.css" />
+    <title>vite-project</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/base/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}