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

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

@@ -0,0 +1,182 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./moveCheckboxImport"
+
+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("moveCheckboxImport transform", () => {
+  describe("import migration", () => {
+    it("should change import from tapestry-react to tapestry", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry"'
+      )
+      expect(result).not.toContain("@planningcenter/tapestry-react")
+    })
+
+    it("should handle multiple imports", () => {
+      const input = `
+import { Button, Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Checkbox label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle default import", () => {
+      const input = `
+import Checkbox from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import Checkbox from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should handle mixed imports", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button>Click</Button>
+      <Checkbox label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button>Click me</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Button } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle already migrated imports", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry"
+
+function Test() {
+  return <Checkbox label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry"'
+      )
+    })
+
+    it("should handle no imports", () => {
+      const input = `
+function Test() {
+  return <div>No imports</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle checkbox not used", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <div>No checkbox used</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry-react"'
+      )
+    })
+
+    it("should preserve other attributes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      label="Test" 
+      checked 
+      disabled 
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { Checkbox } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+    })
+  })
+})

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

@@ -0,0 +1,13 @@
+import { Transform } from "jscodeshift"
+
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+const transform: Transform = componentTransformFactory({
+  condition: () => true,
+  fromComponent: "Checkbox",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Checkbox",
+  toPackage: "@planningcenter/tapestry",
+})
+
+export default transform

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

@@ -0,0 +1,193 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./sizeMapping"
+
+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("sizeMapping transform", () => {
+  describe("size value transformations", () => {
+    it("should transform lg to md", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size="lg" label="Large checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="lg"')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "lg" was mapped to "md"'
+      )
+    })
+
+    it("should transform xl to md", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size="xl" label="Extra large checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "xl" was mapped to "md"'
+      )
+    })
+
+    it("should not transform xs size", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox size="xs" label="Extra small checkbox" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not transform supported sizes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Checkbox size="md" label="Medium checkbox" />
+      <Checkbox size="sm" label="Small checkbox" />
+      <Checkbox size="xs" label="Extra small checkbox" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="sm"')
+      expect(result).toContain('size="xs"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect checkbox without size prop", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="No size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button size="lg">Large button</Button>
+      <Checkbox size="md" label="Medium checkbox" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple checkboxes with different sizes", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Checkbox size="lg" label="Large" />
+      <Checkbox size="md" label="Medium" />
+      <Checkbox size="xl" label="Extra large" />
+      <Checkbox size="xs" label="Extra small" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="xs"')
+      expect(result).not.toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      // Should have 2 TODO comments (one for lg->md, one for xl->md)
+      const todoMatches = result.match(/TODO: tapestry-migration \(size\)/g)
+      expect(todoMatches).toHaveLength(2)
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      size="lg" 
+      label="Test" 
+      checked 
+      disabled 
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('label="Test"')
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain(
+        'TODO: tapestry-migration (size): Size "lg" was mapped to "md"'
+      )
+    })
+
+    it("should not transform expression values", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "lg"
+  return <Checkbox size={size} label="Variable size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+})

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

@@ -0,0 +1,45 @@
+import { Transform } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const SIZE_MAPPING = {
+  lg: "md",
+  xl: "md",
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("size"),
+  targetComponent: "Checkbox",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    let hasChanges = false
+
+    const sizeAttr = element.openingElement.attributes?.find(
+      (attr) => attr.type === "JSXAttribute" && attr.name.name === "size"
+    )
+
+    if (sizeAttr && sizeAttr.type === "JSXAttribute") {
+      if (sizeAttr.value?.type === "StringLiteral") {
+        const sizeValue = sizeAttr.value.value as string
+        const mappedSize = SIZE_MAPPING[sizeValue as keyof typeof SIZE_MAPPING]
+
+        if (mappedSize && mappedSize !== sizeValue) {
+          sizeAttr.value.value = mappedSize
+          hasChanges = true
+
+          addCommentToAttribute({
+            attribute: sizeAttr,
+            j,
+            text: `Size "${sizeValue}" was mapped to "${mappedSize}". Verify visual appearance as sizes may differ slightly.`,
+          })
+        }
+      }
+    }
+
+    return hasChanges
+  },
+})
+
+export default transform

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

@@ -0,0 +1,243 @@
+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 }
+  const result = transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+  return result || source
+}
+
+describe("unsupportedProps transform", () => {
+  describe("unsupported prop detection", () => {
+    it("should add comment for css prop", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox css={{ color: 'red' }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (css): 'css' is not supported, please migrate as needed."
+      )
+      expect(result).toContain(
+        "CSS prop is not supported. Use className or style prop instead."
+      )
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should add comment for custom unsupported prop", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox customProp="value" label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (customProp): 'customProp' is not supported, please migrate as needed."
+      )
+      expect(result).toContain('customProp="value"')
+    })
+
+    it("should add comments for multiple unsupported props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      css={{ color: 'red' }}
+      ref={ref}
+      customProp="value"
+      label="Test" 
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported checkbox props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref = React.useRef()
+  return (
+    <Checkbox 
+      checked
+      disabled
+      indeterminate
+      ref={ref}
+      label="Test"
+      name="checkbox"
+      onChange={() => {}}
+      value="test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain("indeterminate")
+      expect(result).toContain("ref={ref}")
+      expect(result).toContain('label="Test"')
+      expect(result).toContain('name="checkbox"')
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('value="test"')
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      className="test"
+      id="checkbox"
+      key="key"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('className="test"')
+      expect(result).toContain('id="checkbox"')
+      expect(result).toContain('key="key"')
+      expect(result).toContain("style={{ color: 'red' }}")
+      expect(result).toContain("tabIndex={0}")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      aria-label="Test checkbox"
+      aria-describedby="description"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('aria-label="Test checkbox"')
+      expect(result).toContain('aria-describedby="description"')
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      data-testid="checkbox"
+      data-cy="test-checkbox"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('data-testid="checkbox"')
+      expect(result).toContain('data-cy="test-checkbox"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect checkbox without unsupported props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Checkbox label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button css={{ color: 'red' }}>Click me</Button>
+      <Checkbox label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should handle mixed supported and unsupported props", () => {
+      const input = `
+import { Checkbox } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Checkbox 
+      checked
+      css={{ color: 'red' }}
+      disabled
+      customProp="value"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+      expect(result).not.toContain("TODO: tapestry-migration.*checked")
+      expect(result).not.toContain("TODO: tapestry-migration.*disabled")
+      expect(result).not.toContain("TODO: tapestry-migration.*label")
+      expect(result).toContain("checked")
+      expect(result).toContain("disabled")
+      expect(result).toContain('label="Test"')
+    })
+  })
+})