create-propelkit 1.0.0

package/src/setup-wizard.js

@@ -0,0 +1,315 @@
+const inquirer = require('inquirer');
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const SETUP_MARKER = '.propelkit-setup-complete';
+
+/**
+ * Validation functions for edge case handling
+ */
+
+/**
+ * Validate brand name
+ * - Rejects empty strings and whitespace-only
+ * - Allows Unicode letters, numbers, punctuation, spaces, emoji
+ * - Rejects null bytes and control characters
+ * - Max length: 100 characters
+ */
+function validateBrandName(input) {
+  const trimmed = input.trim();
+
+  if (!trimmed) {
+    return { valid: false, error: 'Brand name cannot be empty' };
+  }
+
+  // Reject null bytes and control characters (except whitespace)
+  if (/[\x00-\x08\x0B\x0C\x0E-\x1F]/.test(trimmed)) {
+    return { valid: false, error: 'Brand name contains invalid control characters' };
+  }
+
+  if (trimmed.length > 100) {
+    return { valid: false, error: 'Brand name must be 100 characters or less' };
+  }
+
+  // Accept Unicode letters, numbers, punctuation, spaces, and symbols (including emoji)
+  // \p{L} = letters, \p{N} = numbers, \p{P} = punctuation, \p{Z} = spaces, \p{S} = symbols (emoji)
+  const validPattern = /^[\p{L}\p{N}\p{P}\p{Z}\p{S}\s]+$/u;
+  if (!validPattern.test(trimmed)) {
+    return { valid: false, error: 'Brand name contains invalid characters' };
+  }
+
+  return { valid: true, value: trimmed };
+}
+
+/**
+ * Validate tagline
+ * - Same rules as brand name
+ * - Max length: 200 characters
+ */
+function validateTagline(input) {
+  const trimmed = input.trim();
+
+  if (!trimmed) {
+    return { valid: false, error: 'Tagline cannot be empty' };
+  }
+
+  if (/[\x00-\x08\x0B\x0C\x0E-\x1F]/.test(trimmed)) {
+    return { valid: false, error: 'Tagline contains invalid control characters' };
+  }
+
+  if (trimmed.length > 200) {
+    return { valid: false, error: 'Tagline must be 200 characters or less' };
+  }
+
+  const validPattern = /^[\p{L}\p{N}\p{P}\p{Z}\p{S}\s]+$/u;
+  if (!validPattern.test(trimmed)) {
+    return { valid: false, error: 'Tagline contains invalid characters' };
+  }
+
+  return { valid: true, value: trimmed };
+}
+
+/**
+ * Validate email
+ * - Max length: 254 characters (RFC 5321)
+ * - Lowercase transformation
+ */
+function validateEmail(input) {
+  const trimmed = input.trim().toLowerCase();
+
+  if (!trimmed) {
+    return { valid: false, error: 'Email cannot be empty' };
+  }
+
+  if (!/\S+@\S+\.\S+/.test(trimmed)) {
+    return { valid: false, error: 'Enter a valid email address' };
+  }
+
+  if (trimmed.length > 254) {
+    return { valid: false, error: 'Email must be 254 characters or less' };
+  }
+
+  return { valid: true, value: trimmed };
+}
+
+/**
+ * Validate hex color
+ * - Strict #RRGGBB format (6 hex digits)
+ * - No leading/trailing whitespace allowed
+ */
+function validateHexColor(input) {
+  // Don't trim - we want to reject inputs with leading/trailing spaces
+  if (input !== input.trim()) {
+    return { valid: false, error: 'Color must not have leading or trailing spaces' };
+  }
+
+  if (!/^#[0-9A-Fa-f]{6}$/.test(input)) {
+    return { valid: false, error: 'Color must be in #RRGGBB format (e.g., #0ea5e9)' };
+  }
+
+  return { valid: true, value: input.toLowerCase() };
+}
+
+/**
+ * Run setup wizard for Starter tier
+ * @param {string} projectDir - Path to cloned project
+ */
+async function runSetupWizard(projectDir) {
+  // Check if already run (prevent accidental re-run)
+  const markerPath = path.join(projectDir, SETUP_MARKER);
+  if (fs.existsSync(markerPath)) {
+    console.log(chalk.dim('Setup already completed. Delete .propelkit-setup-complete to re-run.'));
+    return;
+  }
+
+  console.log('');
+  console.log(chalk.cyan.bold('Setup Wizard'));
+  console.log(chalk.dim('Configure your PropelKit Starter project'));
+  console.log('');
+
+  // === REQUIRED QUESTIONS (not skippable) ===
+  const brandAnswers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Brand name:',
+      validate: input => {
+        const result = validateBrandName(input);
+        return result.valid ? true : result.error;
+      },
+      filter: input => {
+        const result = validateBrandName(input);
+        return result.valid ? result.value : input;
+      }
+    },
+    {
+      type: 'input',
+      name: 'tagline',
+      message: 'Tagline:',
+      validate: input => {
+        const result = validateTagline(input);
+        return result.valid ? true : result.error;
+      },
+      filter: input => {
+        const result = validateTagline(input);
+        return result.valid ? result.value : input;
+      }
+    },
+    {
+      type: 'input',
+      name: 'supportEmail',
+      message: 'Support email:',
+      validate: input => {
+        const result = validateEmail(input);
+        return result.valid ? true : result.error;
+      },
+      filter: input => {
+        const result = validateEmail(input);
+        return result.valid ? result.value : input;
+      }
+    }
+  ]);
+
+  // === OPTIONAL QUESTIONS (skippable with defaults) ===
+  console.log('');
+  console.log(chalk.dim('Optional settings (press Enter to use defaults):'));
+
+  const optionalAnswers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'primaryColor',
+      message: 'Primary color (hex):',
+      default: '#0ea5e9',
+      validate: input => {
+        const result = validateHexColor(input);
+        return result.valid ? true : result.error;
+      },
+      filter: input => {
+        const result = validateHexColor(input);
+        return result.valid ? result.value : input;
+      }
+    },
+    {
+      type: 'confirm',
+      name: 'darkModeDefault',
+      message: 'Default to dark mode?',
+      default: true
+    }
+  ]);
+
+  // === UPDATE BRAND CONFIG ===
+  updateBrandConfig(projectDir, brandAnswers, optionalAnswers);
+
+  // === GENERATE .env.local ===
+  generateEnvFile(projectDir);
+
+  // === WRITE MARKER FILE ===
+  fs.writeFileSync(markerPath, new Date().toISOString());
+
+  // === SUCCESS MESSAGE ===
+  console.log('');
+  console.log(chalk.green.bold('Setup complete!'));
+  console.log('');
+  console.log('Files created:');
+  console.log(chalk.dim('  - src/config/brand.ts (updated)'));
+  console.log(chalk.dim('  - .env.local (with placeholders)'));
+  console.log('');
+  console.log('Next steps:');
+  console.log(chalk.cyan('  1. ') + 'Fill in .env.local with your API keys');
+  console.log(chalk.cyan('  2. ') + 'npm install');
+  console.log(chalk.cyan('  3. ') + 'npm run dev');
+  console.log('');
+}
+
+/**
+ * Update brand.ts with user values
+ */
+function updateBrandConfig(projectDir, brand, theme) {
+  const brandPath = path.join(projectDir, 'src', 'config', 'brand.ts');
+
+  if (!fs.existsSync(brandPath)) {
+    console.log(chalk.yellow('Warning: brand.ts not found, skipping brand config update'));
+    return;
+  }
+
+  let content = fs.readFileSync(brandPath, 'utf-8');
+
+  // Replace brand values (handles both single and double quotes)
+  content = content.replace(
+    /name:\s*['"][^'"]*['"]/,
+    `name: '${brand.name.replace(/'/g, "\\'")}'`
+  );
+  content = content.replace(
+    /tagline:\s*['"][^'"]*['"]/,
+    `tagline: '${brand.tagline.replace(/'/g, "\\'")}'`
+  );
+
+  // Support email is in contact object
+  content = content.replace(
+    /email:\s*['"][^'"]*['"],?\s*\/\/\s*support/i,
+    `email: '${brand.supportEmail}', // support`
+  );
+  // Alternative pattern without comment
+  if (!content.includes(brand.supportEmail)) {
+    content = content.replace(
+      /(contact:\s*\{[^}]*email:\s*)['"][^'"]*['"]/,
+      `$1'${brand.supportEmail}'`
+    );
+  }
+
+  fs.writeFileSync(brandPath, content);
+  console.log(chalk.dim('Updated src/config/brand.ts'));
+}
+
+/**
+ * Generate .env.local with helpful comments
+ */
+function generateEnvFile(projectDir) {
+  const envPath = path.join(projectDir, '.env.local');
+
+  // Don't overwrite existing .env.local
+  if (fs.existsSync(envPath)) {
+    console.log(chalk.yellow('.env.local already exists, skipping'));
+    return;
+  }
+
+  const envContent = `# ==========================================
+# PropelKit Environment Configuration
+# ==========================================
+# Fill in these values from your service dashboards
+
+# Database (Supabase)
+# Get from: https://supabase.com/dashboard/project/_/settings/api
+NEXT_PUBLIC_SUPABASE_URL=your-project-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# Payments (Razorpay)
+# Get from: https://dashboard.razorpay.com/app/keys
+NEXT_PUBLIC_RAZORPAY_KEY_ID=your-key-id
+RAZORPAY_KEY_SECRET=your-key-secret
+RAZORPAY_WEBHOOK_SECRET=your-webhook-secret
+
+# Email (Resend)
+# Get from: https://resend.com/api-keys
+RESEND_API_KEY=your-resend-key
+
+# Site URL (change in production)
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+`;
+
+  fs.writeFileSync(envPath, envContent);
+  console.log(chalk.dim('Created .env.local with placeholders'));
+}
+
+module.exports = {
+  runSetupWizard,
+  // For testing
+  _internal: {
+    validateBrandName,
+    validateTagline,
+    validateEmail,
+    validateHexColor
+  }
+};

package/src/validators.js

@@ -0,0 +1,153 @@
+/**
+ * Zod validation schemas for design flow inputs
+ * Used by design-flow.js to validate user input
+ */
+const { z } = require('zod');
+
+/**
+ * Hex color validation schema
+ * Accepts: #RRGGBB format (case insensitive)
+ * Rejects: #RGB, #RRGGBBAA, invalid hex chars
+ */
+const HexColorSchema = z.string()
+  .regex(
+    /^#[0-9A-Fa-f]{6}$/,
+    'Must be a valid hex color in #RRGGBB format (e.g., #3B82F6)'
+  );
+
+/**
+ * Style reference enum
+ * Maps to aesthetic patterns for Lovable prompt generation
+ */
+const StyleReferenceSchema = z.enum([
+  'linear',
+  'notion',
+  'stripe',
+  'vercel',
+  'airbnb'
+], {
+  errorMap: () => ({
+    message: 'Style reference must be one of: linear, notion, stripe, vercel, airbnb'
+  })
+});
+
+/**
+ * Brand voice enum
+ * Influences copy tone and visual intensity
+ */
+const BrandVoiceSchema = z.enum([
+  'Professional',
+  'Friendly',
+  'Bold',
+  'Playful'
+], {
+  errorMap: () => ({
+    message: 'Brand voice must be one of: Professional, Friendly, Bold, Playful'
+  })
+});
+
+/**
+ * Complete design system schema
+ * Validates all design inputs together
+ */
+const DesignSystemSchema = z.object({
+  primaryColor: HexColorSchema,
+  accentColor: HexColorSchema,
+  styleReference: StyleReferenceSchema,
+  brandVoice: BrandVoiceSchema
+});
+
+/**
+ * Page name validation schema
+ * 1-50 characters, alphanumeric + spaces + hyphens
+ */
+const PageNameSchema = z.string()
+  .min(1, 'Page name cannot be empty')
+  .max(50, 'Page name must be 50 characters or less')
+  .regex(
+    /^[A-Za-z0-9\s-]+$/,
+    'Page name can only contain letters, numbers, spaces, and hyphens'
+  );
+
+/**
+ * Validate a design system object
+ * @param {object} input - Design system input to validate
+ * @returns {{ success: boolean, data?: object, error?: string }}
+ */
+function validateDesignSystem(input) {
+  const result = DesignSystemSchema.safeParse(input);
+
+  if (result.success) {
+    return {
+      success: true,
+      data: result.data
+    };
+  }
+
+  // Extract first error message for user-friendly output
+  const firstError = result.error.issues[0];
+  const errorPath = firstError.path.length > 0
+    ? `${firstError.path.join('.')}: `
+    : '';
+
+  return {
+    success: false,
+    error: `${errorPath}${firstError.message}`
+  };
+}
+
+/**
+ * Validate a page name
+ * @param {string} input - Page name to validate
+ * @returns {{ success: boolean, data?: string, error?: string }}
+ */
+function validatePageName(input) {
+  const result = PageNameSchema.safeParse(input);
+
+  if (result.success) {
+    return {
+      success: true,
+      data: result.data
+    };
+  }
+
+  return {
+    success: false,
+    error: result.error.issues[0].message
+  };
+}
+
+/**
+ * Validate a hex color
+ * @param {string} input - Hex color to validate
+ * @returns {{ success: boolean, data?: string, error?: string }}
+ */
+function validateHexColor(input) {
+  const result = HexColorSchema.safeParse(input);
+
+  if (result.success) {
+    return {
+      success: true,
+      data: result.data
+    };
+  }
+
+  return {
+    success: false,
+    error: result.error.issues[0].message
+  };
+}
+
+module.exports = {
+  // Schemas
+  HexColorSchema,
+  StyleReferenceSchema,
+  BrandVoiceSchema,
+  DesignSystemSchema,
+  PageNameSchema,
+
+  // Validation functions
+  validateDesignSystem,
+  validatePageName,
+  validateHexColor
+};