chore: cleanup

src/client/v1/Template/dashboard/Dashboard.tsx

@@ -11,7 +11,6 @@ import SideMenu from "./components/SideMenu";
 import AppTheme from "../shared-theme/AppTheme";
 import {
   chartsCustomizations,
-  dataGridCustomizations,
   datePickersCustomizations,
   treeViewCustomizations,
 } from "./theme/customizations";
@@ -19,7 +18,6 @@ import { Outlet } from "react-router";
 
 const xThemeComponents = {
   ...chartsCustomizations,
-  ...dataGridCustomizations,
   ...datePickersCustomizations,
   ...treeViewCustomizations,
 };

src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts

@@ -1,132 +0,0 @@
-import { paperClasses } from '@mui/material/Paper';
-import { alpha, Theme } from '@mui/material/styles';
-import type { DataGridProComponents } from '@mui/x-data-grid-pro/themeAugmentation';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { listItemIconClasses } from '@mui/material/ListItemIcon';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { checkboxClasses } from '@mui/material/Checkbox';
-import { listClasses } from '@mui/material/List';
-import { gridClasses } from '@mui/x-data-grid';
-import { tablePaginationClasses } from '@mui/material/TablePagination';
-import { gray } from '../../../shared-theme/themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridProComponents<Theme> = {
-  MuiDataGrid: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '--DataGrid-overlayHeight': '300px',
-        overflow: 'clip',
-        borderColor: (theme.vars || theme).palette.divider,
-        backgroundColor: (theme.vars || theme).palette.background.default,
-        [`& .${gridClasses.columnHeader}`]: {
-          backgroundColor: (theme.vars || theme).palette.background.paper,
-        },
-        [`& .${gridClasses.footerContainer}`]: {
-          backgroundColor: (theme.vars || theme).palette.background.paper,
-        },
-        [`& .${checkboxClasses.root}`]: {
-          padding: theme.spacing(0.5),
-          '& > svg': {
-            fontSize: '1rem',
-          },
-        },
-        [`& .${tablePaginationClasses.root}`]: {
-          marginRight: theme.spacing(1),
-          '& .MuiIconButton-root': {
-            maxHeight: 32,
-            maxWidth: 32,
-            '& > svg': {
-              fontSize: '1rem',
-            },
-          },
-        },
-      }),
-      cell: ({ theme }) => ({ borderTopColor: (theme.vars || theme).palette.divider }),
-      menu: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        backgroundImage: 'none',
-        [`& .${paperClasses.root}`]: {
-          border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        },
-
-        [`& .${menuItemClasses.root}`]: {
-          margin: '0 4px',
-        },
-        [`& .${listItemIconClasses.root}`]: {
-          marginRight: 0,
-        },
-        [`& .${listClasses.root}`]: {
-          paddingLeft: 0,
-          paddingRight: 0,
-        },
-      }),
-
-      row: ({ theme }) => ({
-        '&:last-of-type': { borderBottom: `1px solid ${(theme.vars || theme).palette.divider}` },
-        '&:hover': {
-          backgroundColor: (theme.vars || theme).palette.action.hover,
-        },
-        '&.Mui-selected': {
-          background: (theme.vars || theme).palette.action.selected,
-          '&:hover': {
-            backgroundColor: (theme.vars || theme).palette.action.hover,
-          },
-        },
-      }),
-      iconButtonContainer: ({ theme }) => ({
-        [`& .${iconButtonClasses.root}`]: {
-          border: 'none',
-          backgroundColor: 'transparent',
-          '&:hover': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-          '&:active': {
-            backgroundColor: gray[200],
-          },
-          ...theme.applyStyles('dark', {
-            color: gray[50],
-            '&:hover': {
-              backgroundColor: gray[800],
-            },
-            '&:active': {
-              backgroundColor: gray[900],
-            },
-          }),
-        },
-      }),
-      menuIconButton: ({ theme }) => ({
-        border: 'none',
-        backgroundColor: 'transparent',
-        '&:hover': {
-          backgroundColor: gray[100],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          color: gray[50],
-          '&:hover': {
-            backgroundColor: gray[800],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-      filterForm: ({ theme }) => ({
-        gap: theme.spacing(1),
-        alignItems: 'flex-end',
-      }),
-      columnsManagementHeader: ({ theme }) => ({
-        paddingRight: theme.spacing(3),
-        paddingLeft: theme.spacing(3),
-      }),
-      columnHeaderTitleContainer: {
-        flexGrow: 1,
-        justifyContent: 'space-between',
-      },
-      columnHeaderDraggableContainer: { paddingRight: 2 },
-    },
-  },
-};

src/client/v1/Template/dashboard/theme/customizations/datePickers.ts

@@ -1,12 +1,11 @@
 import { alpha, Theme } from '@mui/material/styles';
-import type { PickersProComponents } from '@mui/x-date-pickers-pro/themeAugmentation';
 import type { PickerComponents } from '@mui/x-date-pickers/themeAugmentation';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { pickersDayClasses, yearCalendarClasses } from '@mui/x-date-pickers';
 import { gray, brand } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
-export const datePickersCustomizations: PickersProComponents<Theme> & PickerComponents<Theme> = {
+export const datePickersCustomizations: PickerComponents<Theme> = {
   MuiPickerPopper: {
     styleOverrides: {
       paper: ({ theme }) => ({

src/client/v1/Template/dashboard/theme/customizations/index.ts

@@ -1,4 +1,3 @@
 export { chartsCustomizations } from './charts';
-export { dataGridCustomizations } from './dataGrid';
 export { datePickersCustomizations } from './datePickers';
 export { treeViewCustomizations } from './treeView';

src/client/v1/Template/shared-theme/AppTheme.tsx

@@ -1,37 +1,31 @@
 import * as React from "react";
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from "@mui/material/styles";
-import type { ThemeOptions } from '@mui/material/styles';
+import type { ThemeOptions } from "@mui/material/styles";
-import { inputsCustomizations } from './customizations/inputs';
+import { inputsCustomizations } from "./customizations/inputs";
-import { dataDisplayCustomizations } from './customizations/dataDisplay';
+import { dataDisplayCustomizations } from "./customizations/dataDisplay";
-import { feedbackCustomizations } from './customizations/feedback';
+import { feedbackCustomizations } from "./customizations/feedback";
-import { navigationCustomizations } from './customizations/navigation';
+import { navigationCustomizations } from "./customizations/navigation";
-import { surfacesCustomizations } from './customizations/surfaces';
+import { surfacesCustomizations } from "./customizations/surfaces";
-import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
 
 interface AppThemeProps {
   children: React.ReactNode;
-  /**
+  themeComponents?: ThemeOptions["components"];
-   * This is for the docs site. You can ignore it or remove it.
-   */
-  disableCustomTheme?: boolean;
-  themeComponents?: ThemeOptions['components'];
 }
 
 export default function AppTheme(props: AppThemeProps) {
-  const { children, disableCustomTheme, themeComponents } = props;
+  const { children, themeComponents } = props;
   const theme = React.useMemo(() => {
-    return disableCustomTheme
+    return createTheme({
-      ? {}
-      : createTheme({
       // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
       cssVariables: {
-            colorSchemeSelector: 'data-mui-color-scheme',
+        colorSchemeSelector: "data-mui-color-scheme",
-            cssVarPrefix: 'template',
+        cssVarPrefix: "template",
       },
       colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
-          typography,
+      typography, // See https://mui.com/material-ui/customization/typography/
-          shadows,
+      shadows, // See ???
-          shape,
+      shape, // See ???
       components: {
         ...inputsCustomizations,
         ...dataDisplayCustomizations,
@@ -41,10 +35,7 @@ export default function AppTheme(props: AppThemeProps) {
         ...themeComponents,
       },
     });
-  }, [disableCustomTheme, themeComponents]);
+  }, [themeComponents]);
-  if (disableCustomTheme) {
-    return <React.Fragment>{children}</React.Fragment>;
-  }
   return (
     <ThemeProvider theme={theme} disableTransitionOnChange>
       {children}