Add default setup for react-toolbox and themr

app/templates/.eslintrc.json

@@ -8,7 +8,11 @@
     "import/resolver": "webpack"
   },
   "rules": {
-    "import/extensions": ["warn", "never", { "scss": "always" }]
+    "import/extensions": ["warn", "never", { "scss": "always" }],
+    "import/no-named-as-default": "off",
+    "react/no-set-state": "off",
+    "no-invalid-this": "off",
+    "no-underscore-dangle": "off"
   },
   "env": {
     "jest": true

app/templates/client/index.js

@@ -2,7 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { ApolloProvider } from 'react-apollo'
 import { BrowserRouter } from 'react-router'
-import 'normalize.css'
+import { ThemeProvider } from 'react-css-themr'
+
+import './styles/commons.scss'
+import theme from './styles/theme'
 
 import App from './modules/app/components/App'
 import { apolloClient, configureStore } from './base'
@@ -15,9 +18,11 @@ ReactDOM.render(<Root currentApp={App} />, rootEl)
 function Root({ currentApp }) {
   return (
     <ApolloProvider store={store} client={apolloClient}>
-      <BrowserRouter>
-        {React.createElement(currentApp)}
-      </BrowserRouter>
+      <ThemeProvider theme={theme}>
+        <BrowserRouter>
+          {React.createElement(currentApp)}
+        </BrowserRouter>
+      </ThemeProvider>
     </ApolloProvider>
   )
 }

app/templates/client/modules/app/components/App/__tests__/App-test.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { App } from '..'
+import theme from '../theme.scss'
+
+describe('App', () => {
+  test('renders a welcome message', () => {
+    const wrapper = shallow(<App theme={theme} />)
+
+    expect(wrapper.find('h4').text()).toEqual('Welcome!')
+  })
+})

app/templates/client/modules/app/components/App/_config.scss

@@ -0,0 +1,2 @@
+$header-background-color: $palette-grey-800 !default;
+$header-color: $color-white !default;

app/templates/client/modules/app/components/App/index.js

@@ -1,15 +1,16 @@
 import React from 'react'
 import { Match, Miss } from 'react-router'
+import { themr } from 'react-css-themr'
 
-import styles from './styles.scss'
+import appTheme from './theme.scss'
 import logo from './logo.png'
 
-export default function App() {
+export function App({ theme }) {
   return (
-    <div className={styles.root}>
-      <div className={styles.header}>
-        <img src={logo} className={styles.logo} alt='logo' />
-        <h2>Welcome!</h2>
+    <div className={theme.app}>
+      <div className={theme.header}>
+        <img src={logo} className={theme.logo} alt='logo' />
+        <h4>Welcome!</h4>
       </div>
 
       <Match exactly pattern='/' component={Home} />
@@ -20,12 +21,18 @@ export default function App() {
 
 function Home() {
   return (
-    <h3>Home</h3>
+    <h5 style={{ margin: 40 }}>
+      Home
+    </h5>
   )
 }
 
 function NotFound() {
   return (
-    <h3>Route not found</h3>
+    <h5 style={{ margin: 40 }}>
+      Route not found
+    </h5>
   )
 }
+
+export default themr('', appTheme)(App)

app/templates/client/modules/app/components/App/theme.scss

@@ -0,0 +1,17 @@
+@import '../../../../styles/globals';
+@import 'config';
+
+.app {
+  text-align: center;
+}
+
+.header {
+  background-color: $header-background-color;
+  color: $header-color;
+  height: 15 * $unit;
+  padding: 2 * $unit;
+}
+
+.logo {
+  height: 8 * $unit;
+}

app/templates/client/styles/_colors.scss

@@ -0,0 +1,3 @@
+@import '~react-toolbox/lib/colors';
+
+$zeal-orange: #d85226;

app/templates/client/styles/_globals.scss

@@ -0,0 +1,6 @@
+@import 'colors';
+@import '~react-toolbox/lib/globals';
+
+$unit: .625rem;
+
+$color-primary: $zeal-orange;

app/templates/client/styles/commons.scss

@@ -0,0 +1,6 @@
+@import 'globals';
+@import '~react-toolbox/lib/commons';
+
+html {
+  font-size: 100%;
+}

app/templates/client/styles/react-toolbox/index.js

@@ -0,0 +1 @@
+export RTProgressBar from './progress_bar.scss'

app/templates/client/styles/react-toolbox/progress_bar.scss

@@ -0,0 +1,2 @@
+@import '../globals';
+@import '~react-toolbox/lib/progress_bar/theme';

app/templates/client/styles/theme.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+import * as ToolboxTheme from './react-toolbox'
+
+export default { ...ToolboxTheme }

app/templates/package.json

@@ -7,23 +7,27 @@
     "apollo-client": "^0.5.19",
     "babel-eslint": "^7.1.1",
     "enzyme": "^2.6.0",
+    "eslint": "^3.11.1",
     "eslint-config-zeal": "^0.14.0",
     "eslint-import-resolver-webpack": "^0.7.0",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-react": "^6.7.1",
-    "eslint": "^3.11.1",
     "history": "^4.4.1",
+    "immutability-helper": "^2.0.0",
     "normalize.css": "^5.0.0",
     "npm-run-all": "^3.1.2",
+    "react": "^15.4.1",
+    "react-addons-css-transition-group": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
     "react-apollo": "^0.7.1",
+    "react-css-themr": "^1.6.1",
     "react-dom": "^15.4.1",
     "react-redux": "^4.4.6",
     "react-router": "^4.0.0-alpha.6",
-    "react": "^15.4.1",
-    "redux-devtools-extension": "^1.0.0",
+    "react-toolbox": "^1.3.1",
     "redux": "^3.6.0",
+    "redux-devtools-extension": "^1.0.0",
     "zeal-redux-utils": "^0.1.1"
   },
   "scripts": {