Migrate StagedXXX components to Storybook

ts/components/conversation/StagedGenericAttachment.md

@@ -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>;
-```

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> = {}): 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} />;
+});

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;

ts/components/conversation/StagedLinkPreview.md

@@ -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>
-```

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> = {}
+): 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} />;
+});

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;

ts/components/conversation/StagedPlaceholderAttachment.md

@@ -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>;
-```

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 (
+    <StagedPlaceholderAttachment i18n={i18n} onClick={action('onClick')} />
+  );
+});