@vue-skuilder/cli 0.1.3 → 0.1.5

package/src/utils/prompts.ts

@@ -1,6 +1,78 @@
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import { CliOptions, ProjectConfig, PREDEFINED_THEMES, ThemeConfig } from '../types.js';
+import { CliOptions, ProjectConfig, PREDEFINED_THEMES } from '../types.js';
+
+/**
+ * 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);
+  return `\x1b[48;5;${ansiCode}m`;
+}
+
+/**
+ * Create a color swatch for terminal display
+ */
+function createColorSwatch(hex: string, label: string): string {
+  const colorCode = hexToAnsi(hex);
+  const reset = '\x1b[0m';
+  return `${colorCode}  ${reset} ${label}`;
+}
+
+/**
+ * Create theme preview with color swatches
+ */
+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}`;
+}
+
+/**
+ * Display comprehensive theme preview after selection
+ */
+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.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.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}`));
+}
 
 export async function gatherProjectConfig(
   projectName: string,
@@ -65,19 +137,19 @@ export async function gatherProjectConfig(
         message: 'Select theme:',
         choices: [
           {
-            name: 'Default (Material Blue)',
+            name: `Default (Material Blue) ${createThemePreview('default')}`,
             value: 'default'
           },
           {
-            name: 'Medical (Healthcare Green)',
+            name: `Medical (Healthcare Green) ${createThemePreview('medical')}`,
             value: 'medical'
           },
           {
-            name: 'Educational (Academic Orange)',
+            name: `Educational (Academic Orange) ${createThemePreview('educational')}`,
             value: 'educational'
           },
           {
-            name: 'Corporate (Professional Gray)',
+            name: `Corporate (Professional Gray) ${createThemePreview('corporate')}`,
             value: 'corporate'
           }
         ],
@@ -93,6 +165,9 @@ export async function gatherProjectConfig(
       course: answers.courseId,
       theme: PREDEFINED_THEMES[answers.themeName]
     };
+
+    // Show comprehensive theme preview
+    displayThemePreview(answers.themeName);
   } else {
     // Non-interactive mode: use provided options
     config = {
@@ -130,7 +205,7 @@ export async function confirmProjectCreation(
     console.log(`   Course ID: ${chalk.white(config.course)}`);
   }
   
-  console.log(`   Theme: ${chalk.white(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([
@@ -145,48 +220,7 @@ export async function confirmProjectCreation(
   return confirmed;
 }
 
-export async function promptForCustomTheme(): Promise<ThemeConfig> {
-  console.log(chalk.cyan('\n🎨 Custom Theme Configuration\n'));
-
-  const answers = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'name',
-      message: 'Theme name:',
-      validate: (input: string) => input.trim().length > 0 || 'Theme name is required'
-    },
-    {
-      type: 'input',
-      name: 'primary',
-      message: 'Primary color (hex):',
-      default: '#1976D2',
-      validate: validateHexColor
-    },
-    {
-      type: 'input',
-      name: 'secondary',
-      message: 'Secondary color (hex):',
-      default: '#424242',
-      validate: validateHexColor
-    },
-    {
-      type: 'input',
-      name: 'accent',
-      message: 'Accent color (hex):',
-      default: '#82B1FF',
-      validate: validateHexColor
-    }
-  ]);
 
-  return {
-    name: answers.name,
-    colors: {
-      primary: answers.primary,
-      secondary: answers.secondary,
-      accent: answers.accent
-    }
-  };
-}
 
 function formatProjectName(projectName: string): string {
   return projectName
@@ -195,10 +229,3 @@ function formatProjectName(projectName: string): string {
     .join(' ');
 }
 
-function validateHexColor(input: string): boolean | string {
-  const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-  if (!hexColorRegex.test(input)) {
-    return 'Please enter a valid hex color (e.g., #1976D2)';
-  }
-  return true;
-}

package/src/utils/template.ts

@@ -1,5 +1,4 @@
-import { promises as fs } from 'fs';
-import { existsSync } from 'fs';
+import { promises as fs, existsSync } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import chalk from 'chalk';
@@ -14,7 +13,7 @@ const __dirname = path.dirname(__filename);
 export async function findStandaloneUiPath(): Promise<string> {
   // Start from CLI package root and work upward
   let currentDir = path.join(__dirname, '..', '..');
-  
+
   while (currentDir !== path.dirname(currentDir)) {
     const nodeModulesPath = path.join(currentDir, 'node_modules', '@vue-skuilder', 'standalone-ui');
     if (existsSync(nodeModulesPath)) {
@@ -22,8 +21,10 @@ export async function findStandaloneUiPath(): Promise<string> {
     }
     currentDir = path.dirname(currentDir);
   }
-  
-  throw new Error('Could not find @vue-skuilder/standalone-ui package. Please ensure it is installed.');
+
+  throw new Error(
+    'Could not find @vue-skuilder/standalone-ui package. Please ensure it is installed.'
+  );
 }
 
 /**
@@ -35,18 +36,18 @@ export async function copyDirectory(
   excludePatterns: string[] = ['node_modules', 'dist', '.git', 'cypress']
 ): Promise<void> {
   const entries = await fs.readdir(source, { withFileTypes: true });
-  
+
   await fs.mkdir(destination, { recursive: true });
-  
+
   for (const entry of entries) {
     const sourcePath = path.join(source, entry.name);
     const destPath = path.join(destination, entry.name);
-    
+
     // Skip excluded patterns
-    if (excludePatterns.some(pattern => entry.name.includes(pattern))) {
+    if (excludePatterns.some((pattern) => entry.name.includes(pattern))) {
       continue;
     }
-    
+
     if (entry.isDirectory()) {
       await copyDirectory(sourcePath, destPath, excludePatterns);
     } else {
@@ -65,12 +66,12 @@ export async function transformPackageJson(
 ): Promise<void> {
   const content = await fs.readFile(packageJsonPath, 'utf-8');
   const packageJson = JSON.parse(content);
-  
+
   // Update basic project info
   packageJson.name = projectName;
   packageJson.description = `Skuilder course application: ${projectName}`;
   packageJson.version = '1.0.0';
-  
+
   // Transform workspace dependencies to published versions
   if (packageJson.dependencies) {
     for (const [depName, version] of Object.entries(packageJson.dependencies)) {
@@ -80,13 +81,87 @@ export async function transformPackageJson(
       }
     }
   }
-  
+
+  // Add missing terser devDependency for build minification
+  if (packageJson.devDependencies && !packageJson.devDependencies['terser']) {
+    packageJson.devDependencies['terser'] = '^5.39.0';
+  }
+
   // Remove CLI-specific fields that don't belong in generated projects
   delete packageJson.publishConfig;
-  
+
   await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
 }
 
+/**
+ * Create a vite.config.ts to work with published packages instead of workspace sources
+ *
+ * // [ ] This should be revised so that it works from the existing vite.config.ts in standalone-ui. As is, it recreates 95% of the same config.
+ */
+export async function createViteConfig(viteConfigPath: string): Promise<void> {
+  // Create a clean vite config for standalone projects
+  const transformedContent = `// packages/standalone-ui/vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      // Alias for internal src paths
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+
+      // Add events alias if needed (often required by dependencies)
+      events: 'events',
+    },
+    extensions: ['.js', '.ts', '.json', '.vue'],
+    dedupe: [
+      // Ensure single instances of core libs and published packages
+      'vue',
+      'vuetify',
+      'pinia',
+      'vue-router',
+      '@vue-skuilder/db',
+      '@vue-skuilder/common',
+      '@vue-skuilder/common-ui',
+      '@vue-skuilder/courses',
+    ],
+  },
+  // --- Dependencies optimization ---
+  optimizeDeps: {
+    // Help Vite pre-bundle dependencies from published packages
+    include: [
+      '@vue-skuilder/common-ui',
+      '@vue-skuilder/db',
+      '@vue-skuilder/common',
+      '@vue-skuilder/courses',
+    ],
+  },
+  server: {
+    port: 5173, // Use standard Vite port for standalone projects
+  },
+  build: {
+    sourcemap: true,
+    target: 'es2020',
+    minify: 'terser',
+    terserOptions: {
+      keep_classnames: true,
+    },
+  },
+  // Add define block for process polyfills
+  define: {
+    global: 'window',
+    'process.env': process.env,
+    'process.browser': true,
+    'process.version': JSON.stringify(process.version),
+  },
+});
+`;
+
+  await fs.writeFile(viteConfigPath, transformedContent);
+}
+
 /**
  * Generate skuilder.config.json based on project configuration
  */
@@ -96,35 +171,156 @@ export async function generateSkuilderConfig(
 ): Promise<void> {
   const skuilderConfig: SkuilderConfig = {
     title: config.title,
-    dataLayerType: config.dataLayerType
+    dataLayerType: config.dataLayerType,
   };
-  
+
   if (config.course) {
     skuilderConfig.course = config.course;
   }
-  
+
   if (config.couchdbUrl) {
     skuilderConfig.couchdbUrl = config.couchdbUrl;
   }
-  
+
   if (config.theme) {
     skuilderConfig.theme = config.theme;
   }
-  
+
   await fs.writeFile(configPath, JSON.stringify(skuilderConfig, null, 2));
 }
 
+/**
+ * Generate .gitignore file for the project
+ */
+export async function generateGitignore(gitignorePath: string): Promise<void> {
+  const gitignoreContent = `# Dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# Production builds
+/dist
+/build
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Editor directories and files
+.vscode/
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS generated files
+Thumbs.db
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Local development
+.env.development
+.env.production
+
+# Package manager lockfiles (uncomment if you want to ignore them)
+# package-lock.json
+# yarn.lock
+# pnpm-lock.yaml
+
+# Skuilder specific
+/src/data/local-*.json
+`;
+
+  await fs.writeFile(gitignorePath, gitignoreContent);
+}
+
 /**
  * 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]'}`;
-    
+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]'}`;
+
   const readme = `# ${config.title}
 
 A Skuilder course application built with Vue 3, Vuetify, and Pinia.
@@ -160,10 +356,42 @@ Course configuration is managed in \`skuilder.config.json\`. You can modify:
 
 ## Theme
 
-Current theme: **${config.theme.name}**
-- Primary: ${config.theme.colors.primary}
-- Secondary: ${config.theme.colors.secondary}  
-- Accent: ${config.theme.colors.accent}
+Current theme: **${config.theme.name}** (${config.theme.defaultMode} mode)
+- Primary: ${config.theme.light.colors.primary}
+- 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.
+
+### Theme Customization
+
+To customize the theme colors, edit the \`theme\` section in \`skuilder.config.json\`:
+
+\`\`\`json
+{
+  "theme": {
+    "name": "custom",
+    "defaultMode": "light",
+    "light": {
+      "dark": false,
+      "colors": {
+        "primary": "#your-color",
+        "secondary": "#your-color",
+        "accent": "#your-color"
+        // ... other semantic colors
+      }
+    },
+    "dark": {
+      "dark": true,
+      "colors": {
+        // ... dark variant colors
+      }
+    }
+  }
+}
+\`\`\`
+
+The theme system supports all Vuetify semantic colors including error, success, warning, info, background, surface, and text colors. Changes to the configuration file are applied automatically on restart.
 
 ## Testing
 
@@ -195,21 +423,31 @@ export async function processTemplate(
 ): Promise<void> {
   console.log(chalk.blue('📦 Locating standalone-ui template...'));
   const templatePath = await findStandaloneUiPath();
-  
+
   console.log(chalk.blue('📂 Copying project files...'));
   await copyDirectory(templatePath, projectPath);
-  
+
   console.log(chalk.blue('⚙️  Configuring package.json...'));
   const packageJsonPath = path.join(projectPath, 'package.json');
   await transformPackageJson(packageJsonPath, config.projectName, cliVersion);
-  
+
+  console.log(chalk.blue('🔧 Creating vite.config.ts...'));
+  const viteConfigPath = path.join(projectPath, 'vite.config.ts');
+  if (existsSync(viteConfigPath)) {
+    await createViteConfig(viteConfigPath);
+  }
+
   console.log(chalk.blue('🔧 Generating configuration...'));
   const configPath = path.join(projectPath, 'skuilder.config.json');
   await generateSkuilderConfig(configPath, config);
-  
+
   console.log(chalk.blue('📝 Creating README...'));
   const readmePath = path.join(projectPath, 'README.md');
   await generateReadme(readmePath, config);
-  
+
+  console.log(chalk.blue('📄 Generating .gitignore...'));
+  const gitignorePath = path.join(projectPath, '.gitignore');
+  await generateGitignore(gitignorePath);
+
   console.log(chalk.green('✅ Template processing complete!'));
-}
+}