52 lines
2.1 KiB
Markdown
52 lines
2.1 KiB
Markdown
# DCalc frontend-ui
|
|
|
|
`frontend-ui` is the progressive UI refactor of the current `frontend` application. The original
|
|
project remains available as the behavior baseline.
|
|
|
|
## Foundation
|
|
|
|
- Vue 3, Vue Router, Pinia, Vite and TypeScript track the current stable release line.
|
|
- Reka UI provides accessible interaction primitives.
|
|
- Tailwind CSS 4 provides layout utilities without Preflight during the migration period.
|
|
- CSS variables define the stable semantic contract between components and themes.
|
|
- SCSS/CSS remains available for game textures, image borders and state effects.
|
|
- `class-variance-authority` defines component variants in the local, source-owned UI layer.
|
|
- Oxc (`oxlint` and `oxfmt`) handles linting and formatting.
|
|
|
|
## Theme model
|
|
|
|
Components consume `--ui-*` semantic variables. Each skin maps its own palette and effects to that
|
|
contract under `[data-theme]`. Add a theme stylesheet and register it in `useTheme.ts`; component
|
|
code should not need to change.
|
|
|
|
The initial themes are:
|
|
|
|
- `dcalc`: tokens captured from `design/src-web`.
|
|
- `midnight`: a second skin used to verify that components are not coupled to the classic palette.
|
|
|
|
## Commands
|
|
|
|
```sh
|
|
pnpm install
|
|
pnpm dev
|
|
pnpm check
|
|
pnpm build
|
|
```
|
|
|
|
Open `/components` for the complete catalog of currently introduced components and their live
|
|
interactions. `/ui-preview` remains the smaller foundation smoke-test page.
|
|
|
|
See [`docs/ui-migration-standard.md`](docs/ui-migration-standard.md) for the reusable component
|
|
migration, theming, responsive implementation and browser QA standard.
|
|
|
|
The current catalog covers 28 component families: Button, Badge, Panel, Input, NumberField,
|
|
Checkbox, RadioGroup, Switch, Rating, Select, Slider, Progress, Tabs, ItemSlot, DataTable, Tooltip,
|
|
DropdownMenu, Dialog, Autocomplete, Navigation, DataSection, ScrollArea, Settings, ShopItemRow,
|
|
TreeSelect, Cascader, Pagination and Popover.
|
|
|
|
## Migration rule
|
|
|
|
New UI components live under `src/components/ui`. Route changes, keyboard shortcuts and DNF data
|
|
mapping belong to pages, composables or domain components instead of generic primitives. Existing
|
|
`calc-*` components remain only until their business call sites are migrated.
|