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

package/src/forms/FormsTable.tsx

@@ -1,64 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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/greeter/greeter.css

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

package/src/greeter/greeter.test.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/**
- * 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

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

package/src/hello.test.tsx

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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/patient-getter/patient-getter.resource.ts

@@ -1,31 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-/**
- * 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>
-  );
-}