skuilder 0.1.2 → 0.1.4

package/src/utils/prompts.ts

@@ -0,0 +1,204 @@
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import { CliOptions, ProjectConfig, PREDEFINED_THEMES, ThemeConfig } from '../types.js';
+
+export async function gatherProjectConfig(
+  projectName: string,
+  options: CliOptions
+): Promise<ProjectConfig> {
+  console.log(chalk.cyan('\n🚀 Creating a new Skuilder course application\n'));
+
+  let config: Partial<ProjectConfig> = {
+    projectName
+  };
+
+  if (options.interactive) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'title',
+        message: 'Course title:',
+        default: formatProjectName(projectName),
+        validate: (input: string) => input.trim().length > 0 || 'Course title is required'
+      },
+      {
+        type: 'list',
+        name: 'dataLayerType',
+        message: 'Data layer type:',
+        choices: [
+          {
+            name: 'Dynamic (Connect to CouchDB server)',
+            value: 'couch'
+          },
+          {
+            name: 'Static (Self-contained JSON files)',
+            value: 'static'
+          }
+        ],
+        default: options.dataLayer === 'dynamic' ? 'couch' : 'static'
+      },
+      {
+        type: 'input',
+        name: 'couchdbUrl',
+        message: 'CouchDB server URL:',
+        default: 'http://localhost:5984',
+        when: (answers) => answers.dataLayerType === 'couch',
+        validate: (input: string) => {
+          if (!input.trim()) return 'CouchDB URL is required for dynamic data layer';
+          try {
+            new URL(input);
+            return true;
+          } catch {
+            return 'Please enter a valid URL';
+          }
+        }
+      },
+      {
+        type: 'input',
+        name: 'courseId',
+        message: 'Course ID to import (optional):',
+        when: (answers) => answers.dataLayerType === 'couch'
+      },
+      {
+        type: 'list',
+        name: 'themeName',
+        message: 'Select theme:',
+        choices: [
+          {
+            name: 'Default (Material Blue)',
+            value: 'default'
+          },
+          {
+            name: 'Medical (Healthcare Green)',
+            value: 'medical'
+          },
+          {
+            name: 'Educational (Academic Orange)',
+            value: 'educational'
+          },
+          {
+            name: 'Corporate (Professional Gray)',
+            value: 'corporate'
+          }
+        ],
+        default: options.theme
+      }
+    ]);
+
+    config = {
+      ...config,
+      title: answers.title,
+      dataLayerType: answers.dataLayerType,
+      couchdbUrl: answers.couchdbUrl,
+      course: answers.courseId,
+      theme: PREDEFINED_THEMES[answers.themeName]
+    };
+  } else {
+    // Non-interactive mode: use provided options
+    config = {
+      projectName,
+      title: formatProjectName(projectName),
+      dataLayerType: options.dataLayer === 'dynamic' ? 'couch' : 'static',
+      couchdbUrl: options.couchdbUrl,
+      course: options.courseId,
+      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.');
+    }
+  }
+
+  return config as ProjectConfig;
+}
+
+export async function confirmProjectCreation(
+  config: ProjectConfig,
+  projectPath: string
+): Promise<boolean> {
+  console.log(chalk.yellow('\n📋 Project Configuration Summary:'));
+  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)}`);
+  console.log(`   Directory: ${chalk.white(projectPath)}`);
+
+  const { confirmed } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'confirmed',
+      message: 'Create project with these settings?',
+      default: true
+    }
+  ]);
+
+  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
+    .split(/[-_\s]+/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .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

@@ -0,0 +1,421 @@
+import { promises as fs, existsSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import { ProjectConfig, SkuilderConfig } from '../types.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Find the standalone-ui package in node_modules
+ */
+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)) {
+      return nodeModulesPath;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  
+  throw new Error('Could not find @vue-skuilder/standalone-ui package. Please ensure it is installed.');
+}
+
+/**
+ * Copy directory recursively, excluding certain files/directories
+ */
+export async function copyDirectory(
+  source: string,
+  destination: string,
+  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))) {
+      continue;
+    }
+    
+    if (entry.isDirectory()) {
+      await copyDirectory(sourcePath, destPath, excludePatterns);
+    } else {
+      await fs.copyFile(sourcePath, destPath);
+    }
+  }
+}
+
+/**
+ * Transform package.json to use published dependencies instead of workspace references
+ */
+export async function transformPackageJson(
+  packageJsonPath: string,
+  projectName: string,
+  cliVersion: string
+): 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)) {
+      if (typeof version === 'string' && version.startsWith('workspace:')) {
+        // Replace workspace references with CLI's version
+        packageJson.dependencies[depName] = `^${cliVersion}`;
+      }
+    }
+  }
+  
+  // 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
+ */
+export async function generateSkuilderConfig(
+  configPath: string,
+  config: ProjectConfig
+): Promise<void> {
+  const skuilderConfig: SkuilderConfig = {
+    title: config.title,
+    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]'}`;
+    
+  const readme = `# ${config.title}
+
+A Skuilder course application built with Vue 3, Vuetify, and Pinia.
+
+## Data Layer
+
+${dataLayerInfo}
+
+## Development
+
+Install dependencies:
+\`\`\`bash
+npm install
+\`\`\`
+
+Start the development server:
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Build for production:
+\`\`\`bash
+npm run build
+\`\`\`
+
+## Configuration
+
+Course configuration is managed in \`skuilder.config.json\`. You can modify:
+- Course title
+- Data layer settings
+- Theme customization
+- Database connection details (for dynamic data layer)
+
+## Theme
+
+Current theme: **${config.theme.name}**
+- Primary: ${config.theme.colors.primary}
+- Secondary: ${config.theme.colors.secondary}  
+- Accent: ${config.theme.colors.accent}
+
+## Testing
+
+Run end-to-end tests:
+\`\`\`bash
+npm run test:e2e
+\`\`\`
+
+Run tests in headless mode:
+\`\`\`bash
+npm run test:e2e:headless
+\`\`\`
+
+## Learn More
+
+Visit the [Skuilder documentation](https://github.com/NiloCK/vue-skuilder) for more information about building course applications.
+`;
+
+  await fs.writeFile(readmePath, readme);
+}
+
+/**
+ * Copy and transform the standalone-ui template to create a new project
+ */
+export async function processTemplate(
+  projectPath: string,
+  config: ProjectConfig,
+  cliVersion: string
+): 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!'));
+}

package/tsconfig.json

@@ -1,27 +1,18 @@
 {
-  "exclude": [
-    "node_modules"
-  ],
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "declaration": false,
-    "noResolve": false,
-    "jsx": "react",
-    "reactNamespace": "RX",
-    "module": "commonjs",
-    "target": "es5",
-    "experimentalDecorators": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "outDir": "./dist/",
-    "types": [
-      "node"
-    ]
-  },
-  "typeAcquisition": {
-    "enable": true
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": false
   },
   "include": [
-    "./src/**/*"
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
   ]
 }

package/.npmignore

@@ -1,56 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
-
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
-
-.vscode
-dist/