@fragments-sdk/cli 0.10.0 → 0.11.1

package/src/viewer/utils/actionExport.ts

@@ -1,372 +0,0 @@
-/**
- * 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

@@ -1,201 +0,0 @@
-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];
-
-  const r = parseInt(result[1], 16) / 255;
-  const g = parseInt(result[2], 16) / 255;
-  const 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';
-}