southpaw 0.2.7

package/scripts/bin.js

@@ -0,0 +1,607 @@
+#!/usr/bin/env node
+import { input, select, confirm, checkbox } from "@inquirer/prompts";
+import fs from "fs";
+import path from "path";
+import shell from "shelljs";
+import { testRoutes } from "./test.js";
+
+const model = "phi4";
+const createProject = async () => {
+  const name = await input({
+    message: "Enter your project name",
+    required: true,
+    validate: (input) => {
+      if (input.length < 3) {
+        return "Project name must be at least 3 characters long";
+      }
+      if (!/^[a-z0-9_-]+$/i.test(input)) {
+        return "Project name must only contain letters, numbers, underscores, or hyphens";
+      }
+      if (input !== input.toLowerCase()) {
+        return "Project name must be lowercase";
+      }
+      return true;
+    },
+  });
+
+  const template = await select({
+    message: "Select a template",
+    choices: [
+      {
+        name: "Blank",
+        value: "blank",
+        description: "This is a blank template",
+      },
+      {
+        name: "Portfolio",
+        value: "portfolio",
+        description: "This is a portfolio template",
+      },
+      {
+        name: "Todolist",
+        value: "todolist",
+        description: "This is a todolist template",
+      },
+    ],
+  });
+
+  const ok = await confirm({ message: "Confirm?" });
+  if (ok) {
+    console.log(template);
+    shell.exec(
+      `git clone https://github.com/solidsnail/southpaw-templates-${template} ${name}`
+    );
+    console.log("✔ Project created successfully!");
+    console.log(`1. cd to ${name}`);
+    console.log(`2. npm i`);
+    console.log(`3. npm run dev`);
+  } else {
+    console.log("✘ Project creation cancelled!");
+    process.exit(1);
+  }
+};
+
+const generateBlock = async () => {
+  const name = await input({
+    message: "Enter your block name",
+    required: true,
+    validate: (input) => {
+      if (input.length < 3) {
+        return "Block name must be at least 3 characters long";
+      }
+      if (!/^[a-z0-9_-]+$/i.test(input)) {
+        return "Block name must only contain letters, numbers, underscores, or hyphens";
+      }
+      // Check if block already exists
+      if (fs.existsSync(`.southpaw/ui/blocks/${input}.tsx`)) {
+        return `Block '${input}' already exists. Choose a different name.`;
+      }
+      return true;
+    },
+  });
+
+  const description = await input({
+    message: "Enter your block description",
+    required: true,
+    validate: (input) => {
+      if (input.length < 10) {
+        return "Description must be at least 10 characters long for better generation quality";
+      }
+      return true;
+    },
+  });
+
+  const blockType = await select({
+    message: "What type of block are you creating?",
+    choices: [
+      {
+        name: "UI Component",
+        value: "ui",
+        description: "Interactive UI element (buttons, forms, cards)",
+      },
+      {
+        name: "Layout",
+        value: "layout",
+        description: "Layout component (navigation, hero, footer)",
+      },
+      {
+        name: "Data Display",
+        value: "data",
+        description: "Data visualization or list component",
+      },
+      {
+        name: "Form",
+        value: "form",
+        description: "Form or input-related component",
+      },
+      {
+        name: "Content",
+        value: "content",
+        description: "Content display component",
+      },
+    ],
+  });
+
+  const features = await checkbox({
+    message: "What features should this block have?",
+    choices: [
+      { name: "Interactive state", value: "state" },
+      { name: "Props configuration", value: "props" },
+      { name: "Click handlers", value: "handlers" },
+      { name: "Form inputs", value: "forms" },
+      { name: "Styling options", value: "styling" },
+      { name: "Animation/transitions", value: "animations" },
+      { name: "Responsive design", value: "responsive" },
+    ],
+  });
+
+  const complexity = await select({
+    message: "Component complexity level?",
+    choices: [
+      {
+        name: "Simple",
+        value: "simple",
+        description: "Basic component with minimal features",
+      },
+      {
+        name: "Medium",
+        value: "medium",
+        description: "Moderate complexity with some interactivity",
+      },
+      {
+        name: "Complex",
+        value: "complex",
+        description: "Advanced component with rich features",
+      },
+    ],
+  });
+
+  console.log("\n📋 Generation Summary:");
+  console.log(`   Name: ${name}`);
+  console.log(`   Type: ${blockType}`);
+  console.log(`   Features: ${features.join(", ") || "None"}`);
+  console.log(`   Complexity: ${complexity}`);
+  console.log(`   Description: ${description}\n`);
+
+  const ok = await confirm({ message: "Generate this block?" });
+
+  if (ok) {
+    console.log("🤖 Generating block with AI...\n");
+
+    try {
+      // Read example files more safely
+      const exampleFiles = [
+        "herobanner1.tsx",
+        "leftnav.tsx",
+        "uidocs.tsx",
+        "counter.tsx",
+        "todolist.tsx",
+      ].filter((file) => fs.existsSync(`.southpaw/ui/blocks/${file}`));
+
+      if (exampleFiles.length === 0) {
+        console.error("❌ No example blocks found in .southpaw/ui/blocks/");
+        process.exit(1);
+      }
+
+      // Build examples string
+      let examplesContent = "";
+      for (const file of exampleFiles) {
+        try {
+          const content = fs.readFileSync(
+            `.southpaw/ui/blocks/${file}`,
+            "utf-8"
+          );
+          examplesContent += `//.southpaw/ui/blocks/${file}\n${content}\n\n`;
+        } catch {
+          console.warn(`⚠️  Could not read ${file}, skipping...`);
+        }
+      }
+
+      // Read supporting files
+      let uiIndexContent = "";
+      let componentModuleContent = "";
+
+      try {
+        uiIndexContent = fs.readFileSync(".southpaw/ui/index.ts", "utf-8");
+      } catch {
+        console.warn("⚠️  Could not read .southpaw/ui/index.ts");
+      }
+
+      try {
+        componentModuleContent = fs.readFileSync(
+          ".southpaw/modules/component.tsx",
+          "utf-8"
+        );
+      } catch {
+        console.warn("⚠️  Could not read .southpaw/modules/component.tsx");
+      }
+
+      const SYSTEM = `You are an expert Southpaw framework developer (a superset of Next.js). Your task is to generate high-quality, functional blocks based on user requirements.
+
+FRAMEWORK KNOWLEDGE:
+${examplesContent}
+
+//.southpaw/ui/index.ts
+${uiIndexContent}
+
+//.southpaw/modules/component.tsx
+${componentModuleContent}
+
+GENERATION RULES:
+1. ONLY return the TypeScript/TSX code for the component
+2. DO NOT wrap the code in backticks, markdown fences, or any code blocks
+3. DO NOT include any explanatory text before or after the code
+4. Start directly with imports and end with the export default statement
+5. Follow the exact pattern from the examples
+6. Use create_component() function with proper structure
+7. Include proper TypeScript types
+8. Use UI components from the UI object
+9. Implement proper props with propsDef for editor integration
+10. Add appropriate state management if needed
+11. Include proper methods for interactivity
+12. Follow React/Next.js best practices
+13. Ensure the component is self-contained and functional
+
+CRITICAL: Your response should start with "import" and end with "export default Component;" with NO additional text or formatting.
+
+COMPONENT REQUIREMENTS:
+- Block Type: ${blockType}
+- Features: ${features.join(", ") || "basic functionality"}
+- Complexity: ${complexity}
+- Must be production-ready and follow existing patterns
+- Include proper prop definitions for the visual editor
+- Use semantic and accessible HTML structure
+- Follow the naming convention from examples
+
+QUALITY CHECKLIST:
+✓ Proper TypeScript types
+✓ Complete propsDef object for editor
+✓ Functional render method
+✓ Appropriate default props
+✓ Clean, readable code structure
+✓ Follows Southpaw patterns exactly`;
+
+      const userPrompt = `Generate: //.southpaw/ui/blocks/${name}.tsx
+
+Requirements:
+- Component name: ${name}
+- Description: ${description}
+- Type: ${blockType}
+- Features needed: ${features.join(", ") || "basic"}
+- Complexity level: ${complexity}
+
+Create a complete, functional Southpaw block component following the established patterns.`;
+
+      const messages = [
+        { role: "system", content: SYSTEM },
+        { role: "user", content: userPrompt },
+      ];
+
+      let generatedCode = "";
+
+      const { default: ollama } = await import("ollama");
+      const response = await ollama.chat({
+        model,
+        messages,
+        stream: true,
+        think: false,
+        options: {
+          temperature: 0.05,
+          num_ctx: 32000,
+          top_p: 0.9,
+          repeat_penalty: 1.1,
+        },
+      });
+
+      process.stdout.write("📝 ");
+      for await (const part of response) {
+        const content = part.message.content;
+        process.stdout.write(content);
+        generatedCode += content;
+      }
+
+      console.log("\n");
+
+      // Clean the generated code
+      generatedCode = cleanGeneratedCode(generatedCode);
+
+      // Validate the generated code
+      if (!validateGeneratedCode(generatedCode)) {
+        console.error("❌ Generated code validation failed. Please try again.");
+        process.exit(1);
+      }
+
+      // Save the generated block
+      const blockPath = `.southpaw/ui/blocks/${name}.tsx`;
+
+      try {
+        // Ensure directory exists
+        const dir = path.dirname(blockPath);
+        if (!fs.existsSync(dir)) {
+          fs.mkdirSync(dir, { recursive: true });
+        }
+
+        // Write the file
+        fs.writeFileSync(blockPath, generatedCode.trim(), "utf-8");
+        console.log(`✅ Block saved to: ${blockPath}`);
+
+        // Update the blocks index file
+        await updateBlocksIndex(name);
+
+        console.log("🎉 Block generation completed successfully!");
+        console.log("\nNext steps:");
+        console.log(`1. Review the generated code in ${blockPath}`);
+        console.log(`2. Test the component in your application`);
+        console.log(`3. Customize props and styling as needed`);
+      } catch (writeError) {
+        console.error("❌ Error saving block:", writeError.message);
+        process.exit(1);
+      }
+    } catch (error) {
+      console.error("❌ Error generating block:", error.message);
+
+      if (error.message.includes("model")) {
+        console.log("\n💡 Troubleshooting:");
+        console.log("• Make sure Ollama is running: `ollama serve`");
+        console.log(`• Check if ${model} model is installed: \`ollama list\``);
+        console.log(`• Install ${model} if needed: \`ollama pull ${model}\``);
+      }
+
+      process.exit(1);
+    }
+  } else {
+    console.log("❌ Block generation cancelled!");
+    process.exit(1);
+  }
+};
+
+const cleanGeneratedCode = (code) => {
+  // Remove markdown code fences
+  let cleaned = code.replace(/^```(?:tsx?|typescript|javascript)?\s*/gim, "");
+  cleaned = cleaned.replace(/```\s*$/gim, "");
+
+  // Remove any leading/trailing whitespace
+  cleaned = cleaned.trim();
+
+  // Remove any extra explanatory text that might be at the beginning
+  const lines = cleaned.split("\n");
+  let startIndex = 0;
+
+  // Find the first line that looks like an import or the component start
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (
+      line.startsWith("import ") ||
+      line.startsWith("type ") ||
+      line.startsWith("interface ") ||
+      line.includes("create_component")
+    ) {
+      startIndex = i;
+      break;
+    }
+  }
+
+  // Remove any trailing explanatory text after the last export
+  let endIndex = lines.length - 1;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i].trim();
+    if (line.startsWith("export default") || line === "});") {
+      endIndex = i;
+      break;
+    }
+  }
+
+  cleaned = lines.slice(startIndex, endIndex + 1).join("\n");
+
+  // Ensure proper formatting
+  cleaned = cleaned.trim();
+
+  return cleaned;
+};
+
+const validateGeneratedCode = (code) => {
+  // Basic validation checks
+  const checks = [
+    {
+      test: () => code.includes("create_component"),
+      message: "Missing create_component function call",
+    },
+    {
+      test: () => code.includes("export default"),
+      message: "Missing export default statement",
+    },
+    {
+      test: () => code.includes("render()"),
+      message: "Missing render method",
+    },
+    {
+      test: () => code.includes("import") && code.includes("from"),
+      message: "Missing proper imports",
+    },
+    {
+      test: () => code.length > 100,
+      message: "Generated code is too short",
+    },
+    {
+      test: () => !code.includes("```"),
+      message: "Code still contains markdown fences",
+    },
+  ];
+
+  for (const check of checks) {
+    if (!check.test()) {
+      console.error(`❌ Validation failed: ${check.message}`);
+      return false;
+    }
+  }
+
+  console.log("✅ Generated code validation passed");
+  return true;
+};
+
+const updateBlocksIndex = async (blockName) => {
+  const indexPath = ".southpaw/ui/blocks/index.ts";
+
+  try {
+    let indexContent = "";
+
+    // Read existing content if file exists
+    if (fs.existsSync(indexPath)) {
+      indexContent = fs.readFileSync(indexPath, "utf-8");
+    } else {
+      // Create initial structure
+      indexContent = `import dynamic from "next/dynamic";\n\nexport const Blocks = {\n};\n`;
+    }
+
+    // Check if block is already in the index
+    if (indexContent.includes(`${blockName}:`)) {
+      console.log(`ℹ️  Block '${blockName}' already exists in index`);
+      return;
+    }
+
+    // Add the new block to the Blocks object
+    const blockEntry = `  ${blockName}: (() => {
+    const Comp = dynamic(() => import("./${blockName}"));
+    Comp.displayName = "Blocks.${blockName}";
+    return Comp;
+  })(),`;
+
+    // Insert before the closing brace
+    const updatedContent = indexContent.replace(
+      /(\s*)(};?\s*)$/,
+      `$1${blockEntry}\n$1$2`
+    );
+
+    fs.writeFileSync(indexPath, updatedContent, "utf-8");
+    console.log(`✅ Updated blocks index: ${indexPath}`);
+  } catch (error) {
+    console.warn(`⚠️  Could not update blocks index: ${error.message}`);
+  }
+};
+
+const generateBehavior = async () => {
+  const name = await input({
+    message: "Enter behavior name (e.g. count, todoList)",
+    required: true,
+    validate: (value) =>
+      /^[a-zA-Z0-9_-]+$/.test(value) ||
+      "Name must contain only letters, numbers, dashes and underscores",
+  });
+
+  const ok = await confirm({ message: `Create src/behaviors/${name}.ts?` });
+  if (!ok) {
+    console.log("❌ Behavior generation cancelled!");
+    process.exit(1);
+  }
+
+  const filePath = path.join("src", "behaviors", `${name}.ts`);
+  if (fs.existsSync(filePath)) {
+    console.log(`❌ ${filePath} already exists`);
+    process.exit(1);
+  }
+
+  const template = `import { create_behaviors } from "southpaw/modules/behaviors";
+
+export default create_behaviors(
+  {
+    state: {
+      // TODO: define initial state
+    },
+    actions: {
+      // TODO: define actions that mutate state and return Promise.resolve()
+    },
+  },
+  {
+    when: {
+      // "Do something"(arg: string) { return this.store.actions.doSomething(arg); },
+    },
+    then: {
+      // "Some derived value"() { return this.store.state.value; },
+    },
+    given: {
+      // "Some precondition"() { this.store.state = { ... }; return Promise.resolve(); },
+    },
+  }
+);
+`;
+
+  fs.writeFileSync(filePath, template, "utf-8");
+  console.log(`✅ Behavior created at ${filePath}`);
+};
+
+const generatePage = async () => {
+  const name = await input({
+    message: "Enter page name (without extension)",
+    required: true,
+    validate: (value) =>
+      /^[a-zA-Z0-9_-]+$/.test(value) ||
+      "Name must contain only letters, numbers, dashes and underscores",
+  });
+
+  const routePath = await input({
+    message: "Enter route path (e.g. /demo, /dashboard)",
+    required: true,
+  });
+
+  const ok = await confirm({
+    message: `Create src/pages/${name}.tsx for route ${routePath}?`,
+  });
+  if (!ok) {
+    console.log("❌ Page generation cancelled!");
+    process.exit(1);
+  }
+
+  const filePath = path.join("src", "pages", `${name}.tsx`);
+  if (fs.existsSync(filePath)) {
+    console.log(`❌ ${filePath} already exists`);
+    process.exit(1);
+  }
+
+  const template = `import { create_page } from "southpaw/modules/page";
+import { UI } from "southpaw/ui";
+
+export default create_page({
+  name: "${name}",
+  description: "${name} page",
+  seo: {
+    title: "${name}",
+    description: "${name} page",
+  },
+  render() {
+    return (
+      <UI.flex direction="column" h="100%">
+        <Components.topbar page={this} />
+        <UI.divider />
+        <UI.container py="lg" size="lg">
+          <UI.title order={1} text="${name}" />
+          <UI.text c="dimmed" text="${routePath}" />
+        </UI.container>
+      </UI.flex>
+    );
+  },
+});
+`;
+
+  fs.writeFileSync(filePath, template, "utf-8");
+  console.log(`✅ Page created at ${filePath}`);
+};
+
+const [, , mode] = process.argv;
+
+switch (mode) {
+  case "test":
+    await testRoutes();
+    break;
+  case "generate-block":
+    await generateBlock();
+    break;
+  case "generate-behavior":
+    await generateBehavior();
+    break;
+  case "generate-page":
+    await generatePage();
+    break;
+  default:
+    await createProject();
+    break;
+}