Migrate MediaGallery to Storybook

ts/components/conversation/media-gallery/MediaGallery.md

@@ -1,99 +0,0 @@
-### Empty states for missing media and documents
-
-```
-<div style={{width: '100%', height: 300}}>
-  <MediaGallery
-    i18n={window.i18n}
-    media={[]}
-    documents={[]}
-    i18n={util.i18n}
-  />
-</div>
-```
-
-### 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
-);
-
-<MediaGallery i18n={util.i18n} media={messages} documents={messages} />;
-```
-
-## 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',
-    },
-  },
-];
-<MediaGallery i18n={util.i18n} media={mediaItems} documents={mediaItems} />;
-```

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

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<MediaItemType>;
   i18n: LocalizerType;
   media: Array<MediaItemType>;