@epilot/zenith-react 0.2.0-next.3 → 0.2.0-next.5

package/codemods/migrate/base-elements/text-field.ts

@@ -0,0 +1,425 @@
+/**
+ * TextField → Field + FieldLabel + FieldInput | FieldTextarea + FieldDescription | FieldError.
+ *
+ * - `label` → `<FieldLabel htmlFor={id}>`; MUI generated the id, Zenith does not, so a labelled
+ *   field without `id` is reported.
+ * - `helperText` → `<FieldDescription>`, or `<FieldError>` when `error` is set; a dynamic
+ *   `error` picks between the two and sets `Field variant="destructive"` and `aria-invalid`.
+ * - Input props (`value`, `onChange`, `placeholder`, `type`, `disabled`, `required`, `name`,
+ *   `id`, …) go to the control; `inputProps={{…}}` is spread onto it, `inputRef` is its `ref`.
+ *   `multiline` picks `FieldTextarea` (`rows`/`minRows` → `rows`).
+ * - Root props (`className`, `style`, `data-*`) stay on `Field`, as MUI put them on its root.
+ * - `variant`, `color`, `size`, `fullWidth`, `customBackgroundColor` are theming: dropped.
+ *   `InputProps` start/end adornments → `FieldGroupAddon`s around the control in a
+ *   `FieldInputGroup` (an `InputAdornment` wrapper is unwrapped); its `readOnly`/`inputProps`
+ *   reach the control. `margin`, `maxRows` and the other MUI-only props are dropped and
+ *   reported. `select` (and a dynamic `multiline`) leaves the element on base-elements.
+ */
+import type {
+  ASTPath,
+  JSXAttribute,
+  JSXElement,
+  JSXSpreadAttribute,
+} from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+
+type Expression = Parameters<MigrateContext["j"]["expressionStatement"]>[0]
+import {
+  attrExpression,
+  attrValue,
+  element,
+  isTrue,
+  renamedAttr,
+  setChildren,
+  stringIn,
+  type Child,
+  printAttr,
+  reportValueUses,
+  contentChildren,
+} from "./shared"
+
+export const handles = [
+  "TextField",
+  "TextFieldProps",
+  "InputAdornment",
+] as const
+
+const CONTROL = new Set([
+  "value",
+  "defaultValue",
+  "onChange",
+  "onBlur",
+  "onFocus",
+  "onKeyDown",
+  "onKeyUp",
+  "onKeyPress",
+  "onInput",
+  "onPaste",
+  "placeholder",
+  "type",
+  "disabled",
+  "required",
+  "name",
+  "id",
+  "autoFocus",
+  "autoComplete",
+  "readOnly",
+  "aria-label",
+  "aria-describedby",
+])
+const SILENT = new Set([
+  "variant",
+  "color",
+  "size",
+  "fullWidth",
+  "customBackgroundColor",
+  "multiline",
+  "label",
+  "helperText",
+  "error",
+])
+const REPORTED: Record<string, string> = {
+  InputLabelProps: "style FieldLabel directly",
+  FormHelperTextProps: "style FieldDescription/FieldError directly",
+  margin: "Field has no outer margin; add spacing in the layout",
+  maxRows: "FieldTextarea does not auto-grow",
+  rowsMax: "FieldTextarea does not auto-grow",
+  classes: "MUI-only",
+  hiddenLabel: "MUI-only",
+  focused: "MUI-only",
+}
+
+export function migrate(ctx: MigrateContext): void {
+  let kept = false
+  ctx.elements("TextField").forEach((path) => {
+    if (!migrateTextField(ctx, path)) kept = true
+  })
+  const valueUsed = reportValueUses(
+    ctx,
+    "TextField",
+    "rebuild it as Field + FieldLabel + FieldInput (or FieldTextarea) + FieldDescription"
+  )
+  if (valueUsed && !kept) ctx.keep("TextField")
+  else if (kept)
+    ctx.keep(
+      "TextField",
+      "still used where a TextField stayed (select or dynamic multiline): see the TODOs on those elements"
+    )
+  else ctx.drop("TextField")
+  const adornment = ctx.names.InputAdornment
+  const adornmentLeft =
+    !!adornment &&
+    (ctx.elements("InputAdornment").size() > 0 ||
+      ctx.valueUses("InputAdornment").size() > 0)
+  if (adornmentLeft)
+    ctx.keep(
+      "InputAdornment",
+      'an adornment is a FieldGroupAddon align="start" | "end" next to the control inside a FieldInputGroup'
+    )
+  else ctx.drop("InputAdornment")
+  ctx.keep(
+    "TextFieldProps",
+    "type the input props from FieldInputProps and the wrapper's from FieldProps"
+  )
+}
+
+/** Rewrites one TextField in place; `false` when it has to stay a base-elements TextField. */
+function migrateTextField(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>
+): boolean {
+  const { j, jsx } = ctx
+  const el = path.node
+  const select = jsx.attr(el, "select")
+  const multiline = jsx.attr(el, "multiline")
+  if (
+    (select && jsx.literal(select) !== false) ||
+    (multiline && typeof jsx.literal(multiline) !== "boolean")
+  ) {
+    ctx.todo(
+      path,
+      "TextField",
+      select
+        ? "select TextField stays on base-elements: rebuild it as Field + FieldLabel + Select (SelectTrigger, SelectContent, SelectItem)"
+        : `${printAttr(ctx, multiline!)} stays on base-elements: pick FieldInput or FieldTextarea per branch`
+    )
+    return false
+  }
+  const textarea = isTrue(ctx, multiline)
+
+  const label = jsx.attr(el, "label")
+  const helper = jsx.attr(el, "helperText")
+  const error = jsx.attr(el, "error")
+  const id = jsx.attr(el, "id")
+  const errorValue = jsx.literal(error)
+  const invalid =
+    error && errorValue !== false
+      ? errorValue === true
+        ? ("always" as const)
+        : ("dynamic" as const)
+      : ("never" as const)
+
+  const control: (JSXAttribute | JSXSpreadAttribute)[] = []
+  const root: (JSXAttribute | JSXSpreadAttribute)[] = []
+  const reported: string[] = []
+  let hasSpread = false
+  let addons: { start?: Child; end?: Child } = {}
+  for (const a of el.openingElement.attributes ?? []) {
+    if (a.type === "JSXSpreadAttribute") {
+      control.push(a)
+      hasSpread = true
+      continue
+    }
+    const name = jsx.attrName(a)
+    if (CONTROL.has(name)) control.push(a)
+    else if (name === "inputRef") control.push(renamedAttr(j, a, "ref"))
+    else if (name === "InputProps") {
+      const input = inputProps(ctx, a)
+      if (input) {
+        control.push(...input.control)
+        addons = input.addons
+        reported.push(...input.reported)
+      } else
+        reported.push(
+          `dropped ${printAttr(ctx, a)} (adornments go in FieldInputGroup + FieldGroupAddon)`
+        )
+    } else if (name === "inputProps") {
+      const spread = spreadObject(ctx, a)
+      if (spread) control.push(...spread)
+      else
+        reported.push(
+          `dropped ${printAttr(ctx, a)} (spread it onto the control)`
+        )
+    } else if (
+      textarea &&
+      (name === "rows" || name === "minRows" || name === "rowsMin")
+    )
+      control.push(renamedAttr(j, a, "rows"))
+    else if (name in REPORTED)
+      reported.push(`dropped ${printAttr(ctx, a)} (${REPORTED[name]})`)
+    else if (name === "select" || SILENT.has(name)) continue
+    else root.push(a)
+  }
+  if (invalid === "always")
+    control.push(j.jsxAttribute(j.jsxIdentifier("aria-invalid")))
+  if (invalid === "dynamic")
+    control.push(renamedAttr(j, error!, "aria-invalid"))
+  if (invalid === "always") root.push(variantAttr(ctx, "destructive"))
+  if (invalid === "dynamic")
+    root.push(
+      j.jsxAttribute(
+        j.jsxIdentifier("variant"),
+        j.jsxExpressionContainer(
+          j.conditionalExpression(
+            attrValue(j, error!) as never,
+            stringIn(ctx, "destructive") as never,
+            stringIn(ctx, "default") as never
+          )
+        )
+      )
+    )
+
+  const children: Child[] = []
+  if (label) {
+    const labelAttrs = id ? [renamedAttr(j, id, "htmlFor")] : []
+    children.push(
+      element(j, ctx.ensureZenith("FieldLabel"), labelAttrs, [
+        jsx.childFromValue(label),
+      ])
+    )
+    if (!id)
+      reported.push(
+        "FieldLabel is not tied to the control: give the control an id and FieldLabel htmlFor (MUI generated them)"
+      )
+  }
+  const controlEl = element(
+    j,
+    ctx.ensureZenith(textarea ? "FieldTextarea" : "FieldInput"),
+    control
+  )
+  if (addons.start || addons.end) {
+    const addon = (align: "start" | "end", child: Child) =>
+      element(
+        j,
+        ctx.ensureZenith("FieldGroupAddon"),
+        [j.jsxAttribute(j.jsxIdentifier("align"), jsx.str(align))],
+        [child]
+      )
+    const group: Child[] = []
+    if (addons.start) group.push(j.jsxText("\n"), addon("start", addons.start))
+    group.push(j.jsxText("\n"), controlEl)
+    if (addons.end) group.push(j.jsxText("\n"), addon("end", addons.end))
+    group.push(j.jsxText("\n"))
+    children.push(element(j, ctx.ensureZenith("FieldInputGroup"), [], group))
+  } else children.push(controlEl)
+  if (helper) children.push(...helperChildren(ctx, helper, invalid, error))
+  if (hasSpread)
+    reported.push(
+      "spread props went to the control; move wrapper props (className, style) to Field"
+    )
+
+  jsx.rename(el, ctx.ensureZenith("Field"))
+  el.openingElement.attributes = root
+  setChildren(
+    j,
+    el,
+    children.flatMap((c) => [j.jsxText("\n"), c]).concat(j.jsxText("\n"))
+  )
+  if (reported.length) ctx.todo(path, "TextField", reported.join("; "))
+  return true
+}
+
+function helperChildren(
+  ctx: MigrateContext,
+  helper: JSXAttribute,
+  invalid: "always" | "dynamic" | "never",
+  error: JSXAttribute | undefined
+): Child[] {
+  const { j, jsx } = ctx
+  const part = (name: string) =>
+    element(j, ctx.ensureZenith(name), [], [jsx.childFromValue(helper)])
+  if (invalid === "always") return [part("FieldError")]
+  const description = part("FieldDescription")
+  if (invalid === "never") {
+    if (typeof jsx.literal(helper) === "string") return [description]
+    return [
+      j.jsxExpressionContainer(
+        j.logicalExpression("&&", attrValue(j, helper) as never, description)
+      ),
+    ]
+  }
+  return [
+    j.jsxExpressionContainer(
+      j.conditionalExpression(
+        attrValue(j, error!) as never,
+        part("FieldError"),
+        description
+      )
+    ),
+  ]
+}
+
+/** `inputProps={{ maxLength: 5, "data-testid": id }}` → attributes; `{x}` → `{...x}`. */
+function spreadObject(
+  ctx: MigrateContext,
+  a: JSXAttribute
+): (JSXAttribute | JSXSpreadAttribute)[] | undefined {
+  const { j } = ctx
+  const expression = attrExpression(a)
+  if (!expression) return undefined
+  if (expression.type !== "ObjectExpression")
+    return [j.jsxSpreadAttribute(expression as never)]
+  const attrs: JSXAttribute[] = []
+  for (const p of expression.properties) {
+    if ((p.type !== "ObjectProperty" && p.type !== "Property") || p.computed)
+      return undefined
+    const key =
+      p.key.type === "Identifier"
+        ? p.key.name
+        : p.key.type === "StringLiteral" || p.key.type === "Literal"
+          ? String((p.key as { value: unknown }).value)
+          : undefined
+    if (!key) return undefined
+    const value = p.value as { type: string; value?: unknown }
+    attrs.push(
+      j.jsxAttribute(
+        j.jsxIdentifier(key),
+        value.type === "StringLiteral"
+          ? ctx.jsx.str(String(value.value))
+          : j.jsxExpressionContainer(p.value as never)
+      )
+    )
+  }
+  return attrs
+}
+
+function variantAttr(ctx: MigrateContext, value: string): JSXAttribute {
+  return ctx.j.jsxAttribute(ctx.j.jsxIdentifier("variant"), ctx.jsx.str(value))
+}
+
+/**
+ * `InputProps={{ startAdornment, endAdornment, readOnly, inputProps }}`: the adornments as addon
+ * children (an `InputAdornment` wrapper unwrapped), the rest onto the control. `undefined` when
+ * `InputProps` is not an object literal.
+ */
+function inputProps(
+  ctx: MigrateContext,
+  a: JSXAttribute
+):
+  | {
+      control: (JSXAttribute | JSXSpreadAttribute)[]
+      addons: { start?: Child; end?: Child }
+      reported: string[]
+    }
+  | undefined {
+  const { j } = ctx
+  const object = attrExpression(a)
+  if (object?.type !== "ObjectExpression") return undefined
+  const control: (JSXAttribute | JSXSpreadAttribute)[] = []
+  const addons: { start?: Child; end?: Child } = {}
+  const reported: string[] = []
+  for (const p of object.properties) {
+    if ((p.type !== "ObjectProperty" && p.type !== "Property") || p.computed)
+      return undefined
+    const key = p.key.type === "Identifier" ? p.key.name : undefined
+    const value = p.value as Expression
+    if (key === "startAdornment" || key === "endAdornment")
+      addons[key === "startAdornment" ? "start" : "end"] = adornmentChild(
+        ctx,
+        value
+      )
+    else if (key === "readOnly")
+      control.push(
+        j.jsxAttribute(
+          j.jsxIdentifier("readOnly"),
+          j.jsxExpressionContainer(value as never)
+        )
+      )
+    else if (key === "inputProps") {
+      const spread = spreadObject(
+        ctx,
+        j.jsxAttribute(
+          j.jsxIdentifier("inputProps"),
+          j.jsxExpressionContainer(value as never)
+        )
+      )
+      if (spread) control.push(...spread)
+      else
+        reported.push(
+          `dropped InputProps.inputProps (spread it onto the control)`
+        )
+    } else if (key === "disableUnderline") continue
+    else
+      reported.push(
+        `dropped InputProps.${key ?? "…"} (MUI's Input root has no Zenith counterpart)`
+      )
+  }
+  return { control, addons, reported }
+}
+
+/** An adornment as an addon child: `<InputAdornment>` wrappers inside it give way to their content. */
+function adornmentChild(ctx: MigrateContext, value: Expression): Child {
+  const { j, jsx } = ctx
+  const tag = ctx.names.InputAdornment
+  const unwrap = (el: JSXElement): Child | undefined => {
+    if (!tag || jsx.tagName(el) !== tag) return undefined
+    const content = contentChildren(el)
+    if (content.length === 1 && content[0].type === "JSXElement")
+      return content[0]
+    return j.jsxFragment(
+      j.jsxOpeningFragment(),
+      j.jsxClosingFragment(),
+      el.children ?? []
+    )
+  }
+  if (value.type === "JSXElement")
+    return unwrap(value as JSXElement) ?? (value as JSXElement)
+  j(value as never)
+    .find(j.JSXElement)
+    .filter((p) => !!tag && jsx.tagName(p.node) === tag)
+    .forEach((p) => {
+      const inner = unwrap(p.node)
+      if (inner) p.replace(inner)
+    })
+  return j.jsxExpressionContainer(value as never)
+}

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

@@ -0,0 +1,185 @@
+/**
+ * ToggleButtonGroup / ToggleButton → SegmentedControl / SegmentedControlItem (`exclusive`) or
+ * ToggleGroup type="multiple" / ToggleGroupItem.
+ *
+ * - `onChange={(event, value) => …}` → `onValueChange={(value) => …}`. An exclusive MUI group
+ *   could be cleared (value null); a SegmentedControl always keeps one item selected.
+ * - Item values are strings in Radix: a numeric literal is written as a string and reported.
+ * - `size` and `color` are theming: dropped. A group whose `exclusive` is dynamic, and a
+ *   ToggleButton outside a group (Zenith's Toggle: pressed / onPressedChange), stay on
+ *   base-elements with a TODO.
+ */
+import type { ASTPath, JSXElement } from "jscodeshift"
+import type { MigrateContext } from "../lib/types"
+import {
+  attrExpression,
+  printAttr,
+  printAttrs,
+  takeAttrs,
+  valueHandler,
+  familyStays,
+} from "./shared"
+
+export const handles = [
+  "ToggleButtonGroup",
+  "ToggleButtonGroupProps",
+  "ToggleButton",
+  "ToggleButtonProps",
+] as const
+
+export function migrate(ctx: MigrateContext): void {
+  const { j, jsx } = ctx
+  if (
+    familyStays(
+      ctx,
+      ["ToggleButtonGroup", "ToggleButton"],
+      'migrate this group by hand: SegmentedControl > SegmentedControlItem (one choice) or ToggleGroup type="multiple" > ToggleGroupItem'
+    )
+  )
+    return
+  const itemTag = ctx.names.ToggleButton
+  const converted = new Set<JSXElement>()
+  const withKeptGroup = new Set<JSXElement>()
+  let keptGroup = false
+
+  ctx.elements("ToggleButtonGroup").forEach((path) => {
+    const exclusive = jsx.attr(path.node, "exclusive")
+    const mode = !exclusive
+      ? "multiple"
+      : typeof jsx.literal(exclusive) === "boolean"
+        ? jsx.literal(exclusive)
+          ? "single"
+          : "multiple"
+        : undefined
+    if (!mode) {
+      keptGroup = true
+      // Its items stay with it; the group's TODO covers them.
+      if (itemTag)
+        j(path)
+          .find(j.JSXElement)
+          .filter((p) => jsx.tagName(p.node) === itemTag)
+          .forEach((p) => {
+            withKeptGroup.add(p.node)
+          })
+      ctx.todo(
+        path,
+        "ToggleButtonGroup",
+        `stays on base-elements: ${printAttr(ctx, exclusive!)} picks SegmentedControl (single) or ToggleGroup type="multiple" at runtime; choose one`
+      )
+      return
+    }
+    const items = itemTag
+      ? j(path)
+          .find(j.JSXElement)
+          .filter((p) => jsx.tagName(p.node) === itemTag)
+          .paths()
+      : []
+    for (const item of items) {
+      converted.add(item.node)
+      migrateItem(ctx, item, mode)
+    }
+    migrateGroup(ctx, path, mode)
+  })
+
+  if (keptGroup)
+    ctx.keep(
+      "ToggleButtonGroup",
+      "still used where a group stayed: see the TODOs on those elements"
+    )
+  else ctx.drop("ToggleButtonGroup")
+  ctx.keep(
+    "ToggleButtonGroupProps",
+    "SegmentedControlProps for a single choice, ToggleGroupProps for several"
+  )
+
+  let keptItem = false
+  ctx.elements("ToggleButton").forEach((path) => {
+    if (converted.has(path.node)) return
+    keptItem = true
+    if (withKeptGroup.has(path.node)) return
+    ctx.todo(
+      path,
+      "ToggleButton",
+      "stays on base-elements: a ToggleButton on its own is Zenith's Toggle (selected → pressed, onChange → onPressedChange(pressed))"
+    )
+  })
+  if (keptItem)
+    ctx.keep(
+      "ToggleButton",
+      "still used where a ToggleButton stayed: see the TODOs on those elements"
+    )
+  else ctx.drop("ToggleButton")
+  ctx.keep(
+    "ToggleButtonProps",
+    "SegmentedControlItemProps or ToggleGroupItemProps"
+  )
+}
+
+function migrateGroup(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  mode: "single" | "multiple"
+): void {
+  const { j, jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+  jsx.rename(
+    el,
+    ctx.ensureZenith(mode === "single" ? "SegmentedControl" : "ToggleGroup")
+  )
+  jsx.removeAttr(el, "exclusive")
+  takeAttrs(ctx, el, ["size", "color"])
+  if (mode === "multiple")
+    el.openingElement.attributes = [
+      j.jsxAttribute(j.jsxIdentifier("type"), jsx.str("multiple")),
+      ...(el.openingElement.attributes ?? []),
+    ]
+
+  const onChange = jsx.removeAttr(el, "onChange")
+  if (onChange) {
+    const handler = valueHandler(j, attrExpression(onChange), {
+      valueName: "value",
+    })
+    if (handler) jsx.setAttr(el, "onValueChange", handler)
+    else
+      reported.push(
+        `dropped ${printAttr(ctx, onChange)} (onValueChange(value) passes only the ${mode === "single" ? "value" : "values"}: call your handler with it)`
+      )
+  }
+  const unsupported = takeAttrs(ctx, el, ["classes"])
+  if (unsupported.length)
+    reported.push(`dropped ${printAttrs(ctx, unsupported)} (MUI-only)`)
+  if (reported.length) ctx.todo(path, "ToggleButtonGroup", reported.join("; "))
+}
+
+function migrateItem(
+  ctx: MigrateContext,
+  path: ASTPath<JSXElement>,
+  mode: "single" | "multiple"
+): void {
+  const { jsx } = ctx
+  const el = path.node
+  const reported: string[] = []
+  jsx.rename(
+    el,
+    ctx.ensureZenith(
+      mode === "single" ? "SegmentedControlItem" : "ToggleGroupItem"
+    )
+  )
+  takeAttrs(ctx, el, [
+    "size",
+    "color",
+    "disableRipple",
+    "disableFocusRipple",
+    "selected",
+  ])
+  const value = jsx.attr(el, "value")
+  const literal = jsx.literal(value)
+  if (typeof literal === "number" || typeof literal === "boolean") {
+    jsx.setAttr(el, "value", String(literal))
+    reported.push(
+      `value={${literal}} is now "${literal}": Radix item values are strings; make the group value a string too`
+    )
+  }
+  if (reported.length) ctx.todo(path, "ToggleButton", reported.join("; "))
+}