build-app-with 2.0.0

package/src/generators/vite/structures/feature-based-structure.js

@@ -0,0 +1,342 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { generateAppComponent } from '../components/app-component.js';
+import { generateMainFile } from '../components/main-file.js';
+import { generateIndexCSS } from '../styles/index-css.js';
+
+export async function generateFeatureBasedStructure(projectPath, answers) {
+  const srcPath = path.join(projectPath, 'src');
+  await fs.ensureDir(srcPath);
+
+  // Generate main entry file
+  const mainFile = generateMainFile(answers);
+  const mainExtension = answers.typescript ? 'tsx' : 'jsx';
+  await fs.writeFile(path.join(srcPath, `main.${mainExtension}`), mainFile);
+
+  // Generate App component
+  const appComponent = generateAppComponent(answers);
+  const appExtension = answers.typescript ? 'tsx' : 'jsx';
+  await fs.writeFile(path.join(srcPath, `App.${appExtension}`), appComponent);
+
+  // Generate CSS file
+  const indexCSS = generateIndexCSS(answers);
+  await fs.writeFile(path.join(srcPath, 'index.css'), indexCSS);
+
+  // Create feature-based directories
+  const directories = [
+    'components/common',
+    'features/auth',
+    'features/dashboard',
+    'hooks',
+    'services',
+    'utils',
+    'types'
+  ];
+
+  for (const dir of directories) {
+    await fs.ensureDir(path.join(srcPath, dir));
+  }
+
+  // Generate sample files for each feature
+  await generateAuthFeature(srcPath, answers);
+  await generateDashboardFeature(srcPath, answers);
+  await generateCommonComponents(srcPath, answers);
+  await generateHooks(srcPath, answers);
+  await generateServices(srcPath, answers);
+  await generateUtils(srcPath, answers);
+  
+  if (answers.typescript) {
+    await generateTypes(srcPath);
+  }
+}
+
+async function generateAuthFeature(srcPath, answers) {
+  const authPath = path.join(srcPath, 'features/auth');
+  const ext = answers.typescript ? 'tsx' : 'jsx';
+  
+  const loginComponent = answers.typescript ? `import React from 'react';
+
+const Login: React.FC = () => {
+  return (
+    <div className="login">
+      <h2>Login</h2>
+      <form>
+        <input type="email" placeholder="Email" />
+        <input type="password" placeholder="Password" />
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;
+` : `import React from 'react';
+
+const Login = () => {
+  return (
+    <div className="login">
+      <h2>Login</h2>
+      <form>
+        <input type="email" placeholder="Email" />
+        <input type="password" placeholder="Password" />
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;
+`;
+
+  await fs.writeFile(path.join(authPath, `Login.${ext}`), loginComponent);
+}
+
+async function generateDashboardFeature(srcPath, answers) {
+  const dashboardPath = path.join(srcPath, 'features/dashboard');
+  const ext = answers.typescript ? 'tsx' : 'jsx';
+  
+  const dashboardComponent = answers.typescript ? `import React from 'react';
+
+const Dashboard: React.FC = () => {
+  return (
+    <div className="dashboard">
+      <h1>Dashboard</h1>
+      <p>Welcome to your dashboard!</p>
+    </div>
+  );
+};
+
+export default Dashboard;
+` : `import React from 'react';
+
+const Dashboard = () => {
+  return (
+    <div className="dashboard">
+      <h1>Dashboard</h1>
+      <p>Welcome to your dashboard!</p>
+    </div>
+  );
+};
+
+export default Dashboard;
+`;
+
+  await fs.writeFile(path.join(dashboardPath, `Dashboard.${ext}`), dashboardComponent);
+}
+
+async function generateCommonComponents(srcPath, answers) {
+  const commonPath = path.join(srcPath, 'components/common');
+  const ext = answers.typescript ? 'tsx' : 'jsx';
+  
+  const headerComponent = answers.typescript ? `import React from 'react';
+
+const Header: React.FC = () => {
+  return (
+    <header className="header">
+      <h1>My App</h1>
+      <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
+` : `import React from 'react';
+
+const Header = () => {
+  return (
+    <header className="header">
+      <h1>My App</h1>
+      <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
+`;
+
+  await fs.writeFile(path.join(commonPath, `Header.${ext}`), headerComponent);
+}
+
+async function generateHooks(srcPath, answers) {
+  const hooksPath = path.join(srcPath, 'hooks');
+  const ext = answers.typescript ? 'ts' : 'js';
+  
+  const useLocalStorage = answers.typescript ? `import { useState, useEffect } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}
+` : `import { useState, useEffect } from 'react';
+
+export function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
+`;
+
+  await fs.writeFile(path.join(hooksPath, `useLocalStorage.${ext}`), useLocalStorage);
+}
+
+async function generateServices(srcPath, answers) {
+  const servicesPath = path.join(srcPath, 'services');
+  const ext = answers.typescript ? 'ts' : 'js';
+  
+  const apiService = answers.typescript ? `const API_BASE_URL = 'https://api.example.com';
+
+export class ApiService {
+  static async get<T>(endpoint: string): Promise<T> {
+    const response = await fetch(\`\${API_BASE_URL}\${endpoint}\`);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  }
+
+  static async post<T>(endpoint: string, data: any): Promise<T> {
+    const response = await fetch(\`\${API_BASE_URL}\${endpoint}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  }
+}
+` : `const API_BASE_URL = 'https://api.example.com';
+
+export class ApiService {
+  static async get(endpoint) {
+    const response = await fetch(\`\${API_BASE_URL}\${endpoint}\`);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  }
+
+  static async post(endpoint, data) {
+    const response = await fetch(\`\${API_BASE_URL}\${endpoint}\`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  }
+}
+`;
+
+  await fs.writeFile(path.join(servicesPath, `api.${ext}`), apiService);
+}
+
+async function generateUtils(srcPath, answers) {
+  const utilsPath = path.join(srcPath, 'utils');
+  const ext = answers.typescript ? 'ts' : 'js';
+  
+  const helpers = answers.typescript ? `export const formatDate = (date: Date): string => {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
+` : `export const formatDate = (date) => {
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+export const debounce = (func, wait) => {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
+`;
+
+  await fs.writeFile(path.join(utilsPath, `helpers.${ext}`), helpers);
+}
+
+async function generateTypes(srcPath) {
+  const typesPath = path.join(srcPath, 'types');
+  
+  const indexTypes = `export interface User {
+  id: string;
+  name: string;
+  email: string;
+  createdAt: string;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  message: string;
+  success: boolean;
+}
+`;
+
+  await fs.writeFile(path.join(typesPath, 'index.ts'), indexTypes);
+}

package/src/generators/vite/structures/simple-structure.js

@@ -0,0 +1,62 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { generateAppComponent } from '../components/app-component.js';
+import { generateMainFile } from '../components/main-file.js';
+import { generateIndexCSS } from '../styles/index-css.js';
+
+export async function generateSimpleStructure(projectPath, answers) {
+  const srcPath = path.join(projectPath, 'src');
+  await fs.ensureDir(srcPath);
+
+  // Generate main entry file
+  const mainFile = generateMainFile(answers);
+  const mainExtension = answers.typescript ? 'tsx' : 'jsx';
+  await fs.writeFile(path.join(srcPath, `main.${mainExtension}`), mainFile);
+
+  // Generate App component
+  const appComponent = generateAppComponent(answers);
+  const appExtension = answers.typescript ? 'tsx' : 'jsx';
+  await fs.writeFile(path.join(srcPath, `App.${appExtension}`), appComponent);
+
+  // Generate CSS file
+  const indexCSS = generateIndexCSS(answers);
+  await fs.writeFile(path.join(srcPath, 'index.css'), indexCSS);
+
+  // Generate a simple components directory
+  const componentsPath = path.join(srcPath, 'components');
+  await fs.ensureDir(componentsPath);
+
+  // Create a sample component
+  const sampleComponent = answers.typescript ? `import React from 'react';
+
+interface WelcomeProps {
+  name: string;
+}
+
+const Welcome: React.FC<WelcomeProps> = ({ name }) => {
+  return (
+    <div className="welcome">
+      <h2>Welcome, {name}!</h2>
+      <p>Your React app is ready to go.</p>
+    </div>
+  );
+};
+
+export default Welcome;
+` : `import React from 'react';
+
+const Welcome = ({ name }) => {
+  return (
+    <div className="welcome">
+      <h2>Welcome, {name}!</h2>
+      <p>Your React app is ready to go.</p>
+    </div>
+  );
+};
+
+export default Welcome;
+`;
+
+  const componentExtension = answers.typescript ? 'tsx' : 'jsx';
+  await fs.writeFile(path.join(componentsPath, `Welcome.${componentExtension}`), sampleComponent);
+}

package/src/generators/vite/styles/index-css.js

@@ -0,0 +1,130 @@
+export function generateIndexCSS(answers) {
+  let baseStyles = `: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;
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+`;
+
+  // Add Tailwind directives if Tailwind is selected
+  if (answers.cssFramework === 'tailwind') {
+    baseStyles = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+${baseStyles}`;
+  }
+
+  // Add custom styles based on CSS framework
+  if (answers.cssFramework === 'vanilla') {
+    baseStyles += `
+.app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.container {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  max-width: 800px;
+  width: 100%;
+}
+
+.container h1 {
+  color: #333;
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.container p {
+  color: #666;
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin: 30px 0;
+}
+
+.feature-card {
+  padding: 20px;
+  border: 1px solid #e1e5e9;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+  font-size: 2rem;
+  margin-bottom: 10px;
+}
+
+.feature-card h3 {
+  color: #333;
+  margin: 10px 0;
+}
+
+.feature-card p {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .container h1 {
+    font-size: 2rem;
+  }
+  
+  .features {
+    grid-template-columns: 1fr;
+  }
+}
+`;
+  }
+
+  return baseStyles;
+}

package/src/generators/vite/tailwind-config-generator.js

@@ -0,0 +1,14 @@
+export function generateTailwindConfig(answers) {
+  return `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`;
+}

package/src/generators/vite/vite-config-generator.js

@@ -0,0 +1,22 @@
+export function generateViteConfig(answers) {
+  const imports = [`import { defineConfig } from 'vite'`, `import react from '@vitejs/plugin-react'`];
+  const plugins = ['react()'];
+
+  const config = `${imports.join('\n')}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [${plugins.join(', ')}],
+  server: {
+    port: 3000,
+    open: true
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true
+  }
+})
+`;
+
+  return config;
+}