@ampath/esm-dha-workflow-app 4.0.0-next.4 → 4.0.0-next.40

package/src/boxes/extensions/box.scss

@@ -1,23 +0,0 @@
-/* Extensions should supply the minimum amount of styling
- * necessary. Here, the extensions set only their colors.
- * Their sizes and other general features of their display
- * is controlled by the slot. */
-@use "@carbon/layout";
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
- .blue {
-  background-color: darkblue;
-}
-
-.red {
-  background-color: darkred;
-}
-
-/* Brand colors are special. They must be included using a
- * SASS mix-in (shown here) or using a CSS variable like
- * `var(--brand-01)`. */
-.brand {
-  @include brand-01(background-color);
-  color: white;
-  padding: layout.$spacing-03;
-}

package/src/boxes/extensions/brand-box.component.tsx

@@ -1,15 +0,0 @@
-/**
- * This component demonstrates the creation of an extension.
- *
- * Check out the Extension System docs:
- * https://o3-docs.vercel.app/docs/extension-system
- */
-
-import React from 'react';
-import styles from './box.scss';
-
-const RedBox: React.FC = () => {
-  return <div className={styles.brand}></div>;
-};
-
-export default RedBox;

package/src/boxes/extensions/red-box.component.tsx

@@ -1,15 +0,0 @@
-/**
- * This component demonstrates the creation of an extension.
- *
- * Check out the Extension System docs:
- * https://o3-docs.vercel.app/docs/extension-system
- */
-
-import React from 'react';
-import styles from './box.scss';
-
-const RedBox: React.FC = () => {
-  return <div className={styles.red}></div>;
-};
-
-export default RedBox;

package/src/boxes/slot/boxes.component.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Extension, ExtensionSlot } from '@openmrs/esm-framework';
-import styles from './boxes.scss';
-
-export const Boxes: React.FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div className={styles.container}>
-      <h5>{t('extensionSystem', 'Extension system')}</h5>
-      <p>
-        {t(
-          'extensionExplainer',
-          'Here are some colored boxes. Because they are attached as extensions within a slot, an admin can change what boxes are shown using configuration. These boxes happen to be defined in this module, but they could attach to this slot even if they were in a different module.',
-        )}
-      </p>
-      <ExtensionSlot name="Boxes" className={styles.boxes}>
-        <div className={styles.box}>
-          <Extension />
-        </div>
-      </ExtensionSlot>
-    </div>
-  );
-};

package/src/boxes/slot/boxes.scss

@@ -1,29 +0,0 @@
-/* General features of extension styling are controlled
- * at the slot level. The boxes should know as little as
- * possible about the context where they are used, so
- * they do not set their own sizes.
- *
- * `> * > *` is used to target the outermost DOM node of
- * the extension.
- */
- @use '@carbon/layout';
-
-.box > * > * {
-  height: layout.$spacing-10;
-  width: layout.$spacing-10;
-}
-
-.boxes {
-  margin: layout.$spacing-07 0;
-  display: flex;
-  gap: layout.$spacing-05;
-}
-
-.container {
-  max-width: 50rem;
-  margin-top: layout.$spacing-09;
-
-  > * + * {
-    margin-top: layout.$spacing-06;
-  }
-}

package/src/greeter/greeter.component.tsx

@@ -1,42 +0,0 @@
-/**
- * This component demonstrates usage of the config object. Its structure
- * comes from `../config-schema.ts`. For more information about the
- * configuration system, read the docs: https://o3-docs.vercel.app/docs/configuration-system
- */
-import React from 'react';
-import { Tile } from '@carbon/react';
-import { Trans, useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
-import { type Config } from '../config-schema';
-import styles from './greeter.scss';
-
-const Greeter: React.FC = () => {
-  const { t } = useTranslation();
-  const config: Config = useConfig();
-
-  return (
-    <div className={styles.container}>
-      <h5>{t('configSystem', 'Configuration system')}</h5>
-      <p>
-        <Trans key="configSystemExplainer">
-          The greeting shown below is driven by the configuration system. To change the configuration properties, click
-          the spanner icon in the navbar to pull up the Implementer Tools panel. Then, type <em>template</em> into the{' '}
-          <em>Search configuration</em> input. This should filter the configuration properties to show only those that
-          are relevant to this module. You can change the values of these properties and click <em>Save</em> to see the
-          changes reflected in the UI
-        </Trans>
-        .
-      </p>
-      <div className={styles.greeting}>
-        <Tile className={styles.tile}>
-          {config.casualGreeting ? <Trans key="casualGreeting">hey</Trans> : <Trans key="formalGreeting">hello</Trans>}{' '}
-          {/* t('world')  */}
-          {config.whoToGreet.join(', ')}!
-        </Tile>
-      </div>
-      <br />
-    </div>
-  );
-};
-
-export default Greeter;

package/src/greeter/greeter.scss

@@ -1,20 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  max-width: 50rem;
-
-  > * + * {
-    margin-top: layout.$spacing-05;
-  }
-}
-
-.greeting {
-  text-transform: capitalize;
-}
-
-.tile {
-  border: 1px solid lightgray;
-  max-width: 15rem;
-  @include type.type-style('heading-compact-01');
-}

package/src/greeter/greeter.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
-import { Config } from '../config-schema';
-import Greeter from './greeter.component';
-
-const mockUseConfig = jest.mocked(useConfig<Config>);
-
-it('displays the expected default text', () => {
-  const config: Config = { casualGreeting: false, whoToGreet: ['World'] };
-  mockUseConfig.mockReturnValue(config);
-
-  render(<Greeter />);
-
-  expect(screen.getByText(/world/i)).toHaveTextContent('hello World!');
-});
-
-it('casually greets my friends', () => {
-  const config: Config = {
-    casualGreeting: true,
-    whoToGreet: ['Ariel', 'Barak', 'Callum'],
-  };
-  mockUseConfig.mockReturnValue(config);
-
-  render(<Greeter />);
-
-  expect(screen.getByText(/ariel/i)).toHaveTextContent('hey Ariel, Barak, Callum!');
-});

package/src/patient-getter/patient-getter.component.tsx

@@ -1,40 +0,0 @@
-/**
- * Components that make queries delegate the query-making logic to a
- * `.resource.ts` function. This component leverages the`usePatient`
- * hook to fetch a patient from the backend. When the button is clicked,
- * the `patientName` variable is set to "test", which triggers the hook
- * to make a request to the backend. The hook returns patient data from the
- * request, which is then rendered in the UI. The hook also returns a boolean
- * property called `isLoading` that is set to true while the request is being
- * made. This component renders a loading indicator while `isLoading` is true.
- */
-
-import React, { useState } from 'react';
-import { Button, InlineLoading, Tile } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
-import { usePatient } from './patient-getter.resource';
-import styles from './patient-getter.scss';
-
-function PatientGetter() {
-  const { t } = useTranslation();
-  const [patientName, setPatientName] = useState(null);
-  const { patient, isLoading } = usePatient(patientName);
-
-  return (
-    <div className={styles.container}>
-      <h5>{t('dataFetching', 'Data fetching')}</h5>
-      <p>{t('patientGetterExplainer', 'Try clicking the button below to fetch a patient from the backend')}:</p>
-      <Button onClick={() => setPatientName('test')}>{t('getPatient', 'Get a patient named')} 'test'</Button>
-      {isLoading ? <InlineLoading description={t('loading', 'Loading') + '...'} role="progressbar" /> : null}
-      {patient ? (
-        <Tile className={styles.tile}>
-          {patient
-            ? `${patient.name[0].given} ${patient.name[0].family} / ${patient.gender} / ${patient.birthDate}`
-            : null}
-        </Tile>
-      ) : null}
-    </div>
-  );
-}
-
-export default PatientGetter;

package/src/patient-getter/patient-getter.resource.ts

@@ -1,39 +0,0 @@
-import useSWR from 'swr';
-import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
-
-/**
- * This hook searches for a patient using the provided search term from the
- * OpenMRS FHIR API.It leverages the useSWR hook from the SWR library
- * https://swr.vercel.app/docs/data-fetching to fetch data. SWR provides a
- * number of benefits over the standard React useEffect hook, including:
- *
- * - Fast, lightweight and reusable data fetching
- * - Built-in cache and request deduplication
- * - Real-time updates
- * - Simplified error and loading state handling, and more.
- *
- *  We recommend using SWR for data fetching in your OpenMRS frontend modules.
- *
- * See the docs for the underlying fhir.js Client object: https://github.com/FHIR/fhir.js#api
- * See the OpenMRS FHIR Module docs: https://wiki.openmrs.org/display/projects/OpenMRS+FHIR+Module
- * See the OpenMRS REST API docs: https://rest.openmrs.org/#openmrs-rest-api
- *
- * @param query A patient name or ID
- * @returns The first matching patient
- */
-
-export function usePatient(query: string) {
-  const url = `${fhirBaseUrl}/Patient?name=${query}&_summary=data`;
-  const { data, error, isLoading } = useSWR<
-    {
-      data: { entry: Array<{ resource: fhir.Patient }> };
-    },
-    Error
-  >(query ? url : null, openmrsFetch);
-
-  return {
-    patient: data ? data?.data?.entry[0].resource : null,
-    error: error,
-    isLoading,
-  };
-}

package/src/patient-getter/patient-getter.scss

@@ -1,16 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  margin-top: layout.$spacing-09;
-
-  > * + * {
-    margin-top: layout.$spacing-06;
-  }
-}
-
-.tile {
-  border: 1px solid lightgray;
-  max-width: 20rem;
-  @include type.type-style('heading-compact-01');
-}

package/src/patient-getter/patient-getter.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import PatientGetter from './patient-getter.component';
-
-/**
- * This is an idiomatic mock of a backend resource. We generally mock resource fetching functions like `usePatient`, rather than mocking `fetch` or anything lower-level.
- */
-jest.mock('./patient-getter.resource.ts', () => ({
-  usePatient: jest.fn(() => ({
-    patient: {
-      birthDate: '1997-05-21',
-      gender: 'male',
-      name: [
-        {
-          family: 'Testguy',
-          given: 'Joeboy',
-          id: 'abc123',
-        },
-      ],
-    },
-  })),
-}));
-
-it('gets a patient when the button is clicked', async () => {
-  render(<PatientGetter />);
-
-  const user = userEvent.setup();
-  const heading = screen.getByRole('heading', { name: /data fetching/i });
-  const button = screen.getByRole('button', {
-    name: /get a patient named 'test'/i,
-  });
-
-  expect(heading).toBeInTheDocument();
-  expect(button).toBeInTheDocument();
-
-  await waitFor(() => user.click(button));
-
-  expect(screen.getByText(/Joeboy Testguy \/ male \/ 1997-05-21/)).toBeInTheDocument();
-});

package/src/resources/resources.component.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ClickableTile } from '@carbon/react';
-import { ChevronRight } from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import styles from './resources.scss';
-
-function Resources() {
-  const { t } = useTranslation();
-
-  return (
-    <div className={styles.resources}>
-      <h4 className={styles.heading}>{t('resources', 'Resources')}</h4>
-      <span className={styles.explainer}>{t('usefulLinks', 'Below are some links to useful resources')}:</span>
-      <div className={styles.cardsContainer}>
-        <Card
-          title={t('getStarted', 'Get started')}
-          subtitle={t('getStartedExplainer', 'Create a frontend module from this template') + '.'}
-          link="https://github.com/openmrs/openmrs-esm-home-app/generate"
-        />
-        <Card
-          title={t('frontendDocs', 'Frontend docs')}
-          subtitle={t('learnExplainer', 'Learn how to use the O3 framework') + '.'}
-          link="https://openmrs.atlassian.net/wiki/spaces/docs/pages/151093495/Introduction+to+O3+for+Developers"
-        />
-        <Card
-          title={t('designDocs', 'Design docs')}
-          subtitle={t('designDocsExplainer', 'Read the O3 design documentation') + '.'}
-          link="https://zeroheight.com/23a080e38/p/880723-introduction"
-        />
-        <Card
-          title={t('connect', 'Connect')}
-          subtitle={t('connectExplainer', 'Get in touch with the community') + '.'}
-          link="https://slack.openmrs.org/"
-        />
-      </div>
-    </div>
-  );
-}
-
-function Card({ title, subtitle, link }: { title: string; subtitle: string; link: string }) {
-  return (
-    <a href={link} target="_blank" rel="noopener noreferrer" className={styles.cardLink}>
-      <ClickableTile className={styles.card}>
-        <div className={styles.cardContent}>
-          <div className={styles.title}>
-            <h4>{title}</h4>
-            <ChevronRight />
-          </div>
-          <span className={styles.subtitle}>{subtitle}</span>
-        </div>
-      </ClickableTile>
-    </a>
-  );
-}
-
-export default Resources;

package/src/resources/resources.scss

@@ -1,68 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  padding: layout.$spacing-07;
-}
-
-.heading {
-  @include type.type-style('heading-04');
-  margin: layout.$spacing-05 0;
-}
-
-.explainer {
-  display: block;
-}
-
-.resources {
-  margin-top: layout.$spacing-10;
-  margin-bottom: layout.$spacing-09;
-
-  > * + * {
-    margin-right: layout.$spacing-05;
-  }
-}
-
-.cardsContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  column-gap: layout.$spacing-06;
-  margin-top: layout.$spacing-07;
-  max-width: 75%;
-}
-
-.card {
-  margin: layout.$spacing-03 0;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    border: 1px solid lightgray;
-  }
-
-  svg {
-    margin-left: layout.$spacing-02;
-  }
-}
-
-.cardLink {
-  text-decoration: none;
-  color: inherit;
-  display: block;
-}
-
-.cardContent {
-  display: flex;
-  flex-direction: column;
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  margin-bottom: layout.$spacing-05;
-
-  h4 {
-    @include type.type-style('heading-02');
-  }
-}
-