@planningcenter/tapestry-migration-cli 3.1.0-rc.9 → 3.1.0

package/src/components/select/transforms/moveSelectImport.test.ts

@@ -0,0 +1,148 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveSelectImport"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("moveSelectImport transform", () => {
+  it("should change import from tapestry-react to tapestry", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Test" placeholder="Pick" options={[]} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Select } from "@planningcenter/tapestry"'
+    )
+    expect(result).not.toContain("@planningcenter/tapestry-react")
+  })
+
+  it("should handle multiple imports", () => {
+    const input = `
+import { Button, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Select label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Button } from "@planningcenter/tapestry-react"'
+    )
+    expect(result).toContain(
+      'import { Select } from "@planningcenter/tapestry"'
+    )
+  })
+
+  it("should handle separate import declarations", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Select label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Button } from "@planningcenter/tapestry-react"'
+    )
+    expect(result).toContain(
+      'import { Select } from "@planningcenter/tapestry"'
+    )
+  })
+
+  it("should not affect other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Button } from "@planningcenter/tapestry-react"'
+    )
+  })
+
+  it("should handle already migrated imports", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry"
+
+function Test() {
+  return <Select label="Test" placeholder="Pick" options={[]} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Select } from "@planningcenter/tapestry"'
+    )
+  })
+
+  it("should handle no imports", () => {
+    const input = `
+function Test() {
+  return <div>No imports</div>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("should preserve other attributes", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      label="Test"
+      placeholder="Pick"
+      options={[]}
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(
+      'import { Select } from "@planningcenter/tapestry"'
+    )
+    expect(result).toContain('label="Test"')
+    expect(result).toContain("disabled")
+    expect(result).toContain("onChange={() => {}}")
+  })
+})

package/src/components/select/transforms/moveSelectImport.ts

@@ -0,0 +1,14 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = componentTransformFactory({
+  condition: transformableSelect,
+  fromComponent: "Select",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Select",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

package/src/components/select/transforms/removeDefaultProps.test.ts

@@ -0,0 +1,249 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDefaultProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("removeDefaultProps transform", () => {
+  describe("matchWidths removal", () => {
+    it("should remove matchWidths boolean shorthand", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+    })
+
+    it("should remove matchWidths={true}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths={true} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+    })
+
+    it('should remove matchWidths="minimum"', () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths="minimum" emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+    })
+
+    it('should remove matchWidths={"minimum"}', () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths={"minimum"} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+    })
+
+    it("should NOT remove matchWidths={false}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths={false} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("matchWidths={false}")
+    })
+
+    it("should NOT remove matchWidths with a variable value", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths={shouldMatch} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("matchWidths={shouldMatch}")
+    })
+  })
+
+  describe("defaultOpen={false} removal", () => {
+    it("should remove defaultOpen={false}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select defaultOpen={false} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("defaultOpen")
+    })
+
+    it("should NOT remove defaultOpen={true}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select defaultOpen={true} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("defaultOpen={true}")
+    })
+
+    it("should NOT remove defaultOpen boolean shorthand (means true)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select defaultOpen emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("defaultOpen")
+    })
+  })
+
+  describe("lockScrollWhileOpen removal", () => {
+    it("should remove lockScrollWhileOpen boolean shorthand", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select lockScrollWhileOpen emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("lockScrollWhileOpen")
+    })
+
+    it("should remove lockScrollWhileOpen={true}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select lockScrollWhileOpen={true} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("lockScrollWhileOpen")
+    })
+
+    it("should NOT remove lockScrollWhileOpen={false}", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select lockScrollWhileOpen={false} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("lockScrollWhileOpen={false}")
+    })
+  })
+
+  describe("multiple removals", () => {
+    it("should remove multiple default props at once", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      matchWidths
+      defaultOpen={false}
+      lockScrollWhileOpen
+      emptyValue="Pick"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+      expect(result).not.toContain("defaultOpen")
+      expect(result).not.toContain("lockScrollWhileOpen")
+      expect(result).toContain('emptyValue="Pick"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Select without removable props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" disabled />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform other components", () => {
+      const input = `
+import { Dropdown } from "other-library"
+
+function Test() {
+  return <Dropdown matchWidths />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select matchWidths emptyValue="Pick" disabled onChange={handler} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("matchWidths")
+      expect(result).toContain('emptyValue="Pick"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={handler}")
+    })
+  })
+})

package/src/components/select/transforms/removeDefaultProps.ts

@@ -0,0 +1,112 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+/**
+ * Props that were legacy defaults and should be removed because they are
+ * either not supported or are no-ops in the new Select component.
+ *
+ * - matchWidths: legacy default was "minimum" (always on). The new Select
+ *   does not use this prop (only relevant in complex/popover mode via CSS).
+ *   Remove any value: matchWidths, matchWidths={true}, matchWidths="minimum".
+ * - defaultOpen={false}: false is the default in both old and new.
+ * - lockScrollWhileOpen / lockScrollWhileOpen={true}: legacy default, removed in new API.
+ */
+
+function isRemovableMatchWidths(attr: JSXAttribute): boolean {
+  if ((attr.name.name as string) !== "matchWidths") return false
+
+  // Shorthand: matchWidths (boolean true)
+  if (!attr.value) return true
+
+  // matchWidths={true}
+  if (
+    attr.value.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "BooleanLiteral" &&
+    attr.value.expression.value === true
+  ) {
+    return true
+  }
+
+  // matchWidths="minimum"
+  if (attr.value.type === "StringLiteral" && attr.value.value === "minimum") {
+    return true
+  }
+
+  // matchWidths={"minimum"}
+  if (
+    attr.value.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "StringLiteral" &&
+    attr.value.expression.value === "minimum"
+  ) {
+    return true
+  }
+
+  return false
+}
+
+function isRemovableDefaultOpen(attr: JSXAttribute): boolean {
+  if ((attr.name.name as string) !== "defaultOpen") return false
+
+  // defaultOpen={false}
+  if (
+    attr.value &&
+    attr.value.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "BooleanLiteral" &&
+    attr.value.expression.value === false
+  ) {
+    return true
+  }
+
+  return false
+}
+
+function isRemovableLockScroll(attr: JSXAttribute): boolean {
+  const name = attr.name.name as string
+  if (name !== "lockScrollWhileOpen") return false
+
+  // lockScrollWhileOpen (shorthand true) or lockScrollWhileOpen={true}
+  if (!attr.value) return true
+  if (
+    attr.value.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "BooleanLiteral" &&
+    attr.value.expression.value === true
+  ) {
+    return true
+  }
+
+  return false
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: transformableSelect,
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    const attributes = element.openingElement.attributes || []
+    const toRemove: number[] = []
+
+    attributes.forEach((attr, index) => {
+      if (attr.type !== "JSXAttribute") return
+      if (
+        isRemovableMatchWidths(attr) ||
+        isRemovableDefaultOpen(attr) ||
+        isRemovableLockScroll(attr)
+      ) {
+        toRemove.push(index)
+      }
+    })
+
+    if (toRemove.length === 0) return false
+
+    // Remove in reverse order to preserve indices
+    for (let i = toRemove.length - 1; i >= 0; i--) {
+      attributes.splice(toRemove[i], 1)
+    }
+
+    return true
+  },
+})
+
+export default transform

package/src/components/select/transforms/sizeMapping.test.ts

@@ -0,0 +1,188 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./sizeMapping"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("sizeMapping transform", () => {
+  describe("size value transformations", () => {
+    it("should transform xs to md", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select size="xs" emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should transform sm to md", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select size="sm" emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should transform xl to lg", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select size="xl" emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain('Size "xl" was mapped to "lg"')
+    })
+
+    it('should transform size={"xs"} expression to md', () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select size={"xs"} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should not transform supported sizes (md, lg)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select size="md" emptyValue="Pick" />
+      <Select size="lg" emptyValue="Pick" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Select without size prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button size="xs">Click</Button>
+      <Select size="md" emptyValue="Pick" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple Selects with different sizes", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Select size="xs" emptyValue="Pick" />
+      <Select size="sm" emptyValue="Pick" />
+      <Select size="lg" emptyValue="Pick" />
+      <Select size="xl" emptyValue="Pick" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('size="xs"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).not.toContain('size="xl"')
+      const sizeMappingMatches = result.match(/Size ".*" was mapped to/g)
+      expect(sizeMappingMatches).toHaveLength(3)
+    })
+
+    it("should not transform expression values (variables)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "xs"
+  return <Select size={size} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select size="xs" emptyValue="Pick" disabled onChange={() => {}} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('emptyValue="Pick"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+  })
+})