feat(DEV-13429): update default factor for spacing, remove provider t…

…heme from theme creation config
team-monite · Dec 17, 2024 · 3a06141 · 3a06141
1 parent 3cd040a
commit 3a06141
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 14 deletions.
diff --git a/...sdk-react/src/components/approvalPolicies/ApprovalPoliciesTable/ApprovalPoliciesTable.tsx b/...sdk-react/src/components/approvalPolicies/ApprovalPoliciesTable/ApprovalPoliciesTable.tsx
@@ -171,10 +171,9 @@ const ApprovalPoliciesTableBase = ({
         headerName: t(i18n)`Flow`,
         sortable: false,
         flex: 1,
-        renderCell: (params) => {
-          console.log(params.row);
-          return <ApprovalPoliciesRules approvalPolicy={params.row} />;
-        },
+        renderCell: (params) => (
+          <ApprovalPoliciesRules approvalPolicy={params.row} />
+        ),
       },
       {
         field: 'status',

diff --git a/packages/sdk-react/src/core/context/MoniteContext.tsx b/packages/sdk-react/src/core/context/MoniteContext.tsx
@@ -19,7 +19,7 @@ import { SentryFactory } from '@/core/services';
 import { type ThemeConfig } from '@/core/theme/types';
 import { createThemeWithDefaults } from '@/core/utils/createThemeWithDefaults';
 import type { I18n } from '@lingui/core';
-import type { Theme, ThemeOptions } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { Hub } from '@sentry/react';
 import type { QueryClient } from '@tanstack/react-query';
 

diff --git a/packages/sdk-react/src/core/theme/monite/index.ts b/packages/sdk-react/src/core/theme/monite/index.ts
@@ -3,7 +3,7 @@ import { ThemeConfig } from '@/core/theme/types';
 export const getTheme = (theme: ThemeConfig) => {
   return {
     borderRadius: theme.borderRadius || 3,
-    spacing: theme.spacing || 24,
+    spacing: theme.spacing || 8,
 
     colors: {
       primary: theme.colors?.primary || '#3737FF',

diff --git a/packages/sdk-react/src/core/theme/mui-monite/index.ts b/packages/sdk-react/src/core/theme/mui-monite/index.ts
@@ -1175,6 +1175,7 @@ export const getTheme = (theme: ThemeConfig): ThemeOptions => {
   const components = renderColors(defaultMoniteComponents, palette);
 
   return {
+    spacing: moniteTheme.spacing,
     palette: {
       ...palette,
     },

diff --git a/packages/sdk-react/src/core/utils/createThemeWithDefaults.ts b/packages/sdk-react/src/core/utils/createThemeWithDefaults.ts
@@ -17,9 +17,9 @@ import { FINANCING_LABEL } from '../queries/useFinancing';
  */
 export const createThemeWithDefaults = (
   i18n: I18n,
-  theme: ThemeConfig | undefined
+  theme: ThemeConfig = {}
 ) => {
-  const themeOptions = getTheme(theme || {});
+  const themeOptions = getTheme(theme);
 
   return createTheme(
     themeOptions,
@@ -48,7 +48,6 @@ export const createThemeWithDefaults = (
         },
       },
     } satisfies ThemeOptions,
-    theme ?? {},
     {
       components: {
         ...createComponentsThemeDefaultProps(

diff --git a/packages/sdk-react/src/utils/storybook-utils.tsx b/packages/sdk-react/src/utils/storybook-utils.tsx
@@ -8,7 +8,8 @@ import { ThemeConfig } from '@/core/theme/types';
 import { entityIds } from '@/mocks/entities';
 import { setupI18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import { ThemeProvider } from '@mui/material';
+import { ThemeProvider, Theme } from '@mui/material';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { deepmerge } from '@mui/utils';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -97,15 +98,26 @@ export const GlobalStorybookDecorator = (props: {
 
   const defaultThemeConfig: ThemeConfig = {
     borderRadius: 10,
+    spacing: 4,
 
     colors: {
       primary: '#000000',
+      secondary: '#CD0F0F',
+      neutral: '#c6c9f8',
+      background: '#f4f4fe',
+
+      text: '#242dd3',
+    },
+
+    typography: {
+      fontFamily: 'monospace',
+      fontSize: 12,
     },
   };
 
   return (
     <>
-      <FallbackProviders theme={deepmerge(defaultThemeConfig, props.theme)}>
+      <FallbackProviders>
         <MoniteProvider
           monite={props.monite ?? monite}
           theme={deepmerge(defaultThemeConfig, props.theme)}
@@ -131,10 +143,10 @@ const MoniteReactQueryDevtools = () => {
  */
 function FallbackProviders({
   children,
-  theme = {},
+  theme,
 }: {
   children: ReactNode;
-  theme?: ThemeConfig;
+  theme?: Theme;
 }) {
   const i18n = useMemo(() => {
     return setupI18n({
@@ -146,7 +158,7 @@ function FallbackProviders({
   }, []);
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme || {}}>
       <I18nProvider
         // Due to the imperative nature of the I18nProvider,
         // a `key` must be added to change the locale in real time