@webpros/mui-theme 0.1.4 → 0.1.6

package/README.md

@@ -1,48 +1,33 @@
-# WebPros MUI Theme
+# About
 
 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)
+- [Repository - webpros-dashboard/webpros-mui-theme](https://github.com/webpros-dashboard/webpros-mui-theme)
+- [Designs - Figma](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:
+Ensure your `package.json` includes `peerDependecies` of the current package.
 
-```shell
-yarn add @webpros/webpros-material-library
-```
+Install the package in your project with:
 
-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
-  }
-}
+```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:
+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';
+import type _ from '@webpros/@webpros/mui-theme';
 ```
 
-2. Create new wrapper-component for the theme provider
+2. **Create new wrapper-component for the theme provider**
 
 ```tsx
-import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/webpros-material-library';
+import { getMuiLocaleByCode, WebProsMuiThemeProvider } from '@webpros/mui-theme';
 import { StyledEngineProvider } from '@mui/material/styles';
 import { Localization } from '@mui/material/locale';
 import { ReactNode, useMemo } from 'react';
@@ -78,7 +63,7 @@ export const WebprosThemeProvider = ({ children }: WebprosThemeProviderProps) =>
 };
 ```
 
-3. Wrap your application with `WebprosThemeProvider`
+3. **Wrap your application with `WebprosThemeProvider`**
 
 ```tsx
 const App = () => (
@@ -91,13 +76,5 @@ const App = () => (
 4. **Use imports from `@mui/material` for components**
 
 ```tsx
-import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/webpros-material-library';
+import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
 ```
-
-# Releases
-
-The release cycle will be available soon
-
-# Contributing
-
-The contributing guide will be available soon

package/dist/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "@webpros/mui-theme",
+    "description": "MUI v6 theme for WebPros products",
+    "version": "0.1.6",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/webpros-dashboard/webpros-mui-theme.git"
+    },
+    "keywords": [
+        "react",
+        "mui",
+        "theme",
+        "theming",
+        "ui"
+    ],
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/src/index.js",
+            "types": "./dist/src/index.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": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@fontsource/roboto": "^5.2.6",
+        "@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",
+        "usehooks-ts": "^3.1.1"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "devDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@eslint/js": "^9.38.0",
+        "@fontsource/roboto": "^5.2.6",
+        "@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-a11y": "^9.1.16",
+        "@storybook/addon-docs": "^9.1.16",
+        "@storybook/addon-onboarding": "^9.1.16",
+        "@storybook/addon-themes": "^9.1.16",
+        "@storybook/builder-vite": "^9.1.16",
+        "@storybook/react-vite": "^9.1.16",
+        "@stylistic/eslint-plugin": "^5.5.0",
+        "@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-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "eslint-plugin-storybook": "^9.1.16",
+        "globals": "^16.4.0",
+        "prettier": "^3.6.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "storybook": "^9.1.16",
+        "tsc-alias": "^1.8.16",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.1",
+        "vite": "^7.1.10",
+        "vite-plugin-dts": "^4.5.4",
+        "usehooks-ts": "^3.1.1"
+    },
+    "browserslist": [
+        "last 2 versions",
+        ">1%",
+        "not dead",
+        "not op_mini all"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    }
+}

package/dist/src/components/inputs/Button/Button.theme.d.ts

@@ -16,8 +16,8 @@ declare module '@mui/material/Button' {
 }
 interface M3Button {
     MuiButton: {
-        defaultProps?: ComponentsProps['MuiButton'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];
+        defaultProps?: ComponentsProps['MuiButtonBase'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiButtonBase'];
         variants?: ComponentsVariants['MuiButton'];
     };
 }

package/dist/src/constants.d.ts

@@ -0,0 +1,34 @@
+import { Theme } from '@mui/material';
+export declare const underlineTypographySxProps: (theme: Theme, open?: boolean, color?: string | null) => {
+    textDecoration?: string | undefined;
+    textUnderlineOffset?: string | undefined;
+    textDecorationColor?: string | null | undefined;
+    textDecorationThickness?: number | undefined;
+    cursor: string;
+    '&:hover': {
+        textDecoration: string;
+        textUnderlineOffset: string;
+        textDecorationColor: string | null;
+        textDecorationThickness: number;
+    };
+};
+export declare const underlineBorderSxProps: (theme: Theme, open?: boolean, color?: string | null) => {
+    '&::after'?: {
+        bottom: number;
+        position: string;
+        content: string;
+        borderBottom: number;
+        borderColor: string | null;
+        width: string;
+    } | undefined;
+    cursor: string;
+    position: string;
+    '&:hover::after': {
+        bottom: number;
+        position: string;
+        content: string;
+        borderBottom: number;
+        borderColor: string | null;
+        width: string;
+    };
+};

package/dist/src/constants.js

@@ -0,0 +1,33 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const underlineTypographySxProps = (theme, open = false, 
+// If color is null - undeline's color will be the same as the text color
+color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', '&:hover': {
+        textDecoration: 'underline',
+        textUnderlineOffset: theme.spacing(0.5),
+        textDecorationColor: color,
+        textDecorationThickness: 1,
+    } }, (open && {
+    textDecoration: 'underline',
+    textUnderlineOffset: theme.spacing(0.5),
+    textDecorationColor: color,
+    textDecorationThickness: 1,
+})));
+export const underlineBorderSxProps = (theme, open = false, 
+// If color is null - undeline's color will be the same as the text color
+color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', position: 'relative', '&:hover::after': {
+        bottom: 0,
+        position: 'absolute',
+        content: "''",
+        borderBottom: 1,
+        borderColor: color,
+        width: '100%',
+    } }, (open && {
+    '&::after': {
+        bottom: 0,
+        position: 'absolute',
+        content: "''",
+        borderBottom: 1,
+        borderColor: color,
+        width: '100%',
+    },
+})));

package/dist/src/docs/versions.d.ts

@@ -0,0 +1,2 @@
+export declare const packageVersion: string;
+export declare const peerDependencies: string;

package/dist/src/docs/versions.js

@@ -0,0 +1,9 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { version, peerDependencies as pkgPeerDependencies } from '../../package.json';
+export const packageVersion = version;
+const formattedPeerDependencies = JSON.stringify(pkgPeerDependencies, null, 2);
+const left = '```json';
+const right = '```';
+export const peerDependencies = `${left}
+${formattedPeerDependencies}
+${right}`;

package/dist/src/hooks/useThemeMode.js

@@ -1,20 +1,14 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { useState } from 'react';
 import { useMediaQuery } from '@mui/material';
+import { useLocalStorage } from 'usehooks-ts';
 export const THEME_MODE_KEY = 'ThemeModeKey';
+// TODO get rid of this hook, as the theme shouldn't have any knowledge of the mode
 export const useThemeMode = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    const [themeMode, setThemeMode] = useState(() => {
-        const saved = localStorage.getItem(THEME_MODE_KEY);
-        if (saved) {
-            return JSON.parse(saved);
-        }
-        return prefersDarkMode ? 'dark' : 'light';
-    });
+    const [value, setValue] = useLocalStorage(THEME_MODE_KEY, prefersDarkMode ? 'dark' : 'light');
     const toggleTheme = () => {
-        const value = themeMode === 'light' ? 'dark' : 'light';
-        setThemeMode(value);
-        localStorage.setItem(THEME_MODE_KEY, JSON.stringify(value));
+        const newValue = value === 'light' ? 'dark' : 'light';
+        setValue(newValue);
     };
-    return [themeMode, toggleTheme, setThemeMode];
+    return [value, toggleTheme, setValue];
 };

package/dist/src/index.d.ts

@@ -2,4 +2,5 @@ export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeP
 export { useThemeModeContext } from './providers/ThemeModeProvider';
 export * from './utils';
 export * from './tokens';
+export * from './constants';
 export * from './components';

package/dist/src/index.js

@@ -3,5 +3,6 @@ export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeP
 export { useThemeModeContext } from './providers/ThemeModeProvider';
 export * from './utils';
 export * from './tokens';
+export * from './constants';
 // Only used for exporting types.
 export * from './components';

package/dist/src/providers/ThemeModeProvider.d.ts

@@ -6,8 +6,9 @@ export type ThemeModeContextType = {
 };
 export type ThemeModeProviderProps = {
     children?: React.ReactNode;
+    mode?: ThemeMode;
 };
 export declare const ThemeModeContext: import("react").Context<ThemeModeContextType>;
-declare const ThemeModeProvider: ({ children }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeModeProvider: ({ children, mode }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeModeProvider;
 export declare const useThemeModeContext: () => ThemeModeContextType;

package/dist/src/providers/ThemeModeProvider.js

@@ -7,9 +7,9 @@ export const ThemeModeContext = createContext({
     toggleTheme: () => { },
     setThemeMode: () => { },
 });
-const ThemeModeProvider = ({ children }) => {
+const ThemeModeProvider = ({ children, mode }) => {
     const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
-    const value = useMemo(() => ({ themeMode, toggleTheme, setThemeMode }), [themeMode, toggleTheme, setThemeMode]);
+    const value = useMemo(() => ({ themeMode: mode || themeMode, toggleTheme, setThemeMode }), [mode, themeMode, toggleTheme, setThemeMode]);
     return _jsx(ThemeModeContext.Provider, { value: value, children: children });
 };
 export default ThemeModeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ThemeModeProvider from './ThemeModeProvider';
 import WebProsTheme from './WebProsTheme';
-const WebProsMuiThemeProvider = ({ children, localization, themeMode }) => (_jsx(ThemeModeProvider, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
+const WebProsMuiThemeProvider = ({ children, localization, themeMode }) => (_jsx(ThemeModeProvider, { mode: themeMode, children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
 export default WebProsMuiThemeProvider;

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v6 theme for WebPros products",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webpros-dashboard/webpros-mui-theme.git"
+  },
   "keywords": [
     "react",
     "mui",
@@ -41,30 +45,26 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fontsource/roboto": "^5.2.6",
     "@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",
-    "@fontsource/roboto": "^5.2.6",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1"
+    "usehooks-ts": "^3.1.1"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@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",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/roboto": "^5.2.6",
     "@eslint/js": "^9.38.0",
+    "@fontsource/roboto": "^5.2.6",
     "@material/material-color-utilities": "^0.3.0",
     "@mui/material": "^6.4.0",
     "@mui/utils": "^6.4.0",
@@ -77,11 +77,16 @@
     "@storybook/addon-themes": "^9.1.16",
     "@storybook/builder-vite": "^9.1.16",
     "@storybook/react-vite": "^9.1.16",
+    "@stylistic/eslint-plugin": "^5.5.0",
     "@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-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-storybook": "^9.1.16",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
@@ -92,7 +97,8 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.1",
     "vite": "^7.1.10",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "usehooks-ts": "^3.1.1"
   },
   "browserslist": [
     "last 2 versions",