create-nativecore 0.1.0 → 0.2.0

package/template/scripts/make-core-component.mjs

@@ -0,0 +1,303 @@
+#!/usr/bin/env node
+
+/**
+ * Core Component Generator Script
+ * Creates framework core components with --nc- variables
+ * 
+ * Usage:
+ *   node scripts/make-core-component.mjs button
+ *   npm run make:core-component button
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import readline from 'readline';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get component name from command line
+const componentName = process.argv[2];
+
+if (!componentName) {
+  console.error('Error: Component name is required');
+  console.log('\nUsage:');
+  console.log('  npm run make:core-component <name>');
+  console.log('\nExample:');
+  console.log('  npm run make:core-component button');
+  process.exit(1);
+}
+
+// Validate component name (no hyphen needed for core components - we add nc- prefix)
+if (!/^[a-z][a-z0-9-]*$/.test(componentName)) {
+  console.error('Error: Component name must be lowercase with optional hyphens');
+  console.error('\nValid examples:');
+  console.error('   - button');
+  console.error('   - card');
+  console.error('   - input');
+  console.error('   - dropdown-menu');
+  process.exit(1);
+}
+
+// Generate names
+const tagName = `nc-${componentName}`; // e.g., nc-button
+const className = tagName
+  .split('-')
+  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+  .join(''); // e.g., NcButton
+
+// Component file path (in components/core folder)
+const componentsDir = path.resolve(__dirname, '..', 'src', 'components');
+const coreDir = path.join(componentsDir, 'core');
+const componentFile = path.join(coreDir, `${tagName}.ts`);
+const preloadRegistryFile = path.join(componentsDir, 'preloadRegistry.ts');
+
+// Ensure core directory exists
+if (!fs.existsSync(coreDir)) {
+  fs.mkdirSync(coreDir, { recursive: true });
+}
+
+// Check if component already exists
+if (fs.existsSync(componentFile)) {
+  console.error(`Error: Component "${tagName}.ts" already exists`);
+  process.exit(1);
+}
+
+// Template for core component
+const componentTemplate = `/**
+ * ${className} Component
+ * 
+ * NativeCore Framework Core Component
+ * Generated on ${new Date().toLocaleDateString()}
+ * 
+ * FRAMEWORK INTERNAL COMPONENT
+ * This component uses --nc- CSS variables from core-variables.css
+ * for consistent styling across the framework.
+ * 
+ * ═══════════════════════════════════════════════════════════════════
+ * DEV TOOLS INTEGRATION - How to make attributes editable in sidebar:
+ * ═══════════════════════════════════════════════════════════════════
+ * 
+ * 1. ADD TO observedAttributes:
+ *    static get observedAttributes() {
+ *      return ['variant', 'size', 'disabled'];  // ← These become editable
+ *    }
+ * 
+ * 2. USE getAttribute() IN template():
+ *    const variant = this.getAttribute('variant') || 'primary';
+ *    const size = this.getAttribute('size') || 'md';
+ * 
+ * 3. FOR DROPDOWN SELECTORS (variant/size):
+ *    Name attributes 'variant' or 'size' AND use CSS patterns:
+ * 
+ *    Option A - :host() selectors (RECOMMENDED for core components):
+ *      :host([variant="primary"]) { ... }
+ *      :host([variant="secondary"]) { ... }
+ *      :host([size="sm"]) { ... }
+ *      :host([size="lg"]) { ... }
+ * 
+ *    Option B - Class selectors:
+ *      .primary { ... }
+ *      .secondary { ... }
+ *      .btn-sm { ... }
+ *      .btn-lg { ... }
+ * 
+ *    The dev tools will auto-detect these patterns and create dropdowns!
+ * 
+ * 4. ATTRIBUTE TYPES (auto-detected):
+ *    - Boolean: disabled, loading, hidden, readonly → Checkbox
+ *    - Variant/Size: variant, size (with CSS) → Dropdown
+ *    - Number: count, max, min, step → Slider
+ *    - Everything else → Text input
+ * 
+ * 5. LIVE UPDATES:
+ *    Implement attributeChangedCallback for instant preview updates
+ * 
+ * ═══════════════════════════════════════════════════════════════════
+ * 
+ * Usage:
+ *   <${tagName} variant="primary"></${tagName}>
+ *   <${tagName} variant="secondary" size="lg"></${tagName}>
+ * 
+ * Attributes:
+ *   - variant: Component style variant
+ *   - size: Component size (sm, md, lg)
+ *   - disabled: Disabled state
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import { html } from '@utils/templates.js';
+
+export class ${className} extends Component {
+    static useShadowDOM = true;
+    
+    // ═══ Define dropdown options for dev tools (auto-detected) ═══
+    static attributeOptions = {
+        variant: ['primary', 'secondary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+    
+    // ═══ Attributes listed here become editable in dev tools sidebar ═══
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled'];
+    }
+    
+    constructor() {
+        super();
+    }
+    
+    template() {
+        // ═══ Use getAttribute() - dev tools reads this to detect attributes ═══
+        const variant = this.getAttribute('variant') || 'primary';
+        const size = this.getAttribute('size') || 'md';
+        const disabled = this.hasAttribute('disabled');
+        
+        return html\`
+            <style>
+                :host {
+                    display: inline-block;
+                    font-family: var(--nc-font-family);
+                    padding: var(--nc-spacing-md);
+                    border-radius: var(--nc-radius-md);
+                    transition: all var(--nc-transition-fast);
+                }
+                
+                /* ═══ Variant Options (auto-detected for dropdown) ═══ */
+                /* Dev tools will scan :host([variant="..."]) patterns */
+                
+                :host([variant="primary"]) {
+                    background: var(--nc-gradient-primary);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="secondary"]) {
+                    background: var(--nc-bg-secondary);
+                    color: var(--nc-text);
+                    border: 1px solid var(--nc-border);
+                }
+                
+                :host([variant="success"]) {
+                    background: var(--nc-gradient-success);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="danger"]) {
+                    background: var(--nc-gradient-danger);
+                    color: var(--nc-white);
+                }
+                
+                /* ═══ Size Options (auto-detected for dropdown) ═══ */
+                /* Dev tools will scan :host([size="..."]) patterns */
+                
+                :host([size="sm"]) {
+                    padding: var(--nc-spacing-sm);
+                    font-size: var(--nc-font-size-sm);
+                }
+                
+                :host([size="md"]) {
+                    padding: var(--nc-spacing-md);
+                    font-size: var(--nc-font-size-base);
+                }
+                
+                :host([size="lg"]) {
+                    padding: var(--nc-spacing-lg);
+                    font-size: var(--nc-font-size-lg);
+                }
+                
+                /* ═══ Disabled State (auto-detected as checkbox) ═══ */
+                :host([disabled]) {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
+            </style>
+            
+            <slot></slot>
+        \`;
+    }
+    
+    onMount() {
+        // Component logic here
+    }
+    
+    // ═══ Makes changes instant in dev tools preview ═══
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+        }
+    }
+}
+
+defineComponent('${tagName}', ${className});
+`;
+
+// Create readline interface for prompts
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+function prompt(question) {
+  return new Promise((resolve) => {
+    rl.question(question, resolve);
+  });
+}
+
+async function main() {
+  console.log(`\nCreating NativeCore framework component: ${tagName}\n`);
+  
+  // Ask about preloading
+  const preload = await prompt('Preload this component? (Y/n): ');
+  const shouldPreload = !preload || preload.toLowerCase() !== 'n';
+  
+  // Create component file
+  fs.writeFileSync(componentFile, componentTemplate);
+  console.log(`Created: src/components/core/${tagName}.ts`);
+  
+  // Add to preloadRegistry if requested
+  if (shouldPreload) {
+    let registryContent = fs.readFileSync(preloadRegistryFile, 'utf-8');
+    
+    // Find the import section for core components
+    const coreImportSection = registryContent.indexOf('// Core framework components');
+    
+    if (coreImportSection !== -1) {
+      // Find the next line after the comment
+      const insertPosition = registryContent.indexOf('\n', coreImportSection) + 1;
+      const importStatement = `import './core/${tagName}.js';\n`;
+      
+      // Check if import already exists
+      if (!registryContent.includes(importStatement)) {
+        registryContent = registryContent.slice(0, insertPosition) + 
+                         importStatement + 
+                         registryContent.slice(insertPosition);
+        
+        fs.writeFileSync(preloadRegistryFile, registryContent);
+        console.log(`Added to: src/components/preloadRegistry.ts`);
+      }
+    } else {
+      console.log('Warning: Could not find core components section in preloadRegistry.ts');
+      console.log('   Please manually add: import \'./core/${tagName}.js\';');
+    }
+  }
+  
+  console.log('\nFramework component created successfully!\n');
+  console.log('Usage:');
+  console.log(`  <${tagName} variant="primary">Content</${tagName}>`);
+  console.log(`  <${tagName} variant="secondary" size="lg">Large</${tagName}>`);
+  console.log('\nDev Tools Integration:');
+  console.log('   • Attributes in observedAttributes → Editable in sidebar');
+  console.log('   • :host([variant="..."]) patterns → Auto-detected dropdown');
+  console.log('   • :host([size="..."]) patterns → Auto-detected dropdown');
+  console.log('   • Boolean attrs (disabled, etc.) → Checkbox');
+  console.log('   • attributeChangedCallback → Live preview updates');
+  console.log('\nComponent uses --nc- variables from core-variables.css');
+  console.log('Check the generated file for detailed integration comments.\n');
+  
+  rl.close();
+}
+
+main().catch(error => {
+  console.error('Error:', error.message);
+  process.exit(1);
+});

package/template/scripts/make-view.mjs

@@ -0,0 +1,346 @@
+#!/usr/bin/env node
+
+/**
+ * View Generator Script
+ * Creates views (HTML pages) with optional controllers
+ * 
+ * Usage:
+ *   node scripts/make-view.mjs profile
+ *   npm run make:view profile
+ */
+
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+import { generateCfRouter } from './generate-cf-router.mjs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get view name from command line
+const viewName = process.argv[2];
+
+if (!viewName) {
+  console.error('Error: View name is required');
+  console.log('\nUsage:');
+  console.log('  npm run make:view <name>');
+  console.log('\nExample:');
+  console.log('  npm run make:view profile');
+  process.exit(1);
+}
+
+// Validate view name (kebab-case)
+if (!/^[a-z][a-z0-9]*(-[a-z0-9]+)*$/.test(viewName)) {
+  console.error('Error: View name must be in kebab-case (lowercase with hyphens)');
+  console.error('\nValid examples:');
+  console.error('   - profile');
+  console.error('   - user-profile');
+  console.error('   - my-settings');
+  console.error('\nInvalid examples:');
+  console.error('   - Profile (not lowercase)');
+  console.error('   - user_profile (underscore instead of hyphen)');
+  process.exit(1);
+}
+
+// Create readline interface for prompts
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// Promisify question
+function question(query) {
+  return new Promise(resolve => rl.question(query, resolve));
+}
+
+// Generate controller name (camelCase)
+const controllerName = viewName
+  .split('-')
+  .map((word, index) => 
+    index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+  )
+  .join('');
+
+// Generate title (Title Case)
+const viewTitle = viewName
+  .split('-')
+  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+  .join(' ');
+
+async function generateView() {
+  try {
+    // Prompt for route access level within the single-shell SPA
+    const isProtectedAnswer = await question('Should this route require login? (y/n): ');
+    const isProtected = isProtectedAnswer.toLowerCase().trim() === 'y';
+    
+    // Prompt for controller creation
+    const createControllerAnswer = await question('Create a controller for this view? (y/n): ');
+    const createController = createControllerAnswer.toLowerCase().trim() === 'y';
+    
+    rl.close();
+    
+    // Determine directories
+    const accessFolder = isProtected ? 'protected' : 'public';
+    const viewsDir = path.resolve(__dirname, '..', 'src', 'views', accessFolder);
+    const viewFile = path.join(viewsDir, `${viewName}.html`);
+    
+    // Check if view already exists
+    if (fs.existsSync(viewFile)) {
+      console.error(`Error: View "${viewName}.html" already exists in ${accessFolder} folder`);
+      process.exit(1);
+    }
+    
+    // Ensure directory exists
+    if (!fs.existsSync(viewsDir)) {
+      fs.mkdirSync(viewsDir, { recursive: true });
+    }
+    
+    // Generate HTML template
+    const htmlTemplate = createController ? `<div class="${viewName}-page">
+    <h1 id="${viewName}-title">${viewTitle}</h1>
+    <p>This is the ${viewTitle} page.</p>
+    
+    <div id="${viewName}-content">
+        <loading-spinner message="Loading ${viewTitle.toLowerCase()}..."></loading-spinner>
+    </div>
+</div>
+` : `<div class="${viewName}-page">
+    <h1>${viewTitle}</h1>
+    <p>This is the ${viewTitle} page.</p>
+    
+    <div class="content">
+        <!-- Add your content here -->
+    </div>
+</div>
+`;
+    
+    // Create HTML file
+    fs.writeFileSync(viewFile, htmlTemplate);
+    console.log(`Created view: src/views/${accessFolder}/${viewName}.html`);
+    
+    // Create controller if requested
+    if (createController) {
+      const controllersDir = path.resolve(__dirname, '..', 'src', 'controllers');
+      const controllerFile = path.join(controllersDir, `${viewName}.controller.ts`);
+      const indexFile = path.join(controllersDir, 'index.ts');
+      
+      // Check if controller already exists
+      if (fs.existsSync(controllerFile)) {
+        console.error(`Warning: Controller "${viewName}.controller.ts" already exists`);
+      } else {
+        // Generate controller template
+        const controllerTemplate = `/**
+ * ${viewTitle} Page Controller
+ * Handles dynamic behavior for the ${viewTitle} page
+ */
+import { trackEvents, trackSubscriptions } from '@utils/events.js';
+${isProtected ? "import auth from '@services/auth.service.js';\nimport api from '@services/api.service.js';\n" : ""}
+export async function ${controllerName}Controller(params: Record<string, string> = {}): Promise<() => void> {
+    const events = trackEvents();
+    const subs = trackSubscriptions();
+    
+    const titleElement = document.getElementById('${viewName}-title') as HTMLElement | null;
+    const contentElement = document.getElementById('${viewName}-content') as HTMLElement | null;
+    if (!contentElement) return () => { events.cleanup(); subs.cleanup(); };
+    
+    ${isProtected ? `const user = auth.getUser();
+    if (user && titleElement) {
+        titleElement.textContent = \`${viewTitle} - \${user.name}\`;
+    }
+    
+    ` : ''}try {
+        ${isProtected ? `// const data = await api.get('/${viewName}');
+        
+        contentElement.innerHTML = \`
+            <div class="card">
+                <h2>Welcome to ${viewTitle}</h2>
+                <p>Your dynamic content goes here.</p>
+                <nc-button id="${viewName}-btn" variant="primary">Action</nc-button>
+            </div>
+        \`;
+        
+        events.onClick('#${viewName}-btn', handleAction);` : `contentElement.innerHTML = \`
+            <div class="card">
+                <h2>Content Section</h2>
+                <p>Your content goes here.</p>
+            </div>
+        \`;`}
+    } catch (error) {
+        contentElement.innerHTML = \`
+            <div class="alert alert-error">
+                Failed to load ${viewTitle.toLowerCase()}: \${(error as Error).message}
+            </div>
+        \`;
+    }
+    
+    return () => {
+        events.cleanup();
+        subs.cleanup();
+    };
+    
+    function handleAction() {
+        // Handle action button click
+    }
+}
+`;
+        
+        // Create controller file
+        fs.writeFileSync(controllerFile, controllerTemplate);
+        console.log(`Created controller: src/controllers/${viewName}.controller.ts`);
+        
+        // Update controllers/index.ts
+        if (fs.existsSync(indexFile)) {
+          let indexContent = fs.readFileSync(indexFile, 'utf8');
+          
+          // Add export using .js extension (ES module requirement)
+          const importStatement = `export { ${controllerName}Controller } from './${viewName}.controller.js';\n`;
+          
+          // Check if import already exists
+          if (!indexContent.includes(`${viewName}.controller`)) {
+            // Add to end of file
+            indexContent += importStatement;
+            fs.writeFileSync(indexFile, indexContent);
+            console.log(`Updated: src/controllers/index.ts`);
+          }
+        }
+      }
+    }
+    
+    // Update routes.ts for lazy loading
+    const routesPath = path.resolve(__dirname, '..', 'src', 'routes', 'routes.ts');
+    if (fs.existsSync(routesPath)) {
+      let routesContent = fs.readFileSync(routesPath, 'utf8');
+      
+      // Add route registration with lazy controller
+      const routeRegistration = createController
+        ? `.register('/${viewName}', 'src/views/${accessFolder}/${viewName}.html', lazyController('${controllerName}Controller', '../controllers/${viewName}.controller.js'))`
+        : `.register('/${viewName}', 'src/views/${accessFolder}/${viewName}.html')`;
+      
+      // Find the last .register() call and add after it
+      const lastRegisterIndex = routesContent.lastIndexOf('.register(');
+      if (lastRegisterIndex !== -1) {
+        // Find the end of this line (semicolon or newline)
+        const lineEndIndex = routesContent.indexOf('\n', lastRegisterIndex);
+        if (lineEndIndex !== -1) {
+          // Insert new route after this line
+          const insertPoint = lineEndIndex;
+          routesContent = routesContent.slice(0, insertPoint) + 
+                         '\n        ' + routeRegistration + 
+                         routesContent.slice(insertPoint);
+          console.log(`Added route registration to src/routes/routes.ts`);
+        }
+      }
+      
+      // Add to protected routes array if needed
+      if (isProtected) {
+        const protectedRoutesRegex = /export const protectedRoutes = \[(.*?)\];/s;
+        const match = routesContent.match(protectedRoutesRegex);
+        if (match) {
+          const routesList = match[1].trim();
+          if (routesList && !routesList.includes(`'/${viewName}'`)) {
+            const newRoutes = routesList + `, '/${viewName}'`;
+            routesContent = routesContent.replace(
+              protectedRoutesRegex,
+              `export const protectedRoutes = [${newRoutes}];`
+            );
+            console.log(`Added '/${viewName}' to protected routes array`);
+          }
+        }
+      }
+      
+      fs.writeFileSync(routesPath, routesContent);
+      generateCfRouter();
+    }
+    
+    // Update sidebar.ts if protected view
+    if (isProtected) {
+      try {
+        const sidebarPath = path.resolve(__dirname, '..', 'src', 'utils', 'sidebar.ts');
+        if (fs.existsSync(sidebarPath)) {
+          let sidebarContent = fs.readFileSync(sidebarPath, 'utf8');
+          
+          // Add const declaration for the new link
+          const linkDeclaration = `const ${viewName}Link = document.querySelector('.sidebar-item.${viewName}-link') as HTMLElement;`;
+          const componentsLinkMatch = sidebarContent.match(/const componentsLink[^\n]*\n/);
+          
+          if (componentsLinkMatch) {
+            sidebarContent = sidebarContent.replace(
+              componentsLinkMatch[0],
+              componentsLinkMatch[0] + '        ' + linkDeclaration + '\n'
+            );
+          }
+          
+          // Add display toggle
+          const displayToggle = `if (${viewName}Link) ${viewName}Link.style.display = isAuthenticated ? 'flex' : 'none';`;
+          const componentsDisplayMatch = sidebarContent.match(/if \(componentsLink\)[^\n]*\n/);
+          
+          if (componentsDisplayMatch) {
+            sidebarContent = sidebarContent.replace(
+              componentsDisplayMatch[0],
+              componentsDisplayMatch[0] + '        ' + displayToggle + '\n'
+            );
+          }
+          
+          fs.writeFileSync(sidebarPath, sidebarContent);
+          console.log(`Updated sidebar.ts for new link visibility`);
+        }
+      } catch (e) {
+        // sidebar.ts update is optional
+      }
+    }
+    
+    // Show next steps
+    console.log('\nNext steps:');
+    
+    // Automatically add to navigation
+    try {
+      const indexPath = path.resolve(__dirname, '..', 'index.html');
+      let indexContent = fs.readFileSync(indexPath, 'utf-8');
+      
+      if (isProtected) {
+        // Add to sidebar if protected
+        const sidebarPattern = /<a href="\/components"[^>]*class="sidebar-item components-link"[^>]*>[\s\S]*?<\/a>\s*<button class="sidebar-item logout-link"/;
+        const navLink = `<a href="/components" data-link class="sidebar-item components-link" style="display: none;">
+                        <span class="sidebar-icon"></span>
+                        <span class="sidebar-text">Components</span>
+                    </a>
+                    <a href="/${viewName}" data-link class="sidebar-item ${viewName}-link" style="display: none;">
+                        <span class="sidebar-icon"></span>
+                        <span class="sidebar-text">${viewTitle}</span>
+                    </a>
+                    <button class="sidebar-item logout-link"`;
+        
+        if (sidebarPattern.test(indexContent)) {
+          indexContent = indexContent.replace(sidebarPattern, navLink);
+          fs.writeFileSync(indexPath, indexContent);
+          console.log(`Added to sidebar menu (protected pages)`);
+        }
+      } else {
+        // Add to header nav if public
+        const headerPattern = /<a href="\/about"[^>]*class="nanc-link"[^>]*>About<\/a>\s*<\/nav>/;
+        const headerLink = `<a href="/about" data-link class="nanc-link">About</a>
+                            <a href="/${viewName}" data-link class="nanc-link">${viewTitle}</a>
+                        </nav>`;
+        
+        if (headerPattern.test(indexContent)) {
+          indexContent = indexContent.replace(headerPattern, headerLink);
+          fs.writeFileSync(indexPath, indexContent);
+          console.log(`Added to public header navigation`);
+        }
+      }
+    } catch (e) {
+      console.log(`Note: Could not auto-add navigation link. Add manually if needed.`);
+    }
+    
+    console.log('\nDone!\n');
+    
+  } catch (error) {
+    console.error('Error:', error.message);
+    rl.close();
+    process.exit(1);
+  }
+}
+
+// Run the generator
+generateView();