59 lines
6.1 KiB
Markdown
59 lines
6.1 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`, `ui/command-input` | Migrated | Removed forced inline width; normalized text metrics; retained FastStep and command-prefix anatomy |
|
|
| `form-controls` | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated | Tokenized state colors and aligned label/control anatomy |
|
|
| `select` | `ui/select`, `ui/tree-select`, `ui/cascader` | Migrated | Flat, hierarchical and two-level responsive selection; TreeSelect preserves parent-toggle and rarity states |
|
|
| `tabs` | `ui/tabs`, `ui/pagination` | Migrated | Animated list marker and compact result navigation |
|
|
| `slider` | `ui/slider` | Migrated | Preserved the Reka coordinate system |
|
|
| `data-table` | `ui/data-table`, `ui/progress` | Migrated | Added compact density, row eligibility, note/summary/footer rows, empty state and multi-marker progress |
|
|
| `dialog` | `ui/dialog`, `ui/utility-sheet` | Migrated | Kept WindowDialog and UtilitySheet as separate families while sharing focus-safe dialog chrome |
|
|
| `menu` | `ui/dropdown-menu`, `ui/settings-dropdown` | Migrated | Preserved the distinct compact-context and full settings-menu anatomies |
|
|
| `rarity` | `ui/item-slot`, `ui/notice-badge` | Migrated | Retained rarity data semantics plus the native Notice raster and independent Level badge family |
|
|
| `autocomplete` | `ui/autocomplete`, `ui/search-tree` | Migrated | Kept flat Combobox and toolbar-plus-tree search as separate reusable families |
|
|
| `navigation` | `ui/navigation`, `ui/favorite-drawer` | Migrated | Preserved selectable SettingsNav and removable, scrollable FavoriteDrawer composition |
|
|
| `scrollbar` | `ui/scroll-area` | Migrated | Reusable Reka viewport/scrollbar composition |
|
|
| shared overlay help | `ui/popover`, simple/rich `ui/tooltip` | Migrated | Portal z-index, collision and responsive width contracts for both tooltip anatomies |
|
|
| `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
|
|
|
|
Business replacement is now in progress. Each slice keeps its route, events, API calls and stored
|
|
values, and a legacy component is deleted only after repository-wide references reach zero.
|
|
|
|
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.
|
|
|
|
## Remaining gaps
|
|
|
|
- `SkillDamageDetail` and `ItemRow` remain domain compositions on top of `ui/data-table`; the
|
|
generic table contract now exposes the structural slots they require.
|
|
- Complex product dialogs remain compositions, not a claim that every business dialog has reached
|
|
source-level visual parity.
|
|
- Business call sites in the active routes are migrated, the superseded equipment page is removed,
|
|
and the repository-wide `components/calc` call-site check is now at zero.
|