@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

package/codemods/migrate/base-elements/skeleton.ts

@@ -0,0 +1,83 @@
+/**
+ * Skeleton → Skeleton. MUI's `width`/`height` become the inline `style` (Zenith sizes a Skeleton
+ * by className or style); `variant="circle"` becomes a round style; `animation` is dropped.
+ */
+import type { MigrateContext } from "../lib/types"
+import { dropWithHint } from "./mui-props"
+
+export const handles = ["Skeleton", "SkeletonProps"] as const
+
+export function migrate(ctx: MigrateContext): void {
+  const { j, jsx } = ctx
+  const elements = ctx.elements("Skeleton")
+  ctx.moveElements("Skeleton")
+  ctx.move("SkeletonProps")
+
+  elements.forEach((path) => {
+    const el = path.node
+    jsx.removeAttr(el, "animation")
+
+    const sized = ["width", "height"]
+      .map((name) => jsx.attr(el, name))
+      .filter((a): a is NonNullable<typeof a> => !!a)
+    const variant = jsx.attr(el, "variant")
+    const variantValue = jsx.literal(variant)
+    const round = variantValue === "circle" || variantValue === "circular"
+    if (variant) {
+      if (typeof variantValue === "string") jsx.removeAttr(el, "variant")
+      else {
+        jsx.removeAttr(el, "variant")
+        ctx.todo(
+          path,
+          "Skeleton",
+          `dropped ${jsx.print(variant)}: Skeleton variant is "default" | "ai"; a circle is style={{ borderRadius: "50%" }}`
+        )
+      }
+    }
+
+    if (sized.length || round) {
+      const style = jsx.attr(el, "style")
+      const object =
+        style?.value?.type === "JSXExpressionContainer" &&
+        style.value.expression.type === "ObjectExpression"
+          ? style.value.expression
+          : undefined
+      if (style && !object) {
+        const printed = sized.map((a) => jsx.print(a)).join(" ")
+        for (const a of sized) jsx.removeAttr(el, jsx.attrName(a))
+        ctx.todo(
+          path,
+          "Skeleton",
+          `dropped ${printed}${round ? " and the circle shape" : ""}: merge them into the existing style (width/height/borderRadius)`
+        )
+        return
+      }
+      const entries = (object?.properties ?? []).map((prop) =>
+        j(prop as never).toSource()
+      )
+      for (const a of sized) {
+        const name = jsx.attrName(a)
+        const value =
+          a.value?.type === "JSXExpressionContainer"
+            ? j(a.value.expression as never).toSource()
+            : JSON.stringify(String(jsx.literal(a) ?? ""))
+        entries.push(`${name}: ${value}`)
+        jsx.removeAttr(el, name)
+      }
+      if (round) entries.push(`borderRadius: "50%"`)
+      const next = jsx.parseAttr(`style={{ ${entries.join(", ")} }}`)
+      if (style) {
+        el.openingElement.attributes = (el.openingElement.attributes ?? []).map(
+          (a) => (a === style ? next : a)
+        )
+      } else {
+        el.openingElement.attributes = [
+          ...(el.openingElement.attributes ?? []),
+          next,
+        ]
+      }
+    }
+
+    dropWithHint(ctx, path, "Skeleton")
+  })
+}

package/codemods/migrate/base-elements/switch.ts

@@ -0,0 +1,19 @@
+/**
+ * Switch → Switch: `onChange(event, checked)` → `onCheckedChange(checked)`, `size` small → sm,
+ * base-elements' `label`/`labelPlacement` → a wrapping `<Label>`. See `migrateCheckedControl`.
+ */
+import type { MigrateContext } from "../lib/types"
+import { migrateCheckedControl, moveElements } from "./shared"
+
+export const handles = ["Switch", "SwitchProps"] as const
+
+export function migrate(ctx: MigrateContext): void {
+  ctx.move("SwitchProps")
+  moveElements(ctx, "Switch", "Switch", (path) =>
+    migrateCheckedControl(ctx, path, "Switch", {
+      tristate: false,
+      sizes: { small: "sm", medium: "base" },
+      fallbackSize: "base",
+    })
+  )
+}

package/codemods/migrate/base-elements/tabs.ts

@@ -0,0 +1,222 @@
+/**
+ * The MUI tabs family → Tabs / TabsList / TabsTrigger / TabsContent.
+ *
+ * - `TabContext value` → `Tabs value`; the `onChange` of the tab list inside it moves up as
+ *   `onValueChange` (MUI's `(event, value)` handler becomes `(value)`).
+ * - MUI `Tabs` (value + onChange + Tab children) is the list: inside a `TabContext` it becomes
+ *   `TabsList`; on its own it becomes `Tabs` around a new `TabsList`. `TabList` and
+ *   base-elements' `PrimaryTabs` become `TabsList`.
+ * - `Tab label value` → `TabsTrigger value` with the label as children; `icon` leads them.
+ * - `TabPanel` → `TabsContent`.
+ * - Radix values are strings: a numeric or missing Tab value (MUI fell back to the index) is
+ *   written as a string and reported. Indicator/text colours are theming and dropped.
+ */
+import type { ASTPath, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  attrExpression,
+  insertChild,
+  nestChildren,
+  printAttr,
+  printAttrs,
+  setChildren,
+  takeAttrs,
+  valueHandler,
+  familyStays,
+} from "./shared"
+
+export const handles = [
+  "TabContext",
+  "TabContextProps",
+  "Tabs",
+  "TabsProps",
+  "PrimaryTabs",
+  "TabList",
+  "TabListProps",
+  "Tab",
+  "TabPanel",
+  "TabPanelProps",
+  "useTabContext",
+] as const
+
+const SILENT_LIST = [
+  "indicatorColor",
+  "textColor",
+  "buttonsVariant",
+  "TabIndicatorProps",
+  "selectionFollowsFocus",
+]
+const REPORTED_LIST = [
+  "variant",
+  "scrollButtons",
+  "centered",
+  "ScrollButtonComponent",
+  "classes",
+]
+
+export function migrate(ctx: MigrateContext): void {
+  const { j, jsx } = ctx
+  if (
+    familyStays(
+      ctx,
+      ["TabContext", "Tabs", "PrimaryTabs", "TabList", "Tab", "TabPanel"],
+      "migrate these tabs by hand: Tabs value onValueChange > TabsList > TabsTrigger, and TabsContent"
+    )
+  )
+    return
+  const listTags = ["Tabs", "TabList", "PrimaryTabs"]
+    .map((n) => ctx.names[n])
+    .filter(Boolean)
+
+  // Lists inside a TabContext: their onChange moves up to the new Tabs root.
+  const contained = new Set<JSXElement>()
+  ctx.elements("TabContext").forEach((path) => {
+    const lists = j(path)
+      .find(j.JSXElement)
+      .filter((p) => listTags.includes(jsx.tagName(p.node) ?? ""))
+      .paths()
+    for (const list of lists) {
+      contained.add(list.node)
+      moveHandler(ctx, list, path.node)
+    }
+  })
+
+  const standalone = ctx
+    .elements("Tabs")
+    .paths()
+    .filter((p) => !contained.has(p.node))
+  const containedTabs = ctx
+    .elements("Tabs")
+    .paths()
+    .filter((p) => contained.has(p.node))
+  // Moved even when every MUI Tabs is a list inside a TabContext: the TabContext → Tabs rename
+  // then lands on the same Zenith binding instead of an alias.
+  ctx.move("Tabs")
+  ctx.move("TabsProps")
+  ctx.move("TabContext", "Tabs")
+  ctx.move("TabContextProps", "TabsProps")
+  ctx.move("TabList", "TabsList")
+  ctx.move("TabListProps", "TabsListProps")
+  ctx.move("PrimaryTabs", "TabsList")
+  ctx.move("Tab", "TabsTrigger")
+  ctx.move("TabPanel", "TabsContent")
+  ctx.move("TabPanelProps", "TabsContentProps")
+  ctx.keep(
+    "useTabContext",
+    "no Zenith equivalent: read the selected value from the state you pass to Tabs"
+  )
+
+  for (const path of standalone) {
+    moveHandler(ctx, path, path.node)
+    const list = nestChildren(j, path.node, ctx.ensureZenith("TabsList"))
+    cleanList(ctx, path, list)
+  }
+  for (const path of containedTabs) {
+    jsx.rename(path.node, ctx.ensureZenith("TabsList"))
+    jsx.removeAttr(path.node, "value")
+    cleanList(ctx, path, path.node)
+  }
+  for (const name of ["TabList", "PrimaryTabs"])
+    ctx.elements(name).forEach((path) => {
+      if (!contained.has(path.node)) moveHandler(ctx, path, path.node)
+      cleanList(ctx, path, path.node)
+    })
+
+  ctx.elements("Tab").forEach((path) => migrateTab(ctx, path))
+}
+
+/**
+ * `onChange={(event, value) => …}` on a list → `onValueChange={(value) => …}` on `root` (the
+ * TabContext, or the standalone Tabs itself).
+ */
+function moveHandler(
+  ctx: MigrateContext,
+  list: ASTPath<JSXElement>,
+  root: JSXElement
+): void {
+  const { j, jsx } = ctx
+  const onChange = jsx.removeAttr(list.node, "onChange")
+  if (!onChange) return
+  const handler = valueHandler(j, attrExpression(onChange), {
+    valueName: "value",
+  })
+  if (handler) jsx.setAttr(root, "onValueChange", handler)
+  else
+    ctx.todo(
+      list,
+      "Tabs",
+      `dropped ${printAttr(ctx, onChange)} (Tabs onValueChange(value) passes only the value: call your handler with it)`
+    )
+}
+
+function cleanList(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  list: JSXElement
+): void {
+  const root = path.node
+  takeAttrs(ctx, root, SILENT_LIST)
+  // On a standalone Tabs, orientation and the list's labelling belong to the root and list.
+  if (root !== list) {
+    const toList = takeAttrs(ctx, root, ["aria-label", "aria-labelledby"])
+    list.openingElement.attributes = [
+      ...(list.openingElement.attributes ?? []),
+      ...toList,
+    ]
+  }
+  const reported = takeAttrs(ctx, root, REPORTED_LIST)
+  if (reported.length)
+    ctx.todo(
+      path,
+      "Tabs",
+      `dropped ${printAttrs(ctx, reported)} (TabsList has one layout; scrolling and centering are yours to style)`
+    )
+}
+
+function migrateTab(ctx: MigrateContext, path: ASTPath<JSXElement>): void {
+  const { j, jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+
+  const value = jsx.attr(el, "value")
+  const literal = jsx.literal(value)
+  if (typeof literal === "number") {
+    jsx.setAttr(el, "value", String(literal))
+    reported.push(
+      `value={${literal}} is now "${literal}": Radix tab values are strings; make the Tabs value a string too`
+    )
+  } else if (!value) {
+    const index = siblingIndex(ctx, path)
+    jsx.setAttr(el, "value", String(index))
+    reported.push(
+      `had no value, so MUI used its index: it is value="${index}" now; give it a real one and make the Tabs value match`
+    )
+  }
+
+  const label = jsx.removeAttr(el, "label")
+  const children: JSXElement["children"] = label
+    ? [jsx.childFromValue(label)]
+    : []
+  setChildren(j, el, children)
+  const icon = jsx.removeAttr(el, "icon")
+  if (icon) insertChild(j, el, jsx.childFromValue(icon), "start")
+  takeAttrs(ctx, el, ["wrapped", "disableRipple", "disableFocusRipple"])
+
+  const unsupported = takeAttrs(ctx, el, ["component", "to", "href", "classes"])
+  if (unsupported.length)
+    reported.push(
+      `dropped ${printAttrs(ctx, unsupported)} (a link tab is a TabsTrigger asChild around your link)`
+    )
+  if (reported.length) ctx.todo(path, "Tab", reported.join("; "))
+}
+
+/** The Tab's position among its sibling Tabs, MUI's fallback value. */
+function siblingIndex(ctx: MigrateContext, path: ASTPath<JSXElement>): number {
+  const parent = path.parent?.node as JSXElement | undefined
+  const tag = ctx.jsx.tagName(path.node)
+  const siblings = (parent?.children ?? []).filter(
+    (c): c is JSXElement =>
+      c.type === "JSXElement" && ctx.jsx.tagName(c) === tag
+  )
+  return Math.max(0, siblings.indexOf(path.node))
+}