@planningcenter/tapestry-migration-cli 2.3.0-rc.7 → 2.3.0-rc.9

package/src/components/button/transforms/convertStyleProps.test.ts

@@ -0,0 +1,464 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./convertStyleProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+}
+
+describe("convertStyleProps transform", () => {
+  describe("KEEP_STYLE_PROPS - preserved as style object properties", () => {
+    it("should convert margin and padding props to style object", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              marginLeft={16}
+              paddingTop="8px"
+              marginHorizontal={20}
+              paddingVertical="12px"
+            >
+              Save
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('paddingTop: "8px"')
+      expect(result).toContain('paddingBottom: "12px"')
+      expect(result).toContain('marginLeft: "128px"')
+      expect(result).toContain('marginRight: "160px"')
+      expect(result).toContain("}}>Save")
+      expect(result).not.toContain("marginLeft={16}")
+      expect(result).not.toContain('paddingTop="8px"')
+      expect(result).not.toContain("marginHorizontal={20}")
+      expect(result).not.toContain('paddingVertical="12px"')
+    })
+
+    it("should convert alignment props to style object", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              alignSelf="center"
+              alignItems="flex-start"
+              justifyContent="space-between"
+            >
+              Align
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('alignSelf: "center"')
+      expect(result).toContain('alignItems: "flex-start"')
+      expect(result).toContain('justifyContent: "space-between"')
+      expect(result).toContain("}}>Align")
+      expect(result).not.toContain('alignSelf="center"')
+      expect(result).not.toContain('alignItems="flex-start"')
+      expect(result).not.toContain('justifyContent="space-between"')
+    })
+
+    it("should handle variable expressions in kept props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const margin = 16
+          return <Button marginLeft={margin} paddingTop={spacing.small}>Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain("marginLeft: margin")
+      expect(result).toContain("paddingTop: spacing.small")
+      expect(result).toContain("}}>Save</Button>")
+      expect(result).not.toContain("marginLeft={margin}")
+      expect(result).not.toContain("paddingTop={spacing.small}")
+    })
+  })
+
+  describe("REMOVE_STYLE_PROPS - removed with comments", () => {
+    it("should remove height prop and add TODO comment", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button height="40px" kind="primary">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain('height="40px"')
+      expect(result).toContain(
+        'TODO: tapestry-migration (height): height has been removed as this is covered by default styling: height: "40px"'
+      )
+      expect(result).toContain('kind="primary"')
+    })
+
+    it("should handle height with variable expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button height={buttonHeight} disabled>Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("height={buttonHeight}")
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("buttonHeight")
+      expect(result).toContain("disabled")
+    })
+  })
+
+  describe("STYLE_PROP_MAPPINGS - special handling", () => {
+    it("should map distribution prop to justifyContent in styles", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button distribution="center">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('justifyContent: "center"')
+      expect(result).toContain("}}>Save</Button>")
+      expect(result).not.toContain('distribution="center"')
+    })
+
+    it("should add audit comment for distribution='fill' special value", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button distribution="fill" kind="primary">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'TODO: tapestry-migration (styleProp): distribution="fill" needs manual review for replacement'
+      )
+      expect(result).not.toContain('<Button distribution="fill"')
+      expect(result).not.toContain("style={{")
+      expect(result).toContain('kind="primary"')
+    })
+
+    it("should handle distribution with variable expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const dist = "space-between"
+          return <Button distribution={dist}>Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain("justifyContent: dist")
+      expect(result).toContain("}}>Save</Button>")
+      expect(result).not.toContain("distribution={dist}")
+    })
+  })
+
+  describe("mixed style props", () => {
+    it("should handle combination of keep, remove, and mapping props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              marginLeft={16}
+              height="40px"
+              distribution="center"
+              paddingTop="8px"
+              kind="primary"
+            >
+              Mixed Props
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('justifyContent: "center"')
+      expect(result).toContain('paddingTop: "8px"')
+      expect(result).toContain('marginLeft: "128px"')
+      expect(result).toContain("}}>")
+      expect(result).toContain(
+        'TODO: tapestry-migration (height): height has been removed as this is covered by default styling: height: "40px"'
+      )
+      expect(result).not.toContain("marginLeft={16}")
+      expect(result).not.toContain('height="40px"')
+      expect(result).not.toContain('distribution="center"')
+      expect(result).not.toContain('paddingTop="8px"')
+      expect(result).toContain('kind="primary"')
+    })
+
+    it("should handle existing style prop and merge with converted props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              style={{ color: "red", fontSize: 14 }}
+              marginLeft={16}
+              paddingTop="8px"
+            >
+              Existing Style
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("style={{")
+      expect(result).toContain("marginLeft:")
+      expect(result).toContain("paddingTop:")
+      expect(result).not.toContain("marginLeft={16}")
+      expect(result).not.toContain('paddingTop="8px"')
+    })
+  })
+
+  describe("no style props", () => {
+    it("should return null when no style props are present", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary" disabled onClick={handleClick}>No Styles</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should handle Button with no props at all", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button>No Props</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only process files that import Button from tapestry-react", () => {
+      const source = `
+        import { Button } from "some-other-library"
+
+        export function TestComponent() {
+          return <Button marginLeft={16} paddingTop="8px">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should handle aliased Button imports", () => {
+      const source = `
+        import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TapestryButton marginLeft={16} paddingTop="8px">Save</TapestryButton>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("<TapestryButton")
+      expect(result).toContain("style={{")
+      expect(result).toContain("marginLeft:")
+      expect(result).toContain("paddingTop:")
+      expect(result).toContain("</TapestryButton>")
+    })
+  })
+
+  describe("complex expressions", () => {
+    it("should handle complex expressions in style props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const theme = { spacing: { small: 8, large: 16 } }
+          return (
+            <Button
+              marginLeft={theme.spacing.large}
+              paddingTop={isLarge ? "16px" : "8px"}
+              alignSelf={responsive ? "stretch" : "center"}
+            >
+              Complex
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("style={{")
+      expect(result).toContain('paddingTop: isLarge ? "16px" : "8px"')
+      expect(result).toContain('alignSelf: responsive ? "stretch" : "center"')
+      expect(result).toContain("marginLeft: theme.spacing.large")
+    })
+
+    it("should handle numeric literals correctly", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button marginLeft={16} paddingTop={8} marginRight={0}>Numbers</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('paddingTop: "64px"')
+      expect(result).toContain('marginLeft: "128px"')
+      expect(result).toContain('marginRight: "0px"')
+      expect(result).toContain("}}>Numbers</Button>")
+      expect(result).not.toContain("marginLeft={16}")
+      expect(result).not.toContain("paddingTop={8}")
+      expect(result).not.toContain("marginRight={0}")
+    })
+
+    it("should handle boolean literals in style props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button marginLeft={true ? 16 : 0} alignSelf="center">Boolean</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("style={{")
+      expect(result).toContain("marginLeft:")
+      expect(result).toContain("alignSelf:")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle self-closing Button elements", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button marginLeft={16} paddingTop="8px" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain(`<Button
+              style={{
+                paddingTop: "8px",
+                marginLeft: "128px"
+              }} />`)
+    })
+
+    it("should handle empty/undefined attribute values gracefully", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button marginLeft={16} paddingTop="">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(`<Button
+              style={{
+                paddingTop: "",
+                marginLeft: "128px"
+              }}>`)
+    })
+
+    it("should handle multiple Buttons with different style combinations", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <form>
+              <Button marginLeft={16} height="40px">Submit</Button>
+              <Button distribution="fill" kind="secondary">Fill</Button>
+              <Button paddingTop="8px" alignSelf="center">Centered</Button>
+              <Button kind="primary">No Styles</Button>
+            </form>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(`<Button
+                style={{
+                  marginLeft: "128px"
+                }}>`)
+      expect(result).toContain(
+        `{/* TODO: tapestry-migration (styleProp): distribution="fill" needs manual review for replacement */
+              }<Button kind="secondary">`
+      )
+      expect(result).toContain(`style={{
+                  alignSelf: "center",
+                  paddingTop: "8px"
+                }}`)
+      expect(result).toContain('<Button kind="primary">')
+    })
+  })
+})

package/src/components/button/transforms/convertStyleProps.ts

@@ -0,0 +1,16 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  plugin: stackViewPlugin,
+  stylePropMapping: {
+    distribution: {
+      defaultMapping: "justifyContent",
+      specialValues: { fill: "AUDIT" },
+    },
+  },
+  stylesToKeep: ["visible"],
+  stylesToRemove: ["height", "minHeight"],
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+})