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

Migrate AttachmentSection to Storybook

Browse source
This commit is contained in:
Sidney Keese 2020-08-25 17:39:24 -07:00 committed by Josh Perez
parent 098bab2d5e
commit 252c101e06
4 changed files with 133 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ts/components/conversation/media-gallery/AttachmentSection.md
View file

@ -1,33 +0,0 @@
```jsx
const mediaItems = [
{
index: 0,
message: {
id: '1',
},
attachment: {
fileName: 'foo.json',
contentType: 'application/json',
size: 53313,
},
},
{
index: 1,
message: {
id: '2',
},
attachment: {
fileName: 'bar.txt',
contentType: 'text/plain',
size: 10323,
},
},
];
<AttachmentSection
header="Today"
type="documents"
mediaItems={mediaItems}
i18n={util.i18n}
/>;
```

121
ts/components/conversation/media-gallery/AttachmentSection.stories.tsx Normal file
View file

@ -0,0 +1,121 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { select, text, withKnobs } from '@storybook/addon-knobs';
import { random, range, sample, sortBy } from 'lodash';
// @ts-ignore
import { setup as setupI18n } from '../../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../../_locales/en/messages.json';
import { MIMEType } from '../../../types/MIME';
import { MediaItemType } from '../../LightboxGallery';
import { AttachmentSection, Props } from './AttachmentSection';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/MediaGallery/AttachmentSection',
module
);
story.addDecorator((withKnobs as any)({ escapeHTML: false }));
export const now = Date.now();
const DAY_MS = 24 * 60 * 60 * 1000;
export const days = (n: number) => n * DAY_MS;
const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
const contentTypes = ({
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
mp4: 'video/mp4',
docx: 'application/text',
pdf: 'application/pdf',
txt: 'application/text',
} as unknown) as Record<string, MIMEType>;
const createRandomFile = (
startTime: number,
timeWindow: number,
fileExtension: string
): MediaItemType => {
const contentType = contentTypes[fileExtension];
const fileName = `${sample(tokens)}${sample(tokens)}.${fileExtension}`;
return {
contentType,
message: {
id: random(now).toString(),
received_at: random(startTime, startTime + timeWindow),
attachments: [],
},
attachment: {
url: '',
fileName,
size: random(1000, 1000 * 1000 * 50),
contentType,
},
index: 0,
thumbnailObjectUrl: `https://placekitten.com/${random(50, 150)}/${random(
50,
150
)}`,
};
};
const createRandomFiles = (
startTime: number,
timeWindow: number,
fileExtensions: Array<string>
) =>
range(random(5, 10)).map(() =>
createRandomFile(startTime, timeWindow, sample(fileExtensions) as string)
);
export const createRandomDocuments = (startTime: number, timeWindow: number) =>
createRandomFiles(startTime, timeWindow, ['docx', 'pdf', 'txt']);
export const createRandomMedia = (startTime: number, timeWindow: number) =>
createRandomFiles(startTime, timeWindow, ['mp4', 'jpg', 'png', 'gif']);
export const createPreparedMediaItems = (
fn: typeof createRandomDocuments | typeof createRandomMedia
) =>
sortBy(
[
...fn(now, days(1)),
...fn(now - days(1), days(1)),
...fn(now - days(3), days(3)),
...fn(now - days(30), days(15)),
...fn(now - days(365), days(300)),
],
(item: MediaItemType) => -item.message.received_at
);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
header: text('header', 'Today'),
type: select(
'type',
{ media: 'media', documents: 'documents' },
overrideProps.type || 'media'
),
mediaItems: overrideProps.mediaItems || [],
});
story.add('Documents', () => {
const mediaItems = createRandomDocuments(now, days(1));
const props = createProps({ mediaItems, type: 'documents' });
return <AttachmentSection {...props} />;
});
story.add('Media', () => {
const mediaItems = createRandomMedia(now, days(1));
const props = createProps({ mediaItems, type: 'media' });
return <AttachmentSection {...props} />;
});

2
ts/components/conversation/media-gallery/AttachmentSection.tsx
View file

@ -7,7 +7,7 @@ import { MediaItemType } from '../../LightboxGallery';
import { missingCaseError } from '../../../util/missingCaseError';
import { LocalizerType } from '../../../types/Util';
interface Props {
export interface Props {
i18n: LocalizerType;
header?: string;
type: 'media' | 'documents';

118
ts/components/conversation/media-gallery/MediaGallery.stories.tsx
View file

@ -1,5 +1,4 @@
import * as React from 'react';
import { random, range, sample, sortBy } from 'lodash';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
@ -8,9 +7,13 @@ import { setup as setupI18n } from '../../../../js/modules/i18n';
// @ts-ignore
import enMessages from '../../../../_locales/en/messages.json';
import { MediaItemType } from '../../LightboxGallery';
import { MIMEType } from '../../../types/MIME';
import {
createPreparedMediaItems,
createRandomDocuments,
createRandomMedia,
days,
now,
} from './AttachmentSection.stories';
import { MediaGallery, Props } from './MediaGallery';
const i18n = setupI18n('en', enMessages);
@ -20,65 +23,6 @@ const story = storiesOf(
module
);
const now = Date.now();
const DAY_MS = 24 * 60 * 60 * 1000;
const days = (n: number) => n * DAY_MS;
const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
const contentTypes = ({
gif: 'image/gif',
jpg: 'image/jpeg',
png: 'image/png',
mp4: 'video/mp4',
docx: 'application/text',
pdf: 'application/pdf',
txt: 'application/text',
} as unknown) as Record<string, MIMEType>;
const createRandomFile = (
startTime: number,
timeWindow: number,
fileExtension: string
): MediaItemType => {
const contentType = contentTypes[fileExtension];
const fileName = `${sample(tokens)}${sample(tokens)}.${fileExtension}`;
return {
contentType,
message: {
id: random(now).toString(),
received_at: random(startTime, startTime + timeWindow),
attachments: [],
},
attachment: {
url: '',
fileName,
size: random(1000, 1000 * 1000 * 50),
contentType,
},
index: 0,
thumbnailObjectUrl: `https://placekitten.com/${random(50, 150)}/${random(
50,
150
)}`,
};
};
const createRandomFiles = (
startTime: number,
timeWindow: number,
fileExtensions: Array<string>
) =>
range(random(5, 10)).map(() =>
createRandomFile(startTime, timeWindow, sample(fileExtensions) as string)
);
const createRandomDocuments = (startTime: number, timeWindow: number) =>
createRandomFiles(startTime, timeWindow, ['docx', 'pdf', 'txt']);
const createRandomMedia = (startTime: number, timeWindow: number) =>
createRandomFiles(startTime, timeWindow, ['mp4', 'jpg', 'png', 'gif']);
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
onItemClick: action('onItemClick'),
@ -87,62 +31,22 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
});
story.add('Populated', () => {
const media = sortBy(
[
...createRandomMedia(now, days(1)),
...createRandomMedia(now - days(1), days(1)),
...createRandomMedia(now - days(3), days(3)),
...createRandomMedia(now - days(30), days(15)),
...createRandomMedia(now - days(365), days(300)),
],
(document: MediaItemType) => -document.message.received_at
);
const documents = sortBy(
[
...createRandomDocuments(now, days(1)),
...createRandomDocuments(now - days(1), days(1)),
...createRandomDocuments(now - days(3), days(3)),
...createRandomDocuments(now - days(30), days(15)),
...createRandomDocuments(now - days(365), days(300)),
],
(document: MediaItemType) => -document.message.received_at
);
const documents = createRandomDocuments(now, days(1)).slice(0, 1);
const media = createPreparedMediaItems(createRandomMedia);
const props = createProps({ documents, media });
return <MediaGallery {...props} />;
});
story.add('No Documents', () => {
const media = sortBy(
[
...createRandomMedia(now, days(1)),
...createRandomMedia(now - days(1), days(1)),
...createRandomMedia(now - days(3), days(3)),
...createRandomMedia(now - days(30), days(15)),
...createRandomMedia(now - days(365), days(300)),
],
(document: MediaItemType) => -document.message.received_at
);
const media = createPreparedMediaItems(createRandomMedia);
const props = createProps({ media });
return <MediaGallery {...props} />;
});
story.add('No Media', () => {
const documents = sortBy(
[
...createRandomDocuments(now, days(1)),
...createRandomDocuments(now - days(1), days(1)),
...createRandomDocuments(now - days(3), days(3)),
...createRandomDocuments(now - days(30), days(15)),
...createRandomDocuments(now - days(365), days(300)),
],
(document: MediaItemType) => -document.message.received_at
);
const documents = createPreparedMediaItems(createRandomDocuments);
const props = createProps({ documents });
return <MediaGallery {...props} />;