finalizes demo workflow

2018-07-28 09:56:35 -04:00
parent 4eff00d4cf
commit 55e2b656c5
13 changed files with 231 additions and 27 deletions
--- a/config/webpack.demo.config.js
+++ b/config/webpack.demo.config.js
@@ -1,7 +1,6 @@
 const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const baseConfig = require('./webpack.base.config');
-const optConfig = require('./webpack.opt.config');
 const path = require('path');

 const demoConfig = {
@@ -14,7 +13,7 @@ const demoConfig = {
  ],
  resolve: {
    alias: {
-      Payload: path.resolve(__dirname, '../src')
+      payload: path.resolve(__dirname, '../src')
    }
  }
 };
@@ -24,4 +23,4 @@ const demoConfig = {
 // as module demo / development will feature a different index.html entry point
 module.exports = merge.strategy({
  plugins: 'replace'
-})(baseConfig, optConfig, demoConfig);
+})(baseConfig, demoConfig);
--- a/demo/client/index.js
+++ b/demo/client/index.js
@@ -1,18 +1,16 @@
 import React from 'react';
 import { render } from 'react-dom';

-import Sidebar from 'Payload/client/components/Sidebar';
+import App from 'payload/client/components/App';

 import './testStyles.css';

-const App = () => {
+const Index = () => {
  return (
    <div>
-      <Sidebar />
-      <h3>Payload</h3>
-      <p>Yay test</p>
+      <App/>
    </div>
  )
 }

-render(<App />, document.getElementById('app'));
+render(<Index />, document.getElementById('app'));
--- a/demo/client/testStyles.css
+++ b/demo/client/testStyles.css
@@ -1,3 +1,3 @@
 body {
-  background: purple;
-  color: white; }
+  background: white;
+  color: #505050; }
--- a/demo/client/testStyles.scss
+++ b/demo/client/testStyles.scss
@@ -1,4 +1,6 @@
+@import '_vars';
+
 body {
-	background: purple;
-	color: white;
+	background: white;
+	color: $black;
 }
--- a/demo/server.js
+++ b/demo/server.js
--- a/package-lock.json
+++ b/package-lock.json
@@ -6085,6 +6085,28 @@
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
      "dev": true
    },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "^2.2.1",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "value-equal": "^0.4.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6102,6 +6124,11 @@
      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
      "dev": true
    },
+    "hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+    },
    "home-or-tmp": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -6819,7 +6846,6 @@
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
      "requires": {
        "loose-envify": "^1.0.0"
      }
@@ -11392,6 +11418,48 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
    "react-side-effect": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
@@ -11797,6 +11865,11 @@
      "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=",
      "dev": true
    },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -14225,6 +14298,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -14279,6 +14357,14 @@
        "makeerror": "1.0.x"
      }
    },
+    "warning": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
+      "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watch": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
--- a/package.json
+++ b/package.json
@@ -7,16 +7,15 @@
    "test": "node ./node_modules/jest/bin/jest.js",
    "cov": "node ./node_modules/jest/bin/jest.js --coverage",

-    "demo:build-css": "node-sass-chokidar demo/ -o demo/",
-    "demo:watch-css": "npm run demo:build-css && node-sass-chokidar demo/ -o demo/ --watch --recursive",
-    "demo:webpack": "webpack-dev-server --mode development --config config/webpack.demo.config.js --open --hot --history-api-fallback",
-    "demo": "npm-run-all -p watch-css demo:watch-css demo:webpack",
+    "build-demo-css": "node-sass-chokidar --include-path ./src/client/scss demo/ -o demo/",
+    "watch-demo-css": "npm run build-demo-css && node-sass-chokidar --include-path ./src/client/scss demo/ -o demo/ --watch --recursive",

-    "build-css": "node-sass-chokidar src/ -o src/",
-    "watch-css": "npm run demo:build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "dev": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback",
-    "prebuild": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
-    "build": "node server"
+    "build-module-css": "node-sass-chokidar --include-path ./src/client/scss src/ -o src/",
+    "watch-module-css": "npm run build-demo-css && node-sass-chokidar --include-path ./src/client/scss src/ -o src/ --watch --recursive",
+
+    "webpack": "webpack-dev-server --mode development --config config/webpack.demo.config.js --open --hot --history-api-fallback",
+
+    "dev": "npm-run-all -p watch-module-css watch-demo-css webpack"
  },
  "author": "",
  "license": "ISC",
@@ -27,7 +26,8 @@
    "pug": "^2.0.3",
    "react": "^16.4.1",
    "react-document-meta": "^3.0.0-beta.2",
-    "react-dom": "^16.4.1"
+    "react-dom": "^16.4.1",
+    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { Switch, withRouter, Route } from 'react-router-dom';
+
+import '../scss/app.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Here's the main h1</h1>
+      </div>
+    )
+  }
+}
+
+export default App;
--- a/src/client/components/Sidebar/index.css
+++ b/src/client/components/Sidebar/index.css
@@ -1,2 +1,2 @@
 .sidebar {
-  background: rgba(0, 0, 0, 0.9); }
+  background: #505050; }
--- a/src/client/components/Sidebar/index.scss
+++ b/src/client/components/Sidebar/index.scss
@@ -1,3 +1,5 @@
+@import '_vars';
+
 .sidebar {
-	background: rgba(black, .9);
-}
+	background: $black;
+}
--- a/src/client/scss/_vars.scss
+++ b/src/client/scss/_vars.scss
@@ -0,0 +1,86 @@
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$body           : 18px;
+$base-px        : 36px;
+$base           : ($base-px / $body) + rem; // This computes to 30px in rem
+
+@function rem($multiplier) {
+	@return ($base-px / $body) * $multiplier + rem;
+}
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$mobile-width   : 750px;
+$tablet-width   : 1024px;
+$content-width  : 1280px;
+$frame-width    : 1680px;
+$mobile-height  : 400px;
+$tablet-height  : 700px;
+$desktop-height : 900px;
+
+//////////////////////////////
+// FONTS
+//////////////////////////////
+
+$font-body  : 'calibre-web';
+$font-brand : 'noe-display-web';
+$font-label : 'gt-pressura-web';
+
+//////////////////////////////
+// COLORS
+//////////////////////////////
+
+$green      : #3bffaa;
+$dark-green : #0FCE84;
+
+$light-gray : #f5f5f5;
+$gray       : #B1B1B1;
+$black      : rgb(80, 80, 80);
+
+$pink       : #ff8efc;
+$yellow     : #fff93b;
+
+//////////////////////////////
+// STYLE
+//////////////////////////////
+
+$radius-sm    : 5px;
+$radius-lrg   : 10px;
+$stroke-width : 1px;
+
+%shadow {
+	box-shadow: 0 22px 65px rgba(0,0,0,.07);
+}
+
+%inputShadow {
+	box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
+				0 2px 20px 0 rgba(0,2,4,.04);
+
+	&:hover {
+		box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
+					0 5px 20px 0 rgba(0,2,4,.06);
+	}
+
+	&:active, &:focus {
+		box-shadow: 0 2px 4px 0 rgba(0,2,4,.1),
+					0 10px 20px 0 rgba(0,2,4,.08);
+	}
+}
+
+//////////////////////////////
+// UTILITIES
+//////////////////////////////
+
+@mixin color-svg($color) {
+	.stroke {
+		stroke: $color;
+	}
+
+	.fill {
+		fill: $color;
+	}
+}
--- a/src/client/scss/app.css
+++ b/src/client/scss/app.css
@@ -0,0 +1,5 @@
+body {
+  background: purple;
+  color: white; }
+  body h1 {
+    color: black; }
--- a/src/client/scss/app.scss
+++ b/src/client/scss/app.scss
@@ -0,0 +1,10 @@
+@import '_vars';
+
+body {
+	background: purple;
+	color: white;
+
+	h1 {
+		color: black;
+	}
+}