The-DevOps-Daily/devops-daily

feat: Add Storybook for component development

Open

#534 创建于 2025年12月2日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (392 fork)github user discovery
enhancementgood first issuehacktoberfest

仓库指标

Star
 (1,087 star)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南