@fragments-sdk/cli 0.2.2

package/src/migrate/__tests__/args/args.test.ts

@@ -0,0 +1,452 @@
+import { describe, it, expect } from "vitest";
+import { __testing } from "../../parser.js";
+
+const { parseArgs, parseArgsSimple, parseArgValue, extractConstDeclarations } = __testing;
+
+describe("parseArgs", () => {
+  describe("basic key-value parsing", () => {
+    it("parses string values", () => {
+      const result = parseArgs(`label: 'Hello World'`);
+      expect(result.label).toBe("Hello World");
+    });
+
+    it("parses numeric values", () => {
+      const result = parseArgs(`count: 42, price: 19.99`);
+      expect(result.count).toBe(42);
+      expect(result.price).toBe(19.99);
+    });
+
+    it("parses boolean values", () => {
+      const result = parseArgs(`disabled: true, visible: false`);
+      expect(result.disabled).toBe(true);
+      expect(result.visible).toBe(false);
+    });
+
+    it("parses null and undefined", () => {
+      const result = parseArgs(`value: null, other: undefined`);
+      expect(result.value).toBeNull();
+      expect(result.other).toBeUndefined();
+    });
+  });
+
+  describe("nested objects", () => {
+    it("parses simple nested object", () => {
+      const result = parseArgs(`style: { color: 'red', size: 12 }`);
+      expect(result.style).toEqual({ color: "red", size: 12 });
+    });
+
+    it("parses deeply nested objects", () => {
+      const result = parseArgs(`config: { theme: { colors: { primary: 'blue' } } }`);
+      expect(result.config).toEqual({
+        theme: { colors: { primary: "blue" } },
+      });
+    });
+
+    it("handles empty objects", () => {
+      const result = parseArgs(`options: {}`);
+      expect(result.options).toEqual({});
+    });
+  });
+
+  describe("arrays", () => {
+    it("parses string arrays", () => {
+      const result = parseArgs(`items: ['a', 'b', 'c']`);
+      expect(result.items).toEqual(["a", "b", "c"]);
+    });
+
+    it("parses numeric arrays", () => {
+      const result = parseArgs(`numbers: [1, 2, 3, 4, 5]`);
+      expect(result.numbers).toEqual([1, 2, 3, 4, 5]);
+    });
+
+    it("parses mixed arrays", () => {
+      const result = parseArgs(`mixed: ['text', 42, true]`);
+      expect(result.mixed).toEqual(["text", 42, true]);
+    });
+
+    it("parses arrays of objects", () => {
+      const result = parseArgs(`users: [{ name: 'Alice' }, { name: 'Bob' }]`);
+      expect(result.users).toEqual([{ name: "Alice" }, { name: "Bob" }]);
+    });
+
+    it("handles empty arrays", () => {
+      const result = parseArgs(`list: []`);
+      expect(result.list).toEqual([]);
+    });
+  });
+
+  describe("spread syntax", () => {
+    it("resolves spread from const declarations", () => {
+      const constDeclarations = new Map([
+        ["defaults", { size: "medium", variant: "primary" }],
+      ]);
+      const result = parseArgs(`...defaults, label: 'Click'`, constDeclarations);
+      expect(result.size).toBe("medium");
+      expect(result.variant).toBe("primary");
+      expect(result.label).toBe("Click");
+    });
+
+    it("marks unresolved spreads", () => {
+      const result = parseArgs(`...unknownVar, label: 'Click'`);
+      expect(result.__SPREAD__).toBe("__REF__unknownVar");
+    });
+
+    it("explicit values override spread values", () => {
+      const constDeclarations = new Map([
+        ["defaults", { size: "small", label: "Default" }],
+      ]);
+      const result = parseArgs(`...defaults, size: 'large'`, constDeclarations);
+      expect(result.size).toBe("large");
+      expect(result.label).toBe("Default");
+    });
+  });
+
+  describe("shorthand properties", () => {
+    it("marks shorthand properties as references", () => {
+      const result = parseArgs(`disabled`);
+      expect(result.disabled).toBe("__REF__disabled");
+    });
+
+    it("handles multiple shorthand properties", () => {
+      const result = parseArgs(`disabled, loading, visible`);
+      expect(result.disabled).toBe("__REF__disabled");
+      expect(result.loading).toBe("__REF__loading");
+      expect(result.visible).toBe("__REF__visible");
+    });
+  });
+
+  describe("variable references", () => {
+    it("marks identifiers as references", () => {
+      const result = parseArgs(`onClick: handleClick`);
+      expect(result.onClick).toBe("__REF__handleClick");
+    });
+
+    it("marks property access as references", () => {
+      const result = parseArgs(`data: props.userData`);
+      expect(result.data).toBe("__REF__props.userData");
+    });
+
+    it("marks optional chaining as references", () => {
+      const result = parseArgs(`value: config?.settings`);
+      expect(result.value).toBe("__REF__config?.settings");
+    });
+
+    it("marks array access as references", () => {
+      const result = parseArgs(`item: items[0]`);
+      expect(result.item).toBe("__REF__items[0]");
+    });
+  });
+
+  describe("variable reference resolution", () => {
+    it("resolves simple variable reference from constDeclarations", () => {
+      const constDeclarations = new Map([
+        ["mockOptions", [{ label: "Option 1" }, { label: "Option 2" }]],
+      ]);
+      const result = parseArgs(`options: mockOptions`, constDeclarations);
+      expect(result.options).toEqual([{ label: "Option 1" }, { label: "Option 2" }]);
+    });
+
+    it("resolves object variable reference from constDeclarations", () => {
+      const constDeclarations = new Map([
+        ["defaultStyle", { color: "blue", fontSize: 14 }],
+      ]);
+      const result = parseArgs(`style: defaultStyle`, constDeclarations);
+      expect(result.style).toEqual({ color: "blue", fontSize: 14 });
+    });
+
+    it("resolves property access from constDeclarations", () => {
+      const constDeclarations = new Map([
+        ["config", { theme: { primary: "blue", secondary: "gray" } }],
+      ]);
+      const result = parseArgs(`color: config.theme.primary`, constDeclarations);
+      expect(result.color).toBe("blue");
+    });
+
+    it("resolves optional chain property access from constDeclarations", () => {
+      const constDeclarations = new Map([
+        ["settings", { display: { mode: "dark" } }],
+      ]);
+      const result = parseArgs(`mode: settings?.display?.mode`, constDeclarations);
+      expect(result.mode).toBe("dark");
+    });
+
+    it("falls back to __REF__ when variable not in constDeclarations", () => {
+      const constDeclarations = new Map([
+        ["otherVar", { value: 1 }],
+      ]);
+      const result = parseArgs(`data: unknownVar`, constDeclarations);
+      expect(result.data).toBe("__REF__unknownVar");
+    });
+
+    it("falls back to __REF__ when property path doesn't exist", () => {
+      const constDeclarations = new Map([
+        ["config", { theme: { primary: "blue" } }],
+      ]);
+      const result = parseArgs(`color: config.nonexistent.path`, constDeclarations);
+      expect(result.color).toBe("__REF__config.nonexistent.path");
+    });
+
+    it("resolves variables inside nested objects", () => {
+      const constDeclarations = new Map([
+        ["defaultPadding", 16],
+      ]);
+      // Note: defaultPadding is a primitive, not object - this tests value resolution in nested context
+      const result = parseArgs(`style: { padding: 8, margin: 4 }`, constDeclarations);
+      expect(result.style).toEqual({ padding: 8, margin: 4 });
+    });
+
+    it("resolves variables inside arrays", () => {
+      const constDeclarations = new Map([
+        ["item1", { id: 1, name: "First" }],
+        ["item2", { id: 2, name: "Second" }],
+      ]);
+      const result = parseArgs(`items: [item1, item2]`, constDeclarations);
+      expect(result.items).toEqual([
+        { id: 1, name: "First" },
+        { id: 2, name: "Second" },
+      ]);
+    });
+
+    it("handles mixed resolved and unresolved variables", () => {
+      const constDeclarations = new Map([
+        ["knownVar", "resolved value"],
+      ]);
+      const result = parseArgs(`known: knownVar, unknown: unknownVar`, constDeclarations);
+      expect(result.known).toBe("resolved value");
+      expect(result.unknown).toBe("__REF__unknownVar");
+    });
+
+    it("resolves deeply nested property access", () => {
+      const constDeclarations = new Map([
+        ["app", {
+          settings: {
+            ui: {
+              theme: {
+                colors: { primary: "#007bff" }
+              }
+            }
+          }
+        }],
+      ]);
+      const result = parseArgs(`primaryColor: app.settings.ui.theme.colors.primary`, constDeclarations);
+      expect(result.primaryColor).toBe("#007bff");
+    });
+  });
+
+  describe("special values", () => {
+    it("marks JSX as special value", () => {
+      const result = parseArgs(`icon: <Icon />`);
+      expect(result.icon).toBe("__JSX__");
+    });
+
+    it("marks functions as expressions", () => {
+      const result = parseArgs(`onClick: () => console.log('clicked')`);
+      expect(result.onClick).toBe("__EXPR__");
+    });
+
+    it("marks function calls as expressions", () => {
+      const result = parseArgs(`value: getValue()`);
+      expect(result.value).toBe("__EXPR__");
+    });
+  });
+
+  describe("complex scenarios", () => {
+    it("handles commas inside strings", () => {
+      const result = parseArgs(`message: 'Hello, World!'`);
+      expect(result.message).toBe("Hello, World!");
+    });
+
+    it("handles colons inside strings", () => {
+      const result = parseArgs(`time: '12:30:00'`);
+      expect(result.time).toBe("12:30:00");
+    });
+
+    it("handles braces inside strings", () => {
+      const result = parseArgs(`template: '{ value }'`);
+      expect(result.template).toBe("{ value }");
+    });
+
+    it("handles multiple complex properties", () => {
+      const result = parseArgs(`
+        name: 'Test',
+        count: 5,
+        enabled: true,
+        config: { key: 'value' },
+        items: ['a', 'b']
+      `);
+      expect(result.name).toBe("Test");
+      expect(result.count).toBe(5);
+      expect(result.enabled).toBe(true);
+      expect(result.config).toEqual({ key: "value" });
+      expect(result.items).toEqual(["a", "b"]);
+    });
+  });
+});
+
+describe("parseArgsSimple", () => {
+  it("parses basic key-value pairs", () => {
+    const result = parseArgsSimple(`label: 'Hello', count: 42`);
+    expect(result.label).toBe("Hello");
+    expect(result.count).toBe(42);
+  });
+
+  it("skips spread syntax (does not resolve)", () => {
+    const result = parseArgsSimple(`...defaults, label: 'Hello'`);
+    expect(result.__SPREAD__).toBeUndefined();
+    expect(result.label).toBe("Hello");
+  });
+
+  it("handles shorthand properties", () => {
+    const result = parseArgsSimple(`disabled`);
+    expect(result.disabled).toBe("__REF__disabled");
+  });
+});
+
+describe("parseArgValue", () => {
+  describe("variable resolution with constDeclarations", () => {
+    it("resolves simple identifier from constDeclarations", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["myValue", "resolved"],
+      ]);
+      const result = parseArgValue("myValue", constDeclarations);
+      expect(result).toBe("resolved");
+    });
+
+    it("resolves object identifier from constDeclarations", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["myObject", { a: 1, b: 2 }],
+      ]);
+      const result = parseArgValue("myObject", constDeclarations);
+      expect(result).toEqual({ a: 1, b: 2 });
+    });
+
+    it("resolves array identifier from constDeclarations", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["myArray", [1, 2, 3]],
+      ]);
+      const result = parseArgValue("myArray", constDeclarations);
+      expect(result).toEqual([1, 2, 3]);
+    });
+
+    it("resolves property access from constDeclarations", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["obj", { nested: { value: 42 } }],
+      ]);
+      const result = parseArgValue("obj.nested.value", constDeclarations);
+      expect(result).toBe(42);
+    });
+
+    it("resolves optional chain from constDeclarations", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["obj", { nested: { value: "found" } }],
+      ]);
+      const result = parseArgValue("obj?.nested?.value", constDeclarations);
+      expect(result).toBe("found");
+    });
+
+    it("returns __REF__ for unresolved identifier", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["other", "value"],
+      ]);
+      const result = parseArgValue("unknownVar", constDeclarations);
+      expect(result).toBe("__REF__unknownVar");
+    });
+
+    it("returns __REF__ for unresolved property path", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["obj", { a: 1 }],
+      ]);
+      const result = parseArgValue("obj.b.c", constDeclarations);
+      expect(result).toBe("__REF__obj.b.c");
+    });
+
+    it("passes constDeclarations to nested object parsing", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["innerValue", { x: 10 }],
+      ]);
+      const result = parseArgValue("{ prop: innerValue }", constDeclarations);
+      expect(result).toEqual({ prop: { x: 10 } });
+    });
+
+    it("passes constDeclarations to array parsing", () => {
+      const constDeclarations = new Map<string, unknown>([
+        ["item", { id: 1 }],
+      ]);
+      const result = parseArgValue("[item, item]", constDeclarations);
+      expect(result).toEqual([{ id: 1 }, { id: 1 }]);
+    });
+  });
+
+  describe("literal values (not affected by constDeclarations)", () => {
+    it("parses string literals", () => {
+      const result = parseArgValue("'hello'");
+      expect(result).toBe("hello");
+    });
+
+    it("parses number literals", () => {
+      const result = parseArgValue("42");
+      expect(result).toBe(42);
+    });
+
+    it("parses boolean literals", () => {
+      expect(parseArgValue("true")).toBe(true);
+      expect(parseArgValue("false")).toBe(false);
+    });
+  });
+});
+
+describe("extractConstDeclarations", () => {
+  it("extracts simple const object", () => {
+    const content = `
+      const defaultArgs = { size: 'medium', disabled: false };
+    `;
+    const result = extractConstDeclarations(content);
+    expect(result.get("defaultArgs")).toEqual({
+      size: "medium",
+      disabled: false,
+    });
+  });
+
+  it("extracts typed const object", () => {
+    const content = `
+      const baseArgs: ButtonArgs = { variant: 'primary' };
+    `;
+    const result = extractConstDeclarations(content);
+    expect(result.get("baseArgs")).toEqual({ variant: "primary" });
+  });
+
+  it("extracts multiple const declarations", () => {
+    const content = `
+      const small = { size: 'small' };
+      const large = { size: 'large' };
+    `;
+    const result = extractConstDeclarations(content);
+    expect(result.get("small")).toEqual({ size: "small" });
+    expect(result.get("large")).toEqual({ size: "large" });
+  });
+
+  it("skips meta and default declarations", () => {
+    const content = `
+      const meta = { title: 'Button' };
+      const default = { component: Button };
+      const args = { label: 'Click' };
+    `;
+    const result = extractConstDeclarations(content);
+    expect(result.has("meta")).toBe(false);
+    expect(result.has("default")).toBe(false);
+    expect(result.get("args")).toEqual({ label: "Click" });
+  });
+
+  it("handles nested objects in const declarations", () => {
+    const content = `
+      const complexArgs = {
+        style: { color: 'red' },
+        data: { items: ['a', 'b'] }
+      };
+    `;
+    const result = extractConstDeclarations(content);
+    const complexArgs = result.get("complexArgs");
+    expect(complexArgs).toBeDefined();
+    expect(complexArgs?.style).toEqual({ color: "red" });
+  });
+});

package/src/migrate/__tests__/meta/meta.test.ts

@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest";
+import { __testing } from "../../parser.js";
+
+const { parseMeta } = __testing;
+
+describe("parseMeta", () => {
+  describe("title extraction", () => {
+    it("extracts title from single-quoted string", () => {
+      const content = `export default { title: 'Components/Button' }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.title).toBe("Components/Button");
+    });
+
+    it("extracts title from double-quoted string", () => {
+      const content = `export default { title: "Components/Forms/Input" }`;
+      const result = parseMeta(content, "Input.stories.tsx", []);
+      expect(result.title).toBe("Components/Forms/Input");
+    });
+
+    it("extracts title from backtick string", () => {
+      const content = `export default { title: \`Components/Modal\` }`;
+      const result = parseMeta(content, "Modal.stories.tsx", []);
+      expect(result.title).toBe("Components/Modal");
+    });
+
+    it("prefers titles with slashes (Storybook paths)", () => {
+      const content = `
+        const translations = { title: 'No recent searches' };
+        export default { title: 'Components/Search' }
+      `;
+      const result = parseMeta(content, "Search.stories.tsx", []);
+      expect(result.title).toBe("Components/Search");
+    });
+
+    it("extracts deeply nested title paths", () => {
+      const content = `export default { title: 'Design System/Forms/Inputs/TextField' }`;
+      const result = parseMeta(content, "TextField.stories.tsx", []);
+      expect(result.title).toBe("Design System/Forms/Inputs/TextField");
+    });
+
+    it("generates fallback title from component name", () => {
+      const content = `export default { component: Button }`;
+      const warnings: string[] = [];
+      const result = parseMeta(content, "Button.stories.tsx", warnings);
+      expect(result.title).toBe("Components/Button");
+      expect(warnings).toContain("No title found, using default: Components/Button");
+    });
+  });
+
+  describe("component name extraction", () => {
+    it("extracts component name from title", () => {
+      const content = `export default { title: 'Components/Forms/Input' }`;
+      const result = parseMeta(content, "Input.stories.tsx", []);
+      expect(result.componentName).toBe("Input");
+    });
+
+    it("extracts component name from component field", () => {
+      const content = `export default { component: MyButton }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.componentName).toBe("MyButton");
+    });
+
+    it("prefers component name from title over component field", () => {
+      const content = `export default { title: 'Components/Button', component: ButtonComponent }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.componentName).toBe("Button");
+    });
+
+    it("falls back to file name when no title or component", () => {
+      const content = `export default {}`;
+      const result = parseMeta(content, "CustomButton.stories.tsx", []);
+      expect(result.componentName).toBe("CustomButton");
+    });
+
+    it("handles various story file extensions", () => {
+      const content = `export default {}`;
+
+      expect(parseMeta(content, "Button.stories.ts", []).componentName).toBe("Button");
+      expect(parseMeta(content, "Button.stories.tsx", []).componentName).toBe("Button");
+      expect(parseMeta(content, "Button.stories.jsx", []).componentName).toBe("Button");
+      expect(parseMeta(content, "Button.stories.js", []).componentName).toBe("Button");
+    });
+
+    it("returns Unknown and adds warning when cannot determine name", () => {
+      const content = `export default {}`;
+      const warnings: string[] = [];
+      const result = parseMeta(content, "some-random-file.ts", warnings);
+      expect(result.componentName).toBe("Unknown");
+      expect(warnings).toContain("Could not determine component name");
+    });
+  });
+
+  describe("component import extraction", () => {
+    it("extracts named import path", () => {
+      const content = `
+        import { Button } from './Button';
+        export default { component: Button }
+      `;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.componentImport).toBe("./Button");
+    });
+
+    it("extracts default import path", () => {
+      const content = `
+        import Modal from '../components/Modal';
+        export default { component: Modal }
+      `;
+      const result = parseMeta(content, "Modal.stories.tsx", []);
+      expect(result.componentImport).toBe("../components/Modal");
+    });
+
+    it("extracts named import from multi-import statement", () => {
+      const content = `
+        import { Button, Input, Checkbox } from '@ui/components';
+        export default { component: Input }
+      `;
+      const result = parseMeta(content, "Input.stories.tsx", []);
+      expect(result.componentImport).toBe("@ui/components");
+    });
+
+    it("handles import with alias", () => {
+      const content = `
+        import { Button as MyButton } from './buttons';
+        export default { component: MyButton }
+      `;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      // The regex matches MyButton within the import braces and extracts the import path
+      expect(result.componentImport).toBe("./buttons");
+    });
+  });
+
+  describe("tags extraction", () => {
+    it("extracts single tag", () => {
+      const content = `export default { title: 'Components/Button', tags: ['autodocs'] }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.tags).toEqual(["autodocs"]);
+    });
+
+    it("extracts multiple tags", () => {
+      const content = `export default { title: 'Components/Button', tags: ['autodocs', 'stable', 'beta'] }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.tags).toEqual(["autodocs", "stable", "beta"]);
+    });
+
+    it("handles tags with different quote styles", () => {
+      const content = `export default { tags: ["autodocs", 'stable'] }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.tags).toEqual(["autodocs", "stable"]);
+    });
+
+    it("returns undefined when no tags", () => {
+      const content = `export default { title: 'Components/Button' }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.tags).toBeUndefined();
+    });
+  });
+
+  describe("description extraction", () => {
+    it("extracts description from parameters.docs", () => {
+      const content = `
+        export default {
+          title: 'Components/Button',
+          parameters: {
+            docs: {
+              description: {
+                component: 'A reusable button component'
+              }
+            }
+          }
+        }
+      `;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.description).toBe("A reusable button component");
+    });
+
+    it("handles description with single quotes", () => {
+      const content = `
+        export default {
+          parameters: {
+            docs: {
+              description: {
+                component: 'Primary UI button'
+              }
+            }
+          }
+        }
+      `;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.description).toBe("Primary UI button");
+    });
+
+    it("returns undefined when no description", () => {
+      const content = `export default { title: 'Components/Button' }`;
+      const result = parseMeta(content, "Button.stories.tsx", []);
+      expect(result.description).toBeUndefined();
+    });
+  });
+});