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

package/dist/tapestry-react-shim.cjs

@@ -3084,8 +3084,8 @@ const tokens = {
   "--t-fill-color-transparency-dark-070": "hsla(0, 0%, 0%, 0.7)",
   "--t-fill-color-transparency-dark-080": "hsla(0, 0%, 0%, 0.8)",
   "--t-fill-color-transparency-dark-090": "hsla(0, 0%, 0%, 0.9)",
-  "--t-surface-color-canvas": "hsl(0, 0%, 98%)",
   "--t-surface-color-card": "hsl(0, 0%, 100%)",
+  "--t-surface-color-canvas": "hsl(0, 0%, 100%)",
   "--t-border-color-default-base": "hsl(0, 0%, 88%)",
   "--t-border-color-default-dark": "hsl(0, 0%, 81%)",
   "--t-border-color-default-darker": "hsl(0, 0%, 68%)",
@@ -3124,6 +3124,7 @@ const tokens = {
   "--t-form-font-color-disabled": "hsl(0, 0%, 81%)",
   "--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%)"
 };
 function token(varName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.3.0-rc.8",
+  "version": "2.3.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fd77bfbbe8d0562720aaee1ae3e9210d81af8db2"
+  "gitHead": "5645e6618bcb6253064988fabea2efa6b3a52669"
 }

package/src/components/button/transforms/convertStyleProps.test.ts

@@ -110,9 +110,9 @@ describe("convertStyleProps transform", () => {
 
       const result = applyTransform(source)
 
-      expect(result).not.toContain('height="40px"')
+      expect(result).not.toContain('<Button height="40px"')
       expect(result).toContain(
-        'TODO: tapestry-migration (height): height has been removed as this is covered by default styling: height: "40px"'
+        'TODO: tapestry-migration (styleProp): height has been removed as this is covered by default styling: height="40px"'
       )
       expect(result).toContain('kind="primary"')
     })
@@ -128,7 +128,7 @@ describe("convertStyleProps transform", () => {
 
       const result = applyTransform(source)
 
-      expect(result).not.toContain("height={buttonHeight}")
+      expect(result).not.toContain("<Button height={buttonHeight}")
       expect(result).toContain("TODO: tapestry-migration")
       expect(result).toContain("buttonHeight")
       expect(result).toContain("disabled")
@@ -219,10 +219,9 @@ describe("convertStyleProps transform", () => {
       expect(result).toContain('marginLeft: "128px"')
       expect(result).toContain("}}>")
       expect(result).toContain(
-        'TODO: tapestry-migration (height): height has been removed as this is covered by default styling: height: "40px"'
+        'TODO: tapestry-migration (styleProp): height has been removed as this is covered by default styling: height="40px"'
       )
       expect(result).not.toContain("marginLeft={16}")
-      expect(result).not.toContain('height="40px"')
       expect(result).not.toContain('distribution="center"')
       expect(result).not.toContain('paddingTop="8px"')
       expect(result).toContain('kind="primary"')

package/src/components/link/index.ts

@@ -0,0 +1,32 @@
+import { Transform } from "jscodeshift"
+
+import inlineToKind from "./transforms/inlineToKind"
+import targetBlankToExternal from "./transforms/targetBlankToExternal"
+import toToHref from "./transforms/toToHref"
+
+const transform: Transform = (fileInfo, api, options) => {
+  let currentSource = fileInfo.source
+  let hasAnyChanges = false
+
+  const transforms: Transform[] = [
+    inlineToKind,
+    toToHref,
+    targetBlankToExternal,
+  ]
+
+  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/link/transforms/inlineToKind.test.ts

@@ -0,0 +1,308 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./inlineToKind"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("inlineToKind transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link.Inline to Link with kind='inline-text'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline href="/profile">Profile</Link.Inline>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/profile" kind="inline-text">Profile</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should preserve all existing props when transforming Link.Inline", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link.Inline 
+      href="/dashboard" 
+      className="nav-link" 
+      target="_blank"
+      rel="noopener"
+      data-testid="profile-link"
+    >
+      Dashboard
+    </Link.Inline>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain('href="/dashboard"')
+      expect(result).toContain('className="nav-link"')
+      expect(result).toContain('target="_blank"')
+      expect(result).toContain('rel="noopener"')
+      expect(result).toContain('data-testid="profile-link"')
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<Link")
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle self-closing Link.Inline tags", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link.Inline href="/dashboard" />
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/dashboard" kind="inline-text" />;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should handle multiple Link.Inline components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link.Inline href="/home">Home</Link.Inline>
+      <Link.Inline href="/about">About</Link.Inline>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/home" kind="inline-text">Home</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">About</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should only transform Link.Inline and leave regular Link unchanged", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <nav>
+      <Link href="/home">Home</Link>
+      <Link.Inline href="/profile">Profile</Link.Inline>
+      <Link as="button" href="/dashboard">Dashboard</Link>
+    </nav>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('<Link href="/home">Home</Link>')
+      expect(result).toContain(
+        '<Link href="/profile" kind="inline-text">Profile</Link>'
+      )
+      expect(result).toContain(
+        '<Link as="button" href="/dashboard">Dashboard</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle aliased Link import", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink.Inline href="/profile">Profile</TapestryLink.Inline>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<TapestryLink href="/profile" kind="inline-text">Profile</TapestryLink>'
+      )
+      expect(result).not.toContain("TapestryLink.Inline")
+    })
+
+    it("should handle complex JSX expressions", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ items, showInline }) {
+  return (
+    <div>
+      {items.map(item => (
+        <Link.Inline key={item.id} href={item.url}>{item.name}</Link.Inline>
+      ))}
+      {showInline && <Link.Inline href="/conditional">Conditional</Link.Inline>}
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link key={item.id} href={item.url} kind="inline-text">{item.name}</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/conditional" kind="inline-text">Conditional</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not transform if Link is not imported from tapestry-react", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link.Inline to="/profile">Profile</Link.Inline>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null) // No changes needed
+    })
+
+    it("should handle Link.Inline with dynamic props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test({ url, isExternal }) {
+  return (
+    <Link.Inline 
+      href={url} 
+      target={isExternal ? "_blank" : "_self"}
+      className={\`link-\${isExternal ? 'external' : 'internal'}\`}
+    >
+      Dynamic Link
+    </Link.Inline>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('kind="inline-text"')
+      expect(result).toContain("<Link")
+      expect(result).toContain("href={url}")
+      expect(result).toContain('target={isExternal ? "_blank" : "_self"}')
+      expect(result).toContain(
+        "className={`link-${isExternal ? 'external' : 'internal'}`}"
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+
+    it("should handle nested Link.Inline components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <p>
+        Visit our <Link.Inline href="/about">about page</Link.Inline> for more info.
+      </p>
+      <span>
+        Or check the <Link.Inline href="/help">help section</Link.Inline>.
+      </span>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        '<Link href="/about" kind="inline-text">about page</Link>'
+      )
+      expect(result).toContain(
+        '<Link href="/help" kind="inline-text">help section</Link>'
+      )
+      expect(result).not.toContain("Link.Inline")
+    })
+  })
+
+  describe("no changes scenarios", () => {
+    it("should return null when no Link.Inline components exist", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/home">Home</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null when no tapestry-react imports exist", () => {
+      const input = `
+import React from "react"
+
+export default function Test() {
+  return <div>No Links here</div>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+
+    it("should return null for empty file", () => {
+      const result = applyTransform("")
+      expect(result).toBe(null)
+    })
+
+    it("should return null when Link is imported but no Link.Inline used", () => {
+      const input = `
+import { Link, Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/home">Home</Link>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBe(null)
+    })
+  })
+})

package/src/components/link/transforms/inlineToKind.ts

@@ -0,0 +1,51 @@
+import { Transform } from "jscodeshift"
+
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
+
+// Step 1: Add kind="inline-text" attribute to Link.Inline elements
+const addKindAttribute = attributeTransformFactory({
+  condition: () => true, // Add to all Link.Inline elements
+  targetComponent: "Link.Inline",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    addAttribute({
+      element,
+      j,
+      name: "kind",
+      value: "inline-text",
+    })
+    return true
+  },
+})
+
+// Step 2: Transform Link.Inline to Link (preserving original component name)
+const transformComponent = componentTransformFactory({
+  condition: () => true, // Transform all Link.Inline elements
+  fromComponent: "Link.Inline",
+  fromPackage: "@planningcenter/tapestry-react",
+  toComponent: "Link",
+  toPackage: "@planningcenter/tapestry-react",
+})
+
+// Combined transform that runs both steps
+const transform: Transform = (fileInfo, api, options) => {
+  // Step 1: Add kind attribute to Link.Inline elements
+  const result1 = addKindAttribute(fileInfo, api, options)
+
+  if (!result1) {
+    return null
+  }
+
+  // Step 2: Transform Link.Inline to Link
+  const result2 = transformComponent(
+    { ...fileInfo, source: result1 as string },
+    api,
+    options
+  )
+
+  return result2 || result1
+}
+
+export default transform

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

@@ -0,0 +1,191 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import targetBlankToExternal from "./targetBlankToExternal"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  return targetBlankToExternal(
+    { path: "test.tsx", source },
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("targetBlankToExternal transform", () => {
+  describe("basic transformations", () => {
+    it("should transform Link with target='_blank' to external", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const expected = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" external>External Link</Link>;
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result?.trim()).toBe(expected)
+    })
+
+    it("should remove target and rel attributes while adding external", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/external" 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className="external-link"
+    >
+      External Link
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).toContain('className="external-link"')
+      expect(result).not.toContain('target="_blank"')
+      expect(result).not.toContain('rel="noopener noreferrer"')
+    })
+
+    it("should only transform Links with target='_blank'", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/internal" target="_self">Internal Link</Link>
+      <Link href="/external" target="_blank">External Link</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain('target="_self"') // Should remain
+      expect(result).toContain("external") // Should be added
+      expect(result).not.toContain('target="_blank"') // Should be removed
+    })
+
+    it("should handle Links without rel attribute", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+
+    it("should handle Links with only rel attribute (no target)", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/internal" rel="noopener">Internal Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made, transform returns null
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/page1" target="_blank">Page 1</Link>
+      <Link href="/page2" target="_blank" rel="noopener">Page 2</Link>
+      <Link href="/page3">Page 3</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external") // Should appear twice
+      expect(result).not.toContain('target="_blank"')
+      expect(result).not.toContain('rel="noopener"')
+      expect(result).toContain('href="/page3"') // Should remain unchanged
+    })
+
+    it("should handle dynamic target values", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target={isExternal ? "_blank" : "_self"}>Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made for dynamic values
+    })
+
+    it("should handle self-closing Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/external" target="_blank" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only transform when Link is imported from correct package", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/external" target="_blank">External Link</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull() // No changes should be made
+    })
+
+    it("should handle aliased imports", () => {
+      const input = `
+import { Link as TapestryLink } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <TapestryLink href="/external" target="_blank">External Link</TapestryLink>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("external")
+      expect(result).not.toContain('target="_blank"')
+    })
+  })
+})

package/src/components/link/transforms/targetBlankToExternal.ts

@@ -0,0 +1,30 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { hasAttributeValue } from "../../shared/conditions/hasAttributeValue"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const transform = attributeTransformFactory({
+  condition: hasAttributeValue("target", "_blank"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j, source }) => {
+    // Remove target attribute
+    removeAttribute("target", { element, j, source })
+
+    // Remove rel attribute if it exists
+    removeAttribute("rel", { element, j, source })
+
+    // Add external attribute as shorthand boolean
+    addAttribute({
+      booleanAsShorthand: true,
+      element,
+      j,
+      name: "external",
+      value: true, // This will create just "external" not "external={true}"
+    })
+
+    return true
+  },
+})
+
+export default transform