Mesalvo React UI

Welcome to the US package maintanined by SUS team, inside Mesalvo. This package is a collection of React components that we use in our projects.

Installation

To install the package, run the following command:

npm install @mesalvo/react-ui

Usage

To use the components, import them in your project:

import { ComponentName } from '@mesalvo/react-ui'

Contributing We welcome contributions! If you'd like to contribute to this project, please follow these steps:

Fork this repository.

1. Create your feature branch (git checkout -b feature/YourFeature).
2. Commit your changes (git commit -am 'Add some feature').
3. Push to the branch (git push origin feature/YourFeature).
4. Open a pull request.

To install (in Windows) node lts run

# Download and install fnm:
winget install Schniz.fnm
# Download and install Node.js:
fnm install 24
# Verify the Node.js version:
node -v # Should print "v22.13.1".
# Download and install pnpm:
corepack enable pnpm
# Verify pnpm version:
pnpm -v

How the coverage reports work

React-ui's storybook acts for now as a hub of our React coverage reports. The idea is that each pipeline run, we will generate the coverage json for this package and get the other Frontends by copying their coverage json files to this package (./public/coverage/admin). We serve those JSONs in public folder so anyone can fetch them via http (for example). Then, we will generate a new coverage report with all the data.

Steps done internally in the pipeline

1. Generate the coverage report for react-ui package (via vitest run).

2. Copy the coverage reports from other frontends into public directory (./public/coverage/...). (see ./src/scripts/copy-coverages.ts)

3. We run a custom command to parse from public JSONs to a markdown format (see ./src/scripts/coverage-to-md.mts) and add the file in (./src/tests/coverages/{name}.md)

4. We iterate over the coverages and generate a story for each of them (see ./src/scripts/coverage-story-generator.mts). The stories are generated in (./src/stories/Coverages/{name}.stories.tsx) and are available in the storybook under the "Coverages" section.

Run pnpm update-coverage to trigger steps 2, 3 and 4 locally.

Run pnpm coverage to trigger all steps locally (will take longer as needs to generate the coverage report).