@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.0

package/src/components/toggle-switch/transforms/onClickToOnChange.test.ts

@@ -0,0 +1,210 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./onClickToOnChange"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, verbose = false): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    { verbose }
+  ) as string | null
+  return result || source
+}
+
+describe("onClickToOnChange transform", () => {
+  describe("onClick to onChange conversion", () => {
+    it("should rename onClick to onChange", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => setChecked(!checked)} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => setChecked(!checked)}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should rename onClick with named function reference", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleChange}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should handle multiple ToggleSwitch components", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ToggleSwitch checked={true} onClick={handleA} label="First" />
+      <ToggleSwitch checked={false} onClick={handleB} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleA}")
+      expect(result).toContain("onChange={handleB}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <ToggleSwitch
+      checked={true}
+      label="Toggle"
+      disabled
+      onClick={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('label="Toggle"')
+      expect(result).toContain("checked={true}")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should add CHANGED comment when verbose is enabled", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => {}} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input, true)
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).not.toContain("onClick=")
+      expect(result).toContain(
+        "CHANGED: tapestry-migration (onChange): renamed from onClick"
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect ToggleSwitch without onClick", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components with onClick", () => {
+      const input = `
+import { Button, ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button onClick={() => {}}>Click me</Button>
+      <ToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button onClick={() => {}}>Click me</Button>")
+      expect(result).toContain("onChange={handleChange}")
+    })
+
+    it("should rename onClick and add TODO comment when handler takes an argument", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={(e) => handle(e)} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={(e) => handle(e)}")
+      expect(result).not.toContain("onClick=")
+      expect(result).toContain("TODO")
+      expect(result).toContain("ChangeEvent<HTMLInputElement>")
+    })
+
+    it("should not add TODO when handler takes no arguments", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <ToggleSwitch checked={true} onClick={() => toggle()} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={() => toggle()}")
+      expect(result).not.toContain("onClick=")
+      expect(result).not.toContain("TODO")
+    })
+
+    it("should handle aliased ToggleSwitch import", () => {
+      const input = `
+import { ToggleSwitch as TapestryToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TapestryToggleSwitch checked={true} onClick={handleChange} label="Toggle" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onChange={handleChange}")
+      expect(result).not.toContain("onClick=")
+    })
+
+    it("should leave onClick and add TODO when both onClick and onChange are present", () => {
+      const input = `
+import { ToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <ToggleSwitch
+      checked={true}
+      onClick={() => handleClick()}
+      onChange={(e) => handleChange(e)}
+      label="Toggle"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("onClick={() => handleClick()}")
+      expect(result).toContain("onChange={(e) => handleChange(e)}")
+      expect(result).toContain("TODO")
+    })
+  })
+})

package/src/components/toggle-switch/transforms/onClickToOnChange.ts

@@ -0,0 +1,71 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { findAttribute } from "../../shared/findAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("onClick"),
+  targetComponent: "ToggleSwitch",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    const attributes = element.openingElement.attributes || []
+
+    // When both onClick and onChange are present, don't rename (would clobber
+    // the existing onChange). Instead, leave onClick in place with a TODO so a
+    // developer can resolve the conflict manually.
+    if (hasAttribute("onChange")(element)) {
+      const onClickAttr = findAttribute(attributes, "onClick")
+      if (onClickAttr) {
+        addCommentToAttribute({
+          attribute: onClickAttr,
+          commentKind: "todo",
+          j,
+          text: "ToggleSwitch uses onChange, not onClick. Both are present — remove onClick and verify the onChange handler is correct (event: ChangeEvent<HTMLInputElement>, read new state via e.target.checked)",
+        })
+        return true
+      }
+      return false
+    }
+
+    // Rename onClick → onChange. transformAttributeName also adds the CHANGED
+    // comment when options.verbose is enabled.
+    const renamed = transformAttributeName("onClick", "onChange", {
+      element,
+      j,
+      options,
+    })
+
+    if (renamed) {
+      // If the handler references an argument, its event type has changed from
+      // MouseEvent (button) to ChangeEvent<HTMLInputElement> (checkbox). Flag
+      // it so the developer can verify the handler logic.
+      const onChangeAttr = findAttribute(attributes, "onChange")
+      if (onChangeAttr) {
+        const value = onChangeAttr.value
+        if (value?.type === "JSXExpressionContainer") {
+          const expr = value.expression
+          if (
+            (expr.type === "ArrowFunctionExpression" ||
+              expr.type === "FunctionExpression") &&
+            expr.params.length > 0
+          ) {
+            addCommentToAttribute({
+              attribute: onChangeAttr,
+              commentKind: "todo",
+              j,
+              text: "renamed from onClick: the event type has changed from MouseEvent to ChangeEvent<HTMLInputElement> — verify the handler uses e.target.checked if needed",
+            })
+          }
+        }
+      }
+      return true
+    }
+
+    return false
+  },
+})
+
+export default transform

package/src/index.test.ts

@@ -0,0 +1,79 @@
+/**
+ * E2E regression test for `list --json`.
+ *
+ * Spawns the CLI exactly as consumers do — `npx tsx src/index.ts list --json` —
+ * and asserts the full stdout/stderr/exit-code contract.
+ */
+
+import { spawnSync } from "node:child_process"
+import { fileURLToPath } from "node:url"
+
+import { describe, expect, it } from "vitest"
+
+import { buildMigrationList } from "./migrationList"
+
+const CLI_PATH = fileURLToPath(new URL("./index.ts", import.meta.url))
+
+function runCli(args: string[]) {
+  return spawnSync("npx", ["tsx", CLI_PATH, ...args], {
+    encoding: "utf8",
+    // tsx cold-start can take a few seconds; allow up to 30 s.
+    timeout: 30_000,
+  })
+}
+
+describe("list --json (stdout/exit-code contract)", () => {
+  it("exits with code 0", () => {
+    const result = runCli(["list", "--json"])
+    expect(result.status).toBe(0)
+  })
+
+  it("emits valid JSON as the entire stdout (no stray lines)", () => {
+    const result = runCli(["list", "--json"])
+    // JSON.parse throws if there is ANY non-JSON content on stdout.
+    expect(() => JSON.parse(result.stdout)).not.toThrow()
+  })
+
+  it("payload matches buildMigrationList() (schemaVersion + migrations)", () => {
+    const result = runCli(["list", "--json"])
+    const payload = JSON.parse(result.stdout)
+    expect(payload).toEqual(buildMigrationList())
+  })
+
+  it("schemaVersion is exactly the integer 1", () => {
+    const result = runCli(["list", "--json"])
+    const { schemaVersion } = JSON.parse(result.stdout)
+    expect(schemaVersion).toBe(1)
+    expect(Number.isInteger(schemaVersion)).toBe(true)
+  })
+
+  it("stderr is empty on success", () => {
+    const result = runCli(["list", "--json"])
+    expect(result.stderr).toBe("")
+  })
+
+  it("does not require --path and makes no filesystem writes", () => {
+    // If --path were required, commander would write an error to stderr and exit 1.
+    // We assert the happy path — exit 0 with no --path — proving the flag is absent.
+    const result = runCli(["list", "--json"])
+    expect(result.status).toBe(0)
+  })
+})
+
+describe("list (human-readable, non-contractual)", () => {
+  it("exits with code 0 and writes component ids to stdout", () => {
+    const result = runCli(["list"])
+    expect(result.status).toBe(0)
+    expect(result.stdout).toContain("button")
+    expect(result.stdout).toContain("toggle-switch")
+  })
+})
+
+describe("diagnostics contract (nonzero exit → stderr)", () => {
+  it("exits nonzero and writes to stderr for an unknown subcommand", () => {
+    const result = runCli(["unknown-subcommand"])
+    // Commander writes "error: unknown command 'unknown-subcommand'" to stderr.
+    expect(result.status).not.toBe(0)
+    expect(result.stderr.length).toBeGreaterThan(0)
+  })
+})

package/src/index.ts

@@ -4,6 +4,8 @@ import { Command } from "commander"
 
 import { AVAILABLE_CLI_COMPONENTS } from "./availableComponents"
 import { runTransforms } from "./jscodeshiftRunner"
+import { buildMigrationList } from "./migrationList"
+import { formatComponentLabel } from "./utils/componentLabel"
 import { normalizeComponentName } from "./utils/componentNameNormalizer"
 
 const program = new Command()
@@ -92,6 +94,33 @@ program
     runTransforms("preflight", options)
   })
 
+program
+  .command("list")
+  .description(
+    "List available migrations. Pass --json for a stable, versioned machine-readable contract."
+  )
+  .option(
+    "--json",
+    "Output migrations as JSON to stdout (diagnostics go to stderr; exits nonzero on failure)"
+  )
+  .action((options) => {
+    try {
+      if (options.json) {
+        // JSON ONLY on stdout — no emoji, no progress lines, no trailing text.
+        process.stdout.write(
+          JSON.stringify(buildMigrationList(), null, 2) + "\n"
+        )
+      } else {
+        for (const id of AVAILABLE_CLI_COMPONENTS) {
+          console.log(`${id} — ${formatComponentLabel(id)}`)
+        }
+      }
+    } catch (error) {
+      console.error(`❌ Failed to list migrations: ${(error as Error).message}`)
+      process.exit(1)
+    }
+  })
+
 program
   .command("help")
   .description("Show help information")

package/src/migrationList.ts

@@ -0,0 +1,22 @@
+import { AVAILABLE_CLI_COMPONENTS } from "./availableComponents"
+import { formatComponentLabel } from "./utils/componentLabel"
+
+export const LIST_SCHEMA_VERSION = 1
+
+/**
+ * Builds the versioned migration list payload used by `list --json`.
+ * Pure — no I/O, no side effects.
+ *
+ * @example
+ * buildMigrationList()
+ * // { schemaVersion: 1, migrations: [{ id: "button", label: "Button" }, ...] }
+ */
+export function buildMigrationList() {
+  return {
+    migrations: [...AVAILABLE_CLI_COMPONENTS].map((id) => ({
+      id,
+      label: formatComponentLabel(id),
+    })),
+    schemaVersion: LIST_SCHEMA_VERSION,
+  }
+}

package/src/utils/componentLabel.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest"
+
+import { AVAILABLE_CLI_COMPONENTS } from "../availableComponents"
+import { buildMigrationList } from "../migrationList"
+import { formatComponentLabel } from "./componentLabel"
+import { normalizeComponentName } from "./componentNameNormalizer"
+
+describe("formatComponentLabel", () => {
+  it("should title-case a single-word id", () => {
+    expect(formatComponentLabel("button")).toBe("Button")
+    expect(formatComponentLabel("input")).toBe("Input")
+    expect(formatComponentLabel("radio")).toBe("Radio")
+  })
+
+  it("should produce Spaced Title Case for multi-word ids", () => {
+    expect(formatComponentLabel("date-picker")).toBe("Date Picker")
+    expect(formatComponentLabel("text-area")).toBe("Text Area")
+    expect(formatComponentLabel("time-field")).toBe("Time Field")
+    expect(formatComponentLabel("toggle-switch")).toBe("Toggle Switch")
+  })
+})
+
+describe("buildMigrationList", () => {
+  it("should return schemaVersion 1 as an integer", () => {
+    const result = buildMigrationList()
+    expect(result.schemaVersion).toBe(1)
+    expect(Number.isInteger(result.schemaVersion)).toBe(true)
+  })
+
+  it("should return a nonempty migrations array", () => {
+    const { migrations } = buildMigrationList()
+    expect(migrations.length).toBeGreaterThan(0)
+  })
+
+  it("should give every migration a nonempty string id and label", () => {
+    for (const { id, label } of buildMigrationList().migrations) {
+      expect(typeof id).toBe("string")
+      expect(id.length).toBeGreaterThan(0)
+      expect(typeof label).toBe("string")
+      expect(label.length).toBeGreaterThan(0)
+    }
+  })
+
+  it("should have unique ids", () => {
+    const ids = buildMigrationList().migrations.map((m) => m.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it("should emit ids that are exactly accepted by `run` (present in AVAILABLE_CLI_COMPONENTS)", () => {
+    for (const { id } of buildMigrationList().migrations) {
+      expect(AVAILABLE_CLI_COMPONENTS.has(id)).toBe(true)
+      // Also verify the normalizer round-trips it — proving run would accept it
+      expect(normalizeComponentName(id, AVAILABLE_CLI_COMPONENTS)).toBe(id)
+    }
+  })
+
+  it("should include every id in AVAILABLE_CLI_COMPONENTS with no extras", () => {
+    const emittedIds = buildMigrationList().migrations.map((m) => m.id)
+    expect(emittedIds).toEqual([...AVAILABLE_CLI_COMPONENTS])
+  })
+})

package/src/utils/componentLabel.ts

@@ -0,0 +1,15 @@
+/**
+ * Derives a human-readable display label from a kebab-case component id.
+ * Splits on hyphens and title-cases each word.
+ *
+ * @example
+ * formatComponentLabel("button")        // "Button"
+ * formatComponentLabel("date-picker")   // "Date Picker"
+ * formatComponentLabel("toggle-switch") // "Toggle Switch"
+ */
+export function formatComponentLabel(id: string): string {
+  return id
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+}