Migrate AttachmentSection to Storybook

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

@@ -1,33 +0,0 @@
-```jsx
-const mediaItems = [
-  {
-    index: 0,
-    message: {
-      id: '1',
-    },
-    attachment: {
-      fileName: 'foo.json',
-      contentType: 'application/json',
-      size: 53313,
-    },
-  },
-  {
-    index: 1,
-    message: {
-      id: '2',
-    },
-    attachment: {
-      fileName: 'bar.txt',
-      contentType: 'text/plain',
-      size: 10323,
-    },
-  },
-];
-
-<AttachmentSection
-  header="Today"
-  type="documents"
-  mediaItems={mediaItems}
-  i18n={util.i18n}
-/>;
-```

ts/components/conversation/media-gallery/AttachmentSection.stories.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { select, text, withKnobs } from '@storybook/addon-knobs';
+import { random, range, sample, sortBy } from 'lodash';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../../js/modules/i18n';
+// @ts-ignore
+import enMessages from '../../../../_locales/en/messages.json';
+
+import { MIMEType } from '../../../types/MIME';
+import { MediaItemType } from '../../LightboxGallery';
+
+import { AttachmentSection, Props } from './AttachmentSection';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf(
+  'Components/Conversation/MediaGallery/AttachmentSection',
+  module
+);
+
+story.addDecorator((withKnobs as any)({ escapeHTML: false }));
+
+export const now = Date.now();
+const DAY_MS = 24 * 60 * 60 * 1000;
+export 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)
+  );
+
+export const createRandomDocuments = (startTime: number, timeWindow: number) =>
+  createRandomFiles(startTime, timeWindow, ['docx', 'pdf', 'txt']);
+
+export const createRandomMedia = (startTime: number, timeWindow: number) =>
+  createRandomFiles(startTime, timeWindow, ['mp4', 'jpg', 'png', 'gif']);
+
+export const createPreparedMediaItems = (
+  fn: typeof createRandomDocuments | typeof createRandomMedia
+) =>
+  sortBy(
+    [
+      ...fn(now, days(1)),
+      ...fn(now - days(1), days(1)),
+      ...fn(now - days(3), days(3)),
+      ...fn(now - days(30), days(15)),
+      ...fn(now - days(365), days(300)),
+    ],
+    (item: MediaItemType) => -item.message.received_at
+  );
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  header: text('header', 'Today'),
+  type: select(
+    'type',
+    { media: 'media', documents: 'documents' },
+    overrideProps.type || 'media'
+  ),
+  mediaItems: overrideProps.mediaItems || [],
+});
+
+story.add('Documents', () => {
+  const mediaItems = createRandomDocuments(now, days(1));
+  const props = createProps({ mediaItems, type: 'documents' });
+
+  return <AttachmentSection {...props} />;
+});
+
+story.add('Media', () => {
+  const mediaItems = createRandomMedia(now, days(1));
+  const props = createProps({ mediaItems, type: 'media' });
+
+  return <AttachmentSection {...props} />;
+});

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -7,7 +7,7 @@ import { MediaItemType } from '../../LightboxGallery';
 import { missingCaseError } from '../../../util/missingCaseError';
 import { LocalizerType } from '../../../types/Util';
 
-interface Props {
+export interface Props {
   i18n: LocalizerType;
   header?: string;
   type: 'media' | 'documents';

ts/components/conversation/media-gallery/MediaGallery.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { random, range, sample, sortBy } from 'lodash';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -8,9 +7,13 @@ import { setup as setupI18n } from '../../../../js/modules/i18n';
 // @ts-ignore
 import enMessages from '../../../../_locales/en/messages.json';
 
-import { MediaItemType } from '../../LightboxGallery';
+import {
-import { MIMEType } from '../../../types/MIME';
+  createPreparedMediaItems,
-
+  createRandomDocuments,
+  createRandomMedia,
+  days,
+  now,
+} from './AttachmentSection.stories';
 import { MediaGallery, Props } from './MediaGallery';
 
 const i18n = setupI18n('en', enMessages);
@@ -20,65 +23,6 @@ const story = storiesOf(
   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'),
@@ -87,62 +31,22 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 });
 
 story.add('Populated', () => {
-  const media = sortBy(
+  const documents = createRandomDocuments(now, days(1)).slice(0, 1);
-    [
+  const media = createPreparedMediaItems(createRandomMedia);
-      ...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(
+  const media = createPreparedMediaItems(createRandomMedia);
-    [
-      ...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(
+  const documents = createPreparedMediaItems(createRandomDocuments);
-    [
-      ...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} />;