@planningcenter/tapestry-migration-cli 3.6.0 → 3.7.0-rc.0

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/shared/helpers/unsupportedPropsHelpers.ts

@@ -233,3 +233,44 @@ export const DROPDOWN_LINK_SUPPORTED_PROPS = [
   "href",
   "to",
 ]
+
+// StackView props that have dedicated transforms. When a transform cannot resolve
+// a value at codemod time, it leaves the prop name unchanged and adds a TODO.
+// Listing them here prevents unsupportedPropsFactory from adding a second TODO.
+export const FLEX_IGNORE_PROPS = [
+  "alignItems",
+  "alignment",
+  "axis",
+  "distribution",
+  "flex",
+  "justifyContent",
+  "mediaQueries",
+  "spacing",
+]
+
+export const FLEX_SPECIFIC_PROPS = [
+  "align",
+  "alignSelf",
+  "as",
+  "basis",
+  "columnGap",
+  "direction",
+  "expand",
+  "gap",
+  "grow",
+  "inline",
+  "justify",
+  "padding",
+  "paddingBlock",
+  "paddingInline",
+  "responsive",
+  "rowGap",
+  "shrink",
+  "wrap",
+]
+
+export const FLEX_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...FLEX_IGNORE_PROPS,
+  ...FLEX_SPECIFIC_PROPS,
+]

package/src/components/shared/transformFactories/stylePropTransformFactory.test.ts

@@ -120,6 +120,53 @@ describe("stylePropTransformFactory", () => {
         }} />"
       `)
     })
+
+    it("converts negative numeric margin props through the spacing scale", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box margin={-1} marginTop={-2} marginLeft={-0.5} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            marginTop: "-16px",
+            marginRight: "-8px",
+            marginBottom: "-8px",
+            marginLeft: "-4px"
+          }} />"
+      `)
+    })
+
+    it("converts negative numeric margin longhand props through the spacing scale", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box marginTop={-1} marginBottom={-2} marginLeft={-3} marginRight={-4} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box
+          style={{
+            marginTop: "-8px",
+            marginRight: "-32px",
+            marginBottom: "-16px",
+            marginLeft: "-24px"
+          }} />"
+      `)
+    })
+  })
+
+  describe("stylesToExclude", () => {
+    const transform = stylePropTransformFactory({
+      stylesToExclude: ["gap"],
+      stylesToRemove: [],
+      targetComponent: "Box",
+      targetPackage: "@planningcenter/tapestry-react",
+    })
+
+    it("leaves excluded props untouched while migrating others", () => {
+      const input = `import { Box } from "@planningcenter/tapestry-react";<Box gap={2} marginTop={2} />`
+      const result = applyTransform(transform, input)
+      expect(result).toMatchInlineSnapshot(`
+        "import { Box } from "@planningcenter/tapestry-react";<Box gap={2} style={{
+          marginTop: "16px"
+        }} />"
+      `)
+    })
   })
 
   describe("value-transforming aliases", () => {

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -81,6 +81,19 @@ function extractPropValue(attr: JSXAttribute, j: JSCodeshift) {
       return expression.value
     } else if (expression.type === "NumericLiteral") {
       return expression.value
+    } else if (expression.type === "UnaryExpression") {
+      const unary = expression as unknown as {
+        argument?: { type?: string; value?: unknown }
+        operator: string
+      }
+      if (
+        unary.operator === "-" &&
+        unary.argument?.type === "NumericLiteral" &&
+        typeof unary.argument.value === "number"
+      ) {
+        return -unary.argument.value
+      }
+      return `{${j(expression).toSource()}}`
     } else if (expression.type === "BooleanLiteral") {
       return expression.value
     } else if (expression.type === "Identifier") {
@@ -363,6 +376,7 @@ export function stylePropTransformFactory(config: {
     styleProps: string[]
   }
   stylePropMapping?: StylePropMapping
+  stylesToExclude?: string[]
   stylesToKeep?: string[]
   stylesToRemove: string[]
   targetComponent: string
@@ -370,6 +384,7 @@ export function stylePropTransformFactory(config: {
 }): Transform {
   const {
     stylePropMapping = {} as StylePropMapping,
+    stylesToExclude = [],
     stylesToKeep = [],
     stylesToRemove,
   } = config
@@ -387,6 +402,7 @@ export function stylePropTransformFactory(config: {
       return (
         name &&
         name !== "css" &&
+        !stylesToExclude.includes(name) &&
         (stylePropNames.includes(name) ||
           name in stylePropMapping ||
           stylesToKeep.includes(name) ||