From 67d2dd07c37f33c91a6383c574201bafd4c89359 Mon Sep 17 00:00:00 2001 From: Chris Svenningsen Date: Thu, 20 Aug 2020 14:50:43 -0700 Subject: [PATCH] Migrate AttachmentList to Storybook --- ts/components/conversation/AttachmentList.md | 118 ----------------- .../conversation/AttachmentList.stories.tsx | 119 ++++++++++++++++++ ts/components/conversation/AttachmentList.tsx | 3 +- 3 files changed, 120 insertions(+), 120 deletions(-) delete mode 100644 ts/components/conversation/AttachmentList.md create mode 100644 ts/components/conversation/AttachmentList.stories.tsx diff --git a/ts/components/conversation/AttachmentList.md b/ts/components/conversation/AttachmentList.md deleted file mode 100644 index 52254575a..000000000 --- a/ts/components/conversation/AttachmentList.md +++ /dev/null @@ -1,118 +0,0 @@ -### One image - -```jsx -const attachments = [ - { - url: util.gifObjectUrl, - contentType: 'image/gif', - width: 320, - height: 240, - }, -]; - - console.log('onClose')} - onClickAttachment={attachment => { - console.log('onClickAttachment', attachment); - }} - onCloseAttachment={attachment => { - console.log('onCloseAttachment', attachment); - }} - onAddAttachment={() => console.log('onAddAttachment')} - i18n={util.i18n} - /> -; -``` - -### Four images - -```jsx -const attachments = [ - { - url: util.gifObjectUrl, - contentType: 'image/png', - width: 320, - height: 240, - }, - { - url: util.pngObjectUrl, - contentType: 'image/png', - width: 800, - height: 1200, - }, - { - url: util.landscapeObjectUrl, - contentType: 'image/png', - width: 4496, - height: 3000, - }, - { - url: util.landscapeGreenObjectUrl, - contentType: 'image/png', - width: 1000, - height: 50, - }, -]; - - - console.log('onClose')} - onClickAttachment={attachment => { - console.log('onClickAttachment', attachment); - }} - onCloseAttachment={attachment => { - console.log('onCloseAttachment', attachment); - }} - onAddAttachment={() => console.log('onAddAttachment')} - i18n={util.i18n} - /> -; -``` - -### A mix of attachment types - -```jsx -const attachments = [ - { - url: util.gifObjectUrl, - contentType: 'image/gif', - width: 320, - height: 240, - }, - { - contentType: 'text/plain', - fileName: 'manifesto.txt', - }, - { - url: util.pngObjectUrl, - contentType: 'image/png', - width: 800, - height: 1200, - }, -]; - - - console.log('onClose')} - onClickAttachment={attachment => { - console.log('onClickAttachment', attachment); - }} - onCloseAttachment={attachment => { - console.log('onCloseAttachment', attachment); - }} - onAddAttachment={() => console.log('onAddAttachment')} - i18n={util.i18n} - /> -; -``` - -### No attachments provided - -Nothing is shown if attachment list is empty. - -```jsx - -``` diff --git a/ts/components/conversation/AttachmentList.stories.tsx b/ts/components/conversation/AttachmentList.stories.tsx new file mode 100644 index 000000000..54cf923f7 --- /dev/null +++ b/ts/components/conversation/AttachmentList.stories.tsx @@ -0,0 +1,119 @@ +import * as React from 'react'; + +import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; + +import { AttachmentList, Props } from './AttachmentList'; +import { + AUDIO_MP3, + IMAGE_GIF, + IMAGE_JPEG, + MIMEType, + VIDEO_MP4, +} from '../../types/MIME'; + +// @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/AttachmentList', module); + +const createProps = (overrideProps: Partial = {}): Props => ({ + attachments: overrideProps.attachments || [], + i18n, + onAddAttachment: action('onAddAttachment'), + onClickAttachment: action('onClickAttachment'), + onClose: action('onClose'), + onCloseAttachment: action('onCloseAttachment'), +}); + +story.add('One File', () => { + const props = createProps({ + attachments: [ + { + contentType: IMAGE_JPEG, + fileName: 'tina-rolf-269345-unsplash.jpg', + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + }, + ], + }); + return ; +}); + +story.add('Multiple Visual Attachments', () => { + const props = createProps({ + attachments: [ + { + contentType: IMAGE_JPEG, + fileName: 'tina-rolf-269345-unsplash.jpg', + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + }, + { + contentType: VIDEO_MP4, + fileName: 'pixabay-Soap-Bubble-7141.mp4', + url: '/fixtures/pixabay-Soap-Bubble-7141.mp4', + screenshot: { + height: 112, + width: 112, + url: '/fixtures/kitten-4-112-112.jpg', + contentType: IMAGE_JPEG, + }, + }, + { + contentType: IMAGE_GIF, + fileName: 'giphy-GVNv0UpeYm17e', + url: '/fixtures/giphy-GVNvOUpeYmI7e.gif', + }, + ], + }); + + return ; +}); + +story.add('Multiple with Non-Visual Types', () => { + const props = createProps({ + attachments: [ + { + contentType: IMAGE_JPEG, + fileName: 'tina-rolf-269345-unsplash.jpg', + url: '/fixtures/tina-rolf-269345-unsplash.jpg', + }, + { + contentType: 'text/plain' as MIMEType, + fileName: 'lorem-ipsum.txt', + url: '/fixtures/lorem-ipsum.txt', + }, + { + contentType: AUDIO_MP3, + fileName: 'incompetech-com-Agnus-Dei-X.mp3', + url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3', + }, + { + contentType: VIDEO_MP4, + fileName: 'pixabay-Soap-Bubble-7141.mp4', + url: '/fixtures/pixabay-Soap-Bubble-7141.mp4', + screenshot: { + height: 112, + width: 112, + url: '/fixtures/kitten-4-112-112.jpg', + contentType: IMAGE_JPEG, + }, + }, + { + contentType: IMAGE_GIF, + fileName: 'giphy-GVNv0UpeYm17e', + url: '/fixtures/giphy-GVNvOUpeYmI7e.gif', + }, + ], + }); + + return ; +}); + +story.add('Empty List', () => { + const props = createProps(); + + return ; +}); diff --git a/ts/components/conversation/AttachmentList.tsx b/ts/components/conversation/AttachmentList.tsx index 6d89ab423..14f155c79 100644 --- a/ts/components/conversation/AttachmentList.tsx +++ b/ts/components/conversation/AttachmentList.tsx @@ -15,10 +15,9 @@ import { isVideoAttachment, } from '../../types/Attachment'; -interface Props { +export interface Props { attachments: Array; i18n: LocalizerType; - // onError: () => void; onClickAttachment: (attachment: AttachmentType) => void; onCloseAttachment: (attachment: AttachmentType) => void; onAddAttachment: () => void;