jonny/Signal-Desktop
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Migrate StagedXXX components to Storybook

Browse source
This commit is contained in:
Sidney Keese 2020-08-26 13:35:46 -07:00 committed by Josh Perez
parent 1894ff0dc1
commit ac0ddf34ea
8 changed files with 202 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
ts/components/conversation/StagedGenericAttachment.md
View file

@ -1,50 +0,0 @@
Text file
```js
const attachment = {
contentType: 'text/plain',
fileName: 'manifesto.txt',
};
<util.ConversationContext theme={util.theme}>
<StagedGenericAttachment
attachment={attachment}
i18n={util.i18n}
onClose={attachment => console.log('onClose', attachment)}
/>
</util.ConversationContext>;
```
File with long name
```js
const attachment = {
contentType: 'text/plain',
fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
};
<util.ConversationContext theme={util.theme}>
<StagedGenericAttachment
attachment={attachment}
i18n={util.i18n}
onClose={attachment => console.log('onClose', attachment)}
/>
</util.ConversationContext>;
```
File with long extension
```js
const attachment = {
contentType: 'text/plain',
fileName: 'manifesto.reallylongtxt',
};
<util.ConversationContext theme={util.theme}>
<StagedGenericAttachment
attachment={attachment}
i18n={util.i18n}
onClose={attachment => console.log('onClose', attachment)}
/>
</util.ConversationContext>;
```

69
ts/components/conversation/StagedGenericAttachment.stories.tsx Normal file
View file

@ -0,0 +1,69 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { AttachmentType } from '../../types/Attachment';
import { MIMEType } from '../../types/MIME';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { Props, StagedGenericAttachment } from './StagedGenericAttachment';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/StagedGenericAttachment',
module
);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachment: overrideProps.attachment || ({} as AttachmentType),
i18n,
onClose: action('onClose'),
});
const createAttachment = (
props: Partial<AttachmentType> = {}
): AttachmentType => ({
contentType: text(
'attachment contentType',
props.contentType || ''
) as MIMEType,
fileName: text('attachment fileName', props.fileName || ''),
url: '',
});
story.add('Text File', () => {
const attachment = createAttachment({
contentType: 'text/plain' as MIMEType,
fileName: 'manifesto.txt',
});
const props = createProps({ attachment });
return <StagedGenericAttachment {...props} />;
});
story.add('Long Name', () => {
const attachment = createAttachment({
contentType: 'text/plain' as MIMEType,
fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
});
const props = createProps({ attachment });
return <StagedGenericAttachment {...props} />;
});
story.add('Long Extension', () => {
const attachment = createAttachment({
contentType: 'text/plain' as MIMEType,
fileName: 'manifesto.reallylongtxt',
});
const props = createProps({ attachment });
return <StagedGenericAttachment {...props} />;
});

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

@ -3,7 +3,7 @@ import React from 'react';
import { AttachmentType, getExtensionForDisplay } from '../../types/Attachment';
import { LocalizerType } from '../../types/Util';
interface Props {
export interface Props {
attachment: AttachmentType;
onClose: (attachment: AttachmentType) => void;
i18n: LocalizerType;

92
ts/components/conversation/StagedLinkPreview.md
View file

@ -1,92 +0,0 @@
#### Still loading
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={false}
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```
#### No image
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={true}
title="This is a super-sweet site"
domain="instagram.com"
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```
#### Image
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={true}
title="This is a super-sweet site"
domain="instagram.com"
image={{
url: util.gifObjectUrl,
contentType: 'image/gif',
}}
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```
#### Image, no title
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={true}
domain="instagram.com"
image={{
url: util.gifObjectUrl,
contentType: 'image/gif',
}}
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```
#### No image, long title
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={true}
title="This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?"
domain="instagram.com"
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```
#### Image, long title
```jsx
<util.ConversationContext theme={util.theme}>
<StagedLinkPreview
isLoaded={true}
title="This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?"
domain="instagram.com"
image={{
url: util.gifObjectUrl,
contentType: 'image/gif',
}}
onClose={() => console.log('onClose')}
i18n={util.i18n}
/>
</util.ConversationContext>
```

107
ts/components/conversation/StagedLinkPreview.stories.tsx Normal file
View file

@ -0,0 +1,107 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { AttachmentType } from '../../types/Attachment';
import { MIMEType } from '../../types/MIME';
// @ts-ignore
import { setup as setupI18n } from '../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../_locales/en/messages.json';
import { Props, StagedLinkPreview } from './StagedLinkPreview';
const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/Conversation/StagedLinkPreview', module);
story.addDecorator((withKnobs as any)({ escapeHTML: false }));
const createAttachment = (
props: Partial<AttachmentType> = {}
): AttachmentType => ({
contentType: text(
'attachment contentType',
props.contentType || ''
) as MIMEType,
fileName: text('attachment fileName', props.fileName || ''),
url: text('attachment url', props.url || ''),
});
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
isLoaded: boolean('isLoaded', overrideProps.isLoaded !== false),
title: text('title', overrideProps.title || ''),
domain: text('domain', overrideProps.domain || ''),
image: overrideProps.image,
i18n,
onClose: action('onClose'),
});
story.add('Loading', () => {
const props = createProps({
isLoaded: false,
});
return <StagedLinkPreview {...props} />;
});
story.add('No Image', () => {
const props = createProps({
title: 'This is a super-sweet site',
domain: 'instagram.com',
});
return <StagedLinkPreview {...props} />;
});
story.add('Image', () => {
const props = createProps({
title: 'This is a super-sweet site',
domain: 'instagram.com',
image: createAttachment({
url: '/fixtures/kitten-4-112-112.jpg',
contentType: 'image/jpeg' as MIMEType,
}),
});
return <StagedLinkPreview {...props} />;
});
story.add('Image, No Title', () => {
const props = createProps({
domain: 'instagram.com',
image: createAttachment({
url: '/fixtures/kitten-4-112-112.jpg',
contentType: 'image/jpeg' as MIMEType,
}),
});
return <StagedLinkPreview {...props} />;
});
story.add('No Image, Long Title', () => {
const props = createProps({
title:
"This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?",
domain: 'instagram.com',
});
return <StagedLinkPreview {...props} />;
});
story.add('Image, Long Title', () => {
const props = createProps({
title:
"This is a super-sweet site. And it's got some really amazing content in store for you if you just click that link. Can you click that link for me?",
domain: 'instagram.com',
image: createAttachment({
url: '/fixtures/kitten-4-112-112.jpg',
contentType: 'image/jpeg' as MIMEType,
}),
});
return <StagedLinkPreview {...props} />;
});

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

@ -6,7 +6,7 @@ import { Image } from './Image';
import { AttachmentType, isImageAttachment } from '../../types/Attachment';
import { LocalizerType } from '../../types/Util';
interface Props {
export interface Props {
isLoaded: boolean;
title: string;
domain: string;

13
ts/components/conversation/StagedPlaceholderAttachment.md
View file

@ -1,13 +0,0 @@
```js
const attachment = {
contentType: 'text/plain',
fileName: 'manifesto.txt',
};
<util.ConversationContext theme={util.theme}>
<StagedPlaceholderAttachment
onClick={attachment => console.log('onClick')}
i18n={util.i18n}
/>
</util.ConversationContext>;
```

24
ts/components/conversation/StagedPlaceholderAttachment.stories.tsx Normal file
View file

@ -0,0 +1,24 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
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 { StagedPlaceholderAttachment } from './StagedPlaceholderAttachment';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/StagedPlaceholderAttachment',
module
);
story.add('Default', () => {
return (
<StagedPlaceholderAttachment i18n={i18n} onClick={action('onClick')} />
);
});