@fragments-sdk/cli 0.2.2

package/src/viewer/utils/actionExport.ts

@@ -0,0 +1,372 @@
+/**
+ * Action Export Utilities
+ *
+ * Generate test assertions from recorded user interactions.
+ * Supports multiple export formats: JSON, Jest, Playwright
+ */
+
+import type { ActionLog } from '../hooks/useActions.js';
+
+export type ExportFormat = 'json' | 'jest' | 'playwright';
+
+export interface ExportOptions {
+  /** Component name for generated test */
+  componentName?: string;
+  /** Variant name for generated test */
+  variantName?: string;
+  /** Include timestamps in export */
+  includeTimestamps?: boolean;
+  /** Include event details in comments */
+  includeComments?: boolean;
+}
+
+/**
+ * Export actions as JSON
+ */
+export function exportActionsAsJson(
+  logs: ActionLog[],
+  options: ExportOptions = {}
+): string {
+  const { includeTimestamps = false } = options;
+
+  const exportData = logs.map((log) => ({
+    action: log.name,
+    args: serializeArgs(log.args),
+    count: log.count > 1 ? log.count : undefined,
+    timestamp: includeTimestamps ? log.timestamp : undefined,
+  }));
+
+  return JSON.stringify(exportData, null, 2);
+}
+
+/**
+ * Export actions as Jest test assertions
+ */
+export function exportActionsAsJest(
+  logs: ActionLog[],
+  options: ExportOptions = {}
+): string {
+  const {
+    componentName = 'Component',
+    variantName = 'Default',
+    includeComments = true,
+  } = options;
+
+  const lines: string[] = [];
+
+  // Import statements
+  lines.push("import { render, screen, fireEvent } from '@testing-library/react';");
+  lines.push("import userEvent from '@testing-library/user-event';");
+  lines.push(`import { ${componentName} } from './${componentName}';`);
+  lines.push('');
+
+  // Test block
+  lines.push(`describe('${componentName}', () => {`);
+  lines.push(`  it('${variantName} - recorded interactions', async () => {`);
+  lines.push('    const user = userEvent.setup();');
+  lines.push('');
+
+  // Mock handlers
+  const actionNames = [...new Set(logs.map((l) => l.name))];
+  for (const name of actionNames) {
+    const handlerName = `mock${capitalize(name)}`;
+    lines.push(`    const ${handlerName} = jest.fn();`);
+  }
+  lines.push('');
+
+  // Render
+  lines.push(`    render(`);
+  lines.push(`      <${componentName}`);
+  for (const name of actionNames) {
+    lines.push(`        ${name}={mock${capitalize(name)}}`);
+  }
+  lines.push(`      />`);
+  lines.push(`    );`);
+  lines.push('');
+
+  // Assertions for each action
+  if (includeComments) {
+    lines.push('    // Recorded interactions:');
+  }
+
+  for (const log of logs) {
+    const handlerName = `mock${capitalize(log.name)}`;
+
+    if (includeComments && log.args.length > 0) {
+      lines.push(`    // ${log.name} called with: ${summarizeArgs(log.args)}`);
+    }
+
+    if (log.count > 1) {
+      lines.push(`    expect(${handlerName}).toHaveBeenCalledTimes(${log.count});`);
+    } else {
+      const serializedArgs = serializeArgsForJest(log.args);
+      if (serializedArgs.length > 0) {
+        lines.push(`    expect(${handlerName}).toHaveBeenCalledWith(${serializedArgs});`);
+      } else {
+        lines.push(`    expect(${handlerName}).toHaveBeenCalled();`);
+      }
+    }
+  }
+
+  lines.push('  });');
+  lines.push('});');
+
+  return lines.join('\n');
+}
+
+/**
+ * Export actions as Playwright test assertions
+ */
+export function exportActionsAsPlaywright(
+  logs: ActionLog[],
+  options: ExportOptions = {}
+): string {
+  const {
+    componentName = 'Component',
+    variantName = 'Default',
+    includeComments = true,
+  } = options;
+
+  const lines: string[] = [];
+
+  // Import statements
+  lines.push("import { test, expect } from '@playwright/test';");
+  lines.push('');
+
+  // Test block
+  lines.push(`test('${componentName} - ${variantName}', async ({ page }) => {`);
+  lines.push(`  // Navigate to component`);
+  lines.push(`  await page.goto('/?component=${encodeURIComponent(componentName)}&variant=${encodeURIComponent(variantName)}');`);
+  lines.push('');
+  lines.push(`  // Wait for component to render`);
+  lines.push(`  await page.waitForSelector('[data-preview-container="true"]');`);
+  lines.push('');
+
+  if (includeComments) {
+    lines.push('  // Recorded interactions:');
+  }
+
+  // Generate interaction replay
+  for (const log of logs) {
+    if (includeComments) {
+      lines.push(`  // ${log.name}${log.count > 1 ? ` (×${log.count})` : ''}: ${summarizeArgs(log.args)}`);
+    }
+
+    // Generate appropriate Playwright command based on action type
+    const playwrightCode = generatePlaywrightAction(log);
+    if (playwrightCode) {
+      lines.push(`  ${playwrightCode}`);
+    }
+  }
+
+  lines.push('');
+  lines.push('  // Add assertions here based on expected state changes');
+  lines.push('  // Example: await expect(page.getByRole("button")).toBeDisabled();');
+
+  lines.push('});');
+
+  return lines.join('\n');
+}
+
+/**
+ * Export actions in specified format
+ */
+export function exportActions(
+  logs: ActionLog[],
+  format: ExportFormat,
+  options: ExportOptions = {}
+): string {
+  switch (format) {
+    case 'json':
+      return exportActionsAsJson(logs, options);
+    case 'jest':
+      return exportActionsAsJest(logs, options);
+    case 'playwright':
+      return exportActionsAsPlaywright(logs, options);
+    default:
+      throw new Error(`Unknown export format: ${format}`);
+  }
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback for older browsers
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+      document.execCommand('copy');
+      return true;
+    } catch {
+      return false;
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  }
+}
+
+/**
+ * Download text as a file
+ */
+export function downloadAsFile(content: string, filename: string): void {
+  const blob = new Blob([content], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Get file extension for export format
+ */
+export function getFileExtension(format: ExportFormat): string {
+  switch (format) {
+    case 'json':
+      return '.json';
+    case 'jest':
+      return '.test.tsx';
+    case 'playwright':
+      return '.spec.ts';
+    default:
+      return '.txt';
+  }
+}
+
+// Helper functions
+
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function serializeArgs(args: unknown[]): unknown[] {
+  return args.map((arg) => {
+    if (arg instanceof Event) {
+      return {
+        __type: 'Event',
+        type: arg.type,
+        target: arg.target instanceof Element ? describeElement(arg.target) : null,
+      };
+    }
+    if (arg instanceof Element) {
+      return {
+        __type: 'Element',
+        ...describeElement(arg),
+      };
+    }
+    if (typeof arg === 'function') {
+      return { __type: 'function' };
+    }
+    return arg;
+  });
+}
+
+function describeElement(el: Element): object {
+  return {
+    tagName: el.tagName.toLowerCase(),
+    id: el.id || undefined,
+    className: el.className || undefined,
+    textContent: el.textContent?.slice(0, 50) || undefined,
+  };
+}
+
+function serializeArgsForJest(args: unknown[]): string {
+  if (args.length === 0) return '';
+
+  const parts: string[] = [];
+  for (const arg of args) {
+    if (arg instanceof Event) {
+      parts.push('expect.any(Event)');
+    } else if (arg instanceof Element) {
+      parts.push('expect.any(HTMLElement)');
+    } else if (typeof arg === 'function') {
+      parts.push('expect.any(Function)');
+    } else if (typeof arg === 'object' && arg !== null) {
+      parts.push(`expect.objectContaining(${JSON.stringify(arg)})`);
+    } else {
+      parts.push(JSON.stringify(arg));
+    }
+  }
+  return parts.join(', ');
+}
+
+function summarizeArgs(args: unknown[]): string {
+  if (args.length === 0) return '(no args)';
+
+  const summaries = args.map((arg) => {
+    if (arg instanceof Event) {
+      return `${arg.type} event`;
+    }
+    if (arg instanceof Element) {
+      return `<${arg.tagName.toLowerCase()}>`;
+    }
+    if (typeof arg === 'function') {
+      return 'ƒ()';
+    }
+    if (typeof arg === 'object' && arg !== null) {
+      return '{...}';
+    }
+    return JSON.stringify(arg);
+  });
+
+  return summaries.join(', ');
+}
+
+function generatePlaywrightAction(log: ActionLog): string | null {
+  const name = log.name.toLowerCase();
+
+  // Common click handlers
+  if (name.includes('click') || name === 'onpress') {
+    return "await page.getByRole('button').click(); // Adjust selector as needed";
+  }
+
+  // Change handlers
+  if (name.includes('change')) {
+    const value = log.args[0];
+    if (typeof value === 'string') {
+      return `await page.getByRole('textbox').fill(${JSON.stringify(value)});`;
+    }
+    return "await page.getByRole('textbox').fill('...'); // Add value";
+  }
+
+  // Submit handlers
+  if (name.includes('submit')) {
+    return "await page.getByRole('button', { name: 'Submit' }).click();";
+  }
+
+  // Focus/blur handlers
+  if (name.includes('focus')) {
+    return "await page.getByRole('textbox').focus();";
+  }
+  if (name.includes('blur')) {
+    return "await page.getByRole('textbox').blur();";
+  }
+
+  // Mouse events
+  if (name.includes('mouseenter') || name.includes('mouseover')) {
+    return "await page.getByRole('button').hover();";
+  }
+
+  // Keyboard events
+  if (name.includes('keydown') || name.includes('keyup') || name.includes('keypress')) {
+    const event = log.args[0] as { key?: string } | undefined;
+    if (event?.key) {
+      return `await page.keyboard.press(${JSON.stringify(event.key)});`;
+    }
+  }
+
+  // Default: add as comment
+  return `// ${log.name}: ${summarizeArgs(log.args)}`;
+}

package/src/viewer/utils/colorSchemes.ts

@@ -0,0 +1,201 @@
+export type ColorSchemeType =
+  | 'monochromatic'
+  | 'complementary'
+  | 'analogous'
+  | 'triadic'
+  | 'split-complementary'
+  | 'tetradic';
+
+export const COLOR_SCHEME_OPTIONS = [
+  { value: 'monochromatic', label: 'Monochromatic', description: 'Variations of a single hue' },
+  { value: 'complementary', label: 'Complementary', description: 'Two opposite colors' },
+  { value: 'analogous', label: 'Analogous', description: 'Three adjacent colors' },
+  { value: 'triadic', label: 'Triadic', description: 'Three evenly spaced colors' },
+  { value: 'split-complementary', label: 'Split Complementary', description: 'Base + two adjacent to complement' },
+  { value: 'tetradic', label: 'Tetradic (Square)', description: 'Four evenly spaced colors' },
+] as const;
+
+/**
+ * Convert hex color to HSL
+ */
+function hexToHsl(hex: string): [number, number, number] {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return [0, 0, 0];
+
+  let r = parseInt(result[1], 16) / 255;
+  let g = parseInt(result[2], 16) / 255;
+  let b = parseInt(result[3], 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+/**
+ * Convert HSL to hex color
+ */
+function hslToHex(h: number, s: number, l: number): string {
+  h = h / 360;
+  s = s / 100;
+  l = l / 100;
+
+  let r: number, g: number, b: number;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+
+  const toHex = (x: number) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Normalize hue to 0-360 range
+ */
+function normalizeHue(h: number): number {
+  h = h % 360;
+  return h < 0 ? h + 360 : h;
+}
+
+/**
+ * Generate a color scheme based on the type
+ */
+export function generateColorScheme(baseColor: string, type: ColorSchemeType): string[] {
+  const [h, s, l] = hexToHsl(baseColor);
+
+  switch (type) {
+    case 'monochromatic':
+      // Same hue, varying saturation and lightness
+      return [
+        hslToHex(h, Math.max(s - 20, 10), Math.min(l + 30, 90)),
+        hslToHex(h, s, Math.min(l + 15, 85)),
+        hslToHex(h, s, l), // Base
+        hslToHex(h, Math.min(s + 10, 100), Math.max(l - 15, 15)),
+        hslToHex(h, Math.min(s + 20, 100), Math.max(l - 30, 10)),
+      ];
+
+    case 'complementary':
+      // Base and opposite on color wheel
+      return [
+        hslToHex(h, s, Math.min(l + 20, 85)),
+        hslToHex(h, s, l), // Base
+        hslToHex(h, s, Math.max(l - 20, 15)),
+        hslToHex(normalizeHue(h + 180), s, Math.min(l + 10, 80)),
+        hslToHex(normalizeHue(h + 180), s, Math.max(l - 10, 20)),
+      ];
+
+    case 'analogous':
+      // Adjacent colors on the wheel (30° apart)
+      return [
+        hslToHex(normalizeHue(h - 30), s, l),
+        hslToHex(normalizeHue(h - 15), s, l),
+        hslToHex(h, s, l), // Base
+        hslToHex(normalizeHue(h + 15), s, l),
+        hslToHex(normalizeHue(h + 30), s, l),
+      ];
+
+    case 'triadic':
+      // Three colors 120° apart
+      return [
+        hslToHex(h, s, l), // Base
+        hslToHex(h, s, Math.min(l + 20, 85)),
+        hslToHex(normalizeHue(h + 120), s, l),
+        hslToHex(normalizeHue(h + 120), s, Math.max(l - 15, 20)),
+        hslToHex(normalizeHue(h + 240), s, l),
+      ];
+
+    case 'split-complementary':
+      // Base + two colors adjacent to the complement
+      return [
+        hslToHex(h, s, l), // Base
+        hslToHex(h, s, Math.min(l + 20, 85)),
+        hslToHex(normalizeHue(h + 150), s, l),
+        hslToHex(normalizeHue(h + 180), s, Math.min(l + 15, 80)),
+        hslToHex(normalizeHue(h + 210), s, l),
+      ];
+
+    case 'tetradic':
+      // Four colors 90° apart (square)
+      return [
+        hslToHex(h, s, l), // Base
+        hslToHex(normalizeHue(h + 90), s, l),
+        hslToHex(normalizeHue(h + 180), s, l),
+        hslToHex(normalizeHue(h + 270), s, l),
+        hslToHex(h, s, Math.min(l + 25, 85)), // Lighter base
+      ];
+
+    default:
+      return [baseColor];
+  }
+}
+
+/**
+ * Generate CSS variables for a color scheme
+ */
+export function generateCssVariables(colors: string[], prefix = 'color'): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const names = ['primary', 'secondary', 'tertiary', 'accent', 'muted'];
+
+  colors.forEach((color, index) => {
+    if (names[index]) {
+      vars[`--${prefix}-${names[index]}`] = color;
+    }
+  });
+
+  return vars;
+}
+
+/**
+ * Check if a color is light or dark
+ */
+export function isLightColor(hex: string): boolean {
+  const [, , l] = hexToHsl(hex);
+  return l > 50;
+}
+
+/**
+ * Get a contrasting text color (black or white)
+ */
+export function getContrastColor(hex: string): string {
+  return isLightColor(hex) ? '#000000' : '#ffffff';
+}