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

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

@@ -0,0 +1,58 @@
+import { JSXAttribute, Transform } from "jscodeshift"
+
+import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
+import { SUPPORTED_PROPS_BASE } from "../../shared/helpers/unsupportedPropsHelpers"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+// Note: 'target' and 'rel' are NOT included because they are handled by targetBlankToExternal transform
+const LINK_SPECIFIC_PROPS = [
+  "download",
+  "external",
+  "href",
+  "hrefLang",
+  "media",
+  "ping",
+  "referrerPolicy",
+  "type",
+]
+
+const SUPPORTED_PROPS = [...SUPPORTED_PROPS_BASE, ...LINK_SPECIFIC_PROPS]
+
+const transform: Transform = attributeTransformFactory({
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const UNSUPPORTED_PROPS = (element.openingElement.attributes || [])
+      .filter(
+        (attr) =>
+          attr.type === "JSXAttribute" &&
+          !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 * Use 'className' prop with CSS classes instead of the css prop.\n"
+        }
+        if (prop === "disabled") {
+          return "\n * Links do not support the disabled prop. Consider using a button, hiding the link, or using CSS to style it as disabled.\n"
+        }
+        if (prop === "mediaQueries") {
+          return "\n * It is recommended to use CSS media queries in a class that you apply to the component.\n"
+        }
+        if (prop === "hover" || prop === "focus" || prop === "active") {
+          return "\n * State-based styles (hover, focus, active) should be handled with CSS class selectors.\n"
+        }
+        return ""
+      },
+      props: UNSUPPORTED_PROPS,
+    })
+  },
+})
+
+export default transform

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

@@ -0,0 +1,35 @@
+import { stylePropNames } from "../../../../dist/tapestry-react-shim.cjs"
+
+export const STYLE_PROP_NAMES_WITHOUT_CSS = stylePropNames.filter(
+  (prop: string) => prop !== "css"
+)
+
+export const COMMON_PROPS = [
+  "className",
+  "id",
+  "key",
+  "kind",
+  "label",
+  "onBlur",
+  "onFocus",
+  "onClick",
+  "onKeyDown",
+  "onKeyUp",
+  "onMouseDown",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "prefix",
+  "ref",
+  "role",
+  "size",
+  "style",
+  "suffix",
+  "tabIndex",
+  "title",
+]
+
+export const SUPPORTED_PROPS_BASE = [
+  ...STYLE_PROP_NAMES_WITHOUT_CSS,
+  ...COMMON_PROPS,
+]

package/src/components/shared/transformFactories/stylePropTransformFactory.ts

@@ -251,6 +251,7 @@ export function stylePropTransformFactory(config: {
       const name = attr.name?.name as string
       return (
         name &&
+        name !== "css" &&
         (stylePropNames.includes(name) ||
           name in stylePropMapping ||
           stylesToKeep.includes(name) ||

package/src/index.ts

@@ -15,9 +15,15 @@ const COMPONENTS = ["button", "link"]
 program
   .command("run")
   .description("Run a migration of a component from Tapestry React to Tapestry")
-  .argument("<component-name>", "The name of the component to migrate")
-  .option("-f, --fix", "Write the changes")
-  .requiredOption("-p, --path <path>", "The path to the folder/file to migrate")
+  .argument(
+    "<component-name>",
+    "The name of the component to migrate (button, link)"
+  )
+  .requiredOption(
+    "-p, --path <path>",
+    "REQUIRED: The path to the folder/file to migrate"
+  )
+  .option("-f, --fix", "Write the changes to files (default: dry run)")
   .option("-v, --verbose", "Verbose output")
   .option(
     "-j, --js-theme <path>",
@@ -29,16 +35,21 @@ program
     "MIGRATION_REPORT.md"
   )
   .action((componentName, options) => {
-    console.log("Hello from Tapestry Migration CLI! 🎨")
-    console.log(`Component: ${componentName}`)
     const key = componentName.toLowerCase()
 
     if (COMPONENTS.includes(key)) {
+      console.log(`🎨 Migrating ${componentName} components...`)
+      console.log(`📁 Target: ${options.path}`)
+      console.log(
+        `🔧 Mode: ${options.fix ? "Apply changes" : "Dry run (preview only)"}`
+      )
       runTransforms(key, options)
     } else {
-      console.log(
-        `Invalid component name: ${componentName}. Valid components are: ${COMPONENTS.join(", ")}`
+      console.error(`❌ Invalid component: "${componentName}"`)
+      console.error(
+        `✅ Available components: ${COMPONENTS.map((c) => c.charAt(0).toUpperCase() + c.slice(1)).join(", ")}`
       )
+      process.exit(1)
     }
   })
 

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

@@ -1,426 +0,0 @@
-import jscodeshift from "jscodeshift"
-import { describe, expect, it } from "vitest"
-
-import transform from "./linkToButton"
-
-const j = jscodeshift.withParser("tsx")
-
-// Helper to run transform and get result
-function runTransform(input: string): string | null {
-  const fileInfo = { path: "test.tsx", source: input }
-  const api = {
-    j,
-    jscodeshift: j,
-    report: () => {},
-    stats: () => {},
-  }
-  const result = transform(fileInfo, api, {})
-  return result as string | null
-}
-
-describe("linkToButton transform", () => {
-  describe("basic transformation", () => {
-    it("should transform Link with onClick to Button", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick}>Click me</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Click me</Button>"
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should preserve Link without onClick", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test">Go to test</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should handle mixed Link usage", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Click me</Link>
-              <Link href="/home">Home</Link>
-              <Link onClick={handleOther}>Other action</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Click me</Button>"
-      )
-      expect(result).toContain('<Link href="/home">Home</Link>')
-      expect(result).toContain(
-        "<Button onClick={handleOther}>Other action</Button>"
-      )
-      expect(result).toContain(
-        'import { Link, Button } from "@planningcenter/tapestry-react"'
-      )
-    })
-  })
-
-  describe("import management", () => {
-    it("should remove Link import when no longer used", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick}>Button</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should keep Link import when still used", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Button</Link>
-              <Link href="/test">Link</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Link, Button } from "@planningcenter/tapestry-react"'
-      )
-    })
-
-    it("should add Button to existing imports", () => {
-      const input = `
-        import { Link, Input } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Input />
-              <Link onClick={handleClick}>Button</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        'import { Input, Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle existing Button import", () => {
-      const input = `
-        import { Link, Button } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div>
-              <Button type="submit">Submit</Button>
-              <Link onClick={handleClick}>Clickable</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain('<Button type="submit">Submit</Button>')
-      expect(result).toContain(
-        "<Button onClick={handleClick}>Clickable</Button>"
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-  })
-
-  describe("component attributes", () => {
-    it("should preserve all attributes", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <Link
-              onClick={handleClick}
-              className="link-button"
-              disabled
-              data-testid="clickable-link"
-              role="button"
-            >
-              Click me
-            </Link>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("onClick={handleClick}")
-      expect(result).toContain('className="link-button"')
-      expect(result).toContain("disabled")
-      expect(result).toContain('data-testid="clickable-link"')
-      expect(result).toContain('role="button"')
-      expect(result).toContain("<Button")
-      expect(result).toContain("</Button>")
-    })
-
-    it("should handle self-closing tags", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={handleClick} />
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick} />")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle complex onClick expressions", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link onClick={() => handleAction(id, 'delete')}>Delete</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("onClick={() => handleAction(id, 'delete')}")
-      expect(result).toContain("<Button")
-      expect(result).toContain("Delete</Button>")
-    })
-  })
-
-  describe("edge cases", () => {
-    it("should return null when no Link imported from tapestry-react", () => {
-      const input = `
-        import { Link } from "react-router-dom"
-
-        function Component() {
-          return <Link onClick={handleClick}>Button</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should return null when no Link with onClick found", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test">Go to test</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-
-    it("should handle aliased Link import", () => {
-      const input = `
-        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("TapestryLink")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle nested JSX structures", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return (
-            <div className="container">
-              <Link onClick={handleDelete}>
-                <span className="icon">🗑️</span>
-                <span>Delete</span>
-              </Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleDelete}>")
-      expect(result).toContain('<span className="icon">🗑️</span>')
-      expect(result).toContain("<span>Delete</span>")
-      expect(result).toContain("</Button>")
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle multiple onClick links in same component", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Actions() {
-          return (
-            <div>
-              <Link onClick={handleSave}>Save</Link>
-              <Link onClick={handleCancel}>Cancel</Link>
-              <Link onClick={handleDelete}>Delete</Link>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleSave}>Save</Button>")
-      expect(result).toContain("<Button onClick={handleCancel}>Cancel</Button>")
-      expect(result).toContain("<Button onClick={handleDelete}>Delete</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("Link")
-    })
-
-    it("should handle Link with both href and onClick (should transform)", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test" onClick={handleClick}>Link with both</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      // Should transform because it has onClick (href is ignored for this transform)
-      expect(result).toContain(
-        '<Button href="/test" onClick={handleClick}>Link with both</Button>'
-      )
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("import { Link }")
-      expect(result).not.toContain("<Link")
-    })
-
-    it("should not transform Link without onClick even if it has other handlers", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <Link href="/test" onMouseOver={handleHover}>Hover me</Link>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toBeNull()
-    })
-  })
-
-  describe("conflict resolution", () => {
-    it("should use TRButton alias when Button conflicts with existing import", () => {
-      const input = `
-        import { Link } from "@planningcenter/tapestry-react"
-        import { Button } from "other-ui-lib"
-
-        function Component() {
-          return (
-            <div>
-              <Link onClick={handleClick}>Tapestry Button</Link>
-              <Button variant="primary">Other Button</Button>
-            </div>
-          )
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain(
-        "<TRButton onClick={handleClick}>Tapestry Button</TRButton>"
-      )
-      expect(result).toContain(
-        '<Button variant="primary">Other Button</Button>'
-      )
-      expect(result).toContain('import { Button } from "other-ui-lib"')
-      expect(result).toContain(
-        'import { Button as TRButton } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("import { Link }")
-    })
-  })
-
-  describe("detecting renamed import of Link", () => {
-    it("should handle renamed Link import", () => {
-      const input = `
-        import { Link as TapestryLink } from "@planningcenter/tapestry-react"
-
-        function Component() {
-          return <TapestryLink onClick={handleClick}>Button</TapestryLink>
-        }
-      `
-
-      const result = runTransform(input)
-
-      expect(result).toContain("<Button onClick={handleClick}>Button</Button>")
-      expect(result).toContain(
-        'import { Button } from "@planningcenter/tapestry-react"'
-      )
-      expect(result).not.toContain("TapestryLink")
-      expect(result).not.toContain("Link")
-    })
-  })
-})

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

@@ -1,49 +0,0 @@
-import { Transform } from "jscodeshift"
-
-import { addAttribute } from "../../shared/actions/addAttribute"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
-import { componentTransformFactory } from "../../shared/transformFactories/componentTransformFactory"
-
-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
-  },
-})
-
-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