About

MUI theme based on MUI V6 and Material Design V3.

- Repository - webpros-dashboard/webpros-mui-theme
- Designs - Figma

Installation

Ensure your package.json includes peerDependecies of the current package.

Install the package in your project with:

``bash
yarn add @webpros/mui-theme
`

Usage

1. Add the type import at the top of your main application file or theme setup file. This import is required for MUI TypeScript augmentation to work correctly:

`typescript
// global.d.ts
import type _ from '@webpros/mui-theme';
`

2. Create new wrapper-component for the theme provider

`tsx
import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/mui-theme';
import { StyledEngineProvider } from '@mui/material/styles';
import { Localization } from '@mui/material/locale';
import { ReactNode, useMemo } from 'react';
import { useLocale } from 'your-locale-code-provider';

const YourLocalesToMuiLocales: Record = {
en: getMuiLocaleByCode('enUS'),
ru: getMuiLocaleByCode('ruRU'),
de: getMuiLocaleByCode('deDE'),
es: getMuiLocaleByCode('esES'),
fr: getMuiLocaleByCode('frFR'),
it: getMuiLocaleByCode('itIT'),
ja: getMuiLocaleByCode('jaJP'),
pt: getMuiLocaleByCode('ptPT'),
};

export const getMUILocalization = (locale: string) => YourLocalesToMuiLocales[locale];

type WebprosThemeProviderProps = {
children: ReactNode;
};

export const WebprosThemeProvider = ({ children }: WebprosThemeProviderProps) => {
const [locale] = useLocale();

const localization = useMemo(() => getMUILocalization(locale), [locale]);

return (

{children}

);
};
`

3. Wrap your application with WebprosThemeProvider

`tsx
const App = () => (
// Other code
// children goes here
// Other code
);
`

4. Use imports from @mui/material for components

`tsx
import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
`

Development

Using Custom ESLint Rules

The package exports custom ESLint rules to enforce Material Design 3 design system best practices. To use them in your project:

`js
// eslint.config.js
import webprosMuiThemeRules from '@webpros/mui-theme/eslint';

export default [
// ... your other config
{
plugins: {
'@webpros/mui-theme': webprosMuiThemeRules,
},
rules: {
'@webpros/mui-theme/no-palette-usage': 'error',
'@webpros/mui-theme/no-standard-typography-variants': 'error',
'@webpros/mui-theme/no-hardcoded-typography-in-sx': 'error',
},
},
];
`

For detailed documentation of available rules, see configs/eslint/README.md.

Adding New Custom ESLint Rules

To add a new custom rule:

1. Create a new file in configs/eslint/rules/ with your rule implementation (use CommonJS format)
2. Export the rule using module.exports
3. Import and add it to configs/eslint/index.cjs using require()
4. Add the rule to eslint.config.js in the plugins and rules sections
5. Document the rule in configs/eslint/README.md

$3

Test your custom rules by running ESLint on specific files:

`bash


Test on a specific file

npx eslint src/path/to/file.ts

Test on all TypeScript files

npx eslint 'src/*/.{ts,tsx}'
`

For more information about the existing custom rules and their usage, see eslint/README.md.

Tools configuration

Webpack

If you use Webpack, you probably need to add the following rules to your configuration:

`js
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},

// your other rules
];
}
``