@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.0

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

@@ -0,0 +1,202 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveFlexImport"
+
+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("moveFlexImport transform", () => {
+  describe("basic transformations", () => {
+    it("renames StackView to Flex and moves the import to tapestry", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>Test</Flex>")
+      expect(result).not.toContain("StackView")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("renames multiple StackView usages", () => {
+      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).toContain(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>")
+      expect(result).not.toContain("StackView")
+    })
+
+    it("preserves other imports from tapestry-react", () => {
+      const input = `
+import { StackView, Button, Input } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>Test</Flex>")
+    })
+
+    it("handles self-closing and propped StackView elements", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="vertical" spacing={2} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('<Flex axis="vertical" spacing={2} />')
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("aliased imports", () => {
+    it("normalizes an aliased StackView import to Flex", () => {
+      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(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>Test</Flex>")
+      expect(result).not.toContain("Stack")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("import conflict handling", () => {
+    it("aliases to TFlex when a Flex from another package is in scope", () => {
+      const input = `
+import { Flex } from "some-other-lib"
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Flex as TFlex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('import { Flex } from "some-other-lib"')
+      expect(result).toContain("<TFlex>Test</TFlex>")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("merges with an existing Flex import from the same tapestry package", () => {
+      const input = `
+import { Flex } from "@planningcenter/tapestry"
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>Test</Flex>")
+      expect(result).not.toContain("TFlex")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+
+    it("merges into an existing tapestry import that has other components", () => {
+      const input = `
+import { Button, Input } from "@planningcenter/tapestry"
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button, Input, Flex } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<Flex>Test</Flex>")
+      expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when StackView is not imported from tapestry-react", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button>Test</Button>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when StackView comes from a different package", () => {
+      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/moveFlexImport.ts

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

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