From 15c7e9bf72801d0231ec803b4fad426dfe2c9676 Mon Sep 17 00:00:00 2001
From: Sidney Keese <me@sidke.com>
Date: Wed, 26 Aug 2020 14:08:22 -0700
Subject: [PATCH] Migrate Timestamp to Storybook

Co-authored-by: Chris Svenningsen <chris@carbonfive.com>
---
 ts/components/conversation/Timestamp.md       | 235 ------------------
 .../conversation/Timestamp.stories.tsx        | 105 ++++++++
 ts/components/conversation/Timestamp.tsx      |   2 +-
 3 files changed, 106 insertions(+), 236 deletions(-)
 delete mode 100644 ts/components/conversation/Timestamp.md
 create mode 100644 ts/components/conversation/Timestamp.stories.tsx

diff --git a/ts/components/conversation/Timestamp.md b/ts/components/conversation/Timestamp.md
deleted file mode 100644
index 3bba53a1c979..000000000000
--- a/ts/components/conversation/Timestamp.md
+++ /dev/null
@@ -1,235 +0,0 @@
-### All major transitions: Extended
-
-```jsx
-function get1201() {
-  const d = new Date();
-  d.setHours(0, 0, 1, 0);
-  return d.getTime();
-}
-function getYesterday1159() {
-  return get1201() - 2 * 60 * 1000;
-}
-function getJanuary1201() {
-  const now = new Date();
-  const d = new Date(now.getFullYear(), 0, 1, 0, 1);
-  return d.getTime();
-}
-function getDecember1159() {
-  return getJanuary1201() - 2 * 60 * 1000;
-}
-
-<div>
-  <div>
-    {"500ms ago - all below 1 minute are 'now' -- "}
-    <Timestamp extended={true} timestamp={Date.now() - 500} i18n={util.i18n} />
-  </div>
-  <div>
-    {'Five seconds ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 5 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'30 seconds ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 30 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'One minute ago - in minutes -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'30 minutes ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 30 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'45 minutes ago (used to round up to 1 hour with moment) -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 45 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'One hour ago - in hours -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'12:01am today -- '}
-    <Timestamp extended={true} timestamp={get1201()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'11:59pm yesterday - adds day name -- '}
-    <Timestamp
-      extended={true}
-      timestamp={getYesterday1159()}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'24 hours ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'Two days ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'Seven days ago - adds month -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'Thirty days ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'January 1st at 12:01am -- '}
-    <Timestamp extended={true} timestamp={getJanuary1201()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'December 31st at 11:59pm - adds year -- '}
-    <Timestamp extended={true} timestamp={getDecember1159()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'One year ago -- '}
-    <Timestamp
-      extended={true}
-      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-</div>;
-```
-
-### All major transitions: Normal
-
-```jsx
-function get1201() {
-  const d = new Date();
-  d.setHours(0, 0, 1, 0);
-  return d.getTime();
-}
-function getYesterday1159() {
-  return get1201() - 2 * 60 * 1000;
-}
-function getJanuary1201() {
-  const now = new Date();
-  const d = new Date(now.getFullYear(), 0, 1, 0, 1);
-  return d.getTime();
-}
-function getDecember1159() {
-  return getJanuary1201() - 2 * 60 * 1000;
-}
-
-<div>
-  <div>
-    {"500ms ago - all below 1 minute are 'now' -- "}
-    <Timestamp timestamp={Date.now() - 500} i18n={util.i18n} />
-  </div>
-  <div>
-    {'Five seconds ago -- '}
-    <Timestamp timestamp={Date.now() - 5 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'30 seconds ago -- '}
-    <Timestamp timestamp={Date.now() - 30 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'One minute ago - in minutes -- '}
-    <Timestamp timestamp={Date.now() - 60 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'30 minutes ago -- '}
-    <Timestamp timestamp={Date.now() - 30 * 60 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'45 minutes ago (used to round up to 1 hour with moment) -- '}
-    <Timestamp timestamp={Date.now() - 45 * 60 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'One hour ago - in hours -- '}
-    <Timestamp timestamp={Date.now() - 60 * 60 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'12:01am today -- '}
-    <Timestamp timestamp={get1201()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'11:59pm yesterday - adds day name -- '}
-    <Timestamp timestamp={getYesterday1159()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'24 hours ago -- '}
-    <Timestamp timestamp={Date.now() - 24 * 60 * 60 * 1000} i18n={util.i18n} />
-  </div>
-  <div>
-    {'Two days ago -- '}
-    <Timestamp
-      timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'Seven days ago - adds month -- '}
-    <Timestamp
-      timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'Thirty days ago -- '}
-    <Timestamp
-      timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-  <div>
-    {'January 1st at 12:01am -- '}
-    <Timestamp timestamp={getJanuary1201()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'December 31st at 11:59pm - adds year -- '}
-    <Timestamp timestamp={getDecember1159()} i18n={util.i18n} />
-  </div>
-  <div>
-    {'One year ago -- '}
-    <Timestamp
-      timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
-      i18n={util.i18n}
-    />
-  </div>
-</div>;
-```
diff --git a/ts/components/conversation/Timestamp.stories.tsx b/ts/components/conversation/Timestamp.stories.tsx
new file mode 100644
index 000000000000..d965afedd2e6
--- /dev/null
+++ b/ts/components/conversation/Timestamp.stories.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, date, select, text } from '@storybook/addon-knobs';
+
+// @ts-ignore
+import { setup as setupI18n } from '../../../js/modules/i18n';
+
+// @ts-ignore
+import enMessages from '../../../_locales/en/messages.json';
+
+import { Props, Timestamp } from './Timestamp';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Conversation/Timestamp', module);
+
+const now = Date.now;
+const seconds = (n: number) => n * 1000;
+const minutes = (n: number) => 60 * seconds(n);
+const hours = (n: number) => 60 * minutes(n);
+const days = (n: number) => 24 * hours(n);
+
+const get1201 = () => {
+  const d = new Date();
+  d.setHours(0, 1, 0, 0);
+  return d.getTime();
+};
+
+const getJanuary1201 = () => {
+  const d = new Date();
+  d.setHours(0, 1, 0, 0);
+  d.setMonth(0);
+  d.setDate(1);
+  return d.getTime();
+};
+
+const times = (): Array<[string, number]> => [
+  ['500ms ago', now() - seconds(0.5)],
+  ['30s ago', now() - seconds(30)],
+  ['1m ago', now() - minutes(1)],
+  ['30m ago', now() - minutes(30)],
+  ['45m ago', now() - minutes(45)],
+  ['1h ago', now() - hours(1)],
+  ['12:01am today', get1201()],
+  ['11:59pm yesterday', get1201() - minutes(2)],
+  ['24h ago', now() - hours(24)],
+  ['2d ago', now() - days(2)],
+  ['7d ago', now() - days(7)],
+  ['30d ago', now() - days(30)],
+  ['January 1st this year, 12:01am ', getJanuary1201()],
+  ['December 31st last year, 11:59pm', getJanuary1201() - minutes(2)],
+  ['366d ago', now() - days(366)],
+];
+
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  i18n,
+  timestamp: overrideProps.timestamp,
+  extended: boolean('extended', overrideProps.extended || false),
+  module: text('module', ''),
+  withImageNoCaption: boolean('withImageNoCaption', false),
+  withSticker: boolean('withSticker', false),
+  withTapToViewExpired: boolean('withTapToViewExpired', false),
+  direction:
+    select(
+      'direction',
+      { none: '', incoming: 'incoming', outgoing: 'outgoing' },
+      ''
+    ) || undefined,
+});
+
+const createTable = (overrideProps: Partial<Props> = {}) => (
+  <table cellPadding={5}>
+    <tr>
+      <th>Description</th>
+      <th>Timestamp</th>
+    </tr>
+    {times().map(([description, timestamp]) => (
+      <tr key={timestamp}>
+        <td>{description}</td>
+        <td>
+          <Timestamp
+            key={timestamp}
+            {...createProps({ ...overrideProps, timestamp })}
+          />
+        </td>
+      </tr>
+    ))}
+  </table>
+);
+
+story.add('Normal', () => {
+  return createTable();
+});
+
+story.add('Extended', () => {
+  return createTable({ extended: true });
+});
+
+story.add('Knobs', () => {
+  const props = createProps({
+    timestamp: date('timestamp', new Date()),
+  });
+
+  return <Timestamp {...props} />;
+});
diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx
index 8abe5bd24670..ed72cfd54da6 100644
--- a/ts/components/conversation/Timestamp.tsx
+++ b/ts/components/conversation/Timestamp.tsx
@@ -6,7 +6,7 @@ import { formatRelativeTime } from '../../util/formatRelativeTime';
 
 import { LocalizerType } from '../../types/Util';
 
-interface Props {
+export interface Props {
   timestamp?: number;
   extended?: boolean;
   module?: string;