From b112666239bdc8e225b08416bde6a1789a460917 Mon Sep 17 00:00:00 2001 From: Sidney Keese Date: Fri, 21 Aug 2020 08:13:55 -0700 Subject: [PATCH] Migrate MediaGallery to Storybook --- .../media-gallery/MediaGallery.md | 99 ----------- .../media-gallery/MediaGallery.stories.tsx | 164 ++++++++++++++++++ .../media-gallery/MediaGallery.tsx | 2 +- 3 files changed, 165 insertions(+), 100 deletions(-) delete mode 100644 ts/components/conversation/media-gallery/MediaGallery.md create mode 100644 ts/components/conversation/media-gallery/MediaGallery.stories.tsx diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md deleted file mode 100644 index 890b96bb83..0000000000 --- a/ts/components/conversation/media-gallery/MediaGallery.md +++ /dev/null @@ -1,99 +0,0 @@ -### Empty states for missing media and documents - -``` -
- -
-``` - -### Media gallery with media and documents - -```jsx -const _ = util._; -const DAY_MS = 24 * 60 * 60 * 1000; -const MONTH_MS = 30 * DAY_MS; -const YEAR_MS = 12 * MONTH_MS; -const tokens = ['foo', 'bar', 'baz', 'qux', 'quux']; -const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff']; -const createRandomMessage = ({ startTime, timeWindow } = {}) => props => { - const now = Date.now(); - const fileName = `${_.sample(tokens)}${_.sample(tokens)}.${_.sample( - fileExtensions - )}`; - return { - contentType: 'image/jpeg', - message: { - id: _.random(now).toString(), - received_at: _.random(startTime, startTime + timeWindow), - }, - attachment: { - data: null, - fileName, - size: _.random(1000, 1000 * 1000 * 50), - contentType: 'image/jpeg', - }, - - thumbnailObjectUrl: `https://placekitten.com/${_.random( - 50, - 150 - )}/${_.random(50, 150)}`, - ...props, - }; -}; - -const createRandomMessages = ({ startTime, timeWindow }) => - _.range(_.random(5, 10)).map(createRandomMessage({ startTime, timeWindow })); - -const startTime = Date.now(); -const messages = _.sortBy( - [ - ...createRandomMessages({ - startTime, - timeWindow: DAY_MS, - }), - ...createRandomMessages({ - startTime: startTime - DAY_MS, - timeWindow: DAY_MS, - }), - ...createRandomMessages({ - startTime: startTime - 3 * DAY_MS, - timeWindow: 3 * DAY_MS, - }), - ...createRandomMessages({ - startTime: startTime - 30 * DAY_MS, - timeWindow: 15 * DAY_MS, - }), - ...createRandomMessages({ - startTime: startTime - 365 * DAY_MS, - timeWindow: 300 * DAY_MS, - }), - ], - message => -message.received_at -); - -; -``` - -## Media gallery with one document - -```jsx -const mediaItems = [ - { - thumbnailObjectUrl: 'https://placekitten.com/76/67', - contentType: 'image/jpeg', - message: { - id: '1', - }, - attachment: { - fileName: 'foo.jpg', - contentType: 'image/jpeg', - }, - }, -]; -; -``` diff --git a/ts/components/conversation/media-gallery/MediaGallery.stories.tsx b/ts/components/conversation/media-gallery/MediaGallery.stories.tsx new file mode 100644 index 0000000000..2f44b439f9 --- /dev/null +++ b/ts/components/conversation/media-gallery/MediaGallery.stories.tsx @@ -0,0 +1,164 @@ +import * as React from 'react'; +import { random, range, sample, sortBy } from 'lodash'; +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 { MediaItemType } from '../../LightboxGallery'; +import { MIMEType } from '../../../types/MIME'; + +import { MediaGallery, Props } from './MediaGallery'; + +const i18n = setupI18n('en', enMessages); + +const story = storiesOf( + 'Components/Conversation/MediaGallery/MediaGallery', + 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; + +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 +) => + 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 => ({ + i18n, + onItemClick: action('onItemClick'), + documents: overrideProps.documents || [], + media: overrideProps.media || [], +}); + +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 props = createProps({ documents, media }); + + return ; +}); + +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 props = createProps({ media }); + + return ; +}); + +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 props = createProps({ documents }); + + return ; +}); + +story.add('One Each', () => { + const media = createRandomMedia(now, days(1)).slice(0, 1); + const documents = createRandomDocuments(now, days(1)).slice(0, 1); + + const props = createProps({ documents, media }); + + return ; +}); + +story.add('Empty', () => { + const props = createProps(); + + return ; +}); diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 57ea62627b..38ec14d017 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/ts/components/conversation/media-gallery/MediaGallery.tsx @@ -12,7 +12,7 @@ import { LocalizerType } from '../../../types/Util'; import { MediaItemType } from '../../LightboxGallery'; -interface Props { +export interface Props { documents: Array; i18n: LocalizerType; media: Array;