Migrate ReactionViewer to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
fba8f7bf1e
commit
7b75f8bb2e
2 changed files with 180 additions and 178 deletions
|
|
@ -1,178 +0,0 @@
|
|||
### Reaction Viewer
|
||||
|
||||
#### Few Reactions
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Joel Ferrari',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Picked Reaction
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
pickedReaction="👍"
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Joel Ferrari',
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Many Reactions
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 1,
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Ameila Briggs',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 2,
|
||||
from: { id: '+14155552672', name: 'Adam Burrel' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 3,
|
||||
from: { id: '+14155552673', name: 'Rick Owens' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 4,
|
||||
from: { id: '+14155552674', name: 'Bojack Horseman' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 4,
|
||||
from: { id: '+14155552675', name: 'Cayce Pollard' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 5,
|
||||
from: { id: '+14155552676', name: 'Foo McBarrington' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 6,
|
||||
from: { id: '+14155552677', name: 'Ameila Briggs' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 7,
|
||||
from: {
|
||||
id: '+14155552678',
|
||||
phoneNumber: '+14155552678',
|
||||
profileName: 'Adam Burrel',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 8,
|
||||
from: { id: '+14155552679', name: 'Rick Owens', isMe: true },
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
timestamp: 9,
|
||||
from: { id: '+14155552671', name: 'Adam Burrel' },
|
||||
},
|
||||
{
|
||||
emoji: '👎',
|
||||
timestamp: 10,
|
||||
from: { id: '+14155552671', name: 'Rick Owens' },
|
||||
},
|
||||
{
|
||||
emoji: '😂',
|
||||
timestamp: 11,
|
||||
from: { id: '+14155552671', name: 'Bojack Horseman' },
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
timestamp: 12,
|
||||
from: { id: '+14155552671', name: 'Cayce Pollard' },
|
||||
},
|
||||
{
|
||||
emoji: '😢',
|
||||
timestamp: 13,
|
||||
from: { id: '+14155552671', name: 'Foo McBarrington' },
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
timestamp: 14,
|
||||
from: { id: '+14155552671', name: 'Foo McBarrington' },
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### Name Overflow
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
|
||||
<ReactionViewer
|
||||
i18n={util.i18n}
|
||||
reactions={[
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: { id: '+14155552671', name: 'Foo McBarringtonMcBazzingtonMcKay' },
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
name: 'Foo McBarringtonMcBazzingtonMcKay',
|
||||
isMe: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Foo McBarringtonMcBazzingtonMcKay',
|
||||
isMe: true,
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
180
ts/components/conversation/ReactionViewer.stories.tsx
Normal file
180
ts/components/conversation/ReactionViewer.stories.tsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { Props, ReactionViewer } from './ReactionViewer';
|
||||
|
||||
// @ts-ignore
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
// @ts-ignore
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
const story = storiesOf('Components/Conversation/ReactionViewer', module);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
onClose: action('onClose'),
|
||||
pickedReaction: overrideProps.pickedReaction,
|
||||
reactions: overrideProps.reactions || [],
|
||||
style: overrideProps.style,
|
||||
});
|
||||
|
||||
story.add('All Reactions', () => {
|
||||
const props = createProps({
|
||||
reactions: [
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 1,
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Ameila Briggs',
|
||||
title: 'Amelia',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 2,
|
||||
from: {
|
||||
id: '+14155552672',
|
||||
name: 'Adam Burrel',
|
||||
title: 'Adam',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 3,
|
||||
from: {
|
||||
id: '+14155552673',
|
||||
name: 'Rick Owens',
|
||||
title: 'Rick',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '❤️',
|
||||
timestamp: 4,
|
||||
from: {
|
||||
id: '+14155552674',
|
||||
name: 'Bojack Horseman',
|
||||
title: 'Bojack',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
timestamp: 9,
|
||||
from: {
|
||||
id: '+14155552678',
|
||||
phoneNumber: '+14155552678',
|
||||
profileName: 'Adam Burrel',
|
||||
title: 'Adam',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '👎',
|
||||
timestamp: 10,
|
||||
from: {
|
||||
id: '+14155552673',
|
||||
name: 'Rick Owens',
|
||||
title: 'Rick',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '😂',
|
||||
timestamp: 11,
|
||||
from: {
|
||||
id: '+14155552674',
|
||||
name: 'Bojack Horseman',
|
||||
title: 'Bojack',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '😮',
|
||||
timestamp: 12,
|
||||
from: {
|
||||
id: '+14155552675',
|
||||
name: 'Cayce Pollard',
|
||||
title: 'Cayce',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '😢',
|
||||
timestamp: 13,
|
||||
from: {
|
||||
id: '+14155552676',
|
||||
name: 'Foo McBarrington',
|
||||
title: 'Foo',
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: '😡',
|
||||
timestamp: 14,
|
||||
from: {
|
||||
id: '+14155552676',
|
||||
name: 'Foo McBarrington',
|
||||
title: 'Foo',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
return <ReactionViewer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Picked Reaction', () => {
|
||||
const props = createProps({
|
||||
pickedReaction: '❤️',
|
||||
reactions: [
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
name: 'Amelia Briggs',
|
||||
isMe: true,
|
||||
title: 'Amelia',
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Joel Ferrari',
|
||||
title: 'Joel',
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
],
|
||||
});
|
||||
return <ReactionViewer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Picked Missing Reaction', () => {
|
||||
const props = createProps({
|
||||
pickedReaction: '😡',
|
||||
reactions: [
|
||||
{
|
||||
emoji: '❤️',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
name: 'Amelia Briggs',
|
||||
isMe: true,
|
||||
title: 'Amelia',
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
{
|
||||
emoji: '👍',
|
||||
from: {
|
||||
id: '+14155552671',
|
||||
phoneNumber: '+14155552671',
|
||||
profileName: 'Joel Ferrari',
|
||||
title: 'Joel',
|
||||
},
|
||||
timestamp: Date.now(),
|
||||
},
|
||||
],
|
||||
});
|
||||
return <ReactionViewer {...props} />;
|
||||
});
|
||||
Loading…
Reference in a new issue