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')),
+    expect(args.onChange).toHaveBeenCalledWith(null);
-      waitFor(() => {
+    expect(input).toHaveDisplayValue('');
-        expect(args.onChange).toHaveBeenCalledWith(null);
-      }),
-      waitFor(() => {
-        expect(input).toHaveDisplayValue('');
-      }),
-    ]);
   },
 };
 
@@ -202,44 +195,39 @@ 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(() => {
+      expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
+    });
 
-      waitFor(() => {
+    expect(input).toHaveDisplayValue(
-        expect(args.onChange).toHaveBeenCalledWith(MIN_DATE.toISOString());
+      parseDateToString({
+        date: MIN_DATE,
+        isDateTimeInput: false,
+        userTimezone: undefined,
       }),
-      waitFor(() => {
+    );
-        expect(input).toHaveDisplayValue(
-          parseDateToString({
-            date: MIN_DATE,
-            isDateTimeInput: false,
-            userTimezone: undefined,
-          }),
-        );
-      }),
-      waitFor(() => {
-        const expectedDate = DateTime.fromJSDate(MIN_DATE)
-          .toLocal()
-          .set({
-            day: MIN_DATE.getUTCDate(),
-            month: MIN_DATE.getUTCMonth() + 1,
-            year: MIN_DATE.getUTCFullYear(),
-            hour: 0,
-            minute: 0,
-            second: 0,
-            millisecond: 0,
-          });
 
-        const selectedDay = within(datePicker).getByRole('option', {
+    const expectedDate = DateTime.fromJSDate(MIN_DATE)
-          selected: true,
+      .toLocal()
-          name: (accessibleName) => {
+      .set({
-            // The name looks like "Choose Sunday, December 31st, 1899"
+        day: MIN_DATE.getUTCDate(),
-            return accessibleName.includes(expectedDate.toFormat('yyyy'));
+        month: MIN_DATE.getUTCMonth() + 1,
-          },
+        year: MIN_DATE.getUTCFullYear(),
-        });
+        hour: 0,
-        expect(selectedDay).toBeVisible();
+        minute: 0,
-      }),
+        second: 0,
-    ]);
+        millisecond: 0,
+      });
+
+    const selectedDay = within(datePicker).getByRole('option', {
+      selected: true,
+      name: (accessibleName) => {
+        // The name looks like "Choose Sunday, December 31st, 1899"
+        return accessibleName.includes(expectedDate.toFormat('yyyy'));
+      },
+    });
+    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,
       ],
     },
   },