@openmrs/esm-styleguide 8.0.1-pre.3592 → 8.0.1-pre.3600

package/dist/pictograms/pictogram-registration.d.ts

@@ -0,0 +1 @@
+export declare function setupPictograms(): void;

package/dist/pictograms/pictograms.d.ts

@@ -0,0 +1,64 @@
+/** @category Pictograms */
+import React from 'react';
+import { type Argument } from 'classnames';
+export declare const pictogramIds: readonly ["omrs-pict-appointments", "omrs-pict-assessment-1", "omrs-pict-assessment-2", "omrs-pict-blood-bank", "omrs-pict-cardiology", "omrs-pict-ct-scan", "omrs-pict-dentistry", "omrs-pict-emergency-department", "omrs-pict-facility", "omrs-pict-geriatrics", "omrs-pict-gynaecology", "omrs-pict-in-patient", "omrs-pict-laboratory", "omrs-pict-labs-2", "omrs-pict-obstetrics", "omrs-pict-patient-search", "omrs-pict-patients", "omrs-pict-payments-desk", "omrs-pict-pharmacy", "omrs-pict-pharmacy-2", "omrs-pict-registration", "omrs-pict-service-queues", "omrs-pict-stock-management", "omrs-pict-transfer", "omrs-pict-triage", "omrs-pict-x-ray"];
+export type PictogramId = (typeof pictogramIds)[number];
+export type PictogramProps = {
+    className?: Argument;
+    size?: number;
+};
+export declare const AppointmentsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+/**
+ * @deprecated use AppointmentsPictogram instead
+ */
+export declare const AppointmentsAltPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Assessment1Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Assessment2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const BloodBankPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const CardiologyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const CtScanPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const DentistryPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const EmergencyDepartmentPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const FacilityPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const GeriatricsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const GynaecologyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const InPatientPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const LaboratoryPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Labs2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const ObstetricsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientSearchPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PaymentsDeskPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PharmacyPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const Pharmacy2Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const RegistrationPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const ServiceQueuesPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const StockManagementPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const TransferPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const TriagePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const XrayPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const HomePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export declare const PatientListsPictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+/**
+ * This is a utility component that takes an `pictogram` and render it if the sprite for the pictogram
+ * is available. The goal is to make it easier to conditionally render configuration-specified pictograms.
+ *
+ * @example
+ * ```tsx
+ *   <MaybePictogram pictogram='omrs-icon-baby' className={styles.myPictogramStyles} />
+ * ```
+ */
+export declare const MaybePictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    pictogram: string;
+    fallback?: React.ReactNode;
+} & PictogramProps & React.RefAttributes<SVGSVGElement>>>;
+export type SvgPictogramProps = {
+    /** the id of the pictogram  */
+    pictogram: PictogramId;
+    /** properties when using the pictogram  */
+    pictogramProps: PictogramProps;
+};
+/**
+ * This is a utility type for custom pictograms. Please maintain alphabetical order when adding new pictograms for readability.
+ */
+export declare const Pictogram: React.MemoExoticComponent<React.ForwardRefExoticComponent<SvgPictogramProps & React.RefAttributes<SVGSVGElement>>>;

package/dist/public.d.ts

@@ -6,7 +6,6 @@ export * from './datepicker';
 export * from './diagnosis-tags';
 export * from './empty-card';
 export * from './error-state';
-export * from './error-card';
 export * from './icons/icons';
 export * from './left-nav';
 export * from './location-picker';

package/dist/svg-utils.d.ts

@@ -0,0 +1 @@
+export declare function addSvg(htmlId: string, svgString: string): void;

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Array of valid values for Carbon tag's "type" attribute.
+ * Options from https://react.carbondesignsystem.com/?path=/docs/components-tag--overview
+ */
+export declare const carbonTagColors: readonly ["red", "magenta", "purple", "blue", "teal", "cyan", "gray", "green", "warm-gray", "cool-gray", "high-contrast", "outline"];
+export type CarbonTagColor = (typeof carbonTagColors)[number];

package/dist/workspaces2/workspace2-close-prompt.modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface WorkspaceUnsavedChangesModal {
+    onConfirm: () => void;
+    onCancel: () => void;
+    affectedWorkspaceTitles: string[];
+}
+/**
+ * This modal is used for prompting user to confirm closing currently opened workspace.
+ */
+declare const Workspace2ClosePromptModal: React.FC<WorkspaceUnsavedChangesModal>;
+export default Workspace2ClosePromptModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3592",
+  "version": "8.0.1-pre.3600",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3592",
-    "@openmrs/esm-config": "8.0.1-pre.3592",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3592",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3592",
-    "@openmrs/esm-extensions": "8.0.1-pre.3592",
-    "@openmrs/esm-globals": "8.0.1-pre.3592",
-    "@openmrs/esm-navigation": "8.0.1-pre.3592",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3592",
-    "@openmrs/esm-state": "8.0.1-pre.3592",
-    "@openmrs/esm-translations": "8.0.1-pre.3592",
-    "@openmrs/esm-utils": "8.0.1-pre.3592",
+    "@openmrs/esm-api": "8.0.1-pre.3600",
+    "@openmrs/esm-config": "8.0.1-pre.3600",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3600",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3600",
+    "@openmrs/esm-extensions": "8.0.1-pre.3600",
+    "@openmrs/esm-globals": "8.0.1-pre.3600",
+    "@openmrs/esm-navigation": "8.0.1-pre.3600",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3600",
+    "@openmrs/esm-state": "8.0.1-pre.3600",
+    "@openmrs/esm-translations": "8.0.1-pre.3600",
+    "@openmrs/esm-utils": "8.0.1-pre.3600",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/dashboard-extension/index.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { BrowserRouter, useLocation } from 'react-router-dom';
 import { shallowEqual } from '@openmrs/esm-utils';
 import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
 import { type IconId } from '../icons';
@@ -10,8 +10,8 @@ import styles from './dashboard.module.scss';
 export interface DashboardExtensionProps {
   path: string;
   title: string;
-  basePath: string;
-  icon: IconId;
+  basePath?: string;
+  icon?: IconId;
 }
 
 export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExtensionProps) => {
@@ -49,3 +49,13 @@ export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExt
     </div>
   );
 };
+
+export function createDashboard(props: Omit<DashboardExtensionProps, 'basePath'>) {
+  return function ({ basePath }: { basePath: string }) {
+    return (
+      <BrowserRouter>
+        <DashboardExtension basePath={basePath} {...props} />
+      </BrowserRouter>
+    );
+  };
+}

package/src/empty-card/empty-card.component.tsx

@@ -15,7 +15,7 @@ export interface EmptyCardProps {
   launchForm?(): void;
 }
 
-const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+export const EmptyCardIllustration = ({ width = '64', height = '64' }) => {
   return (
     <svg width={width} height={height} viewBox="0 0 64 64">
       <use href={`#omrs-empty-data-illustration`} />
@@ -34,7 +34,7 @@ export const EmptyCard: React.FC<EmptyCardProps> = (props) => {
     <Layer className={styles.layer}>
       <Tile className={styles.tile}>
         <CardHeader title={props.headerTitle} />
-        <EmptyDataIllustration />
+        <EmptyCardIllustration />
         <p className={styles.content}>
           {getCoreTranslation('emptyStateText', 'There are no {{displayText}} to display', {
             displayText: props.displayText,

package/src/empty-card/index.ts

@@ -1 +1 @@
-export { EmptyCard, type EmptyCardProps } from './empty-card.component';
+export { EmptyCard, EmptyCardIllustration, type EmptyCardProps } from './empty-card.component';

package/src/error-state/error-state.component.tsx

@@ -1,23 +1,21 @@
 import React from 'react';
 import { Layer, Tile } from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { useLayoutType } from '@openmrs/esm-react-utils';
 import styles from './error-state.module.scss';
+import { CardHeader } from '../cards';
 
 export interface ErrorStateProps {
+  /** The error that caused this error card to be rendered. Expected to be a failed fetch result. */
   error: any;
+  /** The title to use for this empty component. This must be a pre-translated string. */
   headerTitle: string;
 }
 
 export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
-  const isTablet = useLayoutType() === 'tablet';
-
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-          <h4>{headerTitle}</h4>
-        </div>
+        <CardHeader title={headerTitle} />
         <p className={styles.errorMessage}>
           {getCoreTranslation('error', 'Error')} {`${error?.response?.status}: `}
           {error?.response?.statusText}
@@ -27,3 +25,6 @@ export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) =>
     </Layer>
   );
 };
+
+export const ErrorCard = ErrorState;
+export type ErrorCardProps = ErrorStateProps;

package/src/error-state/error-state.module.scss

@@ -15,35 +15,6 @@
   color: $text-02;
 }
 
-.desktopHeading {
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-  }
-}
-
-.tabletHeading {
-  h4 {
-    @include type.type-style('heading-03');
-    color: $text-02;
-  }
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-  margin-bottom: layout.$spacing-05;
-
-  h4:after {
-    content: '';
-    display: block;
-    width: layout.$spacing-07;
-    padding-top: 0.188rem;
-    border-bottom: 0.375rem solid var(--brand-03);
-  }
-}
-
 .tile {
   text-align: center;
   border: 1px solid $ui-03;

package/src/error-state/error-state.test.tsx

@@ -31,7 +31,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeading');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('tabletHeader');
   });
 
   it('should render desktop layout when layout type is not tablet', () => {
@@ -39,7 +39,7 @@ describe('ErrorState', () => {
 
     render(<ErrorState headerTitle="test" error={{}} />);
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeading');
+    expect(screen.getByRole('heading').parentElement?.getAttribute('class')).toContain('desktopHeader');
   });
 
   it('should handle error with partial response data', () => {

package/src/icons/icons.tsx

@@ -862,18 +862,18 @@ export const ShoppingCartAddItemIcon = ShoppingCartArrowDownIcon;
  * ```
  */
 export const MaybeIcon = memo(
-  forwardRef<SVGSVGElement, { icon: string; fallback?: React.ReactNode } & IconProps>(function MaybeIcon(
+  forwardRef<SVGSVGElement, { icon: string | undefined; fallback?: React.ReactNode } & IconProps>(function MaybeIcon(
     { icon, fallback, ...iconProps },
     ref,
   ) {
-    const iconRef = useRef(document.getElementById(icon));
+    const iconRef = useRef(icon ? document.getElementById(icon) : undefined);
 
     useEffect(() => {
       const container = document.getElementById('omrs-svgs-container');
       const callback: MutationCallback = (mutationList) => {
         for (const mutation of mutationList) {
           if (mutation.type === 'childList') {
-            iconRef.current = document.getElementById(icon);
+            iconRef.current = icon ? document.getElementById(icon) : undefined;
           }
         }
       };

package/src/internal.ts

@@ -6,7 +6,6 @@ export * from './dashboard-extension';
 export * from './datepicker';
 export * from './diagnosis-tags';
 export * from './empty-card';
-export * from './error-card';
 export * from './error-state';
 export * from './icons/icons';
 export * from './left-nav';

package/src/public.ts

@@ -6,7 +6,6 @@ export * from './datepicker';
 export * from './diagnosis-tags';
 export * from './empty-card';
 export * from './error-state';
-export * from './error-card';
 export * from './icons/icons';
 export * from './left-nav';
 export * from './location-picker';

package/dist/error-card/error-card.component.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface ErrorCardProps {
-    /** This is the error that triggered rendering the card. It is expected to be the error returned from `openmrsFetch()` */
-    error: any;
-    /** The title for this card. This must be a pre-translated string. */
-    headerTitle: string;
-}
-/**
- * Re-usable card for displaying a fetch error
- */
-export declare const ErrorCard: React.FC<ErrorCardProps>;

package/dist/error-card/index.d.ts

@@ -1 +0,0 @@
-export { ErrorCard, type ErrorCardProps } from './error-card.component';

package/src/error-card/error-card.component.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Layer, Tile } from '@carbon/react';
-import { getCoreTranslation } from '@openmrs/esm-translations';
-import { CardHeader } from '../cards';
-import styles from './error-card.module.scss';
-
-export interface ErrorCardProps {
-  /** This is the error that triggered rendering the card. It is expected to be the error returned from `openmrsFetch()` */
-  error: any;
-  /** The title for this card. This must be a pre-translated string. */
-  headerTitle: string;
-}
-
-/**
- * Re-usable card for displaying a fetch error
- */
-export const ErrorCard: React.FC<ErrorCardProps> = ({ error, headerTitle }) => {
-  return (
-    <Layer>
-      <Tile className={styles.tile}>
-        <CardHeader title={headerTitle} />
-        <p className={styles.errorMessage}>
-          {getCoreTranslation('error', 'Error')} {`${error?.response?.status}: `}
-          {error?.response?.statusText}
-        </p>
-        <p className={styles.errorCopy}>
-          {getCoreTranslation(
-            'errorCopy',
-            'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
-          )}
-        </p>
-      </Tile>
-    </Layer>
-  );
-};

package/src/error-card/error-card.module.scss

@@ -1,21 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.errorMessage {
-  @include type.type-style('heading-compact-02');
-
-  margin-top: 2.25rem;
-  margin-bottom: layout.$spacing-03;
-}
-
-.errorCopy {
-  margin-bottom: layout.$spacing-03;
-  @include type.type-style('body-01');
-  color: $text-02;
-}
-
-.tile {
-  text-align: center;
-  border: 1px solid $ui-03;
-}

package/src/error-card/error-card.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { describe, expect, it } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/react';
-import { ErrorCard } from './error-card.component';
-
-describe('ErrorCard', () => {
-  it('renders an error state widget card', () => {
-    const testError = {
-      response: {
-        status: 500,
-        statusText: 'Internal Server Error',
-      },
-    };
-    render(<ErrorCard headerTitle="appointments" error={testError} />);
-
-    expect(screen.getByRole('heading', { name: /appointments/i })).toBeInTheDocument();
-    expect(screen.getByText(/Error 500: Internal Server Error/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        /Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above./i,
-      ),
-    ).toBeInTheDocument();
-  });
-});

package/src/error-card/index.ts

@@ -1 +0,0 @@
-export { ErrorCard, type ErrorCardProps } from './error-card.component';