Design Systems with Storybook

• Understanding Storybook Basics: Learn how to set up and configure Storybook for documenting and testing UI components across frameworks.
• Reusable Components Development: Gain skills in building scalable, reusable UI components using Tailwind CSS, ensuring consistent design across projects.
• Variant and Theming Strategies: Understand how to implement variants for components and manage themes, including dark mode support, to enhance flexibility and user experience.
• Documentation with MDX: Discover how to use MDX to write and organize markdown-based documentation for component stories, enhancing clarity and usability.
• Testing and Interaction Techniques: Explore techniques for testing components, including play functions, attribute validation, and visual regression testing using Chromatic.
• Implementing Accessibility: Learn how to perform accessibility testing in Storybook to ensure that UI components meet accessibility standards.
• Data Handling in Storybook: Use decorators and loaders for context management and asynchronous data fetching, simulating real-world data scenarios.

The "Design Systems with Storybook, v2" course provides a comprehensive guide to creating and managing scalable design systems using Storybook. The course covers everything from setting up Storybook and creating reusable UI components with Tailwind CSS to advanced topics like interaction testing, visual regression testing, and accessibility. With hands-on examples and exercises, learners will build robust component libraries equipped with MDX documentation and dynamic theming capabilities.

• Frontend developers seeking to enhance their skills in building design systems.
• UI/UX designers interested in learning about component documentation and testing.
• Software engineers looking to integrate Storybook into their development workflow.
• Developers working on projects that require scalable and maintainable component libraries.

• Basic understanding of JavaScript and React.
• Familiarity with CSS and component-based development.
• Prior experience with version control systems like Git is beneficial.

Introduction

• Overview of course objectives and resources.
• Introduction to the basics of Storybook and design systems.

Getting Started

• Setting up Storybook and exploring its core features.
• Creating initial stories and understanding the structure of a design system.

Styling

• Implementing Tailwind CSS for styling components.
• Adding dark mode support and customizing colors and fonts in Tailwind.

Components Documentation & Styling

• Writing MDX files for component documentation.
• Organizing stories and customizing documentation blocks.

Testing and Interactions

• Using play functions for simulating user interactions.
• Setting up visual regression tests with Chromatic and accessibility testing.

APIs, Context, and External Dependencies

• Using decorators and loaders for managing context and data in Storybook.