@fragments-sdk/cli 0.11.1 → 0.13.0

package/dist/init-XK6PRUE5.js

@@ -0,0 +1,636 @@
+import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
+import {
+  addStylesImport,
+  addThemeProvider,
+  addTranspilePackages,
+  detectSetupFramework,
+  findEntryFile
+} from "./chunk-DXX6HADE.js";
+import "./chunk-D2CDBRNU.js";
+import {
+  BRAND
+} from "./chunk-QM7SVOGF.js";
+import "./chunk-Z7EY4VHE.js";
+
+// src/commands/init.ts
+import { writeFile, mkdir, access } from "fs/promises";
+import { resolve, join, relative } from "path";
+import { spawn } from "child_process";
+import pc from "picocolors";
+import fg from "fast-glob";
+async function detectProject(projectRoot) {
+  const configPath = join(projectRoot, BRAND.configFile);
+  const legacyConfigPath = join(projectRoot, BRAND.legacyConfigFile);
+  let hasConfig = false;
+  let foundConfigPath = null;
+  try {
+    await access(configPath);
+    hasConfig = true;
+    foundConfigPath = configPath;
+  } catch {
+    try {
+      await access(legacyConfigPath);
+      hasConfig = true;
+      foundConfigPath = legacyConfigPath;
+    } catch {
+    }
+  }
+  const storyFiles = await fg(
+    ["**/*.stories.tsx", "**/*.stories.ts", "**/*.stories.jsx", "**/*.stories.js"],
+    {
+      cwd: projectRoot,
+      ignore: ["**/node_modules/**", "**/dist/**", "**/build/**", "**/.storybook/**"]
+    }
+  );
+  const componentFiles = await fg(
+    ["**/components/**/*.tsx", "**/Components/**/*.tsx", "src/**/*.tsx"],
+    {
+      cwd: projectRoot,
+      ignore: [
+        "**/node_modules/**",
+        "**/dist/**",
+        "**/build/**",
+        "**/*.stories.*",
+        "**/*.fragment.*",
+        "**/*.test.*",
+        "**/*.spec.*",
+        "**/*.d.ts",
+        "**/index.tsx"
+        // Skip barrel files
+      ]
+    }
+  );
+  const nonComponentPatterns = /\.(styles|utils|helpers|constants|types|hooks|context|config|mock|fixture)\./i;
+  const nonComponentNames = /^(index|types|utils|helpers|constants|hooks|providers|layout|use[A-Z])/;
+  const likelyComponents = componentFiles.filter((f) => {
+    const fileName = f.split("/").pop() || "";
+    const baseName = fileName.replace(/\.tsx$/, "");
+    return !nonComponentPatterns.test(fileName) && !nonComponentNames.test(baseName);
+  });
+  let suggestedComponentPath = "src/components";
+  if (likelyComponents.length > 0) {
+    const firstComponent = likelyComponents[0];
+    const parts = firstComponent.split("/");
+    const componentsIndex = parts.findIndex(
+      (p) => p.toLowerCase() === "components"
+    );
+    if (componentsIndex !== -1) {
+      suggestedComponentPath = parts.slice(0, componentsIndex + 1).join("/");
+    }
+  }
+  const scenario = storyFiles.length > 0 ? "stories" : likelyComponents.length > 0 ? "components" : "fresh";
+  return {
+    storyFiles,
+    componentFiles: likelyComponents,
+    hasConfig,
+    configPath: foundConfigPath,
+    suggestedComponentPath,
+    scenario
+  };
+}
+function generateConfig(options) {
+  const includeStr = options.includePaths.map((p) => `    '${p}'`).join(",\n");
+  const componentStr = options.componentPaths.map((p) => `    '${p}'`).join(",\n");
+  return `import type { FragmentsConfig } from '@fragments-sdk/cli';
+
+const config: FragmentsConfig = {
+  // Glob patterns for finding fragment/story files
+  include: [
+${includeStr}
+  ],
+
+  // Glob patterns to exclude
+  exclude: ['**/node_modules/**'],
+
+  // Glob patterns for finding component files (for auto-documentation)
+  components: [
+${componentStr}
+  ],
+
+  // Framework (react, vue, svelte)
+  framework: '${options.framework}',
+${options.themeBlock || ""}${options.snapshotsBlock || ""}};
+
+export default config;
+`;
+}
+function generateExampleComponent() {
+  return `import React from 'react';
+
+export interface ButtonProps {
+  /** Button label */
+  children: React.ReactNode;
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Click handler */
+  onClick?: () => void;
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+}: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors';
+
+  const variantStyles = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700',
+    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
+    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100',
+  };
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg',
+  };
+
+  return (
+    <button
+      className={\`\${baseStyles} \${variantStyles[variant]} \${sizeStyles[size]}\`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+`;
+}
+function generateExampleFragment() {
+  return `import React from 'react';
+import { defineFragment } from '@fragments-sdk/cli/core';
+import { Button } from './Button';
+
+export default defineFragment({
+  component: Button,
+
+  meta: {
+    name: 'Button',
+    description: 'Interactive button for triggering actions',
+    category: 'Actions',
+    status: 'stable',
+  },
+
+  usage: {
+    when: [
+      'Triggering an action (save, submit, delete)',
+      'Form submission',
+      'Opening dialogs or menus',
+    ],
+    whenNot: [
+      'Simple navigation (use Link)',
+      'Toggling state (use Switch)',
+    ],
+    guidelines: [
+      'Use Primary for the main action in a context',
+      'Only one Primary button per section',
+    ],
+  },
+
+  props: {
+    children: {
+      type: 'node',
+      required: true,
+      description: 'Button label content',
+    },
+    variant: {
+      type: 'enum',
+      values: ['primary', 'secondary', 'ghost'],
+      default: 'primary',
+      description: 'Visual style variant',
+    },
+    size: {
+      type: 'enum',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+      description: 'Button size',
+    },
+  },
+
+  variants: [
+    {
+      name: 'Primary',
+      description: 'Default action button',
+      code: \`import { Button } from './Button';
+
+<Button variant="primary">Save Changes</Button>\`,
+      render: () => <Button variant="primary">Save Changes</Button>,
+    },
+    {
+      name: 'Secondary',
+      description: 'Less prominent action',
+      code: \`import { Button } from './Button';
+
+<Button variant="secondary">Cancel</Button>\`,
+      render: () => <Button variant="secondary">Cancel</Button>,
+    },
+    {
+      name: 'Ghost',
+      description: 'Minimal visual weight',
+      code: \`import { Button } from './Button';
+
+<Button variant="ghost">Learn More</Button>\`,
+      render: () => <Button variant="ghost">Learn More</Button>,
+    },
+    {
+      name: 'Sizes',
+      description: 'Available size options',
+      code: \`import { Button } from './Button';
+
+<>
+  <Button size="sm">Small</Button>
+  <Button size="md">Medium</Button>
+  <Button size="lg">Large</Button>
+</>\`,
+      render: () => (
+        <>
+          <Button size="sm">Small</Button>
+          <Button size="md">Medium</Button>
+          <Button size="lg">Large</Button>
+        </>
+      ),
+    },
+  ],
+});
+`;
+}
+function startDevServer(projectRoot) {
+  console.log(pc.dim("\nStarting development server...\n"));
+  const isWindows = process.platform === "win32";
+  const cmd = isWindows ? "npx.cmd" : "npx";
+  const child = spawn(cmd, [BRAND.cliCommand, "dev"], {
+    cwd: projectRoot,
+    stdio: "inherit"
+  });
+  child.on("error", (err) => {
+    console.error(pc.red("Failed to start dev server:"), err.message);
+  });
+}
+function mapFrameworkLabel(framework) {
+  const labels = {
+    "nextjs-app": "Next.js (App Router)",
+    "nextjs-pages": "Next.js (Pages Router)",
+    "vite": "Vite",
+    "remix": "Remix",
+    "astro": "Astro"
+  };
+  return labels[framework] || "Unknown";
+}
+async function runInteractiveConfigure(detection, scenario) {
+  const { input, confirm, select } = await import("@inquirer/prompts");
+  const componentPath = await input({
+    message: "Where are your components located?",
+    default: detection.suggestedComponentPath
+  });
+  let createExample = scenario === "fresh";
+  if (scenario === "fresh") {
+    createExample = await confirm({
+      message: "Create an example Button component to get started?",
+      default: true
+    });
+  }
+  let themeBlock = "";
+  const configureTheme = await confirm({
+    message: "Configure theme seeds? (brand color, density, radius)",
+    default: false
+  });
+  if (configureTheme) {
+    const brand = await input({
+      message: "Brand color (hex)",
+      default: "#18181b",
+      validate: (v) => /^#[0-9a-fA-F]{6}$/.test(v) || "Enter a valid hex color (e.g., #6366f1)"
+    });
+    const neutral = await select({
+      message: "Neutral palette",
+      choices: [
+        { value: "stone", name: "Stone (warm gray)" },
+        { value: "ice", name: "Ice (cool blue-gray)" },
+        { value: "earth", name: "Earth (olive/khaki)" },
+        { value: "sand", name: "Sand (warm beige)" },
+        { value: "fire", name: "Fire (warm red-gray)" }
+      ],
+      default: "stone"
+    });
+    const density = await select({
+      message: "Spacing density",
+      choices: [
+        { value: "compact", name: "Compact (tighter spacing)" },
+        { value: "default", name: "Default" },
+        { value: "relaxed", name: "Relaxed (more breathing room)" }
+      ],
+      default: "default"
+    });
+    const radiusStyle = await select({
+      message: "Border radius style",
+      choices: [
+        { value: "sharp", name: "Sharp (0px)" },
+        { value: "subtle", name: "Subtle (2px)" },
+        { value: "default", name: "Default (6px)" },
+        { value: "rounded", name: "Rounded (10px)" },
+        { value: "pill", name: "Pill (999px)" }
+      ],
+      default: "default"
+    });
+    const themeEntries = [];
+    if (brand !== "#18181b") themeEntries.push(`    brand: '${brand}'`);
+    if (neutral !== "stone") themeEntries.push(`    neutral: '${neutral}'`);
+    if (density !== "default") themeEntries.push(`    density: '${density}'`);
+    if (radiusStyle !== "default") themeEntries.push(`    radiusStyle: '${radiusStyle}'`);
+    if (themeEntries.length > 0) {
+      themeBlock = `
+  // Theme seed values (derives 120+ CSS custom properties)
+  theme: {
+${themeEntries.join(",\n")},
+  },
+`;
+    }
+  }
+  let snapshotsBlock = "";
+  const enableSnapshots = await confirm({
+    message: "Enable visual snapshot tests per component variant?",
+    default: false
+  });
+  if (enableSnapshots) {
+    snapshotsBlock = `
+  // Visual snapshot testing
+  snapshots: {
+    enabled: true,
+  },
+`;
+  }
+  const startServer = await confirm({
+    message: "Start the viewer now?",
+    default: true
+  });
+  return {
+    componentPath,
+    createExample,
+    startServer,
+    themeBlock,
+    snapshotsBlock
+  };
+}
+async function init(options = {}) {
+  const projectRoot = resolve(options.projectRoot || process.cwd());
+  const errors = [];
+  if (options.scan) {
+    const scanPath = resolve(projectRoot, options.scan);
+    try {
+      await access(scanPath);
+    } catch {
+      console.error(pc.red(`
+Scan path not found: ${scanPath}
+`));
+      return {
+        success: false,
+        scenario: "scan",
+        storiesFound: 0,
+        componentsFound: 0,
+        errors: [`Scan path not found: ${scanPath}`]
+      };
+    }
+    const { scanGenerate } = await import("./scan-generate-U3RFVDTX.js");
+    const scanResult = await scanGenerate({
+      scanPath,
+      force: options.force,
+      verbose: true,
+      enrich: options.enrich,
+      dryRun: options.dryRun,
+      provider: options.provider,
+      apiKey: options.apiKey,
+      model: options.model
+    });
+    const relScanPath = relative(projectRoot, scanPath);
+    const configPath2 = join(projectRoot, BRAND.configFile);
+    const configContent2 = generateConfig({
+      includePaths: [`${relScanPath}/**/*.fragment.tsx`],
+      componentPaths: [`${relScanPath}/**/*.tsx`],
+      framework: "react"
+    });
+    try {
+      await writeFile(configPath2, configContent2, "utf-8");
+      console.log(pc.green(`\u2713 Created ${BRAND.configFile}`));
+    } catch (e) {
+      errors.push(`Failed to create config: ${e}`);
+    }
+    if (scanResult.success) {
+      console.log(pc.cyan("Next steps:"));
+      if (options.enrich && !options.dryRun) {
+        console.log(`  1. Review AI-enriched fields (usage.when, a11yRules, scenarioTags) in generated files`);
+        if (scanResult.generated.some((g) => g.todoCount > 0)) {
+          console.log(`  2. Search remaining ${pc.bold("TODO:")} markers and fill in human knowledge`);
+        }
+      } else {
+        console.log(`  1. Search generated files for ${pc.bold("TODO:")} markers and fill in human knowledge`);
+      }
+      console.log(`  ${options.enrich ? "3" : "2"}. Run ${pc.bold(`${BRAND.cliCommand} dev`)} to preview your components`);
+      console.log(`  ${options.enrich ? "4" : "3"}. Run ${pc.bold(`${BRAND.cliCommand} build`)} to compile fragments.json`);
+      console.log();
+    }
+    return {
+      success: scanResult.success && errors.length === 0,
+      configPath: errors.length === 0 ? configPath2 : void 0,
+      scenario: "scan",
+      storiesFound: 0,
+      componentsFound: scanResult.generated.length,
+      errors: [
+        ...errors,
+        ...scanResult.errors.map((e) => `${e.name}: ${e.error}`)
+      ]
+    };
+  }
+  console.log(pc.cyan(`
+${BRAND.name} init
+`));
+  const detection = await detectProject(projectRoot);
+  if (detection.hasConfig && !options.force) {
+    if (options.configure) {
+      console.log(pc.yellow(`  ! Config exists: ${BRAND.configFile} (will overwrite)`));
+    } else {
+      console.log(pc.green(`  \u2713 Already initialized`) + pc.dim(` (${BRAND.configFile} exists)`));
+      console.log();
+      console.log(pc.dim(`  Run ${pc.bold(`${BRAND.cliCommand} init --force`)} to reinitialize`));
+      console.log(pc.dim(`  Run ${pc.bold(`${BRAND.cliCommand} init --configure`)} to customize theme, snapshots, etc.`));
+      console.log();
+      return {
+        success: true,
+        scenario: detection.scenario,
+        storiesFound: detection.storyFiles.length,
+        componentsFound: detection.componentFiles.length,
+        errors: []
+      };
+    }
+  }
+  let scenario;
+  if (detection.storyFiles.length > 0) {
+    scenario = "stories";
+    console.log(pc.green(`  \u2713 Found ${detection.storyFiles.length} Storybook stories`));
+  } else if (detection.componentFiles.length > 0) {
+    scenario = "components";
+    console.log(pc.green(`  \u2713 Found ${detection.componentFiles.length} components`) + pc.dim(` in ${detection.suggestedComponentPath}`));
+  } else {
+    scenario = "fresh";
+    console.log(pc.dim(`  \xB7 No existing components found`));
+  }
+  const framework = await detectSetupFramework(projectRoot);
+  console.log(pc.green(`  \u2713 Detected ${mapFrameworkLabel(framework)}`));
+  let componentPath = detection.suggestedComponentPath;
+  let createExample = scenario === "fresh";
+  let startServer = false;
+  let themeBlock = "";
+  let snapshotsBlock = "";
+  if (options.configure) {
+    const config = await runInteractiveConfigure(detection, scenario);
+    componentPath = config.componentPath;
+    createExample = config.createExample;
+    startServer = config.startServer;
+    themeBlock = config.themeBlock;
+    snapshotsBlock = config.snapshotsBlock;
+  }
+  const includePaths = [
+    `${componentPath}/**/*.fragment.tsx`
+  ];
+  if (scenario === "stories") {
+    includePaths.push(`${componentPath}/**/*.stories.tsx`);
+    includePaths.push(`${componentPath}/**/*.stories.ts`);
+  }
+  const configPath = join(projectRoot, BRAND.configFile);
+  const configContent = generateConfig({
+    includePaths,
+    componentPaths: [`${componentPath}/**/*.tsx`],
+    framework: "react",
+    themeBlock,
+    snapshotsBlock
+  });
+  try {
+    await writeFile(configPath, configContent, "utf-8");
+    console.log(pc.green(`  \u2713 Created ${BRAND.configFile}`));
+  } catch (e) {
+    errors.push(`Failed to create config: ${e}`);
+  }
+  const entryFile = await findEntryFile(projectRoot, framework);
+  if (entryFile) {
+    try {
+      const stylesResult = await addStylesImport(projectRoot, entryFile);
+      if (stylesResult.modified) {
+        console.log(pc.green(`  \u2713 Added styles import to ${entryFile}`));
+      } else {
+        console.log(pc.dim(`  \xB7 ${stylesResult.message}`));
+      }
+    } catch (e) {
+      errors.push(`Failed to add styles import: ${e instanceof Error ? e.message : e}`);
+    }
+    try {
+      const providerResult = await addThemeProvider(projectRoot, entryFile, framework);
+      if (providerResult.modified) {
+        console.log(pc.green(`  \u2713 Added ThemeProvider to ${entryFile}`));
+      } else {
+        console.log(pc.dim(`  \xB7 ${providerResult.message}`));
+      }
+    } catch (e) {
+      errors.push(`Failed to add ThemeProvider: ${e instanceof Error ? e.message : e}`);
+    }
+  } else {
+    console.log(pc.yellow(`  ! Could not detect entry file \u2014 add styles import manually`));
+    console.log(pc.dim(`    import '@fragments-sdk/ui/styles'`));
+  }
+  if (framework === "nextjs-app" || framework === "nextjs-pages") {
+    try {
+      const transpileResult = await addTranspilePackages(projectRoot);
+      if (transpileResult.modified) {
+        console.log(pc.green(`  \u2713 ${transpileResult.message}`));
+      } else {
+        console.log(pc.dim(`  \xB7 ${transpileResult.message}`));
+      }
+    } catch (e) {
+      errors.push(`Failed to update next.config: ${e instanceof Error ? e.message : e}`);
+    }
+  }
+  if (scenario === "fresh" && createExample) {
+    const exampleDir = join(projectRoot, componentPath, "Button");
+    try {
+      await mkdir(exampleDir, { recursive: true });
+      await writeFile(
+        join(exampleDir, "Button.tsx"),
+        generateExampleComponent(),
+        "utf-8"
+      );
+      console.log(
+        pc.green(`  \u2713 Created ${relative(projectRoot, join(exampleDir, "Button.tsx"))}`)
+      );
+      await writeFile(
+        join(exampleDir, "Button.fragment.tsx"),
+        generateExampleFragment(),
+        "utf-8"
+      );
+      console.log(
+        pc.green(
+          `  \u2713 Created ${relative(projectRoot, join(exampleDir, "Button.fragment.tsx"))}`
+        )
+      );
+    } catch (e) {
+      errors.push(`Failed to create example component: ${e}`);
+    }
+  }
+  if (scenario === "components" || scenario === "stories") {
+    try {
+      const { scan } = await import("./scan-CHQHXWVD.js");
+      const scanResult = await scan({
+        config: configPath,
+        verbose: false,
+        quiet: true
+      });
+      if (scanResult.success) {
+        console.log(pc.green(`  \u2713 Generated fragments.json`) + pc.dim(` (${scanResult.componentCount} components)`));
+      } else {
+        console.log(pc.dim(`  \xB7 Auto-documentation will run when you start the dev server`));
+      }
+    } catch {
+      console.log(
+        pc.dim(`  \xB7 Auto-documentation will run when you start the dev server`)
+      );
+    }
+  }
+  console.log();
+  if (errors.length > 0) {
+    console.log(pc.red(`  ${errors.length} error(s) occurred:`));
+    for (const error of errors) {
+      console.log(pc.red(`    - ${error}`));
+    }
+    console.log();
+  } else {
+    console.log(pc.green(`  Done!`) + pc.dim(` Setup complete.
+`));
+    if (startServer) {
+      startDevServer(projectRoot);
+    } else {
+      console.log(`  ${pc.bold("Get started:")}`);
+      console.log(`    ${pc.dim("$")} ${BRAND.cliCommand} dev`);
+      console.log();
+      if (!options.configure) {
+        console.log(`  ${pc.bold("Customize:")} theme seeds, snapshots, and more`);
+        console.log(`    ${pc.dim("$")} ${BRAND.cliCommand} init --configure`);
+        console.log();
+      }
+    }
+  }
+  return {
+    success: errors.length === 0,
+    configPath: errors.length === 0 ? configPath : void 0,
+    scenario,
+    storiesFound: detection.storyFiles.length,
+    componentsFound: detection.componentFiles.length,
+    errors
+  };
+}
+export {
+  init
+};
+//# sourceMappingURL=init-XK6PRUE5.js.map