Add eslint-plugin-material-ui

Summary 💡

This issue is mostly here as an opportunity to evaluate the opposite to have a linter for Material UI, Base UI, Pigment CSS, etc. This linter would very likely be implemented with eslint.

Examples 🌈

• https://www.npmjs.com/package/eslint-plugin-react-hooks
• https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-plugin
• https://baseweb.design/getting-started/setup/#eslint-plugin-baseui
• https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense

Motivation 🔦

Ideas:

1. When using the unitless API, error with all non-integer or half-integer usage: sx: { p: 1.4, m: 1.6 }
2. Warn when using an invalid import path, e.g. breaking https://mui.com/material-ui/guides/minimizing-bundle-size/

• https://github.com/mui/mui-toolpad/pull/3417/files#r1572992179

3. styled(Box) should really be styled('div')
4. Providing render functions to slots, this is wrong:

  <TimePicker
    defaultValue={time}
    slots={{
      textField: (props) => (
        <TextField sx={{ width: 100 }} {...props} size='small' />
      ),
    }}
  />

Explored with a warning in #14748 but has false-positive, false-negative.

Start by reviewing the linked ESLint plugin examples and the warning explored in #14748. Decide which Material UI, Base UI, or Pigment CSS linting scope is in bounds, then define the selected rules and expected diagnostics; done should mean an agreed plugin direction with the chosen cases validated.