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

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

@@ -0,0 +1,795 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./mediaQueriesToResponsive"
+
+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("mediaQueriesToResponsive transform", () => {
+  it("renames mediaQueries to responsive", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("mediaQueries=")
+  })
+
+  it("preserves all valid breakpoint keys in the output", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ xs: { axis: "horizontal" }, sm: { axis: "horizontal" }, md: { axis: "vertical" }, lg: { axis: "vertical" }, xl: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("xs:")
+    expect(result).toContain("sm:")
+    expect(result).toContain("md:")
+    expect(result).toContain("lg:")
+    expect(result).toContain("xl:")
+    expect(result).not.toContain("mediaQueries=")
+  })
+
+  it("migrates all known inner props within a breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "vertical", alignment: "center", distribution: "space-between", spacing: 2 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("mediaQueries=")
+    expect(result).not.toContain("axis:")
+    expect(result).not.toContain("alignment:")
+    expect(result).not.toContain("distribution:")
+    expect(result).not.toContain("spacing:")
+    expect(result).toContain("direction:")
+    expect(result).toContain("align:")
+    expect(result).toContain("justify:")
+    expect(result).toContain("gap:")
+  })
+
+  it("resolves StackView constants within breakpoint values", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: StackView.VERTICAL } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("mediaQueries=")
+    expect(result).not.toContain("axis:")
+    expect(result).toContain("direction:")
+  })
+
+  it("migrates the justifyContent CSS alias to justify", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { justifyContent: "center" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("justifyContent:")
+    expect(result).toContain("justify:")
+    expect(result).toContain('"center"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("normalizes justifyContent flex-start/flex-end to start/end", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { justifyContent: "flex-start" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("justifyContent:")
+    expect(result).toContain("justify:")
+    expect(result).toContain('"start"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the alignItems CSS alias to align", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { alignItems: "stretch" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("alignItems:")
+    expect(result).toContain("align:")
+    expect(result).toContain('"stretch"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("normalizes alignItems flex-start/flex-end to start/end", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { alignItems: "flex-end" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("alignItems:")
+    expect(result).toContain("align:")
+    expect(result).toContain('"end"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the flexDirection CSS alias to direction", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flexDirection: "row" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("flexDirection:")
+    expect(result).toContain("direction:")
+    expect(result).toContain('"row"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the flexGrow CSS alias to grow", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flexGrow: 1 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("flexGrow:")
+    expect(result).toContain("grow:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the flexShrink CSS alias to shrink", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flexShrink: 0 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("flexShrink:")
+    expect(result).toContain("shrink:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the flexBasis CSS alias to basis", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flexBasis: "100%" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("flexBasis:")
+    expect(result).toContain("basis:")
+    expect(result).toContain('"100%"')
+    expect(result).not.toContain("TODO")
+  })
+
+  it("migrates the flexWrap CSS alias to wrap", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flexWrap: "wrap" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("flexWrap:")
+    expect(result).toContain("wrap:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("passes through already-valid Flex responsive props unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { direction: "row", gap: 2, wrap: "wrap", grow: 1, shrink: 0, basis: "100%" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("direction:")
+    expect(result).toContain("gap:")
+    expect(result).toContain("wrap:")
+    expect(result).toContain("grow:")
+    expect(result).toContain("shrink:")
+    expect(result).toContain("basis:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it.each(["grow", "shrink", "basis"] as const)(
+    "passes %s through a breakpoint object without a TODO",
+    (prop) => {
+      const value = prop === "basis" ? '"100%"' : "1"
+      const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { ${prop}: ${value} } }}>Test</StackView>
+}
+      `.trim()
+
+      const result = applyTransform(input)
+      expect(result).toContain("responsive=")
+      expect(result).toContain(`${prop}:`)
+      expect(result).not.toContain("TODO")
+    }
+  )
+
+  it('expands flex="N N basis" inside a breakpoint into grow/shrink/basis', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: "1 0 0" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("grow:")
+    expect(result).toContain("shrink:")
+    expect(result).toContain("basis:")
+    expect(result).not.toContain("flex:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it('flags flex="N N basis" inside a breakpoint with a TODO instead of duplicating an existing grow key', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: "1 0 0", grow: 5 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain("grow: 5")
+    expect(result?.match(/grow:/g)).toHaveLength(1)
+  })
+
+  it('flags flex="inherit" inside a breakpoint with a generic TODO, not an expand-specific one', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: "inherit" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).not.toContain("expand is not supported")
+  })
+
+  it('flags flex="1" inside a breakpoint with a TODO (expand not supported in responsive)', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: "1" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("TODO")
+    expect(result).toContain("expand is not supported")
+  })
+
+  it("flags flex={1} inside a breakpoint with a TODO (expand not supported in responsive)", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: 1 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+  })
+
+  it("expands flex={0} inside a breakpoint into grow={0} shrink={1} basis='0'", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: 0 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("grow: 0")
+    expect(result).toContain("shrink: 1")
+    expect(result).toContain('basis: "0"')
+    expect(result).not.toContain("flex:")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("flags flex={0} inside a breakpoint with a TODO instead of duplicating an existing grow key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: 0, grow: 5 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain("grow: 5")
+    expect(result?.match(/grow:/g)).toHaveLength(1)
+  })
+
+  it("flags axis inside a breakpoint with a TODO instead of duplicating an existing direction key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "horizontal", direction: "column" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('direction: "column"')
+    expect(result?.match(/direction:/g)).toHaveLength(1)
+  })
+
+  it("flags both axis and flexDirection with a TODO when they both target direction in the same breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "horizontal", flexDirection: "column" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('axis: "horizontal"')
+    expect(result).toContain('flexDirection: "column"')
+    expect(result?.match(/direction:/g)).toBeNull()
+  })
+
+  it("flags alignItems inside a breakpoint with a TODO instead of duplicating an existing align key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { alignItems: "center", align: "start" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('align: "start"')
+    expect(result?.match(/align:/g)).toHaveLength(1)
+  })
+
+  it("flags an unsupported breakpoint (xxs) with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ xxs: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("mediaQueries=")
+    expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+    expect(result).not.toContain("responsive=")
+  })
+
+  it("flags an unsupported breakpoint (xxl) with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ xxl: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("mediaQueries=")
+    expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+    expect(result).not.toContain("responsive=")
+  })
+
+  it("flags a dynamic mediaQueries value with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ breakpoints }) {
+  return <StackView mediaQueries={breakpoints}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("mediaQueries=")
+    expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+    expect(result).not.toContain("responsive=")
+  })
+
+  it("flags a spread in the outer object with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ breakpoints }) {
+  return <StackView mediaQueries={{ ...breakpoints, md: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("mediaQueries=")
+    expect(result).toContain("TODO: tapestry-migration (mediaQueries)")
+    expect(result).not.toContain("responsive=")
+  })
+
+  it("flags unknown inner props with a TODO and still renames the attribute", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { visible: false } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — visible: not a valid Flex responsive prop; remove or replace manually */
+          responsive={{ md: { visible: false } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("flags unresolvable inner prop values with a TODO and still renames the attribute", () => {
+    const offScaleInput = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { spacing: 10 } }}>Test</StackView>
+}
+    `.trim()
+    const dynamicInput = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test({ ax }) {
+  return <StackView mediaQueries={{ md: { axis: ax } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(offScaleInput)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — spacing: could not migrate to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) */
+          responsive={{ md: { spacing: 10 } }}>Test</StackView>
+        );
+      }"
+    `)
+    expect(applyTransform(dynamicInput)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test({ ax }) {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — axis: could not migrate to direction automatically; specify "horizontal" or "vertical" */
+          responsive={{ md: { axis: ax } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("partially migrates: renames cleanly-migratable props and flags others with one TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "vertical", distribution: "fill", visible: false } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — distribution: "fill" has no Flex equivalent; use expand on child elements instead; visible: not a valid Flex responsive prop; remove or replace manually */
+          responsive={{ md: { direction: "column", distribution: "fill", visible: false } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("adds a TODO for fill inside a breakpoint while still renaming the attribute", () => {
+    const distributionFillInput = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { distribution: "fill" } }}>Test</StackView>
+}
+    `.trim()
+    const alignmentFillInput = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { alignment: "fill" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(distributionFillInput)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — distribution: "fill" has no Flex equivalent; use expand on child elements instead */
+          responsive={{ md: { distribution: "fill" } }}>Test</StackView>
+        );
+      }"
+    `)
+    expect(applyTransform(alignmentFillInput)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — alignment: "fill" has no Flex equivalent; use expand on the child element instead */
+          responsive={{ md: { alignment: "fill" } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("leaves a valid scale-number padding unchanged", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { padding: 2 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("padding: 2")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("converts a pixel-string padding to a token inside a breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { padding: "8px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return <StackView responsive={{ md: { padding: 1 } }}>Test</StackView>;
+      }"
+    `)
+  })
+
+  it("adds a TODO for unmappable padding inside a breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { padding: "10px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — padding: could not migrate padding automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values */
+          responsive={{ md: { padding: "10px" } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("renames paddingHorizontal to paddingInline for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingHorizontal: 1 } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return <StackView responsive={{ md: { paddingInline: 1 } }}>Test</StackView>;
+      }"
+    `)
+  })
+
+  it("renames paddingHorizontal to paddingInline and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingHorizontal: "16px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return <StackView responsive={{ md: { paddingInline: 2 } }}>Test</StackView>;
+      }"
+    `)
+  })
+
+  it("adds a TODO for unmappable paddingHorizontal inside a breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingHorizontal: "10px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — paddingHorizontal: could not migrate padding automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values */
+          responsive={{ md: { paddingHorizontal: "10px" } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("renames paddingVertical to paddingBlock for a valid scale number", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingVertical: 1 } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return <StackView responsive={{ md: { paddingBlock: 1 } }}>Test</StackView>;
+      }"
+    `)
+  })
+
+  it("renames paddingVertical to paddingBlock and converts a pixel string", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingVertical: "16px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return <StackView responsive={{ md: { paddingBlock: 2 } }}>Test</StackView>;
+      }"
+    `)
+  })
+
+  it("adds a TODO for unmappable paddingVertical inside a breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView mediaQueries={{ md: { paddingVertical: "10px" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toMatchInlineSnapshot(`
+      "import { StackView } from "@planningcenter/tapestry-react"
+      export default function Test() {
+        return (
+          <StackView /* TODO: tapestry-migration (responsive): could not automatically migrate all breakpoint props — paddingVertical: could not migrate padding automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values */
+          responsive={{ md: { paddingVertical: "10px" } }}>Test</StackView>
+        );
+      }"
+    `)
+  })
+
+  it("respects an aliased StackView import", () => {
+    const input = `
+import { StackView as Stack } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <Stack mediaQueries={{ md: { axis: "vertical" } }}>Test</Stack>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).not.toContain("mediaQueries=")
+  })
+
+  it("returns null when there is no mediaQueries to migrate", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "vertical" } }}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+})