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

Migrate Typing/Unsupported/Verification components to Storybook

Browse source
This commit is contained in:
Sidney Keese 2020-08-26 11:40:23 -07:00 • committed by Josh Perez
parent 58844f92ab
commit 45b9bbc837
12 changed files with 217 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

22
ts/components/conversation/TypingAnimation.md
View file

@ -1,22 +0,0 @@
### Conversation List
```jsx
<util.ConversationContext theme={util.theme}>
<TypingAnimation i18n={util.i18n} />
</util.ConversationContext>
```
### Dark background
Note: background color is 'steel'
```jsx
<div
style={{
backgroundColor: '#6b6b78',
padding: '2em',
}}
>
<TypingAnimation color="light" i18n={util.i18n} />
</div>
```

37
ts/components/conversation/TypingAnimation.stories.tsx Normal file
View file

@ -0,0 +1,37 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { Props, TypingAnimation } from './TypingAnimation';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/TypingAnimation', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
color: overrideProps.color || '',
});
story.add('Default', () => {
const props = createProps();
return <TypingAnimation {...props} />;
});
story.add('Light', () => {
const props = createProps({
color: 'light',
});
return (
<div style={{ padding: '2em', backgroundColor: 'grey' }}>
<TypingAnimation {...props} />
</div>
);
});

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

@ -3,7 +3,7 @@ import classNames from 'classnames';
import { LocalizerType } from '../../types/Util';
interface Props {
export interface Props {
i18n: LocalizerType;
color?: string;
}

38
ts/components/conversation/TypingBubble.md
View file

@ -1,38 +0,0 @@
### In message bubble
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="module-message-container">
<TypingBubble conversationType="direct" i18n={util.i18n} />
</div>
<div className="module-message-container">
<TypingBubble color="teal" conversationType="direct" i18n={util.i18n} />
</div>
</util.ConversationContext>
```
### In message bubble, group conversation
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="module-message-container">
<TypingBubble color="red" conversationType="group" i18n={util.i18n} />
</div>
<div className="module-message-container">
<TypingBubble
color="purple"
authorName="First Last"
conversationType="group"
i18n={util.i18n}
/>
</div>
<div className="module-message-container">
<TypingBubble
avatarPath={util.gifObjectUrl}
color="blue"
conversationType="group"
i18n={util.i18n}
/>
</div>
</util.ConversationContext>
```

45
ts/components/conversation/TypingBubble.stories.tsx Normal file
View file

@ -0,0 +1,45 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { Props, TypingBubble } from './TypingBubble';
import { Colors } from '../../types/Colors';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/TypingBubble', module);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
color: select(
'color',
Colors.reduce((m, c) => ({ ...m, [c]: c }), {}),
overrideProps.color || 'red'
),
avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
title: '',
profileName: text('profileName', overrideProps.profileName || ''),
conversationType: select(
'conversationType',
{ group: 'group', direct: 'direct' },
overrideProps.conversationType || 'direct'
),
});
story.add('Direct', () => {
const props = createProps();
return <TypingBubble {...props} />;
});
story.add('Group', () => {
const props = createProps({ conversationType: 'group' });
return <TypingBubble {...props} />;
});

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

@ -7,7 +7,7 @@ import { Avatar } from '../Avatar';
import { LocalizerType } from '../../types/Util';
import { ColorType } from '../../types/Colors';
interface Props {
export interface Props {
avatarPath?: string;
color: ColorType;
name?: string;

69
ts/components/conversation/UnsupportedMessage.md
View file

@ -1,69 +0,0 @@
### From someone in your contacts
```jsx
<util.ConversationContext theme={util.theme}>
<UnsupportedMessage
i18n={util.i18n}
contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
downloadNewVersion={() => console.log('downloadNewVersion')}
/>
</util.ConversationContext>
```
### After you upgrade
```jsx
<util.ConversationContext theme={util.theme}>
<UnsupportedMessage
i18n={util.i18n}
canProcessNow={true}
contact={{ phoneNumber: '(202) 500-1000', name: 'Alice' }}
downloadNewVersion={() => console.log('downloadNewVersion')}
/>
</util.ConversationContext>
```
### No name, just profile
```jsx
<util.ConversationContext theme={util.theme}>
<UnsupportedMessage
i18n={util.i18n}
contact={{ phoneNumber: '(202) 500-1000', profileName: 'Mr. Fire' }}
downloadNewVersion={() => console.log('downloadNewVersion')}
/>
</util.ConversationContext>
```
### From yourself
```jsx
<util.ConversationContext theme={util.theme}>
<UnsupportedMessage
i18n={util.i18n}
contact={{
isMe: true,
phoneNumber: '(202) 500-1000',
profileName: 'Mr. Fire',
}}
downloadNewVersion={() => console.log('downloadNewVersion')}
/>
</util.ConversationContext>
```
### From yourself, after you upgrade
```jsx
<util.ConversationContext theme={util.theme}>
<UnsupportedMessage
i18n={util.i18n}
canProcessNow={true}
contact={{
isMe: true,
phoneNumber: '(202) 500-1000',
profileName: 'Mr. Fire',
}}
downloadNewVersion={() => console.log('downloadNewVersion')}
/>
</util.ConversationContext>
```

75
ts/components/conversation/UnsupportedMessage.stories.tsx Normal file
View file

@ -0,0 +1,75 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { ContactType, Props, UnsupportedMessage } from './UnsupportedMessage';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/UnsupportedMessage', module);
const createContact = (props: Partial<ContactType> = {}): ContactType => ({
id: '',
title: text('contact title', props.title || ''),
isMe: boolean('contact isMe', props.isMe || false),
});
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
canProcessNow: boolean('canProcessNow', overrideProps.canProcessNow || false),
contact: overrideProps.contact || ({} as ContactType),
downloadNewVersion: action('downloadNewVersion'),
});
story.add('From Someone', () => {
const contact = createContact({
title: 'Alice',
name: 'Alice',
});
const props = createProps({ contact });
return <UnsupportedMessage {...props} />;
});
story.add('After Upgrade', () => {
const contact = createContact({
title: 'Alice',
name: 'Alice',
});
const props = createProps({ contact, canProcessNow: true });
return <UnsupportedMessage {...props} />;
});
story.add('From Yourself', () => {
const contact = createContact({
title: 'Alice',
name: 'Alice',
isMe: true,
});
const props = createProps({ contact });
return <UnsupportedMessage {...props} />;
});
story.add('From Yourself After Upgrade', () => {
const contact = createContact({
title: 'Alice',
name: 'Alice',
isMe: true,
});
const props = createProps({ contact, canProcessNow: true });
return <UnsupportedMessage {...props} />;
});

4
ts/components/conversation/UnsupportedMessage.tsx
View file

@ -5,7 +5,7 @@ import { ContactName } from './ContactName';
import { Intl } from '../Intl';
import { LocalizerType } from '../../types/Util';
interface ContactType {
export interface ContactType {
id: string;
phoneNumber?: string;
profileName?: string;
@ -27,7 +27,7 @@ type PropsHousekeeping = {
i18n: LocalizerType;
};
type Props = PropsData & PropsHousekeeping & PropsActions;
export type Props = PropsData & PropsHousekeeping & PropsActions;
export class UnsupportedMessage extends React.Component<Props> {
public render() {

49
ts/components/conversation/VerificationNotification.md
View file

@ -1,49 +0,0 @@
### Marking as verified
```js
<util.ConversationContext theme={util.theme}>
<VerificationNotification
type="markVerified"
isLocal={true}
contact={{
phoneNumber: '(202) 555-0003',
profileName: 'Mr. Fire',
}}
i18n={util.i18n}
/>
<VerificationNotification
type="markVerified"
isLocal={false}
contact={{
phoneNumber: '(202) 555-0003',
profileName: 'Mr. Fire',
}}
i18n={util.i18n}
/>
</util.ConversationContext>
```
### Marking as not verified
```js
<util.ConversationContext theme={util.theme}>
<VerificationNotification
type="markNotVerified"
isLocal={true}
contact={{
phoneNumber: '(202) 555-0003',
profileName: 'Mr. Fire',
}}
i18n={util.i18n}
/>
<VerificationNotification
type="markNotVerified"
isLocal={false}
contact={{
phoneNumber: '(202) 555-0003',
profileName: 'Mr. Fire',
}}
i18n={util.i18n}
/>
</util.ConversationContext>
```

55
ts/components/conversation/VerificationNotification.stories.tsx Normal file
View file

@ -0,0 +1,55 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { Props, VerificationNotification } from './VerificationNotification';
import { boolean } from '@storybook/addon-knobs';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/VerificationNotification',
module
);
const contact = {
title: 'Mr. Fire',
phoneNumber: '(202) 555-0003',
profileName: 'Mr. Fire',
};
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
type: overrideProps.type || 'markVerified',
isLocal: boolean('isLocal', overrideProps.isLocal !== false),
contact,
});
story.add('Mark as Verified', () => {
const props = createProps({ type: 'markVerified' });
return <VerificationNotification {...props} />;
});
story.add('Mark as Not Verified', () => {
const props = createProps({ type: 'markNotVerified' });
return <VerificationNotification {...props} />;
});
story.add('Mark as Verified Remotely', () => {
const props = createProps({ type: 'markVerified', isLocal: false });
return <VerificationNotification {...props} />;
});
story.add('Mark as Not Verified Remotely', () => {
const props = createProps({ type: 'markNotVerified', isLocal: false });
return <VerificationNotification {...props} />;
});

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

@ -24,7 +24,7 @@ type PropsHousekeeping = {
i18n: LocalizerType;
};
type Props = PropsData & PropsHousekeeping;
export type Props = PropsData & PropsHousekeeping;
export class VerificationNotification extends React.Component<Props> {
public getStringId() {