@planningcenter/tapestry-migration-cli 3.6.0 → 3.7.0-rc.0

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

@@ -0,0 +1,100 @@
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { getAttribute } from "../../shared/actions/getAttribute"
+import { hasAttribute } from "../../shared/conditions/hasAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+function parseFlexShorthand(
+  value: string
+): { basis: string; grow: number; shrink: number } | null {
+  const parts = value.trim().split(/\s+/)
+  if (parts.length !== 3) return null
+
+  const grow = Number(parts[0])
+  const shrink = Number(parts[1])
+  const basis = parts[2]
+
+  if (!Number.isFinite(grow) || !Number.isFinite(shrink)) return null
+
+  return { basis, grow, shrink }
+}
+
+const TODO_TEXT =
+  "could not migrate flex automatically; use grow, shrink, basis, or expand individually"
+
+export default attributeTransformFactory({
+  condition: hasAttribute("flex"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const flexAttr = getAttribute({ element, name: "flex" })
+    if (!flexAttr) return false
+
+    const value = flexAttr.value
+    const attrs = element.openingElement.attributes
+
+    // flex={1} or flex="1" → expand
+    const isExpandValue =
+      (value?.type === "JSXExpressionContainer" &&
+        value.expression.type === "NumericLiteral" &&
+        (value.expression as { value: number }).value === 1) ||
+      (value?.type === "StringLiteral" &&
+        (value as { value: string }).value === "1")
+
+    if (isExpandValue) {
+      const idx = attrs.indexOf(flexAttr)
+      attrs.splice(idx, 1, j.jsxAttribute(j.jsxIdentifier("expand")))
+      return true
+    }
+
+    // flex={N} (N !== 1) → grow={N} shrink={1} basis="0"
+    if (
+      value?.type === "JSXExpressionContainer" &&
+      value.expression.type === "NumericLiteral"
+    ) {
+      const grow = (value.expression as { value: number }).value
+      const idx = attrs.indexOf(flexAttr)
+      attrs.splice(
+        idx,
+        1,
+        j.jsxAttribute(
+          j.jsxIdentifier("grow"),
+          j.jsxExpressionContainer(j.numericLiteral(grow))
+        ),
+        j.jsxAttribute(
+          j.jsxIdentifier("shrink"),
+          j.jsxExpressionContainer(j.numericLiteral(1))
+        ),
+        j.jsxAttribute(j.jsxIdentifier("basis"), j.stringLiteral("0"))
+      )
+      return true
+    }
+
+    // flex="N N basis" → grow={N} shrink={N} basis="X"
+    if (value?.type === "StringLiteral") {
+      const parsed = parseFlexShorthand((value as { value: string }).value)
+      if (parsed) {
+        const idx = attrs.indexOf(flexAttr)
+        attrs.splice(
+          idx,
+          1,
+          j.jsxAttribute(
+            j.jsxIdentifier("grow"),
+            j.jsxExpressionContainer(j.numericLiteral(parsed.grow))
+          ),
+          j.jsxAttribute(
+            j.jsxIdentifier("shrink"),
+            j.jsxExpressionContainer(j.numericLiteral(parsed.shrink))
+          ),
+          j.jsxAttribute(
+            j.jsxIdentifier("basis"),
+            j.stringLiteral(parsed.basis)
+          )
+        )
+        return true
+      }
+    }
+
+    addCommentToAttribute({ attribute: flexAttr, j, text: TODO_TEXT })
+    return true
+  },
+})