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

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

@@ -0,0 +1,188 @@
+/**
+ * Button → Button.
+ *
+ * - `variant` × `color` → Zenith `variant`: contained → primary (Zenith's default, omitted),
+ *   outlined → secondary, text (MUI's default) → tertiary for an accent `color`, ghost for
+ *   `default`/`inherit`/none. `color` is theming and dropped.
+ * - `size`: small → sm, medium → base (omitted), large → lg.
+ * - `startIcon`/`endIcon` → first/last child; Zenith sizes and spaces child icons itself.
+ * - `href` or `component` → `asChild` around an `<a>` (or the component), which takes the
+ *   link props (`href`, `to`, `target`, …).
+ * - `fullWidth` → `style={{ width: "100%" }}`.
+ * - Ripple and elevation switches are dropped; other MUI-only props are dropped and reported.
+ */
+import type { ASTPath, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  attrExpression,
+  nestChildren,
+  insertChild,
+  isTrue,
+  mapAttr,
+  parseExpression,
+  printAttrs,
+  source,
+  stringIn,
+  takeAttrs,
+  printAttr,
+  moveElements,
+  defaultButtonType,
+} from "./shared"
+
+export const handles = ["Button", "ButtonProps"] as const
+
+const LINK_PROPS = [
+  "href",
+  "to",
+  "target",
+  "rel",
+  "download",
+  "replace",
+  "state",
+  "hrefLang",
+  "referrerPolicy",
+]
+const SILENT = [
+  "color",
+  "disableElevation",
+  "disableRipple",
+  "disableFocusRipple",
+  "disableTouchRipple",
+  "focusRipple",
+  "centerRipple",
+]
+const UNSUPPORTED = [
+  "classes",
+  "TouchRippleProps",
+  "buttonRef",
+  "action",
+  "focusVisibleClassName",
+  "onFocusVisible",
+]
+
+export function migrate(ctx: MigrateContext): void {
+  moveElements(ctx, "Button", "Button", (path) => migrateButton(ctx, path))
+  ctx.move("ButtonProps")
+}
+
+function migrateButton(ctx: MigrateContext, path: ASTPath<JSXElement>): void {
+  const { j, jsx } = ctx
+  const el = path.node
+  const color = jsx.literal(jsx.attr(el, "color"))
+  const accent = color === "primary" || color === "secondary"
+  const text = accent ? "tertiary" : "ghost"
+  const reported: string[] = []
+
+  if (!jsx.attr(el, "variant")) jsx.setAttr(el, "variant", text)
+  else if (
+    !mapAttr(
+      ctx,
+      el,
+      "variant",
+      { contained: "primary", outlined: "secondary", text },
+      { fallback: "primary" }
+    )
+  ) {
+    reported.push(
+      `${printAttrs(ctx, takeAttrs(ctx, el, ["variant"]))} (contained → primary, outlined → secondary, text → ${text})`
+    )
+  }
+  if (
+    !mapAttr(
+      ctx,
+      el,
+      "size",
+      { small: "sm", medium: "base", large: "lg" },
+      { fallback: "base" }
+    )
+  )
+    reported.push(
+      `${printAttrs(ctx, takeAttrs(ctx, el, ["size"]))} (small → sm, medium → base, large → lg)`
+    )
+  takeAttrs(ctx, el, SILENT)
+
+  for (const [name, at] of [
+    ["startIcon", "start"],
+    ["endIcon", "end"],
+  ] as const) {
+    const icon = jsx.removeAttr(el, name)
+    if (icon) insertChild(j, el, jsx.childFromValue(icon), at)
+  }
+
+  const fullWidth = jsx.removeAttr(el, "fullWidth")
+  if (fullWidth) {
+    const hundred = stringIn(ctx, "100%")
+    if (!isTrue(ctx, fullWidth))
+      reported.push(
+        `${printAttr(ctx, fullWidth)} (set width: 100% in your styles)`
+      )
+    else if (!jsx.attr(el, "style"))
+      jsx.setAttr(
+        el,
+        "style",
+        parseExpression(j, `{ width: ${source(j, hundred)} }`)
+      )
+    else {
+      const style = jsx.styleObject(el)
+      if (style) jsx.setObjectKey(style, "width", hundred)
+      else
+        reported.push(
+          `${printAttr(ctx, fullWidth)} (set width: 100% in your styles)`
+        )
+    }
+  }
+
+  const component = jsx.attr(el, "component")
+  const link = jsx.attr(el, "href") ?? jsx.attr(el, "to")
+  if (component || link) {
+    const tag = component ? componentTag(ctx, component) : "a"
+    jsx.removeAttr(el, "component")
+    if (tag) {
+      const child = nestChildren(j, el, tag, takeAttrs(ctx, el, LINK_PROPS))
+      if (tag.includes(".")) {
+        child.openingElement.name = memberName(ctx, tag)
+        if (child.closingElement)
+          child.closingElement.name = memberName(ctx, tag)
+      }
+      jsx.setAttr(el, "asChild", null)
+    } else {
+      reported.push(
+        `${printAttr(ctx, component!)} (render the element inside <Button asChild>)`
+      )
+    }
+  }
+
+  const unsupported = takeAttrs(ctx, el, UNSUPPORTED)
+  if (unsupported.length)
+    reported.push(`${printAttrs(ctx, unsupported)} (MUI-only)`)
+  defaultButtonType(ctx, el)
+  if (reported.length)
+    ctx.todo(path, "Button", `dropped ${reported.join("; ")}`)
+}
+
+/** `component="span"` → `span`, `component={Link}` → `Link`, `{Nav.Link}` → `Nav.Link`. */
+function componentTag(
+  ctx: MigrateContext,
+  a: NonNullable<ReturnType<MigrateContext["jsx"]["attr"]>>
+): string | undefined {
+  const value = ctx.jsx.literal(a)
+  if (typeof value === "string") return value
+  const expression = attrExpression(a)
+  if (expression?.type === "Identifier") return expression.name
+  if (
+    expression?.type === "MemberExpression" &&
+    expression.object.type === "Identifier" &&
+    expression.property.type === "Identifier" &&
+    !expression.computed
+  )
+    return `${expression.object.name}.${expression.property.name}`
+  return undefined
+}
+
+function memberName(ctx: MigrateContext, tag: string) {
+  const [object, property] = tag.split(".")
+  return ctx.j.jsxMemberExpression(
+    ctx.j.jsxIdentifier(object),
+    ctx.j.jsxIdentifier(property)
+  )
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Checkbox → Checkbox: `onChange(event, checked)` → `onCheckedChange(checked)` with reads of the
+ * value as `checked === true` (Radix passes `boolean | "indeterminate"`), `indeterminate` →
+ * `checked="indeterminate"`, base-elements' `label`/`labelPlacement` → a wrapping `<Label>`.
+ * See `migrateCheckedControl`.
+ */
+import type { MigrateContext } from "../lib/types"
+import { migrateCheckedControl, moveElements } from "./shared"
+
+export const handles = ["Checkbox", "CheckboxProps"] as const
+
+export function migrate(ctx: MigrateContext): void {
+  ctx.move("CheckboxProps")
+  moveElements(ctx, "Checkbox", "Checkbox", (path) =>
+    migrateCheckedControl(ctx, path, "Checkbox", { tristate: true })
+  )
+}

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

@@ -0,0 +1,87 @@
+/**
+ * Chip → Pill. `label` becomes children, `onDelete` becomes `onRemove`, MUI's theme colours
+ * become Pill colour families and `outlined` the `surface` variant. Avatars, custom delete icons
+ * and random colours are reported.
+ */
+import type { MigrateContext } from "../lib/types"
+import { dropWithHint } from "./mui-props"
+
+export const handles = ["Chip", "ChipProps", "RandomColoredChip"] as const
+
+export const PILL_COLORS =
+  "lime | green | teal | cyan | indigo | purple | pink | red | orange | yellow | bronze | gray | accent | warning | success | error"
+
+export function migrate(ctx: MigrateContext): void {
+  const { jsx } = ctx
+  const elements = ctx.elements("Chip")
+  ctx.moveElements("Chip", "Pill")
+  ctx.move("ChipProps", "PillProps")
+  ctx.keep(
+    "RandomColoredChip",
+    `Pill with a color= you pick (${PILL_COLORS}); there is no random colour`
+  )
+
+  elements.forEach((path) => {
+    const el = path.node
+    const children: NonNullable<typeof el.children> = []
+
+    const icon = jsx.attr(el, "icon")
+    if (icon) {
+      children.push(jsx.childFromValue(icon))
+      jsx.removeAttr(el, "icon")
+    }
+    const label = jsx.attr(el, "label")
+    if (label) {
+      children.push(jsx.childFromValue(label))
+      jsx.removeAttr(el, "label")
+    }
+    if (children.length) jsx.setChildren(el, children)
+
+    jsx.renameAttr(el, "onDelete", "onRemove")
+    for (const name of ["size", "clickable"]) jsx.removeAttr(el, name)
+
+    const color = jsx.mapAttrValue(el, "color", {
+      primary: "accent",
+      secondary: "gray",
+      default: null,
+    })
+    if (color === "unknown" || color === "dynamic") {
+      const printed = jsx.print(jsx.attr(el, "color")!)
+      jsx.removeAttr(el, "color")
+      ctx.todo(
+        path,
+        "Chip",
+        `dropped ${printed}: Pill color is one of ${PILL_COLORS}`
+      )
+    }
+    const variant = jsx.mapAttrValue(el, "variant", {
+      outlined: "surface",
+      default: null,
+    })
+    if (variant === "unknown" || variant === "dynamic") {
+      const printed = jsx.print(jsx.attr(el, "variant")!)
+      jsx.removeAttr(el, "variant")
+      ctx.todo(
+        path,
+        "Chip",
+        `dropped ${printed}: Pill variant is "soft" | "solid" | "surface"`
+      )
+    }
+
+    for (const [name, hint] of [
+      ["avatar", "put the Avatar as the first child of the Pill"],
+      ["deleteIcon", "onRemove renders Pill's own close button"],
+      ["randomColor", `pick a color= (${PILL_COLORS})`],
+      [
+        "href",
+        'Pill is a span; wrap it in an <a>, or use Button variant="ghost" for a link',
+      ],
+    ] as const) {
+      const attr = jsx.attr(el, name)
+      if (!attr) continue
+      jsx.removeAttr(el, name)
+      ctx.todo(path, "Chip", `dropped ${jsx.print(attr)}: ${hint}`)
+    }
+    dropWithHint(ctx, path, "Chip")
+  })
+}

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

@@ -0,0 +1,162 @@
+/**
+ * Chip360 → Pill. `label` becomes children, `isDisabled` → `disabled`, `variant` → `color`,
+ * `isFilled`/`isBordered` → `variant`, a close `rightIcon` with its handler → `onRemove`.
+ * Editable chips, left icons and custom colours are reported.
+ */
+import type { MigrateContext } from "../lib/types"
+import { PILL_COLORS } from "./chip"
+import { dropWithHint } from "./mui-props"
+
+export const handles = ["Chip360", "Chip360Props"] as const
+
+const COLOR_BY_VARIANT: Record<string, string | null> = {
+  primary: "accent",
+  secondary: "gray",
+  error: "error",
+  warning: "warning",
+  success: "success",
+  "surface-container-lowest": "gray",
+  "surface-container-low": "gray",
+  "surface-container": "gray",
+  "surface-container-high": "gray",
+  "surface-container-highest": "gray",
+}
+
+const CUSTOM_COLORS = [
+  "color",
+  "backgroundColor",
+  "borderColor",
+  "hoverBgColor",
+  "activeBgColor",
+  "filledHoverBgColor",
+  "filledActiveBgColor",
+]
+
+export function migrate(ctx: MigrateContext): void {
+  const { jsx } = ctx
+  const elements = ctx.elements("Chip360")
+  ctx.moveElements("Chip360", "Pill")
+  ctx.move("Chip360Props", "PillProps")
+
+  elements.forEach((path) => {
+    const el = path.node
+
+    // Custom colours first: `color` on Chip360 is a CSS colour, on Pill a family.
+    const custom = CUSTOM_COLORS.map((n) => jsx.attr(el, n)).filter(
+      (a): a is NonNullable<typeof a> => !!a
+    )
+    if (custom.length) {
+      const printed = custom.map((a) => jsx.print(a)).join(" ")
+      for (const a of custom) jsx.removeAttr(el, jsx.attrName(a))
+      ctx.todo(
+        path,
+        "Chip360",
+        `dropped ${printed}: pick a Pill color= (${PILL_COLORS}); custom colours need makeZenithStyles`
+      )
+    }
+
+    const label = jsx.attr(el, "label")
+    if (label) {
+      jsx.setChildren(el, [jsx.childFromValue(label)])
+      jsx.removeAttr(el, "label")
+    }
+    jsx.renameAttr(el, "isDisabled", "disabled")
+    for (const name of [
+      "isClickable",
+      "size",
+      "shouldRenderControlsOutsideForm",
+    ])
+      jsx.removeAttr(el, name)
+
+    const variant = jsx.attr(el, "variant")
+    if (variant) {
+      const printed = jsx.print(variant)
+      const mapped = jsx.mapAttrValue(el, "variant", COLOR_BY_VARIANT)
+      if (mapped === "mapped") jsx.renameAttr(el, "variant", "color")
+      else {
+        jsx.removeAttr(el, "variant")
+        ctx.todo(
+          path,
+          "Chip360",
+          `dropped ${printed}: Pill color is one of ${PILL_COLORS}`
+        )
+      }
+    }
+
+    const filled = jsx.attr(el, "isFilled")
+    const bordered = jsx.attr(el, "isBordered")
+    jsx.removeAttr(el, "isFilled")
+    jsx.removeAttr(el, "isBordered")
+    if (filled && jsx.literal(filled) !== false)
+      jsx.setAttr(el, "variant", "solid")
+    else if (bordered && jsx.literal(bordered) !== false)
+      jsx.setAttr(el, "variant", "surface")
+    else if (filled || bordered) {
+      ctx.todo(
+        path,
+        "Chip360",
+        `dropped ${[filled, bordered]
+          .filter(Boolean)
+          .map((a) => jsx.print(a!))
+          .join(" ")}: Pill variant is "soft" | "solid" | "surface"`
+      )
+    }
+
+    const rightIcon = jsx.attr(el, "rightIcon")
+    const rightClick = jsx.attr(el, "onRightIconClick")
+    if (rightIcon) {
+      jsx.removeAttr(el, "rightIcon")
+      if (jsx.literal(rightIcon) === "close" && rightClick) {
+        jsx.renameAttr(el, "onRightIconClick", "onRemove")
+      } else {
+        if (rightClick) jsx.removeAttr(el, "onRightIconClick")
+        ctx.todo(
+          path,
+          "Chip360",
+          `dropped ${jsx.print(rightIcon)}${rightClick ? ` ${jsx.print(rightClick)}` : ""}: only a close icon maps (onRemove); render other icons as the last child`
+        )
+      }
+    } else if (rightClick) {
+      jsx.removeAttr(el, "onRightIconClick")
+      ctx.todo(
+        path,
+        "Chip360",
+        `dropped ${jsx.print(rightClick)}: no right icon to click; use onRemove or onClick`
+      )
+    }
+
+    const leftIcon = jsx.attr(el, "leftIcon")
+    if (leftIcon) {
+      jsx.removeAttr(el, "leftIcon")
+      ctx.todo(
+        path,
+        "Chip360",
+        `dropped ${jsx.print(leftIcon)}: render the icon (1rem) as the first child of the Pill`
+      )
+    }
+
+    const editable = ["isEditable", "onLabelChange"]
+      .map((n) => jsx.attr(el, n))
+      .filter((a): a is NonNullable<typeof a> => !!a)
+    if (editable.length) {
+      for (const a of editable) jsx.removeAttr(el, jsx.attrName(a))
+      ctx.todo(
+        path,
+        "Chip360",
+        `dropped ${editable.map((a) => jsx.print(a)).join(" ")}: no editable Pill; swap to a FieldInput on click`
+      )
+    }
+
+    for (const [name, hint] of [
+      ["href", "Pill is a span; wrap it in an <a>"],
+      ["target", "goes on the wrapping <a>"],
+      ["rel", "goes on the wrapping <a>"],
+    ] as const) {
+      const attr = jsx.attr(el, name)
+      if (!attr) continue
+      jsx.removeAttr(el, name)
+      ctx.todo(path, "Chip360", `dropped ${jsx.print(attr)}: ${hint}`)
+    }
+    dropWithHint(ctx, path, "Chip360")
+  })
+}

package/codemods/migrate/base-elements/circular-progress.ts

@@ -0,0 +1,73 @@
+/**
+ * CircularProgress → Spinner.
+ *
+ * - `size={n}` (MUI: px, default 40) → the nearest Spinner size (sm 16, base 24, lg 40, xl 64,
+ *   2xl 96); no size means MUI's 40px, so it becomes `size="lg"` (Spinner's default is 24px);
+ *   a non-numeric size is dropped and reported.
+ * - `color`, `thickness`, `disableShrink` are MUI theming and are dropped: Spinner draws in
+ *   `currentColor`.
+ * - `variant="determinate"|"static"` and `value` have no equivalent (Spinner is indeterminate):
+ *   dropped and reported.
+ */
+import type { MigrateContext } from "../lib/types"
+
+export const handles = ["CircularProgress", "CircularProgressProps"] as const
+
+const SIZES: [number, string][] = [
+  [16, "sm"],
+  [24, "base"],
+  [40, "lg"],
+  [64, "xl"],
+  [96, "2xl"],
+]
+
+function nearestSize(px: number): string {
+  let best = SIZES[0]
+  for (const candidate of SIZES)
+    if (Math.abs(candidate[0] - px) < Math.abs(best[0] - px)) best = candidate
+  return best[1]
+}
+
+export function migrate(ctx: MigrateContext): void {
+  const { jsx } = ctx
+  const elements = ctx.elements("CircularProgress")
+  ctx.moveElements("CircularProgress", "Spinner")
+  ctx.move("CircularProgressProps", "SpinnerProps")
+
+  elements.forEach((path) => {
+    const el = path.node
+    for (const name of ["color", "thickness", "disableShrink"])
+      jsx.removeAttr(el, name)
+
+    const size = jsx.attr(el, "size")
+    if (!size) {
+      jsx.setAttr(el, "size", "lg")
+    } else {
+      const value = jsx.literal(size)
+      if (typeof value === "number") {
+        jsx.setAttr(el, "size", nearestSize(value))
+      } else {
+        const printed = jsx.print(size)
+        jsx.removeAttr(el, "size")
+        ctx.todo(
+          path,
+          "CircularProgress",
+          `dropped ${printed}: Spinner size is "sm" | "base" | "lg" | "xl" | "2xl" (16/24/40/64/96px)`
+        )
+      }
+    }
+
+    const determinate = ["variant", "value"]
+      .map((name) => jsx.attr(el, name))
+      .filter((a): a is NonNullable<typeof a> => !!a)
+    if (determinate.length) {
+      const printed = determinate.map((a) => jsx.print(a)).join(" ")
+      for (const name of ["variant", "value"]) jsx.removeAttr(el, name)
+      ctx.todo(
+        path,
+        "CircularProgress",
+        `dropped ${printed}: Spinner is indeterminate; keep the value in your own progress ring or drop it`
+      )
+    }
+  })
+}