[ARCH] 01 - Sass lib -> src & Yarn workspaces (#603)

* First steps with yarn workspaces

* Switched sass imports to read from src

Setup yarn workspaces

First attempt at modifying helper.js

* Removed pancake folder

* Upgraded babel and webpack

* Updated circleci image and build process

* Upgraded webpack ES6 for babel-loader

Upgraded ES6 helper babel process

* Commented out devDep checks, need to rewrite

* Added node-module caching to circleci

* Put restore_cache key in wrong order :'(

* Removed pancake root key

Gave module versions some love

Updated circleci comments

* Package formatting

* Installed mocha/chai over jest, removed jest

* Updated 50% of unit tests

* Renamed packages -> components

* Installed babel preset minify

* added preset to .babelrc

* updated README.md

* Trailing process.exit for circleci

* Updated autoprefixer tag to be inline with spec

Trialing node direct script over yarn

* Added mode flag to webpack config - creates warning in webpack 4

* Playing around with puppetter args and circle images

* Removed debug flags, trying node image

* Updated circleci image

* Helper should read from src for file check and build to lib/

* Correct webpack config to reference babel-preset-minify as a plugin not preset

* Removed all instances of babel-preset-minify

* Various tweaks based on PR review

* Added back missing spacing

* Added back es5 name convention

* Webpack formatting

* Forgot es5 name convention

* Dependency shuffling

* Added back ES6 dep comment

* Trailing why git thinks _deps is new

* Updated webpack output location

Reverted helper react.es5.js changes back

Added gitignore for react/tests/dist

Updated ES6 dependency imports to pancake root folder

* Added nuke script for pancake/

* Temporary resolved yarn workspace building by pretending animate requires sass

* Added missing sass: name false key to animate

* Reverted pretending animate hass sass

* Resolved root and core vulnerabilities

* Added missing whitespace in core

* Updated engines, removed verbose --pancake from animate

* Added back webpack ./bundle.js -> bundle.js

* Updated local install instructions for yarn and grammar

* Updated FAQ notes for yarn

* Updated auds.json from latest develop

* Upgraded circle node images to latest lts

Author: Adam Zerella

.cfignore

@@ -1,36 +1,37 @@
-# Node CircleCI 2.0 configuration file to DTA cloud 2.0
-
 version: 2
 jobs:
 
-  # DEPLOY-STAGING JOB
-  # installing dependencies, building assets and deploying to staging
+  # Installing dependencies, build and test.
   build-and-test-auds:
     docker:
-      - image: circleci/node:8.12.0                       # NodeLTS as of 10/2018
+      - image: circleci/node:10.15.1
     working_directory: ~/auds
     steps:
       - checkout                                          # get the files from the repo (why would you ever not want the files????)
+      - restore_cache:
+          keys:
+            - v1-node-cache-{{ checksum "yarn.lock" }}
       - run:
           # https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
           name: Install packages for puppeteer
           command: sudo apt install -yq --no-install-recommends gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdbus-1-3 libgconf-2-4 libgtk-3-0 libnspr4 libxcomposite1 libxcursor1 libxi6 libxrandr2 libxss1 libxtst6 fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils
       - run:
           name: Install dependencies
-          command: npm install                            # duh
-      - run:
-          name: Bootstrap the packages
-          command: npm run bootstrap                      # installing all dependencies of all packages
+          command: yarn install                            # duh
+      - save_cache:
+          key: v1-node-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - node_modules                                 # Path globbing isn't supported :'(
       - run:
-          name: Build all packages
-          command: npm run build                          # installing all dependencies of all packages
+          name: Build all components
+          command: yarn build
       - run:
           name: Run all tests
-          command: npm test
+          command: yarn test
       - persist_to_workspace:
           root: ~/auds
           paths:
-            - packages/*/tests/
+            - components/*/tests/
             - .deploy/
             - index.html
 
@@ -49,7 +50,7 @@ jobs:
             cp .deploy/nginx/mime.types site/
             cp .deploy/nginx/.htpasswd site/
             mv .deploy/nginx/nginx-staging.conf site/nginx.conf
-            mv packages/ site/
+            mv components/ site/
             mv index.html site/
             mv .deploy/manifest-staging.yml site/
             cd site/
@@ -71,7 +72,7 @@ jobs:
             cp .deploy/nginx/mime.types site/
             cp .deploy/nginx/.htpasswd site/
             mv .deploy/nginx/nginx-testing.conf site/nginx.conf
-            mv packages/ site/
+            mv components/ site/
             mv index.html site/
             mv .deploy/manifest-testing.yml site/
             cd site/
@@ -92,7 +93,7 @@ jobs:
             mkdir -p site/
             cp .deploy/nginx/mime.types site/
             mv .deploy/nginx/nginx-production.conf site/nginx.conf
-            mv packages/ site/
+            mv components/ site/
             mv index.html site/
             mv .deploy/manifest-production.yml site/
             cd site/

.circleci/config.yml

@@ -9,10 +9,12 @@ node_modules
 validation-report.json
 validation-status.json
 *.css
-packages/*/tests/*/*.js
-!packages/*/tests/react/index.js
-!packages/*/tests/react/webpack.config.js
-packages/*/lib/
+components/*/tests/*/*.js
+components/*/tests/react/dist
+!components/*/tests/react/index.js
+!components/*/tests/react/webpack.config.js
+components/*/lib/
 npm-debug.log
 lerna-debug.log
 /index.html
+pancake

.gitignore

@@ -72,7 +72,7 @@ The visual test: [-replace-URL-]
 ## License
 
 Copyright (c) Commonwealth of Australia.
-Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE).
+Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/components/core/master/LICENSE).
 
 
 **[⬆ back to top](#contents)**

.templates/new-module/README.md

@@ -25,7 +25,7 @@
 
 		"build:pre": "node ../../scripts/helper.js precompile publish",
 		"build:js": "node ../../scripts/helper.js compile",
-		"build:react": "cd tests/react/ && webpack",
+		"build:react": "cd tests/react/ && webpack --config webpack.config.js",
 		"build": "npm run build:pre && npm run build:js && npm run build:react",
 
 		"serve": "browser-sync tests --files \"tests/**/*.html, tests/**/*.css, tests/**/*.js\"",
@@ -45,14 +45,14 @@
 				"@gov.au/pancake-json"
 			],
 			"sass": {
-				"path": "lib/sass/_module.scss",
+				"path": "src/sass/_module.scss",
 				"sass-versioning": true
 			},
 			"js": {
-				"path": "lib/js/module.js"
+				"path": "src/js/module.js"
 			},
 			"react": {
-				"path": "lib/js/react.js"
+				"path": "src/js/react.js"
 			}
 		}
 	},
@@ -70,25 +70,24 @@
 		"@gov.au/core": "^3.0.0"
 	},
 	"devDependencies": {
-		"babel-core": "^6.26.0",
-		"babel-loader": "^7.1.2",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-es2015": "^6.24.1",
-		"babel-preset-react": "^6.24.1",
-		"babel-preset-stage-0": "^6.24.1",
-		"browser-sync": "^2.18.13",
-		"npm-run-all": "^4.1.2",
-		"onchange": "^3.2.1",
+		"@babel/core": "^7.2.2",
+		"babel-loader": "^8.0.5",
+		"@babel/preset-env": "^7.3.1",
+		"@babel/preset-react": "^7.0.0",
+		"browser-sync": "^2.26.3",
+		"npm-run-all": "^4.1.5",
+		"onchange": "^5.2.0",
 		"react": "^16.1.1",
 		"react-dom": "^16.1.1",
-		"webpack": "^3.8.1"
+		"webpack": "^4.29.0",
+		"webpack-cli": "^3.2.1"
 	},
 	"files": [
 		"lib/*"
 	],
 	"engines": {
-		"node": ">=0.12.0",
-		"npm": "^3.0.0"
+		"node": "~10",
+		"npm": "~6"
 	},
 	"repository": {
 		"type": "git",

.templates/new-module/package.json

@@ -1,11 +1,10 @@
 //sass-versioning
-@import '../../../core/node_modules/sass-versioning/dist/_index.scss';
-
+@import '../../../../node_modules/sass-versioning/dist/_index.scss';
 //dependencies
-@import '../../../core/lib/sass/_module.scss';
+@import '../../../core/src/sass/_module.scss';
 
 //this module
-@import '../../lib/sass/_module.scss';
+@import '../../src/sass/_module.scss';
 
 //version check with sass-versioning
-@include versioning-check();
+// @include versioning-check();

.templates/new-module/src/sass/_dependencies.scss

@@ -18,7 +18,7 @@ $dependencies: (
 	[replace-dependencies]
 );
 
-@include versioning-add( $name, $version, $dependencies ); //adding dependencies to global scope
+// @include versioning-add( $name, $version, $dependencies ); //adding dependencies to global scope
 
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 // GLOBAL VARIABLES

.templates/new-module/src/sass/_globals.scss

@@ -1,4 +1,3 @@
 {
-	"presets": ["react", ["es2015", { "modules": false }]],
-	"plugins": ["transform-object-rest-spread"]
+	"presets": ["@babel/preset-react", "@babel/preset-env"],
 }

.templates/new-module/tests/react/.babelrc

@@ -1,14 +1,23 @@
+const path = require( 'path' );
+
 module.exports = {
 	entry: './index.js',
+	mode: 'development',
 	output: {
 		filename: './bundle.js',
+		path: path.resolve( __dirname )
 	},
 	module: {
 		rules: [
 			{
 				test: /\.js$/,
 				exclude: /node_modules/,
-				use: 'babel-loader',
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: ['@babel/preset-env','@babel/preset-react'],
+					}
+				}
 			},
 		],
 	},

.templates/new-module/tests/react/webpack.config.js

@@ -2,7 +2,7 @@
 @import '../../src/sass/_dependencies.scss';
 
 //testing includes
-// @import '../../../body/lib/sass/_module.scss';
+@import '../../../body/src/sass/_module.scss';
 
 //styling all test files
 @import '../../../../.templates/test-assets/_style.scss';