Chia Sẻ Khóa Học Design System Với Storybook [Khóa 6090 A]
Xây dựng các component library dễ mở rộng và design system với Storybook. Tạo các UI component có thể tái sử dụng với các style và variant có thể cấu hình bằng Tailwind CSS. Sử dụng MDX cho documentation, setup interaction testing và add data fetching để tạo một dev environment mạnh mẽ cho component library của bạn.
Nội dung khóa học:
1. Giới thiệu:
Bạn sẽ bắt đầu khóa học bằng một chuyến tham quan ngắn về website và tài nguyên của khóa học. Khóa học này sẽ bao gồm mọi thứ từ setup cơ bản đến các tính năng nâng cao như atomic design, accessibility, visual regression testing, responsive design và triển khai dark mode.
2. Bắt đầu:
2.1. Storybook Setup & Tour: Demo Storybook Sandbox, giúp test một số chức năng trong Storybook mà không cần cài đặt Storybook vào project hiện tại của bạn hoặc tạo một project mới. Storybook là một framework-agnostic tool và có thể hoạt động với bất kỳ framework nào.
2.2. Tạo các Story đầu tiên của bạn: Tạo các primary và secondary story cho button component. Meta object trong một story tạo page cho các story và có thể cung cấp default data được truyền cho các prop. Các property riêng lẻ có thể được ghi đè trong mỗi story.
2.3. Ví dụ về các Design System: Phần này chia sẻ một số ví dụ về các design system từ Microsoft, IBM, Twilio và GitHub. Sử dụng một prop để set biến thể của một component là một thông lệ phổ biến. Prop này có thể là "variant", "kind" hoặc "appearance". Tên được sử dụng trong hệ thống thiết kế của bạn phải nhất quán trên tất cả các component.
2.4. Thêm các Variant: Phần này tạo các variant cho button component. Một ButtonProps type được định nghĩa để tạo một union type cho các variant value khả dụng. Các Storybook variant được cập nhật để sử dụng đúng variant class.
2.5. Sử dụng clsx để Compose các Class Name: Phần này thêm Destructive variant vào story. Sau đó, thư viện clsx được sử dụng để compose các class name cho các component. Các base button style, variant và bất kỳ class tùy chỉnh bổ sung nào được truyền vào phương thức clsx và một string có các class name đó được trả về.
2.6. Thêm các Control: Phần này demo cách thêm một select control vào Storybook để có thể chọn các available variant từ một dropdown. Variant type cũng được điều chỉnh để chúng là tùy chọn.
2.7. Add Button Sizes Exercise: Phần này thêm một variant cho size. Các size là nhỏ, trung bình và lớn. Các CSS class được thêm vào và các variant default được code trong story.
3. Styling:
3.1. Add Tailwind: Phần này demo cách import các third-party style và script vào story. Tailwind CSS được import vào index.css trong project. Sau đó, file CSS được import vào preview Storybook component.
3.2. Add Dark Mode Theme: Phần này cấu hình dark theme support cho Tailwind CSS. Các Storybook decorator được giới thiệu và sử dụng để thêm một theme switcher vào preview interface. Theme switcher sửa đổi data attribute được cấu hình để chuyển đổi các theme.
3.3. Query Params & Overrides: Phần này sử dụng overrides để áp dụng dark mode trong một story. Các URL query parameter cũng có thể được sử dụng để cấu hình preview cho các story. DefaultViewport parameter set preview size, giúp việc xem trước các story trên mobile viewport widths dễ dàng.
3.4. Color Naming Convention: Phần này thảo luận một số cân nhắc khi quyết định chuyển đổi tên cho các color trong đó. Plugin variables2CSS Figma, generate các color variable cho các định dạng khác nhau, được demo.
3.5. Tùy chỉnh Tailwind Colors & Font: Phần này tùy chỉnh colors and fonts trong Tailwind CSS theme. Các color tùy chỉnh ghi đè lên Tailwind color hiện có để ngăn không cho sử dụng màu bên ngoài design system. Vì monospace font mặc định vẫn cần thiết nên font được mở rộng và chỉ ghi đè lên sans font.
3.6. Các Design System thực tế: Phần này chia sẻ các ví dụ từ một design system thực tế làm nổi bật số lượng style và variant được sử dụng trong một button component. Class Variance Authority package được giới thiệu và so sánh với CLSX. Sự khác biệt chính là khả năng add type safety cho các style trong các UI component.
3.7. Class Variance Authority: Phần này sử dụng thư viện Class Variance Authority để add type-safety vào các variant style có thể áp dụng cho button component. Điều này abstract các CSS style bên trong button component và tập trung chúng trong một variant TypeScript file duy nhất.
4. Components Documentation & Styling:
4.1. Sử dụng MDX với Storybook: Phần này tạo một file MDX để viết documentation dựa trên markdown cho một component story. Các file MDX hỗ trợ JavaScript, cho phép component và các Storybook Block khác được import và hiển thị trên documentation page. Các ColorPalette và ColorItem block cũng được demo trong bài học này.
4.2. Tổ chức và tùy chỉnh các Block: Phần này demo cách tổ chức các story thành các subgroup. Các Block cũng có thể được tùy chỉnh cho mục đích và trường hợp sử dụng của các variant được mô tả tốt hơn.
4.3. Thực hiện một bài tập về Callout Component: Bạn được hướng dẫn triển khai một Callout component và tạo một Story để document style và các variant.
4.4. Tạo Callout Component Story: Phần này tiếp tục giải pháp cho bài tập Callout Component bằng cách tạo story cho callout component. Code được sử dụng trong giải pháp có thể được tìm thấy tại liên kết bên dưới.
5. Testing & Interaction:
5.1. Play Function: Sử dụng play function để mô phỏng tương tác của người dùng. Có thể thêm các bài Test vào các story để đảm bảo UI phản hồi phù hợp với các tình huống tương tác khác nhau.
5.2. Validating Attributes & Styles: Phần này thêm các test bổ sung vào story để validate các attribute value và sự tồn tại của các style cụ thể trên UI component. Các Style có thể được xác thực theo class hoặc individual style rule. Sau đó, bạn được hướng dẫn thêm một test cho một disabled Text Area.
5.3. Import Variants: Phần này demo các variant có thể được import để tạo một union type và add type safety cho các component style.
5.4. Storybook Test Runner: Phần này demo cách thiết lập một test runner cho các Storybook test. Playwright là công cụ thực thi các test. Test runner có thể được thêm vào một CI/CD pipeline để tự động hóa UI testing.
5.5. Visual Testing với Chromatic: Phần này hướng dẫn các khả năng của Chromatic, một công cụ visual testing & review scan mọi trạng thái UI có thể có trên các trình duyệt để catch visual và functional bugs. Công cụ này có thể được sử dụng trong Figma hoặc như một phần của một CI/CD pipeline. Các thay đổi trực quan được phát hiện và hiển thị trong Figma UI. Các thay đổi UI có thể được chấp thuận hoặc từ chối.
5.6. Accessibility Testing: Phần này nêu bật các tính năng testing khả năng truy cập bên trong Figma được kích hoạt bằng cách cài đặt addon-a11y package. Các vi phạm sẽ được liệt kê và các vấn đề có thể được đánh dấu trực quan trong mỗi story.
6. API, Context và External Dependenc:
6.1. Sử dụng Decorators for Context: Phần này giải thích rằng decorator cho phép bạn bọc một component trong story của mình bằng một component khác.
6.2. Sử dụng Loaders để Fetch Data: Demo cách loader cung cấp một cách để tải dữ liệu không đồng bộ hoặc thực hiện các hành động trước khi một story được render. Điều này có thể hữu ích khi fetching mock data từ API, thực hiện các tác vụ thiết lập hoặc thao tác động các prop hoặc global dựa trên các yếu tố bên ngoài trước khi story được hiển thị.
7. Kết thúc: Kết thúc khóa học bằng cách chia sẻ một số lời khuyên về lý do tại sao việc thêm một Storybook để hỗ trợ document một design system ở bất kỳ giai đoạn nào cũng có thể mang lại lợi ích lâu dài.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU