initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,36 @@
+// React Imports
+import { useEffect } from 'react'
+
+// MUI Imports
+import { useColorScheme } from '@mui/material/styles'
+
+// Third-party Imports
+import { useMedia } from 'react-use'
+
+// Type Imports
+import type { SystemMode } from '@core/types'
+
+// Hook Imports
+import { useSettings } from '@core/hooks/useSettings'
+
+const ModeChanger = ({ systemMode }: { systemMode: SystemMode }) => {
+  // Hooks
+  const { setMode } = useColorScheme()
+  const { settings } = useSettings()
+  const isDark = useMedia('(prefers-color-scheme: dark)', systemMode === 'dark')
+
+  useEffect(() => {
+    if (settings.mode) {
+      if (settings.mode === 'system') {
+        setMode(isDark ? 'dark' : 'light')
+      } else {
+        setMode(settings.mode)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.mode])
+
+  return null
+}
+
+export default ModeChanger
@@ -0,0 +1,120 @@
+'use client'
+
+// React Imports
+import { useMemo } from 'react'
+
+// MUI Imports
+import { deepmerge } from '@mui/utils'
+import { ThemeProvider, lighten, darken, createTheme } from '@mui/material/styles'
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
+import CssBaseline from '@mui/material/CssBaseline'
+import type {} from '@mui/material/themeCssVarsAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
+import type {} from '@mui/lab/themeAugmentation' //! Do not remove this import otherwise you will get type errors while making a production build
+
+// Third-party Imports
+import { useMedia } from 'react-use'
+import stylisRTLPlugin from 'stylis-plugin-rtl'
+
+// Type Imports
+import type { ChildrenType, Direction, SystemMode } from '@core/types'
+
+// Component Imports
+import ModeChanger from './ModeChanger'
+
+// Config Imports
+import themeConfig from '@configs/themeConfig'
+
+// Hook Imports
+import { useSettings } from '@core/hooks/useSettings'
+
+// Core Theme Imports
+import defaultCoreTheme from '@core/theme'
+
+type Props = ChildrenType & {
+  direction: Direction
+  systemMode: SystemMode
+}
+
+const CustomThemeProvider = (props: Props) => {
+  // Props
+  const { children, direction, systemMode } = props
+
+  // Hooks
+  const { settings } = useSettings()
+  const isDark = useMedia('(prefers-color-scheme: dark)', systemMode === 'dark')
+
+  // Vars
+  const isServer = typeof window === 'undefined'
+  let currentMode: SystemMode
+
+  if (isServer) {
+    currentMode = systemMode
+  } else {
+    if (settings.mode === 'system') {
+      currentMode = isDark ? 'dark' : 'light'
+    } else {
+      currentMode = settings.mode as SystemMode
+    }
+  }
+
+  // Merge the primary color scheme override with the core theme
+  const theme = useMemo(() => {
+    const newTheme = {
+      colorSchemes: {
+        light: {
+          palette: {
+            primary: {
+              main: settings.primaryColor,
+              light: lighten(settings.primaryColor as string, 0.2),
+              dark: darken(settings.primaryColor as string, 0.1)
+            }
+          }
+        },
+        dark: {
+          palette: {
+            primary: {
+              main: settings.primaryColor,
+              light: lighten(settings.primaryColor as string, 0.2),
+              dark: darken(settings.primaryColor as string, 0.1)
+            }
+          }
+        }
+      },
+      cssVariables: {
+        colorSchemeSelector: 'data'
+      }
+    }
+
+    const coreTheme = deepmerge(defaultCoreTheme(settings, currentMode, direction), newTheme)
+
+    return createTheme(coreTheme)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.primaryColor, settings.skin, currentMode])
+
+  return (
+    <AppRouterCacheProvider
+      options={{
+        prepend: true,
+        ...(direction === 'rtl' && {
+          key: 'rtl',
+          stylisPlugins: [stylisRTLPlugin]
+        })
+      }}
+    >
+      <ThemeProvider
+        theme={theme}
+        defaultMode={systemMode}
+        modeStorageKey={`${themeConfig.templateName.toLowerCase().split(' ').join('-')}-mui-template-mode`}
+      >
+        <>
+          <ModeChanger systemMode={systemMode} />
+          <CssBaseline />
+          {children}
+        </>
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  )
+}
+
+export default CustomThemeProvider
@@ -0,0 +1,29 @@
+/*
+ * We recommend using the merged theme if you want to override our core theme.
+ * This means you can use our core theme and override it with your own customizations.
+ * Write your overrides in the userTheme object in this file.
+ * The userTheme object is merged with the coreTheme object within this file.
+ * Export this file and import it in the `@components/theme/index.tsx` file to use the merged theme.
+ */
+
+// MUI Imports
+import { deepmerge } from '@mui/utils'
+import type { Theme } from '@mui/material/styles'
+
+// Type Imports
+import type { Settings } from '@core/contexts/settingsContext'
+import type { SystemMode } from '@core/types'
+
+// Core Theme Imports
+import coreTheme from '@core/theme'
+
+const mergedTheme = (settings: Settings, mode: SystemMode, direction: Theme['direction']) => {
+  // Vars
+  const userTheme = {
+    // Write your overrides here.
+  } as Theme
+
+  return deepmerge(coreTheme(settings, mode, direction), userTheme)
+}
+
+export default mergedTheme
@@ -0,0 +1,237 @@
+/*
+ ! This file is for adding custom types to the MUI theme, components and props.
+ ! Please do not remove anything from this file as it may break the application.
+ ! You can add your own custom types to the MUI theme, components and props in this file
+ ! but you must be aware about the MUI theme structure along with MUI CSS Variables.
+ ! MUI Theme: https://mui.com/material-ui/customization/default-theme/
+ ! MUI CSS Variables: https://mui.com/material-ui/experimental-api/css-theme-variables/overview/
+ */
+
+// MUI Imports
+import type { ComponentsOverrides } from '@mui/material/styles'
+
+// Type Imports
+import type {
+  CustomInputHorizontalProps,
+  CustomInputVerticalProps,
+  CustomInputImgProps
+} from '@core/components/custom-inputs/types'
+
+declare module '@mui/material/styles' {
+  // eslint-disable-next-line lines-around-comment
+  // Theme
+  interface Theme {
+    shape: {
+      borderRadius: number
+      customBorderRadius: {
+        xs: number
+        sm: number
+        md: number
+        lg: number
+        xl: number
+      }
+    }
+    customShadows: {
+      xs: string
+      sm: string
+      md: string
+      lg: string
+      xl: string
+      primary: {
+        sm: string
+        md: string
+        lg: string
+      }
+      secondary: {
+        sm: string
+        md: string
+        lg: string
+      }
+      error: {
+        sm: string
+        md: string
+        lg: string
+      }
+      warning: {
+        sm: string
+        md: string
+        lg: string
+      }
+      info: {
+        sm: string
+        md: string
+        lg: string
+      }
+      success: {
+        sm: string
+        md: string
+        lg: string
+      }
+    }
+    mainColorChannels: {
+      light: string
+      dark: string
+      lightShadow: string
+      darkShadow: string
+    }
+  }
+  interface ThemeOptions {
+    shape?: {
+      borderRadius?: number
+      customBorderRadius?: {
+        xs?: number
+        sm?: number
+        md?: number
+        lg?: number
+        xl?: number
+      }
+    }
+    customShadows?: {
+      xs?: string
+      sm?: string
+      md?: string
+      lg?: string
+      xl?: string
+      primary?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+      secondary?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+      error?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+      warning?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+      info?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+      success?: {
+        sm?: string
+        md?: string
+        lg?: string
+      }
+    }
+    mainColorChannels?: {
+      light?: string
+      dark?: string
+      lightShadow?: string
+      darkShadow?: string
+    }
+  }
+
+  // Palette Color
+  interface PaletteColor {
+    lighterOpacity?: string
+    lightOpacity?: string
+    mainOpacity?: string
+    darkOpacity?: string
+    darkerOpacity?: string
+  }
+  interface SimplePaletteColorOptions {
+    lighterOpacity?: string
+    lightOpacity?: string
+    mainOpacity?: string
+    darkOpacity?: string
+    darkerOpacity?: string
+  }
+
+  // Palette
+  interface Palette {
+    customColors: {
+      bodyBg: string
+      chatBg: string
+      greyLightBg: string
+      inputBorder: string
+      tableHeaderBg: string
+      tooltipText: string
+      trackBg: string
+    }
+  }
+  interface PaletteOptions {
+    customColors?: {
+      bodyBg?: string
+      chatBg?: string
+      greyLightBg?: string
+      inputBorder?: string
+      tableHeaderBg?: string
+      tooltipText?: string
+      trackBg?: string
+    }
+  }
+
+  // Components
+  interface ComponentNameToClassKey {
+    MuiCustomInputHorizontal: 'root' | 'title' | 'meta' | 'content' | 'input'
+    MuiCustomInputVertical: 'root' | 'title' | 'content' | 'input'
+    MuiCustomImage: 'root' | 'image' | 'input'
+  }
+
+  interface ComponentsPropsList {
+    MuiCustomInputHorizontal: CustomInputHorizontalProps
+    MuiCustomInputVertical: CustomInputVerticalProps
+    MuiCustomImage: CustomInputImgProps
+  }
+
+  interface Components {
+    MuiCustomInputHorizontal?: {
+      defaultProps?: ComponentsPropsList['MuiCustomInputHorizontal']
+      styleOverrides?: ComponentsOverrides<Theme>['MuiCustomInputHorizontal']
+    }
+    MuiCustomInputVertical?: {
+      defaultProps?: ComponentsPropsList['MuiCustomInputVertical']
+      styleOverrides?: ComponentsOverrides<Theme>['MuiCustomInputVertical']
+    }
+    MuiCustomImage?: {
+      defaultProps?: ComponentsPropsList['MuiCustomImage']
+      styleOverrides?: ComponentsOverrides<Theme>['MuiCustomImage']
+    }
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsVariantOverrides {
+    tonal: true
+  }
+}
+
+declare module '@mui/material/ButtonGroup' {
+  interface ButtonGroupPropsVariantOverrides {
+    tonal: true
+  }
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsVariantOverrides {
+    tonal: true
+  }
+}
+
+declare module '@mui/material/Pagination' {
+  interface PaginationPropsVariantOverrides {
+    tonal: true
+  }
+}
+
+declare module '@mui/material/PaginationItem' {
+  interface PaginationItemPropsVariantOverrides {
+    tonal: true
+  }
+}
+
+declare module '@mui/lab/TimelineDot' {
+  interface TimelineDotPropsVariantOverrides {
+    tonal: true
+  }
+}
@@ -0,0 +1,25 @@
+/*
+ ! We do not recommend using your own custom theme built from scratch.
+ ! Instead, we recommend using the merged theme (src/components/theme/mergedTheme.ts) and customizing it as per your needs.
+ ! If you still want to use your own custom theme, you must be aware about the MUI theme structure along with MUI CSS Variables.
+ ! MUI Theme: https://mui.com/material-ui/customization/default-theme/
+ ! MUI CSS Variables: https://mui.com/material-ui/experimental-api/css-theme-variables/overview/
+ ! Export this file and import it in the `@components/theme/index.tsx` file to use only this theme.
+ */
+
+// MUI Imports
+import type { Theme } from '@mui/material/styles'
+
+// Type Imports
+/* Enable following line and the `settings` parameter in the below `userTheme`
+   function in order to access `settings` context value in your custom theme object
+ */
+// import type { Settings } from '@core/contexts/settingsContext'
+
+const userTheme = (/* settings: Settings */): Theme => {
+  return {
+    // Write your custom theme object here.
+  } as Theme
+}
+
+export default userTheme