Migrate ExpireTimer to Storybook

ts/components/conversation/ExpireTimer.md

@@ -1,222 +0,0 @@
-### Countdown at different rates
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="10 second timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 10 * 1000}
-      expirationLength={10 * 1000}
-      expirationTimestamp={Date.now() + 10 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      direction="outgoing"
-      status="delivered"
-      authorColor="blue"
-      text="30 second timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 30 * 1000}
-      expirationLength={30 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="1 minute timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 55 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 55 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="5 minute timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 5 * 60 * 1000}
-      expirationLength={5 * 60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 60 * 1000}
-    />
-  </div>
-</util.ConversationContext>
-```
-
-### Timer calculations
-
-```jsx
-<util.ConversationContext theme={util.theme} ios={util.ios}>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="Full timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 60 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 60 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="Full timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 60 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 60 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="55 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 55 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 55 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="55 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 55 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 55 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="30 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 30 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="30 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 30 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 30 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="5 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 5 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="5 timer"
-      i18n={util.i18n}
-      timestamp={Date.now() + 5 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 5 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="Expired timer"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now()}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="Expired timer"
-      i18n={util.i18n}
-      timestamp={Date.now()}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now()}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="Expiration is too far away"
-      i18n={util.i18n}
-      timestamp={Date.now() + 120 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 120 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="Expiration is too far away"
-      i18n={util.i18n}
-      timestamp={Date.now() + 120 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() + 120 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="incoming"
-      text="Already expired"
-      i18n={util.i18n}
-      timestamp={Date.now() - 20 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() - 20 * 1000}
-    />
-  </div>
-  <div className="module-message-container">
-    <Message
-      authorColor="blue"
-      direction="outgoing"
-      status="delivered"
-      text="Already expired"
-      i18n={util.i18n}
-      timestamp={Date.now() - 20 * 1000}
-      expirationLength={60 * 1000}
-      expirationTimestamp={Date.now() - 20 * 1000}
-    />
-  </div>
-</util.ConversationContext>
-```

ts/components/conversation/ExpireTimer.stories.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+
+import { boolean, number } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { ExpireTimer, Props } from './ExpireTimer';
+
+const story = storiesOf('Components/Conversation/ExpireTimer', module);
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  direction: overrideProps.direction || 'outgoing',
+  expirationLength: number(
+    'expirationLength',
+    overrideProps.expirationLength || 30 * 1000
+  ),
+  expirationTimestamp: number(
+    'expirationTimestamp',
+    overrideProps.expirationTimestamp || Date.now() + 30 * 1000
+  ),
+  withImageNoCaption: boolean(
+    'withImageNoCaption',
+    overrideProps.withImageNoCaption || false
+  ),
+  withSticker: boolean('withSticker', overrideProps.withSticker || false),
+  withTapToViewExpired: boolean(
+    'withTapToViewExpired',
+    overrideProps.withTapToViewExpired || false
+  ),
+});
+
+story.add('30 seconds', () => {
+  const props = createProps();
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('2 minutes', () => {
+  const twoMinutes = 60 * 1000 * 2;
+  const props = createProps({
+    expirationTimestamp: Date.now() + twoMinutes,
+    expirationLength: twoMinutes,
+  });
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('In Progress', () => {
+  const props = createProps({
+    expirationTimestamp: Date.now() + 15 * 1000,
+  });
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('Expired', () => {
+  const props = createProps({
+    expirationTimestamp: Date.now() - 30 * 1000,
+  });
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('Sticker', () => {
+  const props = createProps({
+    withSticker: true,
+  });
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('Tap To View Expired', () => {
+  const props = createProps({
+    withTapToViewExpired: true,
+  });
+
+  return <ExpireTimer {...props} />;
+});
+
+story.add('Image No Caption', () => {
+  const props = createProps({
+    withImageNoCaption: true,
+  });
+
+  return (
+    <div style={{ backgroundColor: 'darkgreen' }}>
+      <ExpireTimer {...props} />
+    </div>
+  );
+});
+
+story.add('Incoming', () => {
+  const props = createProps({
+    direction: 'incoming',
+  });
+
+  return (
+    <div style={{ backgroundColor: 'darkgreen' }}>
+      <ExpireTimer {...props} />
+    </div>
+  );
+});
+
+story.add('Expiration Too Far Out', () => {
+  const props = createProps({
+    expirationTimestamp: Date.now() + 150 * 1000,
+  });
+
+  return <ExpireTimer {...props} />;
+});

ts/components/conversation/ExpireTimer.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { getIncrement, getTimerBucket } from '../../util/timer';
 
-interface Props {
+export interface Props {
   withImageNoCaption?: boolean;
   withSticker?: boolean;
   withTapToViewExpired?: boolean;