create-template-html-css 2.1.0 → 2.2.0

package/src/react-templates.js

@@ -1,8 +1,30 @@
+/**
+ * React Templates Generator Module
+ * 
+ * Generates complete React project files including App.jsx, index files,
+ * configuration files, and documentation for component-based projects.
+ * 
+ * @module react-templates
+ * @requires react-component-templates
+ */
+
+import { 
+  getComponentTemplate, 
+  getComponentImports,
+  hasComponent,
+  getAllComponentNames
+} from './react-component-templates.js';
+
 // ============================================================================
 // CONSTANTS
 // ============================================================================
 
-// Dependencies versions
+/**
+ * React and Vite version constants
+ * Ensures consistent dependency versions across generated projects
+ * 
+ * @constant {string}
+ */
 const REACT_VERSION = "^18.2.0";
 const VITE_VERSION = "^5.0.0";
 const VITE_REACT_PLUGIN_VERSION = "^4.2.0";
@@ -13,22 +35,62 @@ const VITE_REACT_PLUGIN_VERSION = "^4.2.0";
 
 /**
  * Create App.jsx template wrapper
- * @param {string} componentName - Component name (PascalCase)
- * @param {string} additionalImports - Additional imports from React (e.g., "useState, useEffect")
- * @param {string} content - JSX content inside App div
- * @returns {string} Complete App.jsx code
+ * 
+ * Wraps component usage examples in a complete React App component structure,
+ * including proper imports and export statements.
+ * 
+ * @param {string} componentName - Component name in PascalCase (e.g., 'Button')
+ * @param {string} additionalImports - React hooks to import (e.g., 'useState, useEffect')
+ * @param {string} content - JSX content for the App component body
+ * @returns {string} Complete App.jsx file content
+ * 
+ * @example
+ * createAppTemplate('Button', 'useState', 'return <div>...</div>');
  */
 function createAppTemplate(componentName, additionalImports = '', content) {
   const reactImports = additionalImports 
-    ? `import React, { ${additionalImports} } from 'react';`
-    : `import React from 'react';`;
+    ? `import { ${additionalImports} } from 'react';`
+    : '';
+    
+  const importsSection = reactImports ? `${reactImports}\n` : '';
+  return `${importsSection}import ${componentName} from './components/${componentName}/${componentName}';
+import './components/${componentName}/${componentName}.css';
+
+function App() {
+${content}
+}
+
+export default App;`;
+}
+
+/**
+ * Create App.jsx template with Lazy Loading
+ * 
+ * Wraps component usage in React.lazy() and Suspense for code splitting.
+ * Reduces initial bundle size by loading components on demand.
+ * 
+ * @param {string} componentName - Component name in PascalCase
+ * @param {string} additionalImports - React hooks to import
+ * @param {string} content - JSX content for the App component body
+ * @returns {string} Complete App.jsx with lazy loading
+ */
+function createAppTemplateWithLazyLoading(componentName, additionalImports = '', content) {
+  const reactImports = additionalImports 
+    ? `import { lazy, Suspense, ${additionalImports} } from 'react';`
+    : `import { lazy, Suspense } from 'react';`;
     
   return `${reactImports}
-import ${componentName} from './components/${componentName}/${componentName}';
 import './components/${componentName}/${componentName}.css';
 
+// Lazy load component for code splitting
+const ${componentName} = lazy(() => import('./components/${componentName}/${componentName}'));
+
 function App() {
+  return (
+    <Suspense fallback={<div className="loading">Loading...</div>}>
 ${content}
+    </Suspense>
+  );
 }
 
 export default App;`;
@@ -39,125 +101,47 @@ export default App;`;
 // ============================================================================
 
 /**
- * Generate App.jsx content
+ * Generate App.jsx content with component examples
+ * 
+ * Creates a complete App.jsx file that demonstrates the component's features.
+ * Falls back to a basic example if the component template is not found.
+ * 
+ * @param {string} componentName - Component name in PascalCase (e.g., 'MyButton')
+ * @param {string} componentKebab - Component name in kebab-case (e.g., 'my-button')
+ * @param {object} options - Generation options
+ * @param {boolean} options.lazyLoad - Enable lazy loading with Suspense
+ * @returns {string} Complete App.jsx file content
+ * 
+ * @example
+ * const appContent = generateAppJsx('Button', 'button', { lazyLoad: true });
  */
-function generateAppJsx(componentName, componentKebab) {
-  // Component-specific content (inside App function)
-  const componentContent = {
-    button: `  const handleClick = () => {
-    alert('Button clicked!');
-  };
-
-  return (
-    <div className="App" style={{ 
-      padding: '40px',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      backgroundColor: '#f5f5f5',
-      minHeight: '100vh'
-    }}>
-      <h1 style={{ marginBottom: '30px', color: '#333' }}>${componentName} Component Examples</h1>
-      
-      <div style={{ marginBottom: '30px' }}>
-        <h3 style={{ marginBottom: '15px', color: '#666' }}>Variants:</h3>
-        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
-          <${componentName} variant="primary" onClick={handleClick}>Primary</${componentName}>
-          <${componentName} variant="secondary" onClick={handleClick}>Secondary</${componentName}>
-          <${componentName} variant="success" onClick={handleClick}>Success</${componentName}>
-          <${componentName} variant="danger" onClick={handleClick}>Danger</${componentName}>
-          <${componentName} variant="outline" onClick={handleClick}>Outline</${componentName}>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '30px' }}>
-        <h3 style={{ marginBottom: '15px', color: '#666' }}>Sizes:</h3>
-        <div style={{ display: 'flex', gap: '15px', alignItems: 'center', flexWrap: 'wrap' }}>
-          <${componentName} size="small" onClick={handleClick}>Small</${componentName}>
-          <${componentName} size="medium" onClick={handleClick}>Medium</${componentName}>
-          <${componentName} size="large" onClick={handleClick}>Large</${componentName}>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: '30px' }}>
-        <h3 style={{ marginBottom: '15px', color: '#666' }}>States:</h3>
-        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
-          <${componentName} onClick={handleClick}>Normal</${componentName}>
-          <${componentName} disabled>Disabled</${componentName}>
-        </div>
-      </div>
-    </div>
-  );`,
-    
-    card: `  return (
-    <div className="App" style={{ padding: '40px', backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
-      <h1 style={{ marginBottom: '30px' }}>${componentName} Component</h1>
-      <${componentName}
-        title="Example Card"
-        description="This is an example card component with a beautiful design"
-        image="https://via.placeholder.com/400x200"
-      />
-    </div>
-  );`,
-    
-    counter: `  return (
-    <div className="App" style={{ padding: '40px' }}>
-      <h1>Counter Component</h1>
-      <${componentName} 
-        initialValue={0}
-        min={0}
-        max={100}
-        onChange={(value) => console.log('Count:', value)}
-      />
-    </div>
-  );`,
-    
-    form: `  return (
-    <div className="App" style={{ padding: '40px' }}>
-      <${componentName}
-        title="Contact Form"
-        fields={[
-          { name: 'name', label: 'Name', type: 'text', required: true },
-          { name: 'email', label: 'Email', type: 'email', required: true },
-        ]}
-        onSubmit={(data) => console.log('Form data:', data)}
-      />
-    </div>
-  );`,
-    
-    "todo-list": `  return (
-    <div className="App" style={{ padding: '40px' }}>
-      <h1>Todo List</h1>
-      <${componentName} />
-    </div>
-  );`,
-  };
-
-  // Modal needs useState import
-  if (componentKebab === 'modal') {
-    const content = `  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="App" style={{ padding: '40px' }}>
-      <button onClick={() => setIsOpen(true)}>Open Modal</button>
-      <${componentName}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Example Modal"
-      >
-        <p>This is the modal content</p>
-      </${componentName}>
-    </div>
-  );`;
-    return createAppTemplate(componentName, 'useState', content);
+function generateAppJsx(componentName, componentKebab, options = {}) {
+  const { lazyLoad = false } = options;
+  
+  // Validate component exists (optional - could add warning)
+  if (!hasComponent(componentKebab)) {
+    console.warn(`Warning: No template found for component '${componentKebab}'. Using default template.`);
   }
-
-  // Use component-specific content if available
-  const content = componentContent[componentKebab] || `  return (
+  
+  // Get template content from separate file
+  const templateContent = getComponentTemplate(componentKebab, componentName);
+  
+  // Get required React imports for this component
+  const requiredImports = getComponentImports(componentKebab);
+  
+  // Use template content if available, otherwise use default
+  const content = templateContent || `  return (
     <div className="App">
       <${componentName} />
     </div>
   );`;
 
-  return createAppTemplate(componentName, '', content);
+  // Use lazy loading template if requested
+  if (lazyLoad) {
+    return createAppTemplateWithLazyLoading(componentName, requiredImports, content);
+  }
+  
+  return createAppTemplate(componentName, requiredImports, content);
 }
 
 // ============================================================================
@@ -166,23 +150,33 @@ function generateAppJsx(componentName, componentKebab) {
 
 /**
  * Generate index.jsx content
+ * 
+ * Creates the main entry point file that renders the React app.
+ * Uses React 18's createRoot API for better performance.
+ * 
+ * @returns {string} Complete index.jsx file content
  */
 function generateIndexJs() {
-  return `import React from 'react';
+  return `import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );
 `;
 }
 
 /**
  * Generate index.html content
+ * 
+ * Creates the HTML entry point with proper meta tags and root div.
+ * 
+ * @param {string} title - Page title to display in browser tab
+ * @returns {string} Complete index.html file content
  */
 function generateIndexHtml(title) {
   return `<!DOCTYPE html>
@@ -206,6 +200,16 @@ function generateIndexHtml(title) {
 
 /**
  * Generate package.json content
+ * 
+ * Creates a package.json with React, Vite, and all necessary scripts.
+ * Configured as ES module with dev, build, and preview scripts.
+ * 
+ * @param {string} name - Project name (used as package name)
+ * @returns {Object} Package.json configuration object
+ * 
+ * @example
+ * const pkg = generatePackageJson('my-react-app');
+ * // Returns complete package.json object
  */
 function generatePackageJson(name) {
   return {
@@ -231,6 +235,11 @@ function generatePackageJson(name) {
 
 /**
  * Generate .gitignore content
+ * 
+ * Creates a comprehensive .gitignore file for React/Vite projects.
+ * Includes patterns for dependencies, build outputs, environment files, and editors.
+ * 
+ * @returns {string} Complete .gitignore file content
  */
 function generateGitignore() {
   return `# Dependencies
@@ -259,20 +268,63 @@ build/
 
 /**
  * Generate vite.config.js content
+ * 
+ * Creates a minimal Vite configuration file with React plugin enabled.
+ * 
+ * @param {boolean} withOptimization - Include code splitting optimizations
+ * @returns {string} Complete vite.config.js file content
  */
-function generateViteConfig() {
+function generateViteConfig(withOptimization = false) {
+  if (!withOptimization) {
+    return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+  }
+  
   return `import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Split vendor code into separate chunk
+          vendor: ['react', 'react-dom'],
+        },
+      },
+    },
+    // Enable code splitting
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true, // Remove console.log in production
+      },
+    },
+  },
 });
 `;
 }
 
 /**
  * Generate README.md content
+ * 
+ * Creates a comprehensive README with installation instructions,
+ * available scripts, project structure, and customization guidance.
+ * 
+ * @param {string} name - Project name
+ * @param {string} componentName - Component name in PascalCase
+ * @returns {string} Complete README.md file content in Markdown format
+ * 
+ * @example
+ * const readme = generateReadme('my-app', 'Button');
  */
 function generateReadme(name, componentName) {
   return `# ${name}
@@ -339,6 +391,21 @@ MIT
 // EXPORTS
 // ============================================================================
 
+/**
+ * Public API exports for React template generation
+ * 
+ * All generator functions for creating a complete React project structure.
+ * These functions are used by the CLI to generate project files.
+ * 
+ * @exports generateAppJsx - Generate App.jsx with component examples
+ * @exports generateIndexJs - Generate index.jsx entry point
+ * @exports generateIndexHtml - Generate index.html
+ * @exports generatePackageJson - Generate package.json with dependencies
+ * @exports generateGitignore - Generate .gitignore file
+ * @exports generateViteConfig - Generate vite.config.js
+ * @exports generateReadme - Generate README.md documentation
+ * @exports createAppTemplateWithLazyLoading - Create lazy loaded App component
+ */
 export {
   generateAppJsx,
   generateIndexJs,
@@ -347,4 +414,5 @@ export {
   generateGitignore,
   generateViteConfig,
   generateReadme,
+  createAppTemplateWithLazyLoading,
 };

package/src/templates/basic-components-templates.js

@@ -0,0 +1,157 @@
+/**
+ * Basic UI Component Templates
+ * Simple display components without complex state management
+ * 
+ * @module templates/basic-components-templates
+ */
+
+export const BASIC_TEMPLATES = {
+  alert: `  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Alert Component Examples</h1>
+      
+      <{ComponentName} type="success" title="Success!">
+        Your changes have been saved successfully.
+      </{ComponentName}>
+      
+      <{ComponentName} type="error" title="Error">
+        Something went wrong. Please try again.
+      </{ComponentName}>
+      
+      <{ComponentName} type="warning" title="Warning">
+        This action cannot be undone.
+      </{ComponentName}>
+      
+      <{ComponentName} type="info" title="Information">
+        Check out our new features!
+      </{ComponentName}>
+    </div>
+  );`,
+
+  badge: `  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Badge Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Badges</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <{ComponentName} variant="primary">Primary</{ComponentName}>
+          <{ComponentName} variant="success">Success</{ComponentName}>
+          <{ComponentName} variant="warning">Warning</{ComponentName}>
+          <{ComponentName} variant="error">Error</{ComponentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Pill Badges</h2>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <{ComponentName} pill variant="info">New</{ComponentName}>
+          <{ComponentName} pill variant="success">Hot</{ComponentName}>
+          <{ComponentName} pill variant="warning">Sale</{ComponentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Count Badges</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={{ padding: '0.5rem 1rem', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '0.375rem' }}>
+              Messages
+            </button>
+            <{ComponentName} count={5} variant="error" size="small" />
+          </div>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <button style={{ padding: '0.5rem 1rem', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '0.375rem' }}>
+              Notifications
+            </button>
+            <{ComponentName} count={99} variant="primary" size="small" />
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Dot Badges</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={{ width: '48px', height: '48px', borderRadius: '50%', backgroundColor: '#e5e7eb', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem' }}>
+              👤
+            </div>
+            <{ComponentName} dot variant="success" position="top-right" />
+          </div>
+          <div style={{ position: 'relative', display: 'inline-block' }}>
+            <div style={{ width: '48px', height: '48px', borderRadius: '50%', backgroundColor: '#e5e7eb', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem' }}>
+              👤
+            </div>
+            <{ComponentName} dot variant="error" position="top-left" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );`,
+
+  button: `  const handleClick = () => {
+    alert('Button clicked!');
+  };
+
+  return (
+    <div className="App" style={{ 
+      padding: '40px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      backgroundColor: '#f5f5f5',
+      minHeight: '100vh'
+    }}>
+      <h1 style={{ marginBottom: '30px', color: '#333' }}>{ComponentName} Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>Variants:</h3>
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <{ComponentName} variant="primary" onClick={handleClick}>Primary</{ComponentName}>
+          <{ComponentName} variant="secondary" onClick={handleClick}>Secondary</{ComponentName}>
+          <{ComponentName} variant="success" onClick={handleClick}>Success</{ComponentName}>
+          <{ComponentName} variant="danger" onClick={handleClick}>Danger</{ComponentName}>
+          <{ComponentName} variant="outline" onClick={handleClick}>Outline</{ComponentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>Sizes:</h3>
+        <div style={{ display: 'flex', gap: '15px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <{ComponentName} size="small" onClick={handleClick}>Small</{ComponentName}>
+          <{ComponentName} size="medium" onClick={handleClick}>Medium</{ComponentName}>
+          <{ComponentName} size="large" onClick={handleClick}>Large</{ComponentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>States:</h3>
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <{ComponentName} onClick={handleClick}>Normal</{ComponentName}>
+          <{ComponentName} disabled>Disabled</{ComponentName}>
+        </div>
+      </div>
+    </div>
+  );`,
+
+  card: `  return (
+    <div className="App" style={{ padding: '40px', backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
+      <h1 style={{ marginBottom: '30px' }}>{ComponentName} Component</h1>
+      <{ComponentName}
+        title="Example Card"
+        description="This is an example card component with a beautiful design"
+        image="https://via.placeholder.com/400x200"
+      />
+    </div>
+  );`,
+
+  counter: `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <h1>Counter Component</h1>
+      <{ComponentName} 
+        initialValue={0}
+        min={0}
+        max={100}
+        onChange={(value) => console.log('Count:', value)}
+      />
+    </div>
+  );`,
+};