@koech/esm-core 8.0.0

package/packages/framework/esm-styleguide/src/_vars.scss

@@ -0,0 +1,77 @@
+@use '@carbon/layout';
+
+$ui-01: #f4f4f4;
+$ui-02: #ffffff;
+$ui-03: #e0e0e0;
+$ui-04: #8d8d8d;
+$ui-05: #161616;
+$text-02: #525252;
+$text-03: #a8a8a8;
+$ui-background: #ffffff;
+$color-gray-30: #c6c6c6;
+$color-gray-70: #525252;
+$color-gray-100: #161616;
+$color-blue-60-2: #0f62fe;
+$color-blue-10: #edf5ff;
+$color-yellow-50: #feecae;
+$carbon--red-50: #fa4d56;
+$inverse-link: #78a9ff;
+$support-02: #24a148;
+$inverse-support-03: #f1c21b;
+$warning-background: #fff8e1;
+$openmrs-background-grey: #f4f4f4;
+$danger: #da1e28;
+$interactive-01: #0f62fe;
+$field-01: #f4f4f4;
+$grey-2: #e0e0e0;
+$labeldropdown: #c6c6c6;
+
+$brand-primary-10: #d9fbfb;
+$brand-primary-20: #9ef0f0;
+$brand-primary-30: #3ddbd9;
+$brand-primary-40: #08bdba;
+$brand-primary-50: #009d9a;
+
+/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */
+
+$brand-primary-90: #022b30;
+$brand-primary-100: #081a1c;
+
+@mixin brand-01($property) {
+  #{$property}: #005d5d;
+  #{$property}: var(--brand-01);
+}
+
+@mixin brand-02($property) {
+  #{$property}: #004144;
+  #{$property}: var(--brand-02);
+}
+
+@mixin brand-03($property) {
+  #{$property}: #007d79;
+  #{$property}: var(--brand-03);
+}
+
+:root {
+  --brand-01: #005d5d;
+  --brand-02: #004144;
+  --brand-03: #007d79;
+  --bottom-nav-height: #{layout.$spacing-10};
+  --workspace-header-height: #{layout.$spacing-09};
+  --tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));
+  --desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height));
+}
+
+$breakpoint-phone-min: 0px;
+$breakpoint-phone-max: 600px;
+$breakpoint-tablet-min: 601px;
+$breakpoint-tablet-max: 1023px;
+$breakpoint-small-desktop-min: 1024px;
+$breakpoint-small-desktop-max: 1439px;
+$breakpoint-large-desktop-min: 1440px;
+$breakpoint-large-desktop-max: 99999999px;
+
+/* These color variables will be removed in a future release */
+$brand-teal-01: #007d79;
+$brand-01: #005d5d;
+$brand-02: #004144;

package/packages/framework/esm-styleguide/src/brand.ts

@@ -0,0 +1,15 @@
+import { getConfigStore } from '@openmrs/esm-config';
+
+export function setupBranding() {
+  getConfigStore('@openmrs/esm-styleguide').subscribe((store) => {
+    if (store.loaded && store.config) {
+      setGlobalCSSVariable('--brand-01', store.config['Brand color #1']);
+      setGlobalCSSVariable('--brand-02', store.config['Brand color #2']);
+      setGlobalCSSVariable('--brand-03', store.config['Brand color #3']);
+    }
+  });
+
+  function setGlobalCSSVariable(name: string, value: string) {
+    document.documentElement.style.setProperty(name, value);
+  }
+}

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

@@ -0,0 +1,25 @@
+export const Breakpoint = {
+  PHONE_MIN: 0,
+  PHONE_MAX: 600,
+  TABLET_MIN: 601,
+  TABLET_MAX: 1023,
+  SMALL_DESKTOP_MIN: 1024,
+  SMALL_DESKTOP_MAX: 1439,
+  LARGE_DESKTOP_MIN: 1440,
+  LARGE_DESKTOP_MAX: Number.MAX_SAFE_INTEGER,
+} as const;
+
+function setBodyCssClasses() {
+  document.body.classList.toggle('omrs-breakpoint-lt-tablet', window.innerWidth < Breakpoint.TABLET_MIN);
+  document.body.classList.toggle('omrs-breakpoint-gt-phone', window.innerWidth > Breakpoint.PHONE_MAX);
+  document.body.classList.toggle('omrs-breakpoint-gt-tablet', window.innerWidth > Breakpoint.TABLET_MAX);
+  document.body.classList.toggle('omrs-breakpoint-lt-desktop', window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN);
+  document.body.classList.toggle('omrs-breakpoint-lt-small-desktop', window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN);
+  document.body.classList.toggle('omrs-breakpoint-lt-large-desktop', window.innerWidth < Breakpoint.LARGE_DESKTOP_MIN);
+  document.body.classList.toggle('omrs-breakpoint-gt-small-desktop', window.innerWidth > Breakpoint.SMALL_DESKTOP_MAX);
+}
+
+export function integrateBreakpoints() {
+  window.addEventListener('resize', setBodyCssClasses);
+  setBodyCssClasses();
+}

package/packages/framework/esm-styleguide/src/cards/card-header.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-react-utils';
+import styles from './card-header.module.scss';
+
+export interface CardHeaderProps {
+  /** The title for this card. This must be a pre-translated string. */
+  title: string;
+  /** The contents of the card header to render if any. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Re-usable header component for O3-style cards, like those found on the patient chart
+ */
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div
+      className={classNames({
+        [styles.tabletHeader]: isTablet,
+        [styles.desktopHeader]: !isTablet,
+      })}
+    >
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}

package/packages/framework/esm-styleguide/src/cards/card-header.module.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '../vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

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

@@ -0,0 +1 @@
+export { CardHeader, type CardHeaderProps } from './card-header.component';

package/packages/framework/esm-styleguide/src/components/_breadcrumbs.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '../vars' as vars;
+
+nav.breadcrumbs-container {
+  padding: layout.$spacing-05;
+  background-color: vars.$ui-01;
+
+  ol li {
+    display: inline-flex;
+  }
+}

package/packages/framework/esm-styleguide/src/components/_canvas.scss

@@ -0,0 +1,8 @@
+@use '../vars' as *;
+
+html,
+body {
+  background-color: $ui-01;
+  margin: 0;
+  padding: 0;
+}

package/packages/framework/esm-styleguide/src/components/_colors.scss

@@ -0,0 +1,31 @@
+:root {
+  --omrs-color-bg-high-contrast: #ffffff;
+  --omrs-color-bg-medium-contrast: rgba(249, 249, 249, 0.94);
+  --omrs-color-bg-low-contrast: #eff1f2;
+  --omrs-color-bg-lowest-contrast: #e5e5e6;
+
+  --omrs-color-ink-high-contrast: #121212;
+  --omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
+  --omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
+  --omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
+  --omrs-color-ink-white: #ffffff;
+
+  --omrs-color-interaction-plus-two: #122c7b;
+  --omrs-color-interaction-plus-one: #193faf;
+  --omrs-color-interaction: #1e4bd1;
+  --omrs-color-interaction-minus-one: #456de4;
+  --omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
+
+  --omrs-color-success: #006800;
+  --omrs-color-success-two: #e6f0e6;
+  --omrs-color-warning: #6d5d01;
+  --omrs-color-warning-two: #efede4;
+  --omrs-color-danger: #b50706;
+  --omrs-color-danger-two: #f8eaea;
+
+  --omrs-color-brand-orange: #f26522;
+  --omrs-color-brand-violet: #5b57a6;
+  --omrs-color-brand-gold: #eea616;
+  --omrs-color-brand-teal: #009384;
+  --omrs-color-brand-black: #231f20;
+}

package/packages/framework/esm-styleguide/src/components/_general.scss

@@ -0,0 +1,64 @@
+@use '@carbon/layout';
+@use '../vars' as *;
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+.omrs-app-error {
+  padding: layout.$spacing-11;
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-top: 5px solid $danger;
+
+  p {
+    margin: layout.$spacing-06 0;
+  }
+
+  .cds--snippet {
+    margin-top: layout.$spacing-06;
+  }
+}
+
+#omrs-apps-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: calc(100vh - var(--omrs-navbar-height));
+  height: fit-content;
+  grid-area: appRoots;
+  overflow-x: auto;
+  min-width: 0;
+}
+
+#omrs-left-nav-container {
+  grid-area: leftNav;
+}
+
+#omrs-workspaces-container {
+  grid-area: workspace;
+  position: sticky;
+  height: calc(100vh - var(--omrs-navbar-height));
+  top: var(--omrs-navbar-height);
+  z-index: 1000;
+  will-change: contents;
+}
+
+#omrs-top-nav-app-container {
+  grid-area: topNav;
+  height: var(--omrs-navbar-height);
+}
+
+body {
+  display: grid;
+  grid-template-areas:
+    'topNav topNav topNav'
+    'leftNav appRoots workspace';
+  grid-template-columns: min-content 1fr min-content;
+}

package/packages/framework/esm-styleguide/src/components/_main-content.scss

@@ -0,0 +1,24 @@
+@use '@carbon/layout';
+
+:root {
+  --omrs-sidenav-width: 16rem;
+  --omrs-offline-banner-height: 0;
+  --omrs-navbar-height: #{layout.$spacing-09};
+  --omrs-topnav-height: var(--omrs-navbar-height);
+}
+
+.omrs-main-content {
+  margin-left: 0;
+  transition: margin-left 0.5s ease;
+}
+
+.omrs-offline {
+  --omrs-offline-banner-height: #{layout.$spacing-06};
+  --omrs-topnav-height: 4.5rem;
+
+  .cds--side-nav,
+  .cds--header-panel--expanded,
+  .cds--side-nav__overlay {
+    top: var(--omrs-topnav-height);
+  }
+}

package/packages/framework/esm-styleguide/src/config-schema.ts

@@ -0,0 +1,118 @@
+import { type ConfigSchema, Type, validators } from '@openmrs/esm-config';
+import { type CarbonTagColor, carbonTagColors } from './utils';
+export interface StyleguideConfigObject {
+  'Brand color #1': string;
+  'Brand color #2': string;
+  'Brand color #3': string;
+  excludePatientIdentifierCodeTypes: {
+    uuids: Array<string>;
+  };
+  implementationName: string;
+  patientPhotoConceptUuid: string;
+  preferredCalendar: {
+    [key: string]: string;
+  };
+  preferredDateLocale: {
+    [key: string]: string;
+  };
+  diagnosisTags: {
+    primaryColor: CarbonTagColor;
+    secondaryColor: CarbonTagColor;
+  };
+}
+
+const diagnosisTagConfigSchema: ConfigSchema = {
+  primaryColor: {
+    _type: Type.String,
+    _description: 'The color for displaying primary diagnoses tags',
+    _default: 'red',
+    _validators: [validators.oneOf(carbonTagColors)],
+  },
+  secondaryColor: {
+    _type: Type.String,
+    _description: 'The color for displaying secondary diagnoses tags',
+    _default: 'blue',
+    _validators: [validators.oneOf(carbonTagColors)],
+  },
+};
+
+export const esmStyleGuideSchema: ConfigSchema = {
+  'Brand color #1': {
+    _default: '#005d5d',
+    _type: Type.String,
+  },
+  'Brand color #2': {
+    _default: '#004144',
+    _type: Type.String,
+  },
+  'Brand color #3': {
+    _default: '#007d79',
+    _type: Type.String,
+  },
+  excludePatientIdentifierCodeTypes: {
+    uuids: {
+      _type: Type.Array,
+      _description: 'List of UUIDs of patient identifier types to exclude from rendering in the patient banner',
+      _default: [],
+      _elements: {
+        _type: Type.UUID,
+      },
+    },
+  },
+  implementationName: {
+    _type: Type.String,
+    _description: 'A name of the place (or authority) where all possible locations a user can choose are located.',
+    _default: 'Clinic',
+  },
+  patientPhotoConceptUuid: {
+    _type: Type.ConceptUuid,
+    _default: '736e8771-e501-4615-bfa7-570c03f4bef5',
+    _description:
+      "Used to look up the patient photo, which is stored as an attachment obs. Set to `null` in order to disable the feature and use only generated avatars. To remove the avatars entirely, use extension configuration's `remove` feature.",
+  },
+  preferredCalendar: {
+    _type: Type.Object,
+    _description:
+      "Keys should be locale codes, and values should be the preferred calendar for that locale. For example, {'am': 'ethiopic'}.",
+    _default: {
+      am: 'ethiopic',
+    },
+    _elements: {
+      _validators: [
+        validators.oneOf([
+          'buddhist',
+          'chinese',
+          'coptic',
+          'dangi',
+          'ethioaa',
+          'ethiopic',
+          'gregory',
+          'hebrew',
+          'indian',
+          'islamic',
+          'islamic-umalqura',
+          'islamic-tbla',
+          'islamic-civil',
+          'islamic-rgsa',
+          'iso8601',
+          'japanese',
+          'persian',
+          'roc',
+          'islamicc',
+        ]),
+      ],
+    },
+  },
+  preferredDateLocale: {
+    _type: Type.Object,
+    _description:
+      "Allows setting the locale used for date formatting for any browser locale. Does not affect time formatting. Keys should be locale codes, and values should be the preferred locale for formatting dates. For example, {'en': 'en-US', 'fr-CA': 'en-CA'}.",
+    _default: {
+      en: 'en-GB',
+    },
+    _elements: {
+      _type: Type.String,
+    },
+  },
+  diagnosisTags: diagnosisTagConfigSchema,
+};

package/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.component.tsx

@@ -0,0 +1,55 @@
+/** @module @category UI */
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { useLayoutType, useOnClickOutside } from '@openmrs/esm-react-utils';
+import styles from './custom-overflow-menu.module.scss';
+
+interface CustomOverflowMenuProps {
+  menuTitle: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function CustomOverflowMenu({ menuTitle, children }: CustomOverflowMenuProps) {
+  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
+  const ref = useOnClickOutside<HTMLDivElement>(() => setMenuIsOpen(false), menuIsOpen);
+  const isTablet = useLayoutType() === 'tablet';
+  const toggleShowMenu = useCallback(() => setMenuIsOpen((state) => !state), []);
+
+  return (
+    <div data-overflow-menu className={classNames('cds--overflow-menu', styles.container)} ref={ref}>
+      <button
+        className={classNames(
+          'cds--btn',
+          'cds--btn--ghost',
+          'cds--overflow-menu__trigger',
+          { 'cds--overflow-menu--open': menuIsOpen },
+          styles.overflowMenuButton,
+        )}
+        aria-haspopup="true"
+        aria-expanded={menuIsOpen}
+        id="custom-actions-overflow-menu-trigger"
+        aria-controls="custom-actions-overflow-menu"
+        onClick={toggleShowMenu}
+      >
+        {menuTitle}
+      </button>
+      <div
+        className={classNames('cds--overflow-menu-options', 'cds--overflow-menu--flip', styles.menu, {
+          [styles.show]: menuIsOpen,
+        })}
+        tabIndex={0}
+        data-floating-menu-direction="bottom"
+        role="menu"
+        aria-labelledby="custom-actions-overflow-menu-trigger"
+        id="custom-actions-overflow-menu"
+      >
+        <ul
+          className={classNames('cds--overflow-menu-options__content', { 'cds--overflow-menu-options--lg': isTablet })}
+        >
+          {children}
+        </ul>
+        <span />
+      </div>
+    </div>
+  );
+}

package/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.module.scss

@@ -0,0 +1,38 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '../vars' as *;
+
+.container {
+  width: auto;
+  height: auto;
+
+  :global(.cds--overflow-menu__trigger) {
+    min-height: layout.$spacing-09;
+  }
+}
+
+.menu {
+  display: none;
+  top: 3.125rem;
+  min-width: initial;
+  left: auto;
+  right: 0;
+  background-color: $ui-01;
+  margin-right: 0.2rem;
+  box-shadow: 0 6px 6px rgb(0 0 0 / 30%);
+}
+
+.show {
+  display: block;
+}
+
+.overflowMenuButton {
+  width: auto;
+  height: auto;
+  padding: 0.875rem layout.$spacing-05;
+  color: colors.$blue-60;
+
+  &:hover {
+    background-color: colors.$gray-10-hover;
+  }
+}

package/packages/framework/esm-styleguide/src/custom-overflow-menu/custom-overflow-menu.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useLayoutType } from '@openmrs/esm-react-utils';
+import { CustomOverflowMenu } from './custom-overflow-menu.component';
+
+const mockUseLayoutType = vi.mocked(useLayoutType);
+
+describe('CustomOverflowMenu', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('small-desktop');
+  });
+
+  it('should render', () => {
+    render(<CustomOverflowMenu menuTitle="Test Menu" children={<li>Option 1</li>} />);
+    expect(screen.getByRole('button', { name: /test menu/i })).toBeInTheDocument();
+  });
+
+  it('should toggle menu on trigger button click', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <li>Option 1</li>
+        <li>Option 2</li>
+      </CustomOverflowMenu>,
+    );
+
+    const triggerButton = screen.getByRole('button', { name: /menu/i });
+
+    await user.click(triggerButton);
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(triggerButton);
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should render children within the menu', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <li role="menuitem">Option 1</li>
+        <li role="menuitem">Option 2</li>
+      </CustomOverflowMenu>,
+    );
+
+    await user.click(screen.getByRole('button'));
+
+    const menuItems = screen.getAllByRole('menuitem');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveTextContent('Option 1');
+    expect(menuItems[1]).toHaveTextContent('Option 2');
+  });
+
+  it('should apply tablet-specific styling when on tablet layout', () => {
+    mockUseLayoutType.mockReturnValue('tablet');
+
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <li>Option 1</li>
+      </CustomOverflowMenu>,
+    );
+
+    expect(screen.getByRole('list')).toHaveClass('cds--overflow-menu-options--lg');
+  });
+
+  it('should have correct ARIA attributes', () => {
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <li>Option 1</li>
+      </CustomOverflowMenu>,
+    );
+
+    const trigger = screen.getByRole('button');
+    const menu = screen.getByRole('menu');
+
+    expect(trigger).toHaveAttribute('aria-haspopup', 'true');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveAttribute('aria-controls', 'custom-actions-overflow-menu');
+    expect(menu).toHaveAttribute('aria-labelledby', 'custom-actions-overflow-menu-trigger');
+  });
+
+  it('should have correct menu positioning attributes', () => {
+    render(
+      <CustomOverflowMenu menuTitle="Menu">
+        <li>Option 1</li>
+      </CustomOverflowMenu>,
+    );
+
+    const menu = screen.getByRole('menu');
+    expect(menu).toHaveAttribute('data-floating-menu-direction', 'bottom');
+  });
+});

package/packages/framework/esm-styleguide/src/custom-overflow-menu/index.ts

@@ -0,0 +1 @@
+export * from './custom-overflow-menu.component';

package/packages/framework/esm-styleguide/src/dashboard-extension/dashboard.module.scss

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-06;
+  fill: colors.$gray-70;
+}