pave-ui

Private component library for the Pave Design System and ParkHub applications.

Install

yarn add @parkhub/pave-ui react react-dom

React 19+ is required as a peer dependency.

Setup

Import global styles in your app SCSS entry:

@use '@parkhub/pave-ui/styles' with (
  $include-grid: true,
  $include-reset: false,
  $include-react-select: true,
  $include-day-picker: true
);

Import components via subpaths:

import { Button } from '@parkhub/pave-ui/Button';
import { Header } from '@parkhub/pave-ui/Header';

Component styles ship as CSS modules with each JS import — no per-component SCSS mixins.

Documentation

| Doc | Contents | |---|---| | how-to-use.md | Components, auth utilities, env variables | | package-exports.md | Subpath import map | | scss-dependencies.md | Global styles, tokens, override policy | | project-context.md | Stack, conventions, greenfield status |

Browse components in Storybook: yarn dev → http://localhost:6006

Development

yarn install
yarn dev               # Storybook on :6006
yarn build             # Library build to dist/
yarn test:unit         # Vitest unit tests
yarn lint:all          # ESLint, Stylelint, type-check
kill $(lsof -ti :6006) # kill running dev server process

Link to a consuming app

yarn global add yalc

# from this repo
yarn build:push

# from your app
yalc add @parkhub/pave-ui

See yalc for update and remove workflows.

Troubleshooting

Invalid hook call during local development — usually duplicate React from linking. Prefer yalc over yarn link. See React's invalid hook call warning.