Migrate EmbeddedContact to Storybook

This commit is contained in:
Chris Svenningsen 2020-08-21 15:07:35 -07:00 committed by Josh Perez
parent 84fee07a72
commit 0e79f83a42
3 changed files with 173 additions and 677 deletions

View file

@ -1,676 +0,0 @@
### With a contact
#### Including all data types
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
onClick: () => console.log('onClick'),
onSendMessage: () => console.log('onSendMessage'),
signalAccount: '+12025550000',
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### Image download pending
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
pending: true,
},
},
onClick: () => console.log('onClick'),
onSendMessage: () => console.log('onSendMessage'),
signalAccount: '+12025550000',
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### Really long data
```jsx
const contact = {
name: {
displayName:
'Dr. First Middle Last Junior Senior and all that and a bag of chips',
},
number: [
{
value: '(202) 555-0000 0000 0000 0000 0000 0000 0000 0000 0000 0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### In group conversation
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
signalAccount: '+12025550000',
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
conversationType="group"
authorName="Mr. Fire"
authorAvatarPath={util.gifObjectUrl}
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
authorName="Mr. Fire"
conversationType="group"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
conversationType="group"
authorName="Mr. Fire"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### If contact has no signal account
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### With organization name instead of name
```jsx
const contact = {
organization: 'United Somewheres, Inc.',
email: [
{
value: 'someone@somewheres.com',
type: 2,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### No displayName or organization
```jsx
const contact = {
name: {
givenName: 'Someone',
},
number: [
{
value: '(202) 555-1000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
signalAccount: '+12025551000',
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### Default avatar
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-1001',
type: 1,
},
],
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### Empty contact
```jsx
const contact = {};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```
#### Contact with caption (cannot currently be sent)
```jsx
const contactWithAccount = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
signalAccount: '+12025550000',
};
const contactWithoutAccount = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
};
<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
<div className="module-message-container">
<Message
text="I want to introduce you to Someone..."
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contactWithoutAccount}
selectMessage={(...args) => console.log('selectMessage', args)}
/>
</div>
</util.ConversationContext>;
```

View file

@ -0,0 +1,172 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { EmbeddedContact, Props } from './EmbeddedContact';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { ContactFormType } from '../../types/Contact';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/EmbeddedContact', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
contact: overrideProps.contact || {},
i18n,
isIncoming: boolean('isIncoming', overrideProps.isIncoming || false),
onClick: action('onClick'),
tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
withContentAbove: boolean(
'withContentAbove',
overrideProps.withContentAbove || false
),
withContentBelow: boolean(
'withContentBelow',
overrideProps.withContentBelow || false
),
});
const fullContact = {
avatar: {
avatar: {
path: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
},
isProfile: true,
},
email: [
{
value: 'jerjor@fakemail.com',
type: ContactFormType.HOME,
},
],
name: {
givenName: 'Jerry',
familyName: 'Jordan',
prefix: 'Dr.',
suffix: 'Jr.',
middleName: 'James',
displayName: 'Jerry Jordan',
},
number: [
{
value: '555-444-2323',
type: ContactFormType.HOME,
},
],
};
story.add('Full Contact', () => {
const props = createProps({
contact: fullContact,
});
return <EmbeddedContact {...props} />;
});
story.add('Only Email', () => {
const props = createProps({
contact: {
email: fullContact.email,
},
});
return <EmbeddedContact {...props} />;
});
story.add('Given Name', () => {
const props = createProps({
contact: {
name: {
givenName: 'Jerry',
},
},
});
return <EmbeddedContact {...props} />;
});
story.add('Organization', () => {
const props = createProps({
contact: {
organization: 'Company 5',
},
});
return <EmbeddedContact {...props} />;
});
story.add('Given + Family Name', () => {
const props = createProps({
contact: {
name: {
givenName: 'Jerry',
familyName: 'FamilyName',
},
},
});
return <EmbeddedContact {...props} />;
});
story.add('Family Name', () => {
const props = createProps({
contact: {
name: {
familyName: 'FamilyName',
},
},
});
return <EmbeddedContact {...props} />;
});
story.add('Loading Avatar', () => {
const props = createProps({
contact: {
name: {
displayName: 'Jerry Jordan',
},
avatar: {
avatar: {
pending: true,
},
isProfile: true,
},
},
});
return <EmbeddedContact {...props} />;
});
story.add('Incoming', () => {
const props = createProps({
contact: {
name: fullContact.name,
},
isIncoming: true,
});
// Wrapped in a <div> to provide a background for light color of text
return (
<div style={{ backgroundColor: 'darkgreen' }}>
<EmbeddedContact {...props} />
</div>
);
});
story.add('Content Above and Below', () => {
const props = createProps({
withContentAbove: true,
withContentBelow: true,
});
return (
<>
<div>Content Above</div>
<EmbeddedContact {...props} />
<div>Content Below</div>
</>
);
});

View file

@ -10,7 +10,7 @@ import {
renderName,
} from './_contactUtil';
interface Props {
export interface Props {
contact: ContactType;
i18n: LocalizerType;
isIncoming: boolean;