Merge pull request #9 from hiqedme/feat/add-ampath-registration

(feat) Add custom patient registration with support for client registry

packages/esm-patient-registration-app/README.md

@@ -0,0 +1,7 @@
+# esm-patient-registration-app
+
+## Configuring the Registration App to collect custom observations
+
+[PR-221](https://github.com/openmrs/openmrs-esm-patient-management/pull/221) made it possible to configure the registration app to include obs, as demoed in the gif video below, using fieldDefinitions:
+
+![Peek 2022-07-13 15-14](https://user-images.githubusercontent.com/1031876/178846444-ac4da88a-073f-4ed2-bf00-a07cf3ab6d2f.gif)

packages/esm-patient-registration-app/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

packages/esm-patient-registration-app/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@ampath/esm-patient-registration-app",
+  "version": "6.0.0",
+  "description": "Patient registration microfrontend for the OpenMRS SPA",
+  "browser": "dist/ampath-esm-patient-registration-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/ampath/ampath-esm-3.x#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "coverage": "yarn test --coverage",
+    "typescript": "tsc",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts'"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ampath/ampath-esm-3.x.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ampath/ampath-esm-3.x/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "core-js-pure": "^3.34.0",
+    "formik": "^2.1.5",
+    "geopattern": "^1.2.3",
+    "lodash-es": "^4.17.15",
+    "react-avatar": "^5.0.3",
+    "uuid": "^8.3.2",
+    "yup": "^0.29.1"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  }
+}

packages/esm-patient-registration-app/src/add-patient-link.scss

@@ -0,0 +1,3 @@
+.slotStyles {
+  background-color: transparent;
+}

packages/esm-patient-registration-app/src/add-patient-link.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
+import { navigate } from '@openmrs/esm-framework';
+import Root from './add-patient-link';
+
+const mockedNavigate = navigate as jest.Mock;
+
+describe('Add patient link component', () => {
+  it('renders an "Add Patient" button and triggers navigation on click', async () => {
+    const user = userEvent.setup();
+
+    const { getByRole } = render(<Root />);
+    const addButton = getByRole('button', { name: /add patient/i });
+
+    await user.click(addButton);
+
+    expect(mockedNavigate).toHaveBeenCalledWith({ to: '${openmrsSpaBase}/patient-registration' });
+  });
+});

packages/esm-patient-registration-app/src/add-patient-link.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { HeaderGlobalAction } from '@carbon/react';
+import { UserFollow } from '@carbon/react/icons';
+import { navigate } from '@openmrs/esm-framework';
+import styles from './add-patient-link.scss';
+
+export default function Root() {
+  const addPatient = React.useCallback(() => navigate({ to: '${openmrsSpaBase}/patient-registration' }), []);
+
+  return (
+    <HeaderGlobalAction
+      aria-label="Add Patient"
+      aria-labelledby="Add Patient"
+      enterDelayMs={500}
+      name="AddPatientIcon"
+      onClick={addPatient}
+      className={styles.slotStyles}>
+      <UserFollow size={20} />
+    </HeaderGlobalAction>
+  );
+}