mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions 1

Upgrade Storybook

Browse source 
Co-authored-by: Scott Nonnenberg <scott@signal.org>
This commit is contained in:
Jamie Kyle 2023-10-11 12:06:43 -07:00 • committed by GitHub
parent 8c966dfbd8
commit 502ea174ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
328 changed files with 10863 additions and 12432 deletions
Download patch file Download diff file Expand all files Collapse all files

84
ts/components/CallingLobby.stories.tsx
View file

@ -3,10 +3,10 @@
import * as React from 'react';
import { times } from 'lodash';
import { boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { v4 as generateUuid } from 'uuid';
import type { Meta } from '@storybook/react';
import { AvatarColors } from '../types/Colors';
import type { ConversationType } from '../state/ducks/conversations';
import type { PropsType } from './CallingLobby';
@ -32,10 +32,7 @@ const camera = {
};
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
const isGroupCall = boolean(
'isGroupCall',
overrideProps.isGroupCall || false
);
const isGroupCall = overrideProps.isGroupCall ?? false;
const conversation = isGroupCall
? getDefaultConversation({
title: 'Tahoe Trip',
@ -49,19 +46,13 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
groupMembers:
overrideProps.groupMembers ||
(isGroupCall ? times(3, () => getDefaultConversation()) : undefined),
hasLocalAudio: boolean(
'hasLocalAudio',
overrideProps.hasLocalAudio ?? true
),
hasLocalVideo: boolean(
'hasLocalVideo',
overrideProps.hasLocalVideo ?? false
),
hasLocalAudio: overrideProps.hasLocalAudio ?? true,
hasLocalVideo: overrideProps.hasLocalVideo ?? false,
i18n,
isGroupCall,
isGroupCallOutboundRingEnabled: true,
isConversationTooBigToRing: false,
isCallFull: boolean('isCallFull', overrideProps.isCallFull || false),
isCallFull: overrideProps.isCallFull ?? false,
me:
overrideProps.me ||
getDefaultConversation({
@ -71,16 +62,13 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
}),
onCallCanceled: action('on-call-canceled'),
onJoinCall: action('on-join-call'),
outgoingRing: boolean('outgoingRing', Boolean(overrideProps.outgoingRing)),
outgoingRing: overrideProps.outgoingRing ?? false,
peekedParticipants: overrideProps.peekedParticipants || [],
setLocalAudio: action('set-local-audio'),
setLocalPreview: action('set-local-preview'),
setLocalVideo: action('set-local-video'),
setOutgoingRing: action('set-outgoing-ring'),
showParticipantsList: boolean(
'showParticipantsList',
Boolean(overrideProps.showParticipantsList)
),
showParticipantsList: overrideProps.showParticipantsList ?? false,
toggleParticipants: action('toggle-participants'),
toggleSettings: action('toggle-settings'),
};
@ -93,7 +81,9 @@ const fakePeekedParticipant = (conversationProps: Partial<ConversationType>) =>
export default {
title: 'Components/CallingLobby',
};
argTypes: {},
args: {},
} satisfies Meta<PropsType>;
export function Default(): JSX.Element {
const props = createProps();
@ -107,10 +97,6 @@ export function NoCameraNoAvatar(): JSX.Element {
return <CallingLobby {...props} />;
}
NoCameraNoAvatar.story = {
name: 'No Camera, no avatar',
};
export function NoCameraLocalAvatar(): JSX.Element {
const props = createProps({
availableCameras: [],
@ -124,10 +110,6 @@ export function NoCameraLocalAvatar(): JSX.Element {
return <CallingLobby {...props} />;
}
NoCameraLocalAvatar.story = {
name: 'No Camera, local avatar',
};
export function LocalVideo(): JSX.Element {
const props = createProps({
hasLocalVideo: true,
@ -142,20 +124,12 @@ export function InitiallyMuted(): JSX.Element {
return <CallingLobby {...props} />;
}
InitiallyMuted.story = {
name: 'Initially muted',
};
export function GroupCall0PeekedParticipants(): JSX.Element {
export function GroupCallWithNoPeekedParticipants(): JSX.Element {
const props = createProps({ isGroupCall: true, peekedParticipants: [] });
return <CallingLobby {...props} />;
}
GroupCall0PeekedParticipants.story = {
name: 'Group Call - 0 peeked participants',
};
export function GroupCall1PeekedParticipant(): JSX.Element {
export function GroupCallWith1PeekedParticipant(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
@ -163,11 +137,7 @@ export function GroupCall1PeekedParticipant(): JSX.Element {
return <CallingLobby {...props} />;
}
GroupCall1PeekedParticipant.story = {
name: 'Group Call - 1 peeked participant',
};
export function GroupCall1PeekedParticipantSelf(): JSX.Element {
export function GroupCallWith1PeekedParticipantSelf(): JSX.Element {
const serviceId = generateAci();
const props = createProps({
isGroupCall: true,
@ -180,11 +150,7 @@ export function GroupCall1PeekedParticipantSelf(): JSX.Element {
return <CallingLobby {...props} />;
}
GroupCall1PeekedParticipantSelf.story = {
name: 'Group Call - 1 peeked participant (self)',
};
export function GroupCall4PeekedParticipants(): JSX.Element {
export function GroupCallWith4PeekedParticipants(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@ -194,11 +160,7 @@ export function GroupCall4PeekedParticipants(): JSX.Element {
return <CallingLobby {...props} />;
}
GroupCall4PeekedParticipants.story = {
name: 'Group Call - 4 peeked participants',
};
export function GroupCall4PeekedParticipantsParticipantsList(): JSX.Element {
export function GroupCallWith4PeekedParticipantsParticipantsList(): JSX.Element {
const props = createProps({
isGroupCall: true,
peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@ -209,11 +171,7 @@ export function GroupCall4PeekedParticipantsParticipantsList(): JSX.Element {
return <CallingLobby {...props} />;
}
GroupCall4PeekedParticipantsParticipantsList.story = {
name: 'Group Call - 4 peeked participants (participants list)',
};
export function GroupCallCallFull(): JSX.Element {
export function GroupCallWithCallFull(): JSX.Element {
const props = createProps({
isGroupCall: true,
isCallFull: true,
@ -224,18 +182,10 @@ export function GroupCallCallFull(): JSX.Element {
return <CallingLobby {...props} />;
}
GroupCallCallFull.story = {
name: 'Group Call - call full',
};
export function GroupCall0PeekedParticipantsBigGroup(): JSX.Element {
export function GroupCallWith0PeekedParticipantsBigGroup(): JSX.Element {
const props = createProps({
isGroupCall: true,
groupMembers: times(100, () => getDefaultConversation()),
});
return <CallingLobby {...props} />;
}
GroupCall0PeekedParticipantsBigGroup.story = {
name: 'Group Call - 0 peeked participants, big group',
};