From c340a3a8f458943bcd434b8e6cc1362fc58ae770 Mon Sep 17 00:00:00 2001 From: mattia Date: Tue, 8 Jul 2025 22:17:17 +0200 Subject: [PATCH] chore: cleanup --- .../v1/Template/dashboard/Dashboard.tsx | 2 - .../theme/customizations/dataGrid.ts | 132 ------------------ .../theme/customizations/datePickers.ts | 3 +- .../dashboard/theme/customizations/index.ts | 1 - .../v1/Template/shared-theme/AppTheme.tsx | 69 ++++----- 5 files changed, 31 insertions(+), 176 deletions(-) delete mode 100644 src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts diff --git a/src/client/v1/Template/dashboard/Dashboard.tsx b/src/client/v1/Template/dashboard/Dashboard.tsx index 8a3f044..064b29c 100644 --- a/src/client/v1/Template/dashboard/Dashboard.tsx +++ b/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, }; diff --git a/src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts b/src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts deleted file mode 100644 index 822b513..0000000 --- a/src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts +++ /dev/null @@ -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 & DataGridProComponents = { - 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 }, - }, - }, -}; diff --git a/src/client/v1/Template/dashboard/theme/customizations/datePickers.ts b/src/client/v1/Template/dashboard/theme/customizations/datePickers.ts index ca6f8d3..f0d760c 100644 --- a/src/client/v1/Template/dashboard/theme/customizations/datePickers.ts +++ b/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 & PickerComponents = { +export const datePickersCustomizations: PickerComponents = { MuiPickerPopper: { styleOverrides: { paper: ({ theme }) => ({ diff --git a/src/client/v1/Template/dashboard/theme/customizations/index.ts b/src/client/v1/Template/dashboard/theme/customizations/index.ts index ef97812..8775a31 100644 --- a/src/client/v1/Template/dashboard/theme/customizations/index.ts +++ b/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'; diff --git a/src/client/v1/Template/shared-theme/AppTheme.tsx b/src/client/v1/Template/shared-theme/AppTheme.tsx index 91ebd27..0b647dc 100644 --- a/src/client/v1/Template/shared-theme/AppTheme.tsx +++ b/src/client/v1/Template/shared-theme/AppTheme.tsx @@ -1,50 +1,41 @@ import * as React from "react"; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import type { ThemeOptions } from '@mui/material/styles'; -import { inputsCustomizations } from './customizations/inputs'; -import { dataDisplayCustomizations } from './customizations/dataDisplay'; -import { feedbackCustomizations } from './customizations/feedback'; -import { navigationCustomizations } from './customizations/navigation'; -import { surfacesCustomizations } from './customizations/surfaces'; -import { colorSchemes, typography, shadows, shape } from './themePrimitives'; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import type { ThemeOptions } from "@mui/material/styles"; +import { inputsCustomizations } from "./customizations/inputs"; +import { dataDisplayCustomizations } from "./customizations/dataDisplay"; +import { feedbackCustomizations } from "./customizations/feedback"; +import { navigationCustomizations } from "./customizations/navigation"; +import { surfacesCustomizations } from "./customizations/surfaces"; +import { colorSchemes, typography, shadows, shape } from "./themePrimitives"; interface AppThemeProps { children: React.ReactNode; - /** - * This is for the docs site. You can ignore it or remove it. - */ - disableCustomTheme?: boolean; - themeComponents?: ThemeOptions['components']; + themeComponents?: ThemeOptions["components"]; } export default function AppTheme(props: AppThemeProps) { - const { children, disableCustomTheme, themeComponents } = props; + const { children, themeComponents } = props; const theme = React.useMemo(() => { - return disableCustomTheme - ? {} - : 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', - cssVarPrefix: 'template', - }, - colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes - typography, - shadows, - shape, - components: { - ...inputsCustomizations, - ...dataDisplayCustomizations, - ...feedbackCustomizations, - ...navigationCustomizations, - ...surfacesCustomizations, - ...themeComponents, - }, - }); - }, [disableCustomTheme, themeComponents]); - if (disableCustomTheme) { - return {children}; - } + return 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", + cssVarPrefix: "template", + }, + colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes + typography, // See https://mui.com/material-ui/customization/typography/ + shadows, // See ??? + shape, // See ??? + components: { + ...inputsCustomizations, + ...dataDisplayCustomizations, + ...feedbackCustomizations, + ...navigationCustomizations, + ...surfacesCustomizations, + ...themeComponents, + }, + }); + }, [themeComponents]); return ( {children}