Scrums.comSorted UI@scrums/sorted-ui v0.1.0scrums.com
Getting Started@scrums/sorted-ui v0.1.0
/01The package

@scrums/sorted-ui v0.1.0 is a private, repo-internal workspace library — there is no npm publish and no install step. It ships as TypeScript source (main: src/index.ts); consuming apps resolve it by path from the monorepo at 04-build/platform/ui/src and compile it with their own toolchain.

Exports map
{
  ".": "./src/index.ts",
  "./tokens/tokens.css": "./src/tokens/tokens.css",
  "./components/*": "./src/components/*"
}
Peer dependencies

react >=18 · react-dom >=18 — the library brings no runtime dependencies of its own.

/02Importing

69 built components are re-exported from the barrel (src/index.ts). Import named components from the package root, or a single component via the ./components/* subpath.

// barrel — every built component is a named export
import { Button, NavBar, Hero } from "@scrums/sorted-ui";

// per-component subpath (exports map "./components/*")
import { Button } from "@scrums/sorted-ui/components/Button/Button";

// design tokens (plain CSS custom properties)
import "@scrums/sorted-ui/tokens/tokens.css";
/03Astro usage — www.scrums.com

The marketing site (03-grow/market/web/agt-web-site/app) consumes the library through a Vite alias in astro.config.mjs — resolved relative to the config file so the build works in the Codespace and on CI alike.

const UI_SRC = fileURLToPath(new URL("../../../../../04-build/platform/ui/src", import.meta.url));

// astro.config.mjs — vite.resolve.alias (array form)
alias: [
  { find: /^@scrums\/sorted-ui\/tokens\/tokens\.css$/, replacement: `${UI_SRC}/tokens/tokens.css` },
  { find: /^@scrums\/sorted-ui$/, replacement: `${UI_SRC}/index.ts` },
],
// plus: vite.server.fs.allow includes UI_SRC (the library lives outside the app root)

Components render as Astro islands. Site law: only the NavBar hydrates (client:load, for its dropdowns and mobile drawer) — every other page stays static, zero-JS. The React integration exists only for the chrome and the internal component gallery.

---
// src/layouts/Layout.astro
import "@scrums/sorted-ui/tokens/tokens.css";
import { NavBar, Footer } from "@scrums/sorted-ui";
---
<header><NavBar client:load ctaHref={START_URL} loginHref={PLATFORM_URL} searchHref="/products" /></header>
<main><slot /></main>
<Footer pageUrl={`https://www.scrums.com${path}`} />
/04Next.js usage — the catalog's mirrored chrome

The products catalog (Next.js) does not import this package. Its chrome — NavBar, Footer, NotificationBar, AnchorStrip — is a set of hand-copied TSX mirrors at 04-build/products/catalog/agt-catalog-app/app/src/components/chrome/. The fork is documented as intentional (reconciliation item R-1: React + bundler friction pulling a workspace lib into OpenNext).

  • CHANGE ONE, CHANGE THE OTHER. Class names, link order, and enhancer scripts match on purpose so a markup diff can assert parity. Any edit to a chrome component in this library must land in the catalog mirror too, and vice versa.
  • One sanctioned divergence: the search href — /products/search in the catalog (where the palette runs), /products on the Astro side.
/05The tokens contract

src/tokens/tokens.css is the single source of truth for every design token — plain CSS custom properties, no Tailwind or Webflow dependency. Both apps consume it: the Astro site imports @scrums/sorted-ui/tokens/tokens.css globally in Layout.astro; the catalog mirrors the chrome tokens it needs into its app/globals.css (the constant navy chrome that never themes) under the same change-both rule.

  • No raw hex and no font-family string outside tokens.css — typing #135BFF or "IBM Plex Mono" in a component is a defect.
  • Tokens are declared on both :host and :root: :root never matches inside a shadow root, so :host is what makes vars resolve in shadow-DOM components. Keep both.