From ac28f9f13c5f9b9201d25bc5d09c5ac94df93f6a Mon Sep 17 00:00:00 2001
From: Chris Svenningsen <chris@carbonfive.com>
Date: Fri, 21 Aug 2020 09:28:26 -0700
Subject: [PATCH] Migrate ExpireTimer to Storybook

---
 ts/components/conversation/ExpireTimer.md     | 222 ------------------
 .../conversation/ExpireTimer.stories.tsx      | 109 +++++++++
 ts/components/conversation/ExpireTimer.tsx    |   2 +-
 3 files changed, 110 insertions(+), 223 deletions(-)
 delete mode 100644 ts/components/conversation/ExpireTimer.md
 create mode 100644 ts/components/conversation/ExpireTimer.stories.tsx

diff --git a/ts/components/conversation/ExpireTimer.md b/ts/components/conversation/ExpireTimer.md
deleted file mode 100644
index 3ec7a4439..000000000
--- a/ts/components/conversation/ExpireTimer.md
+++ /dev/null
@@ -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>
-```
diff --git a/ts/components/conversation/ExpireTimer.stories.tsx b/ts/components/conversation/ExpireTimer.stories.tsx
new file mode 100644
index 000000000..0a7c478e3
--- /dev/null
+++ b/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} />;
+});
diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx
index bc75d6671..013445232 100644
--- a/ts/components/conversation/ExpireTimer.tsx
+++ b/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;