@fragments-sdk/cli 0.2.2

package/src/service/__tests__/props-extractor.test.ts

@@ -0,0 +1,365 @@
+/**
+ * Tests for the TypeScript props extractor module
+ */
+
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+import { mkdtemp, writeFile, rm, mkdir } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  extractPropsFromSource,
+  extractPropsFromFile,
+  convertToSegmentProps,
+} from "../enhance/props-extractor.js";
+
+let tempDir: string;
+
+beforeAll(async () => {
+  tempDir = await mkdtemp(join(tmpdir(), "props-extractor-test-"));
+});
+
+afterAll(async () => {
+  await rm(tempDir, { recursive: true, force: true });
+});
+
+async function writeTestFile(name: string, content: string): Promise<string> {
+  const filePath = join(tempDir, name);
+  await writeFile(filePath, content, "utf-8");
+  return filePath;
+}
+
+describe("extractPropsFromSource", () => {
+  it("should extract props from a basic interface", () => {
+    const source = `
+interface ButtonProps {
+  /** The visual style of the button */
+  variant: "primary" | "secondary" | "tertiary";
+  /** Button label text */
+  label: string;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+}
+
+export function Button(props: ButtonProps) {
+  return <button>{props.label}</button>;
+}
+`;
+    const result = extractPropsFromSource(source, "Button.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(3);
+
+    const variantProp = result.props.find((p) => p.name === "variant");
+    expect(variantProp).toBeDefined();
+    expect(variantProp?.required).toBe(true);
+    expect(variantProp?.description).toBe("The visual style of the button");
+    expect(variantProp?.enumValues).toEqual(["primary", "secondary", "tertiary"]);
+
+    const labelProp = result.props.find((p) => p.name === "label");
+    expect(labelProp).toBeDefined();
+    expect(labelProp?.type).toBe("string");
+    expect(labelProp?.required).toBe(true);
+
+    const disabledProp = result.props.find((p) => p.name === "disabled");
+    expect(disabledProp).toBeDefined();
+    expect(disabledProp?.required).toBe(false);
+    expect(disabledProp?.propType.type).toBe("boolean");
+  });
+
+  it("should extract props from a type alias", () => {
+    const source = `
+type InputProps = {
+  /** Input type */
+  type: "text" | "email" | "password";
+  /** Input value */
+  value: string;
+  /** Placeholder text */
+  placeholder?: string;
+};
+
+export const Input = (props: InputProps) => <input {...props} />;
+`;
+    const result = extractPropsFromSource(source, "Input.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(3);
+
+    const typeProp = result.props.find((p) => p.name === "type");
+    expect(typeProp?.enumValues).toEqual(["text", "email", "password"]);
+  });
+
+  it("should handle function types", () => {
+    const source = `
+interface ClickableProps {
+  /** Click handler */
+  onClick: (event: MouseEvent) => void;
+  /** Optional callback */
+  onHover?: () => void;
+}
+
+export function Clickable(props: ClickableProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Clickable.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(2);
+
+    const onClickProp = result.props.find((p) => p.name === "onClick");
+    expect(onClickProp).toBeDefined();
+    expect(onClickProp?.propType.type).toBe("function");
+    expect(onClickProp?.required).toBe(true);
+  });
+
+  it("should handle array types", () => {
+    const source = `
+interface ListProps {
+  /** List items */
+  items: string[];
+  /** Selected items */
+  selected?: number[];
+}
+
+export function List(props: ListProps) {
+  return <ul />;
+}
+`;
+    const result = extractPropsFromSource(source, "List.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(2);
+
+    const itemsProp = result.props.find((p) => p.name === "items");
+    expect(itemsProp?.propType.type).toBe("array");
+  });
+
+  it("should handle ReactNode and children", () => {
+    const source = `
+import { ReactNode } from "react";
+
+interface ContainerProps {
+  /** Child elements */
+  children: ReactNode;
+  /** Optional header */
+  header?: ReactNode;
+}
+
+export function Container(props: ContainerProps) {
+  return <div>{props.children}</div>;
+}
+`;
+    const result = extractPropsFromSource(source, "Container.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(2);
+
+    const childrenProp = result.props.find((p) => p.name === "children");
+    expect(childrenProp?.propType.type).toBe("node");
+  });
+
+  it("should extract JSDoc default values", () => {
+    const source = `
+interface PaginationProps {
+  /** Current page number
+   * @default 1
+   */
+  page?: number;
+  /** Items per page
+   * @default 10
+   */
+  pageSize?: number;
+}
+
+export function Pagination(props: PaginationProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Pagination.tsx");
+
+    expect(result.success).toBe(true);
+
+    const pageProp = result.props.find((p) => p.name === "page");
+    expect(pageProp?.defaultValue).toBe(1);
+
+    const pageSizeProp = result.props.find((p) => p.name === "pageSize");
+    expect(pageSizeProp?.defaultValue).toBe(10);
+  });
+
+  it("should detect deprecated props", () => {
+    const source = `
+interface CardProps {
+  /** Card title */
+  title: string;
+  /**
+   * Old subtitle prop
+   * @deprecated Use description instead
+   */
+  subtitle?: string;
+  /** Card description */
+  description?: string;
+}
+
+export function Card(props: CardProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Card.tsx");
+
+    expect(result.success).toBe(true);
+
+    const subtitleProp = result.props.find((p) => p.name === "subtitle");
+    expect(subtitleProp?.deprecated).toBe("Use description instead");
+  });
+
+  it("should handle number and boolean literals in unions", () => {
+    const source = `
+interface GridProps {
+  /** Number of columns */
+  columns: 1 | 2 | 3 | 4 | 6 | 12;
+  /** Spacing variant */
+  spacing: "none" | "small" | "medium" | "large";
+}
+
+export function Grid(props: GridProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Grid.tsx");
+
+    expect(result.success).toBe(true);
+
+    const spacingProp = result.props.find((p) => p.name === "spacing");
+    expect(spacingProp?.enumValues).toEqual(["none", "small", "medium", "large"]);
+  });
+
+  it("should skip internal props starting with _ or $", () => {
+    const source = `
+interface InternalProps {
+  /** Public prop */
+  visible: boolean;
+  /** Internal state */
+  _internal: number;
+  /** Another internal */
+  $secret: string;
+}
+
+export function Internal(props: InternalProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Internal.tsx");
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(1);
+    expect(result.props[0].name).toBe("visible");
+  });
+
+  it("should find any Props interface if named one not found", () => {
+    const source = `
+interface MyCustomProps {
+  /** Custom value */
+  value: string;
+}
+
+export function Component(props: MyCustomProps) {
+  return <div />;
+}
+`;
+    const result = extractPropsFromSource(source, "Unknown.tsx", {
+      propsTypeName: "UnknownProps", // Won't be found
+    });
+
+    expect(result.success).toBe(true);
+    expect(result.props).toHaveLength(1);
+    expect(result.propsTypeName).toBe("MyCustomProps");
+  });
+});
+
+describe("extractPropsFromFile", () => {
+  it("should extract props from a file", async () => {
+    const filePath = await writeTestFile(
+      "FileButton.tsx",
+      `
+interface FileButtonProps {
+  /** Button variant */
+  variant: "primary" | "secondary";
+  /** Button text */
+  children: React.ReactNode;
+}
+
+export function FileButton(props: FileButtonProps) {
+  return <button>{props.children}</button>;
+}
+`
+    );
+
+    const result = await extractPropsFromFile(filePath);
+
+    expect(result.success).toBe(true);
+    expect(result.componentName).toBe("FileButton");
+    expect(result.props).toHaveLength(2);
+  });
+
+  it("should handle non-existent files gracefully", async () => {
+    const result = await extractPropsFromFile("/nonexistent/path/Button.tsx");
+
+    expect(result.success).toBe(false);
+    expect(result.warnings.length).toBeGreaterThan(0);
+  });
+
+  it("should infer component name from index.tsx", async () => {
+    const compDir = join(tempDir, "MyComponent");
+    await mkdir(compDir, { recursive: true });
+
+    const filePath = await writeTestFile(
+      "MyComponent/index.tsx",
+      `
+interface MyComponentProps {
+  value: string;
+}
+
+export function MyComponent(props: MyComponentProps) {
+  return <div />;
+}
+`
+    );
+
+    const result = await extractPropsFromFile(filePath);
+
+    expect(result.componentName).toBe("MyComponent");
+  });
+});
+
+describe("convertToSegmentProps", () => {
+  it("should convert extracted props to segment format", () => {
+    const source = `
+interface ButtonProps {
+  /** Button variant */
+  variant: "primary" | "secondary";
+  /** Whether disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /** Click handler */
+  onClick: () => void;
+}
+`;
+    const result = extractPropsFromSource(source, "Button.tsx");
+    const segmentProps = convertToSegmentProps(result.props);
+
+    expect(segmentProps).toHaveProperty("variant");
+    expect(segmentProps.variant.type).toBe("enum");
+    expect(segmentProps.variant.values).toEqual(["primary", "secondary"]);
+    expect(segmentProps.variant.description).toBe("Button variant");
+
+    expect(segmentProps).toHaveProperty("disabled");
+    expect(segmentProps.disabled.type).toBe("boolean");
+    expect(segmentProps.disabled.required).toBe(false);
+    expect(segmentProps.disabled.default).toBe(false);
+
+    expect(segmentProps).toHaveProperty("onClick");
+    expect(segmentProps.onClick.type).toBe("function");
+    expect(segmentProps.onClick.required).toBe(true);
+  });
+});

package/src/service/__tests__/token-registry.test.ts

@@ -0,0 +1,267 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  TokenRegistryManager,
+  createTokenRegistry,
+} from "../token-registry.js";
+import type { TokenConfig } from "../../core/index.js";
+
+describe("TokenRegistryManager", () => {
+  let testDir: string;
+  let manager: TokenRegistryManager;
+
+  beforeEach(async () => {
+    testDir = join(tmpdir(), `token-registry-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    await mkdir(testDir, { recursive: true });
+    manager = createTokenRegistry();
+  });
+
+  afterEach(async () => {
+    manager.clear();
+    try {
+      await rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe("findClosestToken", () => {
+    beforeEach(async () => {
+      // Create a CSS token file for testing
+      const cssTokens = `
+:root {
+  --color-primary: #ff0000;
+  --color-secondary: #0000ff;
+  --color-accent: #ff0044;
+  --color-gray: #808080;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --sizing-icon: 24px;
+  --sizing-button: 40px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+}
+      `;
+
+      await writeFile(join(testDir, "tokens.css"), cssTokens);
+
+      const config: TokenConfig = {
+        include: ["tokens.css"],
+      };
+
+      await manager.initialize(config, testDir);
+    });
+
+    describe("numeric values", () => {
+      it("finds exact matching token", () => {
+        const results = manager.findClosestToken("16px", "spacing");
+
+        expect(results.length).toBeGreaterThan(0);
+        expect(results[0].token.name).toContain("spacing");
+        expect(results[0].token.name).toContain("md");
+        expect(results[0].distance).toBe(0);
+        expect(results[0].confidence).toBe(1);
+      });
+
+      it("finds close numeric tokens within threshold", () => {
+        // 17px is 1px away from 16px
+        const results = manager.findClosestToken("17px", "spacing", {
+          numericThreshold: 4,
+        });
+
+        expect(results.length).toBeGreaterThan(0);
+        expect(results[0].token.name).toContain("md"); // 16px is closest
+        expect(results[0].distance).toBe(1);
+      });
+
+      it("excludes tokens outside threshold", () => {
+        // 50px is far from all spacing tokens (closest is 32px = xl, 18px away)
+        const results = manager.findClosestToken("50px", "spacing", {
+          numericThreshold: 4,
+        });
+
+        // Should return empty since nothing is within 4px
+        expect(results).toHaveLength(0);
+      });
+
+      it("sorts results by distance", () => {
+        // 20px: between md (16px, 4 away) and lg (24px, 4 away)
+        const results = manager.findClosestToken("20px", "spacing", {
+          numericThreshold: 5,
+        });
+
+        expect(results.length).toBeGreaterThanOrEqual(2);
+        // Results should be sorted by distance
+        for (let i = 1; i < results.length; i++) {
+          expect(results[i].distance).toBeGreaterThanOrEqual(results[i - 1].distance);
+        }
+      });
+
+      it("infers category from numeric value when not specified", () => {
+        const results = manager.findClosestToken("16px");
+
+        // Should search spacing, sizing, and radius
+        expect(results.length).toBeGreaterThan(0);
+      });
+    });
+
+    describe("color values", () => {
+      it("finds exact matching color token (hex)", () => {
+        const results = manager.findClosestToken("#ff0000", "color");
+
+        expect(results.length).toBeGreaterThan(0);
+        expect(results[0].token.name).toContain("color");
+        expect(results[0].token.name).toContain("primary");
+        expect(results[0].distance).toBe(0);
+        expect(results[0].confidence).toBe(1);
+      });
+
+      it("finds exact matching color token (case insensitive)", () => {
+        const results = manager.findClosestToken("#FF0000", "color");
+
+        expect(results.length).toBeGreaterThan(0);
+        expect(results[0].token.name).toContain("primary");
+      });
+
+      it("finds close colors within Delta E threshold", () => {
+        // #ff0022 is close to #ff0000 (primary) and #ff0044 (accent)
+        const results = manager.findClosestToken("#ff0022", "color", {
+          colorDeltaE: 15,
+        });
+
+        // Should find at least one close match
+        expect(results.length).toBeGreaterThanOrEqual(0);
+      });
+
+      it("infers color category when not specified", () => {
+        const results = manager.findClosestToken("#ff0000");
+
+        expect(results.length).toBeGreaterThan(0);
+        expect(results[0].token.category).toBe("color");
+      });
+    });
+
+    describe("options", () => {
+      it("respects limit option", () => {
+        const results = manager.findClosestToken("10px", "spacing", {
+          numericThreshold: 10,
+          limit: 2,
+        });
+
+        expect(results.length).toBeLessThanOrEqual(2);
+      });
+
+      it("returns empty array when no tokens match", () => {
+        const results = manager.findClosestToken("100px", "spacing", {
+          numericThreshold: 2,
+        });
+
+        expect(results).toHaveLength(0);
+      });
+
+      it("returns empty when registry not initialized", () => {
+        const uninitializedManager = createTokenRegistry();
+        const results = uninitializedManager.findClosestToken("#ff0000", "color");
+
+        expect(results).toHaveLength(0);
+      });
+    });
+
+    describe("confidence scores", () => {
+      it("returns confidence of 1 for exact matches", () => {
+        const results = manager.findClosestToken("16px", "spacing");
+
+        expect(results[0].confidence).toBe(1);
+      });
+
+      it("returns lower confidence for non-exact matches", () => {
+        const results = manager.findClosestToken("18px", "spacing", {
+          numericThreshold: 4,
+        });
+
+        expect(results[0].confidence).toBeLessThan(1);
+        expect(results[0].confidence).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe("initialization", () => {
+    it("can be initialized with token files", async () => {
+      const cssTokens = `:root { --color-test: #123456; }`;
+      await writeFile(join(testDir, "test-tokens.css"), cssTokens);
+
+      const config: TokenConfig = {
+        include: ["test-tokens.css"],
+      };
+
+      const registry = await manager.initialize(config, testDir);
+
+      expect(registry).toBeDefined();
+      expect(manager.isInitialized()).toBe(true);
+    });
+
+    it("returns existing registry if already initialized", async () => {
+      const cssTokens = `:root { --color-test: #123456; }`;
+      await writeFile(join(testDir, "tokens.css"), cssTokens);
+
+      const config: TokenConfig = {
+        include: ["tokens.css"],
+      };
+
+      const registry1 = await manager.initialize(config, testDir);
+      const registry2 = await manager.initialize(config, testDir);
+
+      expect(registry1).toBe(registry2);
+    });
+  });
+
+  describe("findByValue", () => {
+    beforeEach(async () => {
+      const cssTokens = `:root { --color-primary: #ff0000; }`;
+      await writeFile(join(testDir, "tokens.css"), cssTokens);
+
+      const config: TokenConfig = {
+        include: ["tokens.css"],
+      };
+
+      await manager.initialize(config, testDir);
+    });
+
+    it("finds token by exact value", () => {
+      const names = manager.findByValue("#ff0000");
+
+      expect(names.length).toBeGreaterThan(0);
+      expect(names.some(n => n.includes("primary"))).toBe(true);
+    });
+
+    it("returns empty array for unknown value", () => {
+      const names = manager.findByValue("#ffffff");
+
+      expect(names).toHaveLength(0);
+    });
+  });
+
+  describe("clear", () => {
+    it("clears the registry", async () => {
+      const cssTokens = `:root { --color-test: #123456; }`;
+      await writeFile(join(testDir, "tokens.css"), cssTokens);
+
+      const config: TokenConfig = {
+        include: ["tokens.css"],
+      };
+
+      await manager.initialize(config, testDir);
+      expect(manager.isInitialized()).toBe(true);
+
+      manager.clear();
+      expect(manager.isInitialized()).toBe(false);
+    });
+  });
+});