feat(components): Export ThemeProvider

fix #368

Signed-off-by: Antonette Caldwell <[email protected]>

packages/components/src/custom/Helpers/CondtionalTooltip/index.tsx

@@ -1 +1,2 @@
-export { ConditionalTooltip } from './tooltip-for-desc';
+import ConditionalTooltip from './tooltip-for-desc';
+export { ConditionalTooltip };

packages/components/src/custom/TooltipIcon.tsx

@@ -11,7 +11,13 @@ interface TooltipIconProps {
   style?: React.CSSProperties;
 }
 
-export function TooltipIcon({ title, onClick, icon, style, arrow = false }: TooltipIconProps) {
+export function TooltipIcon({
+  title,
+  onClick,
+  icon,
+  style,
+  arrow = false
+}: TooltipIconProps): JSX.Element {
   return (
     <Tooltip title={title} arrow={arrow}>
       <IconButton

packages/components/src/index.tsx

@@ -76,3 +76,4 @@ export {
   type FilterColumn,
   type UniversalFilterProps
 } from './custom/UniversalFilter';
+export { default as SistentProvider } from './theme/SistentProvider';

packages/components/src/patches/Tooltip.tsx

@@ -11,10 +11,12 @@ export interface ChildrenPropType<T> {
 export const Tooltip = React.forwardRef<
   HTMLDivElement,
   TooltipProps & ChildrenPropType<React.ReactNode>
->((props, ref) => (
-  <MuiTooltip {...props} ref={ref}>
-    <span>{props.children}</span>
-  </MuiTooltip>
-));
+>(
+  (props, ref): JSX.Element => (
+    <MuiTooltip {...props} ref={ref}>
+      <span>{props.children}</span>
+    </MuiTooltip>
+  )
+);
 
 export default Tooltip;

packages/components/src/theme/SistentProvider.tsx

@@ -0,0 +1,35 @@
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import { CssBaseline, PaletteMode, Theme, ThemeProvider } from '@mui/material';
+import React from 'react';
+import createEmotionCache from './createEmotionCache';
+import { createCustomTheme } from './theme';
+
+const clientSideEmotionCache = createEmotionCache();
+
+interface SistentProviderProps {
+  children: React.ReactNode;
+  emotionCache?: EmotionCache;
+}
+
+function SistentProvider({
+  children,
+  emotionCache = clientSideEmotionCache
+}: SistentProviderProps): JSX.Element {
+  const initialMode = 'light';
+  const [mode] = React.useState<PaletteMode>(initialMode);
+
+  const theme = React.useMemo<Theme>(() => createCustomTheme(mode), [mode]);
+
+  return (
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}
+
+export default SistentProvider;
+
+export { SistentProvider };

packages/components/src/theme/components.ts

@@ -0,0 +1,10 @@
+import { Components, Theme } from '@mui/material';
+import { MuiAppBar } from './components/appbar.modifiter';
+import { MuiDrawer } from './components/drawer.modifier';
+import { MuiSvgIcon } from './components/svgicon.modifier';
+
+export const components: Components<Theme> = {
+  MuiAppBar,
+  MuiDrawer,
+  MuiSvgIcon
+};

packages/components/src/theme/components/appbar.modifiter.ts

@@ -0,0 +1,20 @@
+import { Components, Theme } from '@mui/material';
+import { drawerWidth } from '../theme';
+
+export const MuiAppBar: Components<Theme>['MuiAppBar'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      const {
+        palette: {
+          primary: { main }
+        }
+      } = theme;
+      return {
+        width: `calc(100% - ${drawerWidth}px)`,
+        ml: { sm: `${drawerWidth}px` },
+        elevation: 2,
+        background: main
+      };
+    }
+  }
+};

packages/components/src/theme/components/drawer.modifier.ts

@@ -0,0 +1,22 @@
+import { Components, Theme } from '@mui/material';
+import { drawerWidth } from '../theme';
+
+export const MuiDrawer: Components<Theme>['MuiDrawer'] = {
+  styleOverrides: {
+    root: ({ theme }) => {
+      const {
+        palette: {
+          primary: { main }
+        }
+      } = theme;
+      return {
+        width: drawerWidth,
+        '& .MuiDrawer-paper': {
+          width: drawerWidth,
+          boxSize: 'border-box',
+          background: main
+        }
+      };
+    }
+  }
+};

packages/components/src/theme/components/svgicon.modifier.ts

@@ -0,0 +1,10 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiSvgIcon: Components<Theme>['MuiSvgIcon'] = {
+  styleOverrides: {
+    root: {
+      height: 24,
+      width: 24
+    }
+  }
+};

packages/components/src/theme/createEmotionCache.ts

@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache';
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: 'css', prepend: true });
+}

packages/components/src/theme/palette.ts

@@ -0,0 +1,35 @@
+import { PaletteOptions } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+
+declare module '@mui/material/styles' {
+  interface PaletteColor {
+    darker?: string;
+  }
+  interface SimplePaletteColorOptions {
+    darker?: string;
+  }
+  interface Palette {
+    neutral?: Palette['primary'];
+  }
+  interface PaletteOptions {
+    neutral?: PaletteOptions['primary'];
+  }
+}
+
+export const lightModePalette: PaletteOptions = {
+  primary: {
+    main: blueGrey[600],
+    light: blueGrey[400],
+    dark: blueGrey[700]
+  },
+  secondary: {
+    main: '#EE5351'
+  },
+  neutral: {}
+};
+
+export const darkModePalette: PaletteOptions = {
+  primary: {},
+  secondary: {},
+  neutral: {}
+};

packages/components/src/theme/theme.ts

@@ -0,0 +1,43 @@
+import { PaletteMode, createTheme } from '@mui/material';
+import { components } from './components';
+import { darkModePalette, lightModePalette } from './palette';
+import { typography } from './typography';
+
+export const drawerWidth = 240;
+
+export const createCustomTheme = (paletteType: PaletteMode) => {
+  const palette = paletteType === 'light' ? lightModePalette : darkModePalette;
+
+  const theme = createTheme({
+    palette,
+    components,
+    typography: typography(paletteType),
+    breakpoints: {}
+  });
+
+  return theme;
+};
+
+/*
+  const commonPalette = {
+    palette: {
+      paletteType,
+      ...(paletteType === 'light' ? lightModePalette : darkModePalette)
+    }
+  };
+
+
+  const palette =
+    paletteType === 'dark'
+      ? {
+          mode: 'dark',
+          ...commonPalette,
+          text: {
+            main: '#FFFFFF'
+          }
+        }
+      : {
+          mode: 'light',
+          ...commonPalette
+        };
+        */

packages/components/src/theme/typography.ts

@@ -0,0 +1,16 @@
+import { PaletteMode } from '@mui/material';
+import { TypographyOptions } from '@mui/material/styles/createTypography';
+
+export const typography = (paletteType: PaletteMode): TypographyOptions => {
+  return {
+    // fontFamily: QanelasSoftFont.style.fontFamily,
+    // body1: { fontFamily: QanelasSoftFont.style.fontFamily },
+    // body2: { fontFamily: QanelasSoftFont.style.fontFamily },
+    h5: {
+      color: paletteType === 'light' ? '#000000' : '#FFFFFF'
+    },
+    h6: {
+      color: paletteType === 'light' ? '#000000' : '#FFFFFF'
+    }
+  };
+};