BePower UI Kit

Angular and Ionic component library implementing the BePower design system. Components are standalone, use native Shadow DOM encapsulation, and expose shared foundations for colors, typography, spacing, sizes, and shadows.

• Library and consumer documentation
• Component documentation
• Interactive Storybook

Requirements

• Node.js v24.17.0, defined in .nvmrc
• npm 11.13.0, defined by the packageManager field in package.json

GitHub Actions also reads .nvmrc, so local development and CI use the same Node.js version.

Setup

nvm use
npm ci

Storybook

Run the interactive component documentation locally:

npm run storybook

Storybook imports the library sources directly and does not require a build of dist/ui-kit.

Generate the static Storybook website with:

npm run storybook:build

The output is written to storybook-static/ui-kit.

Unit tests

Run the complete Vitest suite once:

npm test

Additional commands:

npm run test:watch
npm run test:coverage
npm run test:typecheck

The tests run directly against the library sources in memory and do not build or modify dist/ui-kit. Coverage reports are generated in coverage/; the configured thresholds require 100% statements, branches, functions, and lines for the measured runtime code.

Library development

Build the publishable package:

npm run build

The package is written to dist/ui-kit.

Use watch mode when a local consumer is linked to the generated package:

npm run watch

Watch mode continuously rebuilds dist/ui-kit, so it should not be run at the same time as tasks that expect the linked output to remain unchanged.

Icons

Source SVG files are stored in icons/. Import or update the generated TypeScript icon registry with:

npm run icons:import

See the icon importing guide for file naming and variant conventions.

Quality analysis

Pull requests run unit tests, generate the LCOV report, and execute the SonarQube Cloud scanner through the test and coverage workflow.

The CI scanner reads sonar-project.properties, which defines the source scope, analysis exclusions, and the LCOV report generated in coverage/lcov.info. Automatic Analysis must remain disabled in SonarQube Cloud while this workflow is active.

Publishing

Build the library, then publish the generated package:

npm run build
npm publish ./dist/ui-kit

Keep the leading ./ in the package path; otherwise npm may interpret dist/ui-kit as a remote package reference.

Continuous integration

• Pull requests and pushes to main run tests, coverage, and SonarQube Cloud checks.
• Pushes to main build and deploy Storybook to GitHub Pages.