Added RFR / sample page, updated storybook

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["stage-2", "es2015", "react"]
+  "plugins": ["universal-import"],
+  "presets": ["stage-2", "es2017", "react"]
 }

.eslintrc

@@ -11,9 +11,9 @@
         "**/__tests__/**",
         "**/__mocks__/**",
         "**/*.{test,spec}.{js,jsx}",
-        "**/stories/**"
+        "**/stories/**",
         "**/__stories__/**",
-        "**/*.story.{js,jsx}",
+        "**/*.story.{js,jsx}"
       ],
       "optionalDependencies": false
     }],

config/storybook/addons.js

@@ -1,2 +1,3 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';

config/storybook/config.js

@@ -4,22 +4,22 @@ import { configure, addDecorator, setAddon } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { withKnobs } from '@storybook/addon-knobs/react';
 import JSXAddon from 'storybook-addon-jsx';
-import styles from "@sambego/storybook-styles";
+import styles from '@sambego/storybook-styles';
 
 import Provider from './Provider';
 import { MemoryRouter } from 'react-router';
 
 import configureStore from '../src/bootstrap/configureStore';
 
 addDecorator(story => <Provider story={story()} />);
-addDecorator(story => <MemoryRouter>{story()}</MemoryRouter>)
+addDecorator(story => <MemoryRouter>{story()}</MemoryRouter>);
 addDecorator(styles({
   boxSizing: 'border-box',
   fontFamily: "'Helvetica Neue','Helvetica','Arial',sans-serif",
   fontSize: '16px',
   margin: 0,
-}))
-setAddon(JSXAddon)
+}));
+setAddon(JSXAddon);
 
 const req = require.context('../src/components/', true, /story\.(jsx|js)$/);
 function loadStories() {

package.json

@@ -3,31 +3,22 @@
   "license": "MIT",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js --env=jsdom",
+    "lint": "eslint . --fix",
+    "storybook": "start-storybook -p 9009 -s public -c config/storybook",
+    "build-storybook": "build-storybook -s public"
+  },
   "dependencies": {
-    "autoprefixer": "7.1.6",
-    "babel-core": "6.26.0",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "7.1.2",
-    "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "6.26.0",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "css-loader": "0.28.7",
-    "dotenv": "4.0.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "4.10.0",
-    "eslint-config-react-app": "^2.1.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
+    "history": "^4.7.2",
     "html-webpack-plugin": "2.29.0",
-    "jest": "20.0.4",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
@@ -39,11 +30,10 @@
     "react-dom": "^16.3.2",
     "react-helmet": "^5.2.0",
     "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
-    "react-router-redux": "^4.0.8",
     "react-snapshot": "^1.3.0",
+    "react-universal-component": "^2.9.0",
     "redux": "^4.0.0",
+    "redux-first-router": "^0.0.16-next",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
     "resolve": "1.6.0",
@@ -56,14 +46,6 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
-  "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom",
-    "lint": "eslint . --fix",
-    "storybook": "start-storybook -p 9009 -s public -c config/storybook",
-    "build-storybook": "build-storybook -s public"
-  },
   "devDependencies": {
     "@sambego/storybook-styles": "^1.0.0",
     "@storybook/addon-actions": "^3.4.3",
@@ -73,14 +55,32 @@
     "@storybook/addon-storyshots": "^3.4.3",
     "@storybook/addons": "^3.4.3",
     "@storybook/react": "^3.4.3",
+    "autoprefixer": "7.1.6",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "7.1.2",
+    "babel-plugin-universal-import": "^3.0.0",
+    "babel-preset-es2017": "^6.24.1",
+    "babel-preset-react-app": "^3.1.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "2.1.1",
+    "dotenv": "4.0.0",
+    "dotenv-expand": "4.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
+    "eslint": "4.10.0",
     "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-react-app": "^2.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-flowtype": "2.39.1",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "7.4.0",
+    "jest": "20.0.4",
     "jest-styled-components": "^5.0.1",
     "storybook-addon-jsx": "^5.3.0"
   },

src/actions/index.js

@@ -0,0 +1,4 @@
+import exportAllDefaults from '../utils/exportAllDefaults';
+
+const context = require.context('.', false, /\.js/);
+export default exportAllDefaults(context);

src/actions/plants.js

@@ -0,0 +1,12 @@
+// ADD_PLANT, UPDATE_PLANT, DELETE_PLANT, GET_PLANT,
+import { LIST_PLANTS, SET_PLANTS } from '../constants/actionTypes';
+import * as api from '../constants/apiTypes';
+import makeActionCreator from '../utils/makeActionCreator';
+import apiActionCreator from '../utils/apiActionCreator';
+
+// export const createPlant = makeActionCreator(ADD_PLANT, 'plant');
+// export const updatePlant = makeActionCreator(UPDATE_PLANT, 'id', 'plant');
+// export const getPlant = makeActionCreator(GET_PLANT, 'id');
+// export const deletePlant = makeActionCreator(DELETE_PLANT, 'id');
+export const listPlants = apiActionCreator(LIST_PLANTS, api.GET_PLANTS, 'gardenId');
+export const setPlants = makeActionCreator(SET_PLANTS, 'gardenId', 'plants');

src/constants/actionTypes.js

@@ -0,0 +1,10 @@
+export const API_LOADING = 'API_LOADING';
+export const API_SUCCESS = 'API_SUCCESS';
+export const API_ERROR = 'API_ERROR';
+
+export const ADD_PLANT = 'ADD_PLANT';
+export const UPDATE_PLANT = 'UPDATE_PLANT';
+export const DELETE_PLANT = 'DELETE_PLANT';
+export const GET_PLANT = 'GET_PLANT';
+export const LIST_PLANTS = 'LIST_PLANTS';
+export const SET_PLANTS = 'SET_PLANTS';

src/constants/apiTypes.js

@@ -0,0 +1,2 @@
+export const GET_PLANTS = 'getPlants';
+export const GET_GARDENS = 'getGardens';

src/constants/pageNames.js

@@ -0,0 +1,12 @@
+const context = require.context('../containers/pages', false, /\.jsx/);
+const pageNames = {};
+context.keys().forEach((key) => {
+  if (key !== '.' && key !== '..') {
+    const name = key.replace(/\.\//, '').split('.')[0];
+    if (name !== 'index') {
+      pageNames[name] = name;
+    }
+  }
+});
+
+export default pageNames;

src/containers/layout/App.jsx

@@ -1,14 +1,24 @@
-import React, { Fragment } from 'react';
-import Router from '../../init/router';
-
-const App = () => (
-  <Fragment>
-    <header></header>
-    <main id="main">
-      <Router />
-    </main>
-    <footer id="footer"></footer>
-  </Fragment>
-);
-
-export default App;
+import React, { Fragment } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import universal from 'react-universal-component';
+
+const UniversalComponent = universal(({ page }) => import(`../pages/${page}`));
+
+const App = ({ page }) => (
+  <Fragment>
+    <header />
+    <main id="main">
+      <UniversalComponent page={page} />
+    </main>
+    <footer id="footer" />
+  </Fragment>
+);
+
+const mapStateToProps = ({ page }) => ({ page });
+
+export default connect(mapStateToProps)(App);
+
+App.propTypes = {
+  page: PropTypes.string.isRequired,
+};

src/containers/pages/GardenPage.jsx

@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+const GardenPage = props => (
+  <div>
+    {props.plants.map(garden => <div key={garden.id}>{ garden.name }</div>)}
+  </div>
+);
+
+const mapStateToProps = state => ({
+  plants: state.plants,
+});
+export default connect(mapStateToProps)(GardenPage);
+
+GardenPage.propTypes = {
+  plants: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.int,
+    name: PropTypes.string,
+    daysTillHarvest: PropTypes.int,
+  })),
+};
+
+GardenPage.defaultProps = {
+  plants: [],
+};

src/containers/pages/HomePage.jsx

@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+const NotFoundPage = () => (
+  <div>
+    Home Page
+  </div>
+);
+
+export default NotFoundPage;

src/containers/pages/NotFoundPage.jsx

@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+const NotFoundPage = () => (
+  <div>
+    Page Not Found
+  </div>
+);
+
+export default NotFoundPage;

src/containers/pages/index.js

@@ -0,0 +1,4 @@
+import exportAllDefaults from '../../utils/exportAllDefaults';
+
+const context = require.context('.', false, /\.jsx/);
+export default exportAllDefaults(context);

src/init/api.js

@@ -0,0 +1,33 @@
+import * as api from '../constants/apiTypes';
+
+function Api(name, ...params) {
+  return typeof Api[name] === 'function' ? Api[name](...params) : null;
+}
+
+Api[api.GET_PLANTS] = (gardenId) => {
+  const response = {
+    success: true,
+    data: {
+      gardenId,
+      plants: [
+        { id: 1, name: 'strawberry', daysTillHarvest: 80 },
+      ],
+    },
+  };
+
+  // fetch(...)
+  // for now simulating delay with a promise that takes time to resolve
+  return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
+    if (response.success !== true || typeof response.data === 'undefined') {
+      if (response.error) {
+        throw Error(response.error);
+      } else {
+        throw Error('Invalid Response');
+      }
+    }
+
+    return response.data;
+  });
+};
+
+export default Api;

src/init/dev.js

@@ -1,4 +1,5 @@
-// logging
-import { createLogger } from 'redux-logger';
-
-exports.initDev = (middleware) => middleware.push(createLogger());
+// logging
+import { createLogger } from 'redux-logger';
+
+const initDev = middleware => middleware.push(createLogger());
+export default initDev;