Migrate Caption Editor to Storybook

ts/components/CaptionEditor.md

@@ -1,76 +0,0 @@
-## Image
-
-```js
-let caption = null;
-
-<div style={{ position: 'relative', width: '100%', height: 500 }}>
-  <CaptionEditor
-    url={util.gifObjectUrl}
-    attachment={{
-      contentType: 'image/jpeg',
-    }}
-    onSave={caption => console.log('onSave', caption)}
-    close={() => console.log('close')}
-    i18n={util.i18n}
-  />
-</div>;
-```
-
-## Image with caption
-
-```js
-let caption =
-  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";
-
-<div style={{ position: 'relative', width: '100%', height: 500 }}>
-  <CaptionEditor
-    url="https://placekitten.com/800/600"
-    attachment={{
-      contentType: 'image/jpeg',
-    }}
-    caption={caption}
-    contentType="image/jpeg"
-    onSave={caption => console.log('onSave', caption)}
-    close={() => console.log('close')}
-    i18n={util.i18n}
-  />
-</div>;
-```
-
-## Video
-
-```js
-let caption = null;
-
-<div style={{ position: 'relative', width: '100%', height: 500 }}>
-  <CaptionEditor
-    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
-    attachment={{
-      contentType: 'video/mp4',
-    }}
-    onSave={caption => console.log('onSave', caption)}
-    close={() => console.log('close')}
-    i18n={util.i18n}
-  />
-</div>;
-```
-
-## Video with caption
-
-```js
-let caption =
-  "This is the user-provided caption. We show it overlaid on the image. If it's really long, then it wraps, but it doesn't get too close to the edges of the image.";
-
-<div style={{ position: 'relative', width: '100%', height: 500 }}>
-  <CaptionEditor
-    url="fixtures/pixabay-Soap-Bubble-7141.mp4"
-    attachment={{
-      contentType: 'video/mp4',
-    }}
-    caption={caption}
-    onSave={caption => console.log('onSave', caption)}
-    close={() => console.log('close')}
-    i18n={util.i18n}
-  />
-</div>;
-```

ts/components/CaptionEditor.stories.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+import { CaptionEditor, Props } from './CaptionEditor';
+import { AUDIO_MP3, IMAGE_JPEG, 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 stories = storiesOf('Components/Caption Editor', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  attachment: {
+    contentType: IMAGE_JPEG,
+    fileName: '',
+    url: '',
+    ...overrideProps.attachment,
+  },
+  caption: text('caption', overrideProps.caption || ''),
+  close: action('close'),
+  i18n,
+  onSave: action('onSave'),
+  url: text('url', overrideProps.url || ''),
+});
+
+stories.add('Image', () => {
+  const props = createProps({
+    url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+  });
+
+  return <CaptionEditor {...props} />;
+});
+
+stories.add('Image with Caption', () => {
+  const props = createProps({
+    caption:
+      'This is the user-provided caption. We show it overlaid on the image. If it is really long, then it wraps, but it does not get too close to the edges of the image.',
+    url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+  });
+
+  return <CaptionEditor {...props} />;
+});
+
+stories.add('Video', () => {
+  const props = createProps({
+    attachment: {
+      contentType: VIDEO_MP4,
+      fileName: 'pixabay-Soap-Bubble-7141.mp4',
+      url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+    },
+    url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+  });
+
+  return <CaptionEditor {...props} />;
+});
+
+stories.add('Video with Caption', () => {
+  const props = createProps({
+    attachment: {
+      contentType: VIDEO_MP4,
+      fileName: 'pixabay-Soap-Bubble-7141.mp4',
+      url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+    },
+    caption:
+      'This is the user-provided caption. We show it overlaid on the image. If it is really long, then it wraps, but it does not get too close to the edges of the image.',
+    url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+  });
+
+  return <CaptionEditor {...props} />;
+});
+
+stories.add('Unsupported Attachment Type', () => {
+  const props = createProps({
+    attachment: {
+      contentType: AUDIO_MP3,
+      fileName: 'incompetech-com-Agnus-Dei-X.mp3',
+      url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+    },
+    url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+  });
+
+  return <CaptionEditor {...props} />;
+});

ts/components/CaptionEditor.tsx

@@ -7,7 +7,7 @@ import { AttachmentType } from '../types/Attachment';
 
 import { LocalizerType } from '../types/Util';
 
-interface Props {
+export interface Props {
   attachment: AttachmentType;
   i18n: LocalizerType;
   url: string;