@aditokmo/create-react-project 0.2.0

package/README.md

@@ -0,0 +1,150 @@
+# @aditokmo/react-setup-cli 🚀
+
+[![npm version](https://img.shields.io/npm/v/@aditokmo/create-react-project?color=blue)](https://www.npmjs.com/package/@aditokmo/create-react-project)
+
+A React CLI built on top of Vite that helps you build and structure projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
+
+**Note:** This package is a CLI tool. Do not install it with `npm i`. Instead check `Quick Start` down below.
+
+<br>
+
+## Quick Start
+
+Run the following command in your terminal to start CLI
+
+```bash
+# Using PNPM
+pnpm create @aditokmo/react-project
+
+# Using NPM
+npm create @aditokmo/react-project
+
+# Using Yarn
+yarn create @aditokmo/react-project
+```
+
+<br>
+
+## How it saves your time
+
+- **Minimal Installation:** No more manual `npm install` for 10 different packages. The CLI detects your package manager and handles everything.
+- **Architecture:** Instead of losing time on folder structure, you get a structure that is ready for large-scale production.
+- **Smart Boilerplate Injection:** It doesn't just create files, it also wires them following best practices from documentation.
+
+<br>
+
+## Use Cases when this CLI is useful:
+
+- **Starting a Professional Project:** When you need a project that follows "Clean Architecture" and industry standards from the very first commit.
+- **Focusing on a Specific Feature:** When you want to test a new library or a specific piece of logic, but you need a proper environment to do it. This CLI lets you focus on what you are testing instead of wasting time on a setup.
+- **Prototyping & MVP:** When you have a startup idea and want to to build actual features right away without sacrificing code quality.
+- **Hackathons:** When every second counts. You can get all your configuration and setup ready before the competition start.
+
+<br>
+
+## About Arhitecture
+
+### Folder Structure
+
+- **Feature-Based**: This architecture uses a modular approach to help you build large-scale projects. Instead of mixing all components and hooks into global folders, everything is grouped by domain, such as Auth or Dashboard. This method makes it much easier to navigate the codebase and ensures your project remains maintainable as it grows.
+
+- **Pages**: Comming soon
+
+### Client State Management
+
+- **Zustand** is currently the only option in CLI for global state management. It is the most popular and easiest-to-use library today. I believe Redux is overkill for most modern projects. Most "global state" is now handled as server-state by TanStack Query. Global state should be reserved for things like authentication and UI stuff, and Zustand handles this perfectly with zero boilerplate.
+
+### Server State Management
+
+- **TanStack Query** is integrated to handle server-state management. It is optional, but if selected, the CLI automatically wires up the necessary providers and configurations so you can start fetching data immediately. If you select to not use react query, you still get a traditional boilerplate for manual data handling.
+
+### Axios
+
+The CLI generates a pre-configured Axios client that serves as your central API bridge. It includes ready-to-use interceptors for handling authorization tokens and global error responses, saving you from writing the same repetitive setup every time. Axios is set by default beacause it is better choice then fetch, Axios is more user-friendly, has better error handling out of the box, and is overall a safer and more robust choice for production apps.
+
+### Styling
+
+You can choose between **CSS**, **SCSS**, or **TailwindCSS**. While I personally recommend Tailwind for modern and faster development, the CLI ensures that regardless of your choice, the project is configured with a global styles directory and a consistent entry point. If you select TailwindCSS you will also have option to use Shadcn/UI, and with that you will have option to choose components that you want to install instead of doing it manually.
+
+### Routing
+
+- **React Router** is the industry standard that most developers are familiar with.
+
+- **TanStack Router** is included for those who want a fully type-safe routing experience with built-in data loading capabilities. 
+
+Whichever you choose, the CLI doesn't just install the library it will generate a `routes/` directory system to help you easily separate your public pages from protected pages.
+
+### Package Manager Detection
+
+To make the workflow even smoother, the tool has an automatic package manager detector. It identifies whether you are using **npm**, **pnpm**, or **yarn** based on the command you used to execute the CLI, and it handles all installations using your preferred package manager to ensure consistency and avoid conflicts.
+
+<br>
+
+## 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.
+
+### Feature-Based (modules)
+
+```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)
+|   ├── common/         # Shared components & pages (404 Page, Navbar, Sidebar)
+│   │   ├── pages/
+│   │   └── components/
+│   └── auth/           # Example: Auth module
+│       ├── components/
+│       ├── hooks/
+│       ├── pages/
+│       ├── services/
+│       └── types/
+├── store/              # Global State Managemenet (Zustand)
+│   ├── useAuthStore.ts
+│   └── useThemeStore.ts
+└── utils/              # Helper functions
+```
+
+<br>
+
+## 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**          |                                         |
+
+<br>
+
+## Future of CLI
+
+
+- Options to choose between React, Next.js and TanStack Start
+- Testing tools
+- i18next pre-setup.
+- Supabase & Firebase integration templates
+- Global custom hooks & helper functions
+- Pre-commit linters
+- Github Action workflow
+- TanStack Table (if your app has some kind of tables)
+
+<br>

package/dist/index.js

@@ -0,0 +1,129 @@
+#!/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, detectPackageManager, patchPackageJsonFile, patchFileContent } from './utils.js';
+import { collectDependencies } from './installers.js';
+import { fileURLToPath } from 'url';
+import { FONT_QUERIES } from './mapper.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const baseDeps = ['react', 'react-dom'];
+const baseDevDeps = [
+    'vite',
+    'typescript',
+    '@types/node',
+    '@types/react',
+    '@types/react-dom',
+    '@vitejs/plugin-react-swc',
+    'eslint',
+    '@eslint/js',
+    'eslint-plugin-react-hooks',
+    'eslint-plugin-react-refresh',
+    'globals',
+    'typescript-eslint'
+];
+async function main() {
+    console.log('⚛️ Welcome to React CLI Setup by github/aditokmo');
+    let projectDir = '';
+    const originalDirectory = process.cwd();
+    try {
+        const answers = await askQuestions();
+        const packageManager = detectPackageManager();
+        const installAction = packageManager === 'yarn' ? 'add' : 'install';
+        projectDir = path.join(process.cwd(), answers.projectName);
+        const templateRoot = path.join(__dirname, '../templates');
+        const appFilePath = path.join(projectDir, 'src', 'App.tsx');
+        const indexHTMLPath = path.join(projectDir, 'index.html');
+        const notFoundPath = path.join(projectDir, 'src/modules/common/pages/NotFound.tsx');
+        const viteConfigPath = path.join(projectDir, 'vite.config.ts');
+        fs.ensureDirSync(projectDir);
+        copyTemplate(path.join(templateRoot, 'base'), projectDir);
+        patchPackageJsonFile(path.join(projectDir, 'package.json'), answers.projectName);
+        // 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'));
+        }
+        if (answers.style === 'scss') {
+            copyTemplate(path.join(templateRoot, 'styles', 'scss', 'src'), path.join(projectDir, 'src/styles'));
+            patchFileContent(notFoundPath, "import '@/styles/404.css'", "import '@/styles/404.scss'");
+            patchFileContent(indexHTMLPath, '<link rel="stylesheet" href="./src/styles/main.css" />', '<link rel="stylesheet" href="./src/styles/main.scss" />');
+        }
+        // Fonts
+        if (answers?.fonts && answers.fonts.length > 0) {
+            const fontString = answers.fonts
+                .map(name => FONT_QUERIES[name])
+                .join('&');
+            const url = `https://fonts.googleapis.com/css2?${fontString}&display=swap`;
+            const content = `
+                <link rel="preconnect" href="https://fonts.googleapis.com">
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+                <link href="${url}" rel="stylesheet">`;
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', content);
+        }
+        else {
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', '');
+        }
+        // State Management
+        if (answers.reactQuery) {
+            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'provider'), path.join(projectDir, 'src/providers'));
+            copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'hook'), path.join(projectDir, 'src/modules/auth/hooks'));
+            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, packageManager);
+        const allDeps = [...baseDeps, ...dependency];
+        const allDevDeps = [...baseDevDeps, ...devDependency];
+        process.chdir(projectDir);
+        console.log(`📦 Initializing ${packageManager} project...`);
+        execSync(`${packageManager} install`, { stdio: 'inherit' });
+        if (allDeps.length) {
+            console.log('📦 Installing dependencies...');
+            execSync(`${packageManager} ${installAction} ${allDeps.join(' ')}`, { stdio: 'inherit' });
+        }
+        if (allDevDeps.length) {
+            console.log('📦 Installing dev dependencies...');
+            execSync(`${packageManager} ${installAction} -D ${allDevDeps.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} && ${packageManager} run dev`);
+    }
+    catch (error) {
+        console.error('\n❌ Error while creating a project:');
+        console.error(`👉 ${error.message}`);
+        process.chdir(originalDirectory);
+        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,30 @@
+import { installers } from './mapper.js';
+import { axiosInstaller } from './packages.js';
+export function collectDependencies(answers, packageManager) {
+    const dependency = new Set();
+    const devDependency = new Set();
+    const cmd = [];
+    const dlx = packageManager === 'npm' ? 'npx --yes' : `${packageManager} dlx`;
+    // Default base packages
+    axiosInstaller.dependency?.forEach(d => dependency.add(d));
+    // Packages from answers
+    Object.entries(answers).forEach(([key, value]) => {
+        if (Array.isArray(value))
+            return;
+        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(`${dlx} shadcn@latest init -d`);
+        if (answers.shadcnComponents && answers.shadcnComponents.length > 0) {
+            const componentsStr = answers.shadcnComponents.join(' ');
+            cmd.push(`${dlx} shadcn@latest add ${componentsStr} -y -o`);
+        }
+    }
+    return {
+        dependency: Array.from(dependency),
+        devDependency: Array.from(devDependency),
+        cmd
+    };
+}

package/dist/mapper.js

@@ -0,0 +1,28 @@
+import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, scssInstaller, 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,
+    'scss': scssInstaller,
+    'react-icons': reactIconsInstaller,
+    'font-awesome': fontAwesomeIconsInstaller,
+    'phosphor-icons': phosphorIconsInstaller,
+    'react-hot-toast': reactHotToastInstaller,
+    'react-toastify': reactToastifyInstaller,
+    'sonner': sonnerInstaller,
+    'react-hook-form': reactFormHookInstaller,
+    'tanstack-form': tanstackFormInstaller,
+    'zod': zodInstaller,
+    'yup': yupInstaller,
+};
+export const FONT_QUERIES = {
+    "geist": "family=Geist:wght@100..900",
+    "inter": "family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900",
+    "lato": "family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900",
+    "montserrat": "family=Montserrat:ital,wght@0,100..900;1,100..900",
+    "open-sans": "family=Open+Sans:ital,wght@0,300..800;1,300..800",
+    "poppins": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",
+    "roboto": "family=Roboto:ital,wght@0,100..900;1,100..900"
+};

package/dist/packages.js

@@ -0,0 +1,62 @@
+// 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'],
+};
+export const scssInstaller = {
+    devDependency: ['sass']
+};
+// 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'],
+};
+export const phosphorIconsInstaller = {
+    dependency: ['phosphor-react'],
+};
+// Toast
+export const reactHotToastInstaller = {
+    dependency: ['react-hot-toast'],
+};
+export const reactToastifyInstaller = {
+    dependency: ['react-toastify'],
+};
+export const sonnerInstaller = {
+    dependency: ['sonner'],
+};
+// 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,123 @@
+import { group, text, select, confirm, isCancel, cancel, multiselect } from '@clack/prompts';
+export async function askQuestions() {
+    const results = await group({
+        projectName: () => text({
+            message: 'Project name:',
+            placeholder: 'my-app',
+        }),
+        style: () => select({
+            message: 'Choose styling:',
+            options: [
+                { value: 'tailwind', label: 'Tailwind' },
+                { value: 'css', label: 'CSS' },
+                { value: 'scss', label: 'SCSS' },
+            ],
+        }),
+        shadcn: ({ results }) => {
+            if (results.style !== 'tailwind')
+                return Promise.resolve(false);
+            return confirm({ message: 'Include Shadcn UI?' });
+        },
+        shadcnComponents: ({ results }) => {
+            if (!results.shadcn)
+                return Promise.resolve([]);
+            return multiselect({
+                message: 'Use space to select shadcn/ui components to install:',
+                options: [
+                    { value: 'button', label: 'Button' },
+                    { value: 'input', label: 'Input' },
+                    { value: 'card', label: 'Card' },
+                    { value: 'dialog', label: 'Dialog' },
+                    { value: 'sheet', label: 'Sheet' },
+                    { value: 'dropdown-menu', label: 'Dropdown Menu' },
+                    { value: 'table', label: 'Table' },
+                    { value: 'checkbox', label: 'Checkbox' },
+                    { value: 'avatar', label: 'Avatar' },
+                    { value: 'badge', label: 'Badge' },
+                ],
+                required: false,
+            });
+        },
+        fonts: () => multiselect({
+            message: 'Use space to select your fonts',
+            options: [
+                { value: 'geist', label: 'Geist' },
+                { value: 'inter', label: 'Inter' },
+                { value: 'lato', label: 'Lato' },
+                { value: 'montserrat', label: 'Montserrat' },
+                { value: 'open-sans', label: 'Open Sans' },
+                { value: 'poppins', label: 'Poppins' },
+                { value: 'roboto', label: 'Roboto' }
+            ],
+            required: false
+        }),
+        icons: () => select({
+            message: 'Choose icon library:',
+            options: [
+                { value: 'react-icons', label: 'React Icons' },
+                { value: 'font-awesome', label: 'Font Awesome' },
+                { value: 'phosphor-icons', label: 'Phosphor Icons' }
+            ]
+        }),
+        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.shadcnComponents) ||
+        isCancel(results.icons) ||
+        isCancel(results.toast) ||
+        isCancel(results.reactQuery) ||
+        isCancel(results.fonts)) {
+        cancel('Setup cancelled.');
+        process.exit(0);
+    }
+    return {
+        ...results,
+        projectName: results.projectName || 'my-app',
+        shadcn: results.shadcn,
+        shadcnComponents: (results.shadcnComponents ?? []),
+        fonts: (results.fonts ?? [])
+    };
+}

package/dist/types.js

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

package/dist/utils.js

@@ -0,0 +1,101 @@
+import fs from 'fs-extra';
+export function copyTemplate(src, path) {
+    if (!fs.existsSync(src)) {
+        console.warn(`⚠️ Template folder ${src} doesn't exist`);
+        return;
+    }
+    fs.copySync(src, path, { overwrite: true });
+}
+export function patchFileContent(filePath, searchValue, replaceValue) {
+    if (!fs.existsSync(filePath))
+        return;
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const newContent = content.replace(searchValue, replaceValue);
+    fs.writeFileSync(filePath, newContent);
+}
+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 patchPackageJsonFile(filePath, projectName) {
+    if (!fs.existsSync(filePath))
+        return;
+    try {
+        const pkg = fs.readJsonSync(filePath);
+        pkg.name = projectName;
+        fs.writeJsonSync(filePath, pkg, { spaces: 2 });
+    }
+    catch (error) {
+        console.error('⚠️ Could not update package.json name');
+    }
+}
+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');
+}
+export function detectPackageManager() {
+    const userAgent = process.env.npm_config_user_agent || '';
+    if (userAgent.includes('pnpm'))
+        return 'pnpm';
+    if (userAgent.includes('yarn'))
+        return 'yarn';
+    return 'npm';
+}