CU-869ey5w0n_UIKit-unit-test

.github/workflows/build-deploy-storybook.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 24.x
+          node-version-file: .nvmrc
 
       - name: Install dependencies
         run: npm ci

.github/workflows/test-and-coverage.yml

@@ -0,0 +1,34 @@
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+name: Test and coverage
+jobs:
+  test_and_coverage:
+    name: Test and coverage
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checking out
+        uses: actions/checkout@master
+        with:
+          # Disabling shallow clone is recommended for improving relevancy of reporting
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+      - name: Install dependencies
+        run: npm ci
+        env:
+          GITHUB_TOKEN: ${{ secrets.BEP_GITHUB_TOKEN }}
+      - name: Test and coverage
+        run: npm run test:coverage
+      - name: Verify coverage report
+        run: test -s coverage/lcov.info
+      - name: SonarQube Scan
+        uses: SonarSource/sonarqube-scan-action@v7
+        env:
+          SONAR_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }}

README.md

@@ -1,59 +1,120 @@
-# BepowerUiKit
+# BePower UI Kit
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.4.
+[![Quality gate status](https://sonarcloud.io/api/project_badges/measure?project=BePower_ui-kit&metric=alert_status&token=affaccf10d2a93c9969767e9c53063e30ef8e5d2)](https://sonarcloud.io/summary/new_code?id=BePower_ui-kit)
 
-## Development server
+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.
 
-To start a local development server, run:
+- [Library and consumer documentation](./projects/ui-kit/README.md)
+- [Component documentation](./projects/ui-kit/docs/ui-elements.md)
+- [Interactive Storybook](https://app-ui-kit.bepower.tech)
+
+## Requirements
+
+- Node.js `v24.17.0`, defined in [`.nvmrc`](./.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
+
+```bash
+nvm use
+npm ci
+```
+
+## Storybook
+
+Run the interactive component documentation locally:
+
+```bash
+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:
 
 ```bash
-ng serve
+npm run storybook:build
 ```
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+The output is written to `storybook-static/ui-kit`.
+
+## Unit tests
 
-## Code scaffolding
+Run the complete Vitest suite once:
+
+```bash
+npm test
+```
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+Additional commands:
 
 ```bash
-ng generate component component-name
+npm run test:watch
+npm run test:coverage
+npm run test:typecheck
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+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:
 
 ```bash
-ng generate --help
+npm run build
 ```
 
-## Building
+The package is written to `dist/ui-kit`.
 
-To build the project run:
+Use watch mode when a local consumer is linked to the generated package:
 
 ```bash
-ng build
+npm run watch
 ```
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+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.
 
-## Running unit tests
+## Icons
 
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+Source SVG files are stored in `icons/`. Import or update the generated TypeScript icon registry
+with:
 
 ```bash
-ng test
+npm run icons:import
 ```
 
-## Running end-to-end tests
+See the [icon importing guide](./projects/ui-kit/src/lib/components/icon/IMPORTING_ICONS.md) 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](./.github/workflows/test-and-coverage.yml).
+
+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
 
-For end-to-end (e2e) testing, run:
+Build the library, then publish the generated package:
 
 ```bash
-ng e2e
+npm run build
+npm publish ./dist/ui-kit
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+Keep the leading `./` in the package path; otherwise npm may interpret `dist/ui-kit` as a remote
+package reference.
 
-## Additional Resources
+## Continuous integration
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- Pull requests and pushes to `main` run tests, coverage, and SonarQube Cloud checks.
+- Pushes to `main` build and deploy Storybook to GitHub Pages.