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:

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:

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

2. Create new wrapper-component for the theme provider

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<string, Localization> = {
  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 (
    <StyledEngineProvider>
      <WebProsMuiThemeProvider localization={localization}>{children}</WebProsMuiThemeProvider>
    </StyledEngineProvider>
  );
};

3. Wrap your application with WebprosThemeProvider

const App = () => (
  // Other code
  <WebprosThemeProvider>// children goes here</WebprosThemeProvider>
  // Other code
);

4. Use imports from @mui/material for components

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:

// 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

Testing Custom Rules

Test your custom rules by running ESLint on specific files:

# 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:

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

    // your other rules
  ];
}