@dancingteeth/rep-leaderboards-ui

Public npm package: REP Leaderboards reference screen (RepLeaderboardsScreen) aligned with Figma REP_WEB_ASSETS_SOURCE and **@dancingteeth/rep-design** (rep-cmp-*, rep-type-*).

Install

npm install @dancingteeth/rep-leaderboards-ui @dancingteeth/rep-design

Peer: React 19 (react, react-dom). Tailwind v4 is expected where you use the design-system CSS.

Bundler: assets are wired with Vite-style **?url imports** from this package so they end up in your app’s dist/. Use Vite, or configure your bundler to treat ?url the same way (e.g. Next.js App Router often needs explicit handling / transpilePackages).

What you get

• **RepLeaderboardsScreen** — full-screen demo layout (sidebar + main + table).
• **repLeaderboardAssets** — URLs resolved from files shipped in this package (assets/rep-leaderboards/*) via import.meta.url (works with Vite and other bundlers that resolve dependency assets).
• **figmaTraceAttrs** — optional data-* trace on the screen root.

Assets (in the tarball)

Raster/SVG live under **assets/rep-leaderboards/** in the published package. You do not need to copy them into public/rep-leaderboards/ for the screen to work in a normal Vite build.

Refreshing from Figma (maintainers, monorepo): canonical exports stay in apps/web/public/rep-leaderboards/. Then run from repo root:

pnpm --filter @dancingteeth/rep-leaderboards-ui sync-assets

CSS

Import the same chain as the example app (Tailwind v4 + REP tokens + layout utilities), for example:

• @import "@dancingteeth/rep-design/rep-design-system.css";
• @import "@dancingteeth/rep-design/rep-components.css";
• @source / @import paths so Tailwind scans this package’s src (see examples/rep-leaderboards-vite/src/index.css).

Runnable reference (stakeholders)

In this repository:

pnpm install
pnpm dev:leaderboards-example

Opens http://localhost:5174 (Vite example that depends on this package from the workspace).

v0: Stakeholders can import the monorepo via v0 Git Import and work from the repo root (full tree so apps/web/public/rep-leaderboards/ exists for predev). Then **pnpm dev:leaderboards-example. Details: **examples/rep-leaderboards-vite/README.md → Share with stakeholders (v0).

Publish (maintainers)

Primary path (same as @dancingteeth/rep-design): run pnpm changeset at the repo root, include **@dancingteeth/rep-leaderboards-ui**, merge to main. The Release workflow uses **secrets.NPM_TOKEN**, verifies this package, then **changeset publish** to https://registry.npmjs.org (see .github/workflows/release.yml).

Manual / dry run (local):

pnpm verify:rep-leaderboards-ui
pnpm rep-leaderboards-ui:publish:dry
pnpm -C packages/rep-leaderboards-ui publish --access public

prepublishOnly runs the verify script. Keep **@dancingteeth/rep-design** within the semver range in this package’s dependencies before publishing.

Changelog

See CHANGELOG.md.