refactor(DEV-13634): pass functional customization via new theme config

team-monite · Dec 23, 2024 · f51b8aa · f51b8aa
1 parent d210da6
commit f51b8aa
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 39 deletions.
diff --git a/packages/sdk-react/mui-styles.d.ts b/packages/sdk-react/mui-styles.d.ts
@@ -8,7 +8,6 @@ import {
   type MonitePayableDetailsInfoProps,
   type MonitePayableStatusChipProps,
   type MonitePayableTableProps,
-  type MoniteTablePaginationProps,
 } from '@/core/theme/types';
 import { type MoniteIconWrapperProps } from '@/ui/iconWrapper/IconWrapper';
 import {

diff --git a/packages/sdk-react/src/core/theme/monite/index.ts b/packages/sdk-react/src/core/theme/monite/index.ts
@@ -63,5 +63,13 @@ export const getTheme = (theme: ThemeConfig) => {
         lineHeight: theme.typography?.body2?.lineHeight || '20px',
       },
     },
+
+    components: {
+      TablePagination: {
+        pageSizeOptions: theme.components?.TablePagination?.pageSizeOptions || [
+          15, 30, 100,
+        ],
+      },
+    },
   };
 };
diff --git a/packages/sdk-react/src/core/theme/mui-monite/index.ts b/packages/sdk-react/src/core/theme/mui-monite/index.ts
@@ -714,7 +714,7 @@ export const getTheme = (theme: ThemeConfig): ThemeOptions => {
     },
     MoniteTablePagination: {
       defaultProps: {
-        pageSizeOptions: [15, 30, 100],
+        pageSizeOptions: moniteTheme.components.TablePagination.pageSizeOptions,
       },
     },
     MuiDataGrid: {

diff --git a/packages/sdk-react/src/core/theme/types.ts b/packages/sdk-react/src/core/theme/types.ts
@@ -1,5 +1,5 @@
 import { components, Services } from '@/api';
-import { ChipProps, SelectProps } from '@mui/material';
+import { ChipProps } from '@mui/material';
 
 type TypographyStyle = {
   fontSize?: string | number;
@@ -38,6 +38,12 @@ export type ThemeConfig = {
     body1?: TypographyStyle;
     body2?: TypographyStyle;
   };
+
+  components?: {
+    TablePagination?: {
+      pageSizeOptions?: number[];
+    };
+  };
 };
 
 export type MonitePalette = {
@@ -93,23 +99,6 @@ export type MonitePalette = {
   divider: string;
 };
 
-interface MoniteTablePaginationRootSlotProps {
-  pageSizeOptions?: number[];
-}
-
-interface MoniteTablePaginationSlotProps {
-  slotProps?: {
-    pageSizeSelect?: Omit<
-      SelectProps,
-      'value' | 'defaultValue' | 'aria-label' | 'ref' | 'components'
-    >;
-  };
-}
-
-export interface MoniteTablePaginationProps
-  extends MoniteTablePaginationSlotProps,
-    MoniteTablePaginationRootSlotProps {}
-
 interface BaseChipProps {
   /** The variant of the Chip. */
   variant?: ChipProps['variant'];

diff --git a/packages/sdk-react/src/ui/table/TablePagination.tsx b/packages/sdk-react/src/ui/table/TablePagination.tsx
@@ -16,7 +16,6 @@ import {
 } from '@mui/material';
 import { styled, useThemeProps } from '@mui/material/styles';
 
-// eslint-disable-next-line lingui/no-unlocalized-strings
 const componentName = 'MoniteTablePagination' as const;
 const DEFAULT_PAGE_SIZE = 10 as const;
 
@@ -56,24 +55,7 @@ interface TablePaginationProps<T> extends MoniteTablePaginationProps {
  * @param paginationModel The current pagination model. It should contain the current page and the page size.
  * @param nextPage The next page number. If undefined, the next page button will be disabled.
  * @param prevPage The previous page number. If undefined, the previous page button will be disabled.
- * @param pageSizeOptions The page size options. If not provided, will be used from MUI theme or hidden if only one option is available.
- * @example MUI theming
- * // You can configure the component through MUI theming like this:
- * createTheme(myTheme, {
- *   components: {
- *     MoniteTablePagination: {
- *       defaultProps: {
- *         // The default page size options
- *         pageSizeOptions: [5, 10, 15, 20],
- *         slotProps: {
- *           pageSizeSelect: {
- *             size: 'small',
- *           },
- *         },
- *       },
- *     }
- *   }
- * }
+ * @param pageSizeOptions The page size options. If not provided, will be used from theme or hidden if only one option is available.
  */
 export const TablePagination = <T,>({
   onPaginationModelChange,

diff --git a/packages/sdk-react/src/utils/storybook-utils.tsx b/packages/sdk-react/src/utils/storybook-utils.tsx
@@ -74,6 +74,11 @@ const defaultThemeConfig: ThemeConfig = {
 
     text: '#401d6d',
   },
+  components: {
+    TablePagination: {
+      pageSizeOptions: [10, 20, 100],
+    },
+  },
 };
 
 export const GlobalStorybookDecorator = (props: {