Storybook: Component-Driven UI Development

What you'll learn

• Install Storybook and write stories in CSF3 with args and controls.
• Cover component variants and states, and wrap stories with decorators.
• Test components with play functions, the a11y addon and visual regression tools.
• Document and deploy a shared component library for your team.
• Run Storybook tests in CI and extend it with addons and themes.

Syllabus

Module 1: Getting Started

1. What is Storybook?

Module 2: Foundation

1. Installation and Setup
2. Writing Your First Story

Module 3: Core Concepts

1. Component Composition
2. Props and Controls
3. Variants and States

Module 4: Data & Integration

1. Decorators and Global Setup

Module 5: Design & Documentation

1. Addons and Enhancing Stories
2. Testing with Storybook
3. Accessibility and Best Practices

Module 6: Advanced Patterns

1. Figma Integration
2. Visual Testing
3. CI/CD Integration
4. Storybook for Teams

Module 7: Performance and Quality

1. Performance Optimization
2. Documentation Best Practices
3. Deployment and Distribution

Module 8: Tools and Configuration

1. Advanced Patterns and Techniques

Module 9: Real-World Applications

1. Interview Questions and Cheat Sheet
2. Best Practices and Workflow

Module 10: Advanced Topics

1. Building Custom Addons
2. Theming and Styling Storybook
3. Monitoring and Debugging
4. Popular Storybook Plugins

Module 11: Review & Summary

1. Key Concepts Review