@planningcenter/tapestry-migration-cli 2.2.1-qa-362.0 → 2.3.0-rc.10

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

@@ -0,0 +1,302 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./removeDuplicateKeys"
+
+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("removeDuplicateKeys transform", () => {
+  describe("Button elements with duplicate attributes", () => {
+    it("should remove duplicate attributes from Button elements", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary" disabled kind="secondary">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("Save")
+    })
+
+    it("should handle multiple Button elements with duplicates", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Button kind="primary" size="large" kind="secondary">Save</Button>
+              <Button disabled loading disabled>Cancel</Button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain('size="large"')
+
+      expect(result).toContain("<Button disabled loading>")
+    })
+
+    it("should preserve first occurrence of duplicate attributes", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button onClick={handleFirst} aria-label="First" onClick={handleSecond} aria-label="Second">Click</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("onClick={handleFirst}")
+      expect(result).not.toContain("onClick={handleSecond}")
+      expect(result).toContain('aria-label="First"')
+      expect(result).not.toContain('aria-label="Second"')
+    })
+  })
+
+  describe("Button elements without duplicate attributes", () => {
+    it("should return null when no duplicates exist", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary" size="large" disabled>Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull() // No changes needed
+    })
+
+    it("should return null for Button with no attributes", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button>Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("import handling", () => {
+    it("should only process files that import Button from tapestry-react", () => {
+      const source = `
+        import { Button } from "some-other-library"
+
+        export function TestComponent() {
+          return <Button kind="primary" kind="secondary">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull() // Should not process non-tapestry Buttons
+    })
+
+    it("should handle aliased Button imports", () => {
+      const source = `
+        import { Button as TapestryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <TapestryButton kind="primary" disabled kind="secondary">Save</TapestryButton>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain("<TapestryButton")
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("</TapestryButton>")
+    })
+
+    it("should handle renamed imports", () => {
+      const source = `
+        import { Button as PrimaryButton } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <PrimaryButton size="large" onClick={handler} size="small">Click</PrimaryButton>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('size="large"')
+      expect(result).not.toContain('size="small"')
+    })
+  })
+
+  describe("mixed elements", () => {
+    it("should only process Button elements, not other elements", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Button kind="primary" kind="secondary">Save</Button>
+              <div className="container" className="wrapper">Content</div>
+              <span role="button" role="link">Text</span>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // Button duplicates should be removed
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+
+      // Other elements should remain unchanged (duplicates preserved)
+      expect(result).toContain('className="container"')
+      expect(result).toContain('className="wrapper"')
+      expect(result).toContain('role="button"')
+      expect(result).toContain('role="link"')
+    })
+
+    it("should process multiple Button elements independently", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <form>
+              <Button type="submit" kind="primary" type="button">Submit</Button>
+              <Button disabled loading disabled>Loading</Button>
+              <Button size="small">Small</Button>
+            </form>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      // First button: should keep first 'type'
+      expect(result).toContain('type="submit"')
+      expect(result).not.toContain('type="button"')
+
+      expect(result).toContain("<Button disabled loading>")
+
+      // Third button: should remain unchanged
+      expect(result).toContain('size="small"')
+    })
+  })
+
+  describe("complex JSX scenarios", () => {
+    it("should handle nested Button elements", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <div className="toolbar">
+                <Button kind="primary" disabled kind="secondary">
+                  Save
+                </Button>
+              </div>
+              <Button size="large" onClick={handler} size="small">
+                Cancel
+              </Button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain('size="large"')
+      expect(result).not.toContain('size="small"')
+    })
+
+    it("should handle Button elements with children and complex attributes", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              kind="primary"
+              onClick={() => console.log('first')}
+              className="btn-primary"
+              kind="secondary"
+              onClick={() => console.log('second')}
+              data-testid="save-button"
+            >
+              <span>Save Changes</span>
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("onClick={() => console.log('first')}")
+      expect(result).not.toContain("onClick={() => console.log('second')}")
+      expect(result).toContain('data-testid="save-button"')
+      expect(result).toContain("<span>Save Changes</span>")
+    })
+  })
+
+  describe("self-closing Button elements", () => {
+    it("should handle self-closing Button elements with duplicates", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary" disabled kind="secondary" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+      expect(result).toContain('kind="primary"')
+      expect(result).not.toContain('kind="secondary"')
+      expect(result).toContain("disabled")
+      expect(result).toContain("/>")
+    })
+  })
+})

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

@@ -0,0 +1,8 @@
+import { removeDuplicateKeys } from "../../shared/actions/removeDuplicateKeys"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: removeDuplicateKeys,
+})

package/src/components/button/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 - Button styles may need to be updated for new design system.`
+
+export default attributeTransformFactory({
+  condition: hasAttribute("style"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attribute = getAttribute({ element, name: "style" })!
+    addCommentToAttribute({ attribute, j, text: COMMENT })
+    return true
+  },
+})

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

@@ -0,0 +1,165 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./spinnerToLoadingButton"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string, options = {}) {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    options
+  ) as string | null
+}
+
+describe("spinnerToLoadingButton transform", () => {
+  describe("Button with spinner prop", () => {
+    it("should  Button with spinner to use loading prop", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button spinner={isLoading} kind="primary">Save</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("<Button")
+      expect(result).toContain("</Button>")
+      expect(result).toContain("loading={isLoading}")
+      expect(result).not.toContain("spinner={isLoading}")
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain("Save")
+    })
+
+    it("should handle self-closing Button with spinner", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button spinner={true} aria-label="Loading" />
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("<Button")
+      expect(result).toContain("loading={true}")
+      expect(result).toContain('aria-label="Loading" />')
+      expect(result).not.toContain("spinner={true}")
+    })
+
+    it("should handle boolean spinner prop", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button spinner disabled>Loading...</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain("<Button")
+      expect(result).toContain("loading")
+      expect(result).toContain("disabled")
+      expect(result).not.toContain("spinner")
+    })
+  })
+
+  describe("Button without spinner prop", () => {
+    it("should return null when no spinner prop is present", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return <Button kind="primary">No Spinner</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+
+    it("should not process non-tapestry Buttons", () => {
+      const source = `
+        import { Button } from "some-other-library"
+
+        export function TestComponent() {
+          return <Button spinner={true}>Other Button</Button>
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toBeNull()
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should preserve all other Button props", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <Button
+              spinner={isSubmitting}
+              kind="primary"
+              size="large"
+              disabled={isDisabled}
+              onClick={handleClick}
+              className="submit-btn"
+              type="submit"
+            >
+              Submit Form
+            </Button>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).toContain('kind="primary"')
+      expect(result).toContain('size="large"')
+      expect(result).toContain("disabled={isDisabled}")
+      expect(result).toContain("onClick={handleClick}")
+      expect(result).toContain('className="submit-btn"')
+      expect(result).toContain('type="submit"')
+      expect(result).toContain("Submit Form")
+      expect(result).toContain("<Button")
+      expect(result).toContain("loading={isSubmitting}")
+      expect(result).not.toContain("spinner={isSubmitting}")
+    })
+
+    it("should handle multiple Buttons with different spinner configurations", () => {
+      const source = `
+        import { Button } from "@planningcenter/tapestry-react"
+
+        export function TestComponent() {
+          return (
+            <div>
+              <Button spinner={loading1}>Save</Button>
+              <Button kind="secondary">Cancel</Button>
+              <Button spinner={loading2} disabled>Delete</Button>
+            </div>
+          )
+        }
+      `
+
+      const result = applyTransform(source)
+
+      expect(result).not.toBeNull()
+
+      expect(result).toContain('<Button kind="secondary">Cancel</Button>')
+      expect(result).toContain("<Button loading={loading1}")
+      expect(result).toContain("<Button loading={loading2}")
+      expect(result).not.toContain("spinner={loading1}")
+      expect(result).not.toContain("spinner={loading2}")
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { transformAttributeName } from "../../shared/actions/transformAttributeName"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  condition: hasAttribute("spinner"),
+  targetComponent: "Button",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element) => {
+    transformAttributeName("spinner", "loading", { element })
+
+    return true
+  },
+})