Skip to main content

React Components

Haste Health provides a comprehensive library of React components for building healthcare applications. The @haste-health/components package includes base UI components, layout components, and specialized FHIR components.

Interactive Documentation​

🎨 View Storybook →

All components are documented with interactive examples in our Storybook at storybook.haste.health. You can:

  • 📖 Browse all available components
  • 🎮 Interact with live examples
  • 🔧 Experiment with component props in real-time
  • 📋 Copy code snippets
  • 🎨 View different variants and states
  • 📱 Test responsive behavior

Installation​

Install the component library via npm, pnpm, or yarn:

npm install @haste-health/components
# or
pnpm add @haste-health/components
# or
yarn add @haste-health/components

Quick Start​

Import components and CSS in your application:

import { Button, Table, Modal, Input } from '@haste-health/components';
import '@haste-health/components/dist/index.css';

function MyApp() {
  return (
    <div>
      <Button buttonType="primary" onClick={() => alert('Clicked!')}>
        Save Patient
      </Button>
    </div>
  );
}

Component Categories​

Base Components​

Foundation UI components for building interfaces:

Form Controls​

  • Button - Styled buttons with variants (primary, secondary, danger) and sizes
  • Input - Text input fields with labels, validation, and error states
  • Select - Dropdown selection component with options
  • InputContainer - Container for grouping form inputs

Data Display​

  • Table - Data tables with custom rendering, sorting, and pagination
  • Tag - Labels and status badges for categorization
  • Loading - Loading spinners and indicators for async operations
  • Tabs - Tab navigation for organizing content
  • BreadCrumbs - Breadcrumb navigation trail
  • Menu / DropDownMenu - Dropdown menus and menu items

Overlays​

  • Modal - Dialog overlays for focused user interactions
  • Toaster - Toast notifications for user feedback

Code Editors​

  • CodeMirror - Code editor with syntax highlighting
  • MergeViewer - Side-by-side diff viewer for comparing code

Utilities​

  • Add - Add button component for creating new items

View Base Components in Storybook →

Layout Components​

Structural components for application layout:

  • Shell - Complete application shell with navigation and content areas
  • Navigation - Top navigation bar with user menu and navigation items
  • Sidebar - Collapsible sidebar navigation for hierarchical menus

View Layout Components in Storybook →

FHIR Components​

Specialized components for working with FHIR resources and healthcare data:

Generative Components​

  • FHIRGenerativeForm - Auto-generates forms from FHIR StructureDefinitions
  • FHIRSearchTable - FHIR resource search with filters, sorting, and pagination

Complex Types​

  • Reference - FHIR resource reference picker with search
  • Components for CodeableConcept, Quantity, Identifier, and other FHIR complex types

Primitive Types​

  • Components for all FHIR primitive data types (string, date, boolean, integer, etc.)

Resource Components​

  • Pre-built components for displaying specific FHIR resources

View FHIR Components in Storybook →

Usage Examples​

Building a Patient Form​

import { FHIRGenerativeForm } from '@haste-health/components';
import { R4 } from '@haste-health/fhir-types/versions';
import { Patient } from '@haste-health/fhir-types/r4/types';
import { useState } from 'react';

function PatientForm() {
  const [patient, setPatient] = useState<Patient>({
    resourceType: 'Patient',
    name: [{ given: [''], family: '' }],
    birthDate: '',
    gender: undefined
  });

  const handleSave = async () => {
    const response = await fhirClient.create(patient);
    console.log('Patient created:', response.id);
  };

  return (
    <div>
      <h2>New Patient</h2>
      <FHIRGenerativeForm
        fhirVersion={R4}
        client={fhirClient}
        value={patient}
        setValue={(setter) => setPatient(setter(patient))}
      />
      <Button buttonType="primary" onClick={handleSave}>
        Save Patient
      </Button>
    </div>
  );
}

Key features​

🎯 FHIR-First Design​

  • Components designed specifically for healthcare applications
  • Native support for FHIR resources and data types
  • Automatic form generation from FHIR StructureDefinitions

💪 Type Safe​

  • Full TypeScript support
  • Comprehensive type definitions
  • IntelliSense support
  • Type-safe FHIR resources

Component Development​

The components are located in the monorepo at:

frontend/packages/components/
├── src/
│   ├── base/          # Base UI components
│   ├── layout/        # Layout components
│   ├── fhir/          # FHIR-specific components
│   │   ├── complex/   # Complex FHIR types
│   │   ├── primitives/# Primitive FHIR types
│   │   ├── generative/# Auto-generated components
│   │   └── resources/ # Resource-specific components
│   └── hastehealth/   # Haste Health specific components
├── dist/              # Built files
└── package.json

Running Storybook Locally​

To develop components locally:

cd frontend/packages/components
pnpm install
pnpm storybook

This starts Storybook at http://localhost:6006.

Building Components​

pnpm build

This creates the distribution files in the dist/ directory.

Resources​

Documentation​

External Resources​

Support​

If you encounter issues or have questions:

  1. Check the Storybook documentation for component examples
  2. Review the source code in frontend/packages/components
  3. Open an issue on GitHub