create-propelkit 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-propelkit",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Initialize a PropelKit SaaS project with AI PM",
   "bin": "./bin/cli.js",
   "main": "./src/index.js",

package/src/index.js

@@ -8,6 +8,7 @@ const { runSetupWizard } = require('./setup-wizard');
 const { launchClaude } = require('./launcher');
 const { validateLicense } = require('./license-validator');
 const { askPaymentProcessor, askPaymentKeys } = require('./payment-config');
+const { runLovableFlow } = require('./lovable-flow');
 const messages = require('./messages');
 
 async function main() {
@@ -105,7 +106,10 @@ async function main() {
     await runSetupWizard(projectDir);
     messages.starterWizardComplete();
   } else {
-    // Pro: Launch Claude Code directly - AI PM handles everything
+    // Pro: Step 6.1 - Lovable design choice
+    await runLovableFlow(projectDir);
+
+    // Pro: Step 6.2 - Launch Claude Code directly - AI PM handles everything
     messages.proLaunchingAIPM(projectDir);
 
     // Give user time to read the instructions

package/src/lovable-flow.js

@@ -0,0 +1,162 @@
+/**
+ * Lovable Flow Module
+ *
+ * Handles Lovable UI design approach prompts for CLI wizard.
+ * Called during PRO tier setup, before launching AI PM.
+ */
+
+const inquirer = require('inquirer');
+const chalk = require('chalk');
+const fs = require('fs');
+const path = require('path');
+const { updateBlueprint } = require('./blueprint-manager');
+
+/**
+ * Ask user about Lovable UI design approach
+ * @returns {Promise<'make-new'|'have-existing'|'skip'>}
+ */
+async function askLovableChoice() {
+  console.log('');
+  console.log(chalk.cyan.bold('UI Design Approach'));
+  console.log(chalk.dim('Choose how you want to create your user interface'));
+  console.log('');
+
+  const { choice } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'choice',
+      message: 'How would you like to handle UI design?',
+      choices: [
+        {
+          name: 'Make new UI with Lovable - AI will help you design beautiful interfaces',
+          value: 'make-new'
+        },
+        {
+          name: 'Have existing designs - Paste your Lovable code into lovable-import/',
+          value: 'have-existing'
+        },
+        {
+          name: 'Skip for now - Focus on backend first, design later',
+          value: 'skip'
+        }
+      ]
+    }
+  ]);
+
+  return choice;
+}
+
+/**
+ * Display guidance based on Lovable choice
+ * @param {string} choice - 'make-new' | 'have-existing' | 'skip'
+ */
+function displayLovableGuidance(choice) {
+  console.log('');
+
+  if (choice === 'make-new') {
+    console.log(chalk.cyan('The AI PM will help you design your UI.'));
+    console.log('');
+    console.log(chalk.dim('Tips for great Lovable prompts:'));
+    console.log(chalk.dim('  - Look at competitors for inspiration (what works? what doesn\'t?)'));
+    console.log(chalk.dim('  - Be specific about your brand colors and typography'));
+    console.log(chalk.dim('  - Describe the vibe: professional, playful, minimal, bold'));
+    console.log(chalk.dim('  - Mention specific UI patterns you like (sidebars, cards, modals)'));
+    console.log('');
+    console.log(chalk.dim('The AI PM will guide you through extensive design questions.'));
+  } else if (choice === 'have-existing') {
+    console.log(chalk.cyan('Paste your Lovable code into lovable-import/ when ready.'));
+    console.log('');
+    console.log(chalk.dim('The AI PM will detect and integrate your designs automatically.'));
+    console.log(chalk.dim('Integration includes:'));
+    console.log(chalk.dim('  - Translation from React/Vite to Next.js App Router'));
+    console.log(chalk.dim('  - Backend wiring analysis'));
+    console.log(chalk.dim('  - Component organization'));
+    console.log('');
+    console.log(chalk.dim('You can paste code before or after AI PM starts.'));
+  } else {
+    console.log(chalk.yellow('Design skipped for now.'));
+    console.log('');
+    console.log(chalk.dim('You can add UI later using:'));
+    console.log(chalk.dim('  - AI PM design flow (during conversation)'));
+    console.log(chalk.dim('  - Paste code into lovable-import/ anytime'));
+    console.log('');
+  }
+}
+
+/**
+ * Create lovable-import directory in project
+ * @param {string} projectDir - Project directory path
+ */
+function createLovableImportDir(projectDir) {
+  const lovableDir = path.join(projectDir, 'lovable-import');
+  if (!fs.existsSync(lovableDir)) {
+    fs.mkdirSync(lovableDir, { recursive: true });
+
+    // Add README to explain the folder
+    const readmePath = path.join(lovableDir, 'README.md');
+    const readmeContent = `# Lovable Import Directory
+
+Paste your Lovable-generated code here.
+
+## What to paste
+
+Export your project from Lovable and paste all React components and files here.
+The AI PM will automatically:
+
+1. **Detect** the code when you're ready
+2. **Translate** from React/Vite to Next.js App Router
+3. **Integrate** with PropelKit backend APIs
+4. **Generate** an integration report
+
+## Folder structure
+
+Paste your Lovable export maintaining the original structure:
+\`\`\`
+lovable-import/
+├── src/
+│   ├── components/
+│   ├── pages/
+│   └── ...
+├── package.json
+└── ...
+\`\`\`
+
+## Need help?
+
+The AI PM will guide you through the integration process.
+`;
+    fs.writeFileSync(readmePath, readmeContent);
+
+    console.log(chalk.dim(`Created lovable-import/ directory`));
+  }
+}
+
+/**
+ * Persist Lovable choice to blueprint.json
+ * @param {string} projectDir - Project directory path
+ * @param {string} choice - 'make-new' | 'have-existing' | 'skip'
+ */
+function persistLovableChoice(projectDir, choice) {
+  updateBlueprint(projectDir, { lovableChoice: choice });
+}
+
+/**
+ * Run complete Lovable flow in CLI wizard
+ * @param {string} projectDir - Project directory path
+ * @returns {Promise<string>} - The choice made ('make-new' | 'have-existing' | 'skip')
+ */
+async function runLovableFlow(projectDir) {
+  const choice = await askLovableChoice();
+  displayLovableGuidance(choice);
+  createLovableImportDir(projectDir);
+  persistLovableChoice(projectDir, choice);
+  return choice;
+}
+
+module.exports = {
+  askLovableChoice,
+  displayLovableGuidance,
+  createLovableImportDir,
+  persistLovableChoice,
+  runLovableFlow
+};