@availity/theme-provider 0.5.0 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/theme-provider@0.5.1...@availity/theme-provider@1.0.0-alpha.0) (2025-02-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgraded to @mui/material v6
+
+### Features
+
+* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
+* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
+
+## [0.5.1](https://github.com/Availity/element/compare/@availity/theme-provider@0.5.0...@availity/theme-provider@0.5.1) (2025-02-05)
+
+### Dependency Updates
+
+* `theme` updated to version `0.5.0`
 ## [0.5.0](https://github.com/Availity/element/compare/@availity/theme-provider@0.4.96...@availity/theme-provider@0.5.0) (2025-02-04)
 
 ### Dependency Updates

package/dist/index.js

@@ -28,11 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   ThemeProvider: () => ThemeProvider
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/theme-provider.tsx
 var import_theme = require("@availity/theme");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/theme-provider",
-  "version": "0.5.0",
+  "version": "1.0.0-alpha.0",
   "description": "Theme provider for the Element design system",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
@@ -23,17 +23,17 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/theme": "0.67.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.15.15",
-    "@mui/x-date-pickers": "^7.2.0",
+    "@availity/theme": "0.67.2-alpha.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.5",
+    "@mui/x-date-pickers": "^7.26.0",
     "dayjs": "^1.11.13"
   },
   "devDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "~5.4.5"
   },
   "peerDependencies": {

package/src/lib/localized-theme-provider.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { lightTheme as lightThemeOptions, legacyTheme as legacyThemeOptions } from '@availity/theme';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
+import type { Theme, ThemeOptions } from '@mui/material/styles';
+import { deepmerge } from '@mui/utils';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { enUS as enUSDate, esES as esESDate } from '@mui/x-date-pickers/locales';
+import { enUS, esES } from '@mui/material/locale';
+// import type { Dayjs } from 'dayjs';
+// import "dayjs/locale/es-pr";
+// import "dayjs/locale/en";
+const muiTheme = createTheme();
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  /** Availity theme to use */
+  theme?: 'lightTheme' | 'legacyBS' | 'mui';
+  /** Internationalization locale */
+  locale?: 'en' | 'es';
+};
+
+// dayjs
+const dayjsLocales = {
+  en: 'en',
+  es: 'es-pr'
+}
+
+// @mui/x-date-pickers
+const dateLocales = {
+  en: enUSDate,
+  es: esESDate
+};
+
+// @mui/material
+const coreLocales = {
+  en: enUS,
+  es: esES
+}
+
+const lightTheme = lightThemeOptions as ThemeOptions;
+const legacyTheme = deepmerge(legacyThemeOptions as ThemeOptions, legacyDatePickerOptions);
+
+const themeOptions: Record<string, ThemeOptions> = {
+  lightTheme: lightTheme,
+  legacyBS: legacyTheme,
+  mui: undefined
+};
+
+export function ThemeProvider({ children, theme = 'lightTheme', locale = 'en' }: ThemeProviderProps) {
+  // is localization provider still needed because of the dateadapter? or should we use themeprovider to handle locale globally?
+  // const themeWithLocale = createTheme(themeOptions[theme], {...locales[locale]});
+  const themeWithLocale = useMemo(
+    () => createTheme(themeOptions[theme], dateLocales[locale], coreLocales[locale]),
+    [locale, theme],
+  );
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterDayjs}
+      adapterLocale={dayjsLocales[locale]}
+      localeText={dateLocales[locale].components.MuiLocalizationProvider.defaultProps.localeText}
+    >
+      <MuiThemeProvider theme={themeWithLocale}>
+        <CssBaseline />
+        {children}
+      </MuiThemeProvider>
+    </LocalizationProvider>
+  );
+}
+
+export default ThemeProvider;