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

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

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

@@ -0,0 +1,204 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalid"
+
+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("stateToInvalid transform", () => {
+  describe("state='error' conversion", () => {
+    it("should convert state='error' to invalid", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state="error" label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain('state="error"')
+    })
+
+    it('should convert state={"error"} expression to invalid', () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={"error"} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+    })
+
+    it("should preserve other props when converting state='error'", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      state="error"
+      label="Notes"
+      placeholder="Enter notes"
+      onChange={handleChange}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).not.toContain("state=")
+      expect(result).toContain('label="Notes"')
+      expect(result).toContain('placeholder="Enter notes"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("state='success' conversion", () => {
+    it("should remove state='success' and add comment", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state="success" label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain('<TextArea state="success"')
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).toContain("no equivalent")
+    })
+
+    it('should remove state={"success"} and add comment', () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={"success"} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("state={")
+      expect(result).toContain("TODO: tapestry-migration (state)")
+    })
+  })
+
+  describe("dynamic state value", () => {
+    it("should add comment for variable state value", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const inputState = isError ? "error" : undefined
+  return <TextArea state={inputState} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).toContain("'state' has been replaced by 'invalid'")
+      expect(result).toContain("state={inputState}")
+    })
+
+    it("should add comment for string variable", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={currentState} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (state)")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect TextArea without state prop", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { TextArea, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button state="error">Error</Button>
+      <TextArea state="error" label="Notes" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Button state="error">Error</Button>')
+      expect(result).not.toContain('<TextArea state="error"')
+      expect(result).toContain("invalid")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+function Test() {
+  return <TextArea state="error" label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle multiple TextAreas with different states", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <TextArea state="error" label="Error field" />
+      <TextArea state="success" label="Success field" />
+      <TextArea label="Normal field" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("invalid")
+      expect(result).toContain("TODO: tapestry-migration (state)")
+      expect(result).not.toContain('<TextArea state="error"')
+      expect(result).not.toContain('<TextArea state="success"')
+    })
+  })
+})