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

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

@@ -0,0 +1,277 @@
+/**
+ * base-elements exports with no Zenith counterpart, or whose Zenith namesake has a different
+ * API. Each stays on its legacy import with its replacement in one line; nothing here is a
+ * syntactic rewrite. Names that other rules migrate structurally are not listed.
+ */
+import type { MigrateContext } from "../lib/types"
+
+const ICON =
+  "no icon component in Zenith: import the glyph from your icon package (lucide-react) sized 1rem; name= strings have no equivalent"
+const THEME =
+  "no theme object: colours and spacing are tokens.* from @epilot/zenith-react; AppearanceBoundary at the surface root replaces ThemeProvider"
+const STYLES =
+  "makeZenithStyles({ slot: { …tokens.* } }) + mergeClasses(styles.slot, className); theme.spacing(n) → tokens.spacingGroup{n}, theme.palette.* → tokens.*"
+const SPACING =
+  "no spacing components: padding via makeZenithStyles (scale n → tokens.spacingElement{n} / spacingGroup{n})"
+const TEXT_FIELD =
+  "Field + FieldLabel + FieldInput; apply the mask with rifm on FieldInput's value/onChange; errors go in FieldError"
+const DRAWER =
+  'Drawer + DrawerContent side="right" (DrawerHeader/DrawerTitle, DrawerFooter with the save/discard Buttons); width via makeZenithStyles; open/onClose → open/onOpenChange'
+const DND =
+  "react-beautiful-dnd is not re-exported: import it from react-beautiful-dnd (add the dependency), or move to @dnd-kit like DataTableHeaderDraggable"
+const TABLE =
+  "Table + TableHeader/TableBody/TableRow/TableHead/TableCell from @epilot/zenith-react (same tags, no MUI props; TableContainer → a div, TableSortLabel → DataTableColumnHeader)"
+const PICKERS =
+  "DateTimePicker / DateRangePicker / TimePicker from @epilot/zenith-react (value/onChange with Date; no utils provider)"
+const LIST =
+  "List + ListItem + ListItemText/ListItemDescription/ListItemActions from @epilot/zenith-react (prefix/suffix become children)"
+const CARD =
+  "Card + CardHeader/CardTitle/CardDescription/CardContent/CardFooter from @epilot/zenith-react (title/subheader props become children; CardMedia → an <img>)"
+const MENU =
+  "DropdownMenu + DropdownMenuTrigger + DropdownMenuContent + DropdownMenuItem (anchorEl/open/onClose → open/onOpenChange)"
+const STEPPER =
+  "no Stepper in Zenith: an ordered list via makeZenithStyles, or Tabs for step navigation"
+const TRANSITION =
+  "no transition primitive: a CSS transition via makeZenithStyles (Accordion for disclosure, Drawer for slide-in panels)"
+
+export const HINTS: Record<string, string> = {
+  // Layout
+  Grid: 'no Grid: a flex or CSS-grid wrapper via makeZenithStyles (display: "grid", gap: tokens.spacingGroup2); container/item/xs become columns in that style',
+  GridProps: "no Grid (see Grid)",
+  Box: "no Box: a <div> with makeZenithStyles; p/m/display props become style atoms with tokens.spacing*",
+  BoxProps: "no Box (see Box)",
+  InsetSpacing: SPACING,
+  InsetSquishSpacing: SPACING,
+  InsetStretchSpacing: SPACING,
+  StackSpacing:
+    'a flex column via makeZenithStyles (display: "flex", flexDirection: "column", gap: tokens.spacingElement{scale})',
+  InlineSpacing:
+    'a flex row via makeZenithStyles (display: "flex", gap: tokens.spacingElement{scale})',
+  SpacingProps: SPACING,
+  Hidden:
+    "no Hidden: a media query in makeZenithStyles ('@media (max-width: …)': { display: \"none\" })",
+  HiddenProps: "no Hidden (see Hidden)",
+  AppBar:
+    'no AppBar: a header band via makeZenithStyles (Surface kind="section" for the background)',
+  AppBarProps: "no AppBar (see AppBar)",
+  Toolbar: "no Toolbar: a flex row via makeZenithStyles",
+  ToolbarProps: "no Toolbar (see Toolbar)",
+  // Icons
+  Icon: ICON,
+  EIcon: ICON,
+  SvgIcon: ICON,
+  IconProps: ICON,
+  EIconProps: ICON,
+  SvgIconProps: ICON,
+  IconName: ICON,
+  IconsId: ICON,
+  FontSize: ICON,
+  // Theme and styling
+  useTheme: THEME,
+  Theme: THEME,
+  EpilotTheme: THEME,
+  DefaultEpilotTheme: THEME,
+  DefaultEpilotThemeValue: THEME,
+  ThemeProvider: THEME,
+  makeStyles: STYLES,
+  withStyles: STYLES,
+  createStyles: STYLES,
+  getContrastRatio:
+    "MUI colour helper: not in Zenith; inline a small helper or use tokens' semantic colours",
+  rgbToHex: "MUI colour helper: not in Zenith; inline it",
+  hexToRgb: "MUI colour helper: not in Zenith; inline it",
+  classNames:
+    "mergeClasses from @epilot/zenith-react (strings and falsy values only; object syntax becomes cond && cls)",
+  clsx: "mergeClasses from @epilot/zenith-react (strings and falsy values only; object syntax becomes cond && cls)",
+  CssBaseline:
+    "drop it: AppearanceBoundary at the surface root carries Zenith's reset",
+  ScopedCssBaseline:
+    "drop it: AppearanceBoundary at the surface root carries Zenith's reset",
+  // Components without an equivalent
+  Badge:
+    "MUI count/dot badge has no equivalent (Zenith's Badge is a status label): an absolutely positioned span via makeZenithStyles, or Pill for a count",
+  BadgeProps: "no count badge (see Badge)",
+  LinearProgress:
+    "no progress bar in Zenith yet: a two-div bar via makeZenithStyles (track tokens.gray4, fill tokens.accentSolid), or Spinner when indeterminate",
+  LinearProgressProps: "no progress bar (see LinearProgress)",
+  MaskedTextField: TEXT_FIELD,
+  MaskedTextFieldProps: TEXT_FIELD,
+  CurrencyTextField: TEXT_FIELD,
+  CurrencyTextFieldProps: TEXT_FIELD,
+  ValidatedTextField:
+    "Field + FieldLabel + FieldInput with your own validation; the message goes in FieldError",
+  ValidatedTextFieldProps: "Field + FieldInput (see ValidatedTextField)",
+  InlineTextField:
+    "Field + FieldInput variant styled inline via makeZenithStyles",
+  InlineTextFieldProps: "Field + FieldInput (see InlineTextField)",
+  Drawer360: DRAWER,
+  Drawer360WithContext: DRAWER,
+  Drawer360Props: DRAWER,
+  Drawer360Provider:
+    "no drawer context: hold `open` in useState and pass open/onOpenChange to Drawer",
+  useDrawer360Context:
+    "no drawer context: hold `open` in useState and pass open/onOpenChange to Drawer",
+  Drawer360Locales:
+    "no drawer locales: the Buttons in DrawerFooter take their own labels",
+  ClickAwayListener:
+    "no ClickAwayListener: Popover/DropdownMenu dismiss on outside press themselves; otherwise a document pointerdown listener in useEffect",
+  Collapse: TRANSITION,
+  CollapseProps: TRANSITION,
+  Slide: TRANSITION,
+  SlideProps: TRANSITION,
+  Zoom: TRANSITION,
+  ZoomProps: TRANSITION,
+  Rating: "no Rating in Zenith: a ToggleGroup of star icons",
+  RatingProps: "no Rating (see Rating)",
+  FeedbackRating: "no Rating in Zenith: a ToggleGroup of star icons",
+  FeedbackRatingProps: "no Rating (see FeedbackRating)",
+  Stepper: STEPPER,
+  StepperProps: STEPPER,
+  Step: STEPPER,
+  StepProps: STEPPER,
+  StepLabel: STEPPER,
+  StepLabelProps: STEPPER,
+  StepContent: STEPPER,
+  StepContentProps: STEPPER,
+  StepConnector: STEPPER,
+  StepConnectorProps: STEPPER,
+  StepIconProps: STEPPER,
+  MobileStepper: STEPPER,
+  MobileStepperProps: STEPPER,
+  TreeView: "no Tree in Zenith yet: nested List/ListGroup, or Accordion",
+  TreeItem: "no Tree in Zenith yet: nested List/ListGroup, or Accordion",
+  Image: "an <img> (object-fit via makeZenithStyles)",
+  ImageProps: "an <img> (see Image)",
+  Link: 'no Link: an <a> styled via makeZenithStyles (color: tokens.accentText), or Button variant="ghost" asChild around a router link',
+  LinkProps: "no Link (see Link)",
+  // react-beautiful-dnd re-exports
+  DragDropContext: DND,
+  Droppable: DND,
+  Draggable: DND,
+  resetServerContext: DND,
+  useMouseSensor: DND,
+  useKeyboardSensor: DND,
+  useTouchSensor: DND,
+  DropResult: DND,
+  DragStart: DND,
+  DragUpdate: DND,
+  DraggableLocation: DND,
+  DraggableProvided: DND,
+  DroppableProvided: DND,
+  DraggableStateSnapshot: DND,
+  DroppableStateSnapshot: DND,
+  DraggableProps: DND,
+  DroppableProps: DND,
+  ResponderProvided: DND,
+  DraggableProvidedDragHandleProps: DND,
+  DraggableProvidedDraggableProps: DND,
+  DroppableProvidedProps: DND,
+  DraggableRubric: DND,
+  DraggableChildrenFn: DND,
+  OnDragEndResponder: DND,
+  OnDragStartResponder: DND,
+  OnDragUpdateResponder: DND,
+  DragDropContextProps: DND,
+  // Same name, different API, or a different Zenith family
+  Breadcrumb:
+    "Breadcrumb + BreadcrumbItem href= from @epilot/zenith-react (children become BreadcrumbItem; the last gets isCurrent)",
+  BreadcrumbsProps: "Breadcrumb + BreadcrumbItem (see Breadcrumb)",
+  Card: CARD,
+  CardProps: CARD,
+  CardHeader: CARD,
+  CardHeaderProps: CARD,
+  CardContent: CARD,
+  CardContentProps: CARD,
+  CardActions: CARD,
+  CardActionsProps: CARD,
+  CardActionArea:
+    'Button variant="ghost" asChild around the card body, or an onClick on Card',
+  CardActionAreaProps: "see CardActionArea",
+  CardMedia: "an <img> inside CardContent (object-fit via makeZenithStyles)",
+  CardMediaProps: "see CardMedia",
+  Menu: MENU,
+  MenuProps: MENU,
+  MenuList: MENU,
+  MenuListProps: MENU,
+  ListItemIcon:
+    "the icon is a plain child of DropdownMenuItem or ListItem (1rem)",
+  Popover:
+    "Popover + PopoverTrigger + PopoverContent from @epilot/zenith-react (open/anchorEl/onClose → open/onOpenChange + PopoverAnchor; anchorOrigin → side/align)",
+  PopoverProps: "Popover + PopoverContent (see Popover)",
+  PopoverOrigin: "PopoverContent side/align (see Popover)",
+  Radio:
+    "RadioGroup + RadioGroupItem value= from @epilot/zenith-react, labelled by a Label htmlFor the item (onChange(e) → onValueChange(value))",
+  RadioProps: "RadioGroupItem (see Radio)",
+  RadioGroup:
+    "RadioGroup from @epilot/zenith-react takes value/onValueChange and RadioGroupItem children (not name/onChange with Radio)",
+  RadioGroupProps: "RadioGroup (see RadioGroup)",
+  Snackbar:
+    "toast() from @epilot/zenith-react, with one <Toaster /> mounted at the surface root",
+  SnackbarProps: "toast() (see Snackbar)",
+  Table: TABLE,
+  TableProps: TABLE,
+  TableBody: TABLE,
+  TableBodyProps: TABLE,
+  TableCell: TABLE,
+  TableCellProps: TABLE,
+  TableContainer: TABLE,
+  TableContainerProps: TABLE,
+  TableHead: TABLE,
+  TableHeadProps: TABLE,
+  TableRow: TABLE,
+  TableRowProps: TABLE,
+  TableSortLabel: TABLE,
+  TablePagination:
+    "TablePagination from @epilot/zenith-react takes page/pageSize/totalItems/onPageChange/onPageSizeChange (not count/rowsPerPage/onChangePage)",
+  TableColumnSettings:
+    "DataTableColumnVisibility + DataTableColumnOrder from @epilot/zenith-react",
+  TableColumnSettingsProps: "see TableColumnSettings",
+  TableColumnSetting: "see TableColumnSettings",
+  TableColumnSettingsLocale: "see TableColumnSettings",
+  TableSettingsColumn: "see TableColumnSettings",
+  Autocomplete:
+    "FieldCombobox (FieldComboboxTrigger/Input/Content/List/Item) from @epilot/zenith-react; options → FieldComboboxItem children",
+  AutocompleteProps: "FieldCombobox (see Autocomplete)",
+  useAutocompleteStyles: "FieldCombobox styles itself (see Autocomplete)",
+  AutocompleteX: "FieldCombobox (see Autocomplete)",
+  AutocompleteXProps: "FieldCombobox (see Autocomplete)",
+  Pagination:
+    "TablePagination from @epilot/zenith-react, or getPageNumbers + Buttons for a bare pager",
+  PaginationProps: "TablePagination (see Pagination)",
+  PaginationLocale: "TablePagination labels= (see Pagination)",
+  getPage: "calculatePagination / clampPage from @epilot/zenith-react",
+  useLocale: "TablePagination labels= (see Pagination)",
+  DatePicker: PICKERS,
+  DatePickerProps: PICKERS,
+  DateTimePicker: PICKERS,
+  DateTimePickerProps: PICKERS,
+  TimePicker: PICKERS,
+  TimePickerProps: PICKERS,
+  KeyboardDatePicker: PICKERS,
+  KeyboardDatePickerProps: PICKERS,
+  KeyboardDateTimePicker: PICKERS,
+  KeyboardDateTimePickerProps: PICKERS,
+  KeyboardTimePicker: PICKERS,
+  MuiPickersUtilsProvider: "drop it: Zenith's pickers need no utils provider",
+  DateFnsUtils: "drop it: Zenith's pickers need no utils provider",
+  getClientDateWithIgnoredTZ: "not in Zenith: inline the helper",
+  List: LIST,
+  ListProps: LIST,
+  MuiListProps: LIST,
+  ListItem: LIST,
+  ListItemProps: LIST,
+  ListItemContent: LIST,
+  ListItemContentProps: LIST,
+  ListItemPrefix: LIST,
+  ListItemPrefixProps: LIST,
+  ListItemSufix: LIST,
+  ListItemSufixProps: LIST,
+  ListSubheader: "ListGroup + ListGroupLabel from @epilot/zenith-react",
+  ListSubheaderProps: "ListGroupLabel (see ListSubheader)",
+}
+
+export const handles = Object.keys(HINTS)
+
+export function migrate(ctx: MigrateContext): void {
+  for (const name of handles) ctx.keep(name, HINTS[name])
+}

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

@@ -0,0 +1,26 @@
+/**
+ * @epilot/base-elements (MUI v4) → @epilot/zenith-react consumer codemod.
+ *
+ *   bunx jscodeshift@17.3.0 --parser=tsx -t node_modules/@epilot/zenith-react/codemods/migrate/from-base-elements.ts src/
+ *
+ * One rule per component in `./base-elements/`; the registry is `./base-elements/index.ts` and
+ * the contract is `./lib/types.ts`. The run's output is the TODO list: one ` REP <file> <line>
+ * <Component>: <fix>` line per place a human has to look.
+ */
+import type { API, FileInfo, Options } from "jscodeshift"
+import { rules } from "./base-elements"
+import { runMigration } from "./lib/run-migration"
+import { formatOutput } from "../format"
+
+export const parser = "tsx"
+
+export const SOURCE = "@epilot/base-elements"
+
+export default async function transform(
+  file: FileInfo,
+  api: API,
+  options: Options
+): Promise<string | undefined> {
+  const output = runMigration({ file, api, options, source: SOURCE, rules })
+  return output === undefined ? undefined : formatOutput(output, file.path)
+}

package/codemods/migrate/from-volt.ts

@@ -0,0 +1,26 @@
+/**
+ * @epilot/volt-ui-react 1.7 → @epilot/zenith-react consumer codemod.
+ *
+ *   bunx jscodeshift@17.3.0 --parser=tsx -t node_modules/@epilot/zenith-react/codemods/migrate/from-volt.ts src/
+ *
+ * Zenith keeps Volt's names, so most of this is an import swap; the rules in `./volt/` cover the
+ * stylesheets, the TanStack type re-exports and the few helpers Zenith does not ship. Run the
+ * `radix-to-base-ui.ts` transform next (not chained here): the Volt API is the Radix-era one.
+ */
+import type { API, FileInfo, Options } from "jscodeshift"
+import { runMigration } from "./lib/run-migration"
+import { rules } from "./volt"
+import { formatOutput } from "../format"
+
+export const parser = "tsx"
+
+export const SOURCE = "@epilot/volt-ui-react"
+
+export default async function transform(
+  file: FileInfo,
+  api: API,
+  options: Options
+): Promise<string | undefined> {
+  const output = runMigration({ file, api, options, source: SOURCE, rules })
+  return output === undefined ? undefined : formatOutput(output, file.path)
+}