@webpros/mui-theme 0.1.1

package/README.md

@@ -0,0 +1,103 @@
+# WebPros MUI Theme
+
+MUI theme based on MUI V6 and Material Design V3.
+
+- [WebPros Dashboard Designs](https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard)
+- [Material UI V3 Components](https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=55879-3580&p=f&t=ZtD7nKr7T1SgHTdl-0)
+
+# Installation
+
+Install the package in your project with:
+
+```shell
+yarn add @webpros/webpros-material-library
+```
+
+Ensure your `package.json` includes
+
+```json
+{
+  "dependencies": {
+    // Other deps
+    "@material/material-color-utilities": "^0.3.0",
+    "@mui/material": "^6.4.0",
+    "@mui/utils": "^6.4.0",
+    "@mui/x-data-grid": "^7.29.0",
+    "@mui/x-date-pickers": "^7.29.0",
+    "@phosphor-icons/react": "^2.1.0"
+    // Other deps
+  }
+}
+```
+
+# 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/webpros-material-library';
+```
+
+2. Create new wrapper-component for the theme provider
+
+```tsx
+import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/webpros-material-library';
+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`
+
+```tsx
+const App = () => (
+  // Other code
+  <WebprosThemeProvider>// children goes here</WebprosThemeProvider>
+  // Other code
+);
+```
+
+4. **Use imports from `@mui/material` for components**
+
+```tsx
+import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/webpros-material-library';
+```
+
+# Releases
+
+The release cycle will be available soon
+
+# Contributing
+
+The contributing guide will be available soon

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@webpros/mui-theme",
+  "description": "MUI v6 theme for WebPros products",
+  "version": "0.1.1",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "mui",
+    "theme",
+    "theming",
+    "ui"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/src/webpros-material-library.js",
+      "types": "./dist/src/webpros-material-library.d.ts"
+    }
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "private": false,
+  "engines": {
+    "node": "^22.x",
+    "npm": "please-use-yarn",
+    "yarn": "^1.22.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "test": "npm run prettier:test && npm run lint && npm run typecheck",
+    "lint": "npm run eslint",
+    "eslint": "eslint",
+    "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "@mui/material": "^6.4.0",
+    "@mui/utils": "^6.4.0",
+    "@mui/x-data-grid": "^7.29.0",
+    "@mui/x-date-pickers": "^7.29.0",
+    "@phosphor-icons/react": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.38.0",
+    "@material/material-color-utilities": "^0.3.0",
+    "@mui/material": "^6.4.0",
+    "@mui/utils": "^6.4.0",
+    "@mui/x-data-grid": "^7.29.0",
+    "@mui/x-date-pickers": "^7.29.0",
+    "@phosphor-icons/react": "^2.1.0",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-onboarding": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/builder-vite": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
+    "@storybook/react-webpack5": "^9.1.13",
+    "@types/node": "^24.8.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.38.0",
+    "eslint-plugin-storybook": "^9.1.13",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^9.1.13",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^7.1.10",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "browserslist": [
+    "last 2 versions",
+    ">1%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "dependencies": {
+    "@stylistic/eslint-plugin": "^5.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0"
+  }
+}