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

package/src/components/time-field/transforms/unsupportedProps.test.ts

@@ -0,0 +1,160 @@
+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", () => {
+  it("flags ignoredKeys as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField ignoredKeys={["ArrowUp"]} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("ignoredKeys")
+  })
+
+  it("flags interval as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField interval={15} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("interval")
+  })
+
+  it("flags isIOS as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField isIOS value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("isIOS")
+  })
+
+  it("flags controlled as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField controlled value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("controlled")
+  })
+
+  it("flags placeholder as unsupported", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField placeholder="Enter time" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("placeholder")
+  })
+
+  it("does not flag supported props", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <TimeField
+      value={time}
+      onChange={setTime}
+      disabled
+      required
+      size="md"
+      label="Start time"
+      description="Pick a time"
+      invalid
+      hourCycle={12}
+      hideLabel
+      hideTimeZone
+      forceLeadingZeros
+      readOnly
+      name="start"
+      className="my-time"
+      id="start-time"
+    />
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("allows aria-* and data-* attributes", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField aria-describedby="help" data-testid="time" value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).not.toContain("TODO: tapestry-migration")
+  })
+
+  it("flags css prop with specific message", () => {
+    const input = `
+import { TimeField } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <TimeField css={{ color: "red" }} value={time} onChange={setTime} />
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration")
+    expect(result).toContain("CSS prop is not supported")
+  })
+
+  it("does not affect other components", () => {
+    const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button ignoredKeys={["x"]}>Click</Button>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toBe(input)
+  })
+})

package/src/components/time-field/transforms/unsupportedProps.ts

@@ -0,0 +1,37 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { TIME_FIELD_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "TimeField",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes || []
+
+    const UNSUPPORTED_PROPS = attrs
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !TIME_FIELD_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/components/toggle-switch/transforms/moveToggleSwitchImport.test.ts

@@ -96,6 +96,34 @@ function Test() {
     })
   })
 
+  describe("import conflict handling", () => {
+    it("should use TToggleSwitch alias when ToggleSwitch is already imported from another package", () => {
+      const input = `
+import { ToggleSwitch } from "some-other-library"
+import { ToggleSwitch as ReactToggleSwitch } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <ToggleSwitch />
+      <ReactToggleSwitch />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        'import { ToggleSwitch } from "some-other-library"'
+      )
+      expect(result).toContain(
+        'import { ToggleSwitch as TToggleSwitch } from "@planningcenter/tapestry"'
+      )
+      expect(result).toContain("<TToggleSwitch")
+      expect(result).not.toContain("ReactToggleSwitch")
+    })
+  })
+
   describe("edge cases", () => {
     it("should handle already migrated imports", () => {
       const input = `

package/src/components/toggle-switch/transforms/moveToggleSwitchImport.ts

@@ -4,6 +4,7 @@ import { componentTransformFactory } from "../../shared/transformFactories/compo
 
 const transform: Transform = componentTransformFactory({
   condition: () => true,
+  conflictAlias: "TToggleSwitch",
   fromComponent: "ToggleSwitch",
   fromPackage: "@planningcenter/tapestry-react",
   toComponent: "ToggleSwitch",

package/src/index.ts

@@ -19,6 +19,7 @@ const COMPONENTS_SET = new Set([
   "radio",
   "select",
   "text-area",
+  "time-field",
   "toggle-switch",
 ])
 
@@ -27,7 +28,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, input, link, radio, select, text-area, toggle-switch)"
+    "The name of the component to migrate (button, checkbox, input, link, radio, select, text-area, time-field, toggle-switch)"
   )
   .requiredOption(
     "-p, --path <path>",