#81 (1) JsonForms skeleton

client/packages/common/package.json

@@ -14,6 +14,11 @@
     "@capacitor/core": "^3.5.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@jsonforms/core": "^3.0.0-beta.3",
+    "@jsonforms/material-renderers": "^3.0.0-beta.3",
+    "@jsonforms/react": "^3.0.0-beta.3",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.8.0",
     "@mui/lab": "^5.0.0-alpha.59",
     "@mui/material": "^5.2.3",
     "@openmsupply-client/config": "^0.0.0",

client/packages/common/src/ui/components/buttons/IconButton/IconButton.tsx

@@ -8,6 +8,7 @@ interface ButtonProps {
   label: string;
   width?: string;
   height?: string;
+  color?: 'primary' | 'secondary' | undefined;
   sx?: SxProps;
 }
 
@@ -18,6 +19,7 @@ export const IconButton: React.FC<ButtonProps> = ({
   label,
   width,
   height,
+  color,
   sx,
 }) => (
   <Tooltip title={disabled ? '' : label}>
@@ -27,6 +29,7 @@ export const IconButton: React.FC<ButtonProps> = ({
       onClick={onClick}
       aria-label={label}
       size="small"
+      color={color}
     >
       {icon}
     </MuiIconButton>

client/packages/common/src/ui/forms/JsonForms/components/Date.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { rankWith, ControlProps, isDateControl } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormLabel, Box } from '@mui/material';
+import { BaseDatePickerInput } from '@openmsupply-client/common';
+
+export const dateTester = rankWith(5, isDateControl);
+
+const UIComponent = (props: ControlProps) => {
+  const { data, handleChange, label, path } = props;
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap={2}
+      justifyContent="space-around"
+      style={{ minWidth: 300 }}
+      marginTop={1}
+    >
+      <Box flex={1} style={{ textAlign: 'end' }} flexBasis="40%">
+        <FormLabel sx={{ fontWeight: 'bold' }}>{label}:</FormLabel>
+      </Box>
+      <Box flex={1} flexBasis="60%">
+        <BaseDatePickerInput
+          value={data}
+          onChange={e => handleChange(path, e)}
+          inputFormat="dd/MM/yyyy"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const Date = withJsonFormsControlProps(UIComponent);

client/packages/common/src/ui/forms/JsonForms/components/Group.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { rankWith, uiTypeIs, LayoutProps, GroupLayout } from '@jsonforms/core';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { MaterialLayoutRenderer } from '@jsonforms/material-renderers';
+import { Box, Typography } from '@mui/material';
+
+export const groupTester = rankWith(4, uiTypeIs('Group'));
+
+const UIComponent = (props: LayoutProps) => {
+  const { uischema, schema, visible, renderers, path } = props;
+
+  const layoutProps = {
+    elements: (uischema as GroupLayout).elements,
+    schema: schema,
+    path: path,
+    direction: 'column' as 'column' | 'row',
+    visible: visible,
+    uischema: uischema,
+    renderers: renderers,
+  };
+  return (
+    <Box
+      sx={{
+        maxWidth: 500,
+        paddingLeft: 2,
+        paddingRight: 2,
+        marginBottom: 2,
+      }}
+    >
+      <Typography width="40%" fontSize="1.2em" textAlign="right">
+        <strong>{(uischema as GroupLayout).label}</strong>
+      </Typography>
+      <MaterialLayoutRenderer {...layoutProps} />
+    </Box>
+  );
+};
+
+export const Group = withJsonFormsLayoutProps(UIComponent);

client/packages/common/src/ui/forms/JsonForms/components/Label.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  LayoutProps,
+  rankWith,
+  UISchemaElement,
+  uiTypeIs,
+} from '@jsonforms/core';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { SxProps, Typography } from '@mui/material';
+import { RegexUtils } from '@common/utils';
+
+export const labelTester = rankWith(3, uiTypeIs('Label'));
+
+type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+
+type LayoutPropsExtended = LayoutProps & {
+  uischema: UISchemaElement & {
+    sx?: SxProps;
+    text?: string;
+    variant?: LabelVariant;
+  };
+};
+
+const variants: { [key in LabelVariant]: SxProps } = {
+  h1: { fontSize: '1.8em', fontWeight: 'bold', textAlign: 'center' },
+  h2: { fontSize: '1.4em', fontWeight: 'bold', textAlign: 'center' },
+  h3: {
+    fontWeight: 'bold',
+    textAlign: 'right',
+    width: '40%',
+    height: '1.5em', // This shouldn't be necessary 🤷‍♂️
+    marginTop: '1em',
+  },
+  h4: {},
+  h5: {},
+  h6: {},
+  p: {},
+};
+
+const UIComponent = (props: LayoutPropsExtended) => {
+  const {
+    uischema: { variant = 'p', sx, text },
+    data,
+  } = props;
+  const variantStyles = variants[variant];
+  return (
+    <Typography sx={{ ...variantStyles, ...sx } as SxProps}>
+      {RegexUtils.stringSubstitution(text ?? '', data)}
+    </Typography>
+  );
+};
+
+export const Label = withJsonFormsLayoutProps(UIComponent);

client/packages/common/src/ui/forms/JsonForms/components/Select.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { rankWith, isEnumControl, ControlProps } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormLabel, Box } from '@mui/material';
+import { Select } from '@openmsupply-client/common';
+
+export const selectTester = rankWith(4, isEnumControl);
+
+const UIComponent = (props: ControlProps) => {
+  const { data, handleChange, label, schema, path } = props;
+
+  const options = schema.enum
+    ? schema.enum.map((option: string) => ({
+        label: option,
+        value: option,
+      }))
+    : [];
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap={2}
+      justifyContent="space-around"
+      style={{ minWidth: 300 }}
+      marginTop={0.5}
+    >
+      <Box flex={1} style={{ textAlign: 'end' }} flexBasis="40%">
+        <FormLabel sx={{ fontWeight: 'bold' }}>{label}:</FormLabel>
+      </Box>
+      <Box flex={1} flexBasis="60%">
+        <Select
+          sx={{ minWidth: 100 }}
+          options={options}
+          value={data}
+          onChange={e => handleChange(path, e.target.value)}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const Selector = withJsonFormsControlProps(UIComponent);

client/packages/common/src/ui/forms/JsonForms/components/index.ts

@@ -0,0 +1,6 @@
+export * from './Group';
+export * from './Label';
+export * from './Text';
+export * from './Select';
+export * from './Date';
+// export * from './Array';

client/packages/common/src/ui/forms/JsonForms/components/text.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ControlProps, rankWith, schemaTypeIs } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { DetailInputWithLabelRow } from '@openmsupply-client/common';
+
+export const stringTester = rankWith(3, schemaTypeIs('string'));
+
+const UIComponent = (props: ControlProps) => {
+  const { data, handleChange, label, path } = props;
+  return (
+    <DetailInputWithLabelRow
+      label={label}
+      inputProps={{
+        value: data,
+        sx: { margin: 0.5, width: '100%' },
+        disabled: false,
+        onChange: e => handleChange(path, e.target.value),
+      }}
+    />
+  );
+};
+
+export const TextField = withJsonFormsControlProps(UIComponent);

client/packages/common/src/ui/forms/JsonForms/index.ts

@@ -0,0 +1 @@
+export * from './useJsonForms';

client/packages/common/src/ui/forms/JsonForms/jsonTemp/patient_1.json

@@ -0,0 +1,81 @@
+{
+  "Patient": {
+    "id": "123",
+    "gender": "Male",
+    "firstName": "Carl",
+    "lastName": "Smith",
+    "healthCenter": {
+      "id": "999",
+      "name": "My Health Center"
+    },
+    "addresses": [
+      {
+        "key": "primary",
+        "address1": "111 Address Street",
+        "address2": "Auckland",
+        "country": "NZ"
+      },
+      {
+        "key": "secondary",
+        "address1": "222 Address",
+        "address2": "address2",
+        "country": "NZ"
+      }
+    ],
+    "contactDetails": [
+      {
+        "key": "primary",
+        "address1": "111 Contact Street",
+        "address2": "Auckland",
+        "country": "NZ"
+      },
+      {
+        "key": "secondary",
+        "address1": "222 Contact",
+        "mobile": "+023456",
+        "email": "email",
+        "website": "website"
+      }
+    ],
+    "socioEconomics": {
+      "education": "education",
+      "occupation": "occupation",
+      "literate": "literate"
+    },
+    "testingArray": [{ "field1": "ONE", "field2": "TWO" }],
+    "family": {
+      "maritalStatus": "single",
+      "nextOfKin": {
+        "id": "nextOfKinId",
+        "firstName": "namekin",
+        "lastName": "lastNameKin",
+        "addresses": [],
+        "contactDetails": [
+          {
+            "key": "primary",
+            "address1": "NOK contact",
+            "address2": "Auckland",
+            "country": "New Zealand"
+          }
+        ],
+        "socioEconomics": {}
+      },
+      "caregiver": {
+        "id": "cargiverId",
+        "firstName": "caregiver",
+        "lastName": "caregiverLastName",
+        "addresses": [],
+        "contactDetails": [],
+        "socioEconomics": {}
+      },
+      "mother": {
+        "id": "motherId",
+        "firstName": "Jenny",
+        "lastName": "Shaw",
+        "addresses": [],
+        "contactDetails": [],
+        "socioEconomics": {}
+      }
+    }
+  }
+}