@movable/eslint-plugin-ui

ESLint rules for enforcing best practices when using @movable/ui components.

Installation

npm install @movable/eslint-plugin-ui --save-dev

Usage

Flat Config (ESLint 9+)

// eslint.config.js
import movableUI from '@movable/eslint-plugin-ui';

export default [
  {
    plugins: {
      '@movable/ui': movableUI,
    },
    rules: {
      ...movableUI.configs.recommended.rules,
    },
  },
];

Legacy Config (.eslintrc)

{
  "plugins": ["@movable/ui"],
  "extends": ["plugin:@movable/ui/recommended"]
}

Rules

no-deprecated-grid

Disallows importing the deprecated Grid component from MUI. Use Grid2 instead. Auto-fixable: renames imports and JSX usage, removes the item prop.

Bad:

import { Grid } from '@mui/material';
<Grid item xs={12}>content</Grid>

Good:

import { Grid2 } from '@mui/material';
<Grid2 xs={12}>content</Grid2>

no-deprecated-header-metadata

Disallows importing the deprecated HeaderMetadata component. Use MetadataList instead. Auto-fixable.

no-system-props

Disallows MUI system props passed directly to components. Use the sx prop instead. System props are deprecated in MUI v7.

This rule detects ~100 system props (spacing, display, flexbox, grid, positioning, sizing, borders, colors, typography, shadows) on any component imported from @mui/material.

Auto-fixable: moves system props into the sx prop. When an sx object literal already exists, merges into it. When sx is a variable or expression, reports without autofixing.

Bad:

import { Box, Stack, Typography } from '@mui/material';

<Box mt={2} p={1} display="flex" />
<Stack alignItems="center" gap={2} />
<Typography color="text.secondary" fontSize={12} variant="body2">text</Typography>

Good:

import { Box, Stack, Typography } from '@mui/material';

<Box sx={{ mt: 2, p: 1, display: 'flex' }} />
<Stack sx={{ alignItems: 'center', gap: 2 }} />
<Typography sx={{ color: 'text.secondary', fontSize: 12 }} variant="body2">text</Typography>

color prop handling

Many MUI components (Button, IconButton, Chip, Badge, Typography, etc.) have color as a legitimate component prop for selecting a color variant. The rule uses a heuristic:

• color="inherit", color="primary", color="error" — left alone (component prop, no dot)
• color="text.secondary", color="primary.main" — flagged (MUI palette shorthand, contains a dot)

Running the codemod

To fix all existing violations at once:

npx eslint --rule '{"@movable/ui/no-system-props": "error"}' --fix --ext .ts,.tsx src/

prefer-ink-components

Enforces using Ink-wrapped components from @movable/ui over raw MUI components. Auto-fixable: replaces imports and JSX usage. Supports an excludes option.

{
  "@movable/ui/prefer-ink-components": ["error", { "excludes": ["Dialog"] }]
}

Recommended Config

The recommended config enables all rules with their suggested severity:

| Rule | Severity | |------|----------| | @movable/ui/no-deprecated-grid | error | | @movable/ui/no-deprecated-header-metadata | warn | | @movable/ui/no-system-props | error | | @movable/ui/prefer-ink-components | error |