@fragments-sdk/cli 0.2.2

package/src/mcp/utils.ts

@@ -0,0 +1,54 @@
+/**
+ * Utility functions for the MCP server
+ */
+
+/**
+ * Extract specific fields from an object using dot notation paths.
+ * E.g., projectFields(obj, ['meta.name', 'usage.when']) returns { meta: { name: ... }, usage: { when: ... } }
+ *
+ * @param obj - The source object to extract fields from
+ * @param fields - Array of field paths (supports dot notation for nested fields)
+ * @returns A new object containing only the requested fields
+ */
+export function projectFields<T extends Record<string, unknown>>(
+  obj: T,
+  fields: string[]
+): Partial<T> {
+  if (!fields || fields.length === 0) {
+    return obj;
+  }
+
+  const result: Record<string, unknown> = {};
+
+  for (const field of fields) {
+    const parts = field.split('.');
+    let source: unknown = obj;
+    let target = result;
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLast = i === parts.length - 1;
+
+      if (source === null || source === undefined || typeof source !== 'object') {
+        break;
+      }
+
+      const sourceObj = source as Record<string, unknown>;
+      const value = sourceObj[part];
+
+      if (isLast) {
+        // Set the final value
+        target[part] = value;
+      } else {
+        // Create nested object if needed
+        if (!(part in target)) {
+          target[part] = {};
+        }
+        target = target[part] as Record<string, unknown>;
+        source = value;
+      }
+    }
+  }
+
+  return result as Partial<T>;
+}

package/src/mcp-bin.ts

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { startMcpServer } from './mcp/server.js';
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+let projectRoot = process.cwd();
+let viewerUrl: string | undefined;
+
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+
+  if (arg === '--project-root' || arg === '-p') {
+    projectRoot = args[++i] ?? projectRoot;
+  } else if (arg === '--viewer-url' || arg === '-u') {
+    viewerUrl = args[++i];
+  } else if (arg === '--help' || arg === '-h') {
+    console.log(`
+Usage: fragments-mcp [options]
+
+Options:
+  -p, --project-root <path>  Project root directory (default: cwd)
+  -u, --viewer-url <url>     Viewer URL (default: http://localhost:6006)
+  -h, --help                 Show this help message
+`);
+    process.exit(0);
+  }
+}
+
+// Start server
+startMcpServer({
+  projectRoot,
+  viewerUrl,
+}).catch((error) => {
+  console.error('Failed to start MCP server:', error);
+  process.exit(1);
+});

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

@@ -0,0 +1,189 @@
+import { describe, it, expect } from "vitest";
+import { __testing } from "../../parser.js";
+
+const { parseArgTypes, parseArgTypeContent } = __testing;
+
+describe("parseArgTypes", () => {
+  describe("basic parsing", () => {
+    it("parses single argType", () => {
+      const content = `
+        export default {
+          argTypes: {
+            variant: {
+              control: 'select',
+              options: ['primary', 'secondary']
+            }
+          }
+        }
+      `;
+      const result = parseArgTypes(content, []);
+      expect(result).toHaveProperty("variant");
+      expect(result.variant.control).toBe("select");
+      expect(result.variant.options).toEqual(["primary", "secondary"]);
+    });
+
+    it("parses multiple argTypes", () => {
+      const content = `
+        export default {
+          argTypes: {
+            size: {
+              control: 'select',
+              options: ['small', 'medium', 'large']
+            },
+            disabled: {
+              control: 'boolean'
+            },
+            label: {
+              control: 'text'
+            }
+          }
+        }
+      `;
+      const result = parseArgTypes(content, []);
+      expect(Object.keys(result)).toHaveLength(3);
+      expect(result.size.control).toBe("select");
+      expect(result.disabled.control).toBe("boolean");
+      expect(result.label.control).toBe("text");
+    });
+
+    it("returns empty object when no argTypes", () => {
+      const content = `export default { title: 'Components/Button' }`;
+      const result = parseArgTypes(content, []);
+      expect(result).toEqual({});
+    });
+  });
+
+  describe("nested argTypes", () => {
+    it("handles deeply nested structures", () => {
+      const content = `
+        export default {
+          argTypes: {
+            onClick: {
+              action: 'clicked',
+              table: {
+                category: 'Events'
+              }
+            }
+          }
+        }
+      `;
+      const result = parseArgTypes(content, []);
+      expect(result).toHaveProperty("onClick");
+    });
+
+    it("handles argTypes with type information", () => {
+      const content = `
+        export default {
+          argTypes: {
+            children: {
+              control: 'text',
+              type: {
+                name: 'string',
+                required: true
+              }
+            }
+          }
+        }
+      `;
+      const result = parseArgTypes(content, []);
+      expect(result.children.control).toBe("text");
+    });
+  });
+});
+
+describe("parseArgTypeContent", () => {
+  describe("control extraction", () => {
+    it("extracts simple string control", () => {
+      const content = `control: 'select'`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.control).toBe("select");
+    });
+
+    it("extracts control from object format", () => {
+      const content = `control: { type: 'range', min: 0, max: 100 }`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.control).toBe("range");
+    });
+
+    it("handles different quote styles for control", () => {
+      expect(parseArgTypeContent(`control: "boolean"`, []).control).toBe("boolean");
+      expect(parseArgTypeContent(`control: 'text'`, []).control).toBe("text");
+    });
+  });
+
+  describe("options extraction", () => {
+    it("extracts array of string options", () => {
+      const content = `options: ['small', 'medium', 'large']`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.options).toEqual(["small", "medium", "large"]);
+    });
+
+    it("handles options with different quotes", () => {
+      const content = `options: ["primary", 'secondary', "tertiary"]`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.options).toEqual(["primary", "secondary", "tertiary"]);
+    });
+
+    it("handles numeric options", () => {
+      const content = `options: [1, 2, 3, 4]`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.options).toEqual(["1", "2", "3", "4"]);
+    });
+  });
+
+  describe("description extraction", () => {
+    it("extracts description string", () => {
+      const content = `description: 'The button variant to use'`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.description).toBe("The button variant to use");
+    });
+
+    it("handles double-quoted description", () => {
+      const content = `description: "Controls the button size"`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.description).toBe("Controls the button size");
+    });
+  });
+
+  describe("defaultValue extraction", () => {
+    it("extracts defaultValue from summary format", () => {
+      const content = `defaultValue: { summary: 'primary' }`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.defaultValue).toBe("primary");
+    });
+
+    it("extracts simple defaultValue", () => {
+      const content = `defaultValue: 'secondary'`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.defaultValue).toBe("secondary");
+    });
+
+    it("extracts boolean defaultValue", () => {
+      const content = `defaultValue: false`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.defaultValue).toBe("false");
+    });
+
+    it("extracts numeric defaultValue", () => {
+      const content = `defaultValue: 42`;
+      const result = parseArgTypeContent(content, []);
+      expect(result.defaultValue).toBe("42");
+    });
+  });
+
+  describe("complex argType content", () => {
+    it("parses full argType definition", () => {
+      const content = `
+        control: 'select',
+        options: ['primary', 'secondary', 'ghost'],
+        description: 'The visual style of the button',
+        defaultValue: { summary: 'primary' }
+      `;
+      const result = parseArgTypeContent(content, []);
+      expect(result.control).toBe("select");
+      expect(result.options).toEqual(["primary", "secondary", "ghost"]);
+      expect(result.description).toBe("The visual style of the button");
+      expect(result.defaultValue).toBe("primary");
+    });
+  });
+});