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

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"')
+    })
+  })
+})

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

@@ -0,0 +1,57 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { addComment } from "../../shared/actions/addComment"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("state"),
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    const attr = getAttribute({ element, name: "state" })
+    if (!attr) return false
+
+    const value = getAttributeValue({ attribute: attr, j })
+
+    if (value === "error") {
+      removeAttribute("state", { element, j, source })
+      addAttribute({
+        booleanAsShorthand: true,
+        element,
+        j,
+        name: "invalid",
+        value: true,
+      })
+      return true
+    }
+
+    if (value === "success") {
+      removeAttribute("state", { element, j, source })
+      addComment({
+        element,
+        j,
+        scope: "state",
+        source,
+        text: "'state=\"success\"' has no equivalent in the new TextArea API. Remove this prop and implement success feedback separately.",
+      })
+      return true
+    }
+
+    // Dynamic value — can't determine at compile time
+    addComment({
+      element,
+      j,
+      scope: "state",
+      source,
+      text: "'state' has been replaced by 'invalid' (boolean). For error state, use invalid={true}. 'success' has no equivalent. Migrate this prop manually.",
+    })
+    return true
+  },
+})
+
+export default transform

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

@@ -0,0 +1,133 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./stateToInvalidTernary"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("stateToInvalidTernary transform", () => {
+  describe("successful conversions", () => {
+    it("converts state={hasError ? 'error' : null} → invalid={hasError}", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={hasError ? "error" : null} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={hasError}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts member expression: state={form.hasError ? 'error' : null} → invalid={form.hasError}", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={form.hasError ? "error" : null} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={form.hasError}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts binary expression: state={errors.length > 0 ? 'error' : null} → invalid={errors.length > 0}", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={errors.length > 0 ? "error" : null} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={errors.length > 0}")
+      expect(result).not.toContain("state=")
+    })
+
+    it("converts state={hasError ? 'error' : undefined} → invalid={hasError}", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={hasError ? "error" : undefined} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("invalid={hasError}")
+      expect(result).not.toContain("state=")
+    })
+  })
+
+  describe("no-op cases", () => {
+    it("returns null when consequent is not 'error'", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={hasWarning ? "warning" : null} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when alternate is not null/undefined", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea state={hasError ? "error" : "success"} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when TextArea is from a different package", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+function Test() {
+  return <TextArea state={hasError ? "error" : null} label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("returns null when TextArea has no state prop", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+})

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

@@ -0,0 +1,11 @@
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { ternaryConditionalToPropFactory } from "../../shared/transformFactories/ternaryConditionalToPropFactory"
+
+export default ternaryConditionalToPropFactory({
+  condition: hasAttribute("state"),
+  fromProp: "state",
+  matchValue: "error",
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  toProp: "invalid",
+})

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

@@ -0,0 +1,275 @@
+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 { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea css={{ color: 'red' }} label="Notes" />
+}
+      `.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 { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea naked label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (naked): 'naked' is not supported, please migrate as needed."
+      )
+    })
+
+    it("should add comments for multiple unsupported props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      css={{ color: 'red' }}
+      naked
+      subdued
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (naked):")
+      expect(result).toContain("/* TODO: tapestry-migration (subdued):")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported textarea props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref = React.useRef()
+  return (
+    <TextArea
+      defaultValue="hello"
+      disabled
+      ref={ref}
+      label="Notes"
+      name="notes"
+      onChange={() => {}}
+      placeholder="Enter notes"
+      readOnly
+      required
+      rows={5}
+      resize="vertical"
+      value="test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for standard HTML textarea attributes", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      autoComplete="off"
+      autoFocus
+      cols={40}
+      spellCheck={false}
+      wrap="soft"
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      className="test"
+      id="textarea"
+      key="key"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      aria-label="Test textarea"
+      aria-describedby="description"
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      data-testid="textarea"
+      data-cy="test-textarea"
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect TextArea without unsupported props", () => {
+      const input = `
+import { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TextArea label="Notes" />
+}
+      `.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, TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button css={{ color: 'red' }}>Click me</Button>
+      <TextArea label="Notes" />
+    </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 { TextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TextArea
+      rows={5}
+      css={{ color: 'red' }}
+      disabled
+      naked
+      label="Notes"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (naked):")
+      expect(result).toContain("rows={5}")
+      expect(result).toContain("disabled")
+      expect(result).toContain('label="Notes"')
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { TextArea } from "other-library"
+
+function Test() {
+  return <TextArea naked label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should handle alias import", () => {
+      const input = `
+import { TextArea as MyTextArea } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <MyTextArea naked label="Notes" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (naked):")
+    })
+  })
+})