@fragments-sdk/cli 0.11.1 → 0.12.1

package/src/commands/init-framework.ts

@@ -1,414 +0,0 @@
-/**
- * Framework detection and auto-configuration for fragments init.
- *
- * Detects the consumer's framework (Next.js, Vite, Remix, Astro)
- * and generates appropriate configuration files.
- */
-
-import { readFile, writeFile, access } from "node:fs/promises";
-import { join } from "node:path";
-import pc from "picocolors";
-
-// ============================================
-// Types
-// ============================================
-
-export type Framework = "nextjs" | "vite" | "remix" | "astro" | "unknown";
-
-export interface FrameworkDetection {
-  framework: Framework;
-  /** Package that triggered the detection */
-  detectedBy: string | null;
-}
-
-export interface FrameworkSetupOptions {
-  /** Project root directory */
-  projectRoot: string;
-  /** Override auto-detected framework */
-  framework?: Framework;
-  /** Seed overrides for globals.scss generation */
-  seeds?: {
-    brand?: string;
-    neutral?: string;
-    density?: string;
-    radiusStyle?: string;
-  };
-}
-
-export interface FrameworkSetupResult {
-  framework: Framework;
-  filesCreated: string[];
-  packagesToInstall: string[];
-  configModified: string[];
-  warnings: string[];
-}
-
-// ============================================
-// Framework Detection
-// ============================================
-
-/**
- * Detect framework from package.json dependencies
- */
-export async function detectFramework(
-  projectRoot: string
-): Promise<FrameworkDetection> {
-  try {
-    const pkgPath = join(projectRoot, "package.json");
-    const pkgContent = await readFile(pkgPath, "utf-8");
-    const pkg = JSON.parse(pkgContent);
-
-    const allDeps = {
-      ...pkg.dependencies,
-      ...pkg.devDependencies,
-    };
-
-    // Check in order of specificity
-    if (allDeps["next"]) {
-      return { framework: "nextjs", detectedBy: "next" };
-    }
-    if (allDeps["@remix-run/react"]) {
-      return { framework: "remix", detectedBy: "@remix-run/react" };
-    }
-    if (allDeps["astro"]) {
-      return { framework: "astro", detectedBy: "astro" };
-    }
-    if (allDeps["vite"]) {
-      return { framework: "vite", detectedBy: "vite" };
-    }
-
-    return { framework: "unknown", detectedBy: null };
-  } catch {
-    return { framework: "unknown", detectedBy: null };
-  }
-}
-
-// ============================================
-// Globals SCSS Generation
-// ============================================
-
-function generateGlobalsSCSS(seeds?: FrameworkSetupOptions["seeds"]): string {
-  const withClauses: string[] = [];
-
-  if (seeds?.brand) {
-    withClauses.push(`  $fui-brand: ${seeds.brand}`);
-  }
-  if (seeds?.neutral) {
-    withClauses.push(`  $fui-neutral: "${seeds.neutral}"`);
-  }
-  if (seeds?.density) {
-    withClauses.push(`  $fui-density: "${seeds.density}"`);
-  }
-  if (seeds?.radiusStyle) {
-    withClauses.push(`  $fui-radius-style: "${seeds.radiusStyle}"`);
-  }
-
-  const useStatement =
-    withClauses.length > 0
-      ? `@use '@fragments-sdk/ui/styles' with (\n${withClauses.join(",\n")}\n);`
-      : `@use '@fragments-sdk/ui/styles';`;
-
-  return `// Fragments SDK Global Styles
-// Customize seed values to theme the entire design system.
-// See: https://usefragments.com/docs/theming
-${useStatement}
-`;
-}
-
-// ============================================
-// Providers Component Generation
-// ============================================
-
-function generateProviders(): string {
-  return `'use client';
-
-import { ThemeProvider } from '@fragments-sdk/ui';
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider defaultMode="system" attribute="data-theme">
-      {children}
-    </ThemeProvider>
-  );
-}
-`;
-}
-
-// ============================================
-// Per-Framework Configuration
-// ============================================
-
-async function setupNextJS(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "nextjs",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  // Check if sass is installed
-  try {
-    const pkgContent = await readFile(
-      join(projectRoot, "package.json"),
-      "utf-8"
-    );
-    const pkg = JSON.parse(pkgContent);
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (!allDeps["sass"]) {
-      result.packagesToInstall.push("sass");
-    }
-  } catch {
-    // Proceed without checking
-  }
-
-  // Update next.config if transpilePackages is needed
-  const nextConfigPaths = [
-    "next.config.ts",
-    "next.config.mjs",
-    "next.config.js",
-  ];
-
-  for (const configName of nextConfigPaths) {
-    const configPath = join(projectRoot, configName);
-    try {
-      await access(configPath);
-      const content = await readFile(configPath, "utf-8");
-
-      if (!content.includes("transpilePackages")) {
-        // Add transpilePackages to the config
-        if (content.includes("const nextConfig")) {
-          const updated = content.replace(
-            /const nextConfig\s*=\s*\{/,
-            `const nextConfig = {\n  transpilePackages: ['@fragments-sdk/ui'],`
-          );
-          await writeFile(configPath, updated, "utf-8");
-          result.configModified.push(configName);
-        } else {
-          result.warnings.push(
-            `Could not auto-modify ${configName}. Add transpilePackages: ['@fragments-sdk/ui'] manually.`
-          );
-        }
-      }
-      break;
-    } catch {
-      continue;
-    }
-  }
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "src", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("src/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("src/providers.tsx");
-  }
-
-  return result;
-}
-
-async function setupVite(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "vite",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  // Check if sass is installed
-  try {
-    const pkgContent = await readFile(
-      join(projectRoot, "package.json"),
-      "utf-8"
-    );
-    const pkg = JSON.parse(pkgContent);
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (!allDeps["sass"]) {
-      result.packagesToInstall.push("sass");
-    }
-  } catch {
-    // Proceed
-  }
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "src", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("src/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("src/providers.tsx");
-  }
-
-  return result;
-}
-
-async function setupRemix(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "remix",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  result.packagesToInstall.push("sass");
-
-  // Generate globals.scss in app/styles
-  const globalsPath = join(projectRoot, "app", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "app/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("app/styles/globals.scss");
-  }
-
-  // Generate providers.tsx
-  const providersPath = join(projectRoot, "app", "providers.tsx");
-  try {
-    await access(providersPath);
-    result.warnings.push("app/providers.tsx already exists. Skipped.");
-  } catch {
-    await writeFile(providersPath, generateProviders(), "utf-8");
-    result.filesCreated.push("app/providers.tsx");
-  }
-
-  result.warnings.push(
-    'Add @fragments-sdk/ui to serverDependenciesToBundle in remix.config if using source imports.'
-  );
-
-  return result;
-}
-
-async function setupAstro(
-  projectRoot: string,
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const result: FrameworkSetupResult = {
-    framework: "astro",
-    filesCreated: [],
-    packagesToInstall: [],
-    configModified: [],
-    warnings: [],
-  };
-
-  result.packagesToInstall.push("sass");
-
-  // Generate globals.scss
-  const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
-  try {
-    await access(globalsPath);
-    result.warnings.push(
-      "src/styles/globals.scss already exists. Skipped generation."
-    );
-  } catch {
-    await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
-    result.filesCreated.push("src/styles/globals.scss");
-  }
-
-  return result;
-}
-
-// ============================================
-// Main Setup Function
-// ============================================
-
-/**
- * Set up framework-specific configuration for @fragments-sdk/ui
- */
-export async function setupFramework(
-  options: FrameworkSetupOptions
-): Promise<FrameworkSetupResult> {
-  const { projectRoot } = options;
-
-  // Detect or use provided framework
-  let framework = options.framework;
-  if (!framework || framework === "unknown") {
-    const detection = await detectFramework(projectRoot);
-    framework = detection.framework;
-
-    if (detection.detectedBy) {
-      console.log(
-        pc.green(`  Detected ${frameworkLabel(framework)}`) +
-          pc.dim(` (via ${detection.detectedBy})`)
-      );
-    }
-  } else {
-    console.log(pc.green(`  Framework: ${frameworkLabel(framework)}`));
-  }
-
-  switch (framework) {
-    case "nextjs":
-      return setupNextJS(projectRoot, options);
-    case "vite":
-      return setupVite(projectRoot, options);
-    case "remix":
-      return setupRemix(projectRoot, options);
-    case "astro":
-      return setupAstro(projectRoot, options);
-    default:
-      return {
-        framework: "unknown",
-        filesCreated: [],
-        packagesToInstall: ["sass"],
-        configModified: [],
-        warnings: [
-          "Could not detect framework. Install sass and import @fragments-sdk/ui/styles manually.",
-        ],
-      };
-  }
-}
-
-function frameworkLabel(framework: Framework): string {
-  switch (framework) {
-    case "nextjs":
-      return "Next.js";
-    case "vite":
-      return "Vite";
-    case "remix":
-      return "Remix";
-    case "astro":
-      return "Astro";
-    default:
-      return "Unknown";
-  }
-}

package/src/mcp/bin.ts

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-import { startMcpServer } from './server.js';
-
-// Parse command line arguments
-const args = process.argv.slice(2);
-let projectRoot = process.cwd();
-let viewerUrl: string | undefined;
-
-for (let i = 0; i < args.length; i++) {
-  const arg = args[i];
-
-  if (arg === '--project-root' || arg === '-p') {
-    projectRoot = args[++i] ?? projectRoot;
-  } else if (arg === '--viewer-url' || arg === '-u') {
-    viewerUrl = args[++i];
-  } else if (arg === '--help' || arg === '-h') {
-    console.log(`
-Usage: fragments-mcp [options]
-
-Options:
-  -p, --project-root <path>  Project root directory (default: cwd)
-  -u, --viewer-url <url>     Viewer URL (default: http://localhost:6006)
-  -h, --help                 Show this help message
-`);
-    process.exit(0);
-  }
-}
-
-// Start server
-startMcpServer({
-  projectRoot,
-  viewerUrl,
-}).catch((error) => {
-  console.error('Failed to start MCP server:', error);
-  process.exit(1);
-});

package/src/migrate/bin.ts

@@ -1,114 +0,0 @@
-#!/usr/bin/env node
-/**
- * CLI entry point for migration tool.
- *
- * Can be run standalone or integrated with the main fragments CLI.
- */
-
-import { Command } from "commander";
-import pc from "picocolors";
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
-import { BRAND } from "../core/index.js";
-import { migrate } from "./migrate.js";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const pkg = JSON.parse(readFileSync(join(__dirname, "../../package.json"), "utf-8")) as { version: string };
-
-const program = new Command();
-
-program
-  .name("fragments-migrate")
-  .description(`${BRAND.name} Storybook Migration Tool`)
-  .version(pkg.version);
-
-program
-  .command("migrate")
-  .description("Migrate Storybook stories to Fragments")
-  .argument("<source>", "Source directory or file containing .stories.tsx files")
-  .option("-o, --output <dir>", "Output directory (default: same as source)")
-  .option("--dry-run", "Show what would be generated without writing files")
-  .option("--overwrite", "Overwrite existing fragment files")
-  .option("--report", "Generate HTML migration report")
-  .option("--report-path <path>", "Path for the migration report")
-  .option("-v, --verbose", "Verbose output")
-  .action(async (source, options) => {
-    try {
-      console.log(pc.cyan(`\n${BRAND.name} Migration Tool\n`));
-      console.log(pc.dim("Discovering Storybook files...\n"));
-
-      const report = await migrate({
-        from: source,
-        to: options.output,
-        dryRun: options.dryRun,
-        overwrite: options.overwrite,
-        report: options.report,
-        reportPath: options.reportPath,
-        verbose: options.verbose,
-      });
-
-      // Print results
-      if (report.totalStoryFiles === 0) {
-        console.log(pc.yellow("No story files found.\n"));
-        console.log(pc.dim("Looking for: *.stories.tsx, *.stories.ts, *.stories.jsx, *.stories.js"));
-        return;
-      }
-
-      console.log(pc.dim(`Found ${report.totalStoryFiles} story file(s)\n`));
-
-      // Print each conversion
-      for (const result of report.results) {
-        if (result.success) {
-          console.log(`${pc.green("✓")} ${pc.bold(result.componentName)} → ${result.outputFile}`);
-          console.log(pc.dim(`  ${result.variantCount} variant(s), ${result.todos.length} TODO(s)`));
-        } else {
-          console.log(`${pc.red("✗")} ${result.sourceFile}`);
-          for (const warning of result.warnings) {
-            console.log(pc.dim(`  ${warning}`));
-          }
-        }
-      }
-
-      console.log();
-
-      // Summary
-      if (report.successfulConversions > 0) {
-        console.log(pc.green(`✓ Converted ${report.successfulConversions} component(s)`));
-      }
-      if (report.failedConversions > 0) {
-        console.log(pc.red(`✗ Failed ${report.failedConversions} conversion(s)`));
-      }
-      console.log(pc.dim(`  ${report.totalVariants} variant(s) total`));
-      console.log(pc.dim(`  ${report.totalTodos} TODO(s) need attention`));
-
-      if (options.dryRun) {
-        console.log(pc.yellow("\n[Dry run - no files were written]"));
-      }
-
-      if (options.report) {
-        const reportPath = options.reportPath ?? `${source}/migration-report.html`;
-        console.log(pc.cyan(`\n📊 Report generated: ${reportPath}`));
-      }
-
-      // Next steps
-      console.log(pc.dim("\n───────────────────────────────────────"));
-      console.log(pc.bold("\nNext steps:"));
-      console.log(`  1. Review generated ${BRAND.fileExtension} files`);
-      console.log(`  2. Fill in TODO comments (usage.when, usage.whenNot, etc.)`);
-      console.log(`  3. Run ${pc.cyan(`${BRAND.cliCommand} build`)} to compile`);
-      console.log(`  4. Run ${pc.cyan(`${BRAND.cliCommand} dev`)} to view your design system`);
-      console.log();
-    } catch (error) {
-      console.error(pc.red("Error:"), error instanceof Error ? error.message : error);
-      process.exit(1);
-    }
-  });
-
-// Also support direct execution without subcommand
-if (process.argv.length > 2 && !process.argv[2].startsWith("-") && process.argv[2] !== "migrate") {
-  // Insert "migrate" as the command
-  process.argv.splice(2, 0, "migrate");
-}
-
-program.parse();

package/src/theme/index.ts

@@ -1,77 +0,0 @@
-/**
- * Theme Customization Module
- *
- * Provides theme configuration, validation, serialization, and generation
- */
-
-// Types
-export type {
-  ThemeConfig,
-  ThemeColors,
-  ThemeSurfaces,
-  ThemeText,
-  ThemeBorders,
-  ThemeTypography,
-  ThemeRadius,
-  ThemeShadows,
-  ThemeDarkMode,
-  TokenOutputFormat,
-  TokenGeneratorOptions,
-  TokenGeneratorResult,
-  PresetName,
-  ContrastPair,
-  ContrastWarning,
-  ContrastValidationResult,
-} from "./types.js";
-
-// Schema validation
-export {
-  themeConfigSchema,
-  themeColorsSchema,
-  themeSurfacesSchema,
-  themeTextSchema,
-  themeBordersSchema,
-  themeTypographySchema,
-  themeRadiusSchema,
-  themeShadowsSchema,
-  themeDarkModeSchema,
-  validateThemeConfig,
-} from "./schema.js";
-export type { ThemeValidationResult } from "./schema.js";
-
-// Serialization
-export {
-  encodeThemeToUrl,
-  decodeThemeFromUrl,
-  compressTheme,
-  decompressTheme,
-} from "./serializer.js";
-
-// Generation
-export {
-  generateScssTokens,
-  generateCssTokens,
-  generateTokenFiles,
-  validateContrast,
-} from "./generator.js";
-
-// Contrast utilities
-export {
-  parseColor,
-  relativeLuminance,
-  contrastRatio,
-  meetsAA,
-  meetsAAA,
-  rgbToHex,
-  suggestFix,
-} from "./contrast.js";
-export type { RGB } from "./contrast.js";
-
-// Presets
-export {
-  DEFAULT_PRESET,
-  PRESETS,
-  getPreset,
-  listPresets,
-  isValidPresetName,
-} from "./presets.js";