Storybook là gì?
Còn gọi: công cụ thư viện component, storybook js, storybook ui, component explorer
Storybook là công cụ mã nguồn mở giúp developer xây dựng, xem thử và lập tài liệu cho từng component giao diện một cách tách biệt, mỗi trạng thái của component được ghi thành một 'story'.
Hiểu kỹ hơn
Trong một design system, Figma chứa bản thiết kế còn Storybook thường chứa phiên bản code thật của component: nút với các biến thể primary, secondary, disabled, đang tải; ô nhập với trạng thái lỗi; thẻ với nội dung dài. Designer có thể mở Storybook trên trình duyệt để kiểm tra component đã được code có đúng thiết kế không (design QA) mà không cần chạy toàn bộ ứng dụng. Storybook hỗ trợ React, Vue, Angular và nhiều framework khác, có tiện ích kiểm tra accessibility và so sánh ảnh chụp để phát hiện thay đổi ngoài ý muốn. Với nhóm có design system, việc đồng bộ tên component và tên biến thể giữa Figma và Storybook giúp giao tiếp đỡ nhầm lẫn rất nhiều.
