[CORE] Adds scoped naming and new package file names

- Updates to filenames that would be blacklisted by easylist
- Generated packages for the @clr scope on npm
- Updates demo and ks-app for the @clr scope
- closes vmware-archive#850

Signed-off-by: Matt Hippely <mhippely@vmware.com>

.gitignore

@@ -5,7 +5,7 @@
 /tmp
 /out-tsc
 /.ng_build
-src/clarity-angular/.ng_build
+src/clr-angular/.ng_build
 
 /gemini-report/
 
@@ -38,7 +38,7 @@ src/clarity-angular/.ng_build
 npm-debug.log
 testem.log
 /typings
-/src/clarity-angular/package.json
+/src/clr-angular/package.json
 
 # e2e
 /e2e/*.js

BUILD.md

@@ -42,7 +42,8 @@ This will start up our demo app using webpack-dev-server on port 4200 and watch
 This script deletes the `dist` folder, which contains all the produced files for bundling.
 
 ##### `npm run build`
-This script builds npm package candidates for all three packages we currently publish: `clarity-angular`, `clarity-ui`, and `clarity-icons` under the `/dist` folder. 
+This script builds npm package candidates for all three packages we currently publish: `@clr/ng`, `@clr/ui`, and 
+`@clr/icons` under the `/dist` folder. 
 Note that this will also produce bundle files as a result of building and bundling for the demo app. Those can be ignored for the purposes of publishing.
 
 ##### `npm run test` and `npm run test:travis`
@@ -61,25 +62,26 @@ which runs the clang-format command (with `-output-replacements-xml` flag) and g
 The `npm run clang:format` does the actual formatting according to the rules specified in `.clang-format` file.
 
 ##### `npm build:angular`
-This script produces the `clarity-angular` package using [ng-packagr](https://github.com/dherges/ng-packagr). 
+This script produces the `@clr/ng` package using [ng-packagr](https://github.com/dherges/ng-packagr). 
 However, because of limitations of the tools we supplement this with a `pre` and `post` script. 
 
 The `pre` script simply copies over the `package.json` template from our `npm` folder (this contains templates for `package.json` and 
-`README.md` for all of our packages) into `src/clarity-angular` and sets the correct version number. This is necessary because 
+`README.md` for all of our packages) into `src/clr-angular` and sets the correct version number. This is necessary 
+because 
 `ng-packagr` requires the `package.json` to be at the root of the `src` (defined in `ng-package.json`).
 
 The `post` script runs `npm pack` on the package to create the `tgz file`.
 
 ##### `npm build: icons`
-This script produces the `clarity-icons` package by bundling js files that can be included in consuming app. 
+This script produces the `clr-icons` package by bundling js files that can be included in consuming app. 
 The `post` script generates the svg files and also zipped up files for the icon sets. Note that this script partially 
-relies on `webpack` as well, since the `webpack` script produces the `clarity-icons.css` and `clarity-icons.min.css` files. 
+relies on `webpack` as well, since the `webpack` script produces the `clr-icons.css` and `clr-icons.min.css` files. 
 The `webpack` script also processes the `package.json` and `README.md` files for all of our packages. 
 This means that running `npm build: icons` by itself will NOT produce a complete package.
 
 ##### `npm run webpack`
-This is the script that bundles the demo app as well as produce the package for `clarity-ui`. Since our demo app
-consumes the `clarity-ui.min.css`, it wasn't necessary to create a separate script for generating the `clarity-ui` 
+This is the script that bundles the demo app as well as produce the package for `@clr/ui`. Since our demo app
+consumes the `clr-ui.min.css`, it wasn't necessary to create a separate script for generating the `@clr/ui` 
 package. This script also handles tasks common to all packages, such as setting the version and copying over the 
 `package.json` and `README.md` files.
 
@@ -113,9 +115,9 @@ The build process itself uses 3 folders:
   sourcemaps and all clarity deliverables. Basically everything. Because of that, it is itself 
   divided into several subfolders:
   * `assets/`: The sample app that contains demo components for development and testing.
-  * `clarity-angular/`: This will contain the clarity components compiled using ng-packagr.
-  * `clarity-icons/`: This will contain the compiled js files and d.ts files from clarity icons. 
-  * `clarity-ui/`: This will contain the compiled .css files and source .clarity.scss files for clarity-ui. 
+  * `clr-angular/`: This will contain the clarity components compiled using ng-packagr.
+  * `clr-icons/`: This will contain the compiled js files and d.ts files from clarity icons. 
+  * `clr-ui/`: This will contain the compiled .css files and source .clarity.scss files for @clr/ui. 
 * `tests/`: Contains the entry point to running karma tests.
 
 #### The process itself
@@ -129,9 +131,9 @@ We simply clean up the project before building anything.
 ##### Sass
 * All the SCSS files for the sample application are compiled with Sass and moved to `dist/`, once
  again respecting their path relative to `src/`.
-* All `*.clarity.scss` files found in `src/clarity-angular/` are compiled by Sass into a minified bundle 
-  and moved to `dist/clarity-ui`.
-* All other SCSS files in `src/clarity-angular/` are considered to be behaviour-driven styles, so they 
+* All `*.clarity.scss` files found in `src/clr-angular/` are compiled by Sass into a minified bundle 
+  and moved to `dist/clr-ui`.
+* All other SCSS files in `src/clr-angular/` are considered to be behaviour-driven styles, so they 
   are compiled by Sass and inlined in the Typescript declarations of the
   components (see below).
 * Every single CSS file output by Sass goes through Autoprefixer, before potential inlining or 
@@ -140,7 +142,7 @@ We simply clean up the project before building anything.
 ##### Typescript
 * All the Typescript files for the demo application are bundled by webpack into js and moved to `dist/` as 
     `<number>.js` files.
-* All the Typescript files for clarity components are packaged by ng-packagr under `dist/clarity-angular`. 
+* All the Typescript files for clarity components are packaged by ng-packagr under `dist/clr-angular`. 
  The Typescript declaration files (`*.d.ts`) are produced for each of these components.
 * All `*.spec.ts` and `*.mock.ts` files, containing the unit tests and mocks for Clarity's 
   components, are transpiled and used by the webpack config file `webpack.test.config.js`. No output is generated.

README.md

@@ -10,9 +10,9 @@ Project Clarity is an open source design system that brings together UX guidelin
 
 Clarity is published as three npm packages:
 
-* __clarity-icons.__ Contains the custom element icons.
-* __clarity-ui.__ Contains the static styles for building HTML components.
-* __clarity-angular.__ Contains the Angular components. This package depends on clarity-ui for styles.
+* __@clr/icons.__ Contains the custom element icons.
+* __@clr/ui.__ Contains the static styles for building HTML components.
+* __@clr/ng.__ Contains the Angular components. This package depends on @clr/ui for styles.
 
 The easiest way to run a sample Angular application with Clarity is to use the [Clarity Seed](https://github.com/vmware/clarity-seed). 
 
@@ -22,34 +22,34 @@ If you already have an Angular application, you can follow the installation step
 
 1. Install Clarity Icons package through npm:
     ```bash
-    npm install clarity-icons --save
+    npm install clr-icons --save
     ```
 
 2. Install the polyfill for Custom Elements: 
     ```bash
     npm install @webcomponents/custom-elements --save
     ```
 
-3. Include the clarity-icons.min.css and clarity-icons.min.js in your HTML. As clarity-icons.min.js is dependent on the Custom Elements polyfill, make sure to include it before clarity-icons.min.js:
+3. Include the clr-icons.min.css and clr-icons.min.js in your HTML. As clr-icons.min.js is dependent on the Custom Elements polyfill, make sure to include it before clr-icons.min.js:
     ```html
-    <link rel="stylesheet" href="path/to/node_modules/clarity-icons/clarity-icons.min.css">
+    <link rel="stylesheet" href="path/to/node_modules/clr-icons/clr-icons.min.css">
 
     <script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
-    <script src="path/to/node_modules/clarity-icons/clarity-icons.min.js"></script>
+    <script src="path/to/node_modules/clr-icons/clr-icons.min.js"></script>
     ```
 
     If your site is built with [angular-cli](https://github.com/angular/angular-cli) you can achieve the above by adding the files to the styles array and 
     scripts array in `angular-cli.json`:
     ```js
     "styles": [
         ...
-        "../node_modules/clarity-icons/clarity-icons.min.css",
+        "../node_modules/clr-icons/clr-icons.min.css",
         ...
     ],
     "scripts": [
         ...
         "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
-        "../node_modules/clarity-icons/clarity-icons.min.js"
+        "../node_modules/clr-icons/clr-icons.min.js"
         ...
     ]
     ```
@@ -58,20 +58,20 @@ If you already have an Angular application, you can follow the installation step
 
 1. Install Clarity UI package through npm:
     ```bash
-    npm install clarity-ui --save
+    npm install @clr/ui --save
     ```
 
-2. Include the clarity-ui.min.css in your HTML file:
+2. Include the clr-ui.min.css in your HTML file:
     ```html
-    <link rel="stylesheet" href="path/to/node_modules/clarity-ui/clarity-ui.min.css">
+    <link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
     ```
 
     If your site is built with [angular-cli](https://github.com/angular/angular-cli), you can achieve the above by adding the file to the styles array in 
     `angular-cli.json`:
     ```js
     "styles": [
         ...
-        "../node_modules/clarity-ui/clarity-ui.min.css"
+        "../node_modules/@clr/ui/clr-ui.min.css"
         ...
     ]
     ```
@@ -83,14 +83,14 @@ If you already have an Angular application, you can follow the installation step
 1. Follow steps above to install Clarity Icons and Clarity UI.
 2. Install the clarity-angular package through npm:
     ```bash
-    npm install clarity-angular --save
+    npm install @clr/ng --save
     ```
 
 3. Import the ClarityModule into your Angular application's module.  Your application's main module might look like this:
     ```typescript
     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
-    import { ClarityModule } from 'clarity-angular';
+    import { ClarityModule } from '@clr/ng';
     import { AppComponent } from './app.component';
 
     @NgModule({
@@ -112,7 +112,7 @@ If you already have an Angular application, you can follow the installation step
     	...
     	map: {
     	   ...
-    	   'clarity-angular': 'node_modules/clarity-angular/clarity-angular.umd.js',
+    	   '@clr/ng': 'node_modules/clr-angular/clr-angular.umd.js',
     	},
     	...
     });

karma.conf.js

@@ -12,7 +12,7 @@ module.exports = function(karma) {
             { pattern: './node_modules/prismjs/components/prism-typescript.min.js', included: true, watched: false},
 
             // Clarity
-            { pattern: './dist/clarity-ui/clarity-ui.min.css', included: true, watched: true },
+            { pattern: './dist/clr-ui/clr-ui.min.css', included: true, watched: true },
 
             // Entry point to all our spec files
             { pattern: "./tests/tests.entry.ts", watched: false }

ng-package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "src": "src/clarity-angular",
-  "dest": "dist/clarity-angular",
+  "src": "src/clr-angular",
+  "dest": "dist/clr-angular",
   "lib": {
     "entryFile": "./public_api.ts"
   }

npm/clarity-angular/README.md → npm/clr-angular/README.md

@@ -2,24 +2,24 @@
 
 1. Install Clarity Icons package through npm:
     ```
-    npm install clarity-icons
+    npm install @clr/icons
     ```
 
 2. Install Clarity UI package through npm:
     ```
-    npm install clarity-ui
+    npm install @clr/ui
     ```
 
 3. Install the clarity-angular package through npm:
     ```
-    npm install clarity-angular
+    npm install @clr/ng
     ```
 
 4. Import the ClarityModule into your Angular application's module.  Your application's main module might look like this:
     ```
     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
-    import { ClarityModule } from 'clarity-angular';
+    import { ClarityModule } from '@clr/ng';
     import { AppComponent } from './app.component';
 
     @NgModule({

npm/clarity-angular/package.json → npm/clr-angular/package.json

@@ -1,11 +1,11 @@
 {
-    "name": "clarity-angular",
+    "name": "@clr/ng",
     "version": "@VERSION",
     "description": "Angular components for Clarity",
-    "es2015": "clarity-angular/clarity-angular.js",
+    "es2015": "clr-angular/clr-angular.js",
     "homepage": "https://vmware.github.io/clarity/",
-    "main": "bundles/clarity-angular.umd.js",
-    "module": "clarity-angular/clarity-angular.es5.js",
+    "main": "bundles/clr-angular.umd.js",
+    "module": "clr-angular/clr-angular.es5.js",
     "repository" : {
         "type" : "git",
         "url" : "git@github.com:vmware/clarity.git"
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^4.3.0",
         "@angular/platform-browser-dynamic": "^4.3.0",
         "@angular/router": "^4.3.0",
-        "clarity-ui": "@VERSION"
+        "@clr/ui": "@VERSION"
     },
     "author": "clarity",
     "license": "MIT",

npm/clr-icons/README.md

@@ -0,0 +1,19 @@
+### Installing Clarity Icons
+
+1. Install Clarity Icons package through npm:
+    ```
+    npm install clr-icons
+    ```
+
+2. Install the polyfill for Custom Elements:
+    ```
+    npm install @webcomponents/custom-elements
+    ```
+
+3. Include the clr-icons.min.css and clr-icons.min.js in your HTML. As clr-icons.min.js is dependent on the Custom Elements polyfill, make sure to include it before clr-icons.min.js:
+    ```
+    <link rel="stylesheet" href="path/to/node_modules/clr-icons/clr-icons.min.css">
+
+    <script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+    <script src="path/to/node_modules/clr-icons/clr-icons.min.js"></script>
+    ```

npm/clarity-icons/package.json → npm/clr-icons/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "clarity-icons",
+    "name": "@clr/icons",
     "version": "@VERSION",
     "description": "Custom Element Icons for Clarity",
     "homepage": "https://vmware.github.io/clarity/",

npm/clr-ui/README.md

@@ -0,0 +1,24 @@
+### Installing Clarity UI
+
+1. Install Clarity UI package through npm:
+    ```
+    npm install @clr/ui
+    ```
+
+2. Install Clarity Icons package through npm:
+    ```
+    npm install @clr/icons
+    ```
+
+3. Include the clr-ui.min.css and clr-icons.min.css files in your HTML file:
+    ```
+    <link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
+    <link rel="stylesheet" href="path/to/node_modules/@clr/icons/clr-icons.min.css">
+    ```
+
+4. Include the clr-icons.min.js in your HTML file:
+    ```
+    <script src="path/to/node_modules/clr-icons/clr-icons.min.js"></script>
+    ```
+
+5. Write your HTML with the Clarity CSS class names and markup.

npm/clarity-ui/package.json → npm/clr-ui/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "clarity-ui",
+    "name": "@clr/ui",
     "version": "@VERSION",
     "description": "CSS for Clarity",
     "homepage": "https://vmware.github.io/clarity/",
@@ -8,7 +8,7 @@
         "url" : "git@github.com:vmware/clarity.git"
     },
     "peerDependencies": {
-        "clarity-icons": "@VERSION"
+        "@clr/icons": "@VERSION"
     },
     "author": "clarity",
     "license": "MIT",