{"_id":"@egintegrations/healthcare-ui","name":"@egintegrations/healthcare-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@egintegrations/healthcare-ui","version":"0.1.0","description":"Healthcare-specific React Native UI components including ContactCard, EmergencyCard, PathwayCard, and DocumentAttachmentList for building healthcare mobile applications.","main":"./dist/index.js","module":"./dist/index.mjs","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup src/index.ts --format cjs,esm --clean --external react --external react-native --external @expo/vector-icons","dev":"tsup src/index.ts --format cjs,esm --watch --external react --external react-native --external @expo/vector-icons","test":"jest","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"keywords":["react-native","healthcare","ui-components","mobile","care","medical","typescript","experimental"],"author":{"name":"EGI Integrations"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/EGIntegrations/egi-comp-library.git","directory":"packages/typescript/healthcare-ui"},"peerDependencies":{"@expo/vector-icons":">=13.0.0","react":">=18.0.0","react-native":">=0.70.0"},"devDependencies":{"@testing-library/react-native":"^12.4.2","@types/jest":"^29.5.11","@types/node":"^20.10.6","@types/react":"^17.0.62","@types/react-native":"^0.72.8","esbuild":"^0.19.11","jest":"^29.7.0","react":"^18.2.0","react-native":"^0.72.0","react-test-renderer":"^18.2.0","ts-jest":"^29.1.1","tsup":"^8.0.1","typescript":"^5.3.3"},"_id":"@egintegrations/healthcare-ui@0.1.0","gitHead":"04fb67ac9bd73cc33c67894482f4a7432922da59","bugs":{"url":"https://github.com/EGIntegrations/egi-comp-library/issues"},"homepage":"https://github.com/EGIntegrations/egi-comp-library#readme","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-278Aqhnvgwrd64IBRzM2aU957o6JdPHNwTLyqO0zMQbo2Hl3fjwVUE+wrbNwWyFJXQLrK6e4cKyLfiBiVaAPhA==","shasum":"d65d987df5b9bbb025c04535f2fe79a074fd3c56","tarball":"https://registry.npmjs.org/@egintegrations/healthcare-ui/-/healthcare-ui-0.1.0.tgz","fileCount":13,"unpackedSize":79718,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC1pwgi37X0oOSm4nxP0YWrTtGFM4rlhW5ubGDK5LGqOQIgTm7cHB6VKZ/tzuO7YOlqoFD/XfRsSt0kNqzf5vS2zFg="}]},"_npmUser":{"name":"egod21","email":"services@egintegrations.com"},"directories":{},"maintainers":[{"name":"egod21","email":"services@egintegrations.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/healthcare-ui_0.1.0_1769112226133_0.6939464689091797"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-22T20:03:46.031Z","0.1.0":"2026-01-22T20:03:46.314Z","modified":"2026-01-22T20:03:46.541Z"},"maintainers":[{"name":"egod21","email":"services@egintegrations.com"}],"description":"Healthcare-specific React Native UI components including ContactCard, EmergencyCard, PathwayCard, and DocumentAttachmentList for building healthcare mobile applications.","homepage":"https://github.com/EGIntegrations/egi-comp-library#readme","keywords":["react-native","healthcare","ui-components","mobile","care","medical","typescript","experimental"],"repository":{"type":"git","url":"git+https://github.com/EGIntegrations/egi-comp-library.git","directory":"packages/typescript/healthcare-ui"},"author":{"name":"EGI Integrations"},"bugs":{"url":"https://github.com/EGIntegrations/egi-comp-library/issues"},"license":"MIT","readme":"# @egintegrations/healthcare-ui\n\nHealthcare-specific React Native UI components for building healthcare mobile applications. Includes contact cards, emergency information, care pathways, and document management.\n\n## Features\n\n- **ContactCard**: Display healthcare staff with call, email, and WhatsApp actions\n- **EmergencyCard**: Show emergency contacts with quick-call functionality\n- **PathwayCard**: Display care pathways with icons and notifications\n- **DocumentAttachmentList**: Manage downloadable healthcare documents\n- **Customizable Theme**: Override colors, fonts, spacing, and shadows\n- **TypeScript**: Full type safety with comprehensive interfaces\n\n## Installation\n\n```bash\nnpm install @egintegrations/healthcare-ui\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native @expo/vector-icons\n```\n\n## Usage\n\n### ContactCard\n\nDisplay healthcare staff contact information with action buttons:\n\n```tsx\nimport { ContactCard } from '@egintegrations/healthcare-ui';\nimport { Ionicons } from '@expo/vector-icons';\n\n<ContactCard\n  contact={{\n    id: '1',\n    name: 'Dr. Sarah Johnson',\n    title: 'Cardiologist',\n    avatar: 'https://example.com/avatar.jpg',\n    phone: '+1234567890',\n    email: 'sarah.johnson@hospital.com',\n    department: 'Cardiology',\n    extension: '1234',\n    group: 'Primary Care',\n  }}\n  iconComponent={Ionicons}\n  onCall={(phone) => console.log('Calling:', phone)}\n  onEmail={(email) => console.log('Emailing:', email)}\n  onWhatsApp={(phone) => console.log('WhatsApp:', phone)}\n/>\n```\n\n#### Props\n\n- `contact` (required): Contact information object\n- `theme?`: Custom theme overrides\n- `onCall?`: Custom call handler (default: uses `Linking.openURL`)\n- `onEmail?`: Custom email handler (default: uses `mailto:`)\n- `onWhatsApp?`: Custom WhatsApp handler (default: uses `whatsapp://`)\n- `iconComponent?`: Icon component (e.g., `Ionicons` from `@expo/vector-icons`)\n\n### EmergencyCard\n\nDisplay emergency contact information with prominent call buttons:\n\n```tsx\nimport { EmergencyCard } from '@egintegrations/healthcare-ui';\nimport { Ionicons } from '@expo/vector-icons';\n\n<EmergencyCard\n  emergencyInfo={{\n    title: 'Emergency Contacts',\n    location: 'London, UK',\n    numbers: [\n      { label: 'Emergency Services', number: '999', urgent: true },\n      { label: 'Hospital', number: '+44 20 1234 5678', urgent: false },\n    ],\n    resources: {\n      embassy: 'US Embassy: +44 20 7499 9000',\n      localHospitals: ['London Hospital', 'St. Mary\\'s Hospital'],\n    },\n  }}\n  iconComponent={Ionicons}\n  loading={false}\n  onCall={(number, label) => console.log('Emergency call:', label, number)}\n/>\n```\n\n#### Props\n\n- `emergencyInfo`: Emergency contact information (or `null` if unavailable)\n- `loading?`: Show loading state (default: `false`)\n- `theme?`: Custom theme overrides\n- `onCall?`: Custom call handler\n- `iconComponent?`: Icon component\n\n### PathwayCard\n\nDisplay care pathways with color-coded icons and notifications:\n\n```tsx\nimport { PathwayCard } from '@egintegrations/healthcare-ui';\nimport { Ionicons } from '@expo/vector-icons';\n\n<PathwayCard\n  pathway={{\n    id: '1',\n    name: 'Emergency Services',\n    description: 'Emergency contact information and protocols',\n    color: '#DC2626',\n    icon: 'medkit',\n    notification: {\n      enabled: true,\n      message: 'Updated today',\n    },\n  }}\n  onPress={() => navigation.navigate('PathwayDetail', { id: '1' })}\n  iconComponent={Ionicons}\n/>\n```\n\n#### Props\n\n- `pathway` (required): Pathway information object\n- `onPress` (required): Handler when pathway is tapped\n- `theme?`: Custom theme overrides\n- `iconComponent?`: Icon component\n\n### DocumentAttachmentList\n\nDisplay a list of downloadable documents:\n\n```tsx\nimport { DocumentAttachmentList } from '@egintegrations/healthcare-ui';\nimport { Ionicons } from '@expo/vector-icons';\n\n<DocumentAttachmentList\n  heading=\"Patient Resources\"\n  documents={[\n    {\n      id: '1',\n      label: 'Treatment Guide',\n      url: 'https://example.com/guide.pdf',\n      fileType: 'pdf',\n      description: 'Comprehensive guide to your treatment plan',\n    },\n    {\n      id: '2',\n      label: 'Medication List',\n      url: 'https://example.com/meds.pdf',\n      fileType: 'pdf',\n      description: 'Current medications and dosages',\n    },\n  ]}\n  iconComponent={Ionicons}\n  onDownload={(doc) => {\n    // Handle document download\n    console.log('Downloading:', doc.label);\n  }}\n/>\n```\n\n#### Props\n\n- `documents?`: Array of document objects (component hidden if empty)\n- `heading?`: Section heading (default: `'Downloads'`)\n- `theme?`: Custom theme overrides\n- `onDownload?`: Download handler (receives document object)\n- `iconComponent?`: Icon component\n\n## Theme Customization\n\nAll components accept a `theme` prop for customization:\n\n```tsx\nimport { ContactCard, defaultTheme, mergeTheme } from '@egintegrations/healthcare-ui';\n\nconst customTheme = mergeTheme({\n  colors: {\n    primary: '#0066CC',\n    danger: '#DC2626',\n    // ... other color overrides\n  },\n  fonts: {\n    small: 12,\n    body: 14,\n    h2: 20,\n    h3: 16,\n  },\n  spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],\n  radii: {\n    sm: 4,\n    md: 8,\n  },\n});\n\n<ContactCard contact={contact} theme={customTheme} />\n```\n\n### Default Theme\n\nThe package includes a default healthcare theme:\n\n```tsx\n{\n  colors: {\n    primary: '#0066CC',\n    secondary: '#00A86B',\n    white: '#FFFFFF',\n    navy: '#1A365D',\n    blue: '#0066CC',\n    green: '#00A86B',\n    danger: '#DC2626',\n    error: '#D14343',\n    grey200: '#E5E7EB',\n    grey600: '#6B7280',\n    grey700: '#4B5563',\n    grey800: '#1F2937',\n  },\n  fonts: {\n    small: 12,\n    body: 14,\n    h2: 20,\n    h3: 16,\n  },\n  spacing: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],\n  radii: {\n    sm: 4,\n    md: 8,\n  },\n  shadows: {\n    medium: {\n      shadowColor: '#000',\n      shadowOffset: { width: 0, height: 2 },\n      shadowOpacity: 0.1,\n      shadowRadius: 4,\n      elevation: 3,\n    },\n  },\n}\n```\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```tsx\nimport type {\n  Contact,\n  DocumentAttachment,\n  Pathway,\n  EmergencyInfo,\n  EmergencyNumber,\n  HealthcareTheme,\n  ContactCardProps,\n  EmergencyCardProps,\n  PathwayCardProps,\n  DocumentAttachmentListProps,\n} from '@egintegrations/healthcare-ui';\n```\n\n## Complete Example\n\n```tsx\nimport React from 'react';\nimport { ScrollView, View } from 'react-native';\nimport {\n  ContactCard,\n  EmergencyCard,\n  PathwayCard,\n  DocumentAttachmentList,\n  mergeTheme,\n} from '@egintegrations/healthcare-ui';\nimport { Ionicons } from '@expo/vector-icons';\n\nconst customTheme = mergeTheme({\n  colors: {\n    primary: '#0066CC',\n    danger: '#DC2626',\n  },\n});\n\nexport default function HealthcareScreen() {\n  const contacts = [\n    {\n      id: '1',\n      name: 'Dr. Sarah Johnson',\n      title: 'Cardiologist',\n      avatar: 'https://example.com/avatar.jpg',\n      phone: '+1234567890',\n      email: 'sarah@hospital.com',\n      department: 'Cardiology',\n    },\n  ];\n\n  const pathways = [\n    {\n      id: '1',\n      name: 'Emergency Services',\n      description: 'Emergency contact information',\n      color: '#DC2626',\n      icon: 'medkit',\n    },\n  ];\n\n  const documents = [\n    {\n      id: '1',\n      label: 'Treatment Guide',\n      url: 'https://example.com/guide.pdf',\n      fileType: 'pdf',\n      description: 'Your treatment plan',\n    },\n  ];\n\n  const emergencyInfo = {\n    title: 'Emergency Contacts',\n    location: 'London, UK',\n    numbers: [\n      { label: 'Emergency', number: '999', urgent: true },\n    ],\n  };\n\n  return (\n    <ScrollView>\n      <View style={{ padding: 16 }}>\n        <EmergencyCard\n          emergencyInfo={emergencyInfo}\n          iconComponent={Ionicons}\n          theme={customTheme}\n        />\n\n        {pathways.map((pathway) => (\n          <PathwayCard\n            key={pathway.id}\n            pathway={pathway}\n            onPress={() => console.log('Pathway:', pathway.name)}\n            iconComponent={Ionicons}\n            theme={customTheme}\n          />\n        ))}\n\n        {contacts.map((contact) => (\n          <ContactCard\n            key={contact.id}\n            contact={contact}\n            iconComponent={Ionicons}\n            theme={customTheme}\n          />\n        ))}\n\n        <DocumentAttachmentList\n          documents={documents}\n          iconComponent={Ionicons}\n          theme={customTheme}\n          onDownload={(doc) => console.log('Download:', doc.label)}\n        />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n## Source Project\n\nExtracted from [Care-Resources](https://github.com/EGIntegrations/Care-Resources):\n- **ContactCard**: `src/components/ContactCard.tsx`\n- **EmergencyCard**: `src/components/EmergencyCard.tsx`\n- **PathwayCard**: `src/components/PathwayCard.tsx`\n- **DocumentAttachmentList**: `src/components/DocumentAttachmentList.tsx`\n\nRefactored with:\n- Theme provider extraction to pluggable theme system\n- Service dependencies removed (download manager, location service)\n- Custom handler props for flexibility\n- Optional icon component for different icon libraries\n\n## License\n\nMIT\n\n## Contributing\n\nSee the main [egi-comp-library](https://github.com/EGIntegrations/egi-comp-library) repository for contribution guidelines.\n","readmeFilename":"README.md","_rev":"1-0a6939bc9c7e95323f22a3f8cd13ab50"}