WCG UI Kit

Stencil Library with angular and react outputs documented in the playbook. This is an example architecture of how this can work.

Table of Contents

• Requirements
• Getting Started
• Available Yarn Scripts
• Generate Library Items
• Environments
• Publishing

Requirements

• node >= v10.16.3

Getting Started

Setup the project:

$ yarn setup && yarn build

Start all everything

$ yarn start

Available Scripts

| Command | Description | | ---------------------------- | --------------------------------------------------------------------| | yarn build | Build everything | | yarn build:angular | Build the angular example application | | yarn build:playbook | Build the playbook documentation static site | | yarn build:react | Build the react example application | | yarn build:stencil:angular | Build the angular wrapper library of the stencil component library | | yarn build:stencil:react | Build the react wrapper library of the stencil component library | | yarn build:stencil | Build the stencil library | | yarn clean | Remove all node modules, lock files, and compiled/ignored code | | yarn lint:angular | Lint the angular example application | | yarn lint:js | Lint all .js files | | yarn lint:scss | Lint all .scss files | | yarn lint:stencil | Lint the stencil library | | yarn lint | Lint everything | | yarn serve:playbook | Start the playbook server | | yarn setup | Install, link, and build all necessary packages to get started | | yarn start | Start and watch everything | | yarn start:angular | Start and watch the angular example application | | yarn start:react | Start and watch the react example application | | yarn start:stencil | Start and watch the stencil library | | yarn test | Test the stencil library | | yarn test:watch | Test the stencil library in watch mode |

Generate Library Items

In order to generate a new stencil component:

$ wcg --cmd generate --type component --name <component-name>

To generate an example for a component:

$ wcg --cmd generate --type example --name <component-name> --exampleName <example-name> --playbookDir <playbook-group-name>

After Generating a new component or an example remember to run a new build:

$ yarn build

Environments

| Environment | Url | Branch | | ------------|---------------------------------------------------------|---------| | DEV | TBD | develop | | QA | TBD | qa | | PROD | TBD | master |

Publishing

Update package versions

To change the version number in all package.json files, in the root directory, run the following command, replacing <update_type> with one of the semantic versioning release types (patch, major, or minor)

$ node bin/release <update_type>

Build all libraries and docs:

$ yarn build

Publish all packages:

$ node bin/publish

Commit and push the changes:

git add .
git commit -m "Release <version>"
git push