Storybook Tutorial - Learning Storybook with Nikhil Shrivastava

A comprehensive Storybook tutorial project demonstrating component development, theming, and advanced Storybook features using React, TypeScript, and Vite.

🎯 What I Learned

This tutorial covers the following Storybook concepts and implementations:

📚 Storybook Fundamentals

• Component Stories: Creating stories for Button, Header, and Page components
• Meta Configuration: Setting up component metadata with titles, parameters, and tags
• Story Variants: Implementing Primary, Secondary, Large, Small, and custom Red button variants

🎨 Theme Customization

• Custom Theme: Created a dark theme with personal branding
• Brand Assets: Integrated custom logo and branding elements
• Color Scheme: Applied custom color palette (FE4785) for primary/secondary elements

🔧 Advanced Features

• ArgTypes & Args: Component-level and story-level argument controls
• Color Controls: Interactive color picker for background colors
• Meta Titles: Organized component hierarchy with custom titles
• Global Decorators: Added consistent layout wrapper with max-width and styling

🛠️ Addons & Configuration

• Accessibility (A11y): Integrated accessibility testing and checks
• Docs: Auto-generated documentation with Autodocs
• Vitest: Component testing integration
• Onboarding: Storybook onboarding experience

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

npm install

Running the Application

# Start the Vite dev server
npm run dev

# Start Storybook
npm run storybook

Building

# Build the application
npm run build

# Build Storybook
npm run build-storybook

📁 Project Structure

storybook-tutorial/
├── .storybook/                 # Storybook configuration
│   ├── main.ts                # Main Storybook config
│   ├── preview.ts             # Preview configuration with decorators
│   ├── manager.ts             # Manager configuration with theme
│   ├── YourTheme.ts           # Custom theme definition
│   └── decorators.tsx         # Global decorators
├── src/
│   ├── stories/               # Component stories
│   │   ├── Button.stories.ts  # Button component stories
│   │   ├── Header.stories.ts  # Header component stories
│   │   ├── Page.stories.ts    # Page component stories
│   │   └── *.tsx              # Component implementations
│   ├── App.tsx                # Main React app
│   └── assets/                # Static assets
├── public/                    # Public assets
└── package.json               # Dependencies and scripts

🧩 Components

Button Component

• Multiple variants: Primary, Secondary, Large, Small
• Custom Red variant with color controls
• Interactive argTypes for background color selection

Header Component

• User authentication states (Logged In/Logged Out)
• Fullscreen layout configuration

Page Component

• Interactive testing with Playwright
• User event simulation and assertions

🎨 Custom Theme Features

• Dark Base Theme: Modern dark UI design
• Personal Branding: Custom title and GitHub link
• Brand Image: Integrated tutorial logo
• Custom Colors: Consistent color scheme throughout

🧪 Testing & Accessibility

• Vitest Integration: Component testing setup
• Accessibility Checks: A11y addon for accessibility testing
• Interactive Testing: Play function for user interaction testing

📚 Resources

• Storybook Documentation
• React Documentation
• Vite Documentation
• TypeScript Documentation

🤝 Contributing

This is a learning project. Feel free to explore and experiment with Storybook features!

📄 License

This project is for educational purposes.