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

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.1](https://github.com/Availity/element/compare/@availity/theme-provider@1.0.0...@availity/theme-provider@1.0.1) (2025-03-07)
+
+### Dependency Updates
+
+* `theme` updated to version `1.0.0`
+* `mui-alert` updated to version `1.0.0`
+## [1.0.0](https://github.com/Availity/element/compare/@availity/theme-provider@1.0.0-alpha.0...@availity/theme-provider@1.0.0) (2025-02-25)
+
+### Dependency Updates
+
+* `theme` updated to version `0.5.1`
+* `mui-alert` updated to version `0.5.1`
+
+### ⚠ BREAKING CHANGES
+
+* upgrade to @mui/material v6
+
+### Miscellaneous Chores
+
+* element v1 release ([a6e3567](https://github.com/Availity/element/commit/a6e35671185b9f13d25c7a39c4488ecb8774633e))
+
 ## [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)
 
 

package/introduction.mdx

@@ -1,7 +1,10 @@
 import { Markdown } from '@storybook/blocks';
 import { Meta } from '@storybook/addon-docs';
 import ReadMe from './README.md?raw';
+import CHANGELOG from './CHANGELOG.md?raw';
 
 <Meta title="Design System/ThemeProvider/Introduction" />
 
 <Markdown>{ReadMe}</Markdown>
+
+<Markdown>{CHANGELOG}</Markdown>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/theme-provider",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.1",
   "description": "Theme provider for the Element design system",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/theme": "0.67.2-alpha.0",
+    "@availity/theme": "1.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.5",

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

@@ -1,17 +1,23 @@
 import type { StoryObj } from '@storybook/react';
+import { Alert } from '@availity/mui-alert';
 import { ThemeProvider } from './theme-provider';
 
+/** Wraps entire app for theme, locale, and date context */
+export default {
+  title: 'Design System/ThemeProvider',
+  component: ThemeProvider,
+  tags: ['autodocs']
+};
+
 export const Default: StoryObj<typeof ThemeProvider> = {
   render: () => (
     <>
-      <ThemeProvider>
-        <div>This component is inside the ThemeProvider</div>
+      <ThemeProvider theme="lightTheme">
+        <Alert severity="info" sx={{mb: 2}}>This alert is inside the ThemeProvider using "lightTheme"</Alert>
+      </ThemeProvider>
+      <ThemeProvider theme="legacyBS">
+        <Alert severity="info">This alert is inside the ThemeProvider using "legacyBS" theme</Alert>
       </ThemeProvider>
-      <div>This component is outside the ThemeProvider</div>
     </>
   ),
 };
-
-export default {
-  title: 'Design System/ThemeProvider',
-};

package/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node", "@testing-library/jest-dom"],
     "allowJs": true
   },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }

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

@@ -1,72 +0,0 @@
-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;