@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 3.1.0

package/src/components/text-area/transforms/removeDuplicateKeys.test.ts

@@ -0,0 +1,129 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDuplicateKeys"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("removeDuplicateKeys transform", () => {
+  describe("TextArea elements with duplicate attributes", () => {
+    it("should remove duplicate attributes from TextArea elements", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea label="First" disabled label="Second">Save</TextArea>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('label="First"')
+      expect(result).not.toContain('label="Second"')
+      expect(result).toContain("disabled")
+    })
+
+    it("should preserve first occurrence of duplicate attributes", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea onClick={handleFirst} aria-label="First" onClick={handleSecond} aria-label="Second" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("onClick={handleFirst}")
+      expect(result).not.toContain("onClick={handleSecond}")
+      expect(result).toContain('aria-label="First"')
+      expect(result).not.toContain('aria-label="Second"')
+    })
+  })
+
+  describe("TextArea elements without duplicate attributes", () => {
+    it("should return null when no duplicates exist", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea label="Name" disabled />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should return null for TextArea with no attributes", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TextArea />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only process files that import TextArea from tapestry-react", () => {
+      const source = `
+        import { TextArea } from "some-other-library"
+
+        export function TestComponent() {
+          return <TextArea label="First" label="Second" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("mixed elements", () => {
+    it("should only process TextArea elements, not other elements", () => {
+      const source = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <TextArea label="First" label="Second" />
+              <div className="container" className="wrapper">Content</div>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // TextArea duplicates should be removed
+      expect(result).toContain('label="First"')
+      expect(result).not.toContain('label="Second"')
+
+      // Other elements should remain unchanged
+      expect(result).toContain('className="container"')
+      expect(result).toContain('className="wrapper"')
+    })
+  })
+})

package/src/components/text-area/transforms/removeDuplicateKeys.ts

@@ -0,0 +1,8 @@
+import { removeDuplicateKeys } from "../../shared/actions/removeDuplicateKeys"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: removeDuplicateKeys,
+})

package/src/components/text-area/transforms/removeRedundantAriaLabel.test.ts

@@ -0,0 +1,183 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeRedundantAriaLabel"
+
+const j = jscodeshift.withParser("tsx")
+
+// Helper to run transform and get result
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  const api = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeRedundantAriaLabel transform", () => {
+  describe("basic transformation", () => {
+    it("should remove aria-label when both aria-label and label are equal static strings", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label="Name" label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<TextArea label="Name" />')
+      expect(result).not.toContain("aria-label")
+    })
+
+    it("should preserve aria-label when no label prop exists", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should return null when TextArea has neither aria-label nor label", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("preserves aria-label when not provably redundant", () => {
+    it("should keep aria-label when it differs from label", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label="Enter your name" label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should keep aria-label when label is a dynamic expression", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label="Name" label={labelText} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should keep aria-label when it is a dynamic expression", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label={ariaText} label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should keep aria-label when label is a JSX element", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label="Name" label={<span>Name</span>} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect other components with the same props", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <TextArea aria-label="Name" label="Name" />
+              <textarea aria-label="Name" label="Name" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<TextArea label="Name" />')
+      expect(result).toContain('<textarea aria-label="Name" label="Name" />')
+    })
+
+    it("should handle expression syntax aria-label={'Name'} matching label='Name'", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <TextArea aria-label={"Name"} label="Name" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<TextArea label="Name" />')
+      expect(result).not.toContain("aria-label")
+    })
+
+    it("should handle multiple TextAreas in one file with mixed cases", () => {
+      const input = `
+        import { TextArea } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <TextArea aria-label="Name" label="Name" />
+              <TextArea aria-label="Email" />
+              <TextArea label="Phone" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<TextArea label="Name" />')
+      expect(result).toContain('aria-label="Email"')
+      expect(result).toContain('<TextArea label="Phone" />')
+    })
+  })
+})

package/src/components/text-area/transforms/removeRedundantAriaLabel.ts

@@ -0,0 +1,59 @@
+import { JSXAttribute, JSXSpreadAttribute, Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { andConditions } from "../../shared/conditions/andConditions"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+function getStaticStringValue(
+  attr: JSXAttribute | JSXSpreadAttribute | undefined
+): string | null {
+  if (!attr || attr.type !== "JSXAttribute" || !attr.value) return null
+  const value = attr.value
+  if (value.type === "Literal" || value.type === "StringLiteral") {
+    return typeof value.value === "string" ? value.value : null
+  }
+  // Handle expression containers with string literals, e.g. aria-label={"Name"}
+  if (
+    value.type === "JSXExpressionContainer" &&
+    value.expression &&
+    (value.expression.type === "Literal" ||
+      value.expression.type === "StringLiteral") &&
+    typeof value.expression.value === "string"
+  ) {
+    return value.expression.value
+  }
+  return null
+}
+
+const transform: Transform = attributeTransformFactory({
+  condition: andConditions(hasAttribute("aria-label"), hasAttribute("label")),
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attrs = element.openingElement.attributes || []
+    const labelAttr = attrs.find(
+      (a) => a.type === "JSXAttribute" && a.name.name === "label"
+    )
+    const ariaLabelAttr = attrs.find(
+      (a) => a.type === "JSXAttribute" && a.name.name === "aria-label"
+    )
+
+    const labelValue = getStaticStringValue(labelAttr)
+    const ariaLabelValue = getStaticStringValue(ariaLabelAttr)
+
+    // Only remove aria-label when both are static strings and equal
+    if (
+      labelValue != null &&
+      ariaLabelValue != null &&
+      labelValue === ariaLabelValue
+    ) {
+      return removeAttribute("aria-label", { element, j, source })
+    }
+
+    // Otherwise keep aria-label to avoid accessibility regressions
+    return false
+  },
+})
+
+export default transform

package/src/components/text-area/transforms/sizeMapping.test.ts

@@ -0,0 +1,199 @@
+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 xs to md", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea size="xs" label="Extra small textarea" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="xs"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should transform sm to md", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea size="sm" label="Small textarea" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).toContain('Size "sm" was mapped to "md"')
+    })
+
+    it("should transform xl to lg", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea size="xl" label="Extra large textarea" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain('size="xl"')
+      expect(result).toContain('Size "xl" was mapped to "lg"')
+    })
+
+    it('should transform size={"xs"} to md', () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea size={"xs"} label="Extra small textarea" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should not transform supported sizes", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TextArea size="md" label="Medium textarea" />
+      <TextArea size="lg" label="Large textarea" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('size="lg"')
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect TextArea without size prop", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="No size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button size="xs">Small button</Button>
+      <TextArea size="md" label="Medium textarea" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="xs"')
+      expect(result).toContain('size="md"')
+    })
+
+    it("should handle multiple TextAreas with different sizes", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TextArea size="xs" label="Extra small" />
+      <TextArea size="sm" label="Small" />
+      <TextArea size="md" label="Medium" />
+      <TextArea size="xl" label="Extra large" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('size="xs"')
+      expect(result).not.toContain('size="sm"')
+      expect(result).not.toContain('size="xl"')
+      // Should have 3 comments (xs->md, sm->md, xl->lg)
+      const sizeMappingMatches = result.match(/Size ".*" was mapped to/g)
+      expect(sizeMappingMatches).toHaveLength(3)
+    })
+
+    it("should preserve other props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      size="xs"
+      label="Notes"
+      rows={5}
+      disabled
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('size="md"')
+      expect(result).toContain('label="Notes"')
+      expect(result).toContain("rows={5}")
+      expect(result).toContain("disabled")
+      expect(result).toContain("onChange={() => {}}")
+      expect(result).toContain('Size "xs" was mapped to "md"')
+    })
+
+    it("should not transform expression values", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const size = "xs"
+  return <TextArea size={size} label="Variable size" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("size={size}")
+      expect(result).not.toContain("Size")
+    })
+  })
+})

package/src/components/text-area/transforms/sizeMapping.ts

@@ -0,0 +1,15 @@
+import { Transform } from "jscodeshift"
+
+import { sizeMappingFactory } from "../../shared/transformFactories/sizeMappingFactory"
+
+const transform: Transform = sizeMappingFactory({
+  sizeMapping: {
+    sm: "md",
+    xl: "lg",
+    xs: "md",
+  },
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform