@fragments-sdk/cli 0.10.1 → 0.12.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";

package/src/viewer/__tests__/a11y-fixes.test.ts

@@ -1,358 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-  getStaticFix,
-  generateElementFix,
-  getImpactDescription,
-  getImpactColorClass,
-  extractWcagTags,
-  parseWcagTag,
-} from '../utils/a11y-fixes.js';
-import type { SerializedNode } from '../types/a11y.js';
-
-function makeNode(overrides?: Partial<SerializedNode>): SerializedNode {
-  return {
-    html: '<div>test</div>',
-    target: ['div'],
-    ...overrides,
-  };
-}
-
-function makeContrastNode(
-  fg: string,
-  bg: string,
-  ratio: number,
-  required: number
-): SerializedNode {
-  return {
-    html: '<span style="color: ' + fg + '; background: ' + bg + '">text</span>',
-    target: ['span'],
-    any: [
-      {
-        id: 'color-contrast',
-        data: {
-          fgColor: fg,
-          bgColor: bg,
-          contrastRatio: ratio,
-          expectedContrastRatio: required,
-          fontSize: '16px',
-          fontWeight: 'normal',
-        },
-        impact: 'serious',
-        message: 'Element has insufficient color contrast',
-      },
-    ],
-  };
-}
-
-describe('getStaticFix', () => {
-  const knownRules = [
-    'color-contrast',
-    'image-alt',
-    'button-name',
-    'link-name',
-    'label',
-    'aria-valid-attr',
-    'aria-valid-attr-value',
-    'aria-required-attr',
-    'heading-order',
-    'tabindex',
-    'duplicate-id',
-  ];
-
-  for (const ruleId of knownRules) {
-    it(`returns fix for "${ruleId}"`, () => {
-      const fix = getStaticFix(ruleId);
-      expect(fix).not.toBeNull();
-      expect(fix!.whyItMatters).toBeTruthy();
-      expect(fix!.howToFix).toBeTruthy();
-    });
-  }
-
-  it('returns null for unknown rule', () => {
-    expect(getStaticFix('unknown-rule')).toBeNull();
-  });
-
-  it('color-contrast has wcagCriterion 1.4.3 AA', () => {
-    const fix = getStaticFix('color-contrast');
-    expect(fix!.wcagCriterion).toBeDefined();
-    expect(fix!.wcagCriterion!.id).toBe('1.4.3');
-    expect(fix!.wcagCriterion!.level).toBe('AA');
-  });
-});
-
-describe('generateElementFix — color-contrast', () => {
-  it('valid colors → autoFixable: true with suggested hex', () => {
-    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.autoFixable).toBe(true);
-    expect(fix!.explanation).toMatch(/#[0-9a-f]{6}/);
-  });
-
-  it('includes ratio in explanation', () => {
-    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix!.explanation).toContain('3.54');
-  });
-
-  it('includes required ratio in explanation', () => {
-    const node = makeContrastNode('#888888', '#ffffff', 3.54, 4.5);
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix!.explanation).toContain('4.5');
-  });
-
-  it('missing fg color → null', () => {
-    const node = makeNode({
-      any: [{
-        id: 'color-contrast',
-        data: { bgColor: '#ffffff' },
-        impact: 'serious',
-        message: 'Insufficient contrast',
-      }],
-    });
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix).toBeNull();
-  });
-
-  it('missing bg color → null', () => {
-    const node = makeNode({
-      any: [{
-        id: 'color-contrast',
-        data: { fgColor: '#888888' },
-        impact: 'serious',
-        message: 'Insufficient contrast',
-      }],
-    });
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix).toBeNull();
-  });
-
-  it('CSS variable colors → autoFixable: false', () => {
-    const node = makeNode({
-      html: '<span>text</span>',
-      any: [{
-        id: 'color-contrast',
-        data: {
-          fgColor: 'var(--text-color)',
-          bgColor: '#ffffff',
-          contrastRatio: 3.0,
-          expectedContrastRatio: 4.5,
-        },
-        impact: 'serious',
-        message: 'Insufficient contrast',
-      }],
-    });
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.autoFixable).toBe(false);
-  });
-
-  it('no any data → null', () => {
-    const node = makeNode({ html: '<span>text</span>' });
-    const fix = generateElementFix('color-contrast', node);
-    expect(fix).toBeNull();
-  });
-});
-
-describe('generateElementFix — image-alt', () => {
-  it('missing alt → adds alt attribute', () => {
-    const node = makeNode({ html: '<img src="hero.jpg">' });
-    const fix = generateElementFix('image-alt', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('alt=');
-    expect(fix!.autoFixable).toBe(true);
-  });
-
-  it('empty alt → replaces with descriptive text', () => {
-    const node = makeNode({ html: '<img src="photo.jpg" alt="">' });
-    const fix = generateElementFix('image-alt', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('alt="photo"');
-  });
-
-  it('derives alt text from filename', () => {
-    const node = makeNode({ html: '<img src="/images/user-profile.png">' });
-    const fix = generateElementFix('image-alt', node);
-    expect(fix!.fixedHtml).toContain('user profile');
-  });
-
-  it('handles camelCase filenames', () => {
-    const node = makeNode({ html: '<img src="teamPhoto.jpg">' });
-    const fix = generateElementFix('image-alt', node);
-    expect(fix!.fixedHtml).toContain('team photo');
-  });
-
-  it('autoFixable is true', () => {
-    const node = makeNode({ html: '<img src="test.jpg">' });
-    const fix = generateElementFix('image-alt', node);
-    expect(fix!.autoFixable).toBe(true);
-  });
-});
-
-describe('generateElementFix — button-name', () => {
-  it('SVG-only button → aria-label suggestion', () => {
-    const node = makeNode({
-      html: '<button><svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10"/></svg></button>',
-    });
-    const fix = generateElementFix('button-name', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('aria-label');
-  });
-
-  it('empty button → text suggestion', () => {
-    const node = makeNode({ html: '<button></button>' });
-    const fix = generateElementFix('button-name', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('[Button text]');
-  });
-
-  it('autoFixable is false (requires human decision)', () => {
-    const node = makeNode({ html: '<button></button>' });
-    const fix = generateElementFix('button-name', node);
-    expect(fix!.autoFixable).toBe(false);
-  });
-});
-
-describe('generateElementFix — link-name', () => {
-  it('SVG-only link → aria-label suggestion', () => {
-    const node = makeNode({
-      html: '<a href="/"><svg xmlns="http://www.w3.org/2000/svg"><path d="M10 10"/></svg></a>',
-    });
-    const fix = generateElementFix('link-name', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('aria-label');
-  });
-
-  it('empty link → text suggestion', () => {
-    const node = makeNode({ html: '<a href="/about"></a>' });
-    const fix = generateElementFix('link-name', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('[Link text]');
-  });
-
-  it('text link → explanation only (no fixedHtml change needed)', () => {
-    const node = makeNode({ html: '<a href="/about">Click here</a>' });
-    const fix = generateElementFix('link-name', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.explanation).toContain('descriptive');
-  });
-
-  it('autoFixable is false', () => {
-    const node = makeNode({ html: '<a href="/"></a>' });
-    const fix = generateElementFix('link-name', node);
-    expect(fix!.autoFixable).toBe(false);
-  });
-});
-
-describe('generateElementFix — label', () => {
-  it('input with id → label suggestion', () => {
-    const node = makeNode({ html: '<input type="email" id="email-input">' });
-    const fix = generateElementFix('label', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.explanation).toContain('email-input');
-    expect(fix!.explanation).toContain('<label');
-  });
-
-  it('input without id → adds id', () => {
-    const node = makeNode({ html: '<input type="text">' });
-    const fix = generateElementFix('label', node);
-    expect(fix).not.toBeNull();
-    expect(fix!.fixedHtml).toContain('id=');
-  });
-
-  it('autoFixable is false', () => {
-    const node = makeNode({ html: '<input type="text">' });
-    const fix = generateElementFix('label', node);
-    expect(fix!.autoFixable).toBe(false);
-  });
-});
-
-describe('generateElementFix — unknown rule', () => {
-  it('heading-order → null (no generator registered)', () => {
-    const node = makeNode({ html: '<h4>Section</h4>' });
-    const fix = generateElementFix('heading-order', node);
-    expect(fix).toBeNull();
-  });
-});
-
-describe('getImpactDescription', () => {
-  it('critical → correct description', () => {
-    expect(getImpactDescription('critical')).toContain('completely block');
-  });
-
-  it('serious → correct description', () => {
-    expect(getImpactDescription('serious')).toContain('very difficult');
-  });
-
-  it('moderate → correct description', () => {
-    expect(getImpactDescription('moderate')).toContain('some difficulty');
-  });
-
-  it('minor → correct description', () => {
-    expect(getImpactDescription('minor')).toContain('slight inconvenience');
-  });
-
-  it('null → fallback description', () => {
-    expect(getImpactDescription(null)).toContain('not determined');
-  });
-});
-
-describe('getImpactColorClass', () => {
-  it('critical → error variant with danger color', () => {
-    const result = getImpactColorClass('critical');
-    expect(result.variant).toBe('error');
-    expect(result.color).toContain('danger');
-    expect(result.bg).toContain('danger');
-    expect(result.borderLeft).toContain('danger');
-  });
-
-  it('serious → error variant with danger color', () => {
-    const result = getImpactColorClass('serious');
-    expect(result.variant).toBe('error');
-    expect(result.color).toContain('danger');
-  });
-
-  it('moderate → warning variant', () => {
-    const result = getImpactColorClass('moderate');
-    expect(result.variant).toBe('warning');
-    expect(result.color).toContain('warning');
-  });
-
-  it('minor/null → info variant', () => {
-    const minorResult = getImpactColorClass('minor');
-    expect(minorResult.variant).toBe('info');
-    expect(minorResult.color).toContain('info');
-    const nullResult = getImpactColorClass(null);
-    expect(nullResult.variant).toBe('info');
-    expect(nullResult.color).toContain('info');
-  });
-});
-
-describe('extractWcagTags', () => {
-  it('filters wcag-prefixed tags only', () => {
-    const tags = ['wcag2a', 'wcag143', 'cat.color', 'best-practice'];
-    const result = extractWcagTags(tags);
-    expect(result).toEqual(['wcag2a', 'wcag143']);
-  });
-
-  it('returns empty when no wcag tags', () => {
-    const tags = ['best-practice', 'cat.aria'];
-    const result = extractWcagTags(tags);
-    expect(result).toEqual([]);
-  });
-});
-
-describe('parseWcagTag', () => {
-  it('wcag143 → 1.4.3', () => {
-    expect(parseWcagTag('wcag143')).toBe('1.4.3');
-  });
-
-  it('wcag111 → 1.1.1', () => {
-    expect(parseWcagTag('wcag111')).toBe('1.1.1');
-  });
-
-  it('non-matching → null', () => {
-    expect(parseWcagTag('wcag2a')).toBeNull();
-    expect(parseWcagTag('best-practice')).toBeNull();
-  });
-});