Merge pull request #682 from etn-ccis/release/mui-v6

Release/mui v6 to dev merge
etn-ccis · Dec 20, 2024 · 0ab4295 · 0ab4295
2 parents 2ae6cf9 + 29da629
commit 0ab4295
Show file tree

Hide file tree

Showing 27 changed files with 9,154 additions and 9,129 deletions.
diff --git a/login-workflow/docs/theme.md b/login-workflow/docs/theme.md
@@ -0,0 +1,77 @@
+# Using the Theme in your Project
+
+This guide will help you integrate and use the @brightlayer-ui/react-theme in your project.
+
+## Setup
+
+**Install Dependencies:**
+
+Install with npm
+
+```shell
+npm install --save @brightlayer-ui/react-themes
+```
+
+or yarn
+
+```shell
+yarn add @brightlayer-ui/react-themes
+```
+
+# Usage
+
+To use these themes in your application, simply wrap the app in a `ThemeProvider` and pass in the theme.:
+
+```tsx
+import React, { useEffect } from 'react';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { App } from './App';
+import CssBaseline from '@mui/material/CssBaseline';
+import { blueThemes } from '@brightlayer-ui/react-themes';
+import rtl from 'jss-rtl';
+import { create } from 'jss';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import jssPreset from '@mui/styles/jssPreset';
+import '@brightlayer-ui/react-themes/open-sans';
+
+document.body.setAttribute('dir', 'rtl');
+const jss = create({
+    plugins: [...jssPreset().plugins, rtl()],
+});
+
+export const Example = (props: any): JSX.Element => {
+    const dir = useSelector((store: AppStore) => store.app.direction); 
+
+    const cacheRtl = createCache({
+        key: dir === 'rtl' ? 'cssrtl' : 'cssltr',
+        prepend: true,
+        stylisPlugins: [rtlPlugin],
+    });
+
+    const cacheLtr = createCache({
+        key: dir === 'ltr' ? 'cssltr' : 'cssrtl',
+        prepend: true,
+        stylisPlugins: dir === 'ltr' ? undefined : [rtlPlugin],
+    });
+
+    useEffect(() => {
+        document.body.dir = dir;
+    }, [dir]);
+
+return(
+    <React.StrictMode>
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={{...blueThemes, direction: dir}}>
+             <CacheProvider value={dir === 'ltr' ? cacheLtr : cacheRtl}>
+                <CssBaseline />
+                <App />
+            </CacheProvider>
+            </ThemeProvider>
+        </StyledEngineProvider>
+    </React.StrictMode>
+);
+```
+
+For more configuration, please refer to the [BLUI React Themes README](https://github.com/etn-ccis/blui-react-themes/blob/dev/README.md).
diff --git a/login-workflow/example-vite/package.json b/login-workflow/example-vite/package.json
@@ -17,12 +17,12 @@
         "@brightlayer-ui/colors": "^3.0.1",
         "@brightlayer-ui/icons-mui": "^3.3.0",
         "@brightlayer-ui/react-auth-workflow": "^4.0.2",
-        "@brightlayer-ui/react-components": "^6.1.2",
-        "@brightlayer-ui/react-themes": "^7.1.0",
+        "@brightlayer-ui/react-components": "7.0.0",
+        "@brightlayer-ui/react-themes": "^8.0.0",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.10.8",
-        "@mui/icons-material": "^5.11.11",
-        "@mui/material": "^5.10.15",
+        "@mui/icons-material": "^6.1.4",
+        "@mui/material": "^6.1.4",
         "date-fns": "^3.0.6",
         "i18next": "^23.7.13",
         "i18next-browser-languagedetector": "^7.2.0",

diff --git a/login-workflow/example-vite/src/main.tsx b/login-workflow/example-vite/src/main.tsx
@@ -1,15 +1,16 @@
-import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import React from 'react';
 import { App } from './App';
 import CssBaseline from '@mui/material/CssBaseline';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
+import { blueThemes } from '@brightlayer-ui/react-themes';
 import { createRoot } from 'react-dom/client';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 createRoot(document.getElementById('root')!).render(
     // Enable Strict Mode for more error checking
     <React.StrictMode>
         <StyledEngineProvider injectFirst>
-            <ThemeProvider theme={createTheme(BLUIThemes.blue)}>
+            <ThemeProvider theme={blueThemes}>
                 <CssBaseline />
                 <App />
             </ThemeProvider>

diff --git a/login-workflow/example-vite/yarn.lock b/login-workflow/example-vite/yarn.lock
diff --git a/login-workflow/example/package.json b/login-workflow/example/package.json
@@ -34,12 +34,12 @@
     "dependencies": {
         "@brightlayer-ui/colors": "^3.0.1",
         "@brightlayer-ui/icons-mui": "^3.6.0",
-        "@brightlayer-ui/react-components": "^6.1.2",
-        "@brightlayer-ui/react-themes": "^7.2.0",
+        "@brightlayer-ui/react-components": "7.0.0",
+        "@brightlayer-ui/react-themes": "^8.0.0",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.10.8",
-        "@mui/icons-material": "^5.15.7",
-        "@mui/material": "^5.10.15",
+        "@mui/icons-material": "^6.1.4",
+        "@mui/material": "^6.1.4",
         "@okta/okta-auth-js": "^7.8.1",
         "@okta/okta-react": "^6.9.0",
         "@types/node": "^17.0.23",

diff --git a/login-workflow/example/src/App.tsx b/login-workflow/example/src/App.tsx
@@ -5,7 +5,7 @@ import { AppRouter } from './navigation/AppRouter';
 import { I18nextProvider } from 'react-i18next';
 import i18nAppInstance from './translations/i18n';
 import { LocalStorage } from './store/local-storage';
-import { Box, CircularProgress, SxProps, Theme } from '@mui/material';
+import { Box, CircularProgress, SxProps, Theme, useColorScheme } from '@mui/material';
 
 const containerStyles: SxProps<Theme> = {
     width: '100%',
@@ -39,6 +39,12 @@ export const App = (): JSX.Element => {
 
     const [isLoading, setIsLoading] = useState(true);
 
+    const { setMode } = useColorScheme();
+
+    useEffect(() => {
+        setMode('light')
+    },[])
+
     // handle initialization of auth data on first load
     useEffect(() => {
         const initialize = async (): Promise<void> => {

diff --git a/login-workflow/example/src/index.tsx b/login-workflow/example/src/index.tsx
@@ -1,14 +1,15 @@
 import 'react-app-polyfill/ie11';
-import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import 'react-app-polyfill/stable';
 import React from 'react';
 import * as serviceWorker from './serviceWorker';
 import { App } from './App';
 import CssBaseline from '@mui/material/CssBaseline';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
+import { blueThemes } from '@brightlayer-ui/react-themes';
 import '@brightlayer-ui/react-themes/open-sans';
 import './index.css';
 import { createRoot } from 'react-dom/client';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 const container = document.getElementById('root');
 const root = createRoot(container || document.createDocumentFragment());
@@ -21,8 +22,8 @@ declare global {
     namespace React {
         interface DOMAttributes<T> {
             placeholder?: string | undefined;
-            onPointerEnterCapture?: React.PointerEventHandler<T> | undefined;
-            onPointerLeaveCapture?: any;
+            onPointerEnterCapture?: string | undefined;
+            onPointerLeaveCapture?: string | undefined;
         }
     }
 }
@@ -31,7 +32,7 @@ root.render(
     // Enable Strict Mode for more error checking
     <React.StrictMode>
         <StyledEngineProvider injectFirst>
-            <ThemeProvider theme={createTheme(BLUIThemes.blue)}>
+            <ThemeProvider theme={blueThemes}>
                 <CssBaseline />
                 <App />
             </ThemeProvider>