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

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

@@ -0,0 +1,523 @@
+import { JSCodeshift, JSXAttribute, Transform } from "jscodeshift"
+
+import { formatComment } from "../../shared/actions/addComment"
+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 commentOnAttr(
+  attr: JSXAttribute,
+  scope: string,
+  text: string,
+  j: JSCodeshift
+) {
+  const comment = j.commentBlock(formatComment(text, scope), true, false)
+  attr.comments = attr.comments ? [...attr.comments, comment] : [comment]
+}
+
+const VALID_FLEX_BREAKPOINTS = new Set(["xs", "sm", "md", "lg", "xl"])
+
+const CONSTANT_AXIS_MAP: Record<string, string> = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+}
+
+const AXIS_DIRECTION_MAP: Record<string, string> = {
+  horizontal: "row",
+  vertical: "column",
+}
+
+const VALID_ALIGN_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "stretch",
+  "baseline",
+])
+
+const CONSTANT_ALIGN_MAP: Record<string, string> = {
+  BASELINE: "baseline",
+  CENTER: "center",
+  END: "end",
+  FILL: "fill",
+  START: "start",
+  STRETCH: "stretch",
+}
+
+const VALID_JUSTIFY_VALUES = new Set([
+  "start",
+  "center",
+  "end",
+  "space-between",
+  "space-evenly",
+])
+
+const CONSTANT_DISTRIBUTION_MAP: Record<string, string> = {
+  CENTER: "center",
+  END: "end",
+  FILL: "fill",
+  SPACE_BETWEEN: "space-between",
+  SPACE_EVENLY: "space-evenly",
+  START: "start",
+}
+
+const VALID_GAP_VALUES = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
+
+const PADDING_SCALE = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
+
+const PIXEL_TO_TOKEN: Record<string, number> = {
+  "0": 0,
+  "0px": 0,
+  "2px": 0.25,
+  "4px": 0.5,
+  "8px": 1,
+  "12px": 1.5,
+  "16px": 2,
+  "24px": 3,
+  "32px": 4,
+  "40px": 5,
+  "48px": 6,
+  "56px": 7,
+}
+
+const PADDING_SCALE_LIST = [...PADDING_SCALE].join(", ")
+
+const PADDING_TODO =
+  "could not migrate padding automatically; " +
+  `use a Tapestry spacing scale number (${PADDING_SCALE_LIST}) ` +
+  "for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values"
+
+const FLEX_START_END_MAP: Record<string, string> = {
+  "flex-end": "end",
+  "flex-start": "start",
+}
+
+const FLEX_RESPONSIVE_PASSTHROUGH = new Set([
+  "align",
+  "alignSelf",
+  "basis",
+  "columnGap",
+  "direction",
+  "gap",
+  "grow",
+  "justify",
+  "paddingBlock",
+  "paddingInline",
+  "rowGap",
+  "shrink",
+  "wrap",
+])
+
+type InnerPropEntry = {
+  newKey: string
+  newValue:
+    | ReturnType<JSCodeshift["stringLiteral"]>
+    | ReturnType<JSCodeshift["numericLiteral"]>
+}
+
+type InnerPropPlan = InnerPropEntry | { newEntries: InnerPropEntry[] }
+
+type InnerPropResult = InnerPropPlan | { todo: string } | null
+
+function planInnerProp(
+  propName: string,
+  propValue: unknown,
+  j: JSCodeshift
+): InnerPropResult {
+  if (typeof propValue !== "object" || propValue === null)
+    return { todo: `could not resolve value; review manually` }
+  const node = propValue as {
+    property?: unknown
+    type: string
+    value?: unknown
+  }
+
+  if (propName === "axis") {
+    let axisValue: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      axisValue = node.value
+    } else if (node.type === "MemberExpression") {
+      const prop = node.property as { name?: string; type?: string } | undefined
+      if (prop?.type === "Identifier" && typeof prop.name === "string") {
+        axisValue = CONSTANT_AXIS_MAP[prop.name] ?? null
+      }
+    }
+    const direction = axisValue !== null ? AXIS_DIRECTION_MAP[axisValue] : null
+    if (!direction)
+      return {
+        todo: `could not migrate to direction automatically; specify "horizontal" or "vertical"`,
+      }
+    return { newKey: "direction", newValue: j.stringLiteral(direction) }
+  }
+
+  if (propName === "alignment") {
+    let alignValue: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      alignValue = FLEX_START_END_MAP[node.value] ?? node.value
+    } else if (node.type === "MemberExpression") {
+      const prop = node.property as { name?: string; type?: string } | undefined
+      if (prop?.type === "Identifier" && typeof prop.name === "string") {
+        alignValue = CONSTANT_ALIGN_MAP[prop.name] ?? null
+      }
+    }
+    if (alignValue === "fill")
+      return {
+        todo: '"fill" has no Flex equivalent; use expand on the child element instead',
+      }
+    if (alignValue === null || !VALID_ALIGN_VALUES.has(alignValue))
+      return {
+        todo: `could not migrate to align automatically; valid values are: ${[...VALID_ALIGN_VALUES].join(", ")}`,
+      }
+    return { newKey: "align", newValue: j.stringLiteral(alignValue) }
+  }
+
+  if (propName === "distribution") {
+    let distValue: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      distValue = node.value
+    } else if (node.type === "MemberExpression") {
+      const prop = node.property as { name?: string; type?: string } | undefined
+      if (prop?.type === "Identifier" && typeof prop.name === "string") {
+        distValue = CONSTANT_DISTRIBUTION_MAP[prop.name] ?? null
+      }
+    }
+    if (distValue === "fill")
+      return {
+        todo: '"fill" has no Flex equivalent; use expand on child elements instead',
+      }
+    if (distValue === null || !VALID_JUSTIFY_VALUES.has(distValue))
+      return {
+        todo: `could not migrate to justify automatically; valid values are: ${[...VALID_JUSTIFY_VALUES].join(", ")}`,
+      }
+    return { newKey: "justify", newValue: j.stringLiteral(distValue) }
+  }
+
+  if (propName === "spacing") {
+    if (
+      node.type === "NumericLiteral" &&
+      typeof node.value === "number" &&
+      VALID_GAP_VALUES.has(node.value)
+    ) {
+      return { newKey: "gap", newValue: j.numericLiteral(node.value) }
+    }
+    return {
+      todo: `could not migrate to gap automatically; use a Tapestry spacing scale number (${[...VALID_GAP_VALUES].join(", ")})`,
+    }
+  }
+
+  if (propName === "justifyContent") {
+    let value: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const normalized = FLEX_START_END_MAP[node.value] ?? node.value
+      value = VALID_JUSTIFY_VALUES.has(normalized) ? normalized : null
+    }
+    if (value !== null)
+      return { newKey: "justify", newValue: j.stringLiteral(value) }
+    return {
+      todo: `could not migrate to justify automatically; valid values are: ${[...VALID_JUSTIFY_VALUES].join(", ")}`,
+    }
+  }
+
+  if (propName === "alignItems") {
+    let value: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const normalized = FLEX_START_END_MAP[node.value] ?? node.value
+      value = VALID_ALIGN_VALUES.has(normalized) ? normalized : null
+    }
+    if (value !== null)
+      return { newKey: "align", newValue: j.stringLiteral(value) }
+    return {
+      todo: `could not migrate to align automatically; valid values are: ${[...VALID_ALIGN_VALUES].join(", ")}`,
+    }
+  }
+
+  if (propName === "flexDirection") {
+    const VALID_DIRECTION_VALUES = new Set([
+      "row",
+      "column",
+      "row-reverse",
+      "column-reverse",
+    ])
+    let value: string | null = null
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      value = VALID_DIRECTION_VALUES.has(node.value) ? node.value : null
+    }
+    if (value !== null)
+      return { newKey: "direction", newValue: j.stringLiteral(value) }
+    return {
+      todo: `could not migrate to direction automatically; valid values are: row, column, row-reverse, column-reverse`,
+    }
+  }
+
+  if (propName === "flexGrow" || propName === "flexShrink") {
+    const newKey = propName === "flexGrow" ? "grow" : "shrink"
+    if (node.type === "NumericLiteral" && typeof node.value === "number") {
+      return { newKey, newValue: j.numericLiteral(node.value) }
+    }
+    return {
+      todo: `could not migrate to ${newKey} automatically; use a numeric value`,
+    }
+  }
+
+  if (propName === "flexBasis") {
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      return { newKey: "basis", newValue: j.stringLiteral(node.value) }
+    }
+    if (node.type === "NumericLiteral" && typeof node.value === "number") {
+      return { newKey: "basis", newValue: j.numericLiteral(node.value) }
+    }
+    return {
+      todo: "could not migrate to basis automatically; use a string or numeric value",
+    }
+  }
+
+  if (propName === "flexWrap") {
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      return { newKey: "wrap", newValue: j.stringLiteral(node.value) }
+    }
+    return {
+      todo: "could not migrate to wrap automatically; use a string value",
+    }
+  }
+
+  if (propName === "padding") {
+    if (
+      node.type === "NumericLiteral" &&
+      typeof node.value === "number" &&
+      PADDING_SCALE.has(node.value)
+    ) {
+      return null
+    }
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const mapped = PIXEL_TO_TOKEN[node.value]
+      if (mapped !== undefined)
+        return { newKey: "padding", newValue: j.numericLiteral(mapped) }
+    }
+    return { todo: PADDING_TODO }
+  }
+
+  if (propName === "paddingHorizontal") {
+    if (
+      node.type === "NumericLiteral" &&
+      typeof node.value === "number" &&
+      PADDING_SCALE.has(node.value)
+    ) {
+      return { newKey: "paddingInline", newValue: j.numericLiteral(node.value) }
+    }
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const mapped = PIXEL_TO_TOKEN[node.value]
+      if (mapped !== undefined)
+        return { newKey: "paddingInline", newValue: j.numericLiteral(mapped) }
+    }
+    return { todo: PADDING_TODO }
+  }
+
+  if (propName === "paddingVertical") {
+    if (
+      node.type === "NumericLiteral" &&
+      typeof node.value === "number" &&
+      PADDING_SCALE.has(node.value)
+    ) {
+      return { newKey: "paddingBlock", newValue: j.numericLiteral(node.value) }
+    }
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const mapped = PIXEL_TO_TOKEN[node.value]
+      if (mapped !== undefined)
+        return { newKey: "paddingBlock", newValue: j.numericLiteral(mapped) }
+    }
+    return { todo: PADDING_TODO }
+  }
+
+  if (propName === "flex") {
+    if (node.type === "StringLiteral" && typeof node.value === "string") {
+      const parts = (node.value as string).trim().split(/\s+/)
+      if (parts.length === 3) {
+        const grow = Number(parts[0])
+        const shrink = Number(parts[1])
+        const basis = parts[2]
+        if (Number.isFinite(grow) && Number.isFinite(shrink)) {
+          return {
+            newEntries: [
+              { newKey: "grow", newValue: j.numericLiteral(grow) },
+              { newKey: "shrink", newValue: j.numericLiteral(shrink) },
+              { newKey: "basis", newValue: j.stringLiteral(basis) },
+            ],
+          }
+        }
+      }
+      return {
+        todo: "could not migrate flex automatically; use grow, shrink, and basis individually",
+      }
+    }
+    if (
+      node.type === "NumericLiteral" &&
+      typeof node.value === "number" &&
+      node.value === 0
+    ) {
+      return {
+        newEntries: [
+          { newKey: "grow", newValue: j.numericLiteral(0) },
+          { newKey: "shrink", newValue: j.numericLiteral(1) },
+          { newKey: "basis", newValue: j.stringLiteral("0") },
+        ],
+      }
+    }
+    return {
+      todo: "expand is not supported in responsive; use grow, shrink, and basis individually",
+    }
+  }
+
+  if (FLEX_RESPONSIVE_PASSTHROUGH.has(propName)) return null
+
+  return {
+    todo: `not a valid Flex responsive prop; remove or replace manually`,
+  }
+}
+
+const TODO_TEXT =
+  "could not migrate mediaQueries to responsive automatically; " +
+  "ensure breakpoints are xs/sm/md/lg/xl with static object values"
+
+const transform: Transform = attributeTransformFactory({
+  condition: hasAttribute("mediaQueries"),
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const mediaQueriesAttr = getAttribute({ element, name: "mediaQueries" })
+    if (!mediaQueriesAttr) return false
+
+    const attrValue = mediaQueriesAttr.value
+
+    if (attrValue?.type !== "JSXExpressionContainer") {
+      addCommentToAttribute({ attribute: mediaQueriesAttr, j, text: TODO_TEXT })
+      return true
+    }
+
+    if (attrValue.expression.type !== "ObjectExpression") {
+      addCommentToAttribute({ attribute: mediaQueriesAttr, j, text: TODO_TEXT })
+      return true
+    }
+
+    const outerObj = attrValue.expression
+    const mutations: Array<() => void> = []
+    const innerTodos: Array<{ key: string; message: string }> = []
+
+    for (const outerProp of outerObj.properties) {
+      if (outerProp.type !== "ObjectProperty") {
+        addCommentToAttribute({
+          attribute: mediaQueriesAttr,
+          j,
+          text: TODO_TEXT,
+        })
+        return true
+      }
+
+      const outerKey = outerProp.key
+      if (outerProp.computed || outerKey.type !== "Identifier") {
+        addCommentToAttribute({
+          attribute: mediaQueriesAttr,
+          j,
+          text: TODO_TEXT,
+        })
+        return true
+      }
+
+      if (!VALID_FLEX_BREAKPOINTS.has(outerKey.name)) {
+        addCommentToAttribute({
+          attribute: mediaQueriesAttr,
+          j,
+          text: TODO_TEXT,
+        })
+        return true
+      }
+
+      const outerVal = outerProp.value
+      if (outerVal.type !== "ObjectExpression") {
+        addCommentToAttribute({
+          attribute: mediaQueriesAttr,
+          j,
+          text: TODO_TEXT,
+        })
+        return true
+      }
+
+      for (const innerProp of outerVal.properties) {
+        if (innerProp.type !== "ObjectProperty") {
+          innerTodos.push({
+            key: "[spread]",
+            message:
+              "spread elements inside a breakpoint object cannot be migrated automatically; review manually",
+          })
+          continue
+        }
+
+        const innerKey = innerProp.key
+        if (innerProp.computed || innerKey.type !== "Identifier") {
+          innerTodos.push({
+            key: "[computed key]",
+            message:
+              "computed property keys inside a breakpoint object cannot be migrated automatically; review manually",
+          })
+          continue
+        }
+
+        const result = planInnerProp(innerKey.name, innerProp.value, j)
+        if (result === null) continue
+        if ("todo" in result) {
+          innerTodos.push({ key: innerKey.name, message: result.todo })
+          continue
+        }
+
+        if ("newEntries" in result) {
+          const entries = result.newEntries
+          mutations.push(() => {
+            const idx = outerVal.properties.indexOf(innerProp)
+            outerVal.properties.splice(
+              idx,
+              1,
+              ...entries.map(({ newKey, newValue }) =>
+                j.objectProperty(j.identifier(newKey), newValue)
+              )
+            )
+          })
+        } else {
+          mutations.push(() => {
+            innerKey.name = result.newKey
+            innerProp.value = result.newValue
+          })
+        }
+      }
+    }
+
+    mediaQueriesAttr.name.name = "responsive"
+    for (const mutation of mutations) {
+      mutation()
+    }
+
+    if (innerTodos.length > 0) {
+      const messageToKeys = new Map<string, string[]>()
+      for (const { key, message } of innerTodos) {
+        const existing = messageToKeys.get(message)
+        if (existing) {
+          if (!existing.includes(key)) existing.push(key)
+        } else {
+          messageToKeys.set(message, [key])
+        }
+      }
+      const parts = [...messageToKeys].map(
+        ([message, keys]) => `${keys.join(", ")}: ${message}`
+      )
+      commentOnAttr(
+        mediaQueriesAttr,
+        "responsive",
+        `could not automatically migrate all breakpoint props — ${parts.join("; ")}`,
+        j
+      )
+    }
+
+    return true
+  },
+})
+
+export default transform