CWP Design System

Angular component library for reusable CWP UI components (button, banner, badge, and more).

Build library package

1. Install dependencies:

npm install

2. Build npm package artifacts:

npm run build:lib

Output is generated in dist/cwp-design-system.

3. Create a tarball for local testing:

npm run pack:lib

This creates a .tgz package from dist/cwp-design-system.

Publish to npm

1. Update name and version in package.json.
2. Build package:

npm run build:lib

3. Publish:

npm publish ./dist/cwp-design-system --access public

Consume in another Angular package/app

Install:

npm install cwp-design-system

Use standalone components directly:

import { Component } from '@angular/core';
import { ButtonComponent, BannerComponent, BadgeComponent } from 'cwp-design-system';

@Component({
	selector: 'app-demo',
	standalone: true,
	imports: [ButtonComponent, BannerComponent, BadgeComponent],
	template: `
		<cwp-banner message="Changes saved" type="success"></cwp-banner>
		<cwp-badge label="New" variant="primary"></cwp-badge>
		<cwp-button label="Continue"></cwp-button>
	`,
})
export class DemoComponent {}

Public API

Exports are defined in src/public-api.ts. Add new components there to expose them in the package.