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

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.6.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.6.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": "0009d96d1c39de5978d2cdea8334ca5120974137"
+  "gitHead": "2b87acce23b1df6872d7bbeadd648b117c9962c4"
 }

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

@@ -99,6 +99,157 @@ export default function Test() {
     expect(result).not.toContain("innerRef")
   })
 
+  it("applies paddingPropsToFlex through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" padding="8px" paddingHorizontal="16px">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("padding={1}")
+    expect(result).toContain("paddingInline={2}")
+    expect(result).not.toContain('padding="8px"')
+    expect(result).not.toContain("paddingHorizontal")
+  })
+
+  it("applies flexPropToExpand through the chain — flex={1} becomes expand", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView flex={1}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("expand")
+    expect(result).not.toContain("flex")
+  })
+
+  it('applies flexPropToExpand through the chain — flex="1 0 0" becomes grow/shrink/basis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView flex="1 0 0">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).toContain("shrink={0}")
+    expect(result).toContain('basis="0"')
+    expect(result).not.toContain("flex=")
+  })
+
+  it("applies mediaQueriesToResponsive through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" mediaQueries={{ md: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain('direction: "column"')
+    expect(result).not.toContain("mediaQueries=")
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — flexDirection does not produce a double direction prop", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView flexDirection="row">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction="row"')
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — unmappable justifyContent stays as JSX prop with TODO, not in style={{}}", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView justifyContent="stretch">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).toContain("justifyContent")
+    expect(result).not.toContain("style={{")
+  })
+
+  it("applies cssFlexAliasesToProps through the chain — flexGrow/flexShrink/flexBasis become Flex props", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView flexGrow={1} flexShrink={0} flexBasis="auto">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={1}")
+    expect(result).toContain("shrink={0}")
+    expect(result).toContain('basis="auto"')
+    expect(result).not.toContain("flexGrow")
+    expect(result).not.toContain("flexShrink")
+    expect(result).not.toContain("flexBasis")
+    expect(result).not.toContain("style={{")
+  })
+
+  it("applies convertStyleProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" marginTop={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("style={{")
+    expect(result).toContain("marginTop:")
+    expect(result).not.toContain("marginTop={2}")
+  })
+
+  it("applies unsupportedProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" visible={isOpen}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (visible)")
+  })
+
+  it("applies auditSpreadProps through the chain", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO: tapestry-migration (spreadAttribute)")
+    expect(result).toContain("{...props}")
+  })
+
   it("applies moveFlexImport through the chain", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/index.ts

@@ -1,24 +1,38 @@
 import { Transform } from "jscodeshift"
 
 import alignmentToAlign from "./transforms/alignmentToAlign"
+import auditSpreadProps from "./transforms/auditSpreadProps"
 import axisToDirection from "./transforms/axisToDirection"
+import convertStyleProps from "./transforms/convertStyleProps"
+import cssFlexAliasesToProps from "./transforms/cssFlexAliasesToProps"
 import distributionToJustify from "./transforms/distributionToJustify"
+import flexPropToExpand from "./transforms/flexPropToExpand"
 import innerRefToRef from "./transforms/innerRefToRef"
+import mediaQueriesToResponsive from "./transforms/mediaQueriesToResponsive"
 import moveFlexImport from "./transforms/moveFlexImport"
+import paddingPropsToFlex from "./transforms/paddingPropsToFlex"
 import setDefaultAxis from "./transforms/setDefaultAxis"
 import spacingToGap from "./transforms/spacingToGap"
+import unsupportedProps from "./transforms/unsupportedProps"
 
 const transform: Transform = (fileInfo, api, options) => {
   let currentSource = fileInfo.source
   let hasAnyChanges = false
 
   const transforms = [
+    cssFlexAliasesToProps,
     setDefaultAxis,
+    paddingPropsToFlex,
+    flexPropToExpand,
     axisToDirection,
     alignmentToAlign,
     distributionToJustify,
     spacingToGap,
     innerRefToRef,
+    mediaQueriesToResponsive,
+    convertStyleProps,
+    unsupportedProps,
+    auditSpreadProps,
     moveFlexImport,
   ]
 

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

@@ -0,0 +1,93 @@
+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 StackView with spread props", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain(AUDIT_COMMENT)
+    expect(result).toContain("{...props}")
+  })
+
+  it("adds a comment for each spread", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...baseProps} {...extraProps}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    const commentCount = (result?.match(/spreadAttribute/g) || []).length
+    expect(commentCount).toBe(2)
+  })
+
+  it("preserves all other attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" spacing={2} {...props}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('axis="horizontal"')
+    expect(result).toContain("spacing={2}")
+    expect(result).toContain("{...props}")
+  })
+
+  describe("no changes scenarios", () => {
+    it("returns null when no spread props", () => {
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal">Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null when not imported from tapestry-react", () => {
+      const input = `
+import { StackView } from "some-other-library"
+
+export default function Test() {
+  return <StackView {...props}>Test</StackView>
+}
+      `.trim()
+
+      expect(applyTransform(input)).toBe(null)
+    })
+
+    it("returns null for empty file", () => {
+      expect(applyTransform("")).toBe(null)
+    })
+  })
+})

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

@@ -0,0 +1,6 @@
+import { commentOnSpreadPropsFactory } from "../../shared/transformFactories/commentOnSpreadPropsFactory"
+
+export default commentOnSpreadPropsFactory({
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+})

package/src/components/flex/transforms/axisToDirection.test.ts

@@ -101,6 +101,21 @@ export default function Test({ orientation }) {
     expect(result).not.toContain('direction="')
   })
 
+  it("migrates a ternary axis value to a ternary direction value", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis={isNarrow ? "vertical" : "horizontal"}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction={isNarrow ? "column" : "row"}')
+    expect(result).not.toContain("axis")
+    expect(result).not.toContain("TODO")
+  })
+
   it("maps an aliased StackView import", () => {
     const input = `
 import { StackView as Stack } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/axisToDirection.ts

@@ -31,6 +31,32 @@ const transform: Transform = attributeTransformFactory({
     const direction = resolved ? AXIS_DIRECTION_MAP[resolved] : undefined
 
     if (!direction) {
+      const value = axisAttribute.value
+      if (value?.type === "JSXExpressionContainer") {
+        const expr = value.expression
+        if (
+          expr.type === "ConditionalExpression" &&
+          expr.consequent.type === "StringLiteral" &&
+          expr.alternate.type === "StringLiteral"
+        ) {
+          const consequentDir =
+            AXIS_DIRECTION_MAP[expr.consequent.value as string]
+          const alternateDir =
+            AXIS_DIRECTION_MAP[expr.alternate.value as string]
+          if (consequentDir && alternateDir) {
+            axisAttribute.name.name = "direction"
+            axisAttribute.value = j.jsxExpressionContainer(
+              j.conditionalExpression(
+                expr.test,
+                j.stringLiteral(consequentDir),
+                j.stringLiteral(alternateDir)
+              )
+            )
+            return true
+          }
+        }
+      }
+
       addComment({
         element,
         j,