Permalink
Browse files

Updated readme.md and package.json

Other changes:

- updated gitignore to ignore typings
- web-animations-js integrated

Signed-off-by: Shijir Tsogoo <stsogoo@vmware.com>
  • Loading branch information...
Shijir committed Dec 7, 2016
1 parent f9e810b commit 33ca3f3d6c13b5bbf1bdc0a18ee0f63a24e8c287
Showing with 696 additions and 262 deletions.
  1. +1 −0 .gitignore
  2. +20 −61 README.md
  3. +63 −62 angular-cli.json
  4. +57 −51 package.json
  5. +6 −7 src/index.html
  6. +3 −0 src/polyfills.ts
  7. +5 −0 typings.json
  8. +541 −81 yarn.lock
View
@@ -2,6 +2,7 @@ coverage/
dist/
html-report/
node_modules/
typings/
**/*npm-debug.log.*
**/*yarn-error.log.*
.idea/
View
@@ -4,34 +4,39 @@ Clarity Seed
============
This is a seed project for Angular 2 applications using [Clarity](https://github.com/vmware/clarity). For more information on the Clarity Design System, visit the [Clarity website](https://vmware.github.io/clarity/).
We offer this seed project in two different build systems:
We offer this seed project in three different build systems:
A. Angular-CLI (master branch)
B. SystemJS and Gulp (systemjs branch)
1. **Angular-CLI version (branch: master)**
2. Webpack 2 version (branch: webpack)
3. SystemJS version (branch: systemjs)
Getting started
----------------------------------
#### A. Angular-CLI based version
#### Angular-CLI version
This seed version provides the following out of the box:
- Angular 2 application with [clarity-icons](https://www.npmjs.com/package/clarity-icons), [clarity-ui](https://www.npmjs.com/package/clarity-ui) and [clarity-angular](https://www.npmjs.com/package/clarity-angular) included
- Of course, all the goodies that come with [Angular-CLI](https://github.com/angular/angular-cli#generating-and-serving-an-angular2-project-via-a-development-server)
*Prerequisite*: Please install Angular-CLI by following [these instructions](https://github.com/angular/angular-cli#installation).
- Development and production builds
- Unit test setup with Jasmine and Karma
- End-to-end test setup with Protractor
- SASS processor
- TSLint
- And other goodies that come with [Angular-CLI](https://github.com/angular/angular-cli#generating-and-serving-an-angular2-project-via-a-development-server) (v1.0.0-beta.20-4)
#### Installation
*Prerequisite*: Please install Angular-CLI by following [these instructions](https://github.com/angular/angular-cli#installation).
*Note*: Even though it's optional, we recommend you to use [yarn](https://yarnpkg.com/) instead of `npm install` for installing the dependencies.
```bash
git clone https://github.com/vmware/clarity-seed.git
cd clarity-seed
# install the project's dependencies
yarn # or run "npm install"
yarn # or run "npm install"
# starts the application in dev mode and watches your files for livereload
ng serve
@@ -70,67 +75,20 @@ ng build --prod
## Documentation
For documentation on the Clarity Design System, including a list of components and example usage, see [our website](https://vmware.github.io/clarity).
#### B. SystemJS based version
This seed version provides the following out of the box:
- Angular 2 application with [clarity-icons](https://www.npmjs.com/package/clarity-icons), [clarity-ui](https://www.npmjs.com/package/clarity-ui) and [clarity-angular](https://www.npmjs.com/package/clarity-angular) included
- Development and production builds
- Unit test setup with [Jasmine](https://jasmine.github.io/) and [Karma](https://karma-runner.github.io/)
- Code coverage on unit tests with [Istanbul](http://gotwarlost.github.io/istanbul/)
- End-to-end test setup with [Protractor](http://www.protractortest.org/)
- Development server with browsersync
- SASS processor
- TSLint
#### Installation
*Note*: Even though it's optional, we recommend you to use [yarn](https://yarnpkg.com/) instead of `npm install` for installing the dependencies.
```bash
git clone -b systemjs https://github.com/vmware/clarity-seed.git
cd clarity-seed
# install the project's dependencies
yarn # or run "npm install"
# starts the application in dev mode and watches your files for livereload
npm start
```
#### Test and build scripts
```bash
# running unit tests
npm test
# running e2e tests
npm run test.e2e
# dev build
npm run build.dev
# prod build
npm run build.prod
```
## Documentation
For documentation on the Clarity Design System, including a list of components and example usage, see [our website](https://vmware.github.io/clarity).
#### Directory structure
```
.
├── README.md
├── gulpfile.js <- configuration of the gulp tasks
├── karma.conf.js <- configuration of the test runner
├── karma-test-shim.js <- shim for test runner
├── package.json <- dependencies of the project
├── protractor.config.js <- e2e tests configuration
├── src <- source code of the application
│   ├── app
│   │   └── components
├── src/ <- source code of the application
│   ├── app/
│   │   └── component/
│   │   └── <component>.component.html
│   │   └── <component>.component.scss
│   │   └── <component>.component.spec.ts
@@ -143,6 +101,7 @@ For documentation on the Clarity Design System, including a list of components a
│   │   └── app.routing.ts
│   │   └── main.ts <- boostrap file for the angular app
│   └── index.html
├── angular-cli.json <- configuration of the angular-cli
├── tsconfig.json <- configuration of the typescript project
├── tslint.json <- sample configuration file for tslint
└── yarn.lock
View
@@ -1,66 +1,67 @@
{
"project": {
"version": "1.0.0-beta.20-4",
"name": "clarity-seed"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"images",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/clarity-icons/clarity-icons.min.css",
"../node_modules/clarity-ui/clarity-ui.min.css",
"styles.css"
],
"scripts": [
"../node_modules/es6-shim/es6-shim.min.js",
"../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
"../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"../node_modules/clarity-icons/clarity-icons.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.config.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
"project": {
"version": "1.0.0-beta.20-4",
"name": "clarity-seed"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"images",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/clarity-icons/clarity-icons.min.css",
"../node_modules/clarity-ui/clarity-ui.min.css",
"styles.css"
],
"scripts": [
"../node_modules/es6-shim/es6-shim.min.js",
"../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
"../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"../node_modules/clarity-icons/clarity-icons.min.js",
"../node_modules/web-animations-js/web-animations.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.config.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
}
View
@@ -1,53 +1,59 @@
{
"name": "clarity-seed",
"version": "0.6.0",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/forms": "2.2.3",
"@angular/http": "2.2.3",
"@angular/platform-browser": "2.2.3",
"@angular/platform-browser-dynamic": "2.2.3",
"@angular/router": "3.2.3",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"clarity-angular": "^0.7.3",
"clarity-icons": "^0.7.3",
"clarity-ui": "^0.7.3",
"core-js": "^2.4.1",
"es6-shim": "^0.35.1",
"mutationobserver-shim": "^0.3.2",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "2.2.3",
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.20-4",
"codelyzer": "~1.0.0-beta.3",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
"name": "clarity-seed",
"version": "0.7.0",
"description": "Angular-CLI starter for a Clarity project",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"typings": "typings",
"postinstall": "typings install",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.2.3",
"@angular/compiler": "2.2.3",
"@angular/core": "2.2.3",
"@angular/forms": "2.2.3",
"@angular/http": "2.2.3",
"@angular/platform-browser": "2.2.3",
"@angular/platform-browser-dynamic": "2.2.3",
"@angular/router": "3.2.3",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"clarity-angular": "^0.7.3",
"clarity-icons": "^0.7.3",
"clarity-ui": "^0.7.3",
"core-js": "^2.4.1",
"es6-shim": "^0.35.1",
"mutationobserver-shim": "^0.3.2",
"web-animations-js": "^2.2.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "2.2.3",
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.20-4",
"codelyzer": "~1.0.0-beta.3",
"enhanced-resolve": "^3.0.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"typings": "^1.4.0",
"webdriver-manager": "10.2.5"
}
}
View
@@ -1,14 +1,13 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clarity Seed App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
<meta charset="utf-8">
<title>Clarity Seed App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
</head>
<body>
<my-app>Loading...</my-app>
<my-app>Loading...</my-app>
</body>
</html>
Oops, something went wrong.

0 comments on commit 33ca3f3

Please sign in to comment.