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

package/dist/tapestry-react-shim.cjs

@@ -2512,6 +2512,33 @@ const React = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
 function LoadingSpinner() {
   return React.createElement("div", { className: "tds-loading-spinner" });
 }
+const COMPONENT_KIND_CLASS_MAP = {
+  delete: "tds-btn--delete",
+  ghost: "tds-btn--ghost-neutral",
+  "ghost-delete": "tds-btn--ghost-delete",
+  "ghost-interaction": "tds-btn--ghost-interaction",
+  "inline-text": "tds-btn--inline-text",
+  neutral: "tds-btn--neutral",
+  "neutral-inline": "tds-btn--neutral-inline",
+  pill: "tds-btn--pill",
+  primary: "tds-btn--interaction",
+  "primary-page-header": "tds-btn--primary-page-header",
+  secondary: "tds-btn--outline-neutral",
+  "secondary-delete": "tds-btn--outline-delete",
+  "secondary-interaction": "tds-btn--outline-interaction",
+  "secondary-page-header": "tds-btn--secondary-page-header",
+  "staff-only": "tds-btn--staff-only"
+};
+const COMPONENT_SIZE_CLASS_MAP = {
+  lg: "tds-btn--lg",
+  md: "",
+  sm: "tds-btn--sm",
+  xl: "tds-btn--xl",
+  xs: "tds-btn--xs"
+};
+function wrapStringWithSpan(content) {
+  return typeof content === "string" ? React.createElement("span", null, content) : content;
+}
 var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -2577,68 +2604,16 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const COMPONENT_KIND_CLASS_MAP = {
-  delete: "tds-btn--delete",
-  ghost: "tds-btn--ghost-neutral",
-  "ghost-delete": "tds-btn--ghost-delete",
-  "ghost-interaction": "tds-btn--ghost-interaction",
-  "inline-text": "tds-btn--inline-text",
-  neutral: "tds-btn--neutral",
-  "neutral-inline": "tds-btn--neutral-inline",
-  pill: "tds-btn--pill",
-  primary: "tds-btn--interaction",
-  "primary-page-header": "tds-btn--primary-page-header",
-  secondary: "tds-btn--outline-neutral",
-  "secondary-delete": "tds-btn--outline-delete",
-  "secondary-interaction": "tds-btn--outline-interaction",
-  "secondary-page-header": "tds-btn--secondary-page-header",
-  "staff-only": "tds-btn--staff-only"
-};
-const COMPONENT_SIZE_CLASS_MAP = {
-  lg: "tds-btn--lg",
-  md: "",
-  sm: "tds-btn--sm",
-  xl: "tds-btn--xl",
-  xs: "tds-btn--xs"
-};
-const enhanceElementWithClassName = (element, className) => {
-  if (!element)
-    return null;
-  if (React.isValidElement(element)) {
-    return React.cloneElement(element, {
-      className: classNames(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        element.props.className,
-        className
-      )
-    });
-  }
-  if (typeof element === "string" && element.trim()) {
-    return React.createElement("span", { className }, element);
-  }
-  return null;
-};
-const buildComponentClassName$1 = ({ className, fullWidth, kind, loading, size }) => {
-  return classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className);
-};
 const BaseButton = reactExports.forwardRef(({ "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
-  const combinedClassName = buildComponentClassName$1({
-    className,
-    fullWidth,
-    kind,
-    loading,
-    size
-  });
-  const prefixElement = enhanceElementWithClassName(prefix, "prefix");
-  const suffixElement = enhanceElementWithClassName(suffix, "suffix");
+  const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
   const isDisabled = disabled || loading;
   return React.createElement(
     "button",
     { type: "button", className: combinedClassName, ref, ...restProps, "aria-busy": loading || void 0, "aria-disabled": isDisabled || void 0, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
     loading && React.createElement(LoadingSpinner, null),
-    prefixElement,
+    wrapStringWithSpan(prefix),
     loading ? React.createElement("span", null, label) : label,
-    suffixElement
+    wrapStringWithSpan(suffix)
   );
 });
 BaseButton.displayName = "BaseButton";
@@ -2754,7 +2729,7 @@ function Icon({ symbol: s2, className, ...props }) {
 function dropdownProps({ className }) {
   return {
     className: classNames(className, "tds-btn--dropdown"),
-    suffix: React.createElement(Icon, { symbol: "general#down-caret", "aria-hidden": true })
+    suffix: React.createElement(Icon, { className: "suffix", symbol: "general#down-caret", "aria-hidden": true })
   };
 }
 const DropdownButton = reactExports.forwardRef((props, ref) => {
@@ -2788,20 +2763,15 @@ const PageHeaderActionsDropdownButton = reactExports.forwardRef(({ className, ne
   return React.createElement(DropdownButton, { ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) });
 });
 PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
-const buildComponentClassName = (size, kind, fullWidth, className) => {
-  return classNames(kind && "tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className);
-};
 const BaseLink = reactExports.forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
-  const combinedClassName = buildComponentClassName(size, kind, fullWidth, className);
-  const prefixElement = enhanceElementWithClassName(prefix, "prefix");
-  const suffixElement = enhanceElementWithClassName(suffix, "suffix");
+  const combinedClassName = classNames(kind && "tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className, { "tds-btn--prefix": prefix, "tds-btn--suffix": suffix });
   const externalProps = external ? { rel: "noopener noreferrer", target: "_blank" } : {};
   return React.createElement(
     "a",
     { href, className: combinedClassName, ref, ...restProps, ...externalProps },
-    prefixElement,
+    wrapStringWithSpan(prefix),
     label || children,
-    suffixElement
+    wrapStringWithSpan(suffix)
   );
 });
 BaseLink.displayName = "BaseLink";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.4.1-rc.8",
+  "version": "3.4.1",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.4.1-rc.8",
+    "@planningcenter/tapestry": "^3.4.1",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1514e1926f05eceaf949c194c3ff366778509e65"
+  "gitHead": "f005d23b54d1a95f03e0823e6ab0d139af17cead"
 }

package/src/components/dropdown/index.test.ts

@@ -40,7 +40,7 @@ import { Dropdown } from "@planningcenter/tapestry-react"
 
 export default function Test() {
   return (
-    <Dropdown title="Actions">
+    <Dropdown onClose={handleClose}>
       <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
     </Dropdown>
   )
@@ -53,12 +53,185 @@ export default function Test() {
     expect(result).not.toContain("Dropdown.Item")
   })
 
-  it("returns null when there is nothing to transform", () => {
+  it("applies wrapMenu through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownMenu>")
+  })
+
+  it("applies placementIdToMenu through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown placement="bottom-end">
+      <DropdownMenu>
+        <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('<DropdownMenu placement="bottom end"')
+    expect(result).not.toMatch(/<Dropdown\s[^>]*placement/)
+  })
+
+  it("applies wrapTrigger through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownTrigger>")
+    expect(result).toContain('<DropdownButton label="Actions"')
+    expect(result).not.toContain('title="Actions"')
+  })
+
+  it("applies unsupportedPropsDivider through the chain", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider axis="vertical" /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (axis)")
+  })
+
+  it("applies dividerToSeparator through the chain", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("applies unsupportedPropsItem through the chain", () => {
     const input = `
 import { Dropdown } from "@planningcenter/tapestry-react"
 
-export default function Test({ children }) {
-  return <Dropdown title="Actions">{children}</Dropdown>
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item as={Link} onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (as)")
+  })
+
+  it("applies unsupportedPropsLink through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Link to="/edit" disabled>Edit</Dropdown.Link>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (disabled)")
+  })
+
+  it("applies auditSpreadProps through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown {...props} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (spreadAttribute)")
+  })
+
+  it("applies unsupportedProps through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown variant="outline" onClose={fn}><Dropdown.Item onSelect={fn}>Edit</Dropdown.Item></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (variant)")
+  })
+
+  it("applies moveDropdownImport through the chain", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={fn}>
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu><DropdownAction onAction={fn}>Edit</DropdownAction></DropdownMenu>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('from "@planningcenter/tapestry"')
+    expect(result).not.toContain('from "@planningcenter/tapestry-react"')
+  })
+
+  it("returns null when there is nothing to transform", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry"
+
+export default function Test() {
+  return (
+    <Dropdown onClose={handleClose}>
+      <DropdownTrigger><DropdownButton label="Actions" /></DropdownTrigger>
+      <DropdownMenu>
+        <DropdownAction onAction={fn}>Edit</DropdownAction>
+      </DropdownMenu>
+    </Dropdown>
+  )
 }
     `.trim()
 

package/src/components/dropdown/index.ts

@@ -1,14 +1,36 @@
 import { Transform } from "jscodeshift"
 
+import auditSpreadProps from "./transforms/auditSpreadProps"
+import dividerToSeparator from "./transforms/dividerToSeparator"
 import itemToAction from "./transforms/itemToAction"
 import linkToLink from "./transforms/linkToLink"
+import moveDropdownImport from "./transforms/moveDropdownImport"
+import placementIdToMenu from "./transforms/placementIdToMenu"
+import unsupportedProps from "./transforms/unsupportedProps"
+import unsupportedPropsDivider from "./transforms/unsupportedPropsDivider"
+import unsupportedPropsItem from "./transforms/unsupportedPropsItem"
+import unsupportedPropsLink from "./transforms/unsupportedPropsLink"
+import wrapMenu from "./transforms/wrapMenu"
+import wrapTrigger from "./transforms/wrapTrigger"
 
-// When moveDropdownImport is added, it must remain last in the chain.
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
-  const transforms: Transform[] = [linkToLink, itemToAction]
+  const transforms: Transform[] = [
+    unsupportedPropsItem,
+    unsupportedPropsLink,
+    unsupportedPropsDivider,
+    itemToAction,
+    linkToLink,
+    wrapMenu,
+    placementIdToMenu,
+    wrapTrigger,
+    dividerToSeparator,
+    auditSpreadProps,
+    unsupportedProps,
+    moveDropdownImport,
+  ]
 
   for (const individualTransform of transforms) {
     const result = individualTransform(

package/src/components/dropdown/transforms/auditSpreadProps.test.ts

@@ -0,0 +1,110 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./auditSpreadProps"
+
+const j = jscodeshift.withParser("tsx")
+
+const AUDIT_COMMENT =
+  "TODO: tapestry-migration (spreadAttribute): Spread props can contain unsupported props, please explore usages and migrate as needed."
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("auditSpreadProps transform", () => {
+  it("adds a comment to Dropdown with spread props", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  const props = { onClose: handleClose }
+  return (
+    <Dropdown {...props} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("adds a comment for each spread", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown {...baseProps} {...extraProps} title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const commentCount = (result?.match(/spreadAttribute/g) || []).length
+    expect(commentCount).toBe(2)
+  })
+
+  it("preserves all other attributes", () => {
+    const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions" placement="bottom-start" {...props}>
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('title="Actions"')
+    expect(result).toContain('placement="bottom-start"')
+    expect(result).toContain("{...props}")
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when no spread props", () => {
+      const input = `
+import { Dropdown } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown title="Actions">
+      <Dropdown.Item onSelect={fn}>Edit</Dropdown.Item>
+    </Dropdown>
+  )
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when not imported from tapestry-react", () => {
+      const input = `
+import { Dropdown } from "some-other-library"
+
+export default function Test() {
+  return <Dropdown {...props} title="Actions" />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+import { Transform } from "jscodeshift"
+
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+const transform: Transform = commentOnSpreadPropsFactory({
+  targetComponent: "Dropdown",
+  targetPackage: "@planningcenter/tapestry-react",
+})
+
+export default transform

package/src/components/dropdown/transforms/dividerToSeparator.test.ts

@@ -0,0 +1,134 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./dividerToSeparator"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("dividerToSeparator transform", () => {
+  it("renames Divider to DropdownSeparator when inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("handles non-self-closing Divider inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider></Divider></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("<DropdownSeparator>")
+    expect(result).toContain("</DropdownSeparator>")
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("renames multiple Dividers inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <Dropdown>
+      <Divider />
+      <Divider />
+    </Dropdown>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const count = (result?.match(/<DropdownSeparator/g) || []).length
+    expect(count).toBe(2)
+    expect(result).not.toContain("<Divider")
+  })
+
+  it("adds DropdownSeparator import from tapestry and removes Divider import when all Dividers are inside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Dropdown><Divider /></Dropdown>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('from "@planningcenter/tapestry"')
+    expect(result).toContain("DropdownSeparator")
+    expect(result).not.toContain(
+      'import { Dropdown, Divider } from "@planningcenter/tapestry-react"'
+    )
+  })
+
+  it("keeps Divider import when some Dividers are outside a Dropdown", () => {
+    const input = `
+import { Dropdown, Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return (
+    <div>
+      <Divider />
+      <Dropdown><Divider /></Dropdown>
+    </div>
+  )
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("DropdownSeparator")
+    expect(result).toContain(
+      'import { Dropdown, Divider } from "@planningcenter/tapestry-react"'
+    )
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when Divider is not inside a Dropdown", () => {
+      const input = `
+import { Divider } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Divider />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when Divider is not imported from tapestry-react", () => {
+      const input = `
+import { Divider } from "some-other-library"
+
+export default function Test() {
+  return <Divider />
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})