@planningcenter/tapestry-migration-cli 2.4.0-rc.1 → 2.4.0-rc.11

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

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) ||
@@ -319,7 +320,10 @@ export function stylePropTransformFactory(config: {
         styles = { ...styles, ...directStyleProps }
         if (options.verbose) console.log("Final generated styles:", styles)
 
-        applyStylesToComponent({ element, j, styles })
+        // Only apply styles if there are actual CSS properties to add
+        if (Object.keys(styles).length > 0) {
+          applyStylesToComponent({ element, j, styles })
+        }
       } catch (error) {
         console.log("Error processing style props:", error)
         console.log("Style props that caused error:", allStyleProps)

package/src/stubs/textPlugin.ts

@@ -0,0 +1,45 @@
+// copied from packages/tapestry-react/src/Text/Text.tsx in tapestry-react
+// size prop is not included since it is a supported prop in tapestry link
+
+export const textPlugin = {
+  getStyles({
+    align,
+    italic,
+    truncate,
+    underline,
+    weight,
+    wrap = true,
+    ...styles
+  }: Record<string, unknown>) {
+    if (align) {
+      styles.textAlign = align
+    }
+
+    if (italic) {
+      styles.fontStyle = "italic"
+    }
+
+    if (truncate) {
+      if (styles.display !== "block" && styles.display !== "flex") {
+        styles.display = "block"
+      }
+      styles.overflow = "hidden"
+      styles.textOverflow = "ellipsis"
+    }
+
+    if (truncate || wrap === false) {
+      styles.whiteSpace = "nowrap"
+    }
+
+    if (underline) {
+      styles.textDecoration = underline
+    }
+
+    if (weight) {
+      styles.fontWeight = weight
+    }
+
+    return styles
+  },
+  styleProps: ["align", "italic", "truncate", "underline", "weight", "wrap"],
+}