@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.1-qa-1035.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/paddingPropsToFlex.test.ts

@@ -0,0 +1,252 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./paddingPropsToFlex"
+
+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("paddingPropsToFlex transform", () => {
+  it("leaves a valid scale-number padding unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it('converts padding="0" to padding={0}', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="0">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={0}")
+    expect(result).not.toContain('padding="0"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("converts a pixel string to the corresponding spacing token", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="8px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={1}")
+    expect(result).not.toContain('padding="8px"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("converts all pixel values in the scale", () => {
+    const cases: Array<[string, number]> = [
+      ["0px", 0],
+      ["2px", 0.25],
+      ["4px", 0.5],
+      ["8px", 1],
+      ["12px", 1.5],
+      ["16px", 2],
+      ["24px", 3],
+      ["32px", 4],
+      ["40px", 5],
+      ["48px", 6],
+      ["56px", 7],
+    ]
+    for (const [px, token] of cases) {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="${px}">Test</StackView>
+}
+      `.trim()
+      const result = applyTransform(input)
+      expect(result, `${px} should map to ${token}`).toContain(
+        `padding={${token}}`
+      )
+    }
+  })
+
+  it("adds a TODO on the padding attribute for a value that cannot be mapped", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding="10px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toMatch(/\/\*.*TODO.*\*\/\s*padding="10px"/)
+  })
+
+  it("renames paddingHorizontal to paddingInline for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingHorizontal and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal="16px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingHorizontal to paddingInline and adds a TODO for an unmappable value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal="1rem">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).toMatch(/TODO/)
+  })
+
+  it("renames paddingHorizontal to paddingInline without a TODO when both ternary branches are valid scale numbers", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={isNarrow ? 2 : 6}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("renames paddingHorizontal to paddingInline without a TODO when one ternary branch is null", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingHorizontal={isRoom ? null : 2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingInline")
+    expect(result).not.toContain("paddingHorizontal")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("renames paddingVertical to paddingBlock for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical={1}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock={1}")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingVertical and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical="8px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock={1}")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("renames paddingVertical to paddingBlock without a TODO when both ternary branches are valid scale numbers", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView paddingVertical={isNarrow ? 1 : 3}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("paddingBlock")
+    expect(result).not.toContain("paddingVertical")
+    expect(result).not.toMatch(/TODO/)
+  })
+
+  it("leaves padding with a valid-scale ternary unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={isNarrow ? 2 : 6}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("leaves padding with a null ternary branch unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView padding={isRoom ? null : 2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView has no padding props", () => {
+    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("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+export default function Test() {
+  return <StackView padding="8px">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})

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

@@ -0,0 +1,150 @@
+import { JSXAttribute } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const PADDING_SCALE = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
+
+const PIXEL_TO_TOKEN: Record<string, number> = {
+  "0": 0,
+  "0px": 0,
+  "2px": 0.25,
+  "4px": 0.5,
+  "8px": 1,
+  "12px": 1.5,
+  "16px": 2,
+  "24px": 3,
+  "32px": 4,
+  "40px": 5,
+  "48px": 6,
+  "56px": 7,
+}
+
+function isScaleNumber(node: unknown): boolean {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    (node as { type: string }).type === "NumericLiteral" &&
+    PADDING_SCALE.has((node as { value: number }).value)
+  )
+}
+
+function isNullLiteral(node: unknown): boolean {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    (node as { type: string }).type === "NullLiteral"
+  )
+}
+
+function resolveToSpacingToken(attr: JSXAttribute): number | null {
+  const value = attr.value
+  if (!value) return null
+  if (value.type === "JSXExpressionContainer") {
+    const expr = value.expression
+    if (
+      expr.type === "NumericLiteral" &&
+      PADDING_SCALE.has(expr.value as number)
+    ) {
+      return expr.value as number
+    }
+  }
+  if (value.type === "StringLiteral") {
+    const mapped = PIXEL_TO_TOKEN[value.value as string]
+    if (mapped !== undefined) return mapped
+  }
+  return null
+}
+
+function isAlreadyValidScaleValue(attr: JSXAttribute): boolean {
+  const value = attr.value
+  if (value?.type !== "JSXExpressionContainer") return false
+  const expr = value.expression
+  if (isScaleNumber(expr)) return true
+  if (expr.type === "ConditionalExpression") {
+    const validBranch = (n: unknown) => isScaleNumber(n) || isNullLiteral(n)
+    return validBranch(expr.consequent) && validBranch(expr.alternate)
+  }
+  return false
+}
+
+const PADDING_SCALE_LIST = [...PADDING_SCALE].join(", ")
+
+const TODO_TEXT =
+  "could not migrate padding automatically; " +
+  `use a Tapestry spacing scale number (${PADDING_SCALE_LIST}) ` +
+  "for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values"
+
+export default attributeTransformFactory({
+  condition: orConditions(
+    hasAttribute("padding"),
+    hasAttribute("paddingHorizontal"),
+    hasAttribute("paddingVertical")
+  ),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let changed = false
+
+    const paddingAttr = getAttribute({ element, name: "padding" })
+    if (paddingAttr) {
+      const token = resolveToSpacingToken(paddingAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          paddingAttr.value?.type === "JSXExpressionContainer" &&
+          paddingAttr.value.expression.type === "NumericLiteral" &&
+          (paddingAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          paddingAttr.value = j.jsxExpressionContainer(j.numericLiteral(token))
+          changed = true
+        }
+      } else if (!isAlreadyValidScaleValue(paddingAttr)) {
+        addCommentToAttribute({ attribute: paddingAttr, j, text: TODO_TEXT })
+        changed = true
+      }
+    }
+
+    const horizontalAttr = getAttribute({ element, name: "paddingHorizontal" })
+    if (horizontalAttr) {
+      horizontalAttr.name.name = "paddingInline"
+      const token = resolveToSpacingToken(horizontalAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          horizontalAttr.value?.type === "JSXExpressionContainer" &&
+          horizontalAttr.value.expression.type === "NumericLiteral" &&
+          (horizontalAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          horizontalAttr.value = j.jsxExpressionContainer(
+            j.numericLiteral(token)
+          )
+        }
+      } else if (!isAlreadyValidScaleValue(horizontalAttr)) {
+        addCommentToAttribute({ attribute: horizontalAttr, j, text: TODO_TEXT })
+      }
+      changed = true
+    }
+
+    const verticalAttr = getAttribute({ element, name: "paddingVertical" })
+    if (verticalAttr) {
+      verticalAttr.name.name = "paddingBlock"
+      const token = resolveToSpacingToken(verticalAttr)
+      if (token !== null) {
+        const alreadyCorrect =
+          verticalAttr.value?.type === "JSXExpressionContainer" &&
+          verticalAttr.value.expression.type === "NumericLiteral" &&
+          (verticalAttr.value.expression as { value: number }).value === token
+        if (!alreadyCorrect) {
+          verticalAttr.value = j.jsxExpressionContainer(j.numericLiteral(token))
+        }
+      } else if (!isAlreadyValidScaleValue(verticalAttr)) {
+        addCommentToAttribute({ attribute: verticalAttr, j, text: TODO_TEXT })
+      }
+      changed = true
+    }
+
+    return changed
+  },
+})