@planningcenter/tapestry-migration-cli 3.5.0 → 3.6.1-qa-1035.0

package/README.md

@@ -127,11 +127,48 @@ npx @planningcenter/tapestry-migration-cli run button -p ./src/components --js-t
 npx @planningcenter/tapestry-migration-cli run button -p ./src/components --js-theme ./theme.js --report-path ./migration-report.md
 ```
 
+### Listing available migrations
+
+Use `list --json` to discover available migrations programmatically:
+
+```bash
+npx @planningcenter/tapestry-migration-cli list --json
+```
+
+**Stable JSON contract (stdout, exit 0):**
+
+```json
+{
+  "schemaVersion": 1,
+  "migrations": [
+    { "id": "button", "label": "Button" },
+    { "id": "checkbox", "label": "Checkbox" }
+  ]
+}
+```
+
+Contract guarantees:
+
+- Exit code `0` and **JSON only** on stdout — no progress text or emoji.
+- `schemaVersion` is the integer `1`. Future breaking changes increment this version.
+- Each `id` is the exact value accepted by `run <component-name>`.
+- Each `label` is nonempty display text (Spaced Title Case).
+- `id`s are unique; ordering is the CLI's recommended display order.
+- No `--path` required; no filesystem writes.
+- Diagnostics go to **stderr** with a **nonzero** exit code.
+
+Human-readable listing (non-contractual):
+
+```bash
+npx @planningcenter/tapestry-migration-cli list
+```
+
 ## Available Components
 
 - `button` - Migrate Button components
 - `checkbox` - Migrate Checkbox components
 - `date-picker` - Migrate DatePicker components
+- `dropdown` - Migrate Dropdown components
 - `input` - Migrate Input components
 - `link` - Migrate Link components
 - `radio` - Migrate Radio components

package/dist/tapestry-react-shim.cjs

@@ -1,5 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function _mergeNamespaces(n2, m2) {
+  for (var i2 = 0; i2 < m2.length; i2++) {
+    const e2 = m2[i2];
+    if (typeof e2 !== "string" && !Array.isArray(e2)) {
+      for (const k2 in e2) {
+        if (k2 !== "default" && !(k2 in n2)) {
+          const d2 = Object.getOwnPropertyDescriptor(e2, k2);
+          if (d2) {
+            Object.defineProperty(n2, k2, d2.get ? d2 : {
+              enumerable: true,
+              get: () => e2[k2]
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n2, Symbol.toStringTag, { value: "Module" }));
+}
 const bellMuted = "M6.13,2.07l-1.04,-1.03c0.67,-0.48 1.54,-1.04 3.08,-1.04c1.54,0.01 3.01,0.62 4.09,1.68c1.07529,1.04811 1.67813,2.48843 1.67,3.99v4.27l-1.54,-1.55v-2.71c0,-0.54 -0.11,-1.07 -0.32,-1.56c-0.21,-0.5 -0.52,-0.95 -0.92,-1.33c-0.39,-0.38 -0.86,-0.68 -1.37,-0.89c-0.51,-0.21 -1.06,-0.31 -1.62,-0.31c-0.70992,0.00342 -1.40896,0.17475 -2.04,0.5zM16,14.59l-1.4,1.41l-1.74,-1.74h-2.15c-0.2,0.48 -0.54,0.9 -0.99,1.19c-0.45,0.29 -0.97,0.45 -1.51,0.45c-0.54,0 -1.06,-0.16 -1.51,-0.45c-0.45,-0.29 -0.79,-0.71 -0.99,-1.19h-4.08c-0.31,0 -0.62,-0.09 -0.88,-0.25c-0.26165,-0.16091 -0.4676,-0.39827 -0.59,-0.68c-0.13,-0.28 -0.18,-0.59 -0.14,-0.89c0.04,-0.3 0.17,-0.59 0.38,-0.82l2.06,-2.38v-3.58c0,-0.45 0.16,-1.2 0.25,-1.59l-2.11,-2.1l1.4,-1.41zM11.34,12.73l-7.34,-7.36c0,0.1 -0.02,0.21 -0.02,0.29v3.85c0,0.19 -0.07,0.38 -0.19,0.52l-2.23,2.58l0.07,0.12z";
 const bell = "M15.233,11.506c0.38455,0.4554 0.46962,1.09267 0.218,1.633c-0.23682,0.53936 -0.77094,0.88694 -1.36,0.885h-3.782c-0.377,0.9449 -1.29167,1.56474 -2.309,1.56474c-1.01733,0 -1.932,-0.61985 -2.309,-1.56474h-3.78c-0.59015,0.00313 -1.12575,-0.34463 -1.363,-0.885c-0.25178,-0.54079 -0.16629,-1.1786 0.219,-1.634l1.905,-2.271v-3.417c-0.01886,-2.9628 2.36425,-5.38169 5.327,-5.407c2.9633,0.02476 5.3473,2.44365 5.329,5.407v3.417l1.905,2.272";
 const bill = "M15.805,2.176c0.12423,0.10317 0.19577,0.25652 0.195,0.418v10.795c0.00021,0.08218 -0.01647,0.16353 -0.049,0.239c-0.11474,0.23112 -0.352,0.37581 -0.61,0.372h-14.665c-0.177,0.003 -0.349,-0.06 -0.482,-0.177c-0.12591,-0.10868 -0.19699,-0.2677 -0.194,-0.434v-10.795c-0.00102,-0.16132 0.07014,-0.31464 0.194,-0.418c0.1326,-0.11756 0.30485,-0.18046 0.482,-0.176h14.664c0.17184,-0.00314 0.33831,0.05986 0.465,0.176M14.798,5.565c-0.11067,0.022 -0.22267,0.03367 -0.336,0.035c-0.64408,-0.00048 -1.26271,-0.25152 -1.725,-0.7c-0.461,-0.447 -0.73,-1.057 -0.75,-1.7h-7.947c-0.0426,1.33678 -1.13754,2.39898 -2.475,2.401c-0.122,-0.00067 -0.243,-0.01333 -0.363,-0.038v4.876c0.11959,-0.0237 0.24109,-0.03642 0.363,-0.038c1.33921,-0.00325 2.43705,1.06133 2.475,2.4h7.948c0.03847,-1.33789 1.13556,-2.40172 2.474,-2.399c0.11276,0.00184 0.22516,0.01321 0.336,0.034zM10.343,5.231c0.31189,0.36828 0.55631,0.78873 0.722,1.242c0.36,0.987 0.36,2.068 0,3.055c-0.166,0.453 -0.41,0.873 -0.721,1.243c-0.2937,0.34506 -0.65341,0.62794 -1.058,0.832c-0.81776,0.40581 -1.77824,0.40581 -2.596,0c-0.406,-0.204 -0.766,-0.487 -1.06,-0.832c-0.31,-0.367 -0.549,-0.789 -0.706,-1.243c-0.34328,-0.9894 -0.34328,-2.0656 0,-3.055c0.15504,-0.45349 0.39234,-0.87453 0.7,-1.242c0.29429,-0.34528 0.6547,-0.62816 1.06,-0.832c0.40423,-0.2014 0.8504,-0.3042 1.302,-0.3c0.45185,-0.00653 0.89857,0.0964 1.302,0.3c0.40351,0.2044 0.76218,0.48725 1.055,0.832M9.334,9.351h-0.422c-0.08583,0.00545 -0.16953,-0.02816 -0.22776,-0.09144c-0.05824,-0.06328 -0.08478,-0.14948 -0.07224,-0.23456v-3.205h-0.883c-0.12661,0.35602 -0.4801,0.57943 -0.856,0.541h-0.17v0.57h0.735v2.093c0.01178,0.08493 -0.01503,0.17068 -0.07309,0.23377c-0.05806,0.06309 -0.14129,0.09692 -0.22691,0.09223h-0.448v0.57h2.642z";
@@ -648,7 +667,7 @@ function requireReact_development() {
         var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
         var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
         var REACT_MEMO_TYPE = Symbol.for("react.memo");
-        var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+        var REACT_LAZY_TYPE2 = Symbol.for("react.lazy");
         var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
         var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
         var FAUX_ITERATOR_SYMBOL = "@@iterator";
@@ -984,7 +1003,7 @@ function requireReact_development() {
                   return outerName;
                 }
                 return getComponentNameFromType(type.type) || "Memo";
-              case REACT_LAZY_TYPE: {
+              case REACT_LAZY_TYPE2: {
                 var lazyComponent = type;
                 var payload = lazyComponent._payload;
                 var init = lazyComponent._init;
@@ -1534,7 +1553,7 @@ function requireReact_development() {
             _result: ctor
           };
           var lazyType = {
-            $$typeof: REACT_LAZY_TYPE,
+            $$typeof: REACT_LAZY_TYPE2,
             _payload: payload,
             _init: lazyInitializer
           };
@@ -1623,7 +1642,7 @@ function requireReact_development() {
             return true;
           }
           if (typeof type === "object" && type !== null) {
-            if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+            if (type.$$typeof === REACT_LAZY_TYPE2 || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
             // types supported by any Flight configuration anywhere since
             // we don't know which Flight build this will end up being used
             // with.
@@ -1978,7 +1997,7 @@ function requireReact_development() {
                 return describeFunctionComponentFrame(type.render);
               case REACT_MEMO_TYPE:
                 return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
-              case REACT_LAZY_TYPE: {
+              case REACT_LAZY_TYPE2: {
                 var lazyComponent = type;
                 var payload = lazyComponent._payload;
                 var init = lazyComponent._init;
@@ -2513,6 +2532,10 @@ function requireReact() {
 }
 var reactExports = requireReact();
 const React = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
+const React$1 = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: React
+}, [reactExports]);
 function LoadingSpinner() {
   return React.createElement("div", { className: "tds-loading-spinner" });
 }
@@ -2767,14 +2790,175 @@ const PageHeaderActionsDropdownButton = reactExports.forwardRef(({ className, ne
   return React.createElement(DropdownButton, { ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) });
 });
 PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
-const BaseLink = reactExports.forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i2 = 0; i2 < cleanups.length; i2++) {
+          const cleanup = cleanups[i2];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i2], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return reactExports.useCallback(composeRefs(...refs), refs);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const Slot2 = reactExports.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    let slottableElement = null;
+    let hasSlottable = false;
+    const newChildren = [];
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    reactExports.Children.forEach(children, (maybeSlottable) => {
+      if (isSlottable(maybeSlottable)) {
+        hasSlottable = true;
+        const slottable = maybeSlottable;
+        let child = "child" in slottable.props ? slottable.props.child : slottable.props.children;
+        if (isLazyComponent(child) && typeof use === "function") {
+          child = use(child._payload);
+        }
+        slottableElement = getSlottableElementFromSlottable(slottable, child);
+        newChildren.push(slottableElement?.props?.children);
+      } else {
+        newChildren.push(maybeSlottable);
+      }
+    });
+    if (slottableElement) {
+      slottableElement = reactExports.cloneElement(slottableElement, void 0, newChildren);
+    } else if (
+      // A `Slottable` was found but it didn't resolve to a single element (e.g.
+      // it wrapped multiple elements, text, or a render-prop `child` that
+      // wasn't an element). Don't fall back to treating the `Slottable` wrapper
+      // itself as the slot target — throw a descriptive error below instead.
+      !hasSlottable && reactExports.Children.count(children) === 1 && reactExports.isValidElement(children)
+    ) {
+      slottableElement = children;
+    }
+    const slottableElementRef = slottableElement ? getElementRef(slottableElement) : void 0;
+    const composedRef = useComposedRefs(forwardedRef, slottableElementRef);
+    if (!slottableElement) {
+      if (children || children === 0) {
+        throw new Error(
+          hasSlottable ? createSlottableError(ownerName) : createSlotError(ownerName)
+        );
+      }
+      return children;
+    }
+    const mergedProps = mergeProps(slotProps, slottableElement.props ?? {});
+    if (slottableElement.type !== reactExports.Fragment) {
+      mergedProps.ref = forwardedRef ? composedRef : slottableElementRef;
+    }
+    return reactExports.cloneElement(slottableElement, mergedProps);
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+var SLOTTABLE_IDENTIFIER = Symbol.for("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+  const Slottable2 = (props) => "child" in props ? props.children(props.child) : props.children;
+  Slottable2.displayName = `${ownerName}.Slottable`;
+  Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+  return Slottable2;
+}
+var Slottable = /* @__PURE__ */ createSlottable("Slottable");
+var getSlottableElementFromSlottable = (slottable, child) => {
+  if ("child" in slottable.props) {
+    const child2 = slottable.props.child;
+    if (!reactExports.isValidElement(child2)) return null;
+    return reactExports.cloneElement(child2, void 0, slottable.props.children(child2.props.children));
+  }
+  return reactExports.isValidElement(child) ? child : null;
+};
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+function isSlottable(child) {
+  return reactExports.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+var createSlotError = (ownerName) => {
+  return `${ownerName} failed to slot onto its children. Expected a single React element child or \`Slottable\`.`;
+};
+var createSlottableError = (ownerName) => {
+  return `${ownerName} failed to slot onto its \`Slottable\`. Expected \`Slottable\` to receive a single React element child.`;
+};
+var use = React$1[" use ".trim().toString()];
+const BaseLink = reactExports.forwardRef(({ asChild = false, children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
   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" } : {};
+  const Comp = asChild ? Slot : "a";
   return React.createElement(
-    "a",
-    { href, className: combinedClassName, ref, ...restProps, ...externalProps },
+    Comp,
+    { ...!asChild && { href }, className: combinedClassName, ref, ...restProps, ...externalProps },
     wrapStringWithSpan(prefix),
-    label || children,
+    React.createElement(Slottable, null, label || children),
     wrapStringWithSpan(suffix)
   );
 });
@@ -2784,8 +2968,8 @@ const IconLink = reactExports.forwardRef(({ className, href, icon, ...restProps
   return React.createElement(BaseLink, { href, label: icon, className: iconOnlyClassName, ref, ...restProps });
 });
 IconLink.displayName = "IconLink";
-const Link = reactExports.forwardRef(({ href, ...restProps }, ref) => {
-  return React.createElement(BaseLink, { href, ref, ...restProps });
+const Link = reactExports.forwardRef((props, ref) => {
+  return React.createElement(BaseLink, { ref, ...props });
 });
 Link.displayName = "Link";
 const tokens = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.5.0",
+  "version": "3.6.1-qa-1035.0",
   "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.5.0",
+    "@planningcenter/tapestry": "^3.6.1-qa-1035.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "958f1f269ca37d78e9a9c0ec66c208a7115331dc"
+  "gitHead": "2b87acce23b1df6872d7bbeadd648b117c9962c4"
 }

package/src/availableComponents.ts

@@ -3,6 +3,7 @@ export const AVAILABLE_CLI_COMPONENTS = new Set([
   "checkbox",
   "date-picker",
   "dropdown",
+  "flex",
   "input",
   "link",
   "radio",

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

@@ -84,9 +84,9 @@ export default function Test() {
 
       expect(result).toContain('<Tooltip {...{title: "Help"}}')
       expect(result).toContain("refAsInnerRef={false}")
-      expect(result).toContain(
-        '<Button variant="primary" onClick={handler} disabled>Save</Button>'
-      )
+      expect(result).toContain('variant="primary"')
+      expect(result).toContain("onClick={handler}")
+      expect(result).toContain("disabled>Save</Button>")
       expect(result).not.toContain("tooltip=")
     })
 
@@ -323,6 +323,53 @@ export default function Test({ items }) {
       expect(result).not.toContain("tooltip=")
     })
 
+    it("should add a TODO comment when the Button is disabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save" }} disabled>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration (disabled):")
+      expect(result).toContain("<Tooltip")
+      expect(result).toContain("disabled>Save</Button>")
+      expect(result).not.toContain("tooltip=")
+    })
+
+    it("should add a TODO comment when disabled has an expression value", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test({ isDisabled }) {
+  return <Button tooltip={{ title: "Save" }} disabled={isDisabled}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("TODO: tapestry-migration (disabled):")
+      expect(result).toContain("disabled={isDisabled}")
+    })
+
+    it("should not add a disabled TODO comment when the Button is not disabled", () => {
+      const input = `
+import { Button } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Button tooltip={{ title: "Save" }}>Save</Button>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+
+      expect(result).toContain("<Tooltip")
+      expect(result).not.toContain("TODO: tapestry-migration (disabled):")
+    })
+
     it("should handle empty tooltip attribute", () => {
       const input = `
 import { Button } from "@planningcenter/tapestry-react"

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

@@ -1,5 +1,7 @@
 import { addAttribute } from "../../shared/actions/addAttribute"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { createWrapper } from "../../shared/actions/createWrapper"
+import { getAttribute } from "../../shared/actions/getAttribute"
 import { getAttributeValueAsProps } from "../../shared/actions/getAttributeValueAsProps"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -19,6 +21,11 @@ const transform = attributeTransformFactory({
 
     removeAttribute("tooltip", { element, j, source })
 
+    // Capture the original Button's `disabled` attribute before `createWrapper`
+    // replaces `element` in the AST, so the comment below clearly attaches to
+    // the original Button attribute node.
+    const disabledAttribute = getAttribute({ element, name: "disabled" })
+
     const wrapperElement = createWrapper({
       conflictAlias: "TRTooltip",
       element,
@@ -36,6 +43,17 @@ const transform = attributeTransformFactory({
       value: false,
     })
 
+    if (disabledAttribute) {
+      addCommentToAttribute({
+        attribute: disabledAttribute,
+        j,
+        text:
+          "This Button is disabled. Disabled buttons don't emit pointer or focus events, " +
+          "so the wrapping Tooltip will not appear. Keep the button interactive (e.g. handle " +
+          "the disabled state without the native `disabled` attribute) so the Tooltip can trigger.",
+      })
+    }
+
     return true
   },
 })