@planningcenter/tapestry-migration-cli 3.4.1 → 3.6.0

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

@@ -0,0 +1,214 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./distributionToJustify"
+
+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("distributionToJustify transform", () => {
+  it("renames distribution to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <StackView distribution="start">
+      <StackView distribution="center">
+        <StackView distribution="end">
+          <StackView distribution="space-between">
+            <StackView distribution="space-evenly">Test</StackView>
+          </StackView>
+        </StackView>
+      </StackView>
+    </StackView>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="start"')
+    expect(result).toContain('justify="center"')
+    expect(result).toContain('justify="end"')
+    expect(result).toContain('justify="space-between"')
+    expect(result).toContain('justify="space-evenly"')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("resolves StackView.CENTER constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.CENTER}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("distribution")
+    expect(result).not.toContain("StackView.CENTER")
+  })
+
+  it("resolves StackView.START constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.START}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="start"')
+    expect(result).not.toContain("StackView.START")
+  })
+
+  it("resolves StackView.END constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.END}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="end"')
+    expect(result).not.toContain("StackView.END")
+  })
+
+  it("resolves StackView.SPACE_BETWEEN constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.SPACE_BETWEEN}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="space-between"')
+    expect(result).not.toContain("StackView.SPACE_BETWEEN")
+  })
+
+  it("resolves StackView.SPACE_EVENLY constant to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.SPACE_EVENLY}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="space-evenly"')
+    expect(result).not.toContain("StackView.SPACE_EVENLY")
+  })
+
+  it("flags distribution={StackView.FILL} with a TODO and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution={StackView.FILL}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={StackView.FILL}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it('flags distribution="fill" with a TODO and leaves it in place', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution="fill">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('distribution="fill"')
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("flags an unrecognized string literal with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView distribution="space-around">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('distribution="space-around"')
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("flags a dynamic distribution value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ distributionProp }) {
+  return <StackView distribution={distributionProp}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={distributionProp}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack distribution="center">Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify="center"')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("returns null when there is no distribution 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 distribution="center">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,76 @@
+import { Transform } from "jscodeshift"
+
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { resolveConstantAttributeValue } from "../../shared/actions/resolveConstantAttributeValue"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const VALID_JUSTIFY_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-evenly",
+])
+
+const CONSTANT_DISTRIBUTION_MAP: Record<string, string> = {
+  CENTER: "center",
+  END: "end",
+  FILL: "fill",
+  SPACE_BETWEEN: "space-between",
+  SPACE_EVENLY: "space-evenly",
+  START: "start",
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("distribution"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const distributionAttribute = getAttribute({
+      element,
+      name: "distribution",
+    })
+    if (!distributionAttribute) return false
+
+    const resolved = resolveConstantAttributeValue({
+      attribute: distributionAttribute,
+      constantMap: CONSTANT_DISTRIBUTION_MAP,
+    })
+    const distributionValue =
+      resolved !== null &&
+      (VALID_JUSTIFY_VALUES.has(resolved) || resolved === "fill")
+        ? resolved
+        : null
+
+    if (distributionValue === null) {
+      addComment({
+        element,
+        j,
+        scope: "distribution",
+        source,
+        text: "could not migrate distribution to justify automatically; convert this value to start, center, end, space-between, or space-evenly manually",
+      })
+      return true
+    }
+
+    if (distributionValue === "fill") {
+      addComment({
+        element,
+        j,
+        scope: "distribution",
+        source,
+        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
+      })
+      return true
+    }
+
+    distributionAttribute.name.name = "justify"
+    distributionAttribute.value = j.stringLiteral(distributionValue)
+
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,100 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, verbose = false): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    { verbose }
+  ) as string | null
+}
+
+describe("innerRefToRef transform", () => {
+  it("renames innerRef to ref", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const ref = React.useRef()
+  return <StackView innerRef={ref}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={ref}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("renames innerRef with a callback ref", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView innerRef={(el) => console.log(el)}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={(el) => console.log(el)}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack innerRef={myRef}>Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("ref={myRef}")
+    expect(result).not.toContain("innerRef=")
+  })
+
+  it("adds a CHANGED comment when verbose is enabled", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView innerRef={myRef}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input, true)
+    expect(result).toContain("ref={myRef}")
+    expect(result).toContain(
+      "CHANGED: tapestry-migration (ref): renamed from innerRef"
+    )
+  })
+
+  it("returns null when there is no innerRef 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 innerRef={myRef}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttribute("innerRef"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, options }) => {
+    return transformAttributeName("innerRef", "ref", { element, j, options })
+  },
+})
+
+export default transform

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