Gocommerce UI Refresh

.gitignore

@@ -7,10 +7,14 @@ node_modules
 coverage
 
 # production
-build
+/build
 
 # misc
 .DS_Store
 .env
 npm-debug.log
 .vscode
+yarn-error.log
+
+#semantic build
+src/semantic/dist 

README.md

@@ -16,3 +16,25 @@ To use against a production gocommerce install, make sure to set environment var
 * **REACT_APP_SITE_URL** the URL of the ecommerce website
 * **REACT_APP_NETLIFY_AUTH** the URL of the GoTrue instance used to manage authentication
 * **REACT_APP_NETLIFY_COMMERCE** The URL of the GoCommerce instance
+
+## Semantic UI Styling
+This UI uses a custom theme built using [Semantic UI React](https://react.semantic-ui.com/theming) framework.
+
+To make changes to the theme, modifiy the variable and override files (which are stored inside the `collections`, `elements`, `globals`, `modules` and `views` folders) inside the site folder.
+```
+src/semantic/src/site
+```
+It is inside here you will find the files for all component styles and variables. 
+More information about how to create and work with Semantic's theming can be found here:
+[Semantic theming](https://semantic-ui.com/usage/theming.html)
+
+To build all css files run:
+```
+yarn build:css
+```
+This compiles the variable and overide files to css files.
+
+To watch for css changes run:
+```
+yarn watch:css
+```

package.json

@@ -6,31 +6,58 @@
     "eslint": "^3.19.0",
     "eslint-plugin-flowtype": "^2.32.1",
     "flow-bin": "^0.37.4",
-    "react-scripts": "0.9.5"
+    "react-scripts": "0.9.5",
+    "react-to-print": "^2.0.0-alpha-4"
   },
   "dependencies": {
+    "better-console": "^1.0.1",
     "csvexport": "^1.0.2",
     "date-fns": "^1.21.0",
     "director": "^1.2.8",
-    "gocommerce-js": "^3.9.0",
+    "gocommerce-js": "^4.4.1",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-chmod": "^2.0.0",
+    "gulp-clean-css": "^3.7.0",
+    "gulp-clone": "^1.1.3",
+    "gulp-concat": "^2.6.1",
+    "gulp-concat-css": "^2.3.0",
+    "gulp-dedupe": "^0.0.2",
+    "gulp-flatten": "^0.3.1",
+    "gulp-header": "^1.8.9",
+    "gulp-help": "^1.6.1",
+    "gulp-if": "^2.0.2",
+    "gulp-less": "^3.3.2",
+    "gulp-plumber": "^1.1.0",
+    "gulp-print": "^2.0.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.6.1",
+    "gulp-rtlcss": "^1.0.0",
+    "gulp-uglify": "^3.0.0",
+    "gulp-watch": "^4.3.11",
     "history": "^4.5.0",
     "jwt-decode": "^2.1.0",
     "lodash": "^4.17.4",
+    "mdi-react": "^4.1.0",
     "money": "^0.2.0",
     "netlify-auth-js": "^0.5.2",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-gravatar": "^2.6.1",
-    "semantic-ui-css": "^2.2.4",
-    "semantic-ui-react": "^0.62.1"
+    "require-dot-file": "^0.4.0",
+    "run-sequence": "^2.1.0",
+    "semantic-ui-react": "^0.62.1",
+    "yamljs": "^0.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build:css": "cd src/semantic && gulp build",
+    "start": "yarn build:css && react-scripts start",
+    "build": "yarn build:css && react-scripts build",
+    "watch:css": "cd src/semantic && gulp watch",
     "test": "react-scripts test --env=jsdom",
-    "lint": "npm run lint:js",
+    "lint": "yarn lint:js",
     "lint:js": "eslint .",
-    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint:js:fix": "yarn lint:js -- --fix",
     "eject": "react-scripts eject",
     "flow": "flow"
   }

src/App.css

@@ -1,7 +1,8 @@
 .App {}
 .Main {
-  margin-left: 15rem;
+  margin: 0 7rem 0 7rem;
   padding: 1rem;
+  margin-top: 50px;
 }
 
 .tr-clickable {
@@ -15,3 +16,11 @@
 .search-padding {
   padding-bottom: 1rem;
 }
+
+@media only screen and (max-width: 767px){
+  .Main {
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
+  }
+}

src/App.js

@@ -1,16 +1,23 @@
 // @flow
-import type {User} from './Types';
-import React, {PropTypes, Component} from 'react';
-import director from 'director';
-import Auth from 'netlify-auth-js';
-import Commerce from 'gocommerce-js';
-import Sidebar from './Components/Sidebar';
-import {WithAuthentication, Customers, Discounts, Order, Orders, Reports} from './Components';
-import 'semantic-ui-css/semantic.css';
-import './App.css';
-import config from './config/default.json';
-
-const env = process.env.REACT_APP_ENV || 'dev';
+import type { User } from "./Types";
+import React, { PropTypes, Component } from "react";
+import director from "director";
+import Auth from "netlify-auth-js";
+import Commerce from "gocommerce-js";
+import {
+  WithAuthentication,
+  Navigation,
+  Customers,
+  Discounts,
+  Order,
+  Orders,
+  Reports
+} from "./Components";
+import "./semantic/dist/semantic.min.css";
+import "./App.css";
+import config from "./config/default.json";
+
+const env = process.env.REACT_APP_ENV || "dev";
 if (process.env.REACT_APP_SITE_URL) {
   config.siteURL = process.env.REACT_APP_SITE_URL;
 }
@@ -27,12 +34,12 @@ if (process.env.REACT_APP_RECEIPT_TEMPLATE) {
   config.receiptTemplate = process.env.REACT_APP_RECEIPT_TEMPLATE;
 }
 
-const auth = new Auth({APIUrl: config.netlifyAuth});
-const commerce = new Commerce({APIUrl: config.netlifyCommerce});
+const auth = new Auth({ APIUrl: config.netlifyAuth });
+const commerce = new Commerce({ APIUrl: config.netlifyCommerce });
 
 type Router = {
   init: () => void,
-  setRoute: (string) => void
+  setRoute: string => void
 };
 
 function NotFound(props) {
@@ -51,8 +58,8 @@ class App extends Component {
   props: {};
   state: {
     user: ?User,
-    route: 'reports' | 'orders' | 'order' | 'customers',
-    active: 'Reports' | 'Orders' | 'Customers',
+    route: "reports" | "orders" | "order" | "customers",
+    active: "Reports" | "Orders" | "Customers",
     params: {},
     query: ?{}
   };
@@ -63,43 +70,55 @@ class App extends Component {
     router: PropTypes.object
   };
 
-  constructor(props : {}) {
+  constructor(props: {}) {
     super(props);
-    const user =  auth.currentUser();
+    const user = auth.currentUser();
     commerce.setUser(user);
-    this.state = {user, route: "reports", active: "Reports", params: {}, query: null};
+    this.state = {
+      user,
+      route: "reports",
+      active: "Reports",
+      params: {},
+      query: null
+    };
   }
 
   componentDidMount() {
     this.router = new director.Router({
-      "/": () => this.setState({route: "reports", active: "Reports"}),
-      "/orders": () => this.setState({route: "orders", active: "Orders"}),
-      "/orders/:id": (id) => this.setState({route: "order", active: "Orders", params: {id}}),
-      "/orders/:id/:item": (id, item) => this.setState({route: "order", active: "Orders", params: {id, item}}),
-      "/customers": () => this.setState({route: "customers", active: "Customers"}),
-    }).configure({html5history: true});
+      "/": () => this.setState({ route: "reports", active: "Reports" }),
+      "/orders": () => this.setState({ route: "orders", active: "Orders" }),
+      "/orders/:id": id =>
+        this.setState({ route: "order", active: "Orders", params: { id } }),
+      "/orders/:id/:item": (id, item) =>
+        this.setState({
+          route: "order",
+          active: "Orders",
+          params: { id, item }
+        }),
+      "/customers": () =>
+        this.setState({ route: "customers", active: "Customers" })
+    }).configure({ html5history: true });
     this.router.init();
   }
 
   handleLogin = (email: string, password: string) => {
-    return auth.login(email, password)
-      .then((user) => {
-        user.persistSession(user);
-        commerce.setUser(user);
-        this.setState({user});
-        return user;
-      });
+    return auth.login(email, password).then(user => {
+      user.persistSession(user);
+      commerce.setUser(user);
+      this.setState({ user });
+      return user;
+    });
   };
 
   handleLogout = () => {
-    const {user} = this.state;
+    const { user } = this.state;
     user && user.logout();
-    this.setState({user: null});
+    this.setState({ user: null });
   };
 
   handleLink = (e: SyntheticInputEvent) => {
     e.preventDefault();
-    const path = e.target.getAttribute('href');
+    const path = e.target.getAttribute("href");
     if (path) {
       this.handlePush(path);
     }
@@ -110,27 +129,37 @@ class App extends Component {
   };
 
   render() {
-    const {user, route, active, params, query} = this.state;
+    const { user, route, active, params, query } = this.state;
 
     const component = MainComponent[route] || null;
 
-    return (<div className="App">
-      <WithAuthentication user={user} onLogin={this.handleLogin}>
-        <Sidebar
-          active={active}
-          config={config}
-          user={user}
-          route={route}
-          onLink={this.handleLink}
-          onLogout={this.handleLogout}
-        />
-        <div className="Main">
-          {component && React.createElement(component, {
-            config, route, commerce, user, params, query, push: this.handlePush, onLink: this.handleLink
-          })}
-        </div>
-      </WithAuthentication>
-    </div>);
+    return (
+      <div className="App">
+        <WithAuthentication user={user} onLogin={this.handleLogin}>
+          <Navigation
+            active={active}
+            config={config}
+            user={user}
+            route={route}
+            onLink={this.handleLink}
+            onLogout={this.handleLogout}
+          />
+          <div className="Main">
+            {component &&
+              React.createElement(component, {
+                config,
+                route,
+                commerce,
+                user,
+                params,
+                query,
+                push: this.handlePush,
+                onLink: this.handleLink
+              })}
+          </div>
+        </WithAuthentication>
+      </div>
+    );
   }
 }