@koech/esm-core 8.0.0

package/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx

@@ -0,0 +1,99 @@
+/** @module @category UI */
+import React, { useEffect, useMemo, useState } from 'react';
+import Avatar from 'react-avatar';
+import GeoPattern from 'geopattern';
+import { SkeletonIcon } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-translations';
+import { usePatientPhoto } from './usePatientPhoto';
+import PlaceholderIcon from './placeholder-icon.component';
+import styles from './patient-photo.module.scss';
+
+export interface PatientPhotoProps {
+  patientName: string;
+  patientUuid: string;
+  alt?: string;
+}
+
+/**
+ * A component which displays the patient photo https://zeroheight.com/23a080e38/p/6663f3-patient-header. If there is no photo, it will display a generated avatar. The default size is 56px.
+ */
+export function PatientPhoto({ patientUuid, patientName, alt }: PatientPhotoProps) {
+  const { data: photo, isLoading } = usePatientPhoto(patientUuid);
+  const [validImageSrc, setValidImageSrc] = useState<string | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const pattern = useMemo(() => GeoPattern.generate(patientUuid), [patientUuid]);
+
+  useEffect(() => {
+    if (photo?.imageSrc) {
+      setIsValidating(true);
+      let cancelled = false;
+      const img = new Image();
+      img.onload = () => {
+        if (!cancelled) {
+          setValidImageSrc(photo.imageSrc);
+          setIsValidating(false);
+        }
+      };
+      img.onerror = () => {
+        if (!cancelled) {
+          setValidImageSrc(null);
+          setIsValidating(false);
+        }
+      };
+      img.src = photo.imageSrc;
+
+      return () => {
+        cancelled = true;
+      };
+    } else {
+      setValidImageSrc(null);
+      setIsValidating(false);
+    }
+  }, [photo?.imageSrc]);
+
+  const altText = useMemo(() => {
+    if (alt) {
+      return alt;
+    }
+
+    return validImageSrc
+      ? getCoreTranslation('patientPhotoAlt', 'Profile photo of {{patientName}}', { patientName })
+      : getCoreTranslation('patientAvatarAlt', 'Avatar for {{patientName}}', { patientName });
+  }, [alt, validImageSrc, patientName]);
+
+  if (isLoading || isValidating) {
+    return <SkeletonIcon className={styles.skeleton} data-testid="skeleton-icon" />;
+  }
+
+  if (photo?.imageSrc && !validImageSrc) {
+    return (
+      <PlaceholderIcon
+        aria-label={getCoreTranslation('patientPhotoPlaceholder', 'Photo placeholder for {{patientName}}', {
+          patientName,
+        })}
+      />
+    );
+  }
+
+  return (
+    <div aria-label={altText}>
+      <Avatar
+        alt={altText}
+        color="rgba(0,0,0,0)"
+        maxInitials={3}
+        name={patientName}
+        size="56"
+        src={validImageSrc ?? undefined}
+        style={
+          !validImageSrc
+            ? {
+                backgroundImage: pattern.toDataUrl(),
+                backgroundRepeat: 'round',
+              }
+            : undefined
+        }
+        textSizeRatio={2}
+      />
+    </div>
+  );
+}

package/packages/framework/esm-styleguide/src/patient-photo/patient-photo.module.scss

@@ -0,0 +1,4 @@
+.skeleton {
+  height: 3.5rem;
+  width: 3.5rem;
+}

package/packages/framework/esm-styleguide/src/patient-photo/patient-photo.test.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { PatientPhoto } from './patient-photo.component';
+import { usePatientPhoto } from './usePatientPhoto';
+
+const mockUsePatientPhoto = vi.mocked(usePatientPhoto);
+
+vi.mock('./usePatientPhoto', () => ({
+  usePatientPhoto: vi.fn(),
+}));
+
+const mockToDataUrl = vi.fn().mockReturnValue('data:image/svg+xml;base64,mockpattern');
+
+vi.mock('geopattern', () => ({
+  default: {
+    generate: vi.fn(() => ({
+      toDataUrl: mockToDataUrl,
+    })),
+  },
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (_key: string, defaultValue: string, options?: any) => {
+      if (options && options.patientName) {
+        return defaultValue.replace('{{patientName}}', options.patientName);
+      }
+      return defaultValue;
+    },
+  }),
+}));
+
+const patientUuid = 'test-patient-uuid';
+const patientName = 'Freddy Mercury';
+
+describe('PatientPhoto', () => {
+  it('renders a progressbar when the patient photo is loading', () => {
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: true,
+      data: null,
+      error: undefined,
+    });
+
+    render(<PatientPhoto patientUuid={patientUuid} patientName={patientName} />);
+
+    expect(screen.getByTestId('skeleton-icon')).toBeInTheDocument();
+  });
+
+  it('renders a placeholder image if the patient photo fails to load', async () => {
+    // Mock the Image loading process to simulate a failed load
+    const originalImage = window.Image;
+    const mockImage = function () {
+      return {
+        onerror: null,
+        _src: '',
+        get src() {
+          return this._src;
+        },
+        set src(value: string) {
+          this._src = value;
+          // Simulate failed image load
+          setTimeout(() => {
+            if (this.onerror) {
+              this.onerror.call(this, new Event('error'));
+            }
+          }, 0);
+        },
+      };
+    };
+    window.Image = mockImage as any;
+
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: false,
+      data: { imageSrc: 'invalid-url.jpg', dateTime: '2024-01-01' },
+      error: undefined,
+    });
+
+    render(<PatientPhoto patientName={patientName} patientUuid={patientUuid} />);
+
+    // Wait for the placeholder to appear after image validation fails
+    await screen.findByLabelText('Photo placeholder for Freddy Mercury');
+
+    expect(screen.getByLabelText('Photo placeholder for Freddy Mercury')).toBeInTheDocument();
+
+    // Restore the original Image constructor
+    window.Image = originalImage;
+  });
+
+  it('renders the avatar image when image successfully loads', async () => {
+    // Mock the Image loading process
+    const originalImage = window.Image;
+    const mockImage = function () {
+      return {
+        onload: null,
+        _src: '',
+        get src() {
+          return this._src;
+        },
+        set src(value: string) {
+          this._src = value;
+          // Simulate successful image load
+          setTimeout(() => {
+            if (this.onload) {
+              this.onload.call(this, new Event('load'));
+            }
+          }, 0);
+        },
+      };
+    };
+    window.Image = mockImage as any;
+
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: false,
+      data: { imageSrc: 'valid-image.jpg', dateTime: '2024-01-01' },
+      error: undefined,
+    });
+
+    render(<PatientPhoto patientUuid={patientUuid} patientName={patientName} />);
+
+    // Wait for the image to "load"
+    await screen.findByAltText('Profile photo of Freddy Mercury');
+
+    const avatarImage = screen.getByRole('img', { name: 'Profile photo of Freddy Mercury' });
+    expect(avatarImage).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('src', 'valid-image.jpg');
+    expect(avatarImage).toHaveAttribute('alt', 'Profile photo of Freddy Mercury');
+
+    // Restore the original Image constructor
+    window.Image = originalImage;
+  });
+
+  it('renders avatar with GeoPattern background when no photo is available', () => {
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: false,
+      data: null,
+      error: undefined,
+    });
+
+    render(<PatientPhoto patientUuid={patientUuid} patientName={patientName} />);
+
+    // When no photo is available, the Avatar component renders initials as a div, not an img
+    const avatar = screen.getByTitle('Freddy Mercury');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('uses custom alt text when provided with a valid image', async () => {
+    // Mock the Image loading process
+    const originalImage = window.Image;
+    const mockImage = function () {
+      return {
+        onload: null,
+        _src: '',
+        get src() {
+          return this._src;
+        },
+        set src(value: string) {
+          this._src = value;
+          setTimeout(() => {
+            if (this.onload) {
+              this.onload.call(this, new Event('load'));
+            }
+          }, 0);
+        },
+      };
+    };
+    window.Image = mockImage as any;
+
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: false,
+      data: { imageSrc: 'valid-image.jpg', dateTime: '2024-01-01' },
+      error: undefined,
+    });
+
+    const customAlt = 'Custom patient image';
+    render(<PatientPhoto patientUuid={patientUuid} patientName={patientName} alt={customAlt} />);
+
+    await screen.findByAltText(customAlt);
+
+    const avatarImage = screen.getByRole('img', { name: customAlt });
+    expect(avatarImage).toBeInTheDocument();
+    expect(avatarImage).toHaveAttribute('alt', customAlt);
+
+    // Restore the original Image constructor
+    window.Image = originalImage;
+  });
+});

package/packages/framework/esm-styleguide/src/patient-photo/placeholder-icon.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface PlaceholderIconProps {
+  width?: number;
+  height?: number;
+  'aria-label'?: string;
+}
+
+const PlaceholderIcon: React.FC<PlaceholderIconProps> = ({ width = 56, height = 56, 'aria-label': ariaLabel }) => {
+  const { t } = useTranslation();
+
+  return (
+    <svg
+      aria-label={ariaLabel ?? t('patientPhotoPlaceholder', 'Patient photo placeholder')}
+      width={width}
+      height={height}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="#ffffff" d="M0 0h56v56H0z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m36.75 20.134-.884-.884L19.25 35.866l.884.884 1.25-1.25H34.25a1.252 1.252 0 0 0 1.25-1.25V21.384l1.25-1.25Zm-2.5 14.116H22.634l4.87-4.87 1.487 1.486a1.25 1.25 0 0 0 1.768 0l.991-.991 2.5 2.498v1.877Zm0-3.645-1.616-1.616a1.25 1.25 0 0 0-1.768 0l-.991.991-1.486-1.486 5.861-5.86v7.971Zm-12.5 1.145v-1.875l3.125-3.123.858.859.885-.885-.86-.86a1.25 1.25 0 0 0-1.767 0l-2.241 2.242V21.75h10V20.5h-10c-.69 0-1.25.56-1.25 1.25v10h1.25Z"
+        fill="#8D8D8D"
+      />
+    </svg>
+  );
+};
+
+export default PlaceholderIcon;

package/packages/framework/esm-styleguide/src/patient-photo/usePatientPhoto.ts

@@ -0,0 +1,53 @@
+/** @module @category UI */
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-api';
+import { useConfig } from '@openmrs/esm-react-utils';
+import { type StyleguideConfigObject } from '../config-schema';
+
+export interface UsePatientPhotoResult {
+  data: { dateTime: string; imageSrc: string } | null;
+  error?: Error;
+  isLoading: boolean;
+}
+
+interface ObsFetchResponse {
+  results: Array<PhotoObs>;
+}
+
+interface PhotoObs {
+  display: string;
+  obsDatetime: string;
+  uuid: string;
+  value: {
+    display: string;
+    links: {
+      rel: string;
+      uri: string;
+    };
+  };
+}
+
+export function usePatientPhoto(patientUuid: string): UsePatientPhotoResult {
+  const { patientPhotoConceptUuid } = useConfig<StyleguideConfigObject>({
+    externalModuleName: '@openmrs/esm-styleguide',
+  });
+
+  const url = patientPhotoConceptUuid
+    ? `${restBaseUrl}/obs?patient=${patientUuid}&concept=${patientPhotoConceptUuid}&v=full`
+    : null;
+
+  const { data, error, isLoading } = useSWR<{ data: ObsFetchResponse }, Error>(patientUuid ? url : null, openmrsFetch);
+
+  const item = data?.data?.results[0];
+
+  return {
+    data: item
+      ? {
+          dateTime: item?.obsDatetime,
+          imageSrc: item?.value?.links?.uri,
+        }
+      : null,
+    error: error,
+    isLoading,
+  };
+}

package/packages/framework/esm-styleguide/src/pictograms/index.ts

@@ -0,0 +1 @@
+export * from './pictograms';

package/packages/framework/esm-styleguide/src/pictograms/pictogram-registration.ts

@@ -0,0 +1,66 @@
+import { addSvg } from '../svg-utils';
+import appointments from './svgs/appointments.svg';
+import assessment1 from './svgs/assessment-1.svg';
+import assessment2 from './svgs/assessment-2.svg';
+import bloodBank from './svgs/blood-bank.svg';
+import cardiology from './svgs/cardiology.svg';
+import ctScan from './svgs/ct-scan.svg';
+import dentistry from './svgs/dentistry.svg';
+import emergencyDepartment from './svgs/emergency-department.svg';
+import facility from './svgs/facility.svg';
+import geriatrics from './svgs/geriatrics.svg';
+import gynaecology from './svgs/gynaecology.svg';
+import inPatient from './svgs/in-patient.svg';
+import stockManagement from './svgs/inventory.svg';
+import labs from './svgs/labs.svg';
+import labs2 from './svgs/labs-2.svg';
+import obstetrics from './svgs/obstetrics.svg';
+import patientSearch from './svgs/patient-search.svg';
+import patients from './svgs/patients.svg';
+import paymentsDesk from './svgs/payments-desk.svg';
+import pharmacy from './svgs/pharmacy-1.svg';
+import pharmacy2 from './svgs/pharmacy-2.svg';
+import patientRegistration from './svgs/registration.svg';
+import serviceQueues from './svgs/service-queues.svg';
+import transfer from './svgs/transfer.svg';
+import triage from './svgs/triage.svg';
+import xray from './svgs/x-ray.svg';
+import { type PictogramId } from './pictograms';
+
+export function setupPictograms() {
+  addPictogramSvg('omrs-pict-appointments', appointments);
+  addPictogramSvg('omrs-pict-assessment-1', assessment1);
+  addPictogramSvg('omrs-pict-assessment-2', assessment2);
+  addPictogramSvg('omrs-pict-blood-bank', bloodBank);
+  addPictogramSvg('omrs-pict-cardiology', cardiology);
+  addPictogramSvg('omrs-pict-ct-scan', ctScan);
+  addPictogramSvg('omrs-pict-dentistry', dentistry);
+  addPictogramSvg('omrs-pict-emergency-department', emergencyDepartment);
+  addPictogramSvg('omrs-pict-facility', facility);
+  addPictogramSvg('omrs-pict-geriatrics', geriatrics);
+  addPictogramSvg('omrs-pict-gynaecology', gynaecology);
+  addPictogramSvg('omrs-pict-in-patient', inPatient);
+  addPictogramSvg('omrs-pict-laboratory', labs);
+  addPictogramSvg('omrs-pict-labs-2', labs2);
+  addPictogramSvg('omrs-pict-obstetrics', obstetrics);
+  addPictogramSvg('omrs-pict-patient-search', patientSearch);
+  addPictogramSvg('omrs-pict-patients', patients);
+  addPictogramSvg('omrs-pict-payments-desk', paymentsDesk);
+  addPictogramSvg('omrs-pict-pharmacy', pharmacy);
+  addPictogramSvg('omrs-pict-pharmacy-2', pharmacy2);
+  addPictogramSvg('omrs-pict-registration', patientRegistration);
+  addPictogramSvg('omrs-pict-service-queues', serviceQueues);
+  addPictogramSvg('omrs-pict-stock-management', stockManagement);
+  addPictogramSvg('omrs-pict-transfer', transfer);
+  addPictogramSvg('omrs-pict-triage', triage);
+  addPictogramSvg('omrs-pict-x-ray', xray);
+}
+
+/**
+ * A type-safe wrapper around addSvg
+ * @param pictogramId
+ * @param svgString
+ */
+function addPictogramSvg(pictogramId: PictogramId, svgString: string) {
+  addSvg(pictogramId, svgString);
+}

package/packages/framework/esm-styleguide/src/pictograms/pictograms.module.scss

@@ -0,0 +1,5 @@
+:global([dir='rtl']) {
+  .pictogram {
+    transform: scaleX(-1);
+  }
+}