Upgrade react and storybook
This commit is contained in:
parent
6476a4fe73
commit
42eb4013d0
244 changed files with 15341 additions and 10249 deletions
|
@ -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',
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue