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

Migrate ContactDetail to Storybook

Browse source
This commit is contained in:
Chris Svenningsen 2020-08-21 09:17:45 -07:00 • committed by Josh Perez
parent 702913b21a
commit 6494818f76
3 changed files with 233 additions and 249 deletions
Download patch file Download diff file Expand all files Collapse all files

248
ts/components/conversation/ContactDetail.md
View file

@ -1,248 +0,0 @@
### With all data types
```jsx
const contact = {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 3,
},
{
value: '(202) 555-0001',
type: 4,
label: 'My favorite custom label',
},
],
email: [
{
value: 'someone@somewhere.com',
type: 2,
},
{
value: 'someone2@somewhere.com',
type: 4,
label: 'My second-favorite custom label',
},
],
address: [
{
street: '5 Pike Place',
city: 'Seattle',
region: 'WA',
postcode: '98101',
type: 1,
},
{
street: '10 Pike Place',
pobox: '3242',
neighborhood: 'Downtown',
city: 'Seattle',
region: 'WA',
postcode: '98101',
country: 'United States',
type: 3,
label: 'My favorite spot!',
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={true}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### With missing custom labels
```jsx
const contact = {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 4,
},
],
email: [
{
value: 'someone2@somewhere.com',
type: 4,
},
],
address: [
{
street: '10 Pike Place, Seattle WA',
type: 3,
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={true}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### With default avatar
```jsx
const contact = {
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 1,
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={true}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### Without a Signal account
```jsx
const contact = {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0001',
type: 1,
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={false}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### No phone or email, partial addresses
```jsx
const contact = {
avatar: {
avatar: {
path: util.gifObjectUrl,
},
},
name: {
displayName: 'Someone Somewhere',
},
address: [
{
type: 1,
neighborhood: 'Greenwood',
region: 'WA',
},
{
type: 2,
city: 'Seattle',
region: 'WA',
},
{
type: 3,
label: 'My label',
region: 'WA',
},
{
type: 1,
label: 'My label',
postcode: '98101',
region: 'WA',
},
{
type: 2,
label: 'My label',
postcode: '98101',
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={false}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### With all data types
```jsx
const contact = {
avatar: {
avatar: {
pending: true,
},
},
name: {
displayName: 'Someone Somewhere',
},
number: [
{
value: '(202) 555-0000',
type: 3,
},
],
address: [
{
street: '5 Pike Place',
city: 'Seattle',
region: 'WA',
postcode: '98101',
type: 1,
},
],
};
<ContactDetail
contact={contact}
hasSignalAccount={true}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```
### Empty contact
```jsx
const contact = {};
<ContactDetail
contact={contact}
hasSignalAccount={false}
i18n={util.i18n}
onSendMessage={() => console.log('onSendMessage')}
/>;
```

232
ts/components/conversation/ContactDetail.stories.tsx Normal file
View file

@ -0,0 +1,232 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { ContactDetail, Props } from './ContactDetail';
import { AddressType, ContactFormType } from '../../types/Contact';
// @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/ContactDetail', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
contact: overrideProps.contact || {},
hasSignalAccount: boolean(
'hasSignalAccount',
overrideProps.hasSignalAccount || false
),
i18n,
onSendMessage: action('onSendMessage'),
});
const fullContact = {
address: [
{
type: AddressType.HOME,
street: '555 Main St.',
city: 'Boston',
region: 'MA',
postcode: '33333',
pobox: '2323-444',
country: 'US',
neighborhood: 'Garden Place',
},
{
type: AddressType.WORK,
street: '333 Another St.',
city: 'Boston',
region: 'MA',
postcode: '33344',
pobox: '2424-555',
country: 'US',
neighborhood: 'Factory Place',
},
{
type: AddressType.CUSTOM,
street: '111 Dream St.',
city: 'Miami',
region: 'FL',
postcode: '44232',
pobox: '111-333',
country: 'US',
neighborhood: 'BeachVille',
label: 'vacation',
},
{
type: AddressType.CUSTOM,
street: '333 Fake St.',
city: 'Boston',
region: 'MA',
postcode: '33345',
pobox: '123-444',
country: 'US',
neighborhood: 'Downtown',
},
],
avatar: {
avatar: {
path: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
},
isProfile: true,
},
email: [
{
value: 'jerjor@fakemail.com',
type: ContactFormType.HOME,
},
{
value: 'jerry.jordan@fakeco.com',
type: ContactFormType.WORK,
},
{
value: 'jj@privatething.net',
type: ContactFormType.CUSTOM,
label: 'private',
},
{
value: 'jordan@another.net',
type: ContactFormType.CUSTOM,
},
],
name: {
givenName: 'Jerry',
familyName: 'Jordan',
prefix: 'Dr.',
suffix: 'Jr.',
middleName: 'James',
displayName: 'Jerry Jordan',
},
number: [
{
value: '555-444-2323',
type: ContactFormType.HOME,
},
{
value: '555-444-3232',
type: ContactFormType.WORK,
},
{
value: '555-666-3232',
type: ContactFormType.MOBILE,
},
{
value: '333-666-3232',
type: ContactFormType.CUSTOM,
label: 'special',
},
{
value: '333-777-3232',
type: ContactFormType.CUSTOM,
},
],
};
story.add('Fully Filled Out', () => {
const props = createProps({
contact: fullContact,
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Only Email', () => {
const props = createProps({
contact: {
email: [
{
value: 'jerjor@fakemail.com',
type: ContactFormType.HOME,
},
],
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Given Name', () => {
const props = createProps({
contact: {
name: {
givenName: 'Jerry',
},
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Organization', () => {
const props = createProps({
contact: {
organization: 'Company 5',
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Given + Family Name', () => {
const props = createProps({
contact: {
name: {
givenName: 'Jerry',
familyName: 'FamilyName',
},
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Family Name', () => {
const props = createProps({
contact: {
name: {
familyName: 'FamilyName',
},
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Loading Avatar', () => {
const props = createProps({
contact: {
avatar: {
avatar: {
pending: true,
},
isProfile: true,
},
},
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Empty with Account', () => {
const props = createProps({
hasSignalAccount: true,
});
return <ContactDetail {...props} />;
});
story.add('Empty without Account', () => {
const props = createProps({
hasSignalAccount: false,
});
return <ContactDetail {...props} />;
});

2
ts/components/conversation/ContactDetail.tsx
View file

@ -18,7 +18,7 @@ import {
import { LocalizerType } from '../../types/Util'; import { LocalizerType } from '../../types/Util';
interface Props { export interface Props {
contact: ContactType; contact: ContactType;
hasSignalAccount: boolean; hasSignalAccount: boolean;
i18n: LocalizerType; i18n: LocalizerType;