Fix stories chromatic (#12412)

<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/973df4a5-a12c-438c-87a8-3218e63d9998"
/>

packages/twenty-front/src/modules/client-config/hooks/useClientConfig.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { ClientConfig } from '~/generated/graphql';
 import { clientConfigApiStatusState } from '../states/clientConfigApiStatusState';
@@ -17,7 +18,7 @@ export const useClientConfig = (): UseClientConfigResult => {
     clientConfigApiStatusState,
   );
 
-  const fetchClientConfig = async () => {
+  const fetchClientConfig = useCallback(async () => {
     setClientConfigApiStatus((prev) => ({
       ...prev,
       isLoading: true,
@@ -43,7 +44,7 @@ export const useClientConfig = (): UseClientConfigResult => {
         error,
       }));
     }
-  };
+  }, [setClientConfigApiStatus]);
 
   return {
     data: clientConfigApiStatus.data,

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormDateFieldInput.stories.tsx

@@ -171,17 +171,10 @@ export const ResetsDateByErasingInputContent: Story = {
 
     await userEvent.clear(input);
 
-    await Promise.all([
+    await userEvent.type(input, '{Enter}');
-      userEvent.type(input, '{Enter}'),
 
-      waitForElementToBeRemoved(() => canvas.queryByRole('dialog')),
-      waitFor(() => {
     expect(args.onChange).toHaveBeenCalledWith(null);
-      }),
-      waitFor(() => {
     expect(input).toHaveDisplayValue('');
-      }),
-    ]);
   },
 };
 
@@ -202,13 +195,11 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
     const datePicker = await canvas.findByRole('dialog');
     expect(datePicker).toBeVisible();
 
-    await Promise.all([
+    await userEvent.type(input, '02/02/1500{Enter}');
-      userEvent.type(input, '02/02/1500{Enter}'),
+    await waitFor(() => {
-
-      waitFor(() => {
       expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
-      }),
+    });
-      waitFor(() => {
+
     expect(input).toHaveDisplayValue(
       parseDateToString({
         date: MIN_DATE,
@@ -216,8 +207,7 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
         userTimezone: undefined,
       }),
     );
-      }),
+
-      waitFor(() => {
     const expectedDate = DateTime.fromJSDate(MIN_DATE)
       .toLocal()
       .set({
@@ -238,8 +228,6 @@ export const DefaultsToMinValueWhenTypingReallyOldDate: Story = {
       },
     });
     expect(selectedDay).toBeVisible();
-      }),
-    ]);
   },
 };
 

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -54,6 +54,8 @@ export const Default: Story = {
     const canvas = within(canvasElement);
     const continueWithEmailButton = await canvas.findByText(
       'Continue with Email',
+      {},
+      { timeout: 3000 },
     );
 
     await fireEvent.click(continueWithEmailButton);

packages/twenty-front/src/pages/settings/roles/__stories__/SettingsRoles.stories.tsx

@@ -40,6 +40,7 @@ export const NoRoles: Story = {
             },
           });
         }),
+        ...graphqlMocks.handlers,
       ],
     },
   },