48 lines
4.3 KiB
Markdown
48 lines
4.3 KiB
Markdown
# Design migration matrix
|
|
|
|
`design/src-web` is the implementation source for component structure, CSS, assets and visual
|
|
interaction states. Migration means adapting that implementation to Vue and Reka UI; it does not
|
|
mean recreating the effect from screenshots.
|
|
|
|
## Rules
|
|
|
|
- Port the existing DOM anatomy, CSS values and raster assets before optimizing them.
|
|
- Keep pixel-accurate atomic dimensions, but expose component width and density through props or
|
|
CSS custom properties.
|
|
- Move reusable colors and metrics into semantic `--ui-*` tokens after visual parity is established.
|
|
- Keep page data, routing and stores outside `src/components/ui`.
|
|
- Delete a legacy `calc-*` component only after all of its call sites have migrated.
|
|
|
|
## Matrix
|
|
|
|
| Design source | Current target | Status | Migration notes |
|
|
| ----------------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------- |
|
|
| `foundations`, `shared` | `style/tokens`, `style/themes`, shared UI contract | Migrated | Semantic color and overridable geometry contracts |
|
|
| `button` | `ui/button` | Migrated | Preserved three-slice states; exposed density and width |
|
|
| `input` | `ui/input`, `ui/number-field` | Migrated | Removed forced inline width; normalized text metrics |
|
|
| `form-controls` | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated | Tokenized state colors and aligned label/control anatomy |
|
|
| `select` | `ui/select` | Migrated | Preserved popup anatomy and Reka keyboard behavior |
|
|
| `tabs` | `ui/tabs` | Migrated | Preserved list-owned animated marker |
|
|
| `slider` | `ui/slider` | Migrated | Preserved the Reka coordinate system |
|
|
| `data-table` | `ui/data-table` | Migrated | Ported hover, selected and density behavior |
|
|
| `dialog` | `ui/dialog` | Migrated | Preserved the focused title effect and focus management |
|
|
| `menu` | `ui/dropdown-menu` | Migrated | Ported source menu spacing and state tokens |
|
|
| `rarity` | `ui/item-slot` | Migrated | Retained rarity presentation as data-semantic tokens |
|
|
| `autocomplete` | `ui/autocomplete` | Migrated | Reka Combobox composition with source popup anatomy |
|
|
| `navigation` | `ui/navigation` | Migrated | Selectable navigation primitive with source assets |
|
|
| `scrollbar` | `ui/scroll-area` | Migrated | Reusable Reka viewport/scrollbar composition |
|
|
| `data-section` | `ui/data-section` | Migrated | Collapsible section and vertically centered data rows |
|
|
| `shop-item-row` | `ui/shop-item-row` | Migrated | Ported source row structure and selectable states |
|
|
| `complex-dialog` | `ui/dialog` + migrated primitives | Composition | Kept domain-independent by composing existing primitives |
|
|
| `settings` | `ui/settings` | Migrated | Responsive settings group, section and row primitives |
|
|
|
|
## Legacy replacement order
|
|
|
|
Deferred: this component-library pass does not change business call sites.
|
|
|
|
1. Shared form controls and overlays used by DNF Helper and import dialogs.
|
|
2. Forge controls (`select`, `checkbox`, `slider`, tabs and panels).
|
|
3. Equipment dictionary filters, tree, cascader and pagination.
|
|
4. Skill tree, skill detail and VP controls.
|
|
5. Result tables and remaining domain-specific components.
|