Remove randomness from flaky twenty-front Storybook stories (#21594)

Several twenty-front Storybook stories were flagged flaky by Argos
because they render different pixels across runs. This removes the
non-determinism behind them.

**What changed**
- **Images** — replaced random `picsum.photos` URLs in the Logo and
TabList stories with the existing `AVATAR_URL_MOCK`, and added global
MSW handlers in `.storybook/preview.tsx` that serve a deterministic
image for every remote host (picsum, twenty-icons.com,
twentyhq.github.io, etc.) so no story depends on a network image load.
- **Numbers** — the line-chart story built its data with
`Math.random()`; now uses a deterministic formula.
- **Dates** — the terminal "long output" story stamped its lines with
`new Date()`; now uses a fixed base timestamp. The calendar-channel
date/time format previews and example event used render-time
`Date.now()`/`new Date()` in shared components; they now use a fixed
reference date (`DateTimeSettingsPreviewDate`).
- **Lazy-load timing** — the date-picker story now waits for the
lazily-loaded calendar before the snapshot.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21594?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx

@@ -1,6 +1,7 @@
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
@@ -24,7 +25,7 @@ const StyledGeneralContainer = styled.div`
 export const SettingsAccountsCalendarChannelsGeneral = () => {
   const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);
 
-  const exampleStartDate = new Date();
+  const exampleStartDate = DATE_TIME_SETTINGS_PREVIEW_DATE;
   const exampleEndDate = min([
     addMinutes(exampleStartDate, 30),
     endOfDay(exampleStartDate),

packages/twenty-front/src/modules/settings/experience/components/DateTimeSettingsDateFormatSelect.tsx

@@ -1,6 +1,7 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
 import { DateFormat } from '@/localization/constants/DateFormat';
+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { detectDateFormat } from '@/localization/utils/detection/detectDateFormat';
 import { detectTimeZone } from '@/localization/utils/detection/detectTimeZone';
 import { Select } from '@/ui/input/components/Select';
@@ -26,7 +27,7 @@ export const DateTimeSettingsDateFormatSelect = ({
   const systemDateFormat = DateFormat[detectDateFormat()];
 
   const systemDateFormatLabel = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
     usedTimeZone,
     systemDateFormat,
   );
@@ -46,7 +47,7 @@ export const DateTimeSettingsDateFormatSelect = ({
       options={[
         {
           label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
             usedTimeZone,
             DateFormat.MONTH_FIRST,
           ),
@@ -54,7 +55,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         },
         {
           label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
             usedTimeZone,
             DateFormat.DAY_FIRST,
           ),
@@ -62,7 +63,7 @@ export const DateTimeSettingsDateFormatSelect = ({
         },
         {
           label: formatInTimeZone(
-            Date.now(),
+            DATE_TIME_SETTINGS_PREVIEW_DATE,
             usedTimeZone,
             DateFormat.YEAR_FIRST,
           ),

packages/twenty-front/src/modules/settings/experience/components/DateTimeSettingsTimeFormatSelect.tsx

@@ -1,5 +1,6 @@
 import { formatInTimeZone } from 'date-fns-tz';
 
+import { DATE_TIME_SETTINGS_PREVIEW_DATE } from '@/localization/constants/DateTimeSettingsPreviewDate';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeFormat } from '@/localization/utils/detection/detectTimeFormat';
 import { detectTimeZone } from '@/localization/utils/detection/detectTimeZone';
@@ -25,19 +26,19 @@ export const DateTimeSettingsTimeFormatSelect = ({
   const systemTimeFormat = TimeFormat[detectTimeFormat()];
 
   const systemTimeFormatLabel = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
     usedTimeZone,
     systemTimeFormat,
   );
 
   const hour24Label = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
     usedTimeZone,
     TimeFormat.HOUR_24,
   );
 
   const hour12Label = formatInTimeZone(
-    Date.now(),
+    DATE_TIME_SETTINGS_PREVIEW_DATE,
     usedTimeZone,
     TimeFormat.HOUR_12,
   );