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

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

@@ -0,0 +1,103 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  it("should add comment to Select with spread props", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Select {...props} emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("should not transform Select without spread props", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Select emptyValue="Pick one" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("should not transform if Select is not imported from @planningcenter/tapestry-react", () => {
+    const input = `
+import { Select } from "other-library"
+
+export default function Test() {
+  const props = { onChange: handleChange }
+  return <Select {...props} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+
+  it("should handle multiple Select components with spread props", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props1 = { onChange: handleChange1 }
+  const props2 = { onChange: handleChange2 }
+  return (
+    <div>
+      <Select {...props1} emptyValue="Pick one" />
+      <Select {...props2} emptyValue="Pick another" />
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props1}")
+    expect(result).toContain("{...props2}")
+  })
+
+  it("should return null for empty file", () => {
+    const result = applyTransform("")
+    expect(result).toBe(null)
+  })
+
+  it("should return null when no Select imports exist", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClick: handleClick }
+  return <Button {...props}>Save</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(null)
+  })
+})

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

@@ -0,0 +1,26 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getSpreadProps } from "../../shared/actions/getSpreadProps"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const COMMENT =
+  "Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(transformableSelect, hasSpreadProps),
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const spreadProps = getSpreadProps(element)
+    spreadProps.forEach((prop) =>
+      addCommentToAttribute({ attribute: prop, j, text: COMMENT })
+    )
+    return spreadProps.length > 0
+  },
+})
+
+export default transform

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

@@ -0,0 +1,367 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./childrenToOptions"
+
+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("childrenToOptions transform", () => {
+  describe("basic Select.Option conversion", () => {
+    it("should convert simple Select.Option children to options prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple">Apple</Select.Option>
+      <Select.Option value="orange">Orange</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={")
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+      expect(result).toContain('label: "Orange"')
+      expect(result).toContain('value: "orange"')
+      expect(result).not.toContain("Select.Option")
+    })
+
+    it("should preserve data-* attributes on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple" data-testid="apple-opt">Apple</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-testid": "apple-opt"')
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
+    it("should preserve dynamic data-* attribute expressions on options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple" data-pendo={pendoIds.apple}>Apple</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('"data-pendo": pendoIds.apple')
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
+    it("should handle disabled options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="apple" disabled>Apple</Select.Option>
+      <Select.Option value="orange">Orange</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("disabled: true")
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
+    it("should convert Select.Option with expression string value", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value={"apple"}>Apple</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={")
+      expect(result).toContain('value: "apple"')
+      expect(result).toContain('label: "Apple"')
+    })
+
+    it("should make Select self-closing after removing children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="a">A</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("</Select>")
+      expect(result).toContain("/>")
+    })
+  })
+
+  describe("Select.OptionGroup conversion", () => {
+    it("should convert OptionGroup with title to grouped options", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.OptionGroup title="Fruits">
+        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Option value="orange">Orange</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={")
+      expect(result).toContain('label: "Fruits"')
+      expect(result).toContain("options: [")
+      expect(result).toContain('label: "Apple"')
+      expect(result).toContain('value: "apple"')
+    })
+
+    it("should handle mixed options and option groups", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="none">None</Select.Option>
+      <Select.OptionGroup title="Fruits">
+        <Select.Option value="apple">Apple</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={")
+      expect(result).toContain('label: "None"')
+      expect(result).toContain('label: "Fruits"')
+    })
+  })
+
+  describe("complex children (should flag for manual migration)", () => {
+    it("should add comment for dynamic children (ternary)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      {showOptions ? <Select.Option value="a">A</Select.Option> : null}
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("dynamic expressions")
+    })
+
+    it("should add comment for Select.Option with function children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="custom">
+        {(selected) => selected ? "Selected!" : "Not selected"}
+      </Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("could not be automatically converted")
+    })
+
+    it("should add comment for Select.Option with dynamic value", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value={dynamicValue}>Label</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("could not be automatically converted")
+    })
+
+    it("should add comment for Select.Option with JSX children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Option value="user">
+        <img src="avatar.png" /> Alice
+      </Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("could not be automatically converted")
+    })
+
+    it("should add comment for Select.Value children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.Value>Custom display</Select.Value>
+      <Select.Option value="a">A</Select.Option>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("Select.Value")
+    })
+
+    it("should add comment for Select.OptionGroup with dynamic title", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+      <Select.OptionGroup title={groupTitle}>
+        <Select.Option value="a">A</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("could not be automatically converted")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform Select without children", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick one" options={options} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not transform other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle aliased Select import", () => {
+      const input = `
+import { Select as TapestrySelect } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TapestrySelect emptyValue="Pick one">
+      <TapestrySelect.Option value="a">A</TapestrySelect.Option>
+    </TapestrySelect>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("options={")
+      expect(result).toContain('label: "A"')
+      expect(result).toContain('value: "a"')
+    })
+
+    it("should handle Select with only whitespace children (no-op)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select emptyValue="Pick one">
+    </Select>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      // Only whitespace children, should add comment since no options found
+      expect(result).toContain("TODO: tapestry-migration")
+    })
+  })
+})