Overview

@workspace/ui-training is the React layer of the training product model, shared by apps/app and apps/admin. It ships dumb components only: cells, badges, labels, filters, preview sections and deal cards. Pages, routes, layouts, mutations and queries stay in the apps.

Placement rule

Subject	Package
Card, auction, trick, deal diagram	`@workspace/ui-bridge`
Deal metadata, student, group, session, account, collection, sharing	`@workspace/ui-training`
Route, page, layout, actions, queries	the consuming app

ViewModels, never the model

The package never imports @workspace/training, not even a type (lint-enforced). Each component describes its data with an XxxViewModel type exported next to it; the DTO → ViewModel mappers live in the consuming app. See ViewModel and Architecture.

Strings

Copy goes through a per-module Strings Provider (createStringsProvider from @workspace/shared-react) with English defaults. apps/app mounts the providers with its translations; apps/admin mounts none and renders the defaults.

Provider	Hook	Module
`DealRowStringsProvider`	`useDealRowStrings`	`deal/strings`
`DealFilterStringsProvider`	`useDealFilterStrings`	`deal/filters/strings`
`DealPreviewStringsProvider`	`useDealPreviewStrings`	`deal/preview/strings`
`BoardCardStringsProvider`	`useBoardCardStrings`	`deal/board-card/strings`
`UserCellStringsProvider`	`useUserCellStrings`	`user/strings`
`UserSearchStringsProvider`	`useUserSearchStrings`	`user/strings`
`AccountHandleStringsProvider`	`useAccountHandleStrings`	`account/strings`

Client boundary

Interactive components mark themselves with import "client-only". Apps own their "use client" boundaries; the package never declares them.

Setup

package.json

{ "dependencies": { "@workspace/ui-training": "workspace:*" } }

globals.css

@import "@workspace/ui-training/styles.css";

The stylesheet only registers the package sources with Tailwind (@source), so its utility classes are generated in the consuming app.

Sub-path exports

Import path	Exports
Account
`@workspace/ui-training/account/account-handle-settings`	AccountHandleSettings
`@workspace/ui-training/account/account-handle-view-model`	AccountHandleViewModel
`@workspace/ui-training/account/account-handle-availability-view-model`	AccountHandleAvailabilityViewModel, AccountHandleUnavailableReason
`@workspace/ui-training/account/strings`	AccountHandleStrings provider and hook
Deal
`@workspace/ui-training/deal/level`	Level, levelColorVariants
`@workspace/ui-training/deal/level-view-model`	LevelViewModel
`@workspace/ui-training/deal/deal-row-view-model`	DealRowViewModel and its parts
`@workspace/ui-training/deal/vote-view-model`	VoteViewModel
`@workspace/ui-training/deal/strings`	DealRowStrings provider and hook
`@workspace/ui-training/deal/cells/*`	Table cells (author, board number, code, date, name, status, supported languages, themes list, visibility, vote)
`@workspace/ui-training/deal/filters/*`	ThemeFilterSubmenu, strings
`@workspace/ui-training/deal/filters/theme-filter-option-view-model`	ThemeFilterOptionViewModel
`@workspace/ui-training/deal/preview/*`	ComplementSection, ThemesPreviewSection, OrphanedAuthorBadge, strings
`@workspace/ui-training/deal/preview/deal-preview-metadata-view-model`	DealPreviewMetadataViewModel, DealPreviewAuthor, DealPreviewVotes
`@workspace/ui-training/deal/preview/deal-preview-auction-system-view-model`	DealPreviewAuctionSystemViewModel
`@workspace/ui-training/deal/board-card/board-card-view`	BoardCardView compound
`@workspace/ui-training/deal/board-card/board-card-edit`	BoardCardEdit compound
`@workspace/ui-training/deal/board-card/editable-board-card`	EditableBoardCard, ReorderSlotProps
`@workspace/ui-training/deal/board-card/unavailable-board-card`	UnavailableBoardCard
`@workspace/ui-training/deal/board-card/boards-list-skeleton`	BoardsListSkeleton
`@workspace/ui-training/deal/board-card/board-card-view-model`	BoardCardViewModel
`@workspace/ui-training/deal/board-card/board-usage-view-model`	BoardUsageViewModel
`@workspace/ui-training/deal/board-card/strings`	BoardCardStrings provider and hook
User
`@workspace/ui-training/user/user-cell`	UserCell
`@workspace/ui-training/user/user-search`	UserSearch compound
`@workspace/ui-training/user/user-view-model`	UserViewModel
`@workspace/ui-training/user/strings`	UserCell and UserSearch strings
Styles
`@workspace/ui-training/styles.css`	Tailwind `@source` registration

Package structure

styles.css