@planningcenter/tapestry-migration-cli 3.1.0-rc.8 → 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.8",
+  "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.8",
+    "@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": "51c9b65e6a3dcf646b76eb543fc81e27bca3ae16"
+  "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.test.ts

@@ -0,0 +1,212 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeTypeInput"
+
+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 = {
+    j,
+    jscodeshift: j,
+    report: () => {},
+    stats: () => {},
+  }
+  const result = transform(fileInfo, api, {})
+  return result as string | null
+}
+
+describe("removeTypeInput transform", () => {
+  describe("basic transformation", () => {
+    it("should remove type='input' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it('should remove type="input" from Input with other props', () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+    })
+
+    it("should preserve Input without type='input'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='email'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="email" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should preserve Input with type='number'", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="number" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+
+    it("should remove type='text' from Input", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).not.toContain('type="text"')
+    })
+
+    it("should remove type='text' from Input with other props", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="text" value={searchTerm} placeholder="Search" onChange={handleChange} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).not.toContain('type="text"')
+      expect(result).toContain("value={searchTerm}")
+      expect(result).toContain('placeholder="Search"')
+      expect(result).toContain("onChange={handleChange}")
+    })
+  })
+
+  describe("multiple inputs", () => {
+    it("should handle mixed Input usage", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <Input type="text" />
+              <Input type="email" />
+              <Input type="input" onChange={handleChange} />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain('<Input type="email" />')
+      expect(result).toContain("<Input onChange={handleChange} />")
+      expect(result).not.toContain('type="input"')
+      expect(result).not.toContain('type="text"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect HTML input elements", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Input type="input" />
+              <input type="input" />
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Input />")
+      expect(result).toContain('<input type="input" />')
+    })
+
+    it("should handle expression syntax type={'input'}", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type={"input"} />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      if (result) {
+        expect(result).toContain("<Input />")
+        expect(result).not.toContain('type={"input"}')
+      } else {
+        expect(input).toContain('type={"input"}')
+      }
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Input } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Input type="input" />
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Input } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,22 @@
+import { Transform } from "jscodeshift"
+
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { orConditions } from "../../shared/conditions/orConditions"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { transformableInput } from "../transformableInput"
+
+const transform: Transform = attributeTransformFactory({
+  condition: (element) =>
+    transformableInput(element) &&
+    orConditions(
+      hasAttributeValue("type", "input"),
+      hasAttributeValue("type", "text")
+    )(element),
+  targetComponent: "Input",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) =>
+    removeAttribute("type", { element, j, source }),
+})
+
+export default transform

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 }) =>