[ARCH] 01 - Sass lib -> src & Yarn workspaces

.circleci/config.yml

@@ -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/

.gitignore

@@ -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

.templates/new-module/README.md

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

.templates/new-module/package.json

@@ -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/src/sass/_dependencies.scss

@@ -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/_globals.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/tests/react/.babelrc

@@ -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/webpack.config.js

@@ -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/site/test.scss

@@ -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';

CONTRIBUTING.md

@@ -125,15 +125,15 @@ For example, what happens with a navigation component that has more items than d
 
 **Code is for humans.** Please look at the coding style and work with it, not against it. We write comments, add spacing, and prefer readable code over clever code. Yes, code is actually for computers, but it is humans that need to maintain it.
 
-**Code comments.** Code should be commented so that it is as usable as possible. Try to provide reasoning or links to documentation about any peculiar decisions that had to be made. [For example.](https://github.com/govau/design-system-components/blob/master/packages/body/src/sass/_module.scss#L127)
+**Code comments.** Code should be commented so that it is as usable as possible. Try to provide reasoning or links to documentation about any peculiar decisions that had to be made. [For example.](https://github.com/govau/design-system-components/blob/master/components/body/src/sass/_module.scss#L127)
 
 **Follow the folder structure.** New components should follow the same folder structure as the [existing components.](https://github.com/govau/design-system-components/tree/master/.templates/new-module)
 
 **CSS** can be dependent on other components, but must use core functions and mixins at a minimum.
 
-* For spacing, padding, or other metrics like border-width, use [AU-space()](https://github.com/govau/design-system-components/blob/master/packages/core/src/sass/_globals.scss#L475)
-* For font-sizes and line-height, use [AU-fontgrid()](https://github.com/govau/design-system-components/blob/master/packages/core/src/sass/_globals.scss#L629)
-* For colours, use the [core colour variables](https://github.com/govau/design-system-components/blob/master/packages/core/src/sass/_globals.scss#L741)
+* For spacing, padding, or other metrics like border-width, use [AU-space()](https://github.com/govau/design-system-components/blob/master/components/core/src/sass/_globals.scss#L475)
+* For font-sizes and line-height, use [AU-fontgrid()](https://github.com/govau/design-system-components/blob/master/components/core/src/sass/_globals.scss#L629)
+* For colours, use the [core colour variables](https://github.com/govau/design-system-components/blob/master/components/core/src/sass/_globals.scss#L741)
 
 **JavaScript.** The Design System supports **JavaScript, JQuery, and React.** To make integration easier any JavaScript supplied for a component should be written in at least one of these.
 
@@ -184,28 +184,33 @@ happened instead. For more info look at our [issue template](./ISSUE_TEMPLATE.md
 
 If you’d like to contribute code, first, you will need to run the components locally.
 
-💡 Building the components is only necessary if you want to contribute them. If you want to use the modules in your own project, install them via npm as described
+💡 Building the components is only necessary if you want to contribute to them. If you want to use the modules in your own project, install them via npm as described
 in [How to use](./README.md#how-to-use).
 
-To build this project you have to install [lerna](https://github.com/lerna/lerna) globally after cloning it via `npm install -g lerna` and run:
+To build this project, you'll have to install [Yarn](https://yarnpkg.com/en/). Then run the following commands at the root of the project folder:
 
-```shell
-npm install
-npm run bootstrap
-npm run build
+```bash
+# Install the modules
+yarn install
+
+# Build the components
+yarn build
 ```
 
-To make changes to an existing module, `cd` into the folder and run the watch:
+To make changes to an existing module, `cd` into the folder and run the watch script:
 
-```shell
-cd packages/body
-npm run watch
+```bash
+# Change directory to whatever component e.g `body`
+cd components/body
+
+# Preview the component, live in your browser
+yarn watch
 ```
 
-To add a new module run the scaffolding helper:
+To add a new module, run the scaffolding helper:
 
 ```shell
-npm run scaffolding
+yarn scaffolding
 ```
 
 _❗ After you have filled out all the blanks and added your dependencies into your package.json make sure you run `lerna bootstrap` again._

FAQ.md

@@ -129,8 +129,9 @@ The best place to start is by looking for existing conversation in [the communit
 
 ### How do I add the components to my build process? How do I add custom code/variables/overrides?
 Build processes can be complicated, we recommend first looking at our [design system starter pack](https://github.com/govau/design-system-components-starter). This is a simple
-implementation of the design system showing how to include the components into your project. After you `npm install` and run `npm run watch` you should have some generated
-files. Looking at the `src/sass/main.scss` file you can see the order:
+implementation of the design system showing how to include the components into your project. 
+
+After you `yarn install` and run `yarn watch` you should have some generated files. Looking at the `src/sass/main.scss` file you can see the order:
 
 ```
 // OVERWRITES