The-DevOps-Daily/devops-daily

feat: Add Storybook for component development

Open

#534 aberto em 2 de dez. de 2025

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (392 forks)github user discovery
enhancementgood first issuehacktoberfest

Métricas do repositório

Stars
 (1.087 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

Description

Set up Storybook for isolated component development, documentation, and testing.

Problem

  • No isolated environment for developing components
  • Difficult to test components in different states
  • No visual component documentation
  • Hard to catch visual regressions
  • New contributors need to understand component API

Benefits of Storybook

  • Develop components in isolation
  • Document component props and variations
  • Visual testing and regression detection
  • Accessibility testing integration
  • Easier onboarding for contributors
  • Component library showcase

Components to Document (Priority)

  1. components/quizzes-hero.tsx - Animated hero
  2. components/games/quiz-manager.tsx - Quiz cards
  3. components/game-card.tsx - Game cards
  4. components/code-block.tsx - Syntax highlighting
  5. components/markdown-content.tsx - Markdown rendering
  6. All shadcn/ui components in use

Acceptance Criteria

  • Install and configure Storybook 8
  • Configure for Next.js 15 and React 19
  • Set up TypeScript support
  • Configure Tailwind CSS
  • Add stories for 5+ key components
  • Add accessibility addon
  • Add responsive viewport addon
  • Document component props
  • Add GitHub Actions workflow for Storybook build
  • Optional: Deploy Storybook to Chromatic or GitHub Pages

Files to Create

  • .storybook/main.ts - Storybook config
  • .storybook/preview.ts - Global decorators
  • stories/*.stories.tsx - Component stories
  • .github/workflows/storybook.yml - CI workflow

Guia do colaborador