Migrate Image to Storybook

ts/components/conversation/Image.stories.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { boolean, number, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { pngUrl } from '../../storybook/Fixtures';
+import { Image, Props } from './Image';
+import { IMAGE_PNG } 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/Image', module);
+
+// tslint:disable-next-line:cyclomatic-complexity
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  alt: text('alt', overrideProps.alt || ''),
+  attachment: overrideProps.attachment || {
+    contentType: IMAGE_PNG,
+    fileName: 'sax.png',
+    url: pngUrl,
+  },
+  blurHash: text('blurHash', overrideProps.blurHash || ''),
+  bottomOverlay: boolean('bottomOverlay', overrideProps.bottomOverlay || false),
+  closeButton: boolean('closeButton', overrideProps.closeButton || false),
+  curveBottomLeft: boolean(
+    'curveBottomLeft',
+    overrideProps.curveBottomLeft || false
+  ),
+  curveBottomRight: boolean(
+    'curveBottomRight',
+    overrideProps.curveBottomRight || false
+  ),
+  curveTopLeft: boolean('curveTopLeft', overrideProps.curveTopLeft || false),
+  curveTopRight: boolean('curveTopRight', overrideProps.curveTopRight || false),
+  darkOverlay: boolean('darkOverlay', overrideProps.darkOverlay || false),
+  height: number('height', overrideProps.height || 100),
+  i18n,
+  noBackground: boolean('noBackground', overrideProps.noBackground || false),
+  noBorder: boolean('noBorder', overrideProps.noBorder || false),
+  onClick: action('onClick'),
+  onClickClose: action('onClickClose'),
+  onError: action('onError'),
+  overlayText: text('overlayText', overrideProps.overlayText || ''),
+  playIconOverlay: boolean(
+    'playIconOverlay',
+    overrideProps.playIconOverlay || false
+  ),
+  smallCurveTopLeft: boolean(
+    'smallCurveTopLeft',
+    overrideProps.smallCurveTopLeft || false
+  ),
+  softCorners: boolean('softCorners', overrideProps.softCorners || false),
+  tabIndex: number('tabIndex', overrideProps.tabIndex || 0),
+  url: text('url', overrideProps.url || pngUrl),
+  width: number('width', overrideProps.width || 100),
+});
+
+story.add('URL with Height/Width', () => {
+  const props = createProps();
+
+  return <Image {...props} />;
+});
+
+story.add('Caption', () => {
+  const defaultProps = createProps();
+  const props = {
+    ...defaultProps,
+    attachment: {
+      ...defaultProps.attachment,
+      caption: '<Saxophone Pun>',
+    },
+  };
+
+  return <Image {...props} />;
+});
+
+story.add('Play Icon', () => {
+  const props = createProps({
+    playIconOverlay: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Close Button', () => {
+  const props = createProps({
+    closeButton: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('No Border or Background', () => {
+  const props = createProps({
+    attachment: {
+      contentType: IMAGE_PNG,
+      fileName: 'sax.png',
+      url: pngUrl,
+    },
+    noBackground: true,
+    noBorder: true,
+    url: pngUrl,
+  });
+
+  return (
+    <div style={{ backgroundColor: '#999' }}>
+      <Image {...props} />
+    </div>
+  );
+});
+
+story.add('Pending', () => {
+  const props = createProps();
+  props.attachment.pending = true;
+
+  return <Image {...props} />;
+});
+
+story.add('Curved Corners', () => {
+  const props = createProps({
+    curveBottomLeft: true,
+    curveBottomRight: true,
+    curveTopLeft: true,
+    curveTopRight: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Small Curve Top Left', () => {
+  const props = createProps({
+    smallCurveTopLeft: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Soft Corners', () => {
+  const props = createProps({
+    softCorners: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Bottom Overlay', () => {
+  const props = createProps({
+    bottomOverlay: true,
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Full Overlay with Text', () => {
+  const props = createProps({
+    darkOverlay: true,
+    overlayText: 'Honk!',
+  });
+
+  return <Image {...props} />;
+});
+
+story.add('Blurhash', () => {
+  const defaultProps = createProps();
+  const props = {
+    ...defaultProps,
+    blurHash: 'thisisafakeblurhashthatwasmadeup',
+    url: undefined as any,
+  };
+
+  return <Image {...props} />;
+});
+story.add('Missing Image', () => {
+  const defaultProps = createProps();
+  const props = {
+    ...defaultProps,
+    attachment: undefined as any,
+    url: undefined as any,
+  };
+
+  return <Image {...props} />;
+});