feat(boilerplate): adding aphrodite

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 ## Pull Requests
 
 **Please follow our commit message conventions** even if you're making a small change! This repository follows the
-[conventional-changelog](https://github.com/ajoslin/conventional-changelog/) standard and uses [commitizen](https://commitizen.github.io/cz-cli/) to create consistent commit messages.
+[conventional-changelog](https://github.com/ajoslin/conventional-changelog/) standard and uses [this](https://github.com/commitizen/cz-conventional-changelog) [commitizen](https://commitizen.github.io/cz-cli/) adapter to create consistent commit messages.
 
 Please do the following:
 

package.json

@@ -35,6 +35,7 @@
   "ava": {
     "babel": "inherit",
     "require": [
+      "babel-register",
       "./test/setup.js"
     ]
   },
@@ -43,11 +44,13 @@
     "globals": []
   },
   "dependencies": {
+    "aphrodite": "^0.4.0",
     "fastclick": "^1.0.6",
     "normalize.css": "^4.2.0",
     "react": "^15.2.0",
     "react-dom": "^15.2.0",
-    "react-router": "^2.5.2"
+    "react-router": "^2.5.2",
+    "tachyons": "^4.0.0-beta.35"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.7",
@@ -63,6 +66,7 @@
     "conventional-changelog-cli": "^1.2.0",
     "cross-env": "^1.0.8",
     "css-loader": "^0.23.1",
+    "cz-conventional-changelog": "^1.1.6",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.22.0",
@@ -81,5 +85,10 @@
     "webpack-dev-middleware": "^1.6.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-hot-middleware": "^2.12.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
   }
 }

src/components/Counter.js

@@ -1,6 +1,14 @@
 import React, { PropTypes, Component } from 'react'
+import {StyleSheet, css} from 'aphrodite'
+import colors from '../colors'
+
+const styles = StyleSheet.create({
+  counter: {color: colors.green},
+  button: {border: 'none', padding: '1em'}
+})
+
+class Counter extends Component {
 
-export default class Counter extends Component {
   increment (text, e) {
     // maybe I'd like to do something here
     // for the moment I just call the callback passed from the parent
@@ -12,10 +20,10 @@ export default class Counter extends Component {
     const boundClick = this.increment.bind(this, 'clicking')
 
     return (
-      <div className>
+      <div className={css(styles.counter)}>
         <h1>Count: {count}</h1>
         <p>Click the button to increment the counter</p>
-        <button className onClick={boundClick}>
+        <button className={css(styles.button)} onClick={boundClick}>
           Increment
         </button>
       </div>
@@ -27,3 +35,5 @@ Counter.propTypes = {
   count: PropTypes.number.isRequired,
   onIncrement: PropTypes.func.isRequired
 }
+
+export default Counter

src/components/Home.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
 import Counter from '../components/Counter'
 import {
   version,
@@ -34,10 +34,10 @@ class Home extends Component {
       .map((dep, i) => <li key={i + 10}><b>{dep}</b> : {devDependencies[dep]}</li>)
 
     return (
-      <section className>
+      <section className='center w-60 tc cf'>
         <div>
           <h1>
-            <a href={homepage}>react-kaaaickstart</a>
+            <a href={homepage}>react-kickstart</a>
           </h1>
           <h2 className>version {version}</h2>
           With  💙 by <a href='https://twitter.com/vesparny'>@vesparny</a>
@@ -50,11 +50,11 @@ class Home extends Component {
             onIncrement={this.increment}
           />
           <h3>Powered by:</h3>
-          <div className>
+          <div className='fl w-50'>
             <h4> DEPENDENCIES:</h4>
             <ul>{deps}</ul>
           </div>
-          <div className>
+          <div className='fl w-50'>
             <h4> DEV-DEPENDENCIES:</h4>
             <ul>{devDeps}</ul>
           </div>

src/components/Root.js

@@ -1,7 +1,10 @@
 import '../globals.css'
 import React from 'react'
-import { Router, browserHistory as history } from 'react-router'
+import { Router, browserHistory, hashHistory } from 'react-router'
 import routes from '../routes'
+const history = window.location.pathname === 'vesparny.github.io'
+  ? hashHistory // for GitHub pages
+  : browserHistory
 
 const Root = () =>
   <Router

src/globals.css

@@ -1,5 +1,6 @@
 ul {
-  list-style: none
+  list-style: none;
+  padding: 0;
 }
 
 #root {

src/main.js

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

test/components/App.spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import App from '../../src/containers/App'
+import App from '../../src/components/App'
 import * as utils from '../utils'
 import TestUtils from 'react-addons-test-utils'
 import test from 'ava'