feat(lib): Styled components

.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["es2015", "react"],
-  "plugins": ["transform-object-rest-spread"]
+  "presets": ["latest", "react"]
 }

package.json

@@ -44,24 +44,21 @@
     "globals": []
   },
   "dependencies": {
-    "aphrodite": "^1.1.0",
     "fastclick": "^1.0.6",
     "normalize.css": "^5.0.0",
     "react": "^15.2.0",
     "react-dom": "^15.2.0",
     "react-router": "^3.0.1",
-    "styled-components": "^1.3.0",
-    "tachyons": "^4.0.1"
+    "reflexbox": "^2.2.3",
+    "styled-components": "^1.3.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.3.7",
     "ava": "^0.17.0",
     "babel-cli": "^6.10.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-polyfill": "^6.9.1",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-latest": "^6.16.0",
     "babel-preset-react": "^6.11.1",
     "commitizen": "^2.8.2",
     "conventional-changelog-cli": "^1.2.0",

src/colors.js

@@ -1,5 +1,6 @@
 export default {
-  blue: '#0074d9',
-  red: '#ff4136',
-  green: '#2ecc40'
+  black: 'rgba(0,0,0,.7)',
+  green: '#2ecc40',
+  blue: '#0074D9',
+  grey: 'rgba(0,0,0,.4)'
 }

src/components/App.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React, {PropTypes} from 'react'
+import {injectGlobal} from 'styled-components'
 
 const App = ({children}) =>
   <div>{children}</div>
@@ -7,4 +8,14 @@ App.propTypes = {
   children: PropTypes.object.isRequired
 }
 
+injectGlobal`
+  ul {
+    list-style: none
+    padding: 0
+  }
+
+  #root {
+    height: 100%
+  }
+`
 export default App

src/components/Button.js

@@ -1,8 +1,13 @@
-import styled from 'styled-components'
+import s from 'styled-components'
+import colors from '../colors'
 
-const Button = styled.button`
+const Button = s.button`
   border: none
+  color: white
   padding: 1em
+  border-radius: 3px
+  cursor: pointer
+  background-color: ${colors.blue}
 `
 
 export default Button

src/components/Counter.js

@@ -1,7 +1,12 @@
-import React, { PropTypes, Component } from 'react'
+import React, {PropTypes, Component} from 'react'
+import s from 'styled-components'
 import Button from './Button'
 import colors from '../colors'
 
+const Wrapper = s.div`
+  color: ${colors.green}
+`
+
 class Counter extends Component {
 
   increment (text, e) {
@@ -15,13 +20,11 @@ class Counter extends Component {
     const boundClick = this.increment.bind(this, 'clicking')
 
     return (
-      <div>
+      <Wrapper>
         <h1>Count: {count}</h1>
         <p>Click the button to increment the counter</p>
-        <Button onClick={boundClick}>
-          Increment
-        </Button>
-      </div>
+        <Button onClick={boundClick}>Increment</Button>
+      </Wrapper>
     )
   }
 }

src/components/Home.js

@@ -1,16 +1,32 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
+import {Box, Flex} from 'reflexbox'
+import s from 'styled-components'
 import Counter from '../components/Counter'
 import {
   version,
   dependencies,
   homepage,
   devDependencies
 } from '../../package.json'
+import colors from '../colors'
+
+const Wrapper = s(Box)`
+  color: ${colors.black}
+  text-align: center
+`
+
+const Column = s(Box)`
+  color: ${colors.grey}
+`
+const Container = s(Flex)`
+  width: 60%
+  margin: 0 auto
+`
 
 class Home extends Component {
+
   constructor () {
     super()
-    this.increment = this.increment.bind(this)
     this.state = {
       counter: 0
     }
@@ -25,10 +41,6 @@ class Home extends Component {
     })
   }
 
-  getVersion () {
-    return version
-  }
-
   render () {
     const {counter} = this.state
     const deps = Object.keys(dependencies)
@@ -37,7 +49,7 @@ class Home extends Component {
       .map((dep, i) => <li key={i + 10}><b>{dep}</b> : {devDependencies[dep]}</li>)
 
     return (
-      <section className='center w-60 tc cf'>
+      <Wrapper>
         <div>
           <h1>
             <a href={homepage}>react-kickstart</a>
@@ -50,19 +62,21 @@ class Home extends Component {
           </p>
           <Counter
             count={counter}
-            onIncrement={this.increment}
+            onIncrement={() => this.increment()}
           />
           <h3>Powered by:</h3>
-          <div className='fl w-50'>
-            <h4> DEPENDENCIES:</h4>
-            <ul>{deps}</ul>
-          </div>
-          <div className='fl w-50'>
-            <h4> DEV-DEPENDENCIES:</h4>
-            <ul>{devDeps}</ul>
-          </div>
+          <Container wrap>
+            <Column sm={12} md={6}>
+              <h4> DEPENDENCIES:</h4>
+              <ul>{deps}</ul>
+            </Column>
+            <Column sm={12} md={6}>
+              <h4> DEV-DEPENDENCIES:</h4>
+              <ul>{devDeps}</ul>
+            </Column>
+          </Container>
         </div>
-      </section>
+      </Wrapper>
     )
   }
 }

src/components/Root.js

@@ -1,6 +1,5 @@
-import '../globals.css'
 import React from 'react'
-import { Router, browserHistory, hashHistory } from 'react-router'
+import {Router, browserHistory, hashHistory} from 'react-router'
 import routes from '../routes'
 const history = window.location.hostname === 'vesparny.github.io'
   ? hashHistory // for GitHub pages

src/index.tpl.html

@@ -9,6 +9,5 @@
   </head>
   <body>
     <div id="root"></div>
-    <a href="https://github.com/vesparny/react-kickstart" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
   </body>
 </html>

src/main.js

@@ -1,6 +1,5 @@
 import 'babel-polyfill'
 import 'normalize.css/normalize.css'
-import 'tachyons'
 
 import React from 'react'
 import ReactDOM from 'react-dom'