Upgrade storybook to 8

.storybook/main.ts

@@ -8,7 +8,9 @@ const config: StorybookConfig = {
   typescript: {
     reactDocgen: false,
   },
+
   stories: ['../ts/components/**/*.stories.tsx'],
+
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
@@ -17,15 +19,19 @@ const config: StorybookConfig = {
     '@storybook/addon-toolbars',
     '@storybook/addon-viewport',
     '@storybook/addon-jest',
-
     // This must be imported last.
     '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-swc',
   ],
+
   framework: '@storybook/react-webpack5',
-  core: {},
+
-  features: {
+  core: {
-    storyStoreV7: true,
+    disableTelemetry: true,
   },
+
+  features: {},
+
   staticDirs: [
     { from: '../fonts', to: 'fonts' },
     { from: '../images', to: 'images' },
@@ -35,6 +41,7 @@ const config: StorybookConfig = {
       to: 'node_modules/emoji-datasource-apple/img',
     },
   ],
+
   webpackFinal(config) {
     config.cache = {
       type: 'filesystem',
@@ -97,6 +104,8 @@ const config: StorybookConfig = {
 
     return config;
   },
+
+  docs: {},
 };
 
 export default config;

.storybook/preview.tsx

@@ -198,3 +198,4 @@ export const parameters = {
     disabledRules: ['html-has-lang'],
   },
 };
+export const tags = [];

ACKNOWLEDGMENTS.md

@@ -776,6 +776,10 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
+## @storybook/preview-api
+
+    License: MIT
+
 ## @types/fabric
 
     MIT License

package.json

@@ -106,6 +106,7 @@
     "@signalapp/libsignal-client": "0.51.1",
     "@signalapp/ringrtc": "2.44.2",
     "@signalapp/windows-dummy-keystroke": "1.0.0",
+    "@storybook/preview-api": "8.1.11",
     "@types/fabric": "4.5.3",
     "backbone": "1.4.0",
     "blob-util": "2.0.2",
@@ -211,23 +212,22 @@
     "@indutny/rezip-electron": "1.3.1",
     "@mixer/parallel-prettier": "2.0.3",
     "@signalapp/mock-server": "6.6.0",
-    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-a11y": "8.1.11",
-    "@storybook/addon-actions": "7.4.5",
+    "@storybook/addon-actions": "8.1.11",
-    "@storybook/addon-controls": "7.4.5",
+    "@storybook/addon-controls": "8.1.11",
-    "@storybook/addon-interactions": "7.4.5",
+    "@storybook/addon-interactions": "8.1.11",
-    "@storybook/addon-jest": "7.4.5",
+    "@storybook/addon-jest": "8.1.11",
-    "@storybook/addon-measure": "7.4.5",
+    "@storybook/addon-measure": "8.1.11",
-    "@storybook/addon-toolbars": "7.4.5",
+    "@storybook/addon-toolbars": "8.1.11",
-    "@storybook/addon-viewport": "7.4.5",
+    "@storybook/addon-viewport": "8.1.11",
-    "@storybook/addons": "7.4.5",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.4",
-    "@storybook/jest": "0.2.2",
+    "@storybook/react": "8.1.11",
-    "@storybook/react": "7.4.5",
+    "@storybook/react-webpack5": "8.1.11",
-    "@storybook/react-webpack5": "7.4.5",
+    "@storybook/test": "8.1.11",
     "@storybook/test-runner": "0.19.0",
-    "@storybook/testing-library": "0.2.2",
     "@types/backbone": "1.4.16",
     "@types/blueimp-load-image": "5.14.1",
-    "@types/chai": "4.2.18",
+    "@types/chai": "4.3.16",
     "@types/chai-as-promised": "7.1.4",
     "@types/classnames": "2.2.3",
     "@types/config": "0.0.39",
@@ -280,7 +280,7 @@
     "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
     "casual": "1.6.2",
-    "chai": "4.3.4",
+    "chai": "4.4.1",
     "chai-as-promised": "7.1.1",
     "chalk": "4.1.2",
     "chokidar-cli": "3.0.0",
@@ -325,7 +325,7 @@
     "sass": "1.49.7",
     "sass-loader": "10.2.0",
     "sinon": "11.1.1",
-    "storybook": "7.6.20",
+    "storybook": "8.1.11",
     "style-loader": "1.0.0",
     "stylelint": "15.4.0",
     "stylelint-config-css-modules": "4.2.0",

patches/@storybook+manager-api+7.4.5.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@storybook/manager-api/dist/index.d.ts b/node_modules/@storybook/manager-api/dist/index.d.ts
-index 7afb86e..a15b801 100644
---- a/node_modules/@storybook/manager-api/dist/index.d.ts
-+++ b/node_modules/@storybook/manager-api/dist/index.d.ts
-@@ -822,7 +822,7 @@ declare class ManagerProvider extends Component<ManagerProviderProps, State> {
-     static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State;
-     shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean;
-     initModules: () => void;
--    render(): React.JSX.Element;
-+    render(): JSX.Element;
- }
- interface ManagerConsumerProps<P = unknown> {
-     filter?: (combo: Combo) => P;

patches/@storybook+router+7.4.5.patch

@@ -1,22 +0,0 @@
-diff --git a/node_modules/@storybook/router/dist/index.d.ts b/node_modules/@storybook/router/dist/index.d.ts
-index ed699f7..71f48eb 100644
---- a/node_modules/@storybook/router/dist/index.d.ts
-+++ b/node_modules/@storybook/router/dist/index.d.ts
-@@ -335,7 +335,7 @@ declare const useNavigate: () => (to: To | number, { plain, ...options }?: any)
-  *  A component that will navigate to a new location/path when clicked
-  */
- declare const Link: {
--    ({ to, children, ...rest }: LinkProps): React__default.JSX.Element;
-+    ({ to, children, ...rest }: LinkProps): JSX.Element;
-     displayName: string;
- };
- /**
-@@ -343,7 +343,7 @@ declare const Link: {
-  * and will be called whenever it changes when it changes
-  */
- declare const Location: {
--    ({ children }: LocationProps): React__default.JSX.Element;
-+    ({ children }: LocationProps): JSX.Element;
-     displayName: string;
- };
- /**

patches/@types+jest+28.1.3.patch

@@ -1,35 +0,0 @@
-diff --git a/node_modules/@types/jest/index.d.ts b/node_modules/@types/jest/index.d.ts
-index b37b188..1908c0c 100755
---- a/node_modules/@types/jest/index.d.ts
-+++ b/node_modules/@types/jest/index.d.ts
-@@ -30,18 +30,18 @@
- // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- // Minimum TypeScript Version: 4.3
-
--declare var beforeAll: jest.Lifecycle;
--declare var beforeEach: jest.Lifecycle;
--declare var afterAll: jest.Lifecycle;
--declare var afterEach: jest.Lifecycle;
--declare var describe: jest.Describe;
--declare var fdescribe: jest.Describe;
--declare var xdescribe: jest.Describe;
--declare var it: jest.It;
--declare var fit: jest.It;
--declare var xit: jest.It;
--declare var test: jest.It;
--declare var xtest: jest.It;
-+// declare var beforeAll: jest.Lifecycle;
-+// declare var beforeEach: jest.Lifecycle;
-+// declare var afterAll: jest.Lifecycle;
-+// declare var afterEach: jest.Lifecycle;
-+// declare var describe: jest.Describe;
-+// declare var fdescribe: jest.Describe;
-+// declare var xdescribe: jest.Describe;
-+// declare var it: jest.It;
-+// declare var fit: jest.It;
-+// declare var xit: jest.It;
-+// declare var test: jest.It;
-+// declare var xtest: jest.It;
-
- declare const expect: jest.Expect;
-

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: {
+      options: [
-        Undefined: undefined,
+        undefined,
-        NoBlur: AvatarBlur.NoBlur,
+        AvatarBlur.NoBlur,
-        BlurPicture: AvatarBlur.BlurPicture,
+        AvatarBlur.BlurPicture,
-        BlurPictureWithClickToView: AvatarBlur.BlurPictureWithClickToView,
+        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: {
+      options: [State.Open, State.Closed, State.Reserving, State.Confirming],
-        Open: State.Open,
-        Closed: State.Closed,
-        Reserving: State.Reserving,
-        Confirming: State.Confirming,
-      },
     },
     error: {
       control: { type: 'radio' },
-      options: {
+      options: [
-        None: undefined,
+        undefined,
-        NotEnoughCharacters: UsernameReservationError.NotEnoughCharacters,
+        UsernameReservationError.NotEnoughCharacters,
-        TooManyCharacters: UsernameReservationError.TooManyCharacters,
+        UsernameReservationError.TooManyCharacters,
-        CheckStartingCharacter: UsernameReservationError.CheckStartingCharacter,
+        UsernameReservationError.CheckStartingCharacter,
-        CheckCharacters: UsernameReservationError.CheckCharacters,
+        UsernameReservationError.CheckCharacters,
-        UsernameNotAvailable: UsernameReservationError.UsernameNotAvailable,
+        UsernameReservationError.UsernameNotAvailable,
-        General: UsernameReservationError.General,
+        UsernameReservationError.General,
-        TooManyAttempts: UsernameReservationError.TooManyAttempts,
+        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' } },
+    actionText: { control: { type: 'text' } },
-    children: { control: { type: 'string' } },
+    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')),
+    onForward: fn(action('onForward')),
-    onSave: jest.fn(action('onSave')),
+    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 { expect, fn, within, userEvent } from '@storybook/test';
-import { within, userEvent } from '@storybook/testing-library';
 
 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')),
+    onAddStory: fn(action('onAddStory')),
-    onClick: jest.fn(action('onClick')),
+    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: {
+      options: [
-        Editing: UsernameEditState.Editing,
+        UsernameEditState.Editing,
-        ConfirmingDelete: UsernameEditState.ConfirmingDelete,
+        UsernameEditState.ConfirmingDelete,
-        Deleting: UsernameEditState.Deleting,
+        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) {
+  function onChangeViewTarget(newViewTarget: StoryViewTargetType) {
-    args.onChangeViewTarget(viewTarget);
+    args.onChangeViewTarget(newViewTarget);
-    updateArgs({ viewTarget });
+    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' } },
+    className: { control: { type: 'text' } },
-    children: { control: { type: 'string' } },
+    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: {
+      options: [undefined, 5, 85, 1000],
-        None: undefined,
-        Some: 5,
-        Plenty: 85,
-        'Please Stop': 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 },
         };