Diary

A specialized card component system for displaying health measurement data and diary entries in healthcare applications. The Diary module provides interactive cards with measurement display capabilities, designed for medical tracking and patient monitoring workflows.

Key Features

• Measurement Display: Specialized cards for health metrics and diary entries
• Data State Management: Visual distinction between measured and unmeasured states
• Compound Components: Flexible architecture using the compound component pattern
• Healthcare Icons: Integration with measurement type icons for visual identification
• Interactive Cards: Touch-enabled cards for navigation and data entry
• Accessibility Ready: Full screen reader support and healthcare-specific accessibility features

Components

DiaryCard

The main card component that serves as a container for diary entries and measurement data with automatic styling based on data availability.

Sub-components:

• DiaryCard.StartSection - Header section with icon and optional right content
• DiaryCard.TaskIcon - Measurement type icons (inherited from Tile module)
• DiaryCard.Title - Card title text (inherited from Tile module)
• DiaryCard.MeasuredValue - Value display with unit and timestamp (inherited from Tile module)
• DiaryCard.NoData - Empty state indicator for unmeasured data

Architecture

The Diary module extends the Tile module's compound component pattern, specializing it for healthcare diary and measurement use cases:

Compound Component Design

• Main Container: DiaryCard provides theming, touch handling, and state-aware styling
• Inherited Components: Reuses TaskIcon, Title, and MeasuredValue from the Tile module
• Custom Components: StartSection and NoData designed specifically for diary workflows
• Data State Awareness: Automatic visual styling based on hasData prop