@planningcenter/tapestry-migration-cli 3.4.1 → 3.6.0

package/src/components/flex/transforms/setDefaultAxis.test.ts

@@ -0,0 +1,114 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./setDefaultAxis"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("setDefaultAxis transform", () => {
+  it('adds axis="vertical" to a StackView with no axis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<StackView axis="vertical">Test</StackView>')
+  })
+
+  it("adds the default to self-closing elements", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView spacing={2} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('axis="vertical"')
+    expect(result).toContain("spacing={2}")
+  })
+
+  it("adds the default to every StackView lacking an axis", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <StackView>
+      <StackView>Inner</StackView>
+    </StackView>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result?.match(/axis="vertical"/g)).toHaveLength(2)
+  })
+
+  it("does not change a StackView that already has an axis", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("skips elements with spread props", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test(props) {
+  return <StackView {...props}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack>Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<Stack axis="vertical">Test</Stack>')
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null for an empty file", () => {
+    expect(applyTransform("")).toBe(null)
+  })
+})

package/src/components/flex/transforms/setDefaultAxis.ts

@@ -0,0 +1,29 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { notCondition } from "../../shared/conditions/notCondition"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(
+    notCondition(hasAttribute("axis")),
+    notCondition(hasSpreadProps)
+  ),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    addAttribute({
+      element,
+      j,
+      name: "axis",
+      value: "vertical",
+    })
+
+    return true
+  },
+})
+
+export default transform

package/src/components/flex/transforms/spacingToGap.test.ts

@@ -0,0 +1,176 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./spacingToGap"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("spacingToGap transform", () => {
+  it("renames spacing to gap for all valid scale values", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <StackView spacing={0}>
+      <StackView spacing={0.25}>
+        <StackView spacing={0.5}>
+          <StackView spacing={1}>
+            <StackView spacing={1.5}>
+              <StackView spacing={2}>
+                <StackView spacing={3}>
+                  <StackView spacing={4}>
+                    <StackView spacing={5}>
+                      <StackView spacing={6}>
+                        <StackView spacing={7}>Test</StackView>
+                      </StackView>
+                    </StackView>
+                  </StackView>
+                </StackView>
+              </StackView>
+            </StackView>
+          </StackView>
+        </StackView>
+      </StackView>
+    </StackView>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={0}")
+    expect(result).toContain("gap={0.25}")
+    expect(result).toContain("gap={0.5}")
+    expect(result).toContain("gap={1}")
+    expect(result).toContain("gap={1.5}")
+    expect(result).toContain("gap={2}")
+    expect(result).toContain("gap={3}")
+    expect(result).toContain("gap={4}")
+    expect(result).toContain("gap={5}")
+    expect(result).toContain("gap={6}")
+    expect(result).toContain("gap={7}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("flags an off-scale number with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView spacing={10}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={10}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags a string spacing value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView spacing="8px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('spacing="8px"')
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags a ReactNode spacer with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView spacing={<Divider />}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={<Divider />}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags an expression-wrapped string spacing value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView spacing={"8px"}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('spacing={"8px"}')
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags a dynamic spacing value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ spacingProp }) {
+  return <StackView spacing={spacingProp}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={spacingProp}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack spacing={2}>Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={2}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("returns null when there is no spacing to migrate", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+
+export default function Test() {
+  return <StackView spacing={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

package/src/components/flex/transforms/spacingToGap.ts

@@ -0,0 +1,49 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const VALID_GAP_VALUES = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
+
+function resolveSpacingValue(attribute: JSXAttribute): number | null {
+  const value = attribute.value
+  if (
+    value?.type === "JSXExpressionContainer" &&
+    value.expression.type === "NumericLiteral" &&
+    VALID_GAP_VALUES.has(value.expression.value)
+  ) {
+    return value.expression.value
+  }
+  return null
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("spacing"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const spacingAttribute = getAttribute({ element, name: "spacing" })
+    if (!spacingAttribute) return false
+
+    const spacingValue = resolveSpacingValue(spacingAttribute)
+
+    if (spacingValue === null) {
+      addComment({
+        element,
+        j,
+        scope: "spacing",
+        source,
+        text: "could not migrate spacing to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for gap, or for ReactNode spacers add explicit margin to the spacer element instead",
+      })
+      return true
+    }
+
+    spacingAttribute.name.name = "gap"
+
+    return true
+  },
+})
+
+export default transform

package/src/components/select/index.ts

@@ -10,6 +10,7 @@ import mapChildrenToOptions from "./transforms/mapChildrenToOptions"
 import mergeFieldIntoSelect from "./transforms/mergeFieldIntoSelect"
 import mergeSelectLabel from "./transforms/mergeSelectLabel"
 import moveSelectImport from "./transforms/moveSelectImport"
+import onChangeSignature from "./transforms/onChangeSignature"
 import removeDefaultProps from "./transforms/removeDefaultProps"
 import sizeMapping from "./transforms/sizeMapping"
 import skipMultipleSelect from "./transforms/skipMultipleSelect"
@@ -36,6 +37,7 @@ const transform: Transform = (fileInfo, api, options) => {
     stateToInvalid,
     removeDefaultProps,
     convertStyleProps,
+    onChangeSignature,
     unsupportedProps,
     moveSelectImport,
   ]

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

@@ -0,0 +1,224 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./onChangeSignature"
+
+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("onChangeSignature transform", () => {
+  it("auto-rewrites ({ value }) => expr to (e) => e.target.value", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    // jscodeshift omits parens for a single identifier param: `e =>` not `(e) =>`
+    expect(result).toContain("e =>")
+    expect(result).toContain("e.target.value")
+    expect(result).not.toContain("({ value })")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("replaces all value references in the expression body", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => fn(value, value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("fn(e.target.value, e.target.value)")
+    expect(result).not.toContain("({ value })")
+  })
+
+  it("adds a TODO comment for a function reference", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={handler} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("onChange={handler}")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO comment when ({ selectedValue }) is destructured", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ selectedValue }) => setX(selectedValue)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("({ selectedValue })")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO comment for a block-body arrow (too complex to auto-rewrite)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => { setX(value) }} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("{ setX(value) }")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("expands object-literal shorthand return ({ value }) to ({ value: e.target.value })", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => ({ value })} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("value: e.target.value")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("leaves member-property `value` access untouched (obj.value and obj?.value)", () => {
+    const dot = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(obj.value)} emptyValue="Pick" />
+}
+    `.trim()
+    const dotResult = applyTransform(dot)
+    expect(dotResult).toContain("setX(obj.value)")
+    expect(dotResult).not.toContain("e.target.value")
+
+    const optional = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => setX(obj?.value)} emptyValue="Pick" />
+}
+    `.trim()
+    const optionalResult = applyTransform(optional)
+    expect(optionalResult).toContain("obj?.value")
+    expect(optionalResult).not.toContain("obj?.e.target.value")
+  })
+
+  it("adds a TODO when a nested callback shadows `value` (would corrupt the binding)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => list.map(value => value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("list.map(value => value)")
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("adds a TODO when a nested callback destructures its own `value`", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => list.map(({ value }) => value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (onChange)")
+  })
+
+  it("rewrites references inside a nested callback that does NOT shadow `value`", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select onChange={({ value }) => arr.filter(x => x === value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("x === e.target.value")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("does not transform Select with no onChange", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("does not transform other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button onChange={({ value }) => setX(value)}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("does not transform a multiple Select (skipped by transformableSelect)", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple onChange={({ value }) => setX(value)} emptyValue="Pick" />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+
+  it("preserves other props when auto-rewriting", () => {
+    const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select disabled emptyValue="Pick" onChange={({ value }) => setX(value)} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("disabled")
+    expect(result).toContain("emptyValue")
+    expect(result).toContain("e.target.value")
+  })
+})