The-DevOps-Daily/devops-daily

feat: Add Storybook for component development

开放

#534 创建于 2025年12月2日

 (0 条评论) (0 个反应) (0 位负责人)TypeScript (392 个派生)github user discovery
enhancementgood first issuehacktoberfest

仓库指标

星标
 (1,087 个星标)
PR 合并指标
 (平均合并 1天 23小时) (30 天内合并 82 个 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

贡献者指南