@teambuildr/ui

TeamBuildr's shared UI component library. Published as a public scoped package (@teambuildr/ui) to the npm registry (npmjs.com) — publicly installable, but internal-only in practice — and consumed by the TeamBuildr webapp.

Installing in another project (e.g. webapp)

The package is public, so no npm auth or .npmrc setup is required to install it.

Installing the package:

npm install @teambuildr/ui --legacy-peer-deps

(The --legacy-peer-deps flag works around pre-existing peer dependency conflicts in webapp.)

Using components:

import { Button, Spinner } from '@teambuildr/ui';

<Button name="Click me" onClick={() => console.log('clicked')} />

Getting started (for contributors)

Requires Node 22. If you use nvm:

nvm use

Install dependencies:

npm install

Development

npm run dev          # Watch mode — rebuilds on file changes
npm run storybook    # Start Storybook at localhost:6006

Building

npm run build        # Outputs CJS + ESM + type declarations to dist/

Linting & formatting

npm run lint         # Check for lint and formatting issues
npm run format       # Auto-fix formatting

Powered by Biome. Rules are explicitly configured in biome.json — single quotes, semicolons, trailing commas (ES5), tabs for indentation.

Publishing

Releases are managed via Changesets and published automatically to the npm registry (npmjs.com) on merge to main.

CI publishes via npm Trusted Publishing — GitHub Actions proves its identity to npm with a short-lived OIDC token (id-token: write permission in release.yml), so there's no long-lived NPM_TOKEN secret to store or rotate. The @teambuildr/ui package's Trusted Publisher is configured on npmjs.com to trust the TeamBuildr/ui repo's release.yml workflow specifically.

To add a changeset when opening a PR:

npx changeset

Follow the prompts to classify the change (patch / minor / major) and write a short description. Commit the generated file alongside your code changes.

Project structure

src/
  index.ts              # Public API — all exports go through here
  components/           # React components (added as library grows)
.storybook/             # Storybook configuration
.changeset/             # Pending changesets (auto-managed)
dist/                   # Build output (not committed)

Tech stack

• TypeScript — all source code
• tsup — bundler (outputs CJS + ESM)
• Storybook 10 — component development and documentation
• Biome — linting and formatting
• Changesets — versioning and changelog
• npm — public scoped package, published to npmjs.com under the @teambuildr org scope