@fragments-sdk/cli 0.2.2

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

@@ -0,0 +1,278 @@
+import { describe, it, expect } from "vitest";
+import { __testing } from "../../parser.js";
+
+const { parseStories, isCustomTemplate, extractArgsContent } = __testing;
+
+describe("parseStories", () => {
+  describe("CSF 3.0 format", () => {
+    it("parses simple CSF 3.0 story", () => {
+      const content = `
+        export const Primary = {
+          args: {
+            variant: 'primary',
+            label: 'Click me'
+          }
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Primary");
+      expect(result[0].args).toEqual({
+        variant: "primary",
+        label: "Click me",
+      });
+    });
+
+    it("parses multiple CSF 3.0 stories", () => {
+      const content = `
+        export const Primary = {
+          args: { variant: 'primary' }
+        };
+        export const Secondary = {
+          args: { variant: 'secondary' }
+        };
+        export const Disabled = {
+          args: { variant: 'primary', disabled: true }
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(3);
+      expect(result.map((s) => s.name)).toEqual(["Primary", "Secondary", "Disabled"]);
+    });
+
+    it("parses story with type annotation", () => {
+      const content = `
+        export const Primary: Story = {
+          args: {
+            size: 'large'
+          }
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].args.size).toBe("large");
+    });
+
+    it("skips default and meta exports", () => {
+      const content = `
+        export default { title: 'Button' };
+        export const meta = { title: 'Button' };
+        export const Primary = { args: { label: 'Click' } };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Primary");
+    });
+
+    it("detects custom render function", () => {
+      const content = `
+        export const WithRender = {
+          args: { label: 'Test' },
+          render: (args) => <div><Button {...args} /></div>
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].hasCustomRender).toBe(true);
+    });
+
+    it("handles story without args", () => {
+      const content = `
+        export const Default = {};
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].args).toEqual({});
+    });
+  });
+
+  describe("CSF 2.0 format", () => {
+    it("parses Template.bind({}) pattern", () => {
+      const content = `
+        const Template = (args) => <Button {...args} />;
+        export const Primary = Template.bind({});
+        Primary.args = {
+          variant: 'primary'
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Primary");
+      expect(result[0].args).toEqual({ variant: "primary" });
+    });
+
+    it("parses multiple CSF 2.0 stories", () => {
+      const content = `
+        const Template = (args) => <Button {...args} />;
+        export const Primary = Template.bind({});
+        Primary.args = { variant: 'primary' };
+        export const Secondary = Template.bind({});
+        Secondary.args = { variant: 'secondary' };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(2);
+      expect(result[0].args.variant).toBe("primary");
+      expect(result[1].args.variant).toBe("secondary");
+    });
+
+    it("handles CSF 2.0 story without args", () => {
+      const content = `
+        const Template = (args) => <Button {...args} />;
+        export const Default = Template.bind({});
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result).toHaveLength(1);
+      expect(result[0].args).toEqual({});
+    });
+  });
+
+  describe("spread resolution", () => {
+    it("resolves spread from const declarations", () => {
+      const content = `
+        const defaultArgs = { size: 'medium', disabled: false };
+        export const Primary = {
+          args: {
+            ...defaultArgs,
+            variant: 'primary'
+          }
+        };
+      `;
+      const constDeclarations = new Map([
+        ["defaultArgs", { size: "medium", disabled: false }],
+      ]);
+      const result = parseStories(content, "Button", [], constDeclarations);
+      expect(result[0].args.size).toBe("medium");
+      expect(result[0].args.disabled).toBe(false);
+      expect(result[0].args.variant).toBe("primary");
+    });
+
+    it("explicit args override spread values", () => {
+      const content = `
+        export const Primary = {
+          args: {
+            ...defaultArgs,
+            size: 'large'
+          }
+        };
+      `;
+      const constDeclarations = new Map([
+        ["defaultArgs", { size: "small", disabled: false }],
+      ]);
+      const result = parseStories(content, "Button", [], constDeclarations);
+      expect(result[0].args.size).toBe("large");
+    });
+  });
+
+  describe("story description", () => {
+    it("extracts description from CSF 3.0 parameters", () => {
+      const content = `
+        export const Primary = {
+          args: { label: 'Click' },
+          parameters: {
+            docs: {
+              description: {
+                story: 'The primary button style'
+              }
+            }
+          }
+        };
+      `;
+      const result = parseStories(content, "Button", [], new Map());
+      expect(result[0].description).toBe("The primary button style");
+    });
+  });
+});
+
+describe("isCustomTemplate", () => {
+  it("returns false for simple spread template", () => {
+    const content = `const Template = (args) => <Button {...args} />
+export const Primary = Template.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    expect(result).toBe(false);
+  });
+
+  it("returns false for parenthesized simple template", () => {
+    const content = `const Template = (args) => (<Button {...args} />)
+export const Primary = Template.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    expect(result).toBe(false);
+  });
+
+  it("detects hooks in single-line template body", () => {
+    // Hooks on same line as arrow are detected
+    const content = `const Template = (args) => { const [v] = useState(); return <C {...args} />; }
+export const Primary = Template.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    expect(result).toBe(true);
+  });
+
+  it("returns false for multiline block templates (regex limitation)", () => {
+    // Due to regex multiline flag, multiline block templates may not be fully captured
+    // This documents current behavior - the regex matches up to the first line end
+    const content = `const Template = (args) => {
+  const [value, setValue] = useState('');
+  return <Input {...args} />;
+}
+export const Primary = Template.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    // Current implementation returns false for multiline blocks
+    expect(result).toBe(false);
+  });
+
+  it("returns false when template not found", () => {
+    const content = `const Other = (args) => <Button {...args} />
+export const Primary = Other.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    expect(result).toBe(false);
+  });
+
+  it("detects custom logic in inline templates", () => {
+    // Templates with complex logic on a single line ARE detected
+    const content = `const Template = (args) => { useEffect(() => {}, []); return <C {...args} />; }
+export const Primary = Template.bind({});`;
+    const result = isCustomTemplate(content, "Template");
+    expect(result).toBe(true);
+  });
+});
+
+describe("extractArgsContent", () => {
+  it("extracts args content from assignment", () => {
+    const content = `
+      Primary.args = {
+        variant: 'primary',
+        label: 'Click me'
+      };
+    `;
+    const result = extractArgsContent(content, "Primary");
+    expect(result).toContain("variant");
+    expect(result).toContain("primary");
+  });
+
+  it("handles nested braces in args", () => {
+    const content = `
+      Primary.args = {
+        style: { color: 'red', padding: { top: 10 } },
+        label: 'Click'
+      };
+    `;
+    const result = extractArgsContent(content, "Primary");
+    expect(result).toContain("style");
+    expect(result).toContain("color");
+    expect(result).toContain("padding");
+  });
+
+  it("returns null when no args found", () => {
+    const content = `export const Primary = Template.bind({});`;
+    const result = extractArgsContent(content, "Primary");
+    expect(result).toBeNull();
+  });
+
+  it("handles different story names", () => {
+    const content = `
+      MyCustomStory.args = { foo: 'bar' };
+    `;
+    const result = extractArgsContent(content, "MyCustomStory");
+    expect(result).toContain("foo");
+    expect(result).toContain("bar");
+  });
+});

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

@@ -0,0 +1,371 @@
+import { describe, it, expect } from "vitest";
+import {
+  __testing,
+  storyNameToTitle,
+  extractCategory,
+  parseStoryContent,
+} from "../../parser.js";
+
+const {
+  findMatchingBrace,
+  findMatchingBraceInContent,
+  splitAtTopLevelCommas,
+  calculateConfidence,
+} = __testing;
+
+describe("findMatchingBrace", () => {
+  describe("curly braces", () => {
+    it("finds matching closing brace for simple object", () => {
+      const content = "{ key: 'value' }";
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(15);
+    });
+
+    it("finds matching brace with nested objects", () => {
+      const content = "{ a: { b: 'c' } }";
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(16);
+    });
+
+    it("finds inner brace correctly", () => {
+      const content = "{ a: { b: 'c' } }";
+      const result = findMatchingBrace(content, 5, "{", "}");
+      expect(result).toBe(14);
+    });
+
+    it("returns -1 when no matching brace found", () => {
+      const content = "{ unclosed";
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(-1);
+    });
+  });
+
+  describe("square brackets", () => {
+    it("finds matching bracket for array", () => {
+      const content = "[1, 2, 3]";
+      const result = findMatchingBrace(content, 0, "[", "]");
+      expect(result).toBe(8);
+    });
+
+    it("finds matching bracket with nested arrays", () => {
+      const content = "[[1, 2], [3, 4]]";
+      const result = findMatchingBrace(content, 0, "[", "]");
+      expect(result).toBe(15);
+    });
+  });
+
+  describe("string handling", () => {
+    it("ignores braces inside single-quoted strings", () => {
+      const content = "{ text: 'hello { world }' }";
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(26);
+    });
+
+    it("ignores braces inside double-quoted strings", () => {
+      const content = '{ text: "hello { world }" }';
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(26);
+    });
+
+    it("ignores braces inside template literals", () => {
+      const content = "{ text: `hello { world }` }";
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(26);
+    });
+
+    it("handles escaped quotes in strings", () => {
+      const content = `{ text: 'it\\'s a { test }' }`;
+      const result = findMatchingBrace(content, 0, "{", "}");
+      expect(result).toBe(27);
+    });
+  });
+});
+
+describe("findMatchingBraceInContent", () => {
+  it("finds matching brace with same behavior as findMatchingBrace", () => {
+    const content = "{ a: { b: 'c' } }";
+    const result = findMatchingBraceInContent(content, 0, "{", "}");
+    expect(result).toBe(16);
+  });
+
+  it("handles complex content with multiple string types", () => {
+    const content = `{
+      single: 'quote',
+      double: "quote",
+      template: \`literal\`,
+      nested: { inner: true }
+    }`;
+    const result = findMatchingBraceInContent(content, 0, "{", "}");
+    expect(result).toBeGreaterThan(0);
+    expect(content[result]).toBe("}");
+  });
+});
+
+describe("splitAtTopLevelCommas", () => {
+  it("splits simple comma-separated values", () => {
+    const result = splitAtTopLevelCommas("a, b, c");
+    expect(result).toEqual(["a", " b", " c"]);
+  });
+
+  it("does not split commas inside nested braces", () => {
+    const result = splitAtTopLevelCommas("a: { x: 1, y: 2 }, b");
+    expect(result).toEqual(["a: { x: 1, y: 2 }", " b"]);
+  });
+
+  it("does not split commas inside arrays", () => {
+    const result = splitAtTopLevelCommas("arr: [1, 2, 3], other");
+    expect(result).toEqual(["arr: [1, 2, 3]", " other"]);
+  });
+
+  it("does not split commas inside parentheses", () => {
+    const result = splitAtTopLevelCommas("fn(a, b), result");
+    expect(result).toEqual(["fn(a, b)", " result"]);
+  });
+
+  it("does not split commas inside strings", () => {
+    const result = splitAtTopLevelCommas("text: 'hello, world', other");
+    expect(result).toEqual(["text: 'hello, world'", " other"]);
+  });
+
+  it("handles empty input", () => {
+    const result = splitAtTopLevelCommas("");
+    expect(result).toEqual([]);
+  });
+
+  it("handles single item without comma", () => {
+    const result = splitAtTopLevelCommas("single");
+    expect(result).toEqual(["single"]);
+  });
+
+  it("handles deeply nested structures", () => {
+    const result = splitAtTopLevelCommas("a: { b: { c: [1, 2] } }, d");
+    expect(result).toHaveLength(2);
+  });
+});
+
+describe("calculateConfidence", () => {
+  it("returns 1.0 for perfect parsing", () => {
+    const meta = { title: "Components/Button", componentName: "Button", componentImport: "./Button" };
+    const argTypes = { variant: { control: "select" } };
+    const stories = [{ name: "Primary", args: {} }];
+    const warnings: string[] = [];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBe(1.0);
+  });
+
+  it("penalizes for warnings", () => {
+    const meta = { title: "Components/Button", componentName: "Button" };
+    const argTypes = {};
+    const stories = [{ name: "Primary", args: {} }];
+    const warnings = ["Warning 1", "Warning 2"];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeLessThan(1.0);
+  });
+
+  it("penalizes for unknown component name", () => {
+    const meta = { title: "Components/Button", componentName: "Unknown" };
+    const argTypes = {};
+    const stories = [{ name: "Primary", args: {} }];
+    const warnings: string[] = [];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeLessThan(1.0);
+  });
+
+  it("penalizes for missing component import", () => {
+    const meta = { title: "Components/Button", componentName: "Button" };
+    const argTypes = { variant: {} };
+    const stories = [{ name: "Primary", args: {} }];
+    const warnings: string[] = [];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeLessThan(1.0);
+  });
+
+  it("penalizes for no stories", () => {
+    const meta = { title: "Components/Button", componentName: "Button", componentImport: "./Button" };
+    const argTypes = { variant: {} };
+    const stories: any[] = [];
+    const warnings: string[] = [];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeLessThan(1.0);
+  });
+
+  it("penalizes for custom render stories", () => {
+    const meta = { title: "Components/Button", componentName: "Button", componentImport: "./Button" };
+    const argTypes = { variant: {} };
+    const stories = [
+      { name: "Primary", args: {}, hasCustomRender: true },
+      { name: "Secondary", args: {} },
+    ];
+    const warnings: string[] = [];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeLessThan(1.0);
+  });
+
+  it("clamps result to [0, 1] range", () => {
+    const meta = { title: "", componentName: "Unknown" };
+    const argTypes = {};
+    const stories: any[] = [];
+    const warnings = ["w1", "w2", "w3", "w4", "w5", "w6", "w7", "w8", "w9", "w10"];
+
+    const result = calculateConfidence(meta, argTypes, stories, warnings);
+    expect(result).toBeGreaterThanOrEqual(0);
+    expect(result).toBeLessThanOrEqual(1);
+  });
+});
+
+describe("storyNameToTitle", () => {
+  it("converts PascalCase to Title Case", () => {
+    expect(storyNameToTitle("Primary")).toBe("Primary");
+    expect(storyNameToTitle("PrimaryButton")).toBe("Primary Button");
+    expect(storyNameToTitle("DisabledState")).toBe("Disabled State");
+  });
+
+  it("handles multiple consecutive capitals", () => {
+    expect(storyNameToTitle("HTMLElement")).toBe("H T M L Element");
+    expect(storyNameToTitle("URLParser")).toBe("U R L Parser");
+  });
+
+  it("handles single word", () => {
+    expect(storyNameToTitle("Default")).toBe("Default");
+  });
+
+  it("handles already spaced input", () => {
+    expect(storyNameToTitle("Primary Button")).toBe("Primary Button");
+  });
+});
+
+describe("extractCategory", () => {
+  it("extracts category from two-segment path", () => {
+    expect(extractCategory("Components/Button")).toBe("components");
+  });
+
+  it("extracts category from multi-segment path", () => {
+    expect(extractCategory("Design System/Forms/Input")).toBe("forms");
+  });
+
+  it("returns lowercase category", () => {
+    expect(extractCategory("Actions/Button")).toBe("actions");
+    expect(extractCategory("UI/Forms/Select")).toBe("forms");
+  });
+
+  it("returns 'components' for single segment", () => {
+    expect(extractCategory("Button")).toBe("components");
+  });
+
+  it("handles deeply nested paths", () => {
+    expect(extractCategory("A/B/C/D/E")).toBe("d");
+  });
+});
+
+describe("parseStoryContent (integration)", () => {
+  it("parses complete story file", () => {
+    const content = `
+      import { Button } from './Button';
+
+      export default {
+        title: 'Components/Button',
+        component: Button,
+        tags: ['autodocs'],
+        argTypes: {
+          variant: {
+            control: 'select',
+            options: ['primary', 'secondary']
+          }
+        }
+      };
+
+      export const Primary = {
+        args: {
+          variant: 'primary',
+          label: 'Click me'
+        }
+      };
+
+      export const Secondary = {
+        args: {
+          variant: 'secondary',
+          label: 'Click me'
+        }
+      };
+    `;
+
+    const result = parseStoryContent(content, "Button.stories.tsx");
+
+    expect(result.meta.title).toBe("Components/Button");
+    expect(result.meta.componentName).toBe("Button");
+    expect(result.meta.componentImport).toBe("./Button");
+    expect(result.meta.tags).toEqual(["autodocs"]);
+
+    expect(result.argTypes.variant).toBeDefined();
+    expect(result.argTypes.variant.control).toBe("select");
+    expect(result.argTypes.variant.options).toEqual(["primary", "secondary"]);
+
+    expect(result.stories).toHaveLength(2);
+    expect(result.stories[0].name).toBe("Primary");
+    expect(result.stories[0].args.variant).toBe("primary");
+    expect(result.stories[1].name).toBe("Secondary");
+
+    expect(result.confidence).toBeGreaterThan(0.5);
+  });
+
+  it("parses CSF 2.0 format file", () => {
+    const content = `
+      import { Input } from './Input';
+
+      export default {
+        title: 'Forms/Input',
+        component: Input
+      };
+
+      const Template = (args) => <Input {...args} />;
+
+      export const Default = Template.bind({});
+      Default.args = {
+        placeholder: 'Enter text'
+      };
+
+      export const Disabled = Template.bind({});
+      Disabled.args = {
+        placeholder: 'Disabled input',
+        disabled: true
+      };
+    `;
+
+    const result = parseStoryContent(content, "Input.stories.tsx");
+
+    expect(result.meta.title).toBe("Forms/Input");
+    expect(result.stories).toHaveLength(2);
+    expect(result.stories[0].args.placeholder).toBe("Enter text");
+    expect(result.stories[1].args.disabled).toBe(true);
+  });
+
+  it("handles file with spread args", () => {
+    const content = `
+      const defaultArgs = {
+        size: 'medium',
+        disabled: false
+      };
+
+      export default { title: 'Components/Button' };
+
+      export const Primary = {
+        args: {
+          ...defaultArgs,
+          variant: 'primary'
+        }
+      };
+    `;
+
+    const result = parseStoryContent(content, "Button.stories.tsx");
+
+    expect(result.stories[0].args.size).toBe("medium");
+    expect(result.stories[0].args.disabled).toBe(false);
+    expect(result.stories[0].args.variant).toBe("primary");
+  });
+});