peoplecloud-design-system-1 v1.0.0

Storybook

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. Run npm run storybook for a dev server to run storybook.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run npm run build-storybook to build the storybook.

Run npm run tsc to build typescript package which will be stored in the dist/ directory. Use the --prod flag for a production build. This folder will then be uploaded to package registry.

Running unit tests

Run ng test to execute the unit tests via Karma.

Verdaccio

We are using package directory Verdaccio for publishing and hosting our design packages.

Create an npm account here and keep username, password and email handy.

Development Server

Hosting

• Install verdaccio npm install -g verdaccio
• Run verdaccio in a separate tab. It should be running on port 4873 by default.
• Open directory ~/.config/verdaccio/ and add the above port in config.yaml as below:
• `listen:
  • http://localhost:4873`
• Create a typescript build and update the package version number under package.json.
• Run npm adduser --registry http://localhost:4873 for adding user on verdaccio locally. (It should create .npmrc file with your auth key for this registry)
• Run npm publish --registry http://localhost:4873 for pubshing the package. (Registry can be changed anytime you want to switch). You can check your current registry under .npmrc
• You should now be able to see all your published package in the storage folder under verdaccio.

Accessing in people-cloud

• Run npm set registry http://localhost:4873/ to set which registry you want to access package from. (Again you can verify this in .npmrc)
• Run npm install peoplecloud-design-system to install latest version or npm install peoplecloud-design-system@version for the specific version.