@planningcenter/tapestry-migration-cli 2.3.0-rc.4 → 2.3.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.3.0-rc.4",
+  "version": "2.3.0-rc.6",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "844236f520256e2af5d0c01ab00eadf892dc446b"
+  "gitHead": "3fd2471ea7cb42e4fcf68d4c62bdd97c66282978"
 }

package/src/components/button/index.ts

@@ -5,6 +5,7 @@ import iconRightToSuffix from "./transforms/iconRightToSuffix"
 import linkToButton from "./transforms/linkToButton"
 import moveButtonImport from "./transforms/moveButtonImport"
 import removeToTransform from "./transforms/removeTo"
+import themeVariantToKind from "./transforms/themeVariantToKind"
 import titleToLabel from "./transforms/titleToLabel"
 import tooltipToWrapper from "./transforms/tooltipToWrapper"
 
@@ -14,10 +15,11 @@ const transform: Transform = (fileInfo, api, options) => {
 
   const transforms: Transform[] = [
     linkToButton,
-    titleToLabel,
     tooltipToWrapper,
     iconRightToSuffix,
     iconLeftToPrefix,
+    themeVariantToKind,
+    titleToLabel,
     removeToTransform,
     moveButtonImport,
   ]

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

@@ -0,0 +1,401 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./themeVariantToKind"
+
+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("themeVariantToKind", () => {
+  describe("supported theme/variant combinations", () => {
+    it("should convert primary/fill to kind primary", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="primary" variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('theme="primary"')
+      expect(result).not.toContain('variant="fill"')
+    })
+
+    it("should convert default/outline to kind secondary", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="default" variant="outline">Cancel</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="secondary"')
+      expect(result).not.toContain('theme="default"')
+      expect(result).not.toContain('variant="outline"')
+    })
+
+    it("should convert destroy/naked to kind ghost-delete", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="destroy" variant="naked">Delete</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="ghost-delete"')
+      expect(result).not.toContain('theme="destroy"')
+      expect(result).not.toContain('variant="naked"')
+    })
+
+    it("should handle error theme (alias for destroy)", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="error" variant="outline">Error</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="secondary-delete"')
+      expect(result).not.toContain('theme="error"')
+      expect(result).not.toContain('variant="outline"')
+    })
+
+    it("should handle default values when props are missing", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="primary">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('theme="primary"')
+    })
+
+    it("should handle variant only", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button variant="outline">Cancel</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="secondary"')
+      expect(result).not.toContain('variant="outline"')
+    })
+  })
+
+  describe("unsupported theme/variant combinations", () => {
+    it("should add comment for unsupported theme", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="custom" variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('theme="custom"') // in the comment
+      expect(result).toContain('variant="fill"') // in the comment
+      expect(result).not.toContain("kind=")
+      // Attributes should be removed from the element itself
+      expect(result).toContain("<Button>Save</Button>") // no attributes left
+    })
+
+    it("should add comment for unsupported variant", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="primary" variant="custom">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('theme="primary"')
+      expect(result).toContain('variant="custom"')
+      expect(result).not.toContain("kind=")
+    })
+
+    it("should add comment for unsupported theme only", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="unsupported">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('theme="unsupported"')
+      expect(result).not.toContain("kind=")
+    })
+
+    it("should add comment for unsupported variant only", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button variant="unsupported">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('variant="unsupported"')
+      expect(result).not.toContain("kind=")
+    })
+  })
+
+  describe("expression containers", () => {
+    it("should handle theme as expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme={themeValue} variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain("themeValue")
+    })
+
+    it("should handle variant as expression", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="primary" variant={variantValue}>Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain("variantValue")
+    })
+  })
+
+  describe("no matching attributes", () => {
+    it("should not transform buttons without theme or variant", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button onClick={handleClick}>Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBe(null) // No changes
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle empty theme value", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme="" variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      // Empty theme is treated as default, so it should convert successfully
+      expect(result).toContain('kind="neutral"')
+      expect(result).not.toContain('theme=""')
+      expect(result).not.toContain('variant="fill"')
+    })
+
+    it("should handle boolean theme attribute", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      // Boolean theme attribute becomes default theme, so it should convert successfully
+      expect(result).toContain('kind="neutral"')
+      expect(result).not.toContain("theme=")
+      expect(result).not.toContain('variant="fill"')
+    })
+
+    it("should preserve existing kind attribute when no theme/variant", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button kind="existing">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBe(null) // No changes made
+    })
+
+    it("should handle JSX expression theme values", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button theme={"primary"} variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('{"primary"}')
+    })
+  })
+
+  describe("mixed scenarios", () => {
+    it("should handle multiple buttons with different combinations", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <div>
+          <Button theme="primary" variant="fill">Save</Button>
+          <Button theme="unsupported" variant="fill">Custom</Button>
+          <Button variant="outline">Cancel</Button>
+        </div>
+      `
+
+      const result = applyTransform(source)
+
+      // First button should convert properly
+      expect(result).toContain('kind="primary"')
+
+      // Second button should have comment
+      expect(result).toContain(
+        "TODO: tapestry-migration (theme/variant): cannot be converted"
+      )
+      expect(result).toContain('theme="unsupported"')
+
+      // Third button should convert to secondary
+      expect(result).toContain('kind="secondary"')
+    })
+
+    it("should handle buttons with existing kind attribute and theme/variant", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+        <Button kind="existing" theme="primary" variant="fill">Save</Button>
+      `
+
+      const result = applyTransform(source)
+
+      // Should still transform theme/variant and add new kind
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('theme="primary"')
+      expect(result).not.toContain('variant="fill"')
+      // The existing kind should be replaced with the new one
+    })
+  })
+
+  it("should handle conditionals in theme/variant values", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={isPrimary ? "primary" : "default"} variant={isPrimary ? "fill" : "outline"}>Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={isPrimary ? "primary" : "secondary"}'
+    )
+  })
+
+  it("should handle conditionals with undefined values", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={phoenixEnabled ? 'primary' : 'primary'} variant={phoenixEnabled ? 'outline' : undefined}>Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={phoenixEnabled ? "secondary-interaction" : "primary"}'
+    )
+  })
+
+  it("should handle conditionals with undefined values for theme", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button  theme={phoenixEnabled ? 'default' : undefined} variant={phoenixEnabled ? 'naked' : undefined}>Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={phoenixEnabled ? "ghost" : "neutral"}'
+    )
+  })
+
+  it("should handle conditionals for only variant", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme="primary" variant={phoenixEnabled ? 'outline' : undefined}>Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={phoenixEnabled ? "secondary-interaction" : "primary"}'
+    )
+  })
+
+  it("should handle conditionals for only variant", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={phoenixEnabled ? 'neutral' : undefined} variant="outline">Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={phoenixEnabled ? "secondary" : "secondary"}'
+    )
+  })
+
+  it("should handle conditionals for no variant", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={phoenixEnabled ? 'neutral' : undefined}>Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain(
+      'Button kind={phoenixEnabled ? "neutral" : "neutral"}'
+    )
+  })
+
+  it("should handle when theme is null", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={null} variant="fill">Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain('<Button kind="neutral">')
+  })
+
+  it("should handle when theme is false", () => {
+    const source = `
+      import { Button } from "@planningcenter/tapestry-react"
+      <Button theme={false} variant="fill">Save</Button>
+    `
+
+    const result = applyTransform(source)
+
+    expect(result).toContain('<Button kind="neutral">')
+  })
+})

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

@@ -0,0 +1,90 @@
+import { addComment } from "../../shared/actions/addComment"
+import { getAttributeValue } from "../../shared/actions/getAttributeValue"
+import { removeAttribute } from "../../shared/actions/removeAttribute"
+import { attributeCombineFactory } from "../../shared/transformFactories/attributeCombineFactory"
+
+const KIND_MAP = {
+  default: {
+    default: "neutral",
+    fill: "neutral",
+    naked: "ghost",
+    outline: "secondary",
+    solid: "primary",
+  },
+  error: {
+    default: "delete",
+    fill: "delete",
+    naked: "ghost-delete",
+    outline: "secondary-delete",
+    solid: "delete",
+  },
+  neutral: {
+    default: "neutral",
+    fill: "neutral",
+    naked: "ghost",
+    outline: "secondary",
+    solid: "primary",
+  },
+  primary: {
+    default: "primary",
+    fill: "primary",
+    naked: "ghost-interaction",
+    outline: "secondary-interaction",
+    solid: "primary",
+  },
+}
+
+/**
+ * JSCodeshift transform: Convert Button theme/variant props to kind
+ */
+const transform = attributeCombineFactory({
+  component: "Button",
+  defaults: {
+    theme: "default",
+    variant: "fill",
+  },
+  mappingTable: KIND_MAP,
+  onUnsupported: ({ element, attributes, j, source }) => {
+    const removedAttrs: string[] = []
+
+    attributes.forEach(({ attribute, name }) => {
+      if (attribute) {
+        removeAttribute(name, { element, j, source })
+        const attributeValue = getAttributeValue({ attribute, j })
+        if (attributeValue) {
+          removedAttrs.push(`${name}="${attributeValue}"`)
+        }
+      }
+    })
+
+    if (removedAttrs.length > 0) {
+      const text = `cannot be converted - removed: ${removedAttrs.join(", ")}`
+      addComment({
+        element,
+        j,
+        scope: attributes.map(({ name }) => name).join("/"),
+        source,
+        text,
+      })
+    }
+    return true
+  },
+  package: "@planningcenter/tapestry-react",
+  sourceAttributes: ["theme", "variant"],
+  targetAttribute: "kind",
+  valueNormalizers: {
+    theme: (value: string | null | undefined) => {
+      if (value === "destroy" || value === "delete") return "error"
+      if (value === "info" || value === "success" || value === "interaction")
+        return "primary"
+      return value || "default"
+    },
+    variant: (value: string | null | undefined) => {
+      if (value === "ghost") return "naked"
+      if (value === "solid") return "fill"
+      return value || "fill"
+    },
+  },
+})
+
+export default transform