Migrate LightboxGallery to Storybook

ts/components/LightboxGallery.md

@@ -1,70 +0,0 @@
-```js
-const noop = () => {};
-
-const mediaItems = [
-  {
-    objectURL: 'https://placekitten.com/799/600',
-    contentType: 'image/jpeg',
-    message: { id: 1 },
-    attachment: {
-      contentType: 'image/jpeg',
-      caption:
-        "This is a really long caption. Because the user had a lot to say. You know, it's very important to provide full context when sending an image. You don't want to make the wrong impression.",
-    },
-  },
-  {
-    objectURL: 'https://placekitten.com/900/600',
-    contentType: 'image/jpeg',
-    message: { id: 2 },
-    attachment: { contentType: 'image/jpeg' },
-  },
-  // Unsupported image type
-  {
-    objectURL: 'foo.tif',
-    contentType: 'image/tiff',
-    message: { id: 3 },
-    attachment: { contentType: 'image/tiff' },
-  },
-  // Video
-  {
-    objectURL: util.mp4ObjectUrl,
-    contentType: 'video/mp4',
-    message: { id: 4 },
-    attachment: { contentType: 'video/mp4' },
-  },
-  {
-    objectURL: util.mp4ObjectUrlV2,
-    contentType: 'video/mp4',
-    message: { id: 5 },
-    attachment: { contentType: 'video/mp4' },
-  },
-  {
-    objectURL: 'https://placekitten.com/980/800',
-    contentType: 'image/jpeg',
-    message: { id: 6 },
-    attachment: { contentType: 'image/jpeg' },
-  },
-  {
-    objectURL: 'https://placekitten.com/656/540',
-    contentType: 'image/jpeg',
-    message: { id: 7 },
-    attachment: { contentType: 'image/jpeg' },
-  },
-  {
-    objectURL: 'https://placekitten.com/762/400',
-    contentType: 'image/jpeg',
-    message: { id: 8 },
-    attachment: { contentType: 'image/jpeg' },
-  },
-  {
-    objectURL: 'https://placekitten.com/920/620',
-    contentType: 'image/jpeg',
-    message: { id: 9 },
-    attachment: { contentType: 'image/jpeg' },
-  },
-];
-
-<div style={{ position: 'relative', width: '100%', height: 500 }}>
-  <LightboxGallery media={mediaItems} onSave={noop} i18n={util.i18n} />
-</div>;
-```

ts/components/LightboxGallery.stories.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import { LightboxGallery, Props } from './LightboxGallery';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../js/modules/i18n';
+// @ts-ignore
+import enMessages from '../../_locales/en/messages.json';
+import { action } from '@storybook/addon-actions';
+import { number } from '@storybook/addon-knobs';
+import { IMAGE_JPEG, VIDEO_MP4 } from '../types/MIME';
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/LightboxGallery', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  close: action('close'),
+  i18n,
+  media: overrideProps.media || [],
+  onSave: action('onSave'),
+  selectedIndex: number('selectedIndex', overrideProps.selectedIndex || 0),
+});
+
+story.add('Image and Video', () => {
+  const props = createProps({
+    media: [
+      {
+        attachment: {
+          contentType: IMAGE_JPEG,
+          fileName: 'tina-rolf-269345-unsplash.jpg',
+          url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+          caption:
+            'Still from The Lighthouse, starring Robert Pattinson and Willem Defoe.',
+        },
+        contentType: IMAGE_JPEG,
+        index: 0,
+        message: {
+          attachments: [],
+          id: 'image-msg',
+          received_at: Date.now(),
+        },
+        objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
+      },
+      {
+        attachment: {
+          contentType: VIDEO_MP4,
+          fileName: 'pixabay-Soap-Bubble-7141.mp4',
+          url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+        },
+        contentType: VIDEO_MP4,
+        index: 1,
+        message: {
+          attachments: [],
+          id: 'video-msg',
+          received_at: Date.now(),
+        },
+        objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+      },
+    ],
+  });
+
+  return <LightboxGallery {...props} />;
+});
+
+story.add('Missing Media', () => {
+  const props = createProps({
+    media: [
+      {
+        attachment: {
+          contentType: IMAGE_JPEG,
+          fileName: 'tina-rolf-269345-unsplash.jpg',
+          url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+        },
+        contentType: IMAGE_JPEG,
+        index: 0,
+        message: {
+          attachments: [],
+          id: 'image-msg',
+          received_at: Date.now(),
+        },
+        objectURL: undefined,
+      },
+    ],
+  });
+
+  return <LightboxGallery {...props} />;
+});

ts/components/LightboxGallery.tsx

@@ -19,7 +19,7 @@ export interface MediaItemType {
   message: Message;
 }
 
-interface Props {
+export interface Props {
   close: () => void;
   i18n: LocalizerType;
   media: Array<MediaItemType>;
@@ -60,7 +60,8 @@ export class LightboxGallery extends React.Component<Props, State> {
       selectedIndex > firstIndex ? this.handlePrevious : undefined;
     const onNext = selectedIndex < lastIndex ? this.handleNext : undefined;
 
-    const objectURL = selectedMedia.objectURL || 'images/alert-outline.svg';
+    const objectURL =
+      selectedMedia.objectURL || 'images/full-screen-flow/alert-outline.svg';
     const { attachment } = selectedMedia;
 
     const saveCallback = onSave ? this.handleSave : undefined;