add storybook, finish converting card header to react component

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../client/src/', true, /\.stories\.js$/);
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,9 @@
+const webpackConfig = require('../.webpack/config');
+
+module.exports = (storybookBaseConfig) => {
+  storybookBaseConfig.resolve.alias = { ...webpackConfig.resolve.alias };
+  storybookBaseConfig.resolve.extensions.push('.ts', '.tsx');
+  storybookBaseConfig.module.rules[0].test = /\.(jsx?|tsx?)$/;
+
+  return storybookBaseConfig;
+};

.webpack/config.js

@@ -87,7 +87,8 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
     alias: {
-      src: rootPath + '/client/src',
+      src: `${rootPath}/client/src`,
+      lib: `${rootPath}/lib`,
     }
   },
 }

client/src/components/card/card.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { host } from 'storybook-host';
+import { storiesOf } from '@storybook/react';
+import StoryRouter from 'storybook-react-router';
+
+import CardHeader from 'src/components/card/header';
+
+import { black } from 'src/theme/colors';
+
+const user = {
+  username: 'testuser',
+  score: .986437,
+  counted: 68,
+  pending: 1,
+};
+
+storiesOf('Card', module)
+  .addDecorator(
+    host({
+      align: 'top',
+      backdrop: black,
+      width: '50vw',
+    }),
+  )
+  .addDecorator(StoryRouter())
+  .add('Header', () => (<CardHeader {...user} />));

client/src/components/card/header.tsx

@@ -1,20 +1,70 @@
+import * as _ from 'lodash';
 import * as React from 'react';
+import styled from 'styled-components';
 
-const CardHeader = () => (
-  <div className='promise-header'>
-    <h2 className='promise-user'>
-      <a href='{userPath user}'>
-        { promise.user.username }
-      </a>
-    </h2>
-    <div className='promise-user-score {scoreColor promise.user.score}'>
-      <span>{ prettyPercent promise.user.score 2}</span>
-    </div>
-    <div className='counted-promises'>
-      { promise.user.counted }
-      <span className='pending' >[+{ promise.user.pending }]</span>
-    </div>
-  </div>
+import StyledLink from 'src/components/styled/link';
+
+import { scoreColor } from 'lib/helpers/colors';
+import { prettyPercent } from 'lib/helpers/format';
+
+import { grayBlue, lightGray } from 'src/theme/colors';
+
+const HeaderWrapper = styled.div`
+  background-color: ${grayBlue};
+  padding: .75rem 1rem;
+  position: relative;
+`;
+
+const UserHeading = styled.h2`
+  letter-spacing: .05rem;
+  margin: 0;
+  text-transform: capitalize;
+`;
+
+const UserScore = styled.div`
+  color: ${({ score }) => scoreColor(score)};
+  font-size: 1.25rem;
+  letter-spacing: .025rem;
+  opacity: .85;
+`;
+
+const UserCounted = styled.div`
+  font-weight: bold;
+  color: ${lightGray};
+  letter-spacing: .05rem;
+  line-height: .85em;
+`;
+
+const UserPending = styled.span`
+  font-size: 75%;
+  font-weight: 300;
+  vertical-align: text-top;
+`;
+
+interface ICardHeaderProps {
+  counted: number;
+  pending: number;
+  score: number;
+  username: string;
+}
+
+const CardHeader = ({ username, score, counted, pending }) => (
+  <HeaderWrapper>
+    <UserHeading>
+      <StyledLink to='#userPath'>
+        { username }
+      </StyledLink>
+    </UserHeading>
+    <UserScore score={score}>
+      <span>{ prettyPercent(score, 2) }</span>
+    </UserScore>
+    <UserCounted>
+      { counted }
+      <UserPending>
+        [+{ pending }]
+      </UserPending>
+    </UserCounted>
+  </HeaderWrapper>
 );
 
 export default CardHeader;

client/src/components/styled/link.tsx

@@ -0,0 +1,11 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { grayBlue, white } from 'src/theme/colors';
+
+const StyledLink = styled(Link)`
+  color: ${white};
+  text-decoration: none;
+`;
+
+export default StyledLink;

client/src/layout/elements/header.tsx

@@ -3,19 +3,14 @@ import styled from 'styled-components';
 
 import { headerBg, headerBorder } from 'src/theme/colors';
 
-interface IHeaderProps {
-  link?: string;
-  title: string;
-  showNav?: boolean;
-}
-
 const DarkHeader = styled.header`
   background-color: ${headerBg};
   border-bottom: 1px ridge ${headerBorder};
   display: flex;
   align-items: center;
   padding: .5rem 2rem;
 
+  // FIXME
   h1 {
     margin: 0 auto 0 0;
   }
@@ -26,6 +21,12 @@ const DarkHeader = styled.header`
   }
 `;
 
+interface IHeaderProps {
+  link?: string;
+  title: string;
+  showNav?: boolean;
+}
+
 const Header: React.SFC<IHeaderProps> = ({ link, title, showNav }) => (
   <DarkHeader>
     <h1>

helpers/colors.js → lib/helpers/colors.ts

@@ -1,3 +1,5 @@
+import colorList from 'src/theme/colors';
+
 const colorFromPercent = (score) => {
   let color = '';
 

lib/helpers/format.ts

@@ -0,0 +1,38 @@
+import * as _ from 'lodash'
+import moment from 'moment-timezone'
+
+export const prettyPercent = (num: number, digits: number) => {
+  if (!num) {
+    return ''
+  } else if (num === 1) {
+    return '100%'
+  }
+
+  const places = Number.isInteger(digits) ? digits : 3
+  console.log('prettyPercent', num, digits)
+  return `${_.floor(num * 100, places)}%`
+};
+
+export const prettyDate = (date) => {
+  if (!date) return ''
+  const pDate = moment(date).format('YYYY-MM-DD HH:mm:ss ddd (UTCZZ)')
+  // console.log('prettyDate', date, pDate)
+  return pDate
+}
+
+export const relativeDate = (date) => {
+  if (!date) return ''
+  const pDate = moment(date).fromNow()
+  // console.log('relativeDate', date, pDate)
+  return pDate
+}
+
+export const prettyCredit = (credit) => {
+  if (!credit) return '' // '∞' is cooler!
+  return prettyPercent(credit)
+}
+
+export const completeCredit = (credit) => {
+  if (!credit) return '100%'
+  return prettyPercent(credit, 1)
+}