U43X-360 Adding the text button

openmrs · Jan 23, 2024 · a331a0b · a331a0b
2 parents 2bca8a2 + b16045a
commit a331a0b
Show file tree

Hide file tree

Showing 30 changed files with 1,767 additions and 663 deletions.
diff --git a/package.json b/package.json
@@ -1,123 +1,123 @@
 {
-    "name": "@openmrs/esm-laboratory-app",
-    "version": "1.0.0",
-    "license": "MPL-2.0",
-    "description": "Laboratory microfrontend for OpenMRS 3.x",
-    "browser": "dist/openmrs-esm-laboratory-app.js",
-    "main": "src/index.ts",
-    "source": true,
-    "scripts": {
-        "start": "openmrs develop",
-        "serve": "webpack serve --mode=development",
-        "build": "webpack --mode production",
-        "analyze": "webpack --mode=production --env analyze=true",
-        "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
-        "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
-        "typescript": "tsc",
-        "test": "jest --config jest.config.js --passWithNoTests",
-        "verify": "turbo lint typescript test",
-        "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js",
-        "coverage": "yarn test -- --coverage",
-        "prepare": "husky install"
-    },
-    "husky": {
-        "hooks": {
-            "pre-commit": "pretty-quick --staged && yarn verify"
-        }
-    },
-    "browserslist": [
-        "extends browserslist-config-openmrs"
-    ],
-    "keywords": [
-        "openmrs",
-        "microfrontends",
-        "laboratory"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/openmrs/openmrs-esm-laboratory.git"
-    },
-    "homepage": "https://github.com/openmrs/openmrs-esm-laboratory#readme",
-    "publishConfig": {
-        "access": "public"
-    },
-    "bugs": {
-        "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
-    },
-    "dependencies": {
-        "@carbon/react": "^1.14.0",
-        "@hookform/resolvers": "^3.3.4",
-        "lodash-es": "^4.17.21",
-        "react-hook-form": "^7.49.3",
-        "react-to-print": "^2.14.15",
-        "zod": "^3.22.4"
-    },
-    "peerDependencies": {
-        "@openmrs/esm-framework": "*",
-        "dayjs": "1.x",
-        "react": "18.x",
-        "react-i18next": "11.x",
-        "react-router-dom": "6.x",
-        "rxjs": "6.x"
-    },
-    "devDependencies": {
-        "@ohri/openmrs-esm-ohri-commons-lib": "next",
-        "@openmrs/esm-extensions": "next",
-        "@openmrs/esm-framework": "next",
-        "@openmrs/esm-patient-common-lib": "next",
-        "@openmrs/esm-react-utils": "next",
-        "@openmrs/esm-styleguide": "next",
-        "@swc/cli": "^0.1.62",
-        "@swc/core": "^1.3.62",
-        "@swc/jest": "^0.2.26",
-        "@testing-library/dom": "^8.20.0",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^28.1.8",
-        "@types/react": "^18.2.8",
-        "@types/react-dom": "^18.2.4",
-        "@types/react-router": "^5.1.20",
-        "@types/react-router-dom": "^5.3.3",
-        "@types/webpack-env": "^1.18.1",
-        "@typescript-eslint/parser": "^5.59.9",
-        "carbon-components-react": "^8.34.0",
-        "concurrently": "^7.6.0",
-        "css-loader": "^6.8.1",
-        "dayjs": "^1.11.9",
-        "eslint": "^8.42.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-config-ts-react-important-stuff": "^3.0.0",
-        "eslint-plugin-prettier": "^4.2.1",
-        "file-saver": "^2.0.5",
-        "husky": "^8.0.0",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^28.1.3",
-        "jest-cli": "^28.1.3",
-        "jest-environment-jsdom": "^28.1.3",
-        "lerna": "^5.6.1",
-        "openmrs": "next",
-        "plotly.js": "^2.24.3",
-        "prettier": "^2.8.8",
-        "pretty-quick": "^3.1.3",
-        "raw-loader": "^4.0.2",
-        "react": "^18.2.0",
-        "react-csv": "^2.2.2",
-        "react-dom": "^18.2.0",
-        "react-i18next": "^11.18.6",
-        "react-pivottable": "^0.11.0",
-        "react-plotly.js": "^2.0.0",
-        "react-router-dom": "^6.11.2",
-        "react-table": "^7.8.0",
-        "rxjs": "^6.6.7",
-        "swc-loader": "^0.2.3",
-        "turbo": "^1.10.12",
-        "typescript": "^4.9.5",
-        "webpack": "^5.88.1",
-        "webpack-cli": "^5.1.3"
-    },
-    "resolutions": {
-        "@carbon/react": "1.14.0"
-    },
-    "packageManager": "[email protected]"
-}
+  "name": "@openmrs/esm-laboratory-app",
+  "version": "1.0.0",
+  "license": "MPL-2.0",
+  "description": "Laboratory microfrontend for OpenMRS 3.x",
+  "browser": "dist/openmrs-esm-laboratory-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop --backend http://194.163.171.253:8282",
+    "serve": "webpack serve --mode=development",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env analyze=true",
+    "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "typescript": "tsc",
+    "test": "jest --config jest.config.js --passWithNoTests",
+    "verify": "turbo lint typescript test",
+    "extract-translations": "i18next 'src/**/*.component.tsx' --config ./i18next-parser.config.js",
+    "coverage": "yarn test -- --coverage",
+    "prepare": "husky install"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && yarn verify"
+    }
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs",
+    "microfrontends",
+    "laboratory"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-laboratory.git"
+  },
+  "homepage": "https://github.com/openmrs/openmrs-esm-laboratory#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-laboratory/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.14.0",
+    "@hookform/resolvers": "^3.3.4",
+    "lodash-es": "^4.17.21",
+    "react-hook-form": "^7.49.3",
+    "react-to-print": "^2.14.15",
+    "zod": "^3.22.4"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "*",
+    "dayjs": "1.x",
+    "react": "18.x",
+    "react-i18next": "11.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x"
+  },
+  "devDependencies": {
+    "@ohri/openmrs-esm-ohri-commons-lib": "next",
+    "@openmrs/esm-extensions": "next",
+    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-patient-common-lib": "next",
+    "@openmrs/esm-react-utils": "next",
+    "@openmrs/esm-styleguide": "next",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.62",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.8",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack-env": "^1.18.1",
+    "@typescript-eslint/parser": "^5.59.9",
+    "carbon-components-react": "^8.34.0",
+    "concurrently": "^7.6.0",
+    "css-loader": "^6.8.1",
+    "dayjs": "^1.11.9",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "file-saver": "^2.0.5",
+    "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.3",
+    "jest-cli": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "lerna": "^5.6.1",
+    "openmrs": "next",
+    "plotly.js": "^2.24.3",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
+    "react-csv": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.18.6",
+    "react-pivottable": "^0.11.0",
+    "react-plotly.js": "^2.0.0",
+    "react-router-dom": "^6.11.2",
+    "react-table": "^7.8.0",
+    "rxjs": "^6.6.7",
+    "swc-loader": "^0.2.3",
+    "turbo": "^1.10.12",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.3"
+  },
+  "resolutions": {
+    "@carbon/react": "1.14.0"
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/src/components/cards/card-header.component.tsx b/src/components/cards/card-header.component.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import classNames from "classnames";
+import { useLayoutType } from "@openmrs/esm-framework";
+import styles from "./card-header.scss";
+
+interface CardHeaderProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === "tablet";
+
+  return (
+    <div
+      className={classNames(
+        isTablet ? styles.tabletHeader : styles.desktopHeader
+      )}
+    >
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/cards/card-header.scss b/src/components/cards/card-header.scss
@@ -0,0 +1,43 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.desktopHeader, .tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  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: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+  }
+}
diff --git a/src/components/cards/index.ts b/src/components/cards/index.ts
@@ -0,0 +1 @@
+export * from "./card-header.component";
diff --git a/src/index.ts b/src/index.ts
@@ -51,7 +51,7 @@ export const laboratoryOrderDashboardLink = getSyncLifecycle(
   options
 );
 export const laboratoryOrderComponent = getAsyncLifecycle(
-  () => import("./patient-chart/laboratory-order.component"),
+  () => import("./patient-chart/patient-laboratory-order-results.component"),
   options
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ export const laboratoryOrderDashboardLink = getSyncLifecycle( @@
       options
     );
     export const laboratoryOrderComponent = getAsyncLifecycle(
-      () => import("./patient-chart/laboratory-order.component"),
+      () => import("./patient-chart/patient-laboratory-order-results.component"),
       options
     );
@@ Expand Down @@