@fragments-sdk/cli 0.2.2

package/src/commands/context.ts

@@ -0,0 +1,107 @@
+/**
+ * fragments context - Generate AI-ready context for your design system
+ */
+
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import pc from 'picocolors';
+import { generateContext } from '../core/index.js';
+import type { CompiledSegment, CompiledSegmentsFile } from '../core/index.js';
+import { loadConfig } from '../core/node.js';
+import { buildSegments } from '../build.js';
+
+/**
+ * Options for context command
+ */
+export interface ContextOptions {
+  /** Path to config file */
+  config?: string;
+  /** Path to segments.json (builds if not provided) */
+  input?: string;
+  /** Output format (markdown/json) */
+  format?: 'markdown' | 'json';
+  /** Minimal output for token efficiency */
+  compact?: boolean;
+  /** Include code examples */
+  includeCode?: boolean;
+  /** Include component relationships */
+  includeRelations?: boolean;
+  /** Only output token estimate */
+  tokensOnly?: boolean;
+}
+
+/**
+ * Result of context command
+ */
+export interface ContextResult {
+  success: boolean;
+  content?: string;
+  tokenEstimate: number;
+}
+
+/**
+ * Run the context command
+ */
+export async function context(options: ContextOptions = {}): Promise<ContextResult> {
+  const {
+    format = 'markdown',
+    compact = false,
+    includeCode = false,
+    includeRelations = false,
+    tokensOnly = false,
+  } = options;
+
+  let segments: CompiledSegment[];
+
+  if (options.input) {
+    // Read from existing segments.json
+    const inputPath = resolve(process.cwd(), options.input);
+    const content = await readFile(inputPath, 'utf-8');
+    const data: CompiledSegmentsFile = JSON.parse(content);
+    segments = Object.values(data.segments);
+  } else {
+    // Build segments on the fly
+    const { config, configDir } = await loadConfig(options.config);
+    const result = await buildSegments(config, configDir);
+
+    if (result.errors.length > 0 && result.segmentCount === 0) {
+      console.error(pc.red('Error: No segments found. Run `segments build` first or fix errors.'));
+      return { success: false, tokenEstimate: 0 };
+    }
+
+    // Read the generated file
+    const content = await readFile(result.outputPath, 'utf-8');
+    const data: CompiledSegmentsFile = JSON.parse(content);
+    segments = Object.values(data.segments);
+  }
+
+  if (segments.length === 0) {
+    console.error(pc.red('No segments found.'));
+    return { success: false, tokenEstimate: 0 };
+  }
+
+  const { content, tokenEstimate } = generateContext(segments, {
+    format,
+    compact,
+    include: {
+      code: includeCode,
+      relations: includeRelations,
+    },
+  });
+
+  if (tokensOnly) {
+    console.log(`Estimated tokens: ${tokenEstimate}`);
+  } else {
+    // Output to stdout (pipeable to file)
+    console.log(content);
+
+    // Print token estimate to stderr so it doesn't interfere with piped output
+    console.error(pc.dim(`\n[${tokenEstimate} tokens estimated]`));
+  }
+
+  return {
+    success: true,
+    content,
+    tokenEstimate,
+  };
+}

package/src/commands/dev.ts

@@ -0,0 +1,107 @@
+/**
+ * fragments dev - Start the development server with live component rendering
+ */
+
+import pc from 'picocolors';
+import { BRAND } from '../core/index.js';
+import { runSetup } from '../setup.js';
+
+/**
+ * Options for dev command
+ */
+export interface DevOptions {
+  /** Port to run on */
+  port?: number | string;
+  /** Do not open browser */
+  open?: boolean;
+  /** Skip auto-setup (Storybook import, build, Figma link) */
+  skipSetup?: boolean;
+  /** Skip auto-importing from Storybook */
+  skipStorybook?: boolean;
+  /** Skip Figma link check */
+  skipFigma?: boolean;
+  /** Skip auto-building fragments.json */
+  skipBuild?: boolean;
+}
+
+/**
+ * Result of dev command
+ */
+export interface DevResult {
+  success: boolean;
+  port?: number;
+}
+
+/**
+ * Run the dev command
+ */
+export async function dev(options: DevOptions = {}): Promise<DevResult> {
+  const {
+    port = 6006,
+    open = true,
+    skipSetup = false,
+    skipStorybook = false,
+    skipFigma = false,
+    skipBuild = false,
+  } = options;
+
+  console.log(pc.cyan(`\n${BRAND.name} Dev Server\n`));
+
+  // Run auto-setup unless skipped
+  if (!skipSetup) {
+    const setupResult = await runSetup({
+      skipStorybook,
+      skipFigma,
+      skipBuild,
+    });
+
+    // Show errors if any
+    if (setupResult.errors.length > 0) {
+      console.log(pc.yellow('\n   Setup completed with warnings:'));
+      for (const error of setupResult.errors) {
+        console.log(pc.dim(`   ${error}`));
+      }
+    }
+  }
+
+  // Import viewer directly (it's a dependency of CLI)
+  const { createDevServer } = await import('../viewer/index.js');
+
+  console.log(pc.dim('\nStarting dev server...'));
+
+  const parsedPort = typeof port === 'string' ? parseInt(port, 10) : port;
+
+  try {
+    const server = await createDevServer({
+      port: parsedPort,
+      open,
+      projectRoot: process.cwd(),
+    });
+
+    const address = server.httpServer?.address();
+    const actualPort =
+      typeof address === 'object' && address ? address.port : parsedPort;
+
+    console.log(pc.green(`\n   Viewer running at http://localhost:${actualPort}/fragments/\n`));
+    console.log(pc.dim('Press Ctrl+C to stop\n'));
+
+    return {
+      success: true,
+      port: typeof actualPort === 'number' ? actualPort : parseInt(String(actualPort), 10),
+    };
+  } catch (error) {
+    const errMsg = error instanceof Error ? error.message : String(error);
+
+    if (errMsg.includes('EADDRINUSE') || errMsg.includes('address already in use')) {
+      console.error(pc.red(`\n   Port ${parsedPort} is already in use.`));
+      console.error(pc.dim(`   Try a different port: ${BRAND.cliCommand} dev --port ${parsedPort + 1}\n`));
+    } else if (errMsg.includes('EACCES')) {
+      console.error(pc.red(`\n   Permission denied for port ${parsedPort}.`));
+      console.error(pc.dim(`   Try a port above 1024: ${BRAND.cliCommand} dev --port 6006\n`));
+    } else {
+      console.error(pc.red(`\n   Failed to start dev server: ${errMsg}\n`));
+    }
+
+    return { success: false };
+  }
+}