Skip to content

feat: setup storybook and add stories for TodoItem #5

Description

@perzeuss

📚 Setup Storybook and Add Stories for TodoItem Dumb Component

📋 Overview

Set up Storybook for the project and create stories for the TodoItem presentational (dumb) component only. The stories should provide comprehensive coverage of all UI states for TodoItem, with no inclusion of business logic or HOC wrapping logic.


🎯 Acceptance Criteria

  • Storybook is installed and configured to work with the project
  • components/ui/TodoItem/TodoItem.stories.tsx is created with stories for TodoItem
  • Stories cover all relevant visual and accessibility states:
    • Normal (not completed)
    • Completed
    • Editing mode
    • Focused/active states
    • Error/boundary states if applicable
  • Only the pure TodoItem is included in Storybook (do not wrap with any HOC logic)
  • All props are either controlled by Storybook or mocked appropriately
  • Storybook build and runs without errors or warnings

🔧 Technical Requirements

  • No any types used—adhere to strict typing for all story props and mocks
  • Use realistic mock data for TodoItem stories
  • Use CSF (Component Story Format) for story definitions
  • Minimum: Add a Storybook controls panel for dynamic prop editing/tests

📚 Resources


💡 Tips

  • Separate "dumb" components from "smart"/HOC-wrapped logic in your stories
  • Add documentation (short prop descriptions) for every story
  • Leverage Storybook controls for props like isEditing, completed, and editText

🚫 Out of Scope

  • No stories or coverage for HOC logic (withTodoItemLogic)
  • No stories for other components
  • No integration into automated CI/CD (manual Storybook build/run only)
  • Integration of Storybook's a11y addon

🏗️ Acceptance Checklist

  • Storybook added and working for the project
  • TodoItem.stories.tsx exists and demonstrates all UI states
  • All dumb component props are documented
  • No HOC or business logic in stories
  • Storybook passes lint, types, and accessibility

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions