Upgrade storybook to 8

ts/components/Avatar.stories.tsx

@@ -4,9 +4,8 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { expect, jest } from '@storybook/jest';
 import { isBoolean } from 'lodash';
-import { within, userEvent } from '@storybook/testing-library';
+import { expect, fn, within, userEvent } from '@storybook/test';
 import type { AvatarColorType } from '../types/Colors';
 import type { Props } from './Avatar';
 import enMessages from '../../_locales/en/messages.json';
@@ -19,19 +18,6 @@ import { setupI18n } from '../util/setupI18n';
 
 const i18n = setupI18n('en', enMessages);
 
-const colorMap: Record<string, AvatarColorType> = AvatarColors.reduce(
-  (m, color) => ({
-    ...m,
-    [color]: color,
-  }),
-  {}
-);
-
-const conversationTypeMap: Record<string, Props['conversationType']> = {
-  direct: 'direct',
-  group: 'group',
-};
-
 export default {
   title: 'Components/Avatar',
   component: Avatar,
@@ -41,19 +27,19 @@ export default {
     },
     blur: {
       control: { type: 'radio' },
-      options: {
-        Undefined: undefined,
-        NoBlur: AvatarBlur.NoBlur,
-        BlurPicture: AvatarBlur.BlurPicture,
-        BlurPictureWithClickToView: AvatarBlur.BlurPictureWithClickToView,
-      },
+      options: [
+        undefined,
+        AvatarBlur.NoBlur,
+        AvatarBlur.BlurPicture,
+        AvatarBlur.BlurPictureWithClickToView,
+      ],
     },
     color: {
-      options: colorMap,
+      options: AvatarColors,
     },
     conversationType: {
       control: { type: 'radio' },
-      options: conversationTypeMap,
+      options: ['direct', 'group'],
     },
     size: {
       control: false,
@@ -64,7 +50,7 @@ export default {
     },
     theme: {
       control: { type: 'radio' },
-      options: ThemeType,
+      options: [ThemeType.light, ThemeType.dark],
     },
   },
   args: {
@@ -88,7 +74,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isMe: false,
   loading: Boolean(overrideProps.loading),
   noteToSelf: Boolean(overrideProps.noteToSelf),
-  onClick: jest.fn(action('onClick')),
+  onClick: fn(action('onClick')),
   onClickBadge: action('onClickBadge'),
   phoneNumber: overrideProps.phoneNumber || '',
   searchResult: Boolean(overrideProps.searchResult),

ts/components/EditUsernameModalBody.stories.tsx

@@ -36,25 +36,20 @@ export default {
     },
     state: {
       control: { type: 'radio' },
-      options: {
-        Open: State.Open,
-        Closed: State.Closed,
-        Reserving: State.Reserving,
-        Confirming: State.Confirming,
-      },
+      options: [State.Open, State.Closed, State.Reserving, State.Confirming],
     },
     error: {
       control: { type: 'radio' },
-      options: {
-        None: undefined,
-        NotEnoughCharacters: UsernameReservationError.NotEnoughCharacters,
-        TooManyCharacters: UsernameReservationError.TooManyCharacters,
-        CheckStartingCharacter: UsernameReservationError.CheckStartingCharacter,
-        CheckCharacters: UsernameReservationError.CheckCharacters,
-        UsernameNotAvailable: UsernameReservationError.UsernameNotAvailable,
-        General: UsernameReservationError.General,
-        TooManyAttempts: UsernameReservationError.TooManyAttempts,
-      },
+      options: [
+        undefined,
+        UsernameReservationError.NotEnoughCharacters,
+        UsernameReservationError.TooManyCharacters,
+        UsernameReservationError.CheckStartingCharacter,
+        UsernameReservationError.CheckCharacters,
+        UsernameReservationError.UsernameNotAvailable,
+        UsernameReservationError.General,
+        UsernameReservationError.TooManyAttempts,
+      ],
     },
     reservation: {
       type: { name: 'string', required: false },

ts/components/LeftPaneBanner.stories.tsx

@@ -10,8 +10,8 @@ export default {
   title: 'Components/LeftPaneBanner',
   component: LeftPaneBanner,
   argTypes: {
-    actionText: { control: { type: 'string' } },
-    children: { control: { type: 'string' } },
+    actionText: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
   },
   args: {
     actionText: 'Fix now',

ts/components/MyStories.stories.tsx

@@ -4,9 +4,8 @@
 import type { Meta, ReactRenderer, StoryFn } from '@storybook/react';
 import type { PlayFunction } from '@storybook/csf';
 import React from 'react';
-import { expect, jest } from '@storybook/jest';
 import { v4 as uuid } from 'uuid';
-import { within, userEvent } from '@storybook/testing-library';
+import { expect, fn, within, userEvent } from '@storybook/test';
 
 import { action } from '@storybook/addon-actions';
 import type { PropsType } from './MyStories';
@@ -31,10 +30,10 @@ export default {
   },
   args: {
     i18n,
-    onBack: jest.fn(action('onBack')),
+    onBack: fn(action('onBack')),
     onDelete: action('onDelete'),
-    onForward: jest.fn(action('onForward')),
-    onSave: jest.fn(action('onSave')),
+    onForward: fn(action('onForward')),
+    onSave: fn(action('onSave')),
     hasViewReceiptSetting: false,
     renderToastManager: () => <i />,
     queueStoryDownload: action('queueStoryDownload'),

ts/components/MyStoryButton.stories.tsx

@@ -4,8 +4,7 @@
 import type { Meta, ReactRenderer, StoryFn } from '@storybook/react';
 import type { PlayFunction } from '@storybook/csf';
 import React from 'react';
-import { expect, jest } from '@storybook/jest';
-import { within, userEvent } from '@storybook/testing-library';
+import { expect, fn, within, userEvent } from '@storybook/test';
 
 import { action } from '@storybook/addon-actions';
 import type { PropsType } from './MyStoryButton';
@@ -26,8 +25,8 @@ export default {
     i18n,
     me: getDefaultConversation(),
     myStories: [getFakeMyStory()],
-    onAddStory: jest.fn(action('onAddStory')),
-    onClick: jest.fn(action('onClick')),
+    onAddStory: fn(action('onAddStory')),
+    onClick: fn(action('onClick')),
     queueStoryDownload: action('queueStoryDownload'),
     showToast: action('showToast'),
   },

ts/components/ProfileEditor.stories.tsx

@@ -28,11 +28,11 @@ export default {
   argTypes: {
     usernameEditState: {
       control: { type: 'radio' },
-      options: {
-        Editing: UsernameEditState.Editing,
-        ConfirmingDelete: UsernameEditState.ConfirmingDelete,
-        Deleting: UsernameEditState.Deleting,
-      },
+      options: [
+        UsernameEditState.Editing,
+        UsernameEditState.ConfirmingDelete,
+        UsernameEditState.Deleting,
+      ],
     },
     usernameCorrupted: {
       control: 'boolean',

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { Meta, StoryFn } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { v4 as generateUuid } from 'uuid';
 
-import { useArgs } from '@storybook/addons';
 import { action } from '@storybook/addon-actions';
 import type { PropsType } from './StoryViewsNRepliesModal';
 import * as durations from '../util/durations';
@@ -149,16 +148,17 @@ function getViewsAndReplies() {
 
 // eslint-disable-next-line react/function-component-definition
 const Template: StoryFn<PropsType> = args => {
-  const [, updateArgs] = useArgs();
+  const [viewTarget, setViewTarget] = useState(args.viewTarget);
 
-  function onChangeViewTarget(viewTarget: StoryViewTargetType) {
-    args.onChangeViewTarget(viewTarget);
-    updateArgs({ viewTarget });
+  function onChangeViewTarget(newViewTarget: StoryViewTargetType) {
+    args.onChangeViewTarget(newViewTarget);
+    setViewTarget(newViewTarget);
   }
 
   return (
     <StoryViewsNRepliesModal
       {...args}
+      viewTarget={viewTarget}
       onChangeViewTarget={onChangeViewTarget}
     />
   );

ts/components/Toast.stories.tsx

@@ -12,8 +12,8 @@ export default {
   component: Toast,
   argTypes: {
     autoDismissDisabled: { control: { type: 'boolean' } },
-    className: { control: { type: 'string' } },
-    children: { control: { type: 'string' } },
+    className: { control: { type: 'text' } },
+    children: { control: { type: 'text' } },
     timeout: argPresets({
       '1s': 1000,
       '30s': 30_000,

ts/components/ToastManager.stories.tsx

@@ -207,11 +207,11 @@ export default {
   component: ToastManager,
   argTypes: {
     toastType: {
-      options: ToastType,
+      options: [...Object.values(ToastType)],
       control: { type: 'select' },
     },
     megaphoneType: {
-      options: MegaphoneType,
+      options: [...Object.values(MegaphoneType)],
       control: { type: 'select' },
     },
   },

ts/components/conversation/Quote.stories.tsx

@@ -35,19 +35,19 @@ export default {
   title: 'Components/Conversation/Quote',
   argTypes: {
     isFromMe: {
-      control: { type: 'checkbox' },
+      control: { type: 'boolean' },
     },
     isGiftBadge: {
-      control: { type: 'checkbox' },
+      control: { type: 'boolean' },
     },
     isIncoming: {
-      control: { type: 'checkbox' },
+      control: { type: 'boolean' },
     },
     isViewOnce: {
-      control: { type: 'checkbox' },
+      control: { type: 'boolean' },
     },
     referencedMessageNotFound: {
-      control: { type: 'checkbox' },
+      control: { type: 'boolean' },
     },
   },
   args: {

ts/components/conversation/ScrollDownButton.stories.tsx

@@ -27,12 +27,7 @@ export default {
   argTypes: {
     count: {
       control: { type: 'radio' },
-      options: {
-        None: undefined,
-        Some: 5,
-        Plenty: 85,
-        'Please Stop': 1000,
-      },
+      options: [undefined, 5, 85, 1000],
     },
   },
 } satisfies Meta<ScrollDownButtonPropsType>;

ts/test-both/util/timelineUtil_test.ts

@@ -156,11 +156,11 @@ describe('<Timeline> utilities', () => {
         'sending',
       ];
       for (const status of statuses) {
-        const sameStatusNewer = {
+        const sameStatusNewer: MaybeMessageTimelineItemType = {
           ...defaultNewer,
           data: { ...defaultNewer.data, status },
         };
-        const current = {
+        const current: MaybeMessageTimelineItemType = {
           ...defaultCurrent,
           data: { ...defaultCurrent.data, status },
         };