Merge branch 'poc-microfrontends' of github.com:ItsMurumba/openhim-co…

…nsole into transaction-tests-minor-fixes

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
-    "moment": "^2.29.1"
+    "moment": "^2.29.1",
+    "react-router-dom": "^6.26.1"
   }
 }

packages/channels-app/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"],
+  "parser": "@babel/eslint-parser"
+}

packages/channels-app/.gitignore

@@ -0,0 +1,72 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

packages/channels-app/.prettierignore

@@ -0,0 +1,8 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+coverage
+pnpm-lock.yaml

packages/channels-app/babel.config.json

@@ -0,0 +1,33 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": "current node"
+          }
+        ]
+      ]
+    }
+  }
+}

packages/channels-app/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  rootDir: 'src',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(j|t)sx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '\\.(css)$': 'identity-obj-proxy',
+    'single-spa-react/parcel': 'single-spa-react/lib/cjs/parcel.cjs'
+  },
+  setupFilesAfterEnv: ['@testing-library/jest-dom']
+}

packages/channels-app/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@jembi/channels-app",
+  "scripts": {
+    "start": "webpack serve -- --port 8513",
+    "start:standalone": "webpack serve --env standalone",
+    "build": "concurrently npm:build:*",
+    "build:webpack": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env analyze",
+    "lint": "eslint src --ext js,ts,tsx",
+    "format": "prettier --write .",
+    "check-format": "prettier --check .",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage",
+    "build:types": "tsc"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.3",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.0.0",
+    "babel-jest": "^27.5.1",
+    "concurrently": "^6.2.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
+    "ts-config-single-spa": "^3.0.0",
+    "typescript": "^4.3.5",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-config-single-spa-react": "^4.0.0",
+    "webpack-config-single-spa-react-ts": "^4.0.0",
+    "webpack-config-single-spa-ts": "^4.0.0",
+    "webpack-dev-server": "^4.0.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
+    "@mui/x-data-grid": "^7.13.0",
+    "@tanstack/react-query": "^4.36.1",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/systemjs": "^6.1.1",
+    "@types/webpack-env": "^1.16.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.24.1",
+    "single-spa": "^5.9.3",
+    "single-spa-react": "^4.3.1"
+  },
+  "types": "dist/jembi-channels-app.d.ts"
+}

packages/channels-app/src/components/dialogs/alert.dialog.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Alert, {AlertColor} from '@mui/material/Alert'
+import Backdrop from '@mui/material/Backdrop'
+import AlertTitle from '@mui/material/AlertTitle'
+
+export type AlertDialogProps = {
+  title?: string
+  message: string
+  open: boolean
+  onClose: () => void
+  severity?: AlertColor
+}
+
+export function AlertDialog(props: AlertDialogProps) {
+  return (
+    <Backdrop
+      sx={{color: '#fff', zIndex: theme => theme.zIndex.drawer + 1}}
+      onClick={props.onClose}
+      open={props.open}
+    >
+      <div style={{minWidth: '500px'}}>
+        <Alert variant="standard" severity={props.severity ?? 'info'}>
+          {props.title && <AlertTitle>{props.title}</AlertTitle>}
+          {props.message}
+        </Alert>
+      </div>
+    </Backdrop>
+  )
+}

packages/channels-app/src/components/dialogs/basic.backdrop.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {Backdrop} from '@mui/material'
+
+export type BasicBackdropProps = {
+  open: boolean
+  onClose?: () => unknown
+  children: React.ReactNode
+}
+
+export function BasicBackdrop(props: BasicBackdropProps) {
+  return (
+    <Backdrop
+      sx={{color: '#fff', zIndex: theme => theme.zIndex.drawer + 1}}
+      open={props.open}
+      onClick={props.onClose ? props.onClose : undefined}
+    >
+      {props.children}
+    </Backdrop>
+  )
+}

packages/channels-app/src/components/dialogs/basic.dialog.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import {DialogTitle, Dialog, DialogContent, DialogProps} from '@mui/material'
+
+export type BasicDialogProps = {
+  title?: string
+  open: boolean
+  onClose: () => void
+  children: React.ReactNode
+  size?: DialogProps['maxWidth']
+  defaultContentWrapper?: boolean
+}
+
+export function BasicDialog(props: BasicDialogProps) {
+  return (
+    <Dialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth={props.size ?? 'lg'}
+    >
+      {props.title && <DialogTitle>{props.title}</DialogTitle>}
+      <DialogContent>{props.children}</DialogContent>
+    </Dialog>
+  )
+}

packages/channels-app/src/components/dialogs/confirmation.dialog.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContentText from '@mui/material/DialogContentText'
+import {DialogProps} from '@mui/material'
+
+export type ConfirmationDialogProps = {
+  open: boolean
+  title: string
+  message: string
+  onYes: () => unknown
+  onNo: () => unknown
+  size?: DialogProps['maxWidth']
+}
+
+export function ConfirmationDialog(props: ConfirmationDialogProps) {
+  return (
+    <Dialog
+      sx={{'& .MuiDialog-paper': {width: '80%', maxHeight: 435}}}
+      maxWidth={props.size ?? 'sm'}
+      open={props.open}
+    >
+      <DialogTitle>{props.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{props.message}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={props.onNo}>
+          Cancel
+        </Button>
+        <Button onClick={props.onYes}>Ok</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

packages/channels-app/src/components/helpers/custom.toolbar.tsx

@@ -0,0 +1,24 @@
+import {makeStyles} from '@mui/styles'
+import {
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarQuickFilter
+} from '@mui/x-data-grid'
+
+
+export function CustomToolbar() {
+
+  return (
+    <div style={{display: 'flex',
+      justifyContent: 'space-between',
+      padding: '20px 10px'}}>
+      <div>
+        <GridToolbarColumnsButton />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
+      </div>
+      <GridToolbarQuickFilter />
+    </div>
+  )
+}

packages/channels-app/src/components/helpers/error.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {Box, Button, Typography} from '@mui/material'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+
+export type ErrorMessageProps = {
+  onRetry?: () => unknown
+  title?: string
+  message?: string
+}
+
+export function ErrorMessage({onRetry, title, message}: ErrorMessageProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      height="300px"
+      padding={2}
+    >
+      <ErrorOutlineIcon color="error" sx={{fontSize: 60}} />
+      <Typography variant="h6" color="error" align="center" gutterBottom>
+        Oops! Something went wrong.
+      </Typography>
+      <Typography variant="body1" align="center" gutterBottom>
+        An error occurred while loading the data. Please try again.
+      </Typography>
+      <Button variant="contained" color="primary" onClick={onRetry}>
+        Retry
+      </Button>
+    </Box>
+  )
+}