@planningcenter/tapestry-migration-cli 2.4.0-rc.0 → 2.4.0-rc.10

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

@@ -0,0 +1,172 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./reviewStyles"
+
+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("reviewStyles transform", () => {
+  describe("basic transformation", () => {
+    it("should add comment to Link with style attribute", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link style={{ color: "blue" }} href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain(
+        "review custom styles - Link styles may need to be updated for new design system"
+      )
+      expect(result).toContain('style={{ color: "blue" }}')
+    })
+
+    it("should handle Link with complex style object", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <Link 
+              style={{ 
+                color: "red", 
+                fontSize: "14px",
+                textDecoration: "none" 
+              }} 
+              href="/about"
+            >
+              About
+            </Link>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      expect(result).toContain('color: "red"')
+      expect(result).toContain('fontSize: "14px"')
+      expect(result).toContain('textDecoration: "none"')
+    })
+
+    it("should preserve Link without style attribute", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("multiple links", () => {
+    it("should handle mixed Link usage", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link style={{ color: "blue" }} href="/home">Home</Link>
+              <Link href="/about">About</Link>
+              <Link style={{ fontSize: "16px" }} href="/contact">Contact</Link>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      // Should have comments for both styled links
+      const commentCount = (result?.match(/TODO: tapestry-migration/g) || [])
+        .length
+      expect(commentCount).toBe(2)
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle Link with style expression", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          const linkStyles = { color: "green" }
+          return <Link style={linkStyles} href="/dynamic">Dynamic</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      expect(result).toContain("review custom styles")
+      expect(result).toContain("style={linkStyles}")
+    })
+
+    it("should not affect other components with style", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return (
+            <div>
+              <Link style={{ color: "blue" }} href="/home">Link</Link>
+              <div style={{ padding: "10px" }}>Div</div>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration")
+      // Should only have one comment (for Link, not div)
+      const commentCount = (result?.match(/TODO: tapestry-migration/g) || [])
+        .length
+      expect(commentCount).toBe(1)
+      expect(result).toContain('<div style={{ padding: "10px" }}>Div</div>')
+    })
+  })
+
+  describe("import handling", () => {
+    it("should not affect imports", () => {
+      const input = `
+        import { Link } from "@planningcenter/tapestry-react"
+
+        function Component() {
+          return <Link style={{ color: "blue" }} href="/home">Home</Link>
+        }
+      `
+
+      const result = applyTransform(input)
+
+      expect(result).toContain(
+        'import { Link } from "@planningcenter/tapestry-react"'
+      )
+    })
+  })
+})

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

@@ -0,0 +1,17 @@
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+const COMMENT = `review custom styles - Link styles may need to be updated for new design system.`
+
+export default attributeTransformFactory({
+  condition: hasAttribute("style"),
+  targetComponent: "Link",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attribute = getAttribute({ element, name: "style" })!
+    addCommentToAttribute({ attribute, j, text: COMMENT })
+    return true
+  },
+})

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

@@ -132,6 +132,20 @@ export default function Test() {
       expect(result).toContain('href="/page3"') // Should remain unchanged
     })
 
+    it("should handle target={'_blank'} format", () => {
+      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 dynamic target values", () => {
       const input = `
 import { Link } from "@planningcenter/tapestry-react"

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

@@ -0,0 +1,265 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./unsupportedProps"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("Link unsupportedProps transform", () => {
+  describe("basic transformations", () => {
+    it("should add comment to Link with unsupported 'css' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" css={{ color: "red" }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("'css' is not supported")
+      expect(result).toContain("Use 'className' prop with CSS classes")
+      expect(result).toContain('css={{ color: "red" }}')
+    })
+
+    it("should add comment to Link with unsupported 'disabled' prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" disabled>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+      expect(result).toContain("'disabled' is not supported")
+      expect(result).toContain("Links do not support the disabled prop")
+      expect(result).toContain("disabled")
+    })
+
+    it("should add comments to Link with multiple unsupported props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" css={{ color: "red" }} disabled truncate underline={false}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+      expect(result).toContain("TODO: tapestry-migration (truncate)")
+      expect(result).toContain("'truncate' is not supported")
+      expect(result).toContain("TODO: tapestry-migration (underline)")
+      expect(result).toContain("'underline' is not supported")
+    })
+
+    it("should add comment for hover/focus/active state props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" hover={{ color: "blue" }}>About</Link>
+}
+      `.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 mediaQueries prop", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about" mediaQueries={{ sm: { fontSize: "12px" } }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+      expect(result).toContain("use CSS media queries in a class")
+    })
+  })
+
+  describe("supported props should not be flagged", () => {
+    it("should not flag standard anchor attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      download
+      hrefLang="en"
+      type="text/html"
+      referrerPolicy="no-referrer"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag Tapestry Link props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      kind="primary"
+      size="lg"
+      external
+      prefix={<Icon />}
+      suffix={<Icon />}
+      label="About"
+      className="custom-class"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag common React/HTML props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      id="about-link"
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      role="link"
+      tabIndex={0}
+      title="Go to About page"
+      style={{ margin: 10 }}
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag aria-* attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      aria-label="About page"
+      aria-describedby="desc"
+      aria-hidden={false}
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not flag data-* attributes", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Link 
+      href="/about"
+      data-testid="about-link"
+      data-tracking="nav-about"
+    >
+      About
+    </Link>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle Link with no unsupported props", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Link href="/about">About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should not transform Link from other packages", () => {
+      const input = `
+import { Link } from "react-router-dom"
+
+export default function Test() {
+  return <Link to="/about" css={{ color: "red" }}>About</Link>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toBeNull()
+    })
+
+    it("should handle multiple Link components", () => {
+      const input = `
+import { Link } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/about" css={{ color: "red" }}>About</Link>
+      <Link href="/contact" disabled>Contact</Link>
+    </div>
+  )
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("TODO: tapestry-migration (css)")
+      expect(result).toContain("TODO: tapestry-migration (disabled)")
+    })
+  })
+})

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/conditions/hasAttributeValue.test.ts

@@ -32,7 +32,28 @@ describe("hasAttributeValue", () => {
     expect(condition(element)).toBe(false)
   })
 
-  it("should return false for expression values", () => {
+  it("should return true for expression with string literal", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(" target={'_blank'}")
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return true for expression with double quotes", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(' target={"_blank"}')
+
+    expect(condition(element)).toBe(true)
+  })
+
+  it("should return false for expression with different value", () => {
+    const condition = hasAttributeValue("target", "_blank")
+    const element = createJSXElement(" target={'_self'}")
+
+    expect(condition(element)).toBe(false)
+  })
+
+  it("should return false for complex expression values", () => {
     const condition = hasAttributeValue("onClick", "handleClick")
     const element = createJSXElement(" onClick={handleClick}")
 

package/src/components/shared/conditions/hasAttributeValue.ts

@@ -4,6 +4,7 @@ import { TransformCondition } from "../types"
 
 /**
  * Helper function to create a condition that checks for an attribute with a specific value
+ * Handles both string literals and expressions with string literals
  */
 export function hasAttributeValue(
   attributeName: string,
@@ -11,13 +12,30 @@ export function hasAttributeValue(
 ): TransformCondition {
   return (element: JSXElement) => {
     const attributes = element.openingElement.attributes || []
-    return attributes.some(
-      (attr) =>
+    return attributes.some((attr) => {
+      const hasAttribute =
         attr.type === "JSXAttribute" &&
         attr.name?.type === "JSXIdentifier" &&
-        attr.name.name === attributeName &&
-        attr.value?.type === "StringLiteral" &&
-        attr.value.value === value
-    )
+        attr.name.name === attributeName
+
+      if (!hasAttribute) {
+        return false
+      }
+
+      // Handle string literal: attribute="value"
+      if (attr.value?.type === "StringLiteral") {
+        return attr.value.value === value
+      }
+
+      // Handle expression: attribute={"value"} or attribute={'value'}
+      if (attr.value?.type === "JSXExpressionContainer") {
+        const { expression } = attr.value
+        if (expression.type === "StringLiteral") {
+          return expression.value === value
+        }
+      }
+
+      return false
+    })
   }
 }

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

@@ -0,0 +1,43 @@
+import { JSXElement } from "jscodeshift"
+
+export function extractTextContent(
+  children: NonNullable<JSXElement["children"]>
+): {
+  isSimpleText: boolean
+  textContent: string
+} {
+  let textContent = ""
+
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      const text = child.value.trim()
+      if (text) textContent += text
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "StringLiteral"
+    ) {
+      textContent += child.expression.value
+    } else if (
+      child.type === "JSXExpressionContainer" &&
+      child.expression.type === "TemplateLiteral" &&
+      child.expression.expressions.length === 0
+    ) {
+      textContent += child.expression.quasis[0].value.raw
+    } else {
+      return { isSimpleText: false, textContent: "" }
+    }
+  }
+
+  return { isSimpleText: true, textContent }
+}
+
+export function buildComment(
+  message: string,
+  includeIconGuidance: boolean
+): string {
+  const baseMessage = `${message} - take time to find the right text for the component.`
+  if (includeIconGuidance) {
+    return `${baseMessage} If icons are used in the component, you can use prefix and suffix to correctly display those icons.`
+  }
+  return baseMessage
+}

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,
+]