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

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

@@ -0,0 +1,566 @@
+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("removed InputBox props", () => {
+    // renderLeft/renderRight are handled by skipRenderSideProps — unsupportedProps skips those elements
+    it("should return null for Input with renderLeft (handled by skipRenderSideProps)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderLeft={<Icon />} label="Name" />
+}
+      `.trim()
+
+      const result = transform(
+        { path: "test.tsx", source: input },
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      )
+      expect(result).toBeNull()
+    })
+
+    it("should return null for Input with renderRight (handled by skipRenderSideProps)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input renderRight={<Icon />} label="Name" />
+}
+      `.trim()
+
+      const result = transform(
+        { path: "test.tsx", source: input },
+        { j, jscodeshift: j, report: () => {}, stats: () => {} },
+        {}
+      )
+      expect(result).toBeNull()
+    })
+
+    it("should flag isLoading", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input isLoading label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (isLoading)")
+    })
+
+    it("should flag onClear", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input onClear={handleClear} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (onClear)")
+    })
+
+    it("should flag naked", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input naked label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (naked)")
+    })
+
+    it("should flag subdued", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input subdued label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (subdued)")
+    })
+
+    it("should flag secondaryStroke", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input secondaryStroke label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (secondaryStroke)")
+    })
+
+    it("should flag evenPadding", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input evenPadding label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (evenPadding)")
+    })
+
+    it("should flag focus style object", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input focus={{ strokeWeight: 2 }} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (focus)")
+    })
+
+    it("should flag hover style object", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input hover={{ strokeWeight: 2 }} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (hover)")
+    })
+
+    it("should flag autoFocus", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input autoFocus label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (autoFocus)")
+    })
+
+    it("should flag readOnlyBackgroundColor", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input readOnlyBackgroundColor="gray" label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "TODO: tapestry-migration (readOnlyBackgroundColor)"
+      )
+    })
+
+    it("should add extra message for css prop", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input css={{ color: "red" }} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain(
+        "CSS prop is not supported. Use className or style prop instead."
+      )
+    })
+  })
+
+  describe("supported props — no comment added", () => {
+    it("should not flag supported Input props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      label="Name"
+      description="Helper text"
+      invalid={false}
+      disabled
+      readOnly
+      required
+      placeholder="Enter name"
+      type="email"
+      autoWidth
+      selectTextOnFocus
+      size="md"
+      value=""
+      onChange={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not flag standard HTML attributes", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      label="Name"
+      id="name-input"
+      name="name"
+      className="custom"
+      style={{ marginTop: 8 }}
+      tabIndex={0}
+      autoComplete="off"
+      defaultValue="foo"
+      min={0}
+      max={100}
+      minLength={2}
+      maxLength={50}
+      onFocus={() => {}}
+      onBlur={() => {}}
+      onKeyDown={() => {}}
+      onKeyUp={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not flag step on a numeric input", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="number" label="Amount" min={0} max={100} step={1} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should flag step on type='range' (not an accepted Input type)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="range" step={0.5} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (step)")
+    })
+
+    it("should flag step on type={'range'} expression container (not an accepted Input type)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type={"range"} step={0.5} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (step)")
+      expect(result).toContain("TODO: tapestry-migration (type)")
+    })
+
+    it("should be permissive with type-specific props when type is dynamic", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type={inputType} step={0.5} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration (step)")
+      expect(result).not.toContain("TODO: tapestry-migration (type)")
+    })
+
+    it("should flag accept on type='file' (not an accepted Input type)", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="file" accept=".pdf" label="File" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (accept)")
+    })
+
+    it("should not flag pattern on type='text'", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="text" pattern="[0-9]+" label="Number" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not flag multiple on type='email'", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="email" multiple label="Emails" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not flag step when type is dynamic", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type={inputType} step={1} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should flag step without a type attr", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input step={1} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (step)")
+    })
+
+    it("should flag step on type='text'", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="text" step={1} label="Amount" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (step)")
+    })
+
+    it("should flag accept without a type attr", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input accept=".pdf" label="File" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (accept)")
+    })
+
+    it("should not flag aria-* props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      aria-label="Name"
+      aria-describedby="desc"
+      aria-labelledby="label"
+      label="Name"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not flag data-* props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Input
+      data-testid="name-input"
+      data-cy="name-field"
+      label="Name"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("unsupported type values", () => {
+    it.each([
+      "range",
+      "date",
+      "time",
+      "datetime-local",
+      "week",
+      "month",
+      "file",
+      "color",
+      "checkbox",
+      "radio",
+      "hidden",
+      "image",
+      "submit",
+      "reset",
+      "button",
+    ])("should flag type='%s' as unsupported", (type) => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="${type}" label="Field" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (type)")
+      expect(result).toContain("is not a supported Input type")
+    })
+
+    it("should not flag accepted type values", () => {
+      const types = [
+        "email",
+        "number",
+        "password",
+        "search",
+        "tel",
+        "text",
+        "url",
+      ]
+      for (const type of types) {
+        const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type="${type}" label="Field" />
+}
+        `.trim()
+
+        const result = applyTransform(input)
+        expect(result).not.toContain("TODO: tapestry-migration")
+      }
+    })
+
+    it("should not flag dynamic type values", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input type={inputType} label="Field" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Input with only supported props", () => {
+      const input = `
+import { Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Input label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Input, Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button naked>Naked button</Button>
+      <Input label="Name" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("naked")
+    })
+
+    it("should not transform if not imported from @planningcenter/tapestry-react", () => {
+      const input = `
+import { Input } from "other-library"
+
+function Test() {
+  return <Input renderLeft={<Icon />} label="Name" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+  })
+})

package/src/components/input/transforms/unsupportedProps.ts

@@ -0,0 +1,84 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import {
+  ACCEPTED_INPUT_TYPES,
+  INPUT_SUPPORTED_PROPS,
+  TYPE_SPECIFIC_PROPS,
+} from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: transformableInput,
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes || []
+
+    const typeAttr = getAttribute({ element, name: "type" })
+
+    const typeValue = typeAttr
+      ? getAttributeValue({ attribute: typeAttr, j })
+      : null
+
+    // getAttributeValue resolves both type="text" and type={"text"} to "text",
+    // but returns source-code representations for truly dynamic expressions
+    // (e.g. type={someVar} → "{someVar}"). We need to distinguish static
+    // string values from dynamic ones so we can flag unsupported types without
+    // false-positiving on variables, and be permissive with type-specific props
+    // when the type can't be determined statically.
+    const isStaticType =
+      typeAttr?.value?.type === "StringLiteral" ||
+      (typeAttr?.value?.type === "JSXExpressionContainer" &&
+        typeAttr.value.expression.type === "StringLiteral")
+
+    const hasUnsupportedTypeValue =
+      isStaticType &&
+      typeValue !== null &&
+      !ACCEPTED_INPUT_TYPES.includes(
+        typeValue as (typeof ACCEPTED_INPUT_TYPES)[number]
+      )
+
+    const typeAllowedProps: string[] =
+      typeAttr === undefined
+        ? []
+        : isStaticType
+          ? (TYPE_SPECIFIC_PROPS[typeValue!] ?? [])
+          : Object.values(TYPE_SPECIFIC_PROPS).flat()
+
+    const UNSUPPORTED_PROPS = attrs
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !INPUT_SUPPORTED_PROPS.includes(attr.name.name as string) &&
+          !typeAllowedProps.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)
+
+    if (hasUnsupportedTypeValue) {
+      UNSUPPORTED_PROPS.push("type")
+    }
+
+    return addCommentToUnsupportedProps({
+      element,
+      j,
+      messageSuffix: (prop) => {
+        if (prop === "css") {
+          return "\n * CSS prop is not supported. Use className or style prop instead.\n"
+        }
+        if (prop === "type") {
+          return `\n * '${typeValue}' is not a supported Input type. Accepted types: ${ACCEPTED_INPUT_TYPES.join(", ")}.\n`
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

package/src/components/link/transforms/reviewStyles.test.ts

@@ -5,7 +5,6 @@ import transform from "./reviewStyles"
 
 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 = {

package/src/components/shared/helpers/unsupportedPropsHelpers.ts

@@ -49,3 +49,55 @@ export const CHECKBOX_RADIO_SUPPORTED_PROPS = [
   ...CHECKBOX_RADIO_SHARED_PROPS,
   ...STYLE_PROP_NAMES_WITHOUT_CSS,
 ]
+
+export const INPUT_SPECIFIC_PROPS = [
+  "autoComplete",
+  "autoWidth",
+  "defaultValue",
+  "description",
+  "disabled",
+  "form",
+  "hideLabel",
+  "invalid",
+  "max",
+  "maxLength",
+  "min",
+  "minLength",
+  "name",
+  "onChange",
+  "placeholder",
+  "readOnly",
+  "required",
+  "selectTextOnFocus",
+  "spellCheck",
+  "type",
+  "value",
+]
+
+export const ACCEPTED_INPUT_TYPES = [
+  "email",
+  "number",
+  "password",
+  "search",
+  "tel",
+  "text",
+  "url",
+] as const
+
+// Per https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes
+// Only covers the types accepted by the Tapestry Input component.
+export const TYPE_SPECIFIC_PROPS: Record<string, string[]> = {
+  email: ["dirname", "list", "multiple", "pattern"],
+  number: ["inputMode", "list", "step"],
+  password: ["pattern"],
+  search: ["dirname", "inputMode", "list", "pattern"],
+  tel: ["dirname", "inputMode", "list", "pattern"],
+  text: ["dirname", "inputMode", "list", "pattern"],
+  url: ["dirname", "inputMode", "list", "pattern"],
+}
+
+export const INPUT_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...INPUT_SPECIFIC_PROPS,
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
+]