Upgrade Storybook

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/CallingHeader.stories.tsx

@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { boolean, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-
+import type { Meta } from '@storybook/react';
 import type { PropsType } from './CallingHeader';
 import { CallingHeader } from './CallingHeader';
 import { setupI18n } from '../util/setupI18n';
@@ -12,36 +11,35 @@ import enMessages from '../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
-const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
-  i18n,
-  isGroupCall: boolean('isGroupCall', Boolean(overrideProps.isGroupCall)),
-  message: overrideProps.message,
-  participantCount: number(
-    'participantCount',
-    overrideProps.participantCount || 0
-  ),
-  showParticipantsList: boolean(
-    'showParticipantsList',
-    Boolean(overrideProps.showParticipantsList)
-  ),
-  title: overrideProps.title || 'With Someone',
-  toggleParticipants: () => action('toggle-participants'),
-  togglePip: () => action('toggle-pip'),
-  toggleSettings: () => action('toggle-settings'),
-});
-
 export default {
   title: 'Components/CallingHeader',
-};
+  component: CallingHeader,
+  argTypes: {
+    isGroupCall: { control: { type: 'boolean' } },
+    participantCount: { control: { type: 'number' } },
+    title: { control: { type: 'text' } },
+  },
+  args: {
+    i18n,
+    isGroupCall: false,
+    message: '',
+    participantCount: 0,
+    showParticipantsList: false,
+    title: 'With Someone',
+    toggleParticipants: action('toggle-participants'),
+    togglePip: action('toggle-pip'),
+    toggleSettings: action('toggle-settings'),
+  },
+} satisfies Meta<PropsType>;
 
-export function Default(): JSX.Element {
-  return <CallingHeader {...createProps()} />;
+export function Default(args: PropsType): JSX.Element {
+  return <CallingHeader {...args} />;
 }
 
-export function LobbyStyle(): JSX.Element {
+export function LobbyStyle(args: PropsType): JSX.Element {
   return (
     <CallingHeader
-      {...createProps()}
+      {...args}
       title={undefined}
       togglePip={undefined}
       onCancel={action('onClose')}
@@ -49,59 +47,32 @@ export function LobbyStyle(): JSX.Element {
   );
 }
 
-LobbyStyle.story = {
-  name: 'Lobby style',
-};
+export function WithParticipants(args: PropsType): JSX.Element {
+  return <CallingHeader {...args} isGroupCall participantCount={10} />;
+}
 
-export function WithParticipants(): JSX.Element {
+export function WithParticipantsShown(args: PropsType): JSX.Element {
   return (
     <CallingHeader
-      {...createProps({
-        isGroupCall: true,
-        participantCount: 10,
-      })}
+      {...args}
+      isGroupCall
+      participantCount={10}
+      showParticipantsList
     />
   );
 }
 
-export function WithParticipantsShown(): JSX.Element {
+export function LongTitle(args: PropsType): JSX.Element {
   return (
     <CallingHeader
-      {...createProps({
-        isGroupCall: true,
-        participantCount: 10,
-        showParticipantsList: true,
-      })}
+      {...args}
+      title="What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?"
     />
   );
 }
 
-WithParticipantsShown.story = {
-  name: 'With Participants (shown)',
-};
-
-export function LongTitle(): JSX.Element {
+export function TitleWithMessage(args: PropsType): JSX.Element {
   return (
-    <CallingHeader
-      {...createProps({
-        title:
-          'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
-      })}
-    />
+    <CallingHeader {...args} title="Hello world" message="Goodbye earth" />
   );
 }
-
-export function TitleWithMessage(): JSX.Element {
-  return (
-    <CallingHeader
-      {...createProps({
-        title: 'Hello world',
-        message: 'Goodbye earth',
-      })}
-    />
-  );
-}
-
-TitleWithMessage.story = {
-  name: 'Title with message',
-};