@planningcenter/tapestry-migration-cli 3.1.0-rc.2 → 3.1.0-rc.20

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

@@ -0,0 +1,252 @@
+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 with specific message", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select css={{ color: 'red' }} emptyValue="Pick" />
+}
+      `.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."
+      )
+    })
+
+    it("should add comment for tooltip prop with specific message", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select tooltip={{ content: "Help" }} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (tooltip)")
+      expect(result).toContain("unsupported anti-pattern")
+    })
+
+    it("should skip Select with multiple prop (handled by skipMultipleSelect)", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select multiple emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("multiple")
+      expect(result).toContain('emptyValue="Pick"')
+    })
+
+    it("should add comment for renderValue prop", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select renderValue={(opts) => opts.map(o => o.label)} emptyValue="Pick" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (renderValue)")
+      expect(result).toContain("renderValue is not supported")
+    })
+
+    it("should add comments for removed props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      keepInView
+      lockScrollWhileOpen
+      popoverProps={{ maxHeight: 300 }}
+      renderTo="body"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (keepInView)")
+      expect(result).toContain("TODO: tapestry-migration (lockScrollWhileOpen)")
+      expect(result).toContain("TODO: tapestry-migration (popoverProps)")
+      expect(result).toContain("TODO: tapestry-migration (renderTo)")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported select props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      disabled
+      name="select"
+      onChange={() => {}}
+      value="test"
+      placeholder="Pick one"
+      options={options}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      className="test"
+      id="select"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Test"
+      placeholder="Pick"
+      options={[]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      aria-label="Test select"
+      aria-describedby="description"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      data-testid="select"
+      data-cy="test-select"
+      placeholder="Pick"
+      options={[]}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect Select without unsupported props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Select label="Test" placeholder="Pick" options={[]} />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Button css={{ color: 'red' }}>Click me</Button>
+      <Select label="Test" placeholder="Pick" options={[]} />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+    })
+
+    it("should handle mixed supported and unsupported props", () => {
+      const input = `
+import { Select } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Select
+      disabled
+      css={{ color: 'red' }}
+      tooltip={{ content: "help" }}
+      label="Test"
+      placeholder="Pick"
+      options={[]}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (tooltip)")
+      expect(result).toContain("disabled")
+      expect(result).toContain('label="Test"')
+    })
+  })
+})

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

@@ -0,0 +1,44 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { SELECT_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableSelect } from "../transformableSelect"
+
+const transform: Transform = attributeTransformFactory({
+  condition: transformableSelect,
+  targetComponent: "Select",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          attr.name.type === "JSXIdentifier" &&
+          !SELECT_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"
+        }
+        if (prop === "tooltip") {
+          return "\n * Wrapping a select in a tooltip is an unsupported anti-pattern.\n"
+        }
+        if (prop === "renderValue") {
+          return "\n * renderValue is not supported. The select displays the selected option label.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

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

@@ -0,0 +1,26 @@
+import { Expression, JSXElement } from "jscodeshift"
+
+/**
+ * Gets the expression AST node for a JSX attribute value.
+ * Returns the expression node for dynamic values, or a StringLiteral for static ones.
+ */
+export function getAttributeExpression(
+  element: JSXElement,
+  attrName: string
+): Expression | null {
+  const attrs = element.openingElement.attributes || []
+  for (const attr of attrs) {
+    if (attr.type !== "JSXAttribute") continue
+    if (attr.name.name !== attrName) continue
+
+    if (!attr.value) return null // boolean shorthand has no expression
+    if (attr.value.type === "StringLiteral") return attr.value
+    if (attr.value.type === "JSXExpressionContainer") {
+      const expr = attr.value.expression
+      if (expr.type === "JSXEmptyExpression") return null
+      return expr as Expression
+    }
+    return null
+  }
+  return null
+}

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

@@ -49,3 +49,105 @@ 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]
+
+export const SELECT_SPECIFIC_PROPS = [
+  "complex",
+  "defaultValue",
+  "description",
+  "disabled",
+  "form",
+  "invalid",
+  "name",
+  "onChange",
+  "options",
+  "placeholder",
+  "required",
+  "value",
+]
+
+export const SELECT_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...SELECT_SPECIFIC_PROPS,
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
+]
+
+export const TEXTAREA_SPECIFIC_PROPS = [
+  "autoComplete",
+  "autoFocus",
+  "cols",
+  "defaultValue",
+  "description",
+  "disabled",
+  "dirname",
+  "form",
+  "hideLabel",
+  "invalid",
+  "maxLength",
+  "minLength",
+  "name",
+  "onChange",
+  "onInput",
+  "onSelect",
+  "placeholder",
+  "readOnly",
+  "required",
+  "resize",
+  "rows",
+  "spellCheck",
+  "value",
+  "wrap",
+]
+
+export const TEXTAREA_SUPPORTED_PROPS = [
+  ...COMMON_PROPS,
+  ...TEXTAREA_SPECIFIC_PROPS,
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
+]

package/src/components/shared/transformFactories/helpers/manageImports.ts

@@ -136,7 +136,6 @@ export function removeImportFromDeclaration(
   if (importIndex >= 0) {
     specifiers.splice(importIndex, 1)
 
-    // Remove entire import if no specifiers left
     if (specifiers.length === 0) {
       importPath.get().prune()
     }
@@ -162,19 +161,23 @@ export function addImport({
   pkg: string
   source: Collection
 }): string {
-  // Check if component is already imported from the target package
   const existingImportName = getImportName(component, pkg, { j, source })
   if (existingImportName) {
     return existingImportName
   }
 
-  // Check for conflicts with imports from other packages
   const hasConflict = hasConflictingImport(component, pkg, { j, source })
   const finalComponentName = hasConflict ? conflictAlias : component
   const alias =
     finalComponentName !== component ? finalComponentName : undefined
 
-  // Handle target package import addition
+  // If there's a conflict but no meaningful alias (conflictAlias === component), skip
+  // adding the import to avoid duplicate identifiers. The conflicting import from another
+  // package will be migrated to the target package by another transform in the pipeline.
+  if (hasConflict && !alias) {
+    return finalComponentName
+  }
+
   const targetImport = source
     .find(j.ImportDeclaration, {
       source: { value: pkg },
@@ -223,18 +226,17 @@ export function manageImports(
         name: { name: sourceComponentName },
       }).length > 0
 
-  // Handle source package import cleanup
-  const sourceImport = source
-    .find(j.ImportDeclaration, {
+  // Handle source package import cleanup — search all declarations, not just the first,
+  // since a component may be in a separate import declaration from the same package.
+  if (!stillUsesSource) {
+    const sourceImports = source.find(j.ImportDeclaration, {
       source: { value: config.fromPackage },
     })
-    .at(0)
-
-  if (sourceImport.length > 0 && !stillUsesSource) {
-    removeImportFromDeclaration(sourceImport, config.fromComponent)
+    for (let i = 0; i < sourceImports.length; i++) {
+      removeImportFromDeclaration(sourceImports.at(i), config.fromComponent)
+    }
   }
 
-  // Handle target package import addition using addImport
   addImport({
     component: config.toComponent,
     conflictAlias: config.conflictAlias || targetComponentName,