Remondis UI Library

A React component library built with TypeScript, Vite & Storybook—published to npm via GitHub Actions + semantic-release.

See the Storybook

https://storybook.remondis.io/

Features

• React 18
• Storybook 7 - Components preview
• Tailwind CSS 3
• Vite - Run and build the project blazingly fast!
• Vitest - Components Unit Testing
• ESLint & Prettier - Formatting and Linting
• Typescript
• Husky & Lint Staged - Pre-commit Hooks
• Release Please — Generate the changelog with the release-please workflow
• Github Actions — Releasing versions to NPM

Getting Started

Requirements

• Node 20.x
• pnpm 10.x

1. Install dependencies with pnpm i (first run corepack enable to enable pnpm)
2. Run pnpm prepare command to setup Husky pre-commit hooks.

Development

Always prepending pnpm in your local environment:

• dev: Bootstrap the Storybook preview with Hot Reload.
• build: Builds the static storybook project.
• build:lib: Builds the component library into the dist folder.
• lint:fix: Applies linting based on the rules defined in .eslintrc.js.
• format:prettier: Formats files using the prettier rules defined in .prettierrc.
• test: Runs testing using watch mode.
• test:cov: Runs testing displaying a coverage report.

Standards

• Categorize the new component based on the Atomic Design Approach. When in doubt, look for someone to discuss or place it in the upper category.
• Please add tests for each component, especially when different variants are available, to check for unforeseen changes while commiting.
• Please add proper types for each component and export them if they might be useful in the projects the library is implemented in.
• Use proper naming for the properties. Some of the components are inheriting properties from the respective HTML-Elements, an additional property like isDisabled would be useless if there is already a disabled one.
• Try to manage custom styling properties through a ``className`-property.
• Where possible, use the Icon-Component instead of inline svg.
• Please check if any dependencies can be updated. (Note: update to React 19 might cause some issues with the projects if they are using 18 or below)

Release Process

The Github Action for releasing a new version of the package consists of the following steps:

Triggered on push to staging (prerelease) or main (stable):

1. Checkout & Setup Node 20
2. Install pnpm & deps
3. Run tests
4. Build
5. Run Semantic Release
   1. Analyzes commits (Conventional Commits)
   2. Bumps version in package.json
   3. Updates CHANGELOG.md
   4. Commits CHANGELOG.md, dist/**, package.json
   5. Creates GitHub Release
   6. Publishes npm package under correct dist-tag
6. The version in package.json will be bumped by this run

Conventional commit types

build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
ci: Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
chore: Changes which doesn't change source code or tests e.g. changes to the build process, auxiliary tools, libraries
docs: Documentation only changes
feat: A new feature
fix: A bug fix
perf: A code change that improves performance
refactor: A code change that neither fixes a bug nor adds a feature
revert: Revert something
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
test: Adding missing tests or correcting existing tests

fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.

Dry run and manual release

pnpm test
pnpm run build:lib
npx semantic-release --dry-run

To force a release: commit a Conventional-Commit to staging or main, and let Actions handle the rest.