adding Layout and Dashboard (#241)

unlock-app/package.json

@@ -22,8 +22,9 @@
     "web3-utils": "^1.0.0-beta.34"
   },
   "devDependencies": {
-    "@svgr/cli": "^2.3.0",
+    "@storybook/addon-jest": "^3.4.10",
     "@storybook/react": "^3.4.10",
+    "@svgr/cli": "^2.3.0",
     "babel-core": "^6.26.3",
     "enzyme": "^3.4.0",
     "enzyme-adapter-react-16": "^1.2.0",

unlock-app/src/components/creator/Dashboard.js

@@ -0,0 +1,20 @@
+import UnlockPropTypes from '../../propTypes'
+
+import React, { Component } from 'react'
+import Layout from '../interface/Layout'
+import CreatorAccount from './CreatorAccount'
+
+export default class Dashboard extends Component {
+  render() {
+    return (
+      <Layout title="Creator Dashboard">
+        <CreatorAccount network={this.props.network} account={this.props.account} />
+      </Layout>
+    )
+  }
+}
+
+Dashboard.propTypes = {
+  account: UnlockPropTypes.account,
+  network: UnlockPropTypes.network,
+}

unlock-app/src/components/interface/Header.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import styled from 'styled-components'
 import Icons from './icons'
@@ -6,21 +7,29 @@ export default class Header extends Component {
   render() {
     return (
       <TopHeader>
-        <h1>Creator Dashboard</h1>
-        <a><Icons.About /></a>
-        <a><Icons.Jobs /></a>
-        <a><Icons.Github /></a>
+        <h1>{this.props.title}</h1>
+        <Button><Icons.About /></Button>
+        <Button><Icons.Jobs /></Button>
+        <Button><Icons.Github /></Button>
       </TopHeader>
     )
   }
 }
 
+Header.propTypes = {
+  title: PropTypes.string,
+}
+
 const TopHeader = styled.header`
   display: grid;
   grid-gap: 16px;
   grid-template-columns: 1fr;
   grid-auto-flow: column;
   align-items: center;
-  height: 72px;
   font-size: 24px;
 `
+
+const Button = styled.a`
+  display: grid;
+  align-items: center;
+`

unlock-app/src/components/interface/Layout.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import Header from './Header'
+import Unlock from './icons/Unlock'
+
+export default class Layout extends Component {
+  render() {
+    return (
+      <Container>
+        <Left>
+          <Unlock />
+        </Left>
+        <Content>
+          <Header title={this.props.title} />
+          {this.props.children}
+        </Content>
+        <Right />
+      </Container>
+    )
+  }
+}
+
+Layout.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.Component,
+}
+
+const Container = styled.div`
+  display: grid;
+  padding: 16px;
+  grid-template-columns: 1fr minmax(300px, 65%) 1fr;
+`
+
+const Left = styled.div`
+  display: grid;
+  font-size: 56px;
+  align-items: top;
+`
+
+const Right = styled.div`
+`
+
+const Content = styled.div`
+  display: grid;
+  row-gap: 20px;
+`

unlock-app/src/stories/creator/Dashboard.stories.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Dashboard from '../../components/creator/Dashboard'
+
+storiesOf('Dashboard')
+  .add('the dashboard', () => {
+    const account = {
+      address: '0x3ca206264762caf81a8f0a843bbb850987b41e16',
+    }
+    const network = {
+      name: 4,
+    }
+    return (
+      <Dashboard network={network} account={account} />
+    )
+  })

unlock-app/src/stories/interface/Header.stories.js

@@ -3,8 +3,13 @@ import { storiesOf } from '@storybook/react'
 import Header from '../../components/interface/Header'
 
 storiesOf('Header')
-  .add('the header', () => {
+  .add('the header without a title', () => {
     return (
       <Header />
     )
   })
+  .add('the header with a title', () => {
+    return (
+      <Header title="Roses are red" />
+    )
+  })

unlock-app/src/stories/interface/Layout.stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Layout from '../../components/interface/Layout'
+
+storiesOf('Layout')
+  .add('the layout', () => {
+    return (
+      <Layout title="The story of Unlock" />
+    )
+  })