From ac0ddf34ea2c0453a3d1057b6b2c08ba7c7a28c0 Mon Sep 17 00:00:00 2001 From: Sidney Keese Date: Wed, 26 Aug 2020 13:35:46 -0700 Subject: [PATCH] Migrate StagedXXX components to Storybook --- .../conversation/StagedGenericAttachment.md | 50 -------- .../StagedGenericAttachment.stories.tsx | 69 +++++++++++ .../conversation/StagedGenericAttachment.tsx | 2 +- .../conversation/StagedLinkPreview.md | 92 --------------- .../StagedLinkPreview.stories.tsx | 107 ++++++++++++++++++ .../conversation/StagedLinkPreview.tsx | 2 +- .../StagedPlaceholderAttachment.md | 13 --- .../StagedPlaceholderAttachment.stories.tsx | 24 ++++ 8 files changed, 202 insertions(+), 157 deletions(-) delete mode 100644 ts/components/conversation/StagedGenericAttachment.md create mode 100644 ts/components/conversation/StagedGenericAttachment.stories.tsx delete mode 100644 ts/components/conversation/StagedLinkPreview.md create mode 100644 ts/components/conversation/StagedLinkPreview.stories.tsx delete mode 100644 ts/components/conversation/StagedPlaceholderAttachment.md create mode 100644 ts/components/conversation/StagedPlaceholderAttachment.stories.tsx diff --git a/ts/components/conversation/StagedGenericAttachment.md b/ts/components/conversation/StagedGenericAttachment.md deleted file mode 100644 index 293e2a3bcf0..00000000000 --- a/ts/components/conversation/StagedGenericAttachment.md +++ /dev/null @@ -1,50 +0,0 @@ -Text file - -```js -const attachment = { - contentType: 'text/plain', - fileName: 'manifesto.txt', -}; - - - console.log('onClose', attachment)} - /> -; -``` - -File with long name - -```js -const attachment = { - contentType: 'text/plain', - fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt', -}; - - - console.log('onClose', attachment)} - /> -; -``` - -File with long extension - -```js -const attachment = { - contentType: 'text/plain', - fileName: 'manifesto.reallylongtxt', -}; - - - console.log('onClose', attachment)} - /> -; -``` diff --git a/ts/components/conversation/StagedGenericAttachment.stories.tsx b/ts/components/conversation/StagedGenericAttachment.stories.tsx new file mode 100644 index 00000000000..907dbfaeb9e --- /dev/null +++ b/ts/components/conversation/StagedGenericAttachment.stories.tsx @@ -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 => ({ + attachment: overrideProps.attachment || ({} as AttachmentType), + i18n, + onClose: action('onClose'), +}); + +const createAttachment = ( + props: Partial = {} +): 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 ; +}); + +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 ; +}); + +story.add('Long Extension', () => { + const attachment = createAttachment({ + contentType: 'text/plain' as MIMEType, + fileName: 'manifesto.reallylongtxt', + }); + const props = createProps({ attachment }); + + return ; +}); diff --git a/ts/components/conversation/StagedGenericAttachment.tsx b/ts/components/conversation/StagedGenericAttachment.tsx index adfc03a57a9..ca95b9e4d1f 100644 --- a/ts/components/conversation/StagedGenericAttachment.tsx +++ b/ts/components/conversation/StagedGenericAttachment.tsx @@ -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; diff --git a/ts/components/conversation/StagedLinkPreview.md b/ts/components/conversation/StagedLinkPreview.md deleted file mode 100644 index e14c774023b..00000000000 --- a/ts/components/conversation/StagedLinkPreview.md +++ /dev/null @@ -1,92 +0,0 @@ -#### Still loading - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` - -#### No image - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` - -#### Image - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` - -#### Image, no title - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` - -#### No image, long title - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` - -#### Image, long title - -```jsx - - console.log('onClose')} - i18n={util.i18n} - /> - -``` diff --git a/ts/components/conversation/StagedLinkPreview.stories.tsx b/ts/components/conversation/StagedLinkPreview.stories.tsx new file mode 100644 index 00000000000..51eaad25499 --- /dev/null +++ b/ts/components/conversation/StagedLinkPreview.stories.tsx @@ -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 => ({ + 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 => ({ + 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 ; +}); + +story.add('No Image', () => { + const props = createProps({ + title: 'This is a super-sweet site', + domain: 'instagram.com', + }); + + return ; +}); + +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 ; +}); + +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 ; +}); + +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 ; +}); + +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 ; +}); diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx index 30f34747e1a..ed59df2a35b 100644 --- a/ts/components/conversation/StagedLinkPreview.tsx +++ b/ts/components/conversation/StagedLinkPreview.tsx @@ -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; diff --git a/ts/components/conversation/StagedPlaceholderAttachment.md b/ts/components/conversation/StagedPlaceholderAttachment.md deleted file mode 100644 index a642c41ee14..00000000000 --- a/ts/components/conversation/StagedPlaceholderAttachment.md +++ /dev/null @@ -1,13 +0,0 @@ -```js -const attachment = { - contentType: 'text/plain', - fileName: 'manifesto.txt', -}; - - - console.log('onClick')} - i18n={util.i18n} - /> -; -``` diff --git a/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx b/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx new file mode 100644 index 00000000000..d1cb24a2bdf --- /dev/null +++ b/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx @@ -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 ( + + ); +});