@fragments-sdk/cli 0.2.2

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

@@ -0,0 +1,303 @@
+import { describe, it, expect } from "vitest";
+import { __testing } from "../../parser.js";
+
+const { parseArgValue, resolveEscapeSequences, tryParseStringConcatenation } = __testing;
+
+describe("parseArgValue", () => {
+  describe("string values", () => {
+    it("parses single-quoted strings", () => {
+      expect(parseArgValue("'hello'")).toBe("hello");
+    });
+
+    it("parses double-quoted strings", () => {
+      expect(parseArgValue('"world"')).toBe("world");
+    });
+
+    it("parses template literals", () => {
+      expect(parseArgValue("`template`")).toBe("template");
+    });
+
+    it("handles empty strings", () => {
+      expect(parseArgValue("''")).toBe("");
+      expect(parseArgValue('""')).toBe("");
+    });
+
+    it("handles strings with spaces", () => {
+      expect(parseArgValue("'hello world'")).toBe("hello world");
+    });
+
+    it("handles strings with escape sequences", () => {
+      expect(parseArgValue("'hello\\nworld'")).toBe("hello\nworld");
+      expect(parseArgValue("'tab\\there'")).toBe("tab\there");
+    });
+  });
+
+  describe("numeric values", () => {
+    it("parses integers", () => {
+      expect(parseArgValue("42")).toBe(42);
+      expect(parseArgValue("0")).toBe(0);
+      expect(parseArgValue("-10")).toBe(-10);
+    });
+
+    it("parses floats", () => {
+      expect(parseArgValue("3.14")).toBe(3.14);
+      expect(parseArgValue("-0.5")).toBe(-0.5);
+      expect(parseArgValue("100.0")).toBe(100.0);
+    });
+  });
+
+  describe("boolean values", () => {
+    it("parses true", () => {
+      expect(parseArgValue("true")).toBe(true);
+    });
+
+    it("parses false", () => {
+      expect(parseArgValue("false")).toBe(false);
+    });
+  });
+
+  describe("null and undefined", () => {
+    it("parses null", () => {
+      expect(parseArgValue("null")).toBeNull();
+    });
+
+    it("parses undefined", () => {
+      expect(parseArgValue("undefined")).toBeUndefined();
+    });
+  });
+
+  describe("nested objects", () => {
+    it("parses simple object", () => {
+      expect(parseArgValue("{ key: 'value' }")).toEqual({ key: "value" });
+    });
+
+    it("parses nested object", () => {
+      expect(parseArgValue("{ a: { b: 'c' } }")).toEqual({ a: { b: "c" } });
+    });
+
+    it("parses empty object", () => {
+      expect(parseArgValue("{}")).toEqual({});
+    });
+
+    it("parses object with multiple properties", () => {
+      expect(parseArgValue("{ name: 'test', count: 5 }")).toEqual({
+        name: "test",
+        count: 5,
+      });
+    });
+  });
+
+  describe("arrays", () => {
+    it("parses string array", () => {
+      expect(parseArgValue("['a', 'b', 'c']")).toEqual(["a", "b", "c"]);
+    });
+
+    it("parses numeric array", () => {
+      expect(parseArgValue("[1, 2, 3]")).toEqual([1, 2, 3]);
+    });
+
+    it("parses empty array", () => {
+      expect(parseArgValue("[]")).toEqual([]);
+    });
+
+    it("parses mixed array", () => {
+      expect(parseArgValue("['text', 42, true]")).toEqual(["text", 42, true]);
+    });
+
+    it("parses array of objects", () => {
+      expect(parseArgValue("[{ id: 1 }, { id: 2 }]")).toEqual([
+        { id: 1 },
+        { id: 2 },
+      ]);
+    });
+  });
+
+  describe("JSX values", () => {
+    it("marks self-closing JSX as special", () => {
+      expect(parseArgValue("<Icon />")).toBe("__JSX__");
+    });
+
+    it("marks JSX with content as special", () => {
+      expect(parseArgValue("<span>text</span>")).toBe("__JSX__");
+    });
+
+    it("marks JSX with props as special", () => {
+      expect(parseArgValue("<Button variant='primary' />")).toBe("__JSX__");
+    });
+  });
+
+  describe("function expressions", () => {
+    it("marks arrow functions as expressions", () => {
+      expect(parseArgValue("() => {}")).toBe("__EXPR__");
+    });
+
+    it("marks arrow functions with body as expressions", () => {
+      expect(parseArgValue("(e) => console.log(e)")).toBe("__EXPR__");
+    });
+
+    it("marks function calls as expressions", () => {
+      expect(parseArgValue("getValue()")).toBe("__EXPR__");
+    });
+
+    it("marks function calls with args as expressions", () => {
+      expect(parseArgValue("format(date, 'YYYY')")).toBe("__EXPR__");
+    });
+  });
+
+  describe("variable references", () => {
+    it("marks simple identifiers as references", () => {
+      expect(parseArgValue("myVariable")).toBe("__REF__myVariable");
+    });
+
+    it("marks property access as references", () => {
+      expect(parseArgValue("obj.prop")).toBe("__REF__obj.prop");
+    });
+
+    it("marks deep property access as references", () => {
+      expect(parseArgValue("a.b.c.d")).toBe("__REF__a.b.c.d");
+    });
+
+    it("marks optional chaining as references", () => {
+      expect(parseArgValue("obj?.prop")).toBe("__REF__obj?.prop");
+    });
+
+    it("marks array index access as references", () => {
+      expect(parseArgValue("arr[0]")).toBe("__REF__arr[0]");
+    });
+
+    it("marks complex array access as references", () => {
+      expect(parseArgValue("items[0].name")).toBe("__REF__items[0].name");
+    });
+
+    it("marks non-null assertion as reference", () => {
+      expect(parseArgValue("value!")).toBe("__REF__value!");
+    });
+  });
+
+  describe("TypeScript as const", () => {
+    it("handles 'as const' assertion with single quotes", () => {
+      expect(parseArgValue("'left' as const")).toBe("left");
+    });
+
+    it("handles 'as const' assertion with double quotes", () => {
+      expect(parseArgValue('"right" as const')).toBe("right");
+    });
+  });
+
+  describe("TypeScript type assertions", () => {
+    it("marks type assertions as expressions", () => {
+      expect(parseArgValue("value as SomeType")).toBe("__EXPR__");
+    });
+
+    it("marks complex type assertions as expressions", () => {
+      expect(parseArgValue("obj as Type<T>")).toBe("__EXPR__");
+    });
+  });
+
+  describe("string concatenation", () => {
+    it("resolves simple string concatenation", () => {
+      expect(parseArgValue("'hello' + ' world'")).toBe("hello world");
+    });
+
+    it("resolves multi-part concatenation", () => {
+      expect(parseArgValue("'a' + 'b' + 'c'")).toBe("abc");
+    });
+
+    it("resolves mixed quote concatenation", () => {
+      expect(parseArgValue(`"hello" + ' ' + "world"`)).toBe("hello world");
+    });
+  });
+
+  describe("trailing comma handling", () => {
+    it("removes trailing comma from values", () => {
+      expect(parseArgValue("'test',")).toBe("test");
+      expect(parseArgValue("42,")).toBe(42);
+    });
+  });
+
+  describe("whitespace handling", () => {
+    it("trims whitespace from values", () => {
+      expect(parseArgValue("  'test'  ")).toBe("test");
+      expect(parseArgValue("  42  ")).toBe(42);
+    });
+  });
+});
+
+describe("resolveEscapeSequences", () => {
+  it("resolves newline escape", () => {
+    expect(resolveEscapeSequences("hello\\nworld")).toBe("hello\nworld");
+  });
+
+  it("resolves tab escape", () => {
+    expect(resolveEscapeSequences("col1\\tcol2")).toBe("col1\tcol2");
+  });
+
+  it("resolves carriage return escape", () => {
+    expect(resolveEscapeSequences("line1\\rline2")).toBe("line1\rline2");
+  });
+
+  it("resolves backslash escape", () => {
+    expect(resolveEscapeSequences("path\\\\to\\\\file")).toBe("path\\to\\file");
+  });
+
+  it("resolves quote escapes", () => {
+    expect(resolveEscapeSequences('say \\"hello\\"')).toBe('say "hello"');
+    expect(resolveEscapeSequences("it\\'s")).toBe("it's");
+    expect(resolveEscapeSequences("template\\`string")).toBe("template`string");
+  });
+
+  it("handles multiple escapes in sequence", () => {
+    expect(resolveEscapeSequences("line1\\nline2\\n\\tindented")).toBe(
+      "line1\nline2\n\tindented"
+    );
+  });
+
+  it("preserves unrecognized escape sequences", () => {
+    expect(resolveEscapeSequences("hello\\xworld")).toBe("hello\\xworld");
+  });
+
+  it("handles strings without escapes", () => {
+    expect(resolveEscapeSequences("no escapes here")).toBe("no escapes here");
+  });
+});
+
+describe("tryParseStringConcatenation", () => {
+  it("returns null for non-concatenation strings", () => {
+    expect(tryParseStringConcatenation("'simple'")).toBeNull();
+    expect(tryParseStringConcatenation("42")).toBeNull();
+  });
+
+  it("parses two-part concatenation", () => {
+    expect(tryParseStringConcatenation("'hello' + ' world'")).toBe("hello world");
+  });
+
+  it("parses multi-part concatenation", () => {
+    expect(tryParseStringConcatenation("'a' + 'b' + 'c' + 'd'")).toBe("abcd");
+  });
+
+  it("handles different quote styles", () => {
+    expect(tryParseStringConcatenation(`'single' + "double"`)).toBe("singledouble");
+  });
+
+  it("returns null for mixed concatenation (string + variable)", () => {
+    expect(tryParseStringConcatenation("'hello' + name")).toBeNull();
+    expect(tryParseStringConcatenation("prefix + 'suffix'")).toBeNull();
+  });
+
+  it("handles whitespace around operators", () => {
+    expect(tryParseStringConcatenation("'a'  +  'b'")).toBe("ab");
+    expect(tryParseStringConcatenation("'a'+  'b'")).toBe("ab");
+  });
+
+  it("preserves spaces within strings", () => {
+    expect(tryParseStringConcatenation("'hello ' + 'world'")).toBe("hello world");
+  });
+
+  it("returns null for template literals with interpolation", () => {
+    expect(tryParseStringConcatenation("`hello ${name}` + 'suffix'")).toBeNull();
+  });
+
+  it("handles template literals without interpolation", () => {
+    expect(tryParseStringConcatenation("`hello` + ` world`")).toBe("hello world");
+  });
+});

package/src/migrate/bin.ts

@@ -0,0 +1,108 @@
+#!/usr/bin/env node
+/**
+ * CLI entry point for migration tool.
+ *
+ * Can be run standalone or integrated with the main segments CLI.
+ */
+
+import { Command } from "commander";
+import pc from "picocolors";
+import { BRAND } from "../core/index.js";
+import { migrate } from "./migrate.js";
+
+const program = new Command();
+
+program
+  .name("segments-migrate")
+  .description(`${BRAND.name} Storybook Migration Tool`)
+  .version("0.0.1");
+
+program
+  .command("migrate")
+  .description("Migrate Storybook stories to Segments")
+  .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 segment 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();