@planningcenter/tapestry-migration-cli 2.4.0 → 2.4.1-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.4.0",
+  "version": "2.4.1-rc.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "affade8550b5721f1e1b46c4e9bba0f134787bff"
+  "gitHead": "c643ce32f1e79ee51403daeaaeac4940729ab69d"
 }

package/src/components/checkbox/index.ts

@@ -0,0 +1,38 @@
+import { Transform } from "jscodeshift"
+
+import childrenToLabel from "./transforms/childrenToLabel"
+import convertStyleProps from "./transforms/convertStyleProps"
+import innerRefToRef from "./transforms/innerRefToRef"
+import moveCheckboxImport from "./transforms/moveCheckboxImport"
+import sizeMapping from "./transforms/sizeMapping"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    childrenToLabel,
+    sizeMapping,
+    innerRefToRef,
+    convertStyleProps,
+    unsupportedProps,
+    moveCheckboxImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

package/src/components/checkbox/transforms/childrenToLabel.test.ts

@@ -0,0 +1,146 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./childrenToLabel"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("childrenToLabel transform for Checkbox", () => {
+  describe("simple text conversion", () => {
+    it("should convert simple text children to label prop", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox>Accept terms</Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Checkbox label="Accept terms" />')
+      expect(result).not.toContain("Accept terms</Checkbox>")
+    })
+
+    it("should not convert when label prop already exists", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="Already has label">Accept terms</Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('label="Already has label"')
+      expect(result).toContain("Accept terms</Checkbox>")
+    })
+
+    it("should handle whitespace in text content", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox>  Accept terms  </Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Checkbox label="Accept terms" />')
+    })
+
+    it("should not convert complex children", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox>
+      <span>Accept</span> terms
+    </Checkbox>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("label=")
+      expect(result).toContain("<span>Accept</span>terms")
+      expect(result).toContain(
+        "TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+    })
+
+    it("should not convert when children contain JSX elements", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox>
+      Accept <strong>terms</strong>
+    </Checkbox>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("label=")
+      expect(result).toContain("Accept <strong>terms</strong>")
+      expect(result).toContain(
+        "TODO: tapestry-migration (children): complex children cannot be converted to label prop"
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle empty children", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox></Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Checkbox></Checkbox>")
+    })
+
+    it("should handle self-closing checkbox", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Checkbox />")
+    })
+
+    it("should handle checkbox with other props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox checked disabled>Accept terms</Checkbox>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Checkbox checked disabled label="Accept terms" />'
+      )
+    })
+  })
+})

package/src/components/checkbox/transforms/childrenToLabel.ts

@@ -0,0 +1,54 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { removeChildren } from "../../shared/actions/removeChildren"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { hasChildren } from "../../shared/conditions/hasChildren"
+import {
+  buildComment,
+  extractTextContent,
+} from "../../shared/helpers/childrenToLabelHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasChildren,
+  targetComponent: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    if (hasAttribute("label")(element)) {
+      addComment({
+        element,
+        j,
+        scope: "label",
+        source,
+        text: buildComment("Checkbox has both label prop and children", false),
+      })
+      return true
+    }
+
+    const { isSimpleText, textContent } = extractTextContent(element.children!)
+
+    if (isSimpleText && textContent) {
+      addAttribute({ element, j, name: "label", value: textContent })
+      removeChildren(element)
+      return true
+    } else if (!isSimpleText) {
+      addComment({
+        element,
+        j,
+        scope: "children",
+        source,
+        text: buildComment(
+          "complex children cannot be converted to label prop",
+          true
+        ),
+      })
+      return true
+    }
+
+    return false
+  },
+})
+
+export default transform

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

@@ -0,0 +1,161 @@
+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 }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+  return result || source
+}
+
+describe("convertStyleProps transform", () => {
+  describe("visible prop - handled by theme system", () => {
+    it("should convert visible={false} to display: none", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox visible={false} label="Hidden Checkbox" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"')
+      expect(result).not.toContain("visible={false}")
+    })
+
+    it("should remove visible={true} with no style changes (true is default)", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox visible={true} label="Visible Checkbox" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // visible={true} is default behavior, so it should be removed with no style added
+      expect(result).not.toContain("visible={true}")
+      expect(result).not.toContain("style={{") // No style should be added
+      expect(result).toContain('<Checkbox label="Visible Checkbox" />')
+    })
+
+    it("should handle visible expressions", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          const isVisible = true
+          return <Checkbox visible={isVisible} label="Variable Checkbox" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      // Note: visible expressions are handled by handleVisibleExpressions transform,
+      // not convertStyleProps, so the visible prop should remain
+      expect(result).toContain("visible: isVisible")
+      expect(result).toContain("style={{") // Style should be added for expressions
+    })
+  })
+
+  describe("style prop removal", () => {
+    it("should remove alignItems prop", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox alignItems="center" label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("alignItems=")
+    })
+
+    it("should remove marginTop prop", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox marginTop={16} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("marginTop=")
+    })
+
+    it("should remove multiple style props", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox alignItems="center" marginTop={16} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toContain("alignItems=")
+      expect(result).not.toContain("marginTop=")
+    })
+  })
+
+  describe("combination of style props", () => {
+    it("should handle combination of visible and style props", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Checkbox
+              visible={false}
+              alignItems="center"
+              marginTop={16}
+              label="Combined Checkbox"
+            />
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("style={{")
+      expect(result).toContain('display: "none"') // from visible={false}
+      expect(result).not.toContain("visible={false}")
+      expect(result).not.toContain("alignItems=")
+      expect(result).not.toContain("marginTop=")
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const source = `
+        import { Checkbox } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Checkbox visible={false} label="Test" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { stackViewPlugin } from "../../../stubs/stackViewPlugin"
+import { stylePropTransformFactory } from "../../shared/transformFactories/stylePropTransformFactory"
+
+export default stylePropTransformFactory({
+  plugin: stackViewPlugin,
+  stylesToKeep: ["visible"],
+  stylesToRemove: [],
+  targetComponent: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+})

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

@@ -0,0 +1,161 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./innerRefToRef"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string {
+  const fileInfo = { path: "test.tsx", source }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("innerRefToRef transform", () => {
+  describe("innerRef to ref conversion", () => {
+    it("should convert innerRef to ref", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const checkboxRef = React.useRef()
+  return <Checkbox innerRef={checkboxRef} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={checkboxRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should convert innerRef with expression", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox innerRef={myRef} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={myRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should convert innerRef with callback", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox innerRef={(el) => console.log(el)} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={(el) => console.log(el)}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should not affect existing ref props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const checkboxRef = React.useRef()
+  return <Checkbox ref={checkboxRef} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={checkboxRef}")
+      expect(result).not.toContain("innerRef=")
+    })
+
+    it("should handle multiple checkboxes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref1 = React.useRef()
+  const ref2 = React.useRef()
+  return (
+    <div>
+      <Checkbox innerRef={ref1} label="First" />
+      <Checkbox innerRef={ref2} label="Second" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={ref1}")
+      expect(result).toContain("ref={ref2}")
+      expect(result).not.toContain("innerRef=")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const buttonRef = React.useRef()
+  const checkboxRef = React.useRef()
+  return (
+    <div>
+      <Button innerRef={buttonRef}>Click me</Button>
+      <Checkbox innerRef={checkboxRef} label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("<Button innerRef={buttonRef}>Click me</Button>")
+      expect(result).toContain("ref={checkboxRef}")
+    })
+
+    it("should handle checkbox without innerRef", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Checkbox label="Test" />')
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const checkboxRef = React.useRef()
+  return (
+    <Checkbox 
+      innerRef={checkboxRef} 
+      label="Test" 
+      checked 
+      disabled 
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("ref={checkboxRef}")
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain("innerRef=")
+    })
+  })
+})

package/src/components/checkbox/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: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    return transformAttributeName("innerRef", "ref", { element })
+  },
+})
+
+export default transform