Upgrade react and storybook

This commit is contained in:
Josh Perez 2022-06-06 20:48:02 -04:00 committed by GitHub
parent 6476a4fe73
commit 42eb4013d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 15341 additions and 10249 deletions

View file

@ -2,8 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { times, range } from 'lodash';
import { storiesOf } from '@storybook/react';
import { times } from 'lodash';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
@ -21,56 +20,234 @@ const getDefaultGroupConversation = () =>
});
const otherMembers = times(6, () => getDefaultConversation());
const story = storiesOf('Components/CallingPreCallInfo', module);
export default {
title: 'Components/CallingPreCallInfo',
};
story.add('Direct conversation', () => (
export const DirectConversation = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultConversation()}
i18n={i18n}
me={getDefaultConversation()}
ringMode={RingMode.WillRing}
/>
));
);
times(5, numberOfOtherPeople => {
[true, false].forEach(willRing => {
story.add(
`Group conversation, group has ${numberOfOtherPeople} other member${
numberOfOtherPeople === 1 ? '' : 's'
}, will ${willRing ? 'ring' : 'notify'}`,
() => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, numberOfOtherPeople)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={willRing ? RingMode.WillRing : RingMode.WillNotRing}
/>
)
);
});
});
DirectConversation.story = {
name: 'Direct conversation',
};
range(1, 5).forEach(numberOfOtherPeople => {
story.add(
`Group conversation, ${numberOfOtherPeople} peeked participant${
numberOfOtherPeople === 1 ? '' : 's'
}`,
() => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={otherMembers.slice(0, numberOfOtherPeople)}
ringMode={RingMode.WillRing}
/>
)
);
});
export const Ring0 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 0)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
story.add('Group conversation, you on an other device', () => {
Ring0.story = {
name: 'Group call: Will ring 0 people',
};
export const Ring1 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 1)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
Ring1.story = {
name: 'Group call: Will ring 1 person',
};
export const Ring2 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 2)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
Ring2.story = {
name: 'Group call: Will ring 2 people',
};
export const Ring3 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 3)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
Ring3.story = {
name: 'Group call: Will ring 3 people',
};
export const Ring4 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 4)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillRing}
/>
);
Ring3.story = {
name: 'Group call: Will ring 4 people',
};
export const Notify0 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 0)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
Notify0.story = {
name: 'Group call: Will notify 0 people',
};
export const Notify1 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 1)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
Notify1.story = {
name: 'Group call: Will notify 1 person',
};
export const Notify2 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 2)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
Notify2.story = {
name: 'Group call: Will notify 2 people',
};
export const Notify3 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 3)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
Notify3.story = {
name: 'Group call: Will notify 3 people',
};
export const Notify4 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers.slice(0, 4)}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={[]}
ringMode={RingMode.WillNotRing}
/>
);
Notify4.story = {
name: 'Group call: Will notify 4 people',
};
export const Peek1 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={otherMembers.slice(0, 1)}
ringMode={RingMode.WillRing}
/>
);
Peek1.story = {
name: 'Group call: 1 participant peeked',
};
export const Peek2 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={otherMembers.slice(0, 2)}
ringMode={RingMode.WillRing}
/>
);
Peek2.story = {
name: 'Group call: 2 participants peeked',
};
export const Peek3 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={otherMembers.slice(0, 3)}
ringMode={RingMode.WillRing}
/>
);
Peek3.story = {
name: 'Group call: 3 participants peeked',
};
export const Peek4 = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
i18n={i18n}
me={getDefaultConversation()}
peekedParticipants={otherMembers.slice(0, 4)}
ringMode={RingMode.WillRing}
/>
);
Peek4.story = {
name: 'Group call: 4 participants peeked',
};
export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
const me = getDefaultConversation();
return (
<CallingPreCallInfo
@ -82,9 +259,13 @@ story.add('Group conversation, you on an other device', () => {
ringMode={RingMode.WillRing}
/>
);
});
};
story.add('Group conversation, call is full', () => (
GroupConversationYouOnAnOtherDevice.story = {
name: 'Group conversation, you on an other device',
};
export const GroupConversationCallIsFull = (): JSX.Element => (
<CallingPreCallInfo
conversation={getDefaultGroupConversation()}
groupMembers={otherMembers}
@ -94,4 +275,8 @@ story.add('Group conversation, call is full', () => (
peekedParticipants={otherMembers}
ringMode={RingMode.WillRing}
/>
));
);
GroupConversationCallIsFull.story = {
name: 'Group conversation, call is full',
};