feat: #27 custom namespace support

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 auro-test
+auro-component

README.md

@@ -18,16 +18,16 @@ $ npm list -g @alaskaairux/wc-generator
 
 ## Execute
 
-The API of the npm generator is as follows:
+Simple API of the npm generator:
 
 ```
-wc-generate --name [wc name] --dir [your dir]
+wc-generate --name [wc name]
 ```
 
-#### Example
+###### Example
 
 ```shell
-$ wc-generate --name button --dir ./auro-button
+$ wc-generate --name button
 ```
 
 #### API
@@ -37,22 +37,32 @@ $ wc-generate --name button --dir ./auro-button
 | -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` |
+| -N, --namespace [namespace] | no | choose custom namespace of the web component if other than Auro |
+| -P, --npm [npm] | no | choose npm namespace if other than `@alaskaairux`. Be sure add back-slash, e.g. `@mynpm/` |
 | -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 [Auro 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 regard 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)
+For the most up to date information on UI development browser support, see [./docs/BROWSER_SUPPORT.md](https://github.com/AlaskaAirlines/auro_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 [Auro Web 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/auro_docs/blob/master/src/TECH_DETAILS.md)
+
+## Custom namespace support
+
+When generating a new WC using the Auro Web Component generator, you are not restricted to using the Auro namespace for the component.
+
+```shell
+$ wc-generate -t -N Han -n Solo
+```
 
 
 [![Build Status](https://travis-ci.org/AlaskaAirlines/WC-Generator.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/WC-Generator)

bin/generate.js

@@ -24,7 +24,7 @@ const path = require('path');
 const paths = require('../util/paths');
 const log = require('../util/log');
 const versionData = {
-  'designTokens': `2.10.9`,
+  'designTokens': '2.10.9',
   'wcss': '2.8.13',
   'icons': '2.1.3',
   'focusVisible': '5.0.2',
@@ -46,13 +46,17 @@ const parseArgs = () => {
     '--test': Boolean,
     '--version': Boolean,
     '--name': String,
+    '--namespace': String,
+    '--npm': String,
     '--dir': String,
     '--verbose': Boolean,
     // Aliases
     '-h': '--help',
     '-t': '--test',
     '-v': '--version',
     '-n': '--name',
+    '-N': '--namespace',
+    '-P': '--npm',
     '-d': '--dir',
   });
 
@@ -66,13 +70,17 @@ const parseArgs = () => {
   }
 
   const test = args['--test'];
-  const name = args['--name'] || 'no-name-given';
+  const name = args['--name'] || 'component';
+  const npm = args['--npm'] || '@alaskaairux/';
+  const namespace = args['--namespace'] || 'auro';
   const dir = path.resolve(
-    args['--dir'] || `./auro-${lowerKebabCase(name)}`
+    args['--dir'] || `./${lowerKebabCase(namespace)}-${lowerKebabCase(name)}`
   );
 
   return {
     name,
+    namespace,
+    npm,
     test,
     dir,
     verbose: args['--verbose'],
@@ -85,11 +93,15 @@ const makeFolder = async dir => {
   }
 };
 
-const formatTemplateFileContents = (data, content, { name }) => {
+const formatTemplateFileContents = (data, content, { name, namespace, npm }) => {
   // name to lower-kebab-case (e.g. Text Input -> text-input)
   const lowerKebabCaseName = lowerKebabCase(name);
+  // namespace to lower-kebab-case (e.g. Text Input -> text-input)
+  const lowerKebabCaseNameSpace = lowerKebabCase(namespace);
   // name to UpperCamelCase (e.g. text-input -> TextInput)
   const upperCamelCaseName = upperCamelCase(name);
+  // name to UpperCamelCase (e.g. text-input -> TextInput)
+  const upperCamelCaseNameSpace = upperCamelCase(namespace);
   // gets git username from ./gitconfig
   const userName = require('git-user-name');
   // gets git email from ./gitconfig
@@ -98,20 +110,23 @@ const formatTemplateFileContents = (data, content, { name }) => {
   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: /\[year\]/g, value: newYear },
     { regex: /\[designTokens\]/g, value: data.designTokens },
-    { regex: /\[wcss\]/g, value: data.wcss },
-    { regex: /\[icons\]/g, value: data.icons },
     { regex: /\[focusVisible\]/g, value: data.focusVisible },
+    { regex: /\[icons\]/g, value: data.icons },
+    { regex: /\[litElement\]/g, value: data.litElement },
+    { regex: /\[name\]/g, value: lowerKebabCaseName },
+    { regex: /\[namespace\]/g, value: lowerKebabCaseNameSpace },
+    { regex: /\[Namespace\]/g, value: upperCamelCaseNameSpace },
+    { regex: /\[Name\]/g, value: upperCamelCaseName },
+    { regex: /\[npm\]/g, value: npm },
     { regex: /\[webcomponentsjs\]/g, value: data.webcomponentsjs },
-    { regex: /\[litElement\]/g, value: data.litElement }
+    { regex: /\[wcss\]/g, value: data.wcss },
+    { regex: /\[year\]/g, value: newYear },
   ];
 
-  // replace all instances of [name] and [Name] accordingly
+  // replace all instances of [name], [Name], [namespace] and [Namespace] accordingly
   let result = content;
   for (let i = 0; i < replacements.length; i++) {
     const { regex, value } = replacements[i];
@@ -232,8 +247,8 @@ Creating a Design System People Love.
 
     await makeFolder(params.dir);
     await copyAllFiles(paths.self.template, params.dir, params, {
-      'auro-[name].test.js': `auro-${lowerKebabCase(params.name)}.test.js`,
-      'auro-[name].js': `auro-${lowerKebabCase(params.name)}.js`,
+      '[namespace]-[name].test.js': `${lowerKebabCase(params.namespace)}-${lowerKebabCase(params.name)}.test.js`,
+      '[namespace]-[name].js': `${lowerKebabCase(params.namespace)}-${lowerKebabCase(params.name)}.js`,
       'package.temp': 'package.json',
       '.npmignore.temp': '.npmignore',
       '.gitignore.temp': '.gitignore',

package.json

@@ -53,10 +53,10 @@
     ]
   },
   "scripts": {
-    "testbuild": "node bin/generate.js -t -n solo -d ./auro-test",
+    "testbuild": "node bin/generate.js -t -N Han -n Solo -P @mypackage/ -d ./auro-test",
     "fullbuild": "node bin/generate.js -n solo -d ../auro-test",
     "sweep": "rm -rf auro-test",
-    "test": "npm run testbuild"
+    "test": "npm-run-all testbuild sweep"
   },
   "publishConfig": {
     "access": "public"

template/README.md

@@ -1,19 +1,19 @@
-## Element auro-[name]
+## Element [namespace]-[name]
 
-`<auro-[name]>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of ...
+`<[namespace]-[name]>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of ...
 
 ## Docs
 
-All information regarding Project Setup, Technical Details, Tests and information regarding Auro Stateless Components can be found in the [docs](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/tree/master/src) project repository.
+All information regarding Project Setup, Technical Details, Tests and information regarding Auro Stateless Components can be found in the [docs](https://github.com/AlaskaAirlines/auro_docs/tree/master/src) project repository.
 
 ## 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)
+For the most up to date information on UI development browser support, see [docs/BROWSER_SUPPORT.md](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/BROWSER_SUPPORT.md)
 
 ## Install
 
 ```shell
-$ npm i @alaskaairux/auro-[name]
+$ npm i @alaskaairux/[namespace]-[name]
 ```
 
 Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
@@ -22,31 +22,31 @@ Installing as a direct, dev or peer dependency is up to the user installing the
 
 The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://github.com/AlaskaAirlines/OrionDesignTokens).
 
-For additional details in regards to using Auro Design Tokens with components, please see [docs/TECH_DETAILS.md](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/TECH_DETAILS.md)
+For additional details in regards to using Auro Design Tokens with components, please see [docs/TECH_DETAILS.md](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/TECH_DETAILS.md)
 
 ### CSS Custom Property fallbacks
 
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/CUSTOM_PROPERTIES.md) in older browsers. For this, fallback properties are pre-generated and included with the npm.
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/CUSTOM_PROPERTIES.md) in older browsers. For this, fallback properties are pre-generated and included with the npm.
 
 Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
 
 ### Define dependency in project component
 
-Defining the component dependency within each component that is using the `<auro-[name]>` component.
+Defining the component dependency within each component that is using the `<[namespace]-[name]>` component.
 
 ```javascript
-import "@alaskaairux/auro-[name]";
+import "@alaskaairux/[namespace]-[name]";
 ```
 
 **Reference component in HTML**
 
 ```html
-<auro-[name]>Hello World</auro-[name]>
+<[namespace]-[name]>Hello World</[namespace]-[name]>
 ```
 
 ## auro-[name] use cases
 
-The `<auro-[name]>` element should be used in situations where users may:
+The `<[namespace]-[name]>` element should be used in situations where users may:
 
 * ...
 * ...
@@ -60,32 +60,29 @@ The `<auro-[name]>` element should be used in situations where users may:
 
 ## API Code Examples
 
-Default auro-[name]
+Default [namespace]-[name]
 
 ```html
-<auro-[name]>Hello World</auro-[name]>
+<[namespace]-[name]>Hello World</[namespace]-[name]>
 ```
 
 ## Development
 
 In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
 
-Please be sure to review the [contribution guidelines](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/CONTRIBUTING.md) for this project. Please make sure to **pay special attention** to the [conventional commits](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/CONTRIBUTING.md#conventional-commits) section of the document.
+Please be sure to review the [contribution guidelines](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/CONTRIBUTING.md) for this project. Please make sure to **pay special attention** to the [conventional commits](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/CONTRIBUTING.md#conventional-commits) section of the document.
 
 ### Start development environment
 
 Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open three different shell sessions. One is for the **Gulp tasks**, the second is for a series of **npm tasks** and the last is to run the **Polymer server**.
 
-**Peer dependency:** Please make sure Polymer is installed globally in order to run the Polymer server. See [Auro Stateless Component Development Details](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/TECH_DETAILS.md) for more information.
+**Peer dependency:** Please make sure Polymer is installed globally in order to run the Polymer server. See [Auro Stateless Component Development Details](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/TECH_DETAILS.md) for more information.
 
 ```bash
 $ npm i polymer-cli -g
 ```
 
 ```shell
-// shell terminal one
-$ gulp dev
-
 // shell terminal two
 $ npm run dev
 
@@ -94,10 +91,10 @@ polymer serve
 ```
 
 ### Testing
-Automated tests are required for every Auro component. See `.\test\auro-[name].test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://github.com/AlaskaAirlines/OrionStatelessComponents__docs/blob/master/src/TESTS.md) for more details.
+Automated tests are required for every Auro component. See `.\test\[namespace]-[name].test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://github.com/AlaskaAirlines/auro_docs/blob/master/src/TESTS.md) for more details.
 
 ------
 
-[![Build Status](https://travis-ci.org/AlaskaAirlines/auro-[name].svg?branch=master)](https://travis-ci.org/AlaskaAirlines/auro-[name])
-![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/auro-[name].svg?color=orange)
-![NPM](https://img.shields.io/npm/l/@alaskaairux/auro-[name].svg?color=blue)
+[![Build Status](https://travis-ci.org/AlaskaAirlines/[namespace]-[name].svg?branch=master)](https://travis-ci.org/AlaskaAirlines/auro-[name])
+![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/[namespace]-[name].svg?color=orange)
+![NPM](https://img.shields.io/npm/l/@alaskaairux/[namespace]-[name].svg?color=blue)

template/demo/index.html

@@ -6,13 +6,13 @@
       name="viewport"
       content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
     />
-    <title>Auro Design System | auro-[name] element</title>
+    <title>Auro Design System | [namespace]-[name] element</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="module">
       import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
       import '@polymer/iron-demo-helpers/demo-snippet';
     </script>
-    <script type="module" src="../src/auro-[name].js"></script>
+    <script type="module" src="../src/[namespace]-[name].js"></script>
     <script src="../demo/alert.js"></script>
     <script type="module">
       import '../node_modules/@polymer/iron-icons/hardware-icons.js';
@@ -62,13 +62,13 @@ <h1>auro-[name]</h1>
 
       <demo-snippet>
         <template>
-          <auro-[name] cssClass="testClass">Hello World!</auro-[name]>
+          <[namespace]-[name] cssClass="testClass">Hello World!</[namespace]-[name]>
         </template>
       </demo-snippet>
 
-      <h2>Element &#60;auro-[name]&#62;</h2>
+      <h2>Element &#60;[namespace]-[name]&#62;</h2>
 
-      <pre><code>class Auro[Name] extends LitElement</code></pre>
+      <pre><code>class [Namespace][Name] extends LitElement</code></pre>
 
       <h3>Styling:</h3>
       <p>Info ...</p>

template/demo/sass/style.scss

@@ -2,9 +2,6 @@
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties";
 
-// Import deprecated  Design Token variables to support Orion values
-@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/tokenVariables";
-
 // Import baseline library dependencies
 // Mixins
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

template/index.js

@@ -1 +1 @@
-export * from './dist/auro-[name]';
+export * from './dist/[namespace]-[name]';

template/package.temp

@@ -6,26 +6,19 @@
     "Aside from the Sass/PostCSS tasks, all other tasks are also avaialble directly from npm as well.",
     "To keep things less confusing, all tasks share the same name between Gulp and npm.",
     "",
-    "# To build resources to view the demo file, perform the following tasks",
-    "  1. $ gulp build",
-    "  2. $ npm run build",
-    "  3. $ polymer serve",
-    "  4. Go to http://127.0.0.1:8081",
-    "",
     "# To work within the development environment, run the following tasks",
-    "  1. $ gulp dev",
-    "  2. $ npm run dev",
-    "  4. $ polymer serve",
+    "  1. $ npm run dev",
+    "  2. $ polymer serve",
     "  3. Go to http://127.0.0.1:8081",
     "================================================================================"
   ],
-  "name": "@alaskaairux/auro-[name]",
+  "name": "[npm][namespace]-[name]",
   "version": "0.0.0",
-  "description": "Auro Design System auro-[name] element",
+  "description": "[Namespace] custom [namespace]-[name] element",
   "author": "Product design and research",
   "repository": {
     "type": "git",
-    "url": "https://github.com/AlaskaAirlines/auro-[name]"
+    "url": "https://github.com/AlaskaAirlines/[namespace]-[name]"
   },
   "main": "index.js",
   "license": "Apache-2.0",

template/packageScripts/postinstall.js

@@ -7,7 +7,7 @@ console.log(chalk.hex('#f26135')(`
 ╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮
 
         Thanks for installing the latest version
-                of `) + chalk.hex('#ffd200').bold(`auro-[name] v${pjson.version}.`) + chalk.hex('#f26135')(`
+                of `) + chalk.hex('#ffd200').bold(`[namespace]-[name] v${pjson.version}.`) + chalk.hex('#f26135')(`
 
 ╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
 `)