perf: update WC Generator per Auro specifications

BREAKING CHANGE: All references to Orion and ODS have been removed from this generator.
This version will only create new web components for the new Auro spec.

- Update to support Auro #19
- Fix issue with needing to run ciBuild on first run #18
- Remove postcss-remove-selectors package #15
- Remove CSS post processing for other-than component use #11

.github/CONTRIBUTING.md

@@ -26,30 +26,91 @@ No one other than repository managers have direct access to the repository. For
 
 All new work that is to be considered for merging with the `MASTER` branch must start from a new feature branch of work. This feature branch should be in response to either a bug or a new business requirement.
 
-#### Feature branch naming
+### Feature branch naming
 
 The name of the feature branch should be descriptive as to the nature of the work and please include any references to the story or bug work item ID.
 
+### Conventional Commits
+
+This project utilizes [Conventional Commits](https://www.conventionalcommits.org/) to auto-generate release verions, based on the [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
+
+
+```
+<type>[optional scope]: <description>
+```
+
+All commit messages must be prefixed with a specific type so that the semver release configuration can analyze the commit and apply the correct version release. Please see the following types with their respective meanings.
+
+#### MAJOR
+
+For a MAJOR release, you MUST follow this template. The use of `perf:` and `BREAKING CHANGE:` are needed in order to push a major release.
+
+```
+perf(pencil): remove graphiteWidth option
+
+BREAKING CHANGE: The graphiteWidth option has been removed.
+The default graphite width of 10mm is always used for performance reasons.
+```
+
+#### MINOR
+```
+feat(pencil): add 'graphiteWidth' option
+```
+
+#### PATCH
+```
+fix(pencil): stop graphite breaking when too much pressure applied
+```
+
+#### Other commit types
+
+| type | description |
+|---|---|
+| build | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) |
+| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
+| docs | Documentation only changes |
+| feat | A new feature (this correlates with `MINOR` in semantic versioning) |
+| fix | A bug fix (this correlates with `PATCH` in semantic versioning) |
+| perf | A code change that improves performance (correlating with `MAJOR` in semantic versioning) |
+| BREAKING CHANGE | A code change that is not backwards compatable (correlating with `MAJOR` in semantic versioning) |
+| refactor | A code change that neither fixes a bug nor adds a feature |
+| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
+| test | Adding missing tests or correcting existing tests  |
+
 #### Git commit messages
 
 Once you have completed your feature update, please commit all changes to the branch. All commit messages should use an **imperative mood**.
 
 Imperative mood simply means _“spoken or written as if giving a command or instruction”_. A few examples are:
 
-- Clean your room
-- Close the door
-- Take out the trash
+* Clean your room
+* Close the door
+* Take out the trash
 
 A properly formed Git commit subject line should always be able to complete the following sentence:
 
 _"If applied, this commit will [your subject line here]."_
 
 For example:
 
-- If applied, this commit will `refactor component X for accessibility`
-- If applied, this commit will `add feature Y to component X`
+* If applied, this commit will `refactor component X for accessibility`
+* If applied, this commit will `add feature Y to component X`
+
+Example messages when using Conventional Commits:
+
+```
+$ build: update to Gulp 4.x
+
+$ docs: address issue #14, typo in install instructions
+
+$ perf: restructure API to comply with new feature spec
+
+$ feat: add ability to consume large data as an array versus string
+
+$ fix: address issue #57 in regards to color output
+```
 
-#### Push branch and submit pull request
+### Push branch and submit pull request
 
 One you have committed new work to your feature branch, be sure to push your updates to the Github repository. Depending on your IDE or CLI configuration this may be a manual or automatic step.
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,10 +12,10 @@ _Please summarize the scope of the changes you have submitted, what the intent o
 
 Please delete options that are not relevant.
 
-- [ ] New capability 
+- [ ] New capability
 - [ ] Revision of an existing capability
 - [ ] Infrastructure change (automation, etc.)
-- [ ] Other (please elaborate) 
+- [ ] Other (please elaborate)
 
 
 ## Checklist:
@@ -25,7 +25,7 @@ Please delete options that are not relevant.
 
 **By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.**
 
-_Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission._ 
+_Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission._
 
 **Thank you for your submission!**<br>
--- Orion Design System Team
+-- Auro Design System Team

.gitignore

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules
-ods-foo
+auro-test

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright [year] Alaska Airlines
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -7,54 +7,54 @@ The Design System Web Component Generator is a project tool intended to assist d
 It is suggested that this package be installed globally as to ensure quick and easy access to initializing new web components at will.
 
 ```shell
-$ npm i @alaskaairux/ods-wc-generator -g
+$ npm i @alaskaairux/wc-generator -g
 ```
 
-The ODS Web Component Generator is configured to ensure that you have the latest version of the generator prior to starting a new build project. You can also verify your installed version manually by running the following command.
+The Auro Web Component Generator is configured to ensure that you have the latest version of the generator prior to starting a new build project. You can also verify your installed version manually by running the following command.
 
 ```shell
-$ npm list -g @alaskaairux/ods-wc-generator
+$ npm list -g @alaskaairux/wc-generator
 ```
 
 ## Execute
 
 The API of the npm generator is as follows:
 
 ```
-ods-wc-generate --name [wc name] --dir [your dir]
+wc-generate --name [wc name] --dir [your dir]
 ```
 
 #### Example
 
 ```shell
-$ ods-wc-generate --name button --dir ./ods-button
+$ wc-generate --name button --dir ./auro-button
 ```
 
 #### API
 
 | variable | required | description |
 |----|----|----|
-| --name | Yes | Name of the web component you wish to build. `ods` is assumed, so only the proper name, e.g. `button` or `checkbox` |
-| -- dir | No | Directory where the new custom element files will be created. If a directory is not provided, one using the `--name` variable will be created |
+| -h, --help | no | Get help info about WC generator |
+| -t, --test | no | Test repo generation without installing dependencies |
+| -n, --name [name] | yes | Name of the web component you wish to build. `auro` is assumed, so only the proper name, e.g. `button` or `checkbox` |
+| -d, --dir [directory] | no | Directory where the new custom element files will be created. If a directory is not provided, one using the `--name` variable will be created |
+| -v, --version | no | Ouput the version number |
+| --verbose | no | Verbose command line feedback |
 
 
 ## General documentation
 
-Please see [OrionStatelessComponents__docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs) for all information in regards to using and developing HTML custom elements with the Design System.
+Please see [Auro docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs) for all information in regards to using and developing HTML custom elements with the Design System.
 
 ## UI development browser support
 
 For the most up to date information on UI development browser support, see [./docs/BROWSER_SUPPORT.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/BROWSER_SUPPORT.md)
 
 ## Building a Custom element
 
-Once the new development environment has been created, there are some conventions to follow to ensure the success of your new Custom Element. Please see the development documentation [ODS Stateless Component Development Details](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/TECH_DETAILS.md)
+Once the new development environment has been created, there are some conventions to follow to ensure the success of your new Custom Element. Please see the development documentation [Auro Web Component Development Details](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/TECH_DETAILS.md)
 
 
-------
-
-#### Status badges
-
-[![Build Status](https://travis-ci.org/AlaskaAirlines/ODS-WC-Generator.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/ODS-WC-Generator)
-![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/ods-wc-generator.svg?color=orange)
-![NPM](https://img.shields.io/npm/l/@alaskaairux/ods-wc-generator.svg?color=blue)
+[![Build Status](https://travis-ci.org/AlaskaAirlines/WC-Generator.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/WC-Generator)
+![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/wc-generator.svg?color=orange)
+![NPM](https://img.shields.io/npm/l/@alaskaairux/wc-generator.svg?color=blue)

bin/generate.js

@@ -42,6 +42,7 @@ const parseArgs = () => {
     '--verbose': Boolean,
     // Aliases
     '-h': '--help',
+    '-t': '--test',
     '-v': '--version',
     '-n': '--name',
     '-d': '--dir',
@@ -59,7 +60,7 @@ const parseArgs = () => {
   const test = args['--test'];
   const name = args['--name'] || 'no-name-given';
   const dir = path.resolve(
-    args['--dir'] || `./OrionStatelessComponents__ods-${lowerKebabCase(name)}`
+    args['--dir'] || `./auro-${lowerKebabCase(name)}`
   );
 
   return {
@@ -85,11 +86,14 @@ const formatTemplateFileContents = (content, { name }) => {
   const userName = require('git-user-name');
   // gets git email from ./gitconfig
   const userEmail = require('git-user-email');
+  // generate new year for copyright stamp
+  const newYear = new Date().getFullYear();
   const replacements = [
     { regex: /\[name\]/g, value: lowerKebabCaseName },
     { regex: /\[Name\]/g, value: upperCamelCaseName },
     { regex: /\[author\]/g, value: userName },
-    { regex: /\[author-email\]/g, value: userEmail }
+    { regex: /\[author-email\]/g, value: userEmail },
+    { regex: /\[year\]/g, value: newYear }
   ];
 
   // replace all instances of [name] and [Name] accordingly
@@ -159,6 +163,8 @@ const loadingLoop = condition => {
 const generateFromTemplate = async () => {
   const pjson = require('../package.json');
   const latestVersion = require('latest-version');
+
+  // this test needs to be updates post first release of new '@alaskaairux/wc-generator'
   const latestPublishedVersion = await latestVersion('@alaskaairux/ods-wc-generator');
 
   log(chalk.green(`\nPublished: v${latestPublishedVersion} | Installed: v${pjson.version}\n`))
@@ -188,14 +194,31 @@ const generateFromTemplate = async () => {
     log(chalk.red(`                                         p:::::::p                                     `));
     log(chalk.red(`                                         p:::::::p                                     `));
     log(chalk.red(`                                         ppppppppp                                     \n\n`));
-    log(chalk.red(`\nSorry, we have to stop you here.\nIt's been detected you have v${pjson.version} installed,\nand the latest version is v${latestPublishedVersion}. Please run the following:\n\nnpm i @alaskaairux/ods-wc-generator@${latestPublishedVersion} -g\n\nfor the latest version.\n`))
+    log(chalk.red(`\nSorry, we have to stop you here.\nIt's been detected you have v${pjson.version} installed,\nand the latest version is v${latestPublishedVersion}. Please run the following:\n\nnpm i @alaskaairux/wc-generator@${latestPublishedVersion} -g\n\nfor the latest version.\n`))
   }
 
   else {
+    log(chalk.green(
+      `
+ _____ _         _          _____ _     _ _
+|  _  | |___ ___| |_ ___   |  _  |_|___| |_|___ ___ ___
+|     | | .'|_ -| '_| .'|  |     | |  _| | |   | -_|_ -|
+|__|__|_|__,|___|_,_|__,|  |__|__|_|_| |_|_|_|_|___|___|
+
+
+ _ _ _ _____    _____                     _
+| | | |     |  |   __|___ ___ ___ ___ ___| |_ ___ ___
+| | | |   --|  |  |  | -_|   | -_|  _| .'|  _| . |  _|
+|_____|_____|  |_____|___|_|_|___|_| |__,|_| |___|_|
+
+
+Creating a Design System People Love.
+    `))
+
     await makeFolder(params.dir);
     await copyAllFiles(paths.self.template, params.dir, params, {
-      'ods-[name].test.js': `ods-${lowerKebabCase(params.name)}.test.js`,
-      'ods-[name].js': `ods-${lowerKebabCase(params.name)}.js`,
+      'auro-[name].test.js': `auro-${lowerKebabCase(params.name)}.test.js`,
+      'auro-[name].js': `auro-${lowerKebabCase(params.name)}.js`,
       'package.temp': 'package.json',
       '.npmignore.temp': '.npmignore',
       '.gitignore.temp': '.gitignore',
@@ -205,9 +228,32 @@ const generateFromTemplate = async () => {
 
     let areDependenciesInstalled = false;
     let isNodeSassRebuilt = false;
+    let isGitRepo = false;
+    let isBuilt = false;
+    let isPolymerInstalled = false;
 
     if (!params.test) {
-      process.stdout.write(`\nInstalling Dependencies`);
+      process.stdout.write(`\nSetting up Git`);
+      loadingLoop(() => isGitRepo);
+      try {
+        await exec('git init && git add . && git commit -m "initial commit"', { cwd: params.dir });
+        log(chalk.green('\nGit repo successfully created'));
+      } catch ({ message }) {
+        log(chalk.red(message));
+      }
+      isGitRepo = true;
+
+      process.stdout.write(`\nSetting up Polymer`);
+      loadingLoop(() => isPolymerInstalled);
+      try {
+        await exec('npm i polymer -g', { cwd: params.dir });
+        log(chalk.green('\nPolymer successfully installed globably!'));
+      } catch ({ message }) {
+        log(chalk.red(message));
+      }
+      isPolymerInstalled = true;
+
+      process.stdout.write(`\nInstalling dependencies`);
       loadingLoop(() => areDependenciesInstalled);
       try {
         await exec('npm i', { cwd: params.dir });
@@ -217,7 +263,7 @@ const generateFromTemplate = async () => {
       }
       areDependenciesInstalled = true;
 
-      process.stdout.write(`\nRebuilding node-sass`);
+      process.stdout.write(`\nRebuilding node-sass, ugh`);
       loadingLoop(() => isNodeSassRebuilt);
       try {
         await exec('npm rebuild node-sass', { cwd: params.dir });
@@ -227,38 +273,19 @@ const generateFromTemplate = async () => {
       }
       isNodeSassRebuilt = true;
 
-      log('\n')
-      log('         .         . ')
-      log('               *       *')
-      log('')
-      log('                 * * *')
-      log('                    !')
-      log('               *       * ')
-      log('')
-      log(" ██████╗ ██████╗ ██╗ ██████╗ ███╗   ██╗")
-      log("██╔═══██╗██╔══██╗██║██╔═══██╗████╗  ██║")
-      log("██║   ██║██████╔╝██║██║   ██║██╔██╗ ██║")
-      log("██║   ██║██╔══██╗██║██║   ██║██║╚██╗██║")
-      log("╚██████╔╝██║  ██║██║╚██████╔╝██║ ╚████║")
-      log(" ╚═════╝ ╚═╝  ╚═╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝")
-      log('')
-      log("██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗")
-      log("██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║")
-      log("██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║")
-      log("██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║")
-      log("██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║")
-      log("╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝")
-      log('')
-      log("███████╗██╗   ██╗███████╗████████╗███████╗███╗   ███╗")
-      log("██╔════╝╚██╗ ██╔╝██╔════╝╚══██╔══╝██╔════╝████╗ ████║")
-      log("███████╗ ╚████╔╝ ███████╗   ██║   █████╗  ██╔████╔██║")
-      log("╚════██║  ╚██╔╝  ╚════██║   ██║   ██╔══╝  ██║╚██╔╝██║")
-      log("███████║   ██║   ███████║   ██║   ███████╗██║ ╚═╝ ██║")
-      log("╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚══════╝╚═╝     ╚═╝")
-      log('\n')
-      log(chalk.green(`Well done! The new HTML Custom Element ods-${params.name} has been created!
+      process.stdout.write(`\nRunning initial component build`);
+      loadingLoop(() => isBuilt);
+      try {
+        await exec('npm run ciBuild', { cwd: params.dir });
+        log(chalk.green('\nInitial build success!'));
+      } catch ({ message }) {
+        log(chalk.red(message));
+      }
+      isBuilt = true;
+
+      log(chalk.green(`Well done! The new HTML Custom Element auro-${params.name} has been created!
         \nDir: ${params.dir}
-        \nODS-WC: v${pjson.version}
+        \nWC: v${pjson.version}
       \n`));
     }
   }