@openmrs/esm-fast-data-entry-app 1.0.0-pre.9

package/src/boxes/extensions/box.scss

@@ -0,0 +1,23 @@
+/* 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. */
+ 
+ @import "~@openmrs/esm-styleguide/src/vars";
+
+ .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: 8px;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * This component demonstrates the creation of an extension.
+ *
+ * Check out the Extension System docs:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/extensions
+ */
+
+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.tsx

@@ -0,0 +1,15 @@
+/**
+ * This component demonstrates the creation of an extension.
+ *
+ * Check out the Extension System docs:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/extensions
+ */
+
+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.css

@@ -0,0 +1,23 @@
+/* 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.
+ */
+
+.box > * > * {
+  height: 4em;
+  width: 4em;
+}
+
+.boxes {
+  margin: 2em 0 0 1em;
+  display: flex;
+  gap: 1em;
+}
+
+.container {
+  max-width: 40em;
+}

package/src/boxes/slot/boxes.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./boxes.css";
+import { Extension, ExtensionSlot } from "@openmrs/esm-framework";
+
+export const Boxes: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      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.
+      <ExtensionSlot extensionSlotName="Boxes" className={styles.boxes}>
+        <div className={styles.box}>
+          <Extension />
+        </div>
+      </ExtensionSlot>
+    </div>
+  );
+};

package/src/config-schema.ts

@@ -0,0 +1,46 @@
+import { Type, validator } from "@openmrs/esm-framework";
+
+/**
+ * This is the config schema. It expects a configuration object which
+ * looks like this:
+ *
+ * ```json
+ * { "casualGreeting": true, "whoToGreet": ["Mom"] }
+ * ```
+ *
+ * In OpenMRS Microfrontends, all config parameters are optional. Thus,
+ * all elements must have a reasonable default. A good default is one
+ * that works well with the reference application.
+ *
+ * To understand the schema below, please read the configuration system
+ * documentation:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ * Note especially the section "How do I make my module configurable?"
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
+ * and the Schema Reference
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
+ */
+export const configSchema = {
+  casualGreeting: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: "Whether to use a casual greeting (or a formal one).",
+  },
+  whoToGreet: {
+    _type: Type.Array,
+    _default: ["World"],
+    _description:
+      "Who should be greeted. Names will be separated by a comma and space.",
+    _elements: {
+      _type: Type.String,
+    },
+    _validators: [
+      validator((v) => v.length > 0, "At least one person must be greeted."),
+    ],
+  },
+};
+
+export type Config = {
+  casualGreeting: boolean;
+  whoToGreet: Array<String>;
+};

package/src/constant.ts

@@ -0,0 +1,7 @@
+export const routes = {
+  allForms: "all-forms",
+};
+
+export const spaBase = window.spaBase;
+export const appBase = `/forms`;
+export const appPath = `${spaBase}${appBase}`;

package/src/declarations.d.tsx

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.scss";

package/src/forms/FormsRoot.tsx

@@ -0,0 +1,32 @@
+import { Tab, Tabs } from "carbon-components-react";
+import React from "react";
+import FormsTable from "./FormsTable";
+
+const FormsRoot = ({ match }) => {
+  const { tab } = match?.params;
+  return (
+    <div style={{ padding: "2rem" }}>
+      <h3 style={{ marginBottom: "1.5rem" }}>Forms</h3>
+      <Tabs type="container">
+        <Tab label="All Forms">
+          <FormsTable />
+        </Tab>
+        <Tab label="ICRC Forms">
+          <FormsTable />
+        </Tab>
+        <Tab label="Distress Scales">
+          <FormsTable />
+        </Tab>
+        <Tab label="Functioning Scales">
+          <FormsTable />
+        </Tab>
+        <Tab label="Coping Scales">
+          <FormsTable />
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+export default FormsRoot;
+export { FormsRoot };

package/src/forms/FormsTable.tsx

@@ -0,0 +1,64 @@
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from "carbon-components-react";
+import React from "react";
+import { tableData } from "./mockData";
+
+const FormsTable = () => {
+  const { rows, headers } = tableData;
+  return (
+    <DataTable rows={rows} headers={headers} isSortable>
+      {({
+        rows,
+        headers,
+        getTableProps,
+        getHeaderProps,
+        getRowProps,
+        onInputChange,
+      }) => {
+        return (
+          <TableContainer>
+            <TableToolbar style={{ position: "relative" }}>
+              <TableToolbarContent>
+                <TableToolbarSearch onChange={onInputChange} />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        );
+      }}
+    </DataTable>
+  );
+};
+
+export default FormsTable;
+export { FormsTable };

package/src/forms/mockData.ts

@@ -0,0 +1,43 @@
+const rows = [
+  {
+    id: "admission-form",
+    name: "Admission form",
+    region: "All regions",
+    actions: "Fill Form",
+  },
+  {
+    id: "dass-form",
+    name: "DASS 21",
+    region: "All regions",
+    actions: "Fill form",
+  },
+  {
+    id: "follow-up-form",
+    name: "Follow-up form",
+    region: "All regions",
+    actions: "Fill form",
+  },
+  {
+    id: "closure-form",
+    name: "Closure form",
+    region: "All regions",
+    actions: "Fill form",
+  },
+];
+
+const headers = [
+  {
+    key: "name",
+    header: "Form name",
+  },
+  {
+    key: "region",
+    header: "Region",
+  },
+  {
+    key: "actions",
+    header: "Actions",
+  },
+];
+
+export const tableData = { ...{ rows, headers } };

package/src/forms-app-menu-link.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ConfigurableLink } from "@openmrs/esm-framework";
+
+export default function OfflineToolsAppMenuLink() {
+  const { t } = useTranslation();
+  return (
+    <ConfigurableLink to="${openmrsSpaBase}/forms">
+      {t("formsAppMenuLink", "Forms")}
+    </ConfigurableLink>
+  );
+}

package/src/greeter/greeter.css

@@ -0,0 +1,4 @@
+.greeting {
+  text-transform: capitalize;
+  margin-bottom: 2em;
+}

package/src/greeter/greeter.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render, cleanup, screen, getByText } from "@testing-library/react";
+import { useConfig } from "@openmrs/esm-framework";
+import { Greeter } from "./greeter";
+import { Config } from "../config-schema";
+
+const mockUseConfig = useConfig as jest.Mock;
+
+describe(`<Greeter />`, () => {
+  afterEach(cleanup);
+  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(`will casually greet 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/greeter/greeter.tsx

@@ -0,0 +1,25 @@
+/**
+ * This component demonstrates usage of the config object. Its structure
+ * comes from `../config-schema.ts`. For more information about the
+ * configuration system, please see that file.
+ */
+import { useConfig } from "@openmrs/esm-framework";
+import React from "react";
+import { Trans } from "react-i18next";
+import { Config } from "../config-schema";
+import styles from "./greeter.css";
+
+export const Greeter: React.FC = () => {
+  const config = useConfig() as Config;
+
+  return (
+    <div className={styles.greeting}>
+      {config.casualGreeting ? (
+        <Trans key="casualGreeting">hey</Trans>
+      ) : (
+        <Trans key="formalGreeting">hello</Trans>
+      )}{" "}
+      {config.whoToGreet.join(", ")}!
+    </div>
+  );
+};

package/src/hello.css

@@ -0,0 +1,3 @@
+.container {
+  padding: 2em;
+}

package/src/hello.test.tsx

@@ -0,0 +1,45 @@
+/**
+ * This is the root test for this page. It simply checks that the page
+ * renders. If the components of your page are highly interdependent,
+ * (e.g., if the `Hello` component had state that communicated
+ * information between `Greeter` and `PatientGetter`) then you might
+ * want to do most of your testing here. If those components are
+ * instead quite independent (as is the case in this example), then
+ * it would make more sense to test those components independently.
+ *
+ * The key thing to remember, always, is: write tests that behave like
+ * users. They should *look* for elements by their visual
+ * characteristics, *interact* with them, and (mostly) *assert* based
+ * on things that would be visually apparent to a user.
+ *
+ * To learn more about how we do testing, see the following resources:
+ *   https://kentcdodds.com/blog/how-to-know-what-to-test
+ *   https://kentcdodds.com/blog/testing-implementation-details
+ *   https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
+ *
+ * Kent C. Dodds is the inventor of `@testing-library`:
+ *   https://testing-library.com/docs/guiding-principles
+ */
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import Hello from "./hello";
+import { useConfig } from "@openmrs/esm-framework";
+import { Config } from "./config-schema";
+
+/**
+ * This is an idiomatic way of dealing with mocked files. Note that
+ * `useConfig` is already mocked; the Jest moduleNameMapper (see the
+ * Jest config) has mapped the `@openmrs/esm-framework` import to a
+ * mock file. This line just tells TypeScript that the object is, in
+ * fact, a mock, and so will have methods like `mockReturnValue`.
+ */
+const mockUseConfig = useConfig as jest.Mock;
+
+describe(`<Hello />`, () => {
+  afterEach(cleanup);
+  it(`renders without dying`, () => {
+    const config: Config = { casualGreeting: false, whoToGreet: ["World"] };
+    mockUseConfig.mockReturnValue(config);
+    render(<Hello />);
+  });
+});

package/src/hello.tsx

@@ -0,0 +1,30 @@
+/**
+ * From here, the application is pretty typical React, but with lots of
+ * support from `@openmrs/esm-framework`. Check out `Greeter` to see
+ * usage of the configuration system, and check out `PatientGetter` to
+ * see data fetching using the OpenMRS FHIR API.
+ *
+ * Check out the Config docs:
+ *   https://openmrs.github.io/openmrs-esm-core/#/main/config
+ */
+
+import React from "react";
+import styles from "./hello.css";
+import { Greeter } from "./greeter/greeter";
+import { PatientGetter } from "./patient-getter/patient-getter";
+import { Boxes } from "./boxes/slot/boxes";
+
+const Hello: React.FC = () => {
+  return (
+    <div className={`omrs-main-content ${styles.container}`}>
+      {/* Greeter: demonstrates the configuration system */}
+      <Greeter />
+      {/* PatientGetter: demonstrates data fetching */}
+      <PatientGetter />
+      {/* Boxes: demonstrates the extension system */}
+      <Boxes />
+    </div>
+  );
+};
+
+export default Hello;

package/src/index.ts

@@ -0,0 +1,75 @@
+/**
+ * This is the entrypoint file of the application. It communicates the
+ * important features of this microfrontend to the app shell. It
+ * connects the app shell to the React application(s) that make up this
+ * microfrontend.
+ */
+
+import { getAsyncLifecycle, defineConfigSchema } from "@openmrs/esm-framework";
+import { configSchema } from "./config-schema";
+
+/**
+ * This tells the app shell how to obtain translation files: that they
+ * are JSON files in the directory `../translations` (which you should
+ * see in the directory structure).
+ */
+const importTranslation = require.context(
+  "../translations",
+  false,
+  /.json$/,
+  "lazy"
+);
+
+/**
+ * This tells the app shell what versions of what OpenMRS backend modules
+ * are expected. Warnings will appear if suitable modules are not
+ * installed. The keys are the part of the module name after
+ * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
+ */
+const backendDependencies = {
+  fhir2: "^1.2.0",
+  "webservices.rest": "^2.2.0",
+};
+
+/**
+ * This function performs any setup that should happen at microfrontend
+ * load-time (such as defining the config schema) and then returns an
+ * object which describes how the React application(s) should be
+ * rendered.
+ *
+ * In this example, our return object contains a single page definition.
+ * It tells the app shell that the default export of `greeter.tsx`
+ * should be rendered when the route matches `hello`. The full route
+ * will be `openmrsSpaBase() + 'hello'`, which is usually
+ * `/openmrs/spa/hello`.
+ */
+function setupOpenMRS() {
+  const moduleName = "@openmrs/esm-fast-data-entry";
+
+  const options = {
+    featureName: "fast-data-entry",
+    moduleName,
+  };
+
+  defineConfigSchema(moduleName, configSchema);
+
+  return {
+    pages: [
+      {
+        load: getAsyncLifecycle(() => import("./Root"), options),
+        route: "forms",
+      },
+    ],
+    extensions: [
+      {
+        name: "forms-app-link",
+        slot: "app-menu-slot",
+        load: getAsyncLifecycle(() => import("./forms-app-menu-link"), options),
+        online: true,
+        offline: true,
+      },
+    ],
+  };
+}
+
+export { backendDependencies, importTranslation, setupOpenMRS };

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

@@ -0,0 +1,31 @@
+import { openmrsFetch, fhir } from "@openmrs/esm-framework";
+
+/**
+ * This is a somewhat silly resource function. It searches for a patient
+ * using the REST API, and then immediately gets the data using the FHIR
+ * API for the first patient found. OpenMRS API endpoints are generally
+ * hit using `openmrsFetch`. For FHIR endpoints we use the FHIR API
+ * object.
+ *
+ * See the `fhir` object API docs: https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-api/docs/API.md#fhir
+ * 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 async function getPatient(query) {
+  const searchResult = await openmrsFetch(
+    `/ws/rest/v1/patient?q=${query}&limit=1`,
+    {
+      method: "GET",
+    }
+  );
+  return (
+    await fhir.read<fhir.Patient>({
+      type: "Patient",
+      patient: searchResult.data.results[0].uuid,
+    })
+  ).data;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { PatientGetter } from "./patient-getter";
+
+/**
+ * This is an idiomatic mock of a backend resource. We generally mock
+ * resource fetching functions like `getPatient`, rather than mocking
+ * `fetch` or anything lower-level.
+ */
+jest.mock("./patient-getter.resource.ts", () => ({
+  getPatient: jest.fn(() =>
+    Promise.resolve({
+      name: [{ id: "abc123", given: "Joeboy", family: "Testguy" }],
+      gender: "male",
+      birthDate: "1997-05-21",
+    })
+  ),
+}));
+
+describe(`<PatientGetter />`, () => {
+  it("gets a patient when the button is clicked", async () => {
+    render(<PatientGetter />);
+    userEvent.click(screen.getByRole("button"));
+    const resultText = await screen.findByText(/joeboy/i);
+    expect(resultText).toHaveTextContent("Joeboy Testguy / male / 1997-05-21");
+  });
+});

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

@@ -0,0 +1,28 @@
+/**
+ * Components that make queries delegate the query-making logic to a
+ * `.resource.ts` function. This component simply calls `getPatient`
+ * and sets a state variable using the result.
+ */
+
+import React, { useState } from "react";
+import { Trans } from "react-i18next";
+import Button from "carbon-components-react/es/components/Button";
+import { Tile } from "carbon-components-react/es/components/Tile";
+import { getPatient } from "./patient-getter.resource";
+
+export function PatientGetter() {
+  const [patient, setPatient] = useState<fhir.Patient>();
+  const patientName = "test";
+  return (
+    <div>
+      <Button onClick={() => getPatient(patientName).then(setPatient)}>
+        <Trans key="getPatient">Get a patient named</Trans> 'test'
+      </Button>
+      <Tile>
+        {patient
+          ? `${patient.name[0].given} ${patient.name[0].family} / ${patient.gender} / ${patient.birthDate}`
+          : null}
+      </Tile>
+    </div>
+  );
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package/translations/en.json

@@ -0,0 +1,4 @@
+{
+  "casualGreeting": "hey",
+  "formalGreeting": "hello"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext"
+  }
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("openmrs/default-webpack-config");