The-DevOps-Daily/devops-daily

feat: Add Storybook for component development

Open

#534 geöffnet am 2. Dez. 2025

Auf GitHub ansehen
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (392 Forks)github user discovery
enhancementgood first issuehacktoberfest

Repository-Metriken

Stars
 (1.087 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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

Contributor Guide