The-DevOps-Daily/devops-daily

feat: Add Storybook for component development

Aberta

#534 aberto em 2 de dez. de 2025

 (0 comentário) (0 reação) (0 responsável)TypeScript (392 forks)github user discovery
enhancementgood first issuehacktoberfest

Métricas do repositório

Stars
 (1.087 estrelas)
Métricas de merge de PR
 (Mesclagem média 1d 23h) (82 fundiu PRs em 30d)

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