## Giới thiệu Khi phát triển song song React Web và React Native, việc duy trì giao diện nhất quán là thách thức lớn. Một Design System tập trung giúp nhóm chia sẻ token màu, spacing, typography và component logic, giảm thiểu sự chênh lệch giữa hai nền tảng. ## 1. Định nghĩa Design Token chung - Tạo file `tokens.ts` chứa đối tượng `colors`, `spacing`, `fontSizes`, `borderRadius`. - Sử dụng TypeScript để đảm bảo type‑safe khi import ở cả web và native. - Ví dụ: `export const colors = { primary: '#2563EB', secondary: '#7C3AED', background: '#FFFFFF' };` ## 2. Cấu hình Tailwind CSS cho Web - Cài đặt `tailwindcss` và `postcss`. - Trong `tailwind.config.js` import token từ `tokens.ts` (dùng `require` hoặc `import` tuỳ bundler). - Mở rộng theme: `theme: { extend: { colors: tokens.colors, spacing: tokens.spacing, fontSize: tokens.fontSizes } }`. - Kết quả: class `bg-primary`, `p-4`, `text-lg` tự động ánh xạ token chung. ## 3. Áp dụng token cho React Native StyleSheet - Viết helper `createStyleSheet(tokens)` nhận object token và trả về `StyleSheet.create({ ... })`. - Map token sang giá trị StyleSheet: `padding: tokens.spacing[4]`, `backgroundColor: tokens.colors.primary`. - Component native import style từ helper thay vì hard‑code giá trị. ## 4. Component chung (Cross‑platform) - Tạo thư mục `components/shared` chứa các component logic thuần (Button, Input, Card) chỉ nhận `style` prop. - Web render bằng `className` Tailwind, Native render bằng `style` từ helper. - Sử dụng `Platform.select` hoặc file riêng `Button.web.tsx` / `Button.native.tsx` để tách render. ## 5. Storybook cho hai nền tảng - Cấu hình Storybook Web mặc định. - Thêm addon `@storybook/react-native` và script `storybook:native`. - Viết stories dùng token chung, kiểm tra giao diện đồng bộ trên trình duyệt và thiết bị. ## 6. Quy trình cập nhật token 1. Chỉnh sửa `tokens.ts`. 2. Chạy `npm run build:tokens` (script sinh file JSON cho native nếu cần). 3. Commit và mở PR, CI tự động chạy test visual regression trên cả hai nền tảng. 4. Merge sau khi review. ## Lời khuyên thực tế - Giữ token đơn giản, tránh nested object quá sâu để dễ mapping. - Dùng `clsx` hoặc `classnames` trên web để kết hợp class động. - Trên native, cache StyleSheet tạo bởi helper để tránh tái tạo mỗi render. - Tài liệu hóa token trong README kèm ví dụ sử dụng cho cả hai platform. Với cách tiếp cận này, nhóm chỉ cần duy trì một nguồn sự thật duy nhất cho thiết kế, đồng thời tận dụng sức mạnh của Tailwind trên web và StyleSheet tối ưu trên React Native.