Provider View – Storybook Design System

Component library and Storybook documentation for the Provider View Remote Patient Monitoring application.

Components

Component	Story path	Description
SideNav	Navigation/SideNav	Left sidebar with icon+label nav items, collapsed mode
AppHeader	Layout/AppHeader	Gradient page header with NHI badge and user avatar
PatientDemographics	Patient/PatientDemographics	Demographics strip (DOB, gender, address, GP)
ObservationCard	Patient/ObservationCard	Vital sign card with value, unit, sparkline, timestamp
DataTable	Data/DataTable	Sortable table for patients, care plans, search results
FormSubmissionList	Patient/FormSubmissionList	List of form submissions with highlighted rows
StatusBadge	UI/StatusBadge	Alert/status pill badges (amber, red, green, outline)

Design Tokens

All tokens are in src/design-system/tokens.ts and mirrored in tailwind.config.js.

Brand gradient

linear-gradient(90deg, #006060 0%, #003399 50%, #4D2379 100%)
Tailwind: bg-brand-gradient

Key colours

Token	Hex	Usage
Brand teal	#006060	Logo, active nav icon
Brand navy	#003399	Active nav text, links
Brand purple	#4D2379	Gradient end
Surface	#FFFFFF	Card backgrounds
Background	#FAFAFA	Page background
Sidebar	#F4F4F5	Navigation background
Active row	#F1F5F9	Highlighted table row
Border	#E4E4E7	All borders
Text primary	#18181B	Body text
Text muted	#71717A	Secondary text
Alert yellow	#FDE68A	Overdue/filter badges

Getting started

npm install
npm run storybook

Open http://localhost:6006

Extending

Each component uses shadcn/ui patterns with Tailwind CSS utility classes. Import the cn helper from @/lib/utils for conditional class merging.

import { cn } from '@/lib/utils';

To add a new component:

1. Create src/components/MyComponent/MyComponent.tsx
2. Create src/components/MyComponent/MyComponent.stories.tsx
3. Add the autodocs tag and at least: Default, AllVariants, and edge-case stories