@dotcomjungle/built2buy-ui

Built2Buy's shared UI: brand design tokens and React component primitives, consumed at build time by every Built2Buy entity — the websites and the WordPress-embedded React apps. One source of truth for the brand look.

Scope, approach, epics, and tasks are tracked in the Bridge task board as the "Built2Buy UI — Shared Design System (@built2buy/ui)" initiative (the system of record), not in this repo.

What's here (v0.1 seed)

src/
  tokens.css            Brand design tokens (color, type, spacing, radius, shadow)
  index.js              Barrel export of the primitives
  components/           Button, Card, DataTable, Badge, Notice, Field, PageHeader

These were authored and brand-reviewed inside Built2BuyMail and proven on a live install, then lifted here unchanged. Built2BuyMail is the reference consumer.

Use it

Tokens (available now — adopt everywhere):

@import '@dotcomjungle/built2buy-ui/tokens.css';
/* or copy src/tokens.css until the package is wired into your build */

Then style with the variables: var(--b2b-button-blue), var(--b2b-font-heading), var(--space-lg), etc.

Components (after phase 1 — see CHARTER.md):

import { PageHeader, Card, DataTable, Button, Badge } from '@dotcomjungle/built2buy-ui';
import '@dotcomjungle/built2buy-ui/tokens.css';
import '@dotcomjungle/built2buy-ui/styles.css';

Each WordPress-embedded app already runs its own webpack/wp-scripts build, so it installs this package and bundles the primitives in — no runtime module sharing needed.

Conventions

• Plain CSS driven by tokens (not Bootstrap) — matches the Bridge website.
• Headings: Urbanist. Body: Inter. Teal appears on every screen.
• No SVG logos; PNG brand assets only.

Releasing a new version

This package publishes to GitHub Packages (@dotcomjungle scope) on every version tag:

1. npm version patch|minor|major (updates package.json and creates a git tag)
2. git push --follow-tags
3. The tag push triggers .github/workflows/publish.yml, which builds, runs the test suite, and publishes — no manual npm publish needed.

Consumers pin a semver range (e.g. ^0.1.0) in their own package.json, so patch/minor releases are picked up on their next install with no changes on their end; a major bump requires them to update the range deliberately.

Ideated And Architected By Steve Rice For Dotcomjungle and Built2Buy.