@vue-skuilder/cli 0.1.3 → 0.1.5

package/src/commands/init.ts

@@ -1,24 +1,46 @@
-import { existsSync } from 'fs';
-import path from 'path';
 import chalk from 'chalk';
+import { Command } from 'commander';
+import { existsSync, readFileSync } from 'fs';
+import path, { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
 import { CliOptions } from '../types.js';
-import { gatherProjectConfig, confirmProjectCreation } from '../utils/prompts.js';
+import {
+  confirmProjectCreation,
+  displayThemePreview,
+  gatherProjectConfig,
+} from '../utils/prompts.js';
 import { processTemplate } from '../utils/template.js';
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-export async function initCommand(
-  projectName: string,
-  options: CliOptions
-): Promise<void> {
+export function createInitCommand(): Command {
+  return new Command('init')
+    .argument('<project-name>', 'name of the project to create')
+    .description('create a new Skuilder course application')
+    .option('--data-layer <type>', 'data layer type (static|dynamic)', 'dynamic')
+    .option('--theme <name>', 'theme name (default|medical|educational|corporate)', 'default')
+    .option('--no-interactive', 'skip interactive prompts')
+    .option('--couchdb-url <url>', 'CouchDB server URL (for dynamic data layer)')
+    .option('--course-id <id>', 'course ID to import (for dynamic data layer)')
+    .action(initCommand);
+}
+
+interface InitOptions {
+  dataLayer: string;
+  theme: string;
+  interactive: boolean;
+  couchdbUrl?: string;
+  courseId?: string;
+}
+
+async function initCommand(projectName: string, options: InitOptions): Promise<void> {
   try {
     // Validate project name
     if (!isValidProjectName(projectName)) {
-      console.error(chalk.red('❌ Invalid project name. Use only letters, numbers, hyphens, and underscores.'));
+      console.error(
+        chalk.red('❌ Invalid project name. Use only letters, numbers, hyphens, and underscores.')
+      );
       process.exit(1);
     }
 
@@ -34,11 +56,20 @@ export async function initCommand(
     const packageJson = JSON.parse(readFileSync(packagePath, 'utf-8'));
     const cliVersion = packageJson.version;
 
+    // Convert options to CliOptions format
+    const cliOptions: CliOptions = {
+      dataLayer: options.dataLayer as 'static' | 'dynamic',
+      theme: options.theme as 'default' | 'medical' | 'educational' | 'corporate',
+      interactive: options.interactive,
+      couchdbUrl: options.couchdbUrl,
+      courseId: options.courseId,
+    };
+
     // Gather project configuration
-    const config = await gatherProjectConfig(projectName, options);
+    const config = await gatherProjectConfig(projectName, cliOptions);
 
     // Confirm project creation (only in interactive mode)
-    if (options.interactive) {
+    if (cliOptions.interactive) {
       const confirmed = await confirmProjectCreation(config, projectPath);
       if (!confirmed) {
         console.log(chalk.yellow('Project creation cancelled.'));
@@ -53,24 +84,43 @@ export async function initCommand(
 
     // Success message
     console.log(chalk.green('\n🎉 Project created successfully!\n'));
-    console.log(chalk.cyan('Next steps:'));
+
+    // Show theme preview
+    displayThemePreview(config.theme.name);
+
+    console.log(chalk.cyan('\nNext steps:'));
     console.log(`  ${chalk.white('cd')} ${projectName}`);
     console.log(`  ${chalk.white('npm install')}`);
     console.log(`  ${chalk.white('npm run dev')}`);
     console.log('');
 
     if (config.dataLayerType === 'couch') {
-      console.log(chalk.yellow('📝 Note: Make sure your CouchDB server is running and accessible.'));
+      console.log(
+        chalk.yellow('📝 Note: Make sure your CouchDB server is running and accessible.')
+      );
       if (config.course) {
-        console.log(chalk.yellow(`📚 Course ID "${config.course}" will be loaded from the database.`));
+        console.log(
+          chalk.yellow(`📚 Course ID "${config.course}" will be loaded from the database.`)
+        );
       }
     } else {
-      console.log(chalk.yellow('📝 Note: This project uses static data. Sample course data has been included.'));
+      console.log(
+        chalk.yellow(
+          '📝 Note: This project uses static data. Sample course data has been included.'
+        )
+      );
     }
-
-  } catch (error) {
+  } catch (error: unknown) {
     console.error(chalk.red('\n❌ Failed to create project:'));
-    console.error(chalk.red(error instanceof Error ? error.message : String(error)));
+    let errorMessage = 'Unknown error';
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    } else if (typeof error === 'string') {
+      errorMessage = error;
+    } else if (error && typeof error === 'object' && 'message' in error) {
+      errorMessage = String((error as { message: unknown }).message);
+    }
+    console.error(chalk.red(errorMessage));
     process.exit(1);
   }
 }
@@ -80,4 +130,4 @@ function isValidProjectName(name: string): boolean {
   // Must start with a letter or number
   const validNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9-_]*$/;
   return validNameRegex.test(name) && name.length > 0 && name.length <= 214;
-}
+}

package/src/commands/pack.ts

@@ -0,0 +1,163 @@
+import { Command } from 'commander';
+import PouchDB from 'pouchdb';
+import fs from 'fs-extra';
+import path from 'path';
+import chalk from 'chalk';
+import { CouchDBToStaticPacker } from '@vue-skuilder/db/packer';
+
+export function createPackCommand(): Command {
+  return new Command('pack')
+    .description('Pack a CouchDB course into static files')
+    .argument('<courseId>', 'Course ID to pack')
+    .option('-s, --server <url>', 'CouchDB server URL', 'http://localhost:5984')
+    .option('-u, --username <username>', 'CouchDB username')
+    .option('-p, --password <password>', 'CouchDB password')
+    .option('-o, --output <dir>', 'Output directory', './static-courses')
+    .option('-c, --chunk-size <size>', 'Documents per chunk', '1000')
+    .option('--no-attachments', 'Exclude attachments')
+    .action(packCourse);
+}
+
+interface PackOptions {
+  server: string;
+  username?: string;
+  password?: string;
+  output: string;
+  chunkSize: string;
+  noAttachments: boolean;
+}
+
+async function packCourse(courseId: string, options: PackOptions) {
+  try {
+    console.log(chalk.cyan(`🔧 Packing course: ${courseId}`));
+    
+    // Validate courseId
+    if (!courseId || courseId.trim() === '') {
+      throw new Error('Course ID is required');
+    }
+
+    // Connect to CouchDB
+    const dbUrl = `${options.server}/coursedb-${courseId}`;
+    const dbOptions: Record<string, unknown> = {};
+
+    if (options.username && options.password) {
+      dbOptions.auth = {
+        username: options.username,
+        password: options.password,
+      };
+    }
+
+    console.log(chalk.gray(`📡 Connecting to: ${dbUrl}`));
+    const sourceDB = new PouchDB(dbUrl, dbOptions);
+
+    // Test connection
+    try {
+      await sourceDB.info();
+      console.log(chalk.green('✅ Connected to database'));
+    } catch (error: unknown) {
+      let errorMessage = 'Unknown error';
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      } else if (typeof error === 'string') {
+        errorMessage = error;
+      } else if (error && typeof error === 'object' && 'message' in error) {
+        errorMessage = String((error as { message: unknown }).message);
+      }
+      throw new Error(`Failed to connect to database: ${errorMessage}`);
+    }
+
+    // Configure packer (data transformation only)
+    const packerConfig = {
+      chunkSize: parseInt(options.chunkSize),
+      includeAttachments: !options.noAttachments,
+    };
+
+    console.log(chalk.gray(`📦 Chunk size: ${packerConfig.chunkSize} documents`));
+    console.log(chalk.gray(`📎 Include attachments: ${packerConfig.includeAttachments}`));
+
+    // Pack the course (data transformation)
+    console.log(chalk.cyan('🔄 Processing course data...'));
+    const packer = new CouchDBToStaticPacker(packerConfig);
+    const packedData = await packer.packCourse(sourceDB, courseId);
+
+    // Create output directory
+    const outputDir = path.resolve(options.output, courseId);
+    await fs.ensureDir(outputDir);
+    console.log(chalk.gray(`📁 Output directory: ${outputDir}`));
+
+    // Write files
+    await writePackedData(packedData, outputDir);
+
+    // Success summary
+    console.log(chalk.green('\n✅ Successfully packed course!'));
+    console.log(chalk.white(`📊 Course: ${packedData.manifest.courseName}`));
+    console.log(chalk.white(`📄 Documents: ${packedData.manifest.documentCount}`));
+    console.log(chalk.white(`🗂️  Chunks: ${packedData.manifest.chunks.length}`));
+    console.log(chalk.white(`🗃️  Indices: ${packedData.manifest.indices.length}`));
+    console.log(chalk.white(`📁 Location: ${outputDir}`));
+
+  } catch (error: unknown) {
+    console.error(chalk.red('\n❌ Packing failed:'));
+    let errorMessage = 'Unknown error';
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    } else if (typeof error === 'string') {
+      errorMessage = error;
+    } else if (error && typeof error === 'object' && 'message' in error) {
+      errorMessage = String((error as { message: unknown }).message);
+    }
+    console.error(chalk.red(errorMessage));
+    process.exit(1);
+  }
+}
+
+interface PackedData {
+  manifest: {
+    version: string;
+    courseId: string;
+    courseName: string;
+    lastUpdated: string;
+    documentCount: number;
+    chunks: unknown[];
+    indices: unknown[];
+    designDocs: unknown[];
+  };
+  chunks: Map<string, unknown[]>;
+  indices: Map<string, unknown>;
+}
+
+async function writePackedData(
+  packedData: PackedData,
+  outputDir: string
+) {
+  console.log(chalk.cyan('💾 Writing files...'));
+
+  // Write manifest
+  const manifestPath = path.join(outputDir, 'manifest.json');
+  await fs.writeJson(manifestPath, packedData.manifest, { spaces: 2 });
+  console.log(chalk.gray(`📋 Wrote manifest: ${manifestPath}`));
+
+  // Create directories
+  const chunksDir = path.join(outputDir, 'chunks');
+  const indicesDir = path.join(outputDir, 'indices');
+  await fs.ensureDir(chunksDir);
+  await fs.ensureDir(indicesDir);
+
+  // Write chunks
+  let chunkCount = 0;
+  for (const [chunkId, chunkData] of packedData.chunks) {
+    const chunkPath = path.join(chunksDir, `${chunkId}.json`);
+    await fs.writeJson(chunkPath, chunkData);
+    chunkCount++;
+  }
+  console.log(chalk.gray(`📦 Wrote ${chunkCount} chunks`));
+
+  // Write indices  
+  let indexCount = 0;
+  for (const [indexName, indexData] of packedData.indices) {
+    const indexPath = path.join(indicesDir, `${indexName}.json`);
+    await fs.writeJson(indexPath, indexData, { spaces: 2 });
+    indexCount++;
+  }
+  console.log(chalk.gray(`🗃️  Wrote ${indexCount} indices`));
+}

package/src/types.ts

@@ -15,15 +15,45 @@ export interface ProjectConfig {
   theme: ThemeConfig;
 }
 
-export interface ThemeConfig {
-  name: string;
+export interface VuetifyThemeDefinition {
+  dark: boolean;
   colors: {
+    // Core semantic colors
     primary: string;
     secondary: string;
     accent: string;
+    error: string;
+    info: string;
+    success: string;
+    warning: string;
+    
+    // Surface colors
+    background: string;
+    surface: string;
+    'surface-bright': string;
+    'surface-light': string;
+    'surface-variant': string;
+    'on-surface-variant': string;
+    
+    // Derived colors
+    'primary-darken-1': string;
+    'secondary-darken-1': string;
+    
+    // Text colors
+    'on-primary': string;
+    'on-secondary': string;
+    'on-background': string;
+    'on-surface': string;
   };
 }
 
+export interface ThemeConfig {
+  name: string;
+  light: VuetifyThemeDefinition;
+  dark: VuetifyThemeDefinition;
+  defaultMode: 'light' | 'dark';
+}
+
 export interface SkuilderConfig {
   title: string;
   course?: string;
@@ -39,34 +69,210 @@ export interface InitCommandOptions extends CliOptions {
 export const PREDEFINED_THEMES: Record<string, ThemeConfig> = {
   default: {
     name: 'default',
-    colors: {
-      primary: '#1976D2',
-      secondary: '#424242',
-      accent: '#82B1FF'
+    defaultMode: 'light',
+    light: {
+      dark: false,
+      colors: {
+        primary: '#1976D2',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#F44336',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FF9800',
+        background: '#FFFFFF',
+        surface: '#FFFFFF',
+        'surface-bright': '#FFFFFF',
+        'surface-light': '#EEEEEE',
+        'surface-variant': '#E3F2FD',
+        'on-surface-variant': '#1976D2',
+        'primary-darken-1': '#1565C0',
+        'secondary-darken-1': '#212121',
+        'on-primary': '#FFFFFF',
+        'on-secondary': '#FFFFFF',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+      }
+    },
+    dark: {
+      dark: true,
+      colors: {
+        primary: '#2196F3',
+        secondary: '#90A4AE',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107',
+        background: '#121212',
+        surface: '#1E1E1E',
+        'surface-bright': '#2C2C2C',
+        'surface-light': '#2C2C2C',
+        'surface-variant': '#1A237E',
+        'on-surface-variant': '#82B1FF',
+        'primary-darken-1': '#1976D2',
+        'secondary-darken-1': '#546E7A',
+        'on-primary': '#000000',
+        'on-secondary': '#000000',
+        'on-background': '#FFFFFF',
+        'on-surface': '#FFFFFF',
+      }
     }
   },
   medical: {
     name: 'medical',
-    colors: {
-      primary: '#2E7D32',
-      secondary: '#558B2F',
-      accent: '#66BB6A'
+    defaultMode: 'light',
+    light: {
+      dark: false,
+      colors: {
+        primary: '#2E7D32',
+        secondary: '#558B2F',
+        accent: '#66BB6A',
+        error: '#D32F2F',
+        info: '#1976D2',
+        success: '#388E3C',
+        warning: '#F57C00',
+        background: '#FAFAFA',
+        surface: '#FFFFFF',
+        'surface-bright': '#FFFFFF',
+        'surface-light': '#F5F5F5',
+        'surface-variant': '#E8F5E8',
+        'on-surface-variant': '#2E7D32',
+        'primary-darken-1': '#1B5E20',
+        'secondary-darken-1': '#33691E',
+        'on-primary': '#FFFFFF',
+        'on-secondary': '#FFFFFF',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+      }
+    },
+    dark: {
+      dark: true,
+      colors: {
+        primary: '#4CAF50',
+        secondary: '#8BC34A',
+        accent: '#81C784',
+        error: '#F44336',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FF9800',
+        background: '#121212',
+        surface: '#1E1E1E',
+        'surface-bright': '#2C2C2C',
+        'surface-light': '#2C2C2C',
+        'surface-variant': '#1B2E1B',
+        'on-surface-variant': '#81C784',
+        'primary-darken-1': '#388E3C',
+        'secondary-darken-1': '#689F38',
+        'on-primary': '#000000',
+        'on-secondary': '#000000',
+        'on-background': '#FFFFFF',
+        'on-surface': '#FFFFFF',
+      }
     }
   },
   educational: {
     name: 'educational',
-    colors: {
-      primary: '#F57C00',
-      secondary: '#FF9800',
-      accent: '#FFB74D'
+    defaultMode: 'light',
+    light: {
+      dark: false,
+      colors: {
+        primary: '#F57C00',
+        secondary: '#FF9800',
+        accent: '#FFB74D',
+        error: '#F44336',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FF9800',
+        background: '#FFFEF7',
+        surface: '#FFFFFF',
+        'surface-bright': '#FFFFFF',
+        'surface-light': '#FFF8E1',
+        'surface-variant': '#FFF3E0',
+        'on-surface-variant': '#F57C00',
+        'primary-darken-1': '#E65100',
+        'secondary-darken-1': '#F57C00',
+        'on-primary': '#FFFFFF',
+        'on-secondary': '#000000',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+      }
+    },
+    dark: {
+      dark: true,
+      colors: {
+        primary: '#FF9800',
+        secondary: '#FFB74D',
+        accent: '#FFCC02',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FF9800',
+        background: '#121212',
+        surface: '#1E1E1E',
+        'surface-bright': '#2C2C2C',
+        'surface-light': '#2C2C2C',
+        'surface-variant': '#2E1A00',
+        'on-surface-variant': '#FFCC02',
+        'primary-darken-1': '#F57C00',
+        'secondary-darken-1': '#FF9800',
+        'on-primary': '#000000',
+        'on-secondary': '#000000',
+        'on-background': '#FFFFFF',
+        'on-surface': '#FFFFFF',
+      }
     }
   },
   corporate: {
     name: 'corporate',
-    colors: {
-      primary: '#37474F',
-      secondary: '#546E7A',
-      accent: '#78909C'
+    defaultMode: 'light',
+    light: {
+      dark: false,
+      colors: {
+        primary: '#37474F',
+        secondary: '#546E7A',
+        accent: '#78909C',
+        error: '#F44336',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FF9800',
+        background: '#FAFAFA',
+        surface: '#FFFFFF',
+        'surface-bright': '#FFFFFF',
+        'surface-light': '#F5F5F5',
+        'surface-variant': '#ECEFF1',
+        'on-surface-variant': '#37474F',
+        'primary-darken-1': '#263238',
+        'secondary-darken-1': '#455A64',
+        'on-primary': '#FFFFFF',
+        'on-secondary': '#FFFFFF',
+        'on-background': '#212121',
+        'on-surface': '#212121',
+      }
+    },
+    dark: {
+      dark: true,
+      colors: {
+        primary: '#607D8B',
+        secondary: '#78909C',
+        accent: '#90A4AE',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107',
+        background: '#121212',
+        surface: '#1E1E1E',
+        'surface-bright': '#2C2C2C',
+        'surface-light': '#2C2C2C',
+        'surface-variant': '#1C2429',
+        'on-surface-variant': '#90A4AE',
+        'primary-darken-1': '#455A64',
+        'secondary-darken-1': '#546E7A',
+        'on-primary': '#FFFFFF',
+        'on-secondary': '#FFFFFF',
+        'on-background': '#FFFFFF',
+        'on-surface': '#FFFFFF',
+      }
     }
   }
 };