[minor] update the generator with a new navigation & demos

packages/generator-electrode/generators/app/templates/src/client/actions/index.jsx

@@ -15,3 +15,24 @@ export const decNumber = () => {
     type: "DEC_NUMBER"
   };
 };
+
+export const inputName = value => {
+  return {
+    type: "INPUT_NAME",
+    value
+  };
+};
+
+export const inputTextarea = value => {
+  return {
+    type: "INPUT_TEXT_AREA",
+    value
+  };
+};
+
+export const selectOption = value => {
+  return {
+    type: "SELECT_OPTION",
+    value
+  };
+};

packages/generator-electrode/generators/app/templates/src/client/components/demo1.jsx

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Nav } from "./nav";
+import { inputName, inputTextarea, selectOption } from "../actions";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
+import demoStyle from "../styles/demo1.css"; // eslint-disable-line no-unused-vars
+
+class Demo1 extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: { value: "" },
+      textarea: { value: "" },
+      selectedOption: { value: "0-13" }
+    };
+  }
+
+  render() {
+    const { dispatch } = this.props;
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+        <div styleName={"demoStyle.container"}>
+          <h2>Forms Demo</h2>
+          <form>
+            <fieldset>
+              <label htmlFor="nameField">Name</label>
+              <input
+                type="text"
+                placeholder="Electrode User"
+                id="nameField"
+                value={this.props.username}
+                onChange={event => {
+                  dispatch(inputName(event.target.value));
+                }}
+              />
+              <label htmlFor="ageRangeField">Experience with Electrode</label>
+              <select
+                id="ageRangeField"
+                onChange={event => {
+                  dispatch(selectOption(event.target.value));
+                }}
+                value={this.props.selectedOption}
+              >
+                <option value="0-13">0-13 month</option>
+                <option value="14-17">14-17 month</option>
+                <option value="18-23">18-23 month</option>
+                <option value="24+">24+ month</option>
+              </select>
+              <label htmlFor="commentField">Comment</label>
+              <textarea
+                placeholder="Leave feedback for electrode..."
+                id="commentField"
+                value={this.props.textarea}
+                onChange={event => dispatch(inputTextarea(event.target.value))}
+              />
+              <input type="submit" value="Send" />
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+Demo1.propTypes = {
+  username: PropTypes.string,
+  textarea: PropTypes.string,
+  selectedOption: PropTypes.string,
+  dispatch: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => {
+  return {
+    username: state.username.value,
+    textarea: state.textarea.value,
+    selectedOption: state.selectedOption.value
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Demo1);

packages/generator-electrode/generators/app/templates/src/client/components/demo2.jsx

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { Nav } from "./nav";
+import { connect } from "react-redux";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
+import demoStyle from "../styles/demo2.css"; // eslint-disable-line no-unused-vars
+
+class Demo2 extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+        <section styleName={"custom.header"}>
+          <h2>Buttons Demo</h2>
+          <div styleName="demoStyle.main">
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-one">Tap Me</button>
+            </div>
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-two">
+                <span>Hover Me</span>
+              </button>
+            </div>
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-three">Click Me</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = () => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Demo2);

packages/generator-electrode/generators/app/templates/src/client/components/home.jsx

@@ -15,42 +15,65 @@
  */
 
 import React from "react";
+import { connect } from "react-redux";
 import "../styles/raleway.css";
 import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
 import electrodePng from "../images/electrode.png";
 import DemoStates from "./demo-states";
 import DemoPureStates from "./demo-pure-states";
 import { DemoButtons } from "./demo-buttons";
+import { Nav } from "./nav";
 //<% if (pwa) { %>
 import Notifications from "react-notify-toast";
 //<% } %>
 
-export default () => (
-  <div styleName={"custom.container"}>
-    {/*<% if (pwa) { %>*/}
-    <Notifications />
-    {/*<% } %>*/}
-
-    <section styleName={"custom.header"}>
-      <h2>
-        <span>Hello from </span>
-        <a href="https://github.com/electrode-io">
-          {"Electrode"}
-          <img src={electrodePng} />
-        </a>
-      </h2>
-    </section>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoStates />
-    </div>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoPureStates />
-    </div>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoButtons />
-    </div>
-  </div>
-);
+class Home extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+
+        {/*<% if (pwa) { %>*/}
+        <Notifications />
+        {/*<% } %>*/}
+
+        <section styleName={"custom.header"}>
+          <h2>
+            <span>Hello from </span>
+            <a href="https://github.com/electrode-io">
+              {"Electrode"}
+              <img src={electrodePng} />
+            </a>
+          </h2>
+        </section>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoStates />
+        </div>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoPureStates />
+        </div>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoButtons />
+        </div>
+      </div>
+    );
+  }
+}
+
+Home.propTypes = {};
+
+const mapStateToProps = () => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Home);

packages/generator-electrode/generators/app/templates/src/client/components/nav.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import navStyle from "../styles/nav.css"; // eslint-disable-line no-unused-vars
+
+export class Nav extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const currentTab = this.props.location.pathname.replace("/", "");
+    return (
+      <ul>
+        <li styleName={currentTab === "" ? "navStyle.active" : ""}>
+          <Link to="/">Home</Link>
+        </li>
+        <li styleName={currentTab === "demo1" ? "navStyle.active" : ""}>
+          <Link to="/demo1">Demo1</Link>
+        </li>
+        <li styleName={currentTab === "demo2" ? "navStyle.active" : ""}>
+          <Link to="/demo2">Demo2</Link>
+        </li>
+      </ul>
+    );
+  }
+}
+
+Nav.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
+};
+
+Nav.defaultProps = {
+  location: {
+    pathname: ""
+  }
+};

packages/generator-electrode/generators/app/templates/src/client/reducers/index.jsx

@@ -24,7 +24,39 @@ const number = (store, action) => {
   return store || { value: 0 };
 };
 
+const username = (store, action) => {
+  if (action.type === "INPUT_NAME") {
+    return {
+      value: action.value
+    };
+  }
+
+  return store || { value: "" };
+};
+
+const textarea = (store, action) => {
+  if (action.type === "INPUT_TEXT_AREA") {
+    return {
+      value: action.value
+    };
+  }
+
+  return store || { value: "" };
+};
+
+const selectedOption = (store, action) => {
+  if (action.type === "SELECT_OPTION") {
+    return {
+      value: action.value
+    };
+  }
+  return store || { value: "0-13" };
+};
+
 export default combineReducers({
   checkBox,
-  number
+  number,
+  username,
+  textarea,
+  selectedOption
 });

packages/generator-electrode/generators/app/templates/src/client/routes.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Home from "./components/home";
+import Demo1 from "./components/demo1";
+import Demo2 from "./components/demo2";
 import { withRouter } from "react-router-dom";
 import { renderRoutes } from "react-router-config";
 
@@ -26,7 +28,18 @@ const routes = [
     routes: [
       {
         path: "/",
+        exact: true,
         component: Home
+      },
+      {
+        path: "/demo1",
+        exact: true,
+        component: Demo1
+      },
+      {
+        path: "/demo2",
+        exact: true,
+        component: Demo2
       }
     ]
   }

packages/generator-electrode/generators/app/templates/src/client/styles/demo1.css

@@ -0,0 +1,25 @@
+.container {
+  background: linear-gradient(to bottom left, rgba(255, 99, 71, 0.7), rgba(0, 0, 255, 0.6));
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: calc(50% - 245px);
+  max-width: 490px;
+  padding: 20px;
+  position: absolute;
+  top: 100px;
+  transition: all 0.5s;
+  width: 490px;
+  color: white;
+}
+
+.container input,
+.container textarea,
+.container input::placeholder,
+.container textarea::placeholder,
+.container select {
+  color: white;
+}