Stage 6 — Project 5: Design System + Component Library
Triết lý cốt lõi: Thiết kế cho người khác dùng. Tự quyết định breaking change. Publish npm. Chromatic CI.
Không còn là "viết component cho project của mình", mà là thiết kế API cho người khác, quản lý breaking change, set policy cho team.Phase: SIMULATE (5:95 | 15:85 | 20:80)
Teaching Model: 5% Teaching / 95% Questioning
Deliverable: Package published npm, Storybook documented, Chromatic CI, 15+ components accessible, dark mode, MFE demo + 1 ADR
Mục tiêu
Thiết kế component library cho team và cộng đồng sử dụng. Tự quyết định breaking change, deprecation strategy, publish workflow, và visual regression policy.
- Design for others: Component API phải backward compatible, có deprecation strategy, có migration guide.
- Breaking change = Decision: Không sợ breaking change, nhưng phải có ADR, có semver, có migration path.
- Visual regression = Policy: Không chỉ test 1 lần, mà set policy cho team. Chromatic CI, branch baselines, cross-browser.
- Staff Lens: Thiết kế API, viết ADR, set policy — không chỉ implement component.
Tại sao Stage 6 tồn tại
- Bối cảnh thực tế: Design system không phải "tập hợp component đẹp". Là contract giữa design và engineering, là API cho team sử dụng. 1 breaking change không thông báo có thể phá hỏng 20 project.
- Hậu quả nếu bỏ qua: Bạn sẽ viết component "chạy được" nhưng không ai dùng được. Không hiểu design tokens, không biết publish npm, không biết manage breaking change.
- Output của Stage 6: 1 component library published npm, documented Storybook, Chromatic CI, 15+ components accessible, dark mode, MFE demo, và khả năng viết ADR cho breaking change.
Danh sách module
Design Tokens
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.1.1 Design Tokens Fundamentals | Token hierarchy, CSS Variables, Tailwind config, W3C Design Tokens Format | Foundation | SIMULATE | ⬜ |
| 6.1.2 Style Dictionary & Multi-platform | Style Dictionary build pipeline, Figma sync, Versioning token, Deprecation | Application | SIMULATE | ⬜ |
Component Primitives
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.2.1 Radix UI Primitives & Accessibility | Headless unstyled, Focus trap, Roving tabindex, Compound Components | Foundation | SIMULATE | ⬜ |
| 6.2.2 Shadow DOM trong Design System | Style encapsulation, ::part(), CSS custom properties, Shadow DOM vs CSS-in-JS | Application | SIMULATE | ⬜ |
Complex Components
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.3.1 Complex Components — Combobox & Date Picker | aria-activedescendant, i18n date, Safari inconsistent, Factory pattern | Application | SIMULATE | ⬜ |
| 6.3.2 Data Grid | Sort, filter, virtual scroll, Column resize, Row selection, Inline edit | Application | SIMULATE | ⬜ |
Documentation & Publish
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.4.1 Storybook & Documentation | CSF 3, Controls, MDX docs, Viewport, Composition | Foundation | SIMULATE | ⬜ |
| 6.4.2 Chromatic & Publish | Visual regression, Branch baselines, Package publish, Breaking change | Application | SIMULATE | ⬜ |
Micro-frontends
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.5.1 Micro-frontends Fundamentals | Module Federation, Single-SPA, Shared deps, Routing coordination | Application | SIMULATE | ⬜ |
| 6.5.2 Web Components Interop | Wrap React → Custom Element, Shadow DOM isolation, CustomEvent, Props/attributes | Application | SIMULATE | ⬜ |
Theming
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.6 Dark Mode & Animation Tokens | darkMode: class, Animation tokens, Micro-interaction, Theme flash fix | Application | SIMULATE | ⬜ |
Testing
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.7.1 Component Testing | Behavior test, jest-axe, Visual test, Coverage critical path | Foundation | SIMULATE | ⬜ |
| 6.7.2 Visual Regression & Coverage | Pixel-perfect, Cross-browser, Dark mode snapshot, Interaction states | Application | SIMULATE | ⬜ |
Staff Skills
| Module | Nội dung | Mức độ | Phase | Status |
|---|---|---|---|---|
| 6.8 Documentation & RFC/ADR | Contribution guide, Migration guide, ADR format, Component API design | Application | SIMULATE | ⬜ |
| 6.9 RADIO Practice #3 | Component Library / Autocomplete design, Scale 10 → 100+ components, Mock interview | Mastery | SIMULATE | ⬜ |
Stage 6 Staff Checkpoint
Tự đánh giá trước khi sang Stage 7. Nếu trả lờ "Không" ở bất kỳ câu nào, quay lại module tương ứng.
| # | Câu hỏi | Module |
|---|---|---|
| 1 | Tôi có viết được ADR cho 1 breaking change trong design system không? | 6.8 |
| 2 | Tôi có thiết kế được component API không? (backward compatible, deprecation strategy) | 6.8 |
| 3 | Tôi có set được visual regression policy cho team không? | 6.7.2 |
| 4 | Tôi có tính được cost impact của design tokens multi-platform không? | 6.1.2 |
Nguyên tắc vàng
- API = Contract: Component API là contract. Breaking change phải có ADR, có semver, có migration guide. Không sửa API vì "tôi thích hơn".
- Accessibility = Default: 15+ components phải accessible by default. Không phải "thêm sau".
jest-axeCI phải pass. - Visual Regression = Policy: Set cho team, không chỉ test 1 lần. Chromatic CI, branch baselines, cross-browser, dark mode snapshot.
- Design Tokens = Source of Truth: Figma sync, multi-platform, versioning. Không hardcode color/spacing trong component.