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

package/dist/tapestry-react-shim.cjs

@@ -2917,6 +2917,7 @@ const tokens = {
   "--t-fill-color-interaction-hover": "hsl(204, 100%, 35%)",
   "--t-fill-color-interaction-active": "hsl(204, 100%, 30%)",
   "--t-fill-color-interaction-disabled": "hsl(0, 0%, 81%)",
+  "--t-fill-color-control-neutral": "hsl(0, 0%, 58%)",
   "--t-fill-color-control-neutral-off": "hsl(0, 0%, 58%)",
   "--t-fill-color-control-neutral-on": "hsl(0, 0%, 24%)",
   "--t-fill-color-control": "hsl(204, 100%, 40%)",
@@ -3232,7 +3233,12 @@ const tokens = {
   "--t-form-font-color-error": "hsl(8, 60%, 45%)",
   "--t-form-font-color-readonly": "hsl(0, 0%, 24%)",
   "--t-form-picker-icon-color": "hsl(0, 0%, 24%)",
-  "--t-form-placeholder-color": "hsl(0, 0%, 58%)"
+  "--t-form-placeholder-color": "hsl(0, 0%, 58%)",
+  "--t-form-toggle-color": "hsl(0, 0%, 58%)",
+  "--t-form-toggle-color-disabled": "hsl(0, 0%, 81%)",
+  "--t-form-toggle-color-hover": "hsl(0, 0%, 50%)",
+  "--t-form-toggle-color-on": "hsl(204, 100%, 40%)",
+  "--t-form-toggle-color-on-hover": "hsl(204, 100%, 35%)"
 };
 function token(varName) {
   return `var(${varName})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.1.0-rc.9",
+  "version": "3.1.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.1.0-rc.9",
+    "@planningcenter/tapestry": "^3.1.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -52,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c3dd0518ee1bbb86ffd8796a6d9604273306a7a0"
+  "gitHead": "3d173bf28e92e340ac45b1f08aae5ad64334e94b"
 }

package/src/components/input/transformableInput.ts

@@ -1,8 +1,49 @@
-import { hasAttribute } from "../shared/conditions/hasAttribute"
-import { notCondition } from "../shared/conditions/notCondition"
-import { orConditions } from "../shared/conditions/orConditions"
+import { JSXElement } from "jscodeshift"
+
+import { ACCEPTED_INPUT_TYPES } from "../shared/helpers/unsupportedPropsHelpers"
 import { TransformCondition } from "../shared/types"
 
-export const transformableInput: TransformCondition = notCondition(
-  orConditions(hasAttribute("renderLeft"), hasAttribute("renderRight"))
-)
+// Include legacy "input" value so removeTypeInput can strip it
+const acceptedTypes: readonly string[] = [...ACCEPTED_INPUT_TYPES, "input"]
+
+function hasUnsupportedType(element: JSXElement): boolean {
+  const attributes = element.openingElement.attributes || []
+  const typeAttr = attributes.find(
+    (attr) =>
+      attr.type === "JSXAttribute" &&
+      attr.name?.type === "JSXIdentifier" &&
+      attr.name.name === "type"
+  )
+
+  if (!typeAttr || typeAttr.type !== "JSXAttribute") {
+    return false
+  }
+
+  if (typeAttr.value?.type === "StringLiteral") {
+    return !acceptedTypes.includes(typeAttr.value.value)
+  }
+
+  if (typeAttr.value?.type === "JSXExpressionContainer") {
+    const { expression } = typeAttr.value
+    if (expression.type === "StringLiteral") {
+      return !acceptedTypes.includes(expression.value)
+    }
+  }
+
+  return true
+}
+
+function hasAttribute(element: JSXElement, attributeName: string): boolean {
+  const attributes = element.openingElement.attributes || []
+  return attributes.some(
+    (attr) =>
+      attr.type === "JSXAttribute" &&
+      attr.name?.type === "JSXIdentifier" &&
+      attr.name.name === attributeName
+  )
+}
+
+export const transformableInput: TransformCondition = (element) =>
+  !hasAttribute(element, "renderLeft") &&
+  !hasAttribute(element, "renderRight") &&
+  !hasUnsupportedType(element)

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

@@ -305,6 +305,84 @@ function Test() {
     })
   })
 
+  describe("key prop handling", () => {
+    it("moves key from Field to Input when Input has no key", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="item-1" label="Name"><Input /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="item-1"')
+      expect(result).toContain("<Input")
+    })
+
+    it("keeps Input's key when both Field and Input have key", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Box>
+      <Field key="field-1" label="Name"><Input key="input-1" /></Field>
+    </Box>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).not.toContain("<Field")
+      expect(result).toContain('key="input-1"')
+    })
+  })
+
+  describe("spread props on Field", () => {
+    it("bails out with TODO comment when Field has spread props", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field {...fieldProps}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("TODO: tapestry-migration (mergeFieldIntoInput)")
+      expect(result).toContain("spread props")
+    })
+
+    it("bails out when Field has spread props mixed with regular props", () => {
+      const input = `
+import { Field, Input } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Field label="Name" {...fieldProps}><Input /></Field>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toBeNull()
+      expect(result).toContain("<Field")
+      expect(result).toContain("spread props")
+    })
+  })
+
   describe("not from tapestry-react", () => {
     it("returns null when Field is not imported from tapestry-react", () => {
       const input = `

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

@@ -1,213 +1,7 @@
-import { JSXElement, JSXText, Transform } from "jscodeshift"
+import { mergeFieldFactory } from "../../shared/transformFactories/mergeFieldFactory"
+import { transformableInput } from "../transformableInput"
 
-import { addComment } from "../../shared/actions/addComment"
-import { hasAttribute } from "../../shared/conditions/hasAttribute"
-import { orConditions } from "../../shared/conditions/orConditions"
-import {
-  getImportName,
-  removeImportFromDeclaration,
-} from "../../shared/transformFactories/helpers/manageImports"
-
-const SCOPE = "mergeFieldIntoInput"
-
-const transform: Transform = (fileInfo, api) => {
-  const j = api.jscodeshift
-  const source = j(fileInfo.source)
-
-  const fieldLocalName = getImportName(
-    "Field",
-    "@planningcenter/tapestry-react",
-    { j, source }
-  )
-  if (!fieldLocalName) return null
-
-  const inputLocalName = getImportName(
-    "Input",
-    "@planningcenter/tapestry-react",
-    { j, source }
-  )
-  if (!inputLocalName) return null
-
-  let hasChanges = false
-  let anyFieldRemoved = false
-
-  source.find(j.JSXElement).forEach((path) => {
-    const el = path.value
-    const opening = el.openingElement
-
-    if (opening.name.type !== "JSXIdentifier") return
-    if (opening.name.name !== fieldLocalName) return
-
-    const elementChildren = (el.children || []).filter(
-      (child) =>
-        child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
-    )
-
-    const inputChildren = elementChildren.filter((child) => {
-      if (child.type !== "JSXElement") return false
-      const childOpening = (child as JSXElement).openingElement
-      return (
-        childOpening.name.type === "JSXIdentifier" &&
-        childOpening.name.name === inputLocalName
-      )
-    }) as JSXElement[]
-
-    const hasRenderSide = orConditions(
-      hasAttribute("renderLeft"),
-      hasAttribute("renderRight")
-    )
-
-    // Case: exactly 1 child and it is an Input — merge props and unwrap
-    if (elementChildren.length === 1 && inputChildren.length === 1) {
-      const inputEl = inputChildren[0]
-
-      // Skip inputs with renderLeft/renderRight — they are not transformable
-      if (hasRenderSide(inputEl)) return
-
-      const fieldAttrs = opening.attributes || []
-
-      for (const attr of fieldAttrs) {
-        if (attr.type !== "JSXAttribute") continue
-        if (attr.name.type !== "JSXIdentifier") continue
-
-        const attrName = attr.name.name
-        const inputAttrs = inputEl.openingElement.attributes || []
-
-        if (attrName === "label") {
-          const hasLabel = inputAttrs.some(
-            (a) =>
-              a.type === "JSXAttribute" &&
-              a.name?.type === "JSXIdentifier" &&
-              a.name.name === "label"
-          )
-          if (hasLabel) {
-            addComment({
-              element: inputEl,
-              j,
-              scope: SCOPE,
-              source,
-              text: "Field had label prop but Input already has label. Please migrate manually.",
-            })
-          } else {
-            inputEl.openingElement.attributes.push(attr)
-          }
-        } else if (attrName === "feedbackText") {
-          const hasDescription = inputAttrs.some(
-            (a) =>
-              a.type === "JSXAttribute" &&
-              a.name?.type === "JSXIdentifier" &&
-              a.name.name === "description"
-          )
-          if (hasDescription) {
-            addComment({
-              element: inputEl,
-              j,
-              scope: SCOPE,
-              source,
-              text: "Field had feedbackText prop but Input already has description. Please migrate manually.",
-            })
-          } else {
-            const newAttr = j.jsxAttribute(
-              j.jsxIdentifier("description"),
-              attr.value
-            )
-            inputEl.openingElement.attributes.push(newAttr)
-          }
-        } else if (attrName === "state") {
-          const hasState = inputAttrs.some(
-            (a) =>
-              a.type === "JSXAttribute" &&
-              a.name?.type === "JSXIdentifier" &&
-              a.name.name === "state"
-          )
-          if (hasState) {
-            addComment({
-              element: inputEl,
-              j,
-              scope: SCOPE,
-              source,
-              text: "Field had state prop but Input already has state. Please migrate manually.",
-            })
-          } else {
-            inputEl.openingElement.attributes.push(attr)
-          }
-        } else {
-          addComment({
-            element: inputEl,
-            j,
-            scope: SCOPE,
-            source,
-            text: `Field prop '${attrName}' is not supported by Input. Please migrate manually.`,
-          })
-        }
-      }
-
-      const parent = path.parent?.value
-      if (parent?.children) {
-        const idx = parent.children.indexOf(el)
-        if (idx === -1) return
-        parent.children.splice(idx, 1, ...(el.children || []))
-      } else {
-        // Root JSX (e.g. directly inside return parens) — use path.replace
-        const nonWsChildren = (el.children || []).filter(
-          (child) =>
-            child.type !== "JSXText" || (child as JSXText).value.trim() !== ""
-        )
-        if (nonWsChildren.length === 1) {
-          path.replace(nonWsChildren[0])
-        } else {
-          path.replace(
-            j.jsxFragment(
-              j.jsxOpeningFragment(),
-              j.jsxClosingFragment(),
-              el.children || []
-            )
-          )
-        }
-      }
-      hasChanges = true
-      anyFieldRemoved = true
-      return
-    }
-
-    // Case: more than 1 non-whitespace child — comment each Input child, leave Field
-    if (elementChildren.length > 1) {
-      for (const child of inputChildren) {
-        // Skip inputs with renderLeft/renderRight — they are not transformable
-        if (hasRenderSide(child)) continue
-        addComment({
-          element: child,
-          j,
-          scope: SCOPE,
-          source,
-          text: "Field has multiple children and cannot be auto-merged into Input. Please migrate manually.",
-        })
-        hasChanges = true
-      }
-      return
-    }
-
-    // Case: exactly 1 child but not an Input — skip without comment
-  })
-
-  // Remove Field from imports only if all Field usages were converted
-  if (anyFieldRemoved) {
-    const stillUsesField =
-      source.find(j.JSXOpeningElement, {
-        name: { name: fieldLocalName },
-      }).length > 0
-
-    if (!stillUsesField) {
-      const fieldImports = source.find(j.ImportDeclaration, {
-        source: { value: "@planningcenter/tapestry-react" },
-      })
-      for (let i = 0; i < fieldImports.length; i++) {
-        removeImportFromDeclaration(fieldImports.at(i), "Field")
-      }
-    }
-  }
-
-  return hasChanges ? source.toSource() : null
-}
-
-export default transform
+export default mergeFieldFactory({
+  condition: transformableInput,
+  targetComponent: "Input",
+})

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

@@ -195,7 +195,7 @@ describe("removeDuplicateKeys transform", () => {
         export function TestComponent() {
           return (
             <form>
-              <Input type="submit" kind="primary" type="button">Submit</Input>
+              <Input type="email" kind="primary" type="text">Submit</Input>
               <Input disabled loading disabled>Loading</Input>
               <Input size="small">Small</Input>
             </form>
@@ -208,8 +208,8 @@ describe("removeDuplicateKeys transform", () => {
       expect(result).not.toBeNull()
 
       // First input: should keep first 'type'
-      expect(result).toContain('type="submit"')
-      expect(result).not.toContain('type="button"')
+      expect(result).toContain('type="email"')
+      expect(result).not.toContain('type="text"')
 
       expect(result).toContain("<Input disabled loading>")
 

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

@@ -7,12 +7,12 @@ import { attributeTransformFactory } from "../../shared/transformFactories/attri
 import { transformableInput } from "../transformableInput"
 
 const transform: Transform = attributeTransformFactory({
-  condition: (element, context) =>
-    transformableInput(element, context) &&
+  condition: (element) =>
+    transformableInput(element) &&
     orConditions(
       hasAttributeValue("type", "input"),
       hasAttributeValue("type", "text")
-    )(element, context),
+    )(element),
   targetComponent: "Input",
   targetPackage: "@planningcenter/tapestry-react",
   transform: (element, { j, source }) =>

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

@@ -6,9 +6,8 @@ import { attributeTransformFactory } from "../../shared/transformFactories/attri
 import { transformableInput } from "../transformableInput"
 
 const transform: Transform = attributeTransformFactory({
-  condition: (element, context) =>
-    transformableInput(element, context) &&
-    hasAttributeValue("type", "text")(element, context),
+  condition: (element) =>
+    transformableInput(element) && hasAttributeValue("type", "text")(element),
   targetComponent: "Input",
   targetPackage: "@planningcenter/tapestry-react",
   transform: (element, { j, source }) =>

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

@@ -276,7 +276,7 @@ function Test() {
       expect(result).not.toContain("TODO: tapestry-migration")
     })
 
-    it("should flag step on type='range' (not an accepted Input type)", () => {
+    it("should not transform Input with type='range' (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -286,10 +286,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (step)")
+      expect(result).toBe(input)
     })
 
-    it("should flag step on type={'range'} expression container (not an accepted Input type)", () => {
+    it("should not transform Input with type={'range'} expression container (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -299,11 +299,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (step)")
-      expect(result).toContain("TODO: tapestry-migration (type)")
+      expect(result).toBe(input)
     })
 
-    it("should be permissive with type-specific props when type is dynamic", () => {
+    it("should not transform Input with dynamic type in unsupported-types section (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -313,11 +312,10 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration (step)")
-      expect(result).not.toContain("TODO: tapestry-migration (type)")
+      expect(result).toBe(input)
     })
 
-    it("should flag accept on type='file' (not an accepted Input type)", () => {
+    it("should not transform Input with type='file' (unsupported type bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -327,7 +325,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (accept)")
+      expect(result).toBe(input)
     })
 
     it("should not flag pattern on type='text'", () => {
@@ -356,7 +354,7 @@ function Test() {
       expect(result).not.toContain("TODO: tapestry-migration")
     })
 
-    it("should not flag step when type is dynamic", () => {
+    it("should not transform Input when type prop is dynamic (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -366,7 +364,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
     })
 
     it("should flag step without a type attr", () => {
@@ -465,8 +463,10 @@ function Test() {
       "submit",
       "reset",
       "button",
-    ])("should flag type='%s' as unsupported", (type) => {
-      const input = `
+    ])(
+      "should not transform Input with type='%s' (unsupported type bails)",
+      (type) => {
+        const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
 function Test() {
@@ -474,10 +474,10 @@ function Test() {
 }
       `.trim()
 
-      const result = applyTransform(input)
-      expect(result).toContain("TODO: tapestry-migration (type)")
-      expect(result).toContain("is not a supported Input type")
-    })
+        const result = applyTransform(input)
+        expect(result).toBe(input)
+      }
+    )
 
     it("should not flag accepted type values", () => {
       const types = [
@@ -503,7 +503,7 @@ function Test() {
       }
     })
 
-    it("should not flag dynamic type values", () => {
+    it("should not transform Input when type prop is dynamic (bails)", () => {
       const input = `
 import { Input } from "@planningcenter/tapestry-react"
 
@@ -513,7 +513,7 @@ function Test() {
       `.trim()
 
       const result = applyTransform(input)
-      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
     })
   })
 

package/src/components/select/index.ts

@@ -0,0 +1,58 @@
+import { Transform } from "jscodeshift"
+
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import childrenToOptions from "./transforms/childrenToOptions"
+import convertLegacyOptions from "./transforms/convertLegacyOptions"
+import convertStyleProps from "./transforms/convertStyleProps"
+import emptyValueToPlaceholder from "./transforms/emptyValueToPlaceholder"
+import innerRefToRef from "./transforms/innerRefToRef"
+import mapChildrenToOptions from "./transforms/mapChildrenToOptions"
+import mergeFieldIntoSelect from "./transforms/mergeFieldIntoSelect"
+import mergeSelectLabel from "./transforms/mergeSelectLabel"
+import moveSelectImport from "./transforms/moveSelectImport"
+import removeDefaultProps from "./transforms/removeDefaultProps"
+import sizeMapping from "./transforms/sizeMapping"
+import skipMultipleSelect from "./transforms/skipMultipleSelect"
+import stateToInvalid from "./transforms/stateToInvalid"
+import stateToInvalidTernary from "./transforms/stateToInvalidTernary"
+import unsupportedProps from "./transforms/unsupportedProps"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms = [
+    skipMultipleSelect,
+    mergeSelectLabel,
+    mergeFieldIntoSelect,
+    auditSpreadProps,
+    mapChildrenToOptions,
+    childrenToOptions,
+    convertLegacyOptions,
+    emptyValueToPlaceholder,
+    innerRefToRef,
+    sizeMapping,
+    stateToInvalidTernary,
+    stateToInvalid,
+    removeDefaultProps,
+    convertStyleProps,
+    unsupportedProps,
+    moveSelectImport,
+  ]
+
+  for (const individualTransform of transforms) {
+    const result = individualTransform(
+      { ...fileInfo, source: currentSource },
+      api,
+      options
+    )
+    if (result && result !== currentSource) {
+      currentSource = result as string
+      hasAnyChanges = true
+    }
+  }
+
+  return hasAnyChanges ? currentSource : null
+}
+
+export default transform

package/src/components/select/transformableSelect.ts

@@ -0,0 +1,7 @@
+import { hasAttribute } from "../shared/conditions/hasAttribute"
+import { notCondition } from "../shared/conditions/notCondition"
+import { TransformCondition } from "../shared/types"
+
+export const transformableSelect: TransformCondition = notCondition(
+  hasAttribute("multiple")
+)