Migrate countdown to storybook

ts/components/Countdown.md

@@ -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>
-```

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} />;
+});

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;