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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.0.0-rc.8",
+  "version": "3.0.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Planning Center",
   "license": "MIT",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "commander": "^11.0.0",
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
+    "@planningcenter/tapestry": "^3.0.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -51,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "146786a4a3e8e70db7030824e97c8472fbc977fb"
+  "gitHead": "1168860ff16c9ebb3429e377890b2df78deeee2f"
 }

package/src/components/button/transforms/auditSpreadProps.ts

@@ -1,24 +1,10 @@
 import { Transform } from "jscodeshift"
 
-import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
-import { getSpreadProps } from "../../shared/actions/getSpreadProps"
-import { hasSpreadProps } from "../../shared/actions/hasSpreadProps"
-import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
 
-const COMMENT =
-  "Spread props can contain unsupported props, please explore usages and migrate as needed."
-
-const transform: Transform = attributeTransformFactory({
-  condition: hasSpreadProps,
+const transform: Transform = commentOnSpreadPropsFactory({
   targetComponent: "Button",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j }) => {
-    const spreadProps = getSpreadProps(element)
-    spreadProps.forEach((prop) =>
-      addCommentToAttribute({ attribute: prop, j, text: COMMENT })
-    )
-    return spreadProps.length > 0
-  },
 })
 
 export default transform

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

@@ -253,7 +253,7 @@ describe("themeVariantToKind", () => {
       expect(result).toContain(
         "TODO: tapestry-migration (theme/variant): cannot be converted"
       )
-      expect(result).toContain('{"primary"}')
+      expect(result).toContain('theme="primary"')
     })
   })
 

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

@@ -311,10 +311,12 @@ export default function Test({ items }) {
 }
       `.trim()
 
-      const result = applyTransform(input)
+      const result = applyTransform(input)!
 
-      expect(result).toContain(
-        "<Tooltip key={item.id} {...`Save ${item.name}`}"
+      expect(result).toContain("<Tooltip")
+      expect(result).toContain("key={item.id}")
+      expect(result.replace(/\s+/g, " ")).toContain(
+        "{...{ title: `Save ${item.name}` }}"
       )
       expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button onClick={() => save(item)}>")

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

@@ -0,0 +1,305 @@
+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", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button css={{ color: 'red' }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (css): 'css' is not supported, please migrate as needed."
+      )
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should add comment for custom unsupported prop", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button customProp="value" label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain(
+        "/* TODO: tapestry-migration (customProp): 'customProp' is not supported, please migrate as needed."
+      )
+      expect(result).toContain('customProp="value"')
+    })
+
+    it("should add comments for multiple unsupported props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Button 
+      css={{ color: 'red' }}
+      ref={ref}
+      customProp="value"
+      label="Test" 
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+    })
+
+    it("should add comment for mediaQueries prop with custom message", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button mediaQueries={{ sm: { fontSize: "12px" } }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (mediaQueries):")
+      expect(result).toContain("use CSS media queries in a class")
+    })
+
+    it("should add comment for hover prop with custom message", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button hover={{ color: "blue" }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (hover):")
+      expect(result).toContain("State-based styles (hover, focus, active)")
+    })
+
+    it("should add comment for focus prop with custom message", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button focus={{ outline: "none" }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (focus):")
+      expect(result).toContain("State-based styles (hover, focus, active)")
+    })
+
+    it("should add comment for active prop with custom message", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button active={{ opacity: 0.8 }} label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (active):")
+      expect(result).toContain("State-based styles (hover, focus, active)")
+    })
+  })
+
+  describe("supported props", () => {
+    it("should not add comments for supported button props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  const ref = React.useRef()
+  return (
+    <Button 
+      disabled
+      fullWidth
+      loading
+      loadingAriaLabel="Loading"
+      name="submit"
+      type="button"
+      icon={<Icon />}
+      ref={ref}
+      label="Test"
+      kind="primary"
+      size="lg"
+      prefix={<Icon />}
+      suffix={<Icon />}
+      onClick={() => {}}
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("disabled")
+      expect(result).toContain("fullWidth")
+      expect(result).toContain("loading")
+      expect(result).toContain('loadingAriaLabel="Loading"')
+      expect(result).toContain('name="submit"')
+      expect(result).toContain('type="button"')
+      expect(result).toContain("icon={<Icon />}")
+      expect(result).toContain("ref={ref}")
+      expect(result).toContain('label="Test"')
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain('size="lg"')
+    })
+
+    it("should not add comments for common props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Button 
+      className="test"
+      id="button"
+      key="key"
+      style={{ color: 'red' }}
+      tabIndex={0}
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('className="test"')
+      expect(result).toContain('id="button"')
+      expect(result).toContain('key="key"')
+      expect(result).toContain("style={{ color: 'red' }}")
+      expect(result).toContain("tabIndex={0}")
+    })
+
+    it("should not add comments for aria props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Button 
+      aria-label="Test button"
+      aria-describedby="description"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('aria-label="Test button"')
+      expect(result).toContain('aria-describedby="description"')
+    })
+
+    it("should not add comments for data props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Button 
+      data-testid="button"
+      data-cy="test-button"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain('data-testid="button"')
+      expect(result).toContain('data-cy="test-button"')
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should not affect button without unsupported props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return <Button label="Test" />
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toBe(input)
+    })
+
+    it("should not affect other components", () => {
+      const input = `
+import { Button, Link } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <div>
+      <Link css={{ color: 'red' }}>Click me</Link>
+      <Button label="Test" />
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).not.toContain("TODO: tapestry-migration")
+      expect(result).toContain("css={{ color: 'red' }}")
+    })
+
+    it("should handle mixed supported and unsupported props", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+function Test() {
+  return (
+    <Button 
+      disabled
+      css={{ color: 'red' }}
+      loading
+      customProp="value"
+      label="Test"
+    />
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("/* TODO: tapestry-migration (css):")
+      expect(result).toContain("/* TODO: tapestry-migration (customProp):")
+      expect(result).not.toContain("TODO: tapestry-migration.*disabled")
+      expect(result).not.toContain("TODO: tapestry-migration.*loading")
+      expect(result).not.toContain("TODO: tapestry-migration.*label")
+      expect(result).toContain("disabled")
+      expect(result).toContain("loading")
+      expect(result).toContain('label="Test"')
+    })
+  })
+})

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

@@ -1,7 +1,7 @@
 import { JSXAttribute, Transform } from "jscodeshift"
 
 import { addCommentToUnsupportedProps } from "../../shared/actions/addCommentToUnsupportedProps"
-import { SUPPORTED_PROPS_BASE } from "../../shared/helpers/unsupportedPropsHelpers"
+import { BUTTON_LINK_SUPPORTED_PROPS } from "../../shared/helpers/unsupportedPropsHelpers"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
 const BUTTON_SPECIFIC_PROPS = [
@@ -14,7 +14,10 @@ const BUTTON_SPECIFIC_PROPS = [
   "icon",
 ]
 
-const SUPPORTED_PROPS = [...SUPPORTED_PROPS_BASE, ...BUTTON_SPECIFIC_PROPS]
+const SUPPORTED_PROPS = [
+  ...BUTTON_LINK_SUPPORTED_PROPS,
+  ...BUTTON_SPECIFIC_PROPS,
+]
 
 const transform: Transform = attributeTransformFactory({
   targetComponent: "Button",

package/src/components/checkbox/index.ts

@@ -1,5 +1,6 @@
 import { Transform } from "jscodeshift"
 
+import auditSpreadProps from "./transforms/auditSpreadProps"
 import childrenToLabel from "./transforms/childrenToLabel"
 import convertStyleProps from "./transforms/convertStyleProps"
 import innerRefToRef from "./transforms/innerRefToRef"
@@ -12,6 +13,7 @@ const transform: Transform = (fileInfo, api, options) => {
   let hasAnyChanges = false
 
   const transforms = [
+    auditSpreadProps,
     childrenToLabel,
     sizeMapping,
     innerRefToRef,