initkit 1.1.0

package/src/templates/react.js

@@ -0,0 +1,586 @@
+import fs from 'fs-extra';
+import path from 'path';
+import ora from 'ora';
+import chalk from 'chalk';
+import { getLatestVersion } from '../utils/versionFetcher.js';
+
+/**
+ * Fetch latest version with fallback
+ */
+async function fetchVersion(packageName, fallback = 'latest') {
+  try {
+    const version = await getLatestVersion(packageName);
+    return `^${version}`;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Generate React + Vite project with modern build tooling
+ *
+ * Creates a React single-page application using Vite for:
+ * - Fast HMR (Hot Module Replacement)
+ * - Optimized production builds
+ * - TypeScript or JavaScript support
+ * - Multiple folder structure patterns
+ *
+ * Generated project includes:
+ * - Vite configuration with React plugin
+ * - Folder structure based on preference
+ * - Package.json with React 18+ and Vite dependencies
+ * - README with getting started instructions
+ *
+ * @param {string} projectPath - Absolute path to the project directory
+ * @param {Object} config - User configuration object
+ * @param {string} config.projectName - Name of the project
+ * @param {string} config.language - Programming language ('typescript'|'javascript')
+ * @param {string} [config.folderStructure='feature-based'] - Folder organization pattern
+ *   - 'feature-based': Organize by features/modules (recommended)
+ *   - 'component-based': Organize by component types (pages, components, layouts)
+ *   - 'type-based': Organize by file type (components, hooks, utils, services)
+ * @param {string} config.packageManager - Package manager to use
+ *
+ * @returns {Promise<void>}
+ *
+ * @example
+ * // Create React + Vite project with feature-based structure
+ * await generateReactTemplate('/path/to/project', {
+ *   projectName: 'my-react-app',
+ *   language: 'typescript',
+ *   folderStructure: 'feature-based',
+ *   packageManager: 'npm'
+ * });
+ */
+export async function generateReactTemplate(projectPath, config) {
+  // Create folder structure only
+  await createReactFolderStructure(projectPath, config);
+
+  // Generate package.json
+  await generateReactPackageJson(projectPath, config);
+
+  // Generate essential files (App.jsx, main.jsx, index.css, vite.config)
+  await generateReactEssentialFiles(projectPath, config);
+
+  // Generate README
+  await generateReactReadme(projectPath, config);
+}
+
+async function createReactFolderStructure(projectPath, config) {
+  const srcPath = path.join(projectPath, 'src');
+  const folderStructure = config.folderStructure || 'feature-based';
+
+  if (folderStructure === 'feature-based') {
+    // Feature-based structure
+    const features = ['auth', 'dashboard', 'users'];
+    for (const feature of features) {
+      await fs.ensureDir(path.join(srcPath, 'features', feature, 'components'));
+      await fs.ensureDir(path.join(srcPath, 'features', feature, 'hooks'));
+      await fs.ensureDir(path.join(srcPath, 'features', feature, 'services'));
+      await fs.ensureDir(path.join(srcPath, 'features', feature, 'types'));
+
+      // Barrel export
+      await fs.writeFile(
+        path.join(srcPath, 'features', feature, 'index.ts'),
+        generateFeatureExport(feature)
+      );
+    }
+
+    // Shared directory
+    await fs.ensureDir(path.join(srcPath, 'shared', 'components', 'ui'));
+    await fs.ensureDir(path.join(srcPath, 'shared', 'components', 'layout'));
+    await fs.ensureDir(path.join(srcPath, 'shared', 'hooks'));
+    await fs.ensureDir(path.join(srcPath, 'shared', 'utils'));
+    await fs.ensureDir(path.join(srcPath, 'shared', 'types'));
+
+    await fs.writeFile(
+      path.join(srcPath, 'shared', 'components', 'index.ts'),
+      `// Export shared components\n// TODO: Add your shared components here\n`
+    );
+  } else if (folderStructure === 'component-based') {
+    // Component-based structure
+    await fs.ensureDir(path.join(srcPath, 'components', 'ui'));
+    await fs.ensureDir(path.join(srcPath, 'components', 'layout'));
+    await fs.ensureDir(path.join(srcPath, 'components', 'forms'));
+    await fs.ensureDir(path.join(srcPath, 'hooks'));
+    await fs.ensureDir(path.join(srcPath, 'services'));
+    await fs.ensureDir(path.join(srcPath, 'utils'));
+    await fs.ensureDir(path.join(srcPath, 'types'));
+  } else if (folderStructure === 'atomic') {
+    // Atomic design structure
+    await fs.ensureDir(path.join(srcPath, 'components', 'atoms'));
+    await fs.ensureDir(path.join(srcPath, 'components', 'molecules'));
+    await fs.ensureDir(path.join(srcPath, 'components', 'organisms'));
+    await fs.ensureDir(path.join(srcPath, 'components', 'templates'));
+    await fs.ensureDir(path.join(srcPath, 'pages'));
+    await fs.ensureDir(path.join(srcPath, 'hooks'));
+    await fs.ensureDir(path.join(srcPath, 'services'));
+  }
+
+  // Common directories
+  await fs.ensureDir(path.join(srcPath, 'routes'));
+  await fs.ensureDir(path.join(srcPath, 'lib'));
+  await fs.ensureDir(path.join(projectPath, 'public'));
+}
+
+async function generateReactPackageJson(projectPath, config) {
+  const { language, styling, additionalLibraries = [] } = config;
+  const isTypeScript = language === 'typescript';
+
+  const spinner = ora('Fetching latest package versions...').start();
+
+  try {
+    // Fetch core dependencies
+    const [reactVer, reactDomVer, viteVer, pluginVer] = await Promise.all([
+      fetchVersion('react'),
+      fetchVersion('react-dom'),
+      fetchVersion('vite'),
+      fetchVersion('@vitejs/plugin-react'),
+    ]);
+
+    const dependencies = {
+      react: reactVer,
+      'react-dom': reactDomVer,
+    };
+
+    const devDependencies = {
+      '@vitejs/plugin-react': pluginVer,
+      vite: viteVer,
+    };
+
+    // TypeScript dependencies
+    if (isTypeScript) {
+      const [tsVer, typesReactVer, typesReactDomVer] = await Promise.all([
+        fetchVersion('typescript'),
+        fetchVersion('@types/react'),
+        fetchVersion('@types/react-dom'),
+      ]);
+      devDependencies['typescript'] = tsVer;
+      devDependencies['@types/react'] = typesReactVer;
+      devDependencies['@types/react-dom'] = typesReactDomVer;
+    }
+
+    // Add router
+    if (additionalLibraries.includes('react-router')) {
+      dependencies['react-router-dom'] = await fetchVersion('react-router-dom');
+    }
+
+    // Add Tailwind
+    if (styling === 'tailwind') {
+      devDependencies['tailwindcss'] = await fetchVersion('tailwindcss');
+    }
+
+    // Add libraries
+    if (additionalLibraries.includes('tanstack-query')) {
+      dependencies['@tanstack/react-query'] = await fetchVersion('@tanstack/react-query');
+    }
+
+    if (additionalLibraries.includes('redux-toolkit')) {
+      const [reduxVer, reactReduxVer] = await Promise.all([
+        fetchVersion('@reduxjs/toolkit'),
+        fetchVersion('react-redux'),
+      ]);
+      dependencies['@reduxjs/toolkit'] = reduxVer;
+      dependencies['react-redux'] = reactReduxVer;
+    }
+
+    if (additionalLibraries.includes('zustand')) {
+      dependencies['zustand'] = await fetchVersion('zustand');
+    }
+
+    if (additionalLibraries.includes('jotai')) {
+      dependencies['jotai'] = await fetchVersion('jotai');
+    }
+
+    if (additionalLibraries.includes('axios')) {
+      dependencies['axios'] = await fetchVersion('axios');
+    }
+
+    if (additionalLibraries.includes('zod')) {
+      dependencies['zod'] = await fetchVersion('zod');
+    }
+
+    if (additionalLibraries.includes('react-hook-form')) {
+      const [formVer, resolversVer] = await Promise.all([
+        fetchVersion('react-hook-form'),
+        fetchVersion('@hookform/resolvers'),
+      ]);
+      dependencies['react-hook-form'] = formVer;
+      dependencies['@hookform/resolvers'] = resolversVer;
+    }
+
+    if (additionalLibraries.includes('framer-motion')) {
+      dependencies['framer-motion'] = await fetchVersion('framer-motion');
+    }
+
+    if (additionalLibraries.includes('react-icons')) {
+      dependencies['react-icons'] = await fetchVersion('react-icons');
+    }
+
+    if (additionalLibraries.includes('radix-ui')) {
+      const [dialogVer, dropdownVer, selectVer, slotVer] = await Promise.all([
+        fetchVersion('@radix-ui/react-dialog'),
+        fetchVersion('@radix-ui/react-dropdown-menu'),
+        fetchVersion('@radix-ui/react-select'),
+        fetchVersion('@radix-ui/react-slot'),
+      ]);
+      Object.assign(dependencies, {
+        '@radix-ui/react-dialog': dialogVer,
+        '@radix-ui/react-dropdown-menu': dropdownVer,
+        '@radix-ui/react-select': selectVer,
+        '@radix-ui/react-slot': slotVer,
+      });
+    }
+
+    spinner.succeed(chalk.green('Fetched latest versions'));
+
+    const packageJson = {
+      name: config.projectName,
+      private: true,
+      version: '0.1.0',
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+        build: isTypeScript ? 'tsc && vite build' : 'vite build',
+        preview: 'vite preview',
+      },
+      dependencies,
+      devDependencies,
+    };
+
+    await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
+  } catch (error) {
+    spinner.fail(chalk.yellow('Could not fetch versions, using fallbacks'));
+
+    // Fallback with latest tag
+    const dependencies = { react: 'latest', 'react-dom': 'latest' };
+    const devDependencies = {
+      '@vitejs/plugin-react': 'latest',
+      vite: 'latest',
+      ...(isTypeScript && {
+        typescript: 'latest',
+        '@types/react': 'latest',
+        '@types/react-dom': 'latest',
+      }),
+    };
+
+    const packageJson = {
+      name: config.projectName,
+      private: true,
+      version: '0.1.0',
+      type: 'module',
+      scripts: {
+        dev: 'vite',
+        build: isTypeScript ? 'tsc && vite build' : 'vite build',
+        preview: 'vite preview',
+      },
+      dependencies,
+      devDependencies,
+    };
+
+    await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
+  }
+}
+
+async function generateReactEssentialFiles(projectPath, config) {
+  const { language } = config;
+  const isTypeScript = language === 'typescript';
+  const ext = isTypeScript ? 'tsx' : 'jsx';
+  const srcPath = path.join(projectPath, 'src');
+
+  // Create App component
+  const appContent = `import { useState } from 'react'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <h1>Welcome to ${config.projectName}</h1>
+        <div className="card">
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is {count}
+          </button>
+          <p>
+            Edit <code>src/App.${ext}</code> and save to test HMR
+          </p>
+        </div>
+        <p className="read-the-docs">
+          Click on the Vite and React logos to learn more
+        </p>
+      </div>
+    </>
+  )
+}
+
+export default App
+`;
+
+  await fs.writeFile(path.join(srcPath, `App.${ext}`), appContent);
+
+  // Create main entry point
+  const mainContent = `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.${ext}'
+
+createRoot(document.getElementById('root')${isTypeScript ? '!' : ''}).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+`;
+
+  await fs.writeFile(path.join(srcPath, `main.${ext}`), mainContent);
+
+  // Create index.css
+  const indexCssContent = `:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`;
+
+  await fs.writeFile(path.join(srcPath, 'index.css'), indexCssContent);
+
+  // Create App.css
+  const appCssContent = `#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`;
+
+  await fs.writeFile(path.join(srcPath, 'App.css'), appCssContent);
+
+  // Create vite.config
+  const viteConfigContent = isTypeScript
+    ? `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
+`
+    : `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
+`;
+
+  await fs.writeFile(
+    path.join(projectPath, `vite.config.${isTypeScript ? 'ts' : 'js'}`),
+    viteConfigContent
+  );
+
+  // Create index.html in project root
+  const indexHtmlContent = `<!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>${config.projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.${ext}"></script>
+  </body>
+</html>
+`;
+
+  await fs.writeFile(path.join(projectPath, 'index.html'), indexHtmlContent);
+
+  // Create .gitignore
+  const gitignoreContent = `# 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?
+`;
+
+  await fs.writeFile(path.join(projectPath, '.gitignore'), gitignoreContent);
+}
+
+async function generateReactReadme(projectPath, config) {
+  const { projectName, folderStructure, language, styling, packageManager } = config;
+
+  const readme = `# ${projectName}
+
+Created with InitKit CLI
+
+## Setup
+
+1. Install dependencies:
+\`\`\`bash
+${packageManager} install
+\`\`\`
+
+2. Run the development server:
+\`\`\`bash
+${packageManager} ${packageManager === 'npm' ? 'run ' : ''}dev
+\`\`\`
+
+3. Open [http://localhost:3000](http://localhost:3000)
+
+## Tech Stack
+
+- **React 18** - UI library
+- **Vite 6** - Build tool${language === 'typescript' ? '\n- **TypeScript** - Type safety' : ''}${styling === 'tailwind' ? '\n- **Tailwind CSS v4** - Styling' : ''}
+
+## Folder Structure
+
+\`\`\`
+src/
+${
+  folderStructure === 'feature-based'
+    ? `├── features/       # Feature modules
+│   ├── auth/       # Authentication
+│   ├── dashboard/  # Dashboard
+│   └── users/      # Users
+├── shared/         # Shared code`
+    : folderStructure === 'atomic'
+      ? `├── components/     # Atomic design
+│   ├── atoms/      # Basic UI elements
+│   ├── molecules/  # Simple components
+│   ├── organisms/  # Complex components
+│   └── templates/  # Page templates
+├── pages/          # Page components`
+      : `├── components/     # React components
+│   ├── ui/         # UI components
+│   └── layout/     # Layout components
+├── hooks/          # Custom hooks
+├── services/       # API services`
+}
+├── routes/         # Routing configuration
+├── lib/            # Utilities
+└── public/         # Static files
+\`\`\`
+
+## Next Steps
+
+1. Run \`npm create vite@latest . -- --template react${language === 'typescript' ? '-ts' : ''}\` to initialize Vite${styling === 'tailwind' ? '\n2. Install Tailwind v4: `' + packageManager + (packageManager === 'npm' ? ' install' : ' add') + ' tailwindcss@next`' : ''}
+3. Start building in \`src/features/\`
+4. Add environment variables in \`.env\`
+
+---
+
+Built with InitKit
+`;
+
+  await fs.writeFile(path.join(projectPath, 'README.md'), readme);
+}
+
+function generateFeatureExport(featureName) {
+  return `// ${featureName.toUpperCase()} Feature
+
+// TODO: Export your components
+// export { ${featureName.charAt(0).toUpperCase() + featureName.slice(1)}Component } from './components/${featureName.charAt(0).toUpperCase() + featureName.slice(1)}Component';
+
+// TODO: Export your hooks
+// export { use${featureName.charAt(0).toUpperCase() + featureName.slice(1)} } from './hooks/use${featureName.charAt(0).toUpperCase() + featureName.slice(1)}';
+
+// TODO: Export your services
+// export * from './services/${featureName}Service';
+
+// TODO: Export your types
+// export type * from './types/${featureName}.types';
+`;
+}