Skip to content

DEVELOPMENT.md

Latest commit

 

History

History
107 lines (70 loc) · 2.57 KB

DEVELOPMENT.md

File metadata and controls

107 lines (70 loc) · 2.57 KB

Development

After forking the repo from GitHub:

git clone https://github.com/(your-name-here)/ui
cd ui
bun install

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

Alternatively, use Nix for a fully reproducible environment:

nix develop

Building

Run tsdown locally to build source files from src/ into output files in lib/:

bun build

Run in watch mode for continuous rebuilds:

bun dev

Formatting

Biome is used for formatting and linting. It runs automatically on staged files via a Husky pre-commit hook.

To manually format all files:

bun format

Linting

Several linting tools are configured:

  • bun lint (Biome): Lints and formats JavaScript/TypeScript source files
  • bun lint:knip (knip): Detects unused files, dependencies, and code exports
  • bun lint:spelling (cspell): Spell checks across all source files

Testing

Vitest is used for tests:

bun test

With coverage:

bun test --coverage

console-fail-test is enabled for all test runs. Calls to console.log, console.warn, and other console methods will cause a test to fail.

Test categories

  • Unit tests (*.test.ts) — component styling and behavior
  • Performance regression tests (*.perf.test.ts) — GPU-friendly transitions, DOM budgets, data-slot tracking
  • Source-level guards (perf-guards.test.ts, quality-guards.test.ts) — scan all component files for anti-patterns
  • Export surface (export-surface.test.ts) — snapshot of public API to catch accidental removals

Debugging Tests

This repository includes a VS Code launch configuration for debugging unit tests. To launch it, open a test file, then run Debug Current Test File from the VS Code Debug panel (or press F5).

Storybook

Preview components locally:

bun storybook

Build a static Storybook:

bun build-storybook

The Storybook UI uses the ResQ dark theme by default with a toolbar toggle for light mode.

Type Checking

bun tsc

Add --watch for continuous type checking:

bun tsc --watch