@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.1-qa-1035.0

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

@@ -0,0 +1,126 @@
+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("does not inject axis when direction is already present", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row">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,30 @@
+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(hasAttribute("direction")),
+    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/flex/transforms/unsupportedProps.test.ts

@@ -0,0 +1,141 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  return (
+    (transform(
+      fileInfo,
+      { j, jscodeshift: j, report: () => {}, stats: () => {} },
+      {}
+    ) as string | null) || source
+  )
+}
+
+describe("unsupportedProps transform", () => {
+  describe("flags removed props", () => {
+    it("flags visible", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView visible={isOpen}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (visible)")
+    })
+
+    it("flags variants", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView variants={["elevated"]}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (variants)")
+    })
+
+    it("flags multiple unsupported props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView visible={isOpen} variants={["elevated"]}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (visible)")
+      expect(result).toContain("TODO: tapestry-migration (variants)")
+    })
+  })
+
+  describe("does not flag supported props", () => {
+    it("does not flag valid Flex layout props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" gap={2} align="center" justify="space-between" wrap="wrap">Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag Flex sizing and responsive props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView expand responsive={{ md: { direction: "row" } }} paddingBlock={2} alignSelf="center" columnGap={1}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag props with dedicated transforms that may remain when values cannot be resolved", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis={someVar} alignment={a} distribution={d} spacing={s} mediaQueries={mq}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag className, style, ref", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView className="my-stack" style={{ color: "red" }} ref={ref}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("does not flag aria-* and data-* attributes", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView aria-label="Content" data-pendo="stack">Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns source unchanged when not from tapestry-react", () => {
+      const input = `
+import { StackView } from "some-other-library"
+
+export default function Test() {
+  return <StackView visible={true}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(input)
+    })
+
+    it("returns source unchanged for empty file", () => {
+      expect(applyTransform("")).toBe("")
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { FLEX_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { unsupportedPropsFactory } from "../../shared/transformFactories/unsupportedPropsFactory"
+
+export default unsupportedPropsFactory({
+  commentNotes: (prop) => {
+    if (prop === "visible") {
+      return "\n * `visible` is not supported in Flex. Conditionally render the element instead.\n"
+    }
+    if (prop === "variants") {
+      return "\n * `variants` is not supported in Flex.\n"
+    }
+    return ""
+  },
+  supportedProps: FLEX_SUPPORTED_PROPS,
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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,
   ]