Upgrade Storybook

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

ts/components/CallingPip.stories.tsx

@@ -3,9 +3,8 @@
 
 import * as React from 'react';
 import { times } from 'lodash';
-import { boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-
+import type { Meta } from '@storybook/react';
 import { AvatarColors } from '../types/Colors';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { PropsType } from './CallingPip';
@@ -35,16 +34,19 @@ const conversation: ConversationType = getDefaultConversation({
   profileName: 'Rick Sanchez',
 });
 
-const getCommonActiveCallData = () => ({
+type Overrides = {
+  hasLocalAudio?: boolean;
+  hasLocalVideo?: boolean;
+  localAudioLevel?: number;
+  viewMode?: CallViewMode;
+};
+
+const getCommonActiveCallData = (overrides: Overrides) => ({
   conversation,
-  hasLocalAudio: boolean('hasLocalAudio', true),
-  hasLocalVideo: boolean('hasLocalVideo', false),
-  localAudioLevel: select('localAudioLevel', [0, 0.5, 1], 0),
-  viewMode: select(
-    'viewMode',
-    [CallViewMode.Grid, CallViewMode.Speaker, CallViewMode.Presentation],
-    CallViewMode.Grid
-  ),
+  hasLocalAudio: overrides.hasLocalAudio ?? true,
+  hasLocalVideo: overrides.hasLocalVideo ?? false,
+  localAudioLevel: overrides.localAudioLevel ?? 0,
+  viewMode: overrides.viewMode ?? CallViewMode.Grid,
   joinedAt: Date.now(),
   outgoingRing: true,
   pip: true,
@@ -52,92 +54,93 @@ const getCommonActiveCallData = () => ({
   showParticipantsList: false,
 });
 
-const defaultCall: ActiveDirectCallType = {
-  ...getCommonActiveCallData(),
-  callMode: CallMode.Direct as CallMode.Direct,
-  callState: CallState.Accepted,
-  peekedParticipants: [],
-  remoteParticipants: [
-    { hasRemoteVideo: true, presenting: false, title: 'Arsene' },
-  ],
+const getDefaultCall = (overrides: Overrides): ActiveDirectCallType => {
+  return {
+    ...getCommonActiveCallData(overrides),
+    callMode: CallMode.Direct as CallMode.Direct,
+    callState: CallState.Accepted,
+    peekedParticipants: [],
+    remoteParticipants: [
+      { hasRemoteVideo: true, presenting: false, title: 'Arsene' },
+    ],
+  };
 };
 
-const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
-  activeCall: overrideProps.activeCall || defaultCall,
-  getGroupCallVideoFrameSource: fakeGetGroupCallVideoFrameSource,
-  hangUpActiveCall: action('hang-up-active-call'),
-  hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false),
-  i18n,
-  setGroupCallVideoRequest: action('set-group-call-video-request'),
-  setLocalPreview: action('set-local-preview'),
-  setRendererCanvas: action('set-renderer-canvas'),
-  switchFromPresentationView: action('switch-to-presentation-view'),
-  switchToPresentationView: action('switch-to-presentation-view'),
-  togglePip: action('toggle-pip'),
-});
-
 export default {
   title: 'Components/CallingPip',
-};
+  argTypes: {
+    hasLocalVideo: { control: { type: 'boolean' } },
+  },
+  args: {
+    activeCall: getDefaultCall({}),
+    getGroupCallVideoFrameSource: fakeGetGroupCallVideoFrameSource,
+    hangUpActiveCall: action('hang-up-active-call'),
+    hasLocalVideo: false,
+    i18n,
+    setGroupCallVideoRequest: action('set-group-call-video-request'),
+    setLocalPreview: action('set-local-preview'),
+    setRendererCanvas: action('set-renderer-canvas'),
+    switchFromPresentationView: action('switch-to-presentation-view'),
+    switchToPresentationView: action('switch-to-presentation-view'),
+    togglePip: action('toggle-pip'),
+  },
+} satisfies Meta<PropsType>;
 
-export function Default(): JSX.Element {
-  const props = createProps({});
-  return <CallingPip {...props} />;
+export function Default(args: PropsType): JSX.Element {
+  return <CallingPip {...args} />;
 }
 
-export function ContactWithAvatarAndNoVideo(): JSX.Element {
-  const props = createProps({
-    activeCall: {
-      ...defaultCall,
-      conversation: {
-        ...conversation,
-        avatarPath: 'https://www.fillmurray.com/64/64',
-      },
-      remoteParticipants: [
-        { hasRemoteVideo: false, presenting: false, title: 'Julian' },
-      ],
-    },
-  });
-  return <CallingPip {...props} />;
+export function ContactWithAvatarAndNoVideo(args: PropsType): JSX.Element {
+  return (
+    <CallingPip
+      {...args}
+      activeCall={{
+        ...getDefaultCall({}),
+        conversation: {
+          ...conversation,
+          avatarPath: 'https://www.fillmurray.com/64/64',
+        },
+        remoteParticipants: [
+          { hasRemoteVideo: false, presenting: false, title: 'Julian' },
+        ],
+      }}
+    />
+  );
 }
 
-ContactWithAvatarAndNoVideo.story = {
-  name: 'Contact (with avatar and no video)',
-};
-
-export function ContactNoColor(): JSX.Element {
-  const props = createProps({
-    activeCall: {
-      ...defaultCall,
-      conversation: {
-        ...conversation,
-        color: undefined,
-      },
-    },
-  });
-  return <CallingPip {...props} />;
+export function ContactNoColor(args: PropsType): JSX.Element {
+  return (
+    <CallingPip
+      {...args}
+      activeCall={{
+        ...getDefaultCall({}),
+        conversation: {
+          ...conversation,
+          color: undefined,
+        },
+      }}
+    />
+  );
 }
 
-ContactNoColor.story = {
-  name: 'Contact (no color)',
-};
-
-export function GroupCall(): JSX.Element {
-  const props = createProps({
-    activeCall: {
-      ...getCommonActiveCallData(),
-      callMode: CallMode.Group as CallMode.Group,
-      connectionState: GroupCallConnectionState.Connected,
-      conversationsWithSafetyNumberChanges: [],
-      groupMembers: times(3, () => getDefaultConversation()),
-      isConversationTooBigToRing: false,
-      joinState: GroupCallJoinState.Joined,
-      maxDevices: 5,
-      deviceCount: 0,
-      peekedParticipants: [],
-      remoteParticipants: [],
-      remoteAudioLevels: new Map<number, number>(),
-    },
-  });
-  return <CallingPip {...props} />;
+export function GroupCall(args: PropsType): JSX.Element {
+  return (
+    <CallingPip
+      {...args}
+      activeCall={{
+        ...getCommonActiveCallData({}),
+        callMode: CallMode.Group as CallMode.Group,
+        connectionState: GroupCallConnectionState.Connected,
+        conversationsWithSafetyNumberChanges: [],
+        groupMembers: times(3, () => getDefaultConversation()),
+        isConversationTooBigToRing: false,
+        joinState: GroupCallJoinState.Joined,
+        maxDevices: 5,
+        deviceCount: 0,
+        peekedParticipants: [],
+        remoteParticipants: [],
+        remoteAudioLevels: new Map<number, number>(),
+      }}
+    />
+  );
 }