@abgov/jsonforms-components 1.37.1 → 1.38.0

package/index.esm.js

@@ -8131,6 +8131,357 @@ const createSchemaMatchTester = (props, isExactMatch = false) => {
 const isAddressLookup = createSchemaMatchTester(['addressLine2', 'municipality', 'addressLine1', 'subdivisionCode', 'postalCode']);
 const AddressLookUpTester = rankWith(4, isAddressLookup);
 
+const NameInputs = ({
+  firstName,
+  middleName,
+  lastName,
+  handleInputChange,
+  data,
+  requiredFields
+}) => {
+  var _a, _b;
+  const [errors, setErrors] = useState({});
+  return jsxs(GoAGrid, {
+    minChildWidth: "0ch",
+    gap: "s",
+    testId: "wrapper",
+    children: [jsx(GoAFormItem, {
+      testId: "formitem-first-name",
+      label: "First Name",
+      requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+      error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
+      children: jsx(GoAInput, {
+        type: "text",
+        name: "firstName",
+        testId: "name-form-first-name",
+        ariaLabel: 'name-form-first-name',
+        value: firstName || '',
+        onChange: (name, value) => handleInputChange(name, value),
+        width: "100%"
+      })
+    }), jsx(GoAFormItem, {
+      testId: "formitem-middle-name",
+      label: "Middle Name",
+      requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('middleName')) ? 'required' : undefined,
+      children: jsx(GoAInput, {
+        type: "text",
+        name: "middleName",
+        testId: "name-form-middle-name",
+        ariaLabel: 'name-form-middle-name',
+        value: middleName || '',
+        onChange: (name, value) => handleInputChange(name, value),
+        width: "100%"
+      })
+    }), jsx(GoAFormItem, {
+      testId: "formitem-last-name",
+      label: "Last Name",
+      requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+      error: (_b = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _b !== void 0 ? _b : '',
+      children: jsx(GoAInput, {
+        type: "text",
+        name: "lastName",
+        testId: "name-form-last-name",
+        ariaLabel: 'name-form-last-name',
+        value: lastName || '',
+        onChange: (name, value) => handleInputChange(name, value),
+        width: "100%"
+      })
+    })]
+  });
+};
+
+const FullNameReviewControl = props => {
+  var _a, _b, _c;
+  const requiredFields = props.schema.required;
+  return jsxs(GoAGrid, {
+    minChildWidth: "0ch",
+    gap: "s",
+    children: [jsx(GoAFormItem, {
+      label: "First Name",
+      requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+      children: jsx("div", {
+        "data-testid": `firstName-control-${props.id}`,
+        children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+      })
+    }), jsx(GoAFormItem, {
+      label: "Middle Name",
+      children: jsx("div", {
+        "data-testid": `middleName-control-${props.id}`,
+        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+      })
+    }), jsx(GoAFormItem, {
+      label: "Last Name",
+      requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+      children: jsx("div", {
+        "data-testid": `lastName-control-${props.id}`,
+        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+      })
+    })]
+  });
+};
+const FullNameControl = props => {
+  const {
+    data,
+    path,
+    schema,
+    handleChange
+  } = props;
+  const requiredFields = schema.required;
+  const defaultName = {
+    firstName: '',
+    middleName: '',
+    lastName: ''
+  };
+  const [nameData, setNameData] = useState(data || defaultName);
+  const updateFormData = updatedData => {
+    handleChange(path, updatedData);
+  };
+  const handleInputChange = (field, value) => {
+    const updatedName = Object.assign(Object.assign({}, nameData), {
+      [field]: value
+    });
+    setNameData(updatedName);
+    updateFormData(updatedName);
+  };
+  return jsx(NameInputs, {
+    firstName: defaultName.firstName,
+    middleName: defaultName.middleName,
+    lastName: defaultName.lastName,
+    handleInputChange: handleInputChange,
+    data: data,
+    requiredFields: requiredFields
+  });
+};
+
+const isFullNameSchema = obj => {
+  if (isObject$e(obj)) {
+    const keys = Object.keys(obj);
+    return ['firstName', 'middleName', 'lastName'].every(attr => keys.includes(attr)) && keys.length === 3;
+  }
+  return false;
+};
+const isFullName = (uischema, schema, context) => {
+  if (!isControl(uischema) || !isScoped(uischema)) {
+    return false;
+  }
+  if ((schema === null || schema === void 0 ? void 0 : schema.properties) && isObject$e(schema === null || schema === void 0 ? void 0 : schema.properties)) {
+    const propertyFromScope = uischema['scope'].split('/').pop();
+    if (isObject$e(schema.properties[propertyFromScope]) && 'properties' in schema.properties[propertyFromScope]) {
+      const objToTest = schema.properties[propertyFromScope]['properties'];
+      if (objToTest && isFullNameSchema(objToTest)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const FullNameTester = rankWith(4, isFullName);
+
+const FullNameDobControl = props => {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    data,
+    path,
+    schema,
+    handleChange,
+    uischema
+  } = props;
+  const requiredFields = schema.required;
+  const [errors, setErrors] = useState({});
+  const defaultNameAndDob = {
+    firstName: '',
+    middleName: '',
+    lastName: '',
+    dateOfBirth: undefined
+  };
+  const validDates = () => {
+    const currentDate = new Date();
+    const minDate = new Date(currentDate.getFullYear() - 150, currentDate.getMonth(), currentDate.getDate()).toISOString().substring(0, 10);
+    return {
+      minDate,
+      maxDate: currentDate.toISOString().substring(0, 10)
+    };
+  };
+  const [formData, setFormData] = useState(data || defaultNameAndDob);
+  const updateFormData = updatedData => {
+    handleChange(path, updatedData);
+  };
+  const handleInputChange = (field, value) => {
+    const updatedData = Object.assign(Object.assign({}, formData), {
+      [field]: value
+    });
+    setFormData(updatedData);
+    updateFormData(updatedData);
+    handleRequiredFieldBlur(field, updatedData);
+  };
+  const handleDobChange = (field, value) => {
+    const updatedData = Object.assign(Object.assign({}, formData), {
+      [field]: value
+    });
+    setFormData(updatedData);
+    updateFormData(updatedData);
+  };
+  /* istanbul ignore next */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleRequiredFieldBlur = (name, updatedData) => {
+    const err = Object.assign({}, errors);
+    if ((!(data === null || data === void 0 ? void 0 : data[name]) || (data === null || data === void 0 ? void 0 : data[name]) === '') && requiredFields.includes(name) && (!updatedData || (updatedData === null || updatedData === void 0 ? void 0 : updatedData[name]) === '')) {
+      const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : name === 'dateOfBirth' ? 'Date of birth' : '';
+      err[name] = `${modifiedName} is required`;
+    } else {
+      err[name] = '';
+    }
+    setErrors(err);
+  };
+  return jsxs(Fragment, {
+    children: [jsxs(GoAGrid, {
+      minChildWidth: "0ch",
+      gap: "s",
+      children: [jsx(GoAFormItem, {
+        label: "First Name",
+        requirement: ((_a = schema === null || schema === void 0 ? void 0 : schema.required) === null || _a === void 0 ? void 0 : _a.includes('firstName')) ? 'required' : undefined,
+        error: (_b = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _b !== void 0 ? _b : '',
+        children: jsx(GoAInput, {
+          type: "text",
+          name: "firstName",
+          testId: "name-form-first-name",
+          ariaLabel: 'name-form-first-name',
+          value: formData.firstName || '',
+          onChange: (name, value) => {
+            handleInputChange(name, value);
+            handleRequiredFieldBlur(name);
+          },
+          onBlur: name => {
+            /* istanbul ignore next */
+            handleRequiredFieldBlur(name);
+          },
+          width: "100%"
+        })
+      }), jsx(GoAFormItem, {
+        label: "Middle Name",
+        requirement: ((_c = schema === null || schema === void 0 ? void 0 : schema.required) === null || _c === void 0 ? void 0 : _c.includes('middleName')) ? 'required' : undefined,
+        children: jsx(GoAInput, {
+          type: "text",
+          name: "middleName",
+          testId: "name-form-middle-name",
+          ariaLabel: 'name-form-middle-name',
+          value: formData.middleName || '',
+          onChange: (name, value) => handleInputChange(name, value),
+          width: "100%"
+        })
+      }), jsx(GoAFormItem, {
+        label: "Last Name",
+        requirement: ((_d = schema === null || schema === void 0 ? void 0 : schema.required) === null || _d === void 0 ? void 0 : _d.includes('lastName')) ? 'required' : undefined,
+        error: (_e = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _e !== void 0 ? _e : '',
+        children: jsx(GoAInput, {
+          type: "text",
+          name: "lastName",
+          testId: "name-form-last-name",
+          ariaLabel: 'name-form-last-name',
+          value: formData.lastName || '',
+          onChange: (name, value) => handleInputChange(name, value),
+          onBlur: name => {
+            /* istanbul ignore next */
+            handleRequiredFieldBlur(name);
+          },
+          width: "100%"
+        })
+      })]
+    }), jsx(GoAGrid, {
+      minChildWidth: "0ch",
+      gap: "s",
+      children: jsx(GoAFormItem, {
+        label: "Date of Birth",
+        error: (_f = errors === null || errors === void 0 ? void 0 : errors['dateOfBirth']) !== null && _f !== void 0 ? _f : '',
+        requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
+        children: jsx(GoAInput, {
+          type: "date",
+          name: "dateOfBirth",
+          min: validDates().minDate,
+          max: validDates().maxDate,
+          testId: `dob-form-dateOfBirth`,
+          ariaLabel: "dob-form-dateOfBirth",
+          placeholder: "YYYY-MM-DD",
+          value: formData === null || formData === void 0 ? void 0 : formData.dateOfBirth,
+          onChange: (name, value) => handleDobChange(name, value),
+          onBlur: name => {
+            /* istanbul ignore next */
+            handleRequiredFieldBlur(name);
+          },
+          width: "100%"
+        })
+      })
+    })]
+  });
+};
+
+const FullNameDobReviewControl = props => {
+  var _a, _b, _c, _d;
+  const requiredFields = props.schema.required;
+  return jsxs(Fragment, {
+    children: [jsxs(GoAGrid, {
+      minChildWidth: "0ch",
+      gap: "s",
+      children: [jsx(GoAFormItem, {
+        label: "First Name",
+        requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
+        children: jsx("div", {
+          "data-testid": `firstName-control-${props.id}`,
+          children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
+        })
+      }), jsx(GoAFormItem, {
+        label: "Middle Name",
+        children: jsx("div", {
+          "data-testid": `middleName-control-${props.id}`,
+          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
+        })
+      }), jsx(GoAFormItem, {
+        label: "Last Name",
+        requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
+        children: jsx("div", {
+          "data-testid": `lastName-control-${props.id}`,
+          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.lastName
+        })
+      })]
+    }), jsx(GoAGrid, {
+      minChildWidth: "0ch",
+      gap: "s",
+      children: jsx(GoAFormItem, {
+        label: "Date of birth",
+        requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
+        children: jsx("div", {
+          "data-testid": `dob-control-${props.id}`,
+          children: (_d = props.data) === null || _d === void 0 ? void 0 : _d.dateOfBirth
+        })
+      })
+    })]
+  });
+};
+
+const isFullNameDoBSchema = obj => {
+  if (isObject$e(obj)) {
+    const keys = Object.keys(obj);
+    return ['firstName', 'middleName', 'lastName', 'dateOfBirth'].every(attr => keys.includes(attr)) && keys.length === 4;
+  }
+  return false;
+};
+const isFullNameDoB = (uischema, schema, context) => {
+  if (!isControl(uischema) || !isScoped(uischema)) {
+    return false;
+  }
+  if ((schema === null || schema === void 0 ? void 0 : schema.properties) && isObject$e(schema === null || schema === void 0 ? void 0 : schema.properties)) {
+    const propertyFromScope = uischema['scope'].split('/').pop();
+    if (isObject$e(schema.properties[propertyFromScope]) && 'properties' in schema.properties[propertyFromScope]) {
+      const objToTest = schema.properties[propertyFromScope]['properties'];
+      if (objToTest && isFullNameDoBSchema(objToTest)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const FullNameDobTester = rankWith(4, isFullNameDoB);
+
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
 const GoATextCellTester = rankWith(1, isStringControl);
 withJsonFormsCellProps(GoATextCell);
@@ -9648,6 +9999,12 @@ const GoABaseReviewRenderers = [
 const GoAReviewRenderers = [...GoABaseReviewRenderers, {
   tester: FileUploaderTester,
   renderer: withJsonFormsControlProps(FileUploaderReview)
+}, {
+  tester: FullNameTester,
+  renderer: withJsonFormsControlProps(FullNameReviewControl)
+}, {
+  tester: FullNameDobTester,
+  renderer: withJsonFormsControlProps(FullNameDobReviewControl)
 }, {
   tester: AddressLookUpTester,
   renderer: withJsonFormsControlProps(AddressLookUpControlReview)
@@ -9661,6 +10018,12 @@ const GoARenderers = [...GoABaseRenderers, {
 }, {
   tester: AddressLookUpTester,
   renderer: withJsonFormsControlProps(AddressLookUpControl)
+}, {
+  tester: FullNameTester,
+  renderer: withJsonFormsControlProps(FullNameControl)
+}, {
+  tester: FullNameDobTester,
+  renderer: withJsonFormsControlProps(FullNameDobControl)
 }];
 const GoACells = [...InputCells];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.37.1",
+  "version": "1.38.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/FullName/FullNameControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from '@jsonforms/core';
+type FullNameProps = ControlProps;
+export declare const FullNameReviewControl: (props: FullNameProps) => JSX.Element;
+export declare const FullNameControl: (props: FullNameProps) => JSX.Element;
+export {};

package/src/lib/Controls/FullName/FullNameInputs.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface Data {
+    firstName: string;
+    middleName: string;
+    lastName: string;
+}
+interface NameInputsProps {
+    firstName: string;
+    middleName?: string;
+    lastName: string;
+    isStepperReview?: boolean;
+    data: Data;
+    requiredFields: string[];
+    handleInputChange: (field: string, value: string) => void;
+}
+export declare const NameInputs: React.FC<NameInputsProps>;
+export {};

package/src/lib/Controls/FullName/FullNameTester.d.ts

@@ -0,0 +1,3 @@
+import { RankedTester, UISchemaElement, JsonSchema, TesterContext } from '@jsonforms/core';
+export declare const isFullName: (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
+export declare const FullNameTester: RankedTester;

package/src/lib/Controls/FullName/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FullNameControl';
+export * from './FullNameTester';

package/src/lib/Controls/FullName/styled-components.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/Controls/FullNameDOB/FullNameDobControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from '@jsonforms/core';
+type DateOfBirthControlProps = ControlProps;
+export declare const FullNameDobControl: (props: DateOfBirthControlProps) => JSX.Element;
+export {};

package/src/lib/Controls/FullNameDOB/FullNameDobReviewControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from '@jsonforms/core';
+type DateOfBirthReviewControlProps = ControlProps;
+export declare const FullNameDobReviewControl: (props: DateOfBirthReviewControlProps) => JSX.Element;
+export {};

package/src/lib/Controls/FullNameDOB/FullNameDobTester.d.ts

@@ -0,0 +1,3 @@
+import { RankedTester, UISchemaElement, JsonSchema, TesterContext } from '@jsonforms/core';
+export declare const isFullNameDoB: (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
+export declare const FullNameDobTester: RankedTester;

package/src/lib/Controls/FullNameDOB/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FullNameDobControl';
+export * from './FullNameDobReviewControl';
+export * from './FullNameDobTester';

package/src/lib/Controls/index.d.ts

@@ -3,3 +3,5 @@ export * from './FormStepper';
 export * from './FileUploader';
 export * from './ObjectArray';
 export * from './AddressLookup';
+export * from './FullName';
+export * from './FullNameDOB';