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

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

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

@@ -0,0 +1,35 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { TEXTAREA_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "TextArea",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !TEXTAREA_SUPPORTED_PROPS.includes(attr.name.name as string) &&
+          !(attr.name.name as string).startsWith("aria-") &&
+          !(attr.name.name as string).startsWith("data-")
+      )
+      .map((attr) => (attr as JSXAttribute).name.name as string)
+
+    return addCommentToUnsupportedProps({
+      element,
+      j,
+      messageSuffix: (prop) => {
+        if (prop === "css") {
+          return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

package/src/index.ts

@@ -14,8 +14,10 @@ program
 const COMPONENTS_SET = new Set([
   "button",
   "checkbox",
+  "input",
   "link",
   "radio",
+  "text-area",
   "toggle-switch",
 ])
 
@@ -24,7 +26,7 @@ program
   .description("Run a migration of a component from Tapestry React to Tapestry")
   .argument(
     "<component-name>",
-    "The name of the component to migrate (button, checkbox, link, radio, toggle-switch)"
+    "The name of the component to migrate (button, checkbox, input, link, radio, text-area, toggle-switch)"
   )
   .requiredOption(
     "-p, --path <path>",