@abgov/jsonforms-components 0.0.1

package/src/lib/Additional/styled-components.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const HelpContentDiv = styled.div`
+  .parent-label {
+    font-size: 24px;
+    margin-bottom: 1rem;
+    font-weight: bold;
+  }
+
+  .child-label {
+    font-size: 18px;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+  }
+  .parent-margin {
+    margin-bottom: 1.5rem;
+  }
+  .child-margin {
+    margin-bottom: 0.25rem;
+  }
+  ul {
+    margin: 0 0 0 0.5rem;
+  }
+  .single-line {
+    margin: 0.25rem 0 0.25rem 0;
+  }
+`;

package/src/lib/Cells/DateCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellProps, isDateControl, RankedTester, rankWith, WithClassname } from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { GoADateInput } from '../Controls';
+
+export const GoADateCell = (props: CellProps & WithClassname) => <GoADateInput {...props} />;
+
+export const GoADateCellTester: RankedTester = rankWith(1, isDateControl);
+
+export default withJsonFormsCellProps(GoADateCell);

package/src/lib/Cells/IntegerCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellProps, isIntegerControl, RankedTester, rankWith, WithClassname } from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { GoAInputInteger } from '../Controls';
+
+export const GoAIntegerCell = (props: CellProps & WithClassname) => <GoAInputInteger {...props} />;
+
+export const GoAIntegerCellTester: RankedTester = rankWith(1, isIntegerControl);
+
+export default withJsonFormsCellProps(GoAIntegerCell);

package/src/lib/Cells/NumberCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellProps, isNumberControl, RankedTester, rankWith, WithClassname } from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { GoANumberInput } from '../Controls';
+
+export const GoANumberCell = (props: CellProps & WithClassname) => <GoANumberInput {...props} />;
+
+export const GoANumberCellTester: RankedTester = rankWith(1, isNumberControl);
+
+export default withJsonFormsCellProps(GoANumberCell);

package/src/lib/Cells/TextCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellProps, isStringControl, RankedTester, rankWith, WithClassname } from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { GoAInputText } from '../Controls';
+
+export const GoATextCell = (props: CellProps & WithClassname) => <GoAInputText {...props} />;
+
+export const GoATextCellTester: RankedTester = rankWith(1, isStringControl);
+
+export default withJsonFormsCellProps(GoATextCell);

package/src/lib/Cells/TimeCell.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CellProps, isTimeControl, RankedTester, rankWith, WithClassname } from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { GoADateInput } from '../Controls';
+
+export const GoATimeCell = (props: CellProps & WithClassname) => <GoADateInput {...props} />;
+
+export const GoATimeCellTester: RankedTester = rankWith(2, isTimeControl);
+
+export default withJsonFormsCellProps(GoATimeCell);

package/src/lib/Cells/index.tsx

@@ -0,0 +1,14 @@
+import { GoATextCell, GoATextCellTester } from './TextCell';
+import { GoADateCell, GoADateCellTester } from './DateCell';
+import { GoATimeCell, GoATimeCellTester } from './TimeCell';
+import { GoANumberCell, GoANumberCellTester } from './NumberCell';
+import { GoAIntegerCell, GoAIntegerCellTester } from './IntegerCell';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { JsonFormsCellRendererRegistryEntry } from '@jsonforms/core';
+export const InputCells: JsonFormsCellRendererRegistryEntry[] = [
+  { tester: GoATextCellTester, cell: withJsonFormsCellProps(GoATextCell) },
+  { tester: GoADateCellTester, cell: withJsonFormsCellProps(GoADateCell) },
+  { tester: GoATimeCellTester, cell: withJsonFormsCellProps(GoATimeCell) },
+  { tester: GoANumberCellTester, cell: withJsonFormsCellProps(GoANumberCell) },
+  { tester: GoAIntegerCellTester, cell: withJsonFormsCellProps(GoAIntegerCell) },
+];

package/src/lib/Context/index.tsx

@@ -0,0 +1,172 @@
+import React, { createContext } from 'react';
+import axios, { AxiosRequestConfig, AxiosStatic } from 'axios';
+
+interface enumerators {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: Map<string, () => any>;
+  functions: Map<string, () => (file: File, propertyId: string) => void>;
+}
+
+export interface AllData {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [x: string]: any;
+}
+
+const getAxiosInterceptorConfig = (axios: AxiosStatic): [number, AxiosStatic] => {
+  const requestId = axios.interceptors.request.use((req) => {
+    if (req.data === undefined) {
+      throw new Error(`The URL: ${req.url} encountered a CORS error.`);
+    }
+    return req;
+  });
+
+  return [requestId, axios];
+};
+
+export function addDataByUrl(key: string, url: string, processDataFunction: (url: string) => string[], token?: string) {
+  let header = {} as AxiosRequestConfig<unknown>;
+  const [requestId, axiosWithConfig] = getAxiosInterceptorConfig(axios);
+  if (token) {
+    header = { ...header, ...{ Authorization: `Bearer ${token}` } };
+  }
+
+  axiosWithConfig
+    .get(url, header)
+    .then((response) => {
+      const processedData = processDataFunction(response.data);
+      enumValues.set(key, () => processedData);
+    })
+    .catch((err: Error) => {
+      if (err.message.includes('CORS')) {
+        console.warn(err.message);
+      } else {
+        console.warn(`addDataByUrl: ${err.message}`);
+      }
+    });
+  axiosWithConfig.interceptors.request.eject(requestId);
+}
+
+export function addDataByOptions(key: string, url: string, location: string[], type: string, values: string[]) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const dataFunction = (data: any) => {
+    let dataLink = data;
+    let returnData = [''];
+
+    const locationArray = location && !Array.isArray(location) ? [location] : location;
+    locationArray?.forEach((attribute) => {
+      dataLink = dataLink[attribute];
+    });
+
+    const valuesArray = Array.isArray(values) ? values : [values];
+
+    if (type === 'keys') {
+      returnData = Object.keys(dataLink);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      returnData = dataLink.map((entry: any) => {
+        let parse = '';
+        valuesArray.forEach((v, index) => {
+          parse += `${entry[v]}`;
+
+          if (index < valuesArray.length - 1) {
+            parse += ' ';
+          }
+        });
+        return parse;
+      });
+    }
+
+    return returnData;
+  };
+
+  addDataByUrl(key, url, dataFunction);
+}
+
+interface FileManagement {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fileList?: any;
+  uploadFile?: (file: File, propertyId: string) => void;
+  downloadFile?: (file: File) => void;
+  deleteFile?: (file: File) => void;
+}
+
+type Props = {
+  children?: React.ReactNode;
+  fileManagement?: FileManagement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data?: any;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const enumValues: Map<string, () => Record<string, any> | string[]> = new Map<string, () => Record<string, any>>();
+const enumFunctions: Map<string, () => (file: File, propertyId: string) => void> = new Map<
+  string,
+  () => (file: File, propertyId: string) => void
+>();
+
+const baseEnumerator = {
+  data: enumValues,
+  functions: enumFunctions,
+};
+
+export const JsonFormContext = createContext(baseEnumerator);
+
+export function ContextProvider(props: Props): JSX.Element | null {
+  const outerTheme = React.useContext(JsonFormContext);
+
+  if (props.fileManagement) {
+    const { fileList, uploadFile, downloadFile, deleteFile } = props.fileManagement;
+
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    const uploadFileFunction = uploadFile ? uploadFile : () => {};
+    const downloadFileFunction = downloadFile ? downloadFile : () => {};
+    const deleteFileFunction = deleteFile ? deleteFile : () => {};
+
+    enumValues.set('file-list', () => fileList);
+    enumFunctions.set('upload-file', () => uploadFileFunction);
+    enumFunctions.set('download-file', () => downloadFileFunction);
+    enumFunctions.set('delete-file', () => deleteFileFunction);
+  }
+
+  if (props.data) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props.data?.forEach((item: any) => {
+      enumValues.set(Object.keys(item)[0], () => item);
+    });
+  }
+
+  if (!props.children) {
+    return null;
+  }
+
+  return <JsonFormContext.Provider value={baseEnumerator}>{props.children}</JsonFormContext.Provider>;
+}
+
+/**
+ * Grabs data stored under a given key
+ *
+ */
+export function getData(key: string) {
+  const dataFunction = baseEnumerator.data.get(key);
+  return dataFunction && dataFunction();
+}
+
+/**
+ * Grabs all data
+ *
+ */
+export function getAllData() {
+  const allData: AllData = [];
+  baseEnumerator.data.forEach((d, key) => {
+    allData.push({ [key]: d() });
+  });
+  return allData;
+}
+/**
+ * Allows additional data to be added under a given key
+ *
+ * This data will then be available inside the context
+ */
+export function addData(key: string, data: Record<string, unknown> | unknown[]) {
+  enumValues.set(key, () => data);
+}

package/src/lib/Controls/FileUploader/ContextMenu.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { GoAButton, GoAIconButton, GoAIconType } from '@abgov/react-components-new';
+import styled from 'styled-components';
+
+interface ContextMenuIconProps {
+  type: GoAIconType;
+  testId?: string;
+  title?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+interface ContextMenuTextProps {
+  type?: GoAIconType;
+  testId?: string;
+  onClick?: () => void;
+}
+
+export const GoAContextMenuIcon: FC<ContextMenuIconProps> = (props) => {
+  return (
+    <GoAIconButton
+      icon={props.type}
+      onClick={props.onClick}
+      title={props.title}
+      testId={props.testId}
+      size="small"
+      disabled={props.disabled}
+    />
+  );
+};
+
+export const GoAContextMenuText: FC<ContextMenuTextProps> = (props) => {
+  return <GoAButton type="tertiary" onClick={props.onClick} testId={props.testId} size="compact" />;
+};
+
+export const GoAContextMenu = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  gap: 0.25rem;
+
+  > .goa-icon-button {
+    cursor: pointer;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+  }
+  > .goa-icon-button + .goa-icon-button {
+    margin-left: 0rem;
+  }
+`;

package/src/lib/Controls/FileUploader/FileUploaderControl.tsx

@@ -0,0 +1,131 @@
+import React, { useContext, useEffect } from 'react';
+import { GoAFileUploadInput, GoAFormItem, GoACircularProgress, GoAModal } from '@abgov/react-components-new';
+import { WithClassname, ControlProps } from '@jsonforms/core';
+
+import styled from 'styled-components';
+import { JsonFormContext } from '../../Context';
+
+import { GoAContextMenu, GoAContextMenuIcon } from './ContextMenu';
+
+type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
+
+export const FileUploader = ({ data, path, handleChange, uischema, ...props }: FileUploaderLayoutRendererProps) => {
+  const enumerators = useContext(JsonFormContext);
+  const uploadTriggerFunction = enumerators.functions.get('upload-file');
+  const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
+  const downloadTriggerFunction = enumerators.functions.get('download-file');
+  const downloadTrigger = downloadTriggerFunction && downloadTriggerFunction();
+  const deleteTriggerFunction = enumerators.functions.get('delete-file');
+  const deleteTrigger = deleteTriggerFunction && deleteTriggerFunction();
+  const fileListValue = enumerators.data.get('file-list');
+  // eslint-disable-next-line
+  const fileList = fileListValue && (fileListValue() as Record<string, any>);
+  const { required, label, i18nKeyPrefix } = props;
+
+  const propertyId = i18nKeyPrefix as string;
+
+  const variant = uischema?.options?.variant || 'button';
+
+  function uploadFile(file: File) {
+    if (uploadTrigger) {
+      handleChange(propertyId, ['Loading', Array.isArray(data) ? data[1] : data, file?.name]);
+      uploadTrigger(file, propertyId);
+    }
+  }
+  function downloadFile(file: File) {
+    if (downloadTrigger) {
+      downloadTrigger(file, propertyId);
+    }
+  }
+  function deleteFile(file: File) {
+    if (deleteTrigger) {
+      deleteTrigger(file, propertyId);
+    }
+  }
+
+  useEffect(() => {
+    // UseEffect is required because not having it causes a react update error, but
+    // it doesn't function correctly within jsonforms unless there is a minor delay here
+    const delayedFunction = () => {
+      if (fileList && Array.isArray(data) && data[1] !== fileList[propertyId]?.urn) {
+        handleChange(propertyId, fileList && fileList[propertyId]?.urn);
+      }
+    };
+
+    const timeoutId = setTimeout(delayedFunction, 1);
+    return () => clearTimeout(timeoutId);
+  }, [data, handleChange, fileList, propertyId]);
+
+  return (
+    <FileUploaderStyle id="file-upload" className="FileUploader">
+      {required ? (
+        <GoAFormItem label={label} requirement="required"></GoAFormItem>
+      ) : (
+        <div className="label">{props.label}</div>
+      )}
+
+      <div className="file-upload">
+        <GoAFileUploadInput variant={variant} onSelectFile={uploadFile} />
+      </div>
+      <div>
+        {Array.isArray(data) && data[0] === 'Loading' ? (
+          <GoAModal open={Array.isArray(data) && data[0] === 'Loading'}>
+            <div className="align-center">
+              <GoACircularProgress visible={true} message={`Uploading ${data[2]}`} size="large" />
+            </div>
+          </GoAModal>
+        ) : (
+          <div>
+            {fileList && fileList[props.i18nKeyPrefix as string] && (
+              <AttachmentBorder>
+                <div>{fileList && fileList[props.i18nKeyPrefix as string].filename}</div>
+                <GoAContextMenu>
+                  <GoAContextMenuIcon
+                    testId="download-icon"
+                    title="Download"
+                    type="download"
+                    onClick={() => downloadFile(fileList && fileList[props.i18nKeyPrefix as string])}
+                  />
+                  <GoAContextMenuIcon
+                    data-testid="delete-icon"
+                    title="Delete"
+                    type="trash"
+                    onClick={() => deleteFile(fileList && fileList[props.i18nKeyPrefix as string])}
+                  />
+                </GoAContextMenu>
+              </AttachmentBorder>
+            )}
+          </div>
+        )}
+      </div>
+    </FileUploaderStyle>
+  );
+};
+
+const AttachmentBorder = styled.div`
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #dcdcdc;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  width: fit-content;
+  margin-top: 5px;
+`;
+
+const FileUploaderStyle = styled.div`
+  .label {
+    display: block;
+    font-weight: var(--goa-font-weight-bold);
+    color: var(--goa-color-text-default);
+    font-size: var(--goa-font-size-4);
+    padding: 0 0 0.5rem 0;
+  }
+
+  .align-center {
+    text-align-last: center;
+  }
+
+  .file-upload {
+    margin-bottom: 0.5rem;
+  }
+`;

package/src/lib/Controls/FileUploader/FileUploaderTester.tsx

@@ -0,0 +1,3 @@
+import { rankWith, RankedTester, schemaTypeIs, and, formatIs } from '@jsonforms/core';
+
+export const FileUploaderTester: RankedTester = rankWith(3, and(schemaTypeIs('string'), formatIs('file-urn')));

package/src/lib/Controls/FileUploader/index.tsx

@@ -0,0 +1,2 @@
+export * from './FileUploaderControl';
+export * from './FileUploaderTester';

package/src/lib/Controls/FileUploader/styled-components.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const ReviewItem = styled.div`
+  display: flex;
+  width: 100%;
+  border: 1px solid grey;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 10px;
+`;