feat: upgrade Storybook to version 9

package.json

@@ -52,7 +52,6 @@
     "rxjs": "^7.2.0",
     "semver": "^7.5.4",
     "slash": "^5.1.0",
-    "storybook-addon-mock-date": "^0.6.0",
     "temporal-polyfill": "^0.3.0",
     "ts-key-enum": "^2.0.12",
     "tslib": "^2.8.1",
@@ -82,26 +81,18 @@
     "@nx/vite": "22.0.3",
     "@nx/web": "22.0.3",
     "@sentry/types": "^8",
-    "@storybook/addon-actions": "8.6.15",
-    "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "8.6.15",
-    "@storybook/addon-interactions": "8.6.15",
-    "@storybook/addon-links": "8.6.15",
-    "@storybook/blocks": "8.6.15",
-    "@storybook/core-server": "8.6.15",
+    "@storybook/addon-coverage": "^2.0.0",
+    "@storybook/addon-links": "^9.1.17",
     "@storybook/icons": "^1.2.9",
-    "@storybook/preview-api": "8.6.15",
-    "@storybook/react": "8.6.15",
-    "@storybook/react-vite": "8.6.15",
-    "@storybook/test": "8.6.15",
+    "@storybook/react-vite": "^9.1.17",
     "@storybook/test-runner": "^0.23.0",
-    "@storybook/types": "8.6.15",
     "@stylistic/eslint-plugin": "^1.5.0",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "^0.3.12",
     "@swc/core": "1.13.3",
     "@swc/helpers": "~0.5.2",
     "@swc/jest": "^0.2.39",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/addressparser": "^1.0.3",
@@ -161,7 +152,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^9.1.17",
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "http-server": "^14.1.1",
@@ -177,9 +168,10 @@
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
     "source-map-support": "^0.5.20",
-    "storybook": "8.6.15",
+    "storybook": "^9.1.17",
     "storybook-addon-cookie": "^3.2.0",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook-addon-mock-date": "1.0.0",
+    "storybook-addon-pseudo-states": "^9.1.17",
     "supertest": "^6.1.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.2.3",

packages/twenty-front/.storybook/main.ts

@@ -48,11 +48,9 @@ const config: StorybookConfig = {
 
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-coverage'),
     // getAbsolutePath("storybook-dark-mode"),
-    getAbsolutePath('storybook-addon-cookie'),
+    // getAbsolutePath('storybook-addon-cookie'),
     getAbsolutePath('storybook-addon-pseudo-states'),
     getAbsolutePath('storybook-addon-mock-date'),
     // getAbsolutePath("@chromatic-com/storybook")

packages/twenty-front/.storybook/preview.tsx

@@ -1,16 +1,16 @@
 import { ThemeProvider } from '@emotion/react';
-import { type Preview } from '@storybook/react';
+import { type Preview } from '@storybook/react-vite';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { useEffect } from 'react';
 //import { useDarkMode } from 'storybook-dark-mode';
 
 // eslint-disable-next-line no-restricted-imports
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
-// eslint-disable-next-line no-restricted-imports
-import { mockedUserJWT } from '../src/testing/mock-data/jwt';
+
 import 'react-loading-skeleton/dist/skeleton.css';
 import 'twenty-ui/style.css';
 import { THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
+import { mockedUserJWT } from '~/testing/mock-data/jwt';
 // eslint-disable-next-line no-restricted-imports
 import { ClickOutsideListenerContext } from '../src/modules/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 

packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx

@@ -1,5 +1,5 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { within } from 'storybook/test';
 
 import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
 import {

packages/twenty-front/src/loading/components/__stories__/UserOrMetadataLoader.stories.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql, http } from 'msw';
+import { expect, within } from 'storybook/test';
 
 import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain';
 import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';

packages/twenty-front/src/modules/action-menu/actions/display/components/__stories__/ActionButton.stories.tsx

@@ -1,11 +1,11 @@
+import { ActionButton } from '@/action-menu/actions/display/components/ActionButton';
 import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
 import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
-import { expect, fn, userEvent, within } from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { ActionButton } from '@/action-menu/actions/display/components/ActionButton';
 
 const meta: Meta<typeof ActionButton> = {
   title: 'Modules/ActionMenu/Actions/Display/ActionButton',

packages/twenty-front/src/modules/action-menu/actions/display/components/__stories__/ActionComponent.stories.tsx

@@ -1,5 +1,5 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
 
 import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
 import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';

packages/twenty-front/src/modules/action-menu/actions/display/components/__stories__/ActionDisplay.stories.tsx

@@ -1,13 +1,13 @@
+import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
 import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';
 import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { expect, fn, userEvent, within } from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
 
 type Story = StoryObj<typeof ActionDisplay>;
 

packages/twenty-front/src/modules/action-menu/actions/display/components/__stories__/ActionDropdownItem.stories.tsx

@@ -1,12 +1,12 @@
+import { ActionDropdownItem } from '@/action-menu/actions/display/components/ActionDropdownItem';
 import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
 import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { expect, fn, userEvent, within } from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { ActionDropdownItem } from '@/action-menu/actions/display/components/ActionDropdownItem';
 
 const meta: Meta<typeof ActionDropdownItem> = {
   title: 'Modules/ActionMenu/Actions/Display/ActionDropdownItem',

packages/twenty-front/src/modules/action-menu/actions/display/components/__stories__/ActionListItem.stories.tsx

@@ -1,12 +1,12 @@
+import { ActionListItem } from '@/action-menu/actions/display/components/ActionListItem';
 import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
 import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
 import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
-import { expect, fn, userEvent, within } from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
-import { ActionListItem } from '@/action-menu/actions/display/components/ActionListItem';
 
 type Story = StoryObj<typeof ActionListItem>;
 

packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx

@@ -1,7 +1,7 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
-import * as test from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { RecoilRoot } from 'recoil';
+import * as test from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { CommandMenuActionMenuDropdown } from '@/action-menu/components/CommandMenuActionMenuDropdown';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -1,7 +1,7 @@
-import { expect, userEvent, waitFor, within } from '@storybook/test';
-import * as test from '@storybook/test';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { RecoilRoot } from 'recoil';
+import * as test from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';

packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx

@@ -1,5 +1,5 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql } from 'msw';
 
 import { CalendarEventsCard } from '@/activities/calendar/components/CalendarEventsCard';

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { type ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { TaskList } from '@/activities/tasks/components/TaskList';
 import { ComponentDecorator } from 'twenty-ui/testing';

packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql } from 'msw';
 
 import { TimelineCard } from '@/activities/timeline-activities/components/TimelineCard';

packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql } from 'msw';
 
 import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent';

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx

@@ -1,6 +1,6 @@
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx

@@ -1,6 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql } from 'msw';
+import { within } from 'storybook/test';
 
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';

packages/twenty-front/src/modules/advanced-text-editor/components/__stories__/AdvancedTextEditor.stories.tsx

@@ -1,7 +1,7 @@
 import { AdvancedTextEditor } from '@/advanced-text-editor/components/AdvancedTextEditor';
 import { useAdvancedTextEditor } from '@/advanced-text-editor/hooks/useAdvancedTextEditor';
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor } from 'storybook/test';
 import { isDefined } from 'twenty-shared/utils';
 import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';

packages/twenty-front/src/modules/ai/components/__stories__/AIChatMessage.stories.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type ExtendedUIMessage } from 'twenty-shared/ai';
 import { ComponentDecorator } from 'twenty-ui/testing';
 

packages/twenty-front/src/modules/ai/components/__stories__/CodeExecutionDisplay.stories.tsx

@@ -1,5 +1,5 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 import { CodeExecutionDisplay } from '@/ai/components/CodeExecutionDisplay';

packages/twenty-front/src/modules/ai/components/__stories__/TerminalOutput.stories.tsx

@@ -1,5 +1,5 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 import { TerminalOutput } from '@/ai/components/TerminalOutput';

packages/twenty-front/src/modules/analytics/hooks/__tests__/useEventTracker.test.tsx

@@ -1,9 +1,9 @@
 import { gql } from '@apollo/client';
 import { MockedProvider, type MockedResponse } from '@apollo/client/testing';
-import { expect } from '@storybook/test';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { type ReactNode } from 'react';
 import { RecoilRoot } from 'recoil';
+import { expect } from 'storybook/test';
 
 import {
   ANALYTICS_COOKIE_NAME,

packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx

@@ -1,11 +1,11 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { Logo } from '@/auth/components/Logo';
 import {
   ComponentDecorator,
   RecoilRootDecorator,
   RouterDecorator,
 } from 'twenty-ui/testing';
-import { Logo } from '@/auth/components/Logo';
 
 const logoUrl = 'https://picsum.photos/192/192';
 

packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx

@@ -1,13 +1,13 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type VerifyEmailEffect } from '@/auth/components/VerifyEmailEffect';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
-import { type VerifyEmailEffect } from '@/auth/components/VerifyEmailEffect';
 
 // Mock component that just renders the error state of VerifyEmailEffect directly
 // (since normal VerifyEmailEffect has async logic that's hard to test in Storybook)
+import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 
 const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => {
   return (

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -6,23 +6,23 @@ import { supportChatState } from '@/client-config/states/supportChatState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useApolloClient } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';
-import { expect } from '@storybook/test';
 import { type ReactNode, act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
+import { expect } from 'storybook/test';
 
-import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
-import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
-import { renderHook } from '@testing-library/react';
-import { iconsState } from 'twenty-ui/display';
-import { SupportDriver } from '~/generated/graphql';
 import {
   email,
   mocks,
   password,
   results,
   token,
 } from '@/auth/hooks/__mocks__/useAuth';
+import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
+import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
+import { renderHook } from '@testing-library/react';
+import { iconsState } from 'twenty-ui/display';
+import { SupportDriver } from '~/generated/graphql';
 
 const redirectSpy = jest.fn();
 

packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx

@@ -1,9 +1,9 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 
 // Wrap the component in Modal.Content to reflect how it's used in the app
 const RenderWithModal = (