Add Storybook Coverage for the StatusBadge Component

Problem Description

The design team recently reviewed the component library and found that StatusBadge — one of the most widely used components in the app — has no Storybook documentation. Designers frequently need to share UI specs with stakeholders, and QA needs to verify each visual state without spinning up the full app. The component has multiple states that are hard to trigger manually in the running application.

StatusBadge is used across the dashboard, job tracking views, and notifications panel to indicate the current status of a resource (e.g., a pipeline, a deployment, or a task). The component accepts a status prop that controls its appearance, and optionally accepts a size and label override. It needs Storybook documentation that covers its full range of meaningful states so that both designers and developers can review them at a glance.

The component source is provided below. Your job is to write a thorough Storybook stories file for it following the project conventions. Place the stories file next to the component.

Output Specification

Create the stories file at src/components/StatusBadge/StatusBadge.stories.tsx. The component file itself is provided in the inputs and should be placed at src/components/StatusBadge/StatusBadge.tsx before you begin.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/StatusBadge.tsx =============== import { Badge, type BadgeProps } from '@chakra-ui/react';

export type StatusType = 'active' | 'pending' | 'failed' | 'paused' | 'completed' | 'unknown';

export interface StatusBadgeProps extends Omit<BadgeProps, 'colorScheme'> { status: StatusType; label?: string; size?: 'sm' | 'md' | 'lg'; }

const statusConfig: Record<StatusType, { label: string; colorPalette: string }> = { active: { label: 'Active', colorPalette: 'green' }, pending: { label: 'Pending', colorPalette: 'yellow' }, failed: { label: 'Failed', colorPalette: 'red' }, paused: { label: 'Paused', colorPalette: 'gray' }, completed: { label: 'Completed', colorPalette: 'blue' }, unknown: { label: 'Unknown', colorPalette: 'gray' }, };

export function StatusBadge({ status, label, size = 'md', ...rest }: StatusBadgeProps) { const config = statusConfig[status]; return ( <Badge colorPalette={config.colorPalette} size={size} variant="subtle" {...rest} > {label ?? config.label} </Badge> ); }

export default StatusBadge;