The-DevOps-Daily/devops-daily
Ver no GitHubfeat: Add Storybook for component development
Open
#534 aberto em 2 de dez. de 2025
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)
components/quizzes-hero.tsx- Animated herocomponents/games/quiz-manager.tsx- Quiz cardscomponents/game-card.tsx- Game cardscomponents/code-block.tsx- Syntax highlightingcomponents/markdown-content.tsx- Markdown rendering- 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 decoratorsstories/*.stories.tsx- Component stories.github/workflows/storybook.yml- CI workflow