From 6aeaabf505826b196d7ab6bf1ecc47590a838f3d Mon Sep 17 00:00:00 2001
From: Chris Svenningsen <chris@carbonfive.com>
Date: Thu, 20 Aug 2020 15:08:12 -0700
Subject: [PATCH] Migrate countdown to storybook

---
 ts/components/Countdown.md          | 23 ---------------
 ts/components/Countdown.stories.tsx | 44 +++++++++++++++++++++++++++++
 ts/components/Countdown.tsx         |  2 +-
 3 files changed, 45 insertions(+), 24 deletions(-)
 delete mode 100644 ts/components/Countdown.md
 create mode 100644 ts/components/Countdown.stories.tsx

diff --git a/ts/components/Countdown.md b/ts/components/Countdown.md
deleted file mode 100644
index 24a8861577..0000000000
--- a/ts/components/Countdown.md
+++ /dev/null
@@ -1,23 +0,0 @@
-#### New timer
-
-```jsx
-<div style={{ backgroundColor: 'darkgray' }}>
-  <Countdown
-    expiresAt={Date.now() + 10 * 1000}
-    duration={10 * 1000}
-    onComplete={() => console.log('onComplete - new timer')}
-  />
-</div>
-```
-
-#### Already started
-
-```jsx
-<div style={{ backgroundColor: 'darkgray' }}>
-  <Countdown
-    expiresAt={Date.now() + 10 * 1000}
-    duration={30 * 1000}
-    onComplete={() => console.log('onComplete - already started')}
-  />
-</div>
-```
diff --git a/ts/components/Countdown.stories.tsx b/ts/components/Countdown.stories.tsx
new file mode 100644
index 0000000000..03781566d4
--- /dev/null
+++ b/ts/components/Countdown.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { date, number } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+
+import { Countdown, Props } from './Countdown';
+
+const defaultDuration = 10 * 1000;
+const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  duration: number('duration', overrideProps.duration || defaultDuration),
+  expiresAt: date(
+    'expiresAt',
+    overrideProps.expiresAt
+      ? new Date(overrideProps.expiresAt)
+      : new Date(Date.now() + defaultDuration)
+  ),
+  onComplete: action('onComplete'),
+});
+
+const story = storiesOf('Components/Countdown', module);
+
+story.add('Just Started', () => {
+  const props = createProps();
+
+  return <Countdown {...props} />;
+});
+
+story.add('In Progress', () => {
+  const props = createProps({
+    duration: 3 * defaultDuration,
+    expiresAt: Date.now() + defaultDuration,
+  });
+
+  return <Countdown {...props} />;
+});
+
+story.add('Done', () => {
+  const props = createProps({
+    expiresAt: Date.now() - defaultDuration,
+  });
+
+  return <Countdown {...props} />;
+});
diff --git a/ts/components/Countdown.tsx b/ts/components/Countdown.tsx
index f624096b14..86cabe8245 100644
--- a/ts/components/Countdown.tsx
+++ b/ts/components/Countdown.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // import classNames from 'classnames';
 
-interface Props {
+export interface Props {
   duration: number;
   expiresAt: number;
   onComplete?: () => unknown;