nubra-palette

Shared UI component library for Nubra apps. Built with React, Tailwind CSS, and CVA.

Setup

pnpm install

Development

pnpm dev              # Watch mode — rebuilds on file changes + pushes to yalc
pnpm storybook        # Launch Storybook at http://localhost:6006
pnpm build            # Production build (ESM + CJS + DTS)
pnpm typecheck        # Type check
pnpm lint             # ESLint
pnpm lint:fix         # ESLint auto-fix + Prettier format
pnpm format           # Prettier format all files

Local Development with nubra-frontend (yalc)

Uses yalc to link the local build into nubra-frontend during development. Production uses the npm registry.

Prerequisites

npm i -g yalc

First-time setup

# In nubra-palette
pnpm build
pnpm yalc:publish

# In nubra-frontend
pnpm yalc:link
pnpm install

Daily development

# Terminal 1 — nubra-palette (watches + auto-pushes to yalc on each rebuild)
pnpm dev

# Terminal 2 — nubra-frontend
pnpm dev

Changes in nubra-palette are automatically pushed to nubra-frontend via yalc. Turbopack picks up the file changes and hot-reloads.

Before committing in nubra-frontend

pnpm yalc:remove   # restores the npm registry version in package.json

The .yalc/ directory and yalc.lock are gitignored, but yalc:remove also cleans up the dependency reference.

Documentation

docs/
├── components/     # Per-component API reference
│   ├── button.md
│   ├── heading.md
│   ├── body.md
│   ├── label.md
│   ├── value.md
│   └── ...
├── code-standards.md
└── tooling-setup.md

Consumer Setup

1. Install from npm:

pnpm add nubra-palette

2. Add transpilePackages in next.config.js:

const nextConfig = {
  transpilePackages: ['nubra-palette'],
};

3. Add the Tailwind preset in tailwind.config.ts:

import nubraPalettePreset from 'nubra-palette/tailwind-preset';

export default {
  presets: [nubraPalettePreset],
  content: [
    // ...existing paths
    './node_modules/nubra-palette/dist/**/*.js',
  ],
};

The preset injects all design tokens as CSS custom properties and covers 6 themes automatically: Blue (light/dark), High Contrast (light/dark), and Olive (light/dark).

4. Import styles and components:

// Root layout
import 'nubra-palette/styles';

// Components
import { Button, H1, H3, Body, Label, Value } from 'nubra-palette';