feat: implemented material components provided and replaced it with theme container

Author: computools-anastasiia-nahaiska

src/provider/MaterialComponents.context.tsx

@@ -0,0 +1,26 @@
+import React, {createContext, type ReactNode} from 'react';
+
+import type {Theme} from '../theme/theme.types';
+import {LightTheme} from '../theme/build-theme';
+import {materialTypography} from '../typography/typography.styles';
+import type {MaterialTypography} from '../typography/typography.types';
+
+interface MaterialComponentsContextType {
+  theme: Theme;
+  typography: MaterialTypography;
+}
+
+export const MaterialComponentsContext = createContext<MaterialComponentsContextType>({theme: LightTheme, typography: materialTypography});
+
+export interface MaterialComponentsProviderProps {
+  children: ReactNode;
+
+  theme?: Theme;
+  typography?: MaterialTypography;
+}
+
+export const MaterialComponentsProvider: React.FC<MaterialComponentsProviderProps> = ({
+  children,
+  theme = LightTheme,
+  typography = materialTypography,
+}) => <MaterialComponentsContext.Provider value={{theme, typography}}>{children}</MaterialComponentsContext.Provider>;

src/theme/Theme.context.tsx

@@ -0,0 +1,23 @@
+import {MaterialTheme} from './theme';
+import {getPalette} from './get-palette';
+import type {ThemeColors} from './theme.types';
+
+export const defaultThemeColors: ThemeColors = {
+  primary: '#6750A4',
+  secondary: '#625B71',
+  tertiary: '#7D5260',
+  error: '#B3261E',
+  neutral: '#605D64',
+  neutralVariant: '#605D66',
+};
+
+export const buildThemesFromColors = (themeColors: ThemeColors) => {
+  const palette = getPalette(themeColors);
+
+  const lightTheme = MaterialTheme.generateLightTheme(palette);
+  const darkTheme = MaterialTheme.generateDarkTheme(palette);
+
+  return {lightTheme, darkTheme};
+};
+
+export const {lightTheme: LightTheme, darkTheme: DarkTheme} = buildThemesFromColors(defaultThemeColors);

src/theme/build-theme.ts

@@ -1,17 +1,7 @@
-import {getPalette} from './get-palette';
+import {type Theme} from './theme.types';
 import {type Palette} from './palette.types';
-import {type Theme, type ThemeColors} from './theme.types';
 
-export const buildThemesFromColors = (themeColors: ThemeColors) => {
-  const palette = getPalette(themeColors);
-
-  const lightTheme = MaterialTheme.generateLightTheme(palette);
-  const darkTheme = MaterialTheme.generateDarkTheme(palette);
-
-  return {lightTheme, darkTheme};
-};
-
-class MaterialTheme {
+export class MaterialTheme {
   public static readonly generateLightTheme = (palette: Palette): Theme => ({
     primary: {
       background: palette.primary40,

src/theme/theme.ts

@@ -1,9 +1,9 @@
 import {useContext} from 'react';
 
-import {ThemeContext} from './Theme.context';
+import {MaterialComponentsContext} from '../provider/MaterialComponents.context';
 
 export const useTheme = () => {
-  const theme = useContext(ThemeContext);
+  const {theme} = useContext(MaterialComponentsContext);
 
   return theme;
 };