Ticket Contents

Description

Our frontend codebase includes an increasing number of reusable UI components—such as buttons, cards, and modals—used across different modules. However, there is currently no centralized system to view, test, or document these components in isolation.

Feature Requirement
This project involves setting up Storybook to serve as a single source of truth for previewing and testing all core UI components. Designers, developers, and QA teams will be able to interact with components independently of app context, inspect variations, and ensure consistent implementation across the product.

Problem Statement
Currently, components are only accessible through specific app views, leading to:

• No standalone preview environment
• Poor design-to-development handoff
• Difficulty testing edge states (e.g., hover, disabled)
• Inconsistent styling across teams
• No setup for visual regression or isolated bug reproduction

Goals & Mid-Point Milestone

Goals

• Initialize Storybook in the current frontend project
• Create .stories.ts/.js files for at least 5 reusable components (e.g., Button, Card, Modal, Header, Input)
• Organize stories in folders like Components/Button, Layouts/Header
• Align Storybook theming with the current app’s styles
• Add a README.md to guide future contributions
• Set up Chromatic for automated previews and visual regression tracking
• Midpoint milestone: At least 5 primary/secondary components included with 1+ variations
  and Style guide aligned with main app theme

Setup/Installation

Base stack: Angular + JavaScript/TypeScript

Styling system: CSS-in-JS or SCSS (as per project setup)

Tools: Storybook, Node

Optional: Chromatic (for cloud-based previews)

Expected Outcome

• A centralized Storybook environment where all core UI components can be documented, previewed, and tested in isolation

• Component states and variations clearly displayed and usable across design/dev/QA workflows

• Reduced duplication and inconsistency in UI logic

• Smoother design-development handoff

• Foundation laid for visual regression testing and future component scalability

Acceptance Criteria

✅ npm run storybook starts a working Storybook instance
✅ At least 5 reusable components (primary and secondary) are documented
✅ Global themes/styles match the core app
✅ README guide explains how to contribute new stories
✅ (Optional) Chromatic previews working for reviewers

Implementation Details

Tech Stack: JavaScript/TypeScript, Angular, Node, Storybook

Optional Tooling: Chromatic for CI and previews

Story Structure: Organized under /stories/Components/, /stories/Layouts/, etc.

Mockups/Wireframes

NA- the Storybook itself will serve as the visual reference layer

Product Name

UI Component Library

Organisation Name

Education Initiative

Domain

Education technology

Tech Skills Needed

Angular

Mentor(s)

TBD

Category

Frontend