@egintegrations/healthcare-ui

Healthcare-specific React Native UI components for building healthcare mobile applications. Includes contact cards, emergency information, care pathways, and document management.

Features

• ContactCard: Display healthcare staff with call, email, and WhatsApp actions
• EmergencyCard: Show emergency contacts with quick-call functionality
• PathwayCard: Display care pathways with icons and notifications
• DocumentAttachmentList: Manage downloadable healthcare documents
• Customizable Theme: Override colors, fonts, spacing, and shadows
• TypeScript: Full type safety with comprehensive interfaces

Installation

npm install @egintegrations/healthcare-ui

Peer Dependencies

npm install react react-native @expo/vector-icons

Usage

ContactCard

Display healthcare staff contact information with action buttons:

import { ContactCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

<ContactCard
  contact={{
    id: '1',
    name: 'Dr. Sarah Johnson',
    title: 'Cardiologist',
    avatar: 'https://example.com/avatar.jpg',
    phone: '+1234567890',
    email: '[email protected]',
    department: 'Cardiology',
    extension: '1234',
    group: 'Primary Care',
  }}
  iconComponent={Ionicons}
  onCall={(phone) => console.log('Calling:', phone)}
  onEmail={(email) => console.log('Emailing:', email)}
  onWhatsApp={(phone) => console.log('WhatsApp:', phone)}
/>

Props

• contact (required): Contact information object
• theme?: Custom theme overrides
• onCall?: Custom call handler (default: uses Linking.openURL)
• onEmail?: Custom email handler (default: uses mailto:)
• onWhatsApp?: Custom WhatsApp handler (default: uses whatsapp://)
• iconComponent?: Icon component (e.g., Ionicons from @expo/vector-icons)

EmergencyCard

Display emergency contact information with prominent call buttons:

import { EmergencyCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

<EmergencyCard
  emergencyInfo={{
    title: 'Emergency Contacts',
    location: 'London, UK',
    numbers: [
      { label: 'Emergency Services', number: '999', urgent: true },
      { label: 'Hospital', number: '+44 20 1234 5678', urgent: false },
    ],
    resources: {
      embassy: 'US Embassy: +44 20 7499 9000',
      localHospitals: ['London Hospital', 'St. Mary\'s Hospital'],
    },
  }}
  iconComponent={Ionicons}
  loading={false}
  onCall={(number, label) => console.log('Emergency call:', label, number)}
/>

Props

• emergencyInfo: Emergency contact information (or null if unavailable)
• loading?: Show loading state (default: false)
• theme?: Custom theme overrides
• onCall?: Custom call handler
• iconComponent?: Icon component

PathwayCard

Display care pathways with color-coded icons and notifications:

import { PathwayCard } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

<PathwayCard
  pathway={{
    id: '1',
    name: 'Emergency Services',
    description: 'Emergency contact information and protocols',
    color: '#DC2626',
    icon: 'medkit',
    notification: {
      enabled: true,
      message: 'Updated today',
    },
  }}
  onPress={() => navigation.navigate('PathwayDetail', { id: '1' })}
  iconComponent={Ionicons}
/>

Props

• pathway (required): Pathway information object
• onPress (required): Handler when pathway is tapped
• theme?: Custom theme overrides
• iconComponent?: Icon component

DocumentAttachmentList

Display a list of downloadable documents:

import { DocumentAttachmentList } from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

<DocumentAttachmentList
  heading="Patient Resources"
  documents={[
    {
      id: '1',
      label: 'Treatment Guide',
      url: 'https://example.com/guide.pdf',
      fileType: 'pdf',
      description: 'Comprehensive guide to your treatment plan',
    },
    {
      id: '2',
      label: 'Medication List',
      url: 'https://example.com/meds.pdf',
      fileType: 'pdf',
      description: 'Current medications and dosages',
    },
  ]}
  iconComponent={Ionicons}
  onDownload={(doc) => {
    // Handle document download
    console.log('Downloading:', doc.label);
  }}
/>

Props

• documents?: Array of document objects (component hidden if empty)
• heading?: Section heading (default: 'Downloads')
• theme?: Custom theme overrides
• onDownload?: Download handler (receives document object)
• iconComponent?: Icon component

Theme Customization

All components accept a theme prop for customization:

import { ContactCard, defaultTheme, mergeTheme } from '@egintegrations/healthcare-ui';

const customTheme = mergeTheme({
  colors: {
    primary: '#0066CC',
    danger: '#DC2626',
    // ... other color overrides
  },
  fonts: {
    small: 12,
    body: 14,
    h2: 20,
    h3: 16,
  },
  spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
  radii: {
    sm: 4,
    md: 8,
  },
});

<ContactCard contact={contact} theme={customTheme} />

Default Theme

The package includes a default healthcare theme:

{
  colors: {
    primary: '#0066CC',
    secondary: '#00A86B',
    white: '#FFFFFF',
    navy: '#1A365D',
    blue: '#0066CC',
    green: '#00A86B',
    danger: '#DC2626',
    error: '#D14343',
    grey200: '#E5E7EB',
    grey600: '#6B7280',
    grey700: '#4B5563',
    grey800: '#1F2937',
  },
  fonts: {
    small: 12,
    body: 14,
    h2: 20,
    h3: 16,
  },
  spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
  radii: {
    sm: 4,
    md: 8,
  },
  shadows: {
    medium: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
    },
  },
}

TypeScript

Full TypeScript support with exported types:

import type {
  Contact,
  DocumentAttachment,
  Pathway,
  EmergencyInfo,
  EmergencyNumber,
  HealthcareTheme,
  ContactCardProps,
  EmergencyCardProps,
  PathwayCardProps,
  DocumentAttachmentListProps,
} from '@egintegrations/healthcare-ui';

Complete Example

import React from 'react';
import { ScrollView, View } from 'react-native';
import {
  ContactCard,
  EmergencyCard,
  PathwayCard,
  DocumentAttachmentList,
  mergeTheme,
} from '@egintegrations/healthcare-ui';
import { Ionicons } from '@expo/vector-icons';

const customTheme = mergeTheme({
  colors: {
    primary: '#0066CC',
    danger: '#DC2626',
  },
});

export default function HealthcareScreen() {
  const contacts = [
    {
      id: '1',
      name: 'Dr. Sarah Johnson',
      title: 'Cardiologist',
      avatar: 'https://example.com/avatar.jpg',
      phone: '+1234567890',
      email: '[email protected]',
      department: 'Cardiology',
    },
  ];

  const pathways = [
    {
      id: '1',
      name: 'Emergency Services',
      description: 'Emergency contact information',
      color: '#DC2626',
      icon: 'medkit',
    },
  ];

  const documents = [
    {
      id: '1',
      label: 'Treatment Guide',
      url: 'https://example.com/guide.pdf',
      fileType: 'pdf',
      description: 'Your treatment plan',
    },
  ];

  const emergencyInfo = {
    title: 'Emergency Contacts',
    location: 'London, UK',
    numbers: [
      { label: 'Emergency', number: '999', urgent: true },
    ],
  };

  return (
    <ScrollView>
      <View style={{ padding: 16 }}>
        <EmergencyCard
          emergencyInfo={emergencyInfo}
          iconComponent={Ionicons}
          theme={customTheme}
        />

        {pathways.map((pathway) => (
          <PathwayCard
            key={pathway.id}
            pathway={pathway}
            onPress={() => console.log('Pathway:', pathway.name)}
            iconComponent={Ionicons}
            theme={customTheme}
          />
        ))}

        {contacts.map((contact) => (
          <ContactCard
            key={contact.id}
            contact={contact}
            iconComponent={Ionicons}
            theme={customTheme}
          />
        ))}

        <DocumentAttachmentList
          documents={documents}
          iconComponent={Ionicons}
          theme={customTheme}
          onDownload={(doc) => console.log('Download:', doc.label)}
        />
      </View>
    </ScrollView>
  );
}

Source Project

Extracted from Care-Resources:

• ContactCard: src/components/ContactCard.tsx
• EmergencyCard: src/components/EmergencyCard.tsx
• PathwayCard: src/components/PathwayCard.tsx
• DocumentAttachmentList: src/components/DocumentAttachmentList.tsx

Refactored with:

• Theme provider extraction to pluggable theme system
• Service dependencies removed (download manager, location service)
• Custom handler props for flexibility
• Optional icon component for different icon libraries

License

MIT

Contributing

See the main egi-comp-library repository for contribution guidelines.