From 561034bfbfac0a0f5a656c1807b14ddf281a66c7 Mon Sep 17 00:00:00 2001
From: Alessandro Arnodo <alessandro@arnodo.net>
Date: Tue, 5 Jul 2016 18:41:24 +0200
Subject: [PATCH] feat(boilerplate): adding aphrodite

---
 CONTRIBUTING.md             |  2 +-
 package.json                | 11 ++++++++++-
 src/components/Counter.js   | 16 +++++++++++++---
 src/components/Home.js      | 10 +++++-----
 src/components/Root.js      |  5 ++++-
 src/globals.css             |  3 ++-
 src/main.js                 |  2 ++
 test/components/App.spec.js |  2 +-
 8 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7db1d60..4c4a030 100644
--- a/CONTRIBUTING.md
+++ b/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:
 
diff --git a/package.json b/package.json
index ed42f70..8b8c58a 100644
--- a/package.json
+++ b/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"
+    }
   }
 }
diff --git a/src/components/Counter.js b/src/components/Counter.js
index f03783a..3ae5962 100644
--- a/src/components/Counter.js
+++ b/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
diff --git a/src/components/Home.js b/src/components/Home.js
index c06ab5c..5b03894 100644
--- a/src/components/Home.js
+++ b/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>
diff --git a/src/components/Root.js b/src/components/Root.js
index 7c07a43..0b6c10c 100644
--- a/src/components/Root.js
+++ b/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
diff --git a/src/globals.css b/src/globals.css
index 864df1e..e042f58 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,5 +1,6 @@
 ul {
-  list-style: none
+  list-style: none;
+  padding: 0;
 }
 
 #root {
diff --git a/src/main.js b/src/main.js
index 50400bc..ab04df8 100755
--- a/src/main.js
+++ b/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'
diff --git a/test/components/App.spec.js b/test/components/App.spec.js
index 4ae1848..11ed834 100644
--- a/test/components/App.spec.js
+++ b/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'