@vue-skuilder/cli 0.1.5 → 0.1.7

package/src/utils/prompts.ts

@@ -1,21 +1,92 @@
 import inquirer from 'inquirer';
 import chalk from 'chalk';
+import PouchDB from 'pouchdb';
 import { CliOptions, ProjectConfig, PREDEFINED_THEMES } from '../types.js';
 
+interface CourseInfo {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface CourseDocument {
+  name?: string;
+  title?: string;
+  description?: string;
+}
+
+/**
+ * Fetch available courses from a CouchDB server
+ */
+async function fetchAvailableCourses(
+  serverUrl: string,
+  username?: string,
+  password?: string
+): Promise<CourseInfo[]> {
+  const dbUrl = `${serverUrl}/coursedb-lookup`;
+  const dbOptions: Record<string, unknown> = {};
+
+  if (username && password) {
+    dbOptions.auth = {
+      username,
+      password,
+    };
+  }
+
+  console.log(chalk.gray(`📡 Connecting to: ${dbUrl}`));
+  const lookupDB = new PouchDB(dbUrl, dbOptions);
+
+  try {
+    await lookupDB.info();
+    console.log(chalk.green('✅ Connected to course lookup 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 course lookup database: ${errorMessage}`);
+  }
+
+  try {
+    const result = await lookupDB.allDocs({ include_docs: true });
+    const courses: CourseInfo[] = result.rows
+      .filter((row) => row.doc && !row.id.startsWith('_'))
+      .map((row) => {
+        const doc = row.doc as CourseDocument;
+        return {
+          id: row.id,
+          name: doc.name || doc.title || `Course ${row.id}`,
+          description: doc.description || undefined,
+        };
+      });
+
+    console.log(chalk.green(`✅ Found ${courses.length} available courses`));
+    return courses;
+  } catch {
+    console.warn(chalk.yellow('⚠️  Could not list courses from lookup database'));
+    return [];
+  }
+}
+
 /**
  * Convert hex color to closest ANSI color code
  */
 function hexToAnsi(hex: string): string {
   // Remove # if present
   hex = hex.replace('#', '');
-  
+
   // Convert hex to RGB
   const r = parseInt(hex.substr(0, 2), 16);
   const g = parseInt(hex.substr(2, 2), 16);
   const b = parseInt(hex.substr(4, 2), 16);
-  
+
   // Convert to 256-color ANSI
-  const ansiCode = 16 + (36 * Math.round(r / 255 * 5)) + (6 * Math.round(g / 255 * 5)) + Math.round(b / 255 * 5);
+  const ansiCode =
+    16 + 36 * Math.round((r / 255) * 5) + 6 * Math.round((g / 255) * 5) + Math.round((b / 255) * 5);
   return `\x1b[48;5;${ansiCode}m`;
 }
 
@@ -34,11 +105,11 @@ function createColorSwatch(hex: string, label: string): string {
 function createThemePreview(themeName: string): string {
   const theme = PREDEFINED_THEMES[themeName];
   const lightColors = theme.light.colors;
-  
+
   const primarySwatch = createColorSwatch(lightColors.primary, 'Primary');
   const secondarySwatch = createColorSwatch(lightColors.secondary, 'Secondary');
   const accentSwatch = createColorSwatch(lightColors.accent, 'Accent');
-  
+
   return `${primarySwatch} ${secondarySwatch} ${accentSwatch}`;
 }
 
@@ -47,30 +118,34 @@ function createThemePreview(themeName: string): string {
  */
 export function displayThemePreview(themeName: string): void {
   const theme = PREDEFINED_THEMES[themeName];
-  
+
   console.log(chalk.cyan('\n🎨 Theme Color Palette:'));
   console.log(chalk.white(`   ${theme.name.toUpperCase()} THEME`));
-  
+
   // Light theme colors
   console.log(chalk.white('\n   Light Mode:'));
   const lightColors = theme.light.colors;
   console.log(`     ${createColorSwatch(lightColors.primary, `Primary: ${lightColors.primary}`)}`);
-  console.log(`     ${createColorSwatch(lightColors.secondary, `Secondary: ${lightColors.secondary}`)}`);
+  console.log(
+    `     ${createColorSwatch(lightColors.secondary, `Secondary: ${lightColors.secondary}`)}`
+  );
   console.log(`     ${createColorSwatch(lightColors.accent, `Accent: ${lightColors.accent}`)}`);
   console.log(`     ${createColorSwatch(lightColors.success, `Success: ${lightColors.success}`)}`);
   console.log(`     ${createColorSwatch(lightColors.warning, `Warning: ${lightColors.warning}`)}`);
   console.log(`     ${createColorSwatch(lightColors.error, `Error: ${lightColors.error}`)}`);
-  
+
   // Dark theme colors
   console.log(chalk.white('\n   Dark Mode:'));
   const darkColors = theme.dark.colors;
   console.log(`     ${createColorSwatch(darkColors.primary, `Primary: ${darkColors.primary}`)}`);
-  console.log(`     ${createColorSwatch(darkColors.secondary, `Secondary: ${darkColors.secondary}`)}`);
+  console.log(
+    `     ${createColorSwatch(darkColors.secondary, `Secondary: ${darkColors.secondary}`)}`
+  );
   console.log(`     ${createColorSwatch(darkColors.accent, `Accent: ${darkColors.accent}`)}`);
   console.log(`     ${createColorSwatch(darkColors.success, `Success: ${darkColors.success}`)}`);
   console.log(`     ${createColorSwatch(darkColors.warning, `Warning: ${darkColors.warning}`)}`);
   console.log(`     ${createColorSwatch(darkColors.error, `Error: ${darkColors.error}`)}`);
-  
+
   console.log(chalk.gray(`\n   Default mode: ${theme.defaultMode}`));
 }
 
@@ -81,7 +156,7 @@ export async function gatherProjectConfig(
   console.log(chalk.cyan('\n🚀 Creating a new Skuilder course application\n'));
 
   let config: Partial<ProjectConfig> = {
-    projectName
+    projectName,
   };
 
   if (options.interactive) {
@@ -91,7 +166,7 @@ export async function gatherProjectConfig(
         name: 'title',
         message: 'Course title:',
         default: formatProjectName(projectName),
-        validate: (input: string) => input.trim().length > 0 || 'Course title is required'
+        validate: (input: string) => input.trim().length > 0 || 'Course title is required',
       },
       {
         type: 'list',
@@ -100,14 +175,14 @@ export async function gatherProjectConfig(
         choices: [
           {
             name: 'Dynamic (Connect to CouchDB server)',
-            value: 'couch'
+            value: 'couch',
           },
           {
             name: 'Static (Self-contained JSON files)',
-            value: 'static'
-          }
+            value: 'static',
+          },
         ],
-        default: options.dataLayer === 'dynamic' ? 'couch' : 'static'
+        default: options.dataLayer === 'dynamic' ? 'couch' : 'static',
       },
       {
         type: 'input',
@@ -123,13 +198,48 @@ export async function gatherProjectConfig(
           } catch {
             return 'Please enter a valid URL';
           }
-        }
+        },
       },
       {
         type: 'input',
         name: 'courseId',
         message: 'Course ID to import (optional):',
-        when: (answers) => answers.dataLayerType === 'couch'
+        when: (answers) => answers.dataLayerType === 'couch',
+      },
+      {
+        type: 'confirm',
+        name: 'importCourseData',
+        message: 'Would you like to import course data from a CouchDB server?',
+        default: false,
+        when: (answers) => answers.dataLayerType === 'static',
+      },
+      {
+        type: 'input',
+        name: 'importServerUrl',
+        message: 'CouchDB server URL:',
+        default: 'http://localhost:5984',
+        when: (answers) => answers.dataLayerType === 'static' && answers.importCourseData,
+        validate: (input: string) => {
+          if (!input.trim()) return 'CouchDB URL is required';
+          try {
+            new URL(input);
+            return true;
+          } catch {
+            return 'Please enter a valid URL';
+          }
+        },
+      },
+      {
+        type: 'input',
+        name: 'importUsername',
+        message: 'Username:',
+        when: (answers) => answers.dataLayerType === 'static' && answers.importCourseData,
+      },
+      {
+        type: 'password',
+        name: 'importPassword',
+        message: 'Password:',
+        when: (answers) => answers.dataLayerType === 'static' && answers.importCourseData,
       },
       {
         type: 'list',
@@ -138,23 +248,23 @@ export async function gatherProjectConfig(
         choices: [
           {
             name: `Default (Material Blue) ${createThemePreview('default')}`,
-            value: 'default'
+            value: 'default',
           },
           {
             name: `Medical (Healthcare Green) ${createThemePreview('medical')}`,
-            value: 'medical'
+            value: 'medical',
           },
           {
             name: `Educational (Academic Orange) ${createThemePreview('educational')}`,
-            value: 'educational'
+            value: 'educational',
           },
           {
             name: `Corporate (Professional Gray) ${createThemePreview('corporate')}`,
-            value: 'corporate'
-          }
+            value: 'corporate',
+          },
         ],
-        default: options.theme
-      }
+        default: options.theme,
+      },
     ]);
 
     config = {
@@ -163,9 +273,111 @@ export async function gatherProjectConfig(
       dataLayerType: answers.dataLayerType,
       couchdbUrl: answers.couchdbUrl,
       course: answers.courseId,
-      theme: PREDEFINED_THEMES[answers.themeName]
+      theme: PREDEFINED_THEMES[answers.themeName],
+      importCourseData: answers.importCourseData,
+      importServerUrl: answers.importServerUrl,
+      importUsername: answers.importUsername,
+      importPassword: answers.importPassword,
     };
 
+    // If user wants to import course data, fetch available courses and let them select
+    if (answers.importCourseData && answers.importServerUrl) {
+      try {
+        console.log(chalk.cyan('\n📚 Fetching available courses...'));
+        const availableCourses = await fetchAvailableCourses(
+          answers.importServerUrl,
+          answers.importUsername,
+          answers.importPassword
+        );
+
+        if (availableCourses.length > 0) {
+          const courseSelectionAnswers = await inquirer.prompt([
+            {
+              type: 'checkbox',
+              name: 'selectedCourseIds',
+              message: 'Select courses to import:',
+              choices: availableCourses.map((course) => ({
+                name: `${course.name} (${course.id})`,
+                value: course.id,
+                short: course.name,
+              })),
+              validate: (selected: string[]) => {
+                if (selected.length === 0) {
+                  return 'Please select at least one course to import';
+                }
+                return true;
+              },
+            },
+          ]);
+
+          config.importCourseIds = courseSelectionAnswers.selectedCourseIds;
+        } else {
+          console.log(chalk.yellow('⚠️  No courses found in the lookup database.'));
+          const manualCourseAnswers = await inquirer.prompt([
+            {
+              type: 'input',
+              name: 'manualCourseIds',
+              message: 'Enter course IDs to import (comma-separated):',
+              validate: (input: string) => {
+                if (!input.trim()) {
+                  return 'Please enter at least one course ID';
+                }
+                return true;
+              },
+            },
+          ]);
+
+          config.importCourseIds = manualCourseAnswers.manualCourseIds
+            .split(',')
+            .map((id: string) => id.trim())
+            .filter((id: string) => id.length > 0);
+        }
+      } catch (error: unknown) {
+        console.error(chalk.red('❌ Failed to fetch courses:'));
+        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));
+
+        const fallbackAnswers = await inquirer.prompt([
+          {
+            type: 'confirm',
+            name: 'continueAnyway',
+            message: 'Continue with manual course ID entry?',
+            default: true,
+          },
+        ]);
+
+        if (fallbackAnswers.continueAnyway) {
+          const manualCourseAnswers = await inquirer.prompt([
+            {
+              type: 'input',
+              name: 'manualCourseIds',
+              message: 'Enter course IDs to import (comma-separated):',
+              validate: (input: string) => {
+                if (!input.trim()) {
+                  return 'Please enter at least one course ID';
+                }
+                return true;
+              },
+            },
+          ]);
+
+          config.importCourseIds = manualCourseAnswers.manualCourseIds
+            .split(',')
+            .map((id: string) => id.trim())
+            .filter((id: string) => id.length > 0);
+        } else {
+          config.importCourseData = false;
+        }
+      }
+    }
+
     // Show comprehensive theme preview
     displayThemePreview(answers.themeName);
   } else {
@@ -176,12 +388,14 @@ export async function gatherProjectConfig(
       dataLayerType: options.dataLayer === 'dynamic' ? 'couch' : 'static',
       couchdbUrl: options.couchdbUrl,
       course: options.courseId,
-      theme: PREDEFINED_THEMES[options.theme]
+      theme: PREDEFINED_THEMES[options.theme],
     };
 
     // Validate required fields for non-interactive mode
     if (config.dataLayerType === 'couch' && !config.couchdbUrl) {
-      throw new Error('CouchDB URL is required when using dynamic data layer. Use --couchdb-url option.');
+      throw new Error(
+        'CouchDB URL is required when using dynamic data layer. Use --couchdb-url option.'
+      );
     }
   }
 
@@ -196,16 +410,18 @@ export async function confirmProjectCreation(
   console.log(`   Project Name: ${chalk.white(config.projectName)}`);
   console.log(`   Course Title: ${chalk.white(config.title)}`);
   console.log(`   Data Layer: ${chalk.white(config.dataLayerType)}`);
-  
+
   if (config.couchdbUrl) {
     console.log(`   CouchDB URL: ${chalk.white(config.couchdbUrl)}`);
   }
-  
+
   if (config.course) {
     console.log(`   Course ID: ${chalk.white(config.course)}`);
   }
-  
-  console.log(`   Theme: ${chalk.white(config.theme.name)} ${createThemePreview(config.theme.name)}`);
+
+  console.log(
+    `   Theme: ${chalk.white(config.theme.name)} ${createThemePreview(config.theme.name)}`
+  );
   console.log(`   Directory: ${chalk.white(projectPath)}`);
 
   const { confirmed } = await inquirer.prompt([
@@ -213,19 +429,16 @@ export async function confirmProjectCreation(
       type: 'confirm',
       name: 'confirmed',
       message: 'Create project with these settings?',
-      default: true
-    }
+      default: true,
+    },
   ]);
 
   return confirmed;
 }
 
-
-
 function formatProjectName(projectName: string): string {
   return projectName
     .split(/[-_\s]+/)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
     .join(' ');
 }
-

package/src/utils/template.ts

@@ -62,7 +62,8 @@ export async function copyDirectory(
 export async function transformPackageJson(
   packageJsonPath: string,
   projectName: string,
-  cliVersion: string
+  cliVersion: string,
+  config: ProjectConfig
 ): Promise<void> {
   const content = await fs.readFile(packageJsonPath, 'utf-8');
   const packageJson = JSON.parse(content);
@@ -87,6 +88,20 @@ export async function transformPackageJson(
     packageJson.devDependencies['terser'] = '^5.39.0';
   }
 
+  // Add CLI as devDependency for all projects
+  if (!packageJson.devDependencies) {
+    packageJson.devDependencies = {};
+  }
+  packageJson.devDependencies['@vue-skuilder/cli'] = `^${cliVersion}`;
+
+  // Add studio script for static data layer projects
+  if (config.dataLayerType === 'static') {
+    if (!packageJson.scripts) {
+      packageJson.scripts = {};
+    }
+    packageJson.scripts['studio'] = 'skuilder studio';
+  }
+
   // Remove CLI-specific fields that don't belong in generated projects
   delete packageJson.publishConfig;
 
@@ -174,10 +189,20 @@ export async function generateSkuilderConfig(
     dataLayerType: config.dataLayerType,
   };
 
-  if (config.course) {
+  // For dynamic data layer, use the specified course ID
+  if (config.dataLayerType === 'couch' && config.course) {
     skuilderConfig.course = config.course;
   }
 
+  // For static data layer with imported courses, use the first course as primary
+  if (
+    config.dataLayerType === 'static' &&
+    config.importCourseIds &&
+    config.importCourseIds.length > 0
+  ) {
+    skuilderConfig.course = config.importCourseIds[0];
+  }
+
   if (config.couchdbUrl) {
     skuilderConfig.couchdbUrl = config.couchdbUrl;
   }
@@ -189,6 +214,42 @@ export async function generateSkuilderConfig(
   await fs.writeFile(configPath, JSON.stringify(skuilderConfig, null, 2));
 }
 
+/**
+ * Transform tsconfig.json to be standalone (remove base config reference)
+ */
+export async function transformTsConfig(tsconfigPath: string): Promise<void> {
+  const content = await fs.readFile(tsconfigPath, 'utf-8');
+  const tsconfig = JSON.parse(content);
+
+  // Remove the extends reference to the monorepo base config
+  delete tsconfig.extends;
+
+  // Merge in the essential settings from the base config that scaffolded apps need
+  tsconfig.compilerOptions = {
+    ...tsconfig.compilerOptions,
+    // Essential TypeScript settings from base config
+    strict: true,
+    skipLibCheck: true,
+    forceConsistentCasingInFileNames: true,
+    esModuleInterop: true,
+    allowSyntheticDefaultImports: true,
+    // Keep existing Vue/Vite-specific settings
+    target: tsconfig.compilerOptions.target || 'ESNext',
+    useDefineForClassFields: tsconfig.compilerOptions.useDefineForClassFields,
+    module: tsconfig.compilerOptions.module || 'ESNext',
+    moduleResolution: tsconfig.compilerOptions.moduleResolution || 'bundler',
+    jsx: tsconfig.compilerOptions.jsx || 'preserve',
+    resolveJsonModule: tsconfig.compilerOptions.resolveJsonModule,
+    isolatedModules: tsconfig.compilerOptions.isolatedModules,
+    lib: tsconfig.compilerOptions.lib || ['ESNext', 'DOM'],
+    noEmit: tsconfig.compilerOptions.noEmit,
+    baseUrl: tsconfig.compilerOptions.baseUrl || '.',
+    types: tsconfig.compilerOptions.types || ['vite/client'],
+  };
+
+  await fs.writeFile(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+}
+
 /**
  * Generate .gitignore file for the project
  */
@@ -316,10 +377,18 @@ Thumbs.db
  * Generate project README.md
  */
 export async function generateReadme(readmePath: string, config: ProjectConfig): Promise<void> {
-  const dataLayerInfo =
-    config.dataLayerType === 'static'
-      ? 'This project uses a static data layer with JSON files.'
-      : `This project connects to CouchDB at: ${config.couchdbUrl || '[URL not specified]'}`;
+  let dataLayerInfo = '';
+
+  if (config.dataLayerType === 'static') {
+    dataLayerInfo = 'This project uses a static data layer with JSON files.';
+
+    if (config.importCourseIds && config.importCourseIds.length > 0) {
+      const courseList = config.importCourseIds.map((id) => `- ${id}`).join('\n');
+      dataLayerInfo += `\n\n**Imported Courses:**\n${courseList}\n\nCourse data is stored in \`public/static-courses/\` and loaded automatically.`;
+    }
+  } else {
+    dataLayerInfo = `This project connects to CouchDB at: ${config.couchdbUrl || '[URL not specified]'}`;
+  }
 
   const readme = `# ${config.title}
 
@@ -358,7 +427,7 @@ Course configuration is managed in \`skuilder.config.json\`. You can modify:
 
 Current theme: **${config.theme.name}** (${config.theme.defaultMode} mode)
 - Primary: ${config.theme.light.colors.primary}
-- Secondary: ${config.theme.light.colors.secondary}  
+- Secondary: ${config.theme.light.colors.secondary}
 - Accent: ${config.theme.light.colors.accent}
 
 This theme includes both light and dark variants. The application will use the ${config.theme.defaultMode} theme by default, but users can toggle between light and dark modes in their settings.
@@ -429,7 +498,7 @@ export async function processTemplate(
 
   console.log(chalk.blue('⚙️  Configuring package.json...'));
   const packageJsonPath = path.join(projectPath, 'package.json');
-  await transformPackageJson(packageJsonPath, config.projectName, cliVersion);
+  await transformPackageJson(packageJsonPath, config.projectName, cliVersion, config);
 
   console.log(chalk.blue('🔧 Creating vite.config.ts...'));
   const viteConfigPath = path.join(projectPath, 'vite.config.ts');
@@ -437,6 +506,12 @@ export async function processTemplate(
     await createViteConfig(viteConfigPath);
   }
 
+  console.log(chalk.blue('🔧 Transforming tsconfig.json...'));
+  const tsconfigPath = path.join(projectPath, 'tsconfig.json');
+  if (existsSync(tsconfigPath)) {
+    await transformTsConfig(tsconfigPath);
+  }
+
   console.log(chalk.blue('🔧 Generating configuration...'));
   const configPath = path.join(projectPath, 'skuilder.config.json');
   await generateSkuilderConfig(configPath, config);