Migrate AttachmentList to Storybook

ts/components/conversation/AttachmentList.md

@@ -1,118 +0,0 @@
-### One image
-
-```jsx
-const attachments = [
-  {
-    url: util.gifObjectUrl,
-    contentType: 'image/gif',
-    width: 320,
-    height: 240,
-  },
-];
-<util.ConversationContext theme={util.theme}>
-  <AttachmentList
-    attachments={attachments}
-    onClose={() => console.log('onClose')}
-    onClickAttachment={attachment => {
-      console.log('onClickAttachment', attachment);
-    }}
-    onCloseAttachment={attachment => {
-      console.log('onCloseAttachment', attachment);
-    }}
-    onAddAttachment={() => console.log('onAddAttachment')}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>;
-```
-
-### 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,
-  },
-];
-
-<util.ConversationContext theme={util.theme}>
-  <AttachmentList
-    attachments={attachments}
-    onClose={() => console.log('onClose')}
-    onClickAttachment={attachment => {
-      console.log('onClickAttachment', attachment);
-    }}
-    onCloseAttachment={attachment => {
-      console.log('onCloseAttachment', attachment);
-    }}
-    onAddAttachment={() => console.log('onAddAttachment')}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>;
-```
-
-### 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,
-  },
-];
-
-<util.ConversationContext theme={util.theme}>
-  <AttachmentList
-    attachments={attachments}
-    onClose={() => console.log('onClose')}
-    onClickAttachment={attachment => {
-      console.log('onClickAttachment', attachment);
-    }}
-    onCloseAttachment={attachment => {
-      console.log('onCloseAttachment', attachment);
-    }}
-    onAddAttachment={() => console.log('onAddAttachment')}
-    i18n={util.i18n}
-  />
-</util.ConversationContext>;
-```
-
-### No attachments provided
-
-Nothing is shown if attachment list is empty.
-
-```jsx
-<AttachmentList attachments={[]} i18n={util.i18n} />
-```

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> = {}): 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 <AttachmentList {...props} />;
+});
+
+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 <AttachmentList {...props} />;
+});
+
+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 <AttachmentList {...props} />;
+});
+
+story.add('Empty List', () => {
+  const props = createProps();
+
+  return <AttachmentList {...props} />;
+});

ts/components/conversation/AttachmentList.tsx

@@ -15,10 +15,9 @@ import {
   isVideoAttachment,
 } from '../../types/Attachment';
 
-interface Props {
+export interface Props {
   attachments: Array<AttachmentType>;
   i18n: LocalizerType;
-  // onError: () => void;
   onClickAttachment: (attachment: AttachmentType) => void;
   onCloseAttachment: (attachment: AttachmentType) => void;
   onAddAttachment: () => void;