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

package/src/components/input/transforms/unsupportedProps.test.ts

@@ -276,7 +276,7 @@ function Test() {
       expect(result).not.toContain("TODO: tapestry-migration")
     })
 
-    it("should flag step on type='range' (not an accepted Input type)", () => {
+    it("should not transform Input with type='range' (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -286,10 +286,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (step)")
+      expect(result).toBe(input)
     })
 
-    it("should flag step on type={'range'} expression container (not an accepted Input type)", () => {
+    it("should not transform Input with type={'range'} expression container (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -299,11 +299,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (step)")
-      expect(result).toContain("TODO: tapestry-migration (type)")
+      expect(result).toBe(input)
     })
 
-    it("should be permissive with type-specific props when type is dynamic", () => {
+    it("should not transform Input with dynamic type in unsupported-types section (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -313,11 +312,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration (step)")
-      expect(result).not.toContain("TODO: tapestry-migration (type)")
+      expect(result).toBe(input)
     })
 
-    it("should flag accept on type='file' (not an accepted Input type)", () => {
+    it("should not transform Input with type='file' (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -327,7 +325,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (accept)")
+      expect(result).toBe(input)
     })
 
     it("should not flag pattern on type='text'", () => {
@@ -356,7 +354,7 @@ function Test() {
       expect(result).not.toContain("TODO: tapestry-migration")
     })
 
-    it("should not flag step when type is dynamic", () => {
+    it("should not transform Input when type prop is dynamic (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -366,7 +364,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
     })
 
     it("should flag step without a type attr", () => {
@@ -465,8 +463,10 @@ function Test() {
       "submit",
       "reset",
       "button",
-    ])("should flag type='%s' as unsupported", (type) => {
-      const input = `
+    ])(
+      "should not transform Input with type='%s' (unsupported type bails)",
+      (type) => {
+        const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
 function Test() {
@@ -474,10 +474,10 @@ function Test() {
 }
       `.trim()
 
-      const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (type)")
-      expect(result).toContain("is not a supported Input type")
-    })
+        const result = applyTransform(input)
+        expect(result).toBe(input)
+      }
+    )
 
     it("should not flag accepted type values", () => {
       const types = [
@@ -503,7 +503,7 @@ function Test() {
       }
     })
 
-    it("should not flag dynamic type values", () => {
+    it("should not transform Input when type prop is dynamic (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -513,7 +513,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
     })
   })
 

package/src/components/select/index.ts

@@ -0,0 +1,58 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import childrenToOptions from "./transforms/childrenToOptions"
+import convertLegacyOptions from "./transforms/convertLegacyOptions"
+import convertStyleProps from "./transforms/convertStyleProps"
+import emptyValueToPlaceholder from "./transforms/emptyValueToPlaceholder"
+import innerRefToRef from "./transforms/innerRefToRef"
+import mapChildrenToOptions from "./transforms/mapChildrenToOptions"
+import mergeFieldIntoSelect from "./transforms/mergeFieldIntoSelect"
+import mergeSelectLabel from "./transforms/mergeSelectLabel"
+import moveSelectImport from "./transforms/moveSelectImport"
+import removeDefaultProps from "./transforms/removeDefaultProps"
+import sizeMapping from "./transforms/sizeMapping"
+import skipMultipleSelect from "./transforms/skipMultipleSelect"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    skipMultipleSelect,
+    mergeSelectLabel,
+    mergeFieldIntoSelect,
+    auditSpreadProps,
+    mapChildrenToOptions,
+    childrenToOptions,
+    convertLegacyOptions,
+    emptyValueToPlaceholder,
+    innerRefToRef,
+    sizeMapping,
+    stateToInvalidTernary,
+    stateToInvalid,
+    removeDefaultProps,
+    convertStyleProps,
+    unsupportedProps,
+    moveSelectImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

package/src/components/select/transformableSelect.ts

@@ -0,0 +1,7 @@
+import { hasAttribute } from "../shared/conditions/hasAttribute"
+import { notCondition } from "../shared/conditions/notCondition"
+import { TransformCondition } from "../shared/types"
+
+export const transformableSelect: TransformCondition = notCondition(
+  hasAttribute("multiple")
+)

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")
+    })
+  })
+})