@evoke-platform/ui-components 1.6.1-dev.0 → 1.6.1-testing.0

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.d.ts

@@ -12,6 +12,7 @@ type DocumentProps = {
     objectId?: string;
     validate?: DocumentValidation;
     value: (File | SavedDocumentReference)[] | undefined;
+    onFileRejections: (fileRejectionsErrors: string[]) => void;
 };
 export declare const Document: (props: DocumentProps) => React.JSX.Element;
 export {};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -1,16 +1,32 @@
 import { isNil } from 'lodash';
+import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { UploadCloud } from '../../../../../icons';
 import { Skeleton, Snackbar, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
+import { createAcceptObject } from '../../../util';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
-    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate } = props;
+    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate, onFileRejections, } = props;
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState();
     const [snackbarError, setSnackbarError] = useState();
+    let allowedTypesMessage = '';
+    if (validate?.allowedFileExtensions?.length) {
+        if (validate.allowedFileExtensions.length === 1) {
+            allowedTypesMessage = validate.allowedFileExtensions[0];
+        }
+        else {
+            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+        }
+    }
+    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            validate.maxSizeInKB * 1000 // convert to bytes
+        : undefined;
+    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
     useEffect(() => {
         setDocuments(value);
     }, [value]);
@@ -36,15 +52,27 @@ export const Document = (props) => {
         handleChange(property.id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
-    const { getRootProps, getInputProps, open } = useDropzone({
+    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
+        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : undefined,
+        maxSize: maxSizeInBytes,
     });
+    useEffect(() => {
+        const errors = [];
+        if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
+            errors.push(`Invalid file extension. Allowed extensions are: ${allowedTypesMessage}`);
+        }
+        if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
+            errors.push(`File size exceeds the max limit of ${formattedMaxSize}`);
+        }
+        onFileRejections(errors);
+    }, [fileRejections, onFileRejections]);
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
                 margin: '5px 0',
-                height: '115px',
+                height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px',
                 borderRadius: '8px',
                 display: 'flex',
                 justifyContent: 'center',
@@ -63,8 +91,20 @@ export const Document = (props) => {
                         ' ',
                         React.createElement(Typography, { component: 'span', sx: { color: uploadDisabled ? '#919EAB' : '#0075A7', fontSize: '14px' } }, "select file"),
                         ' ',
-                        "to upload"))))),
-        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "115px", sx: { margin: '5px 0', borderRadius: '8px' } })),
+                        "to upload"),
+                    allowedTypesMessage && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, `${allowedTypesMessage}.`)),
+                    formattedMaxSize && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, validate?.maxDocuments === 1
+                        ? `Max size of ${formattedMaxSize}.`
+                        : `The max size of each document is ${formattedMaxSize}.`)))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
         React.createElement(DocumentList, { property: property, instance: instance, objectId: objectId, handleChange: handleChange, value: value, apiServices: apiServices, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' })));
 };

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -16,6 +16,7 @@ export declare class DocumentComponent extends ReactComponent {
      */
     manageFormErrors(): void;
     handleChange: (key: string, value?: (File | SavedDocumentReference)[] | null) => void;
+    handleFileRejections(fileRejectionsErrors: string[]): void;
     handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
     beforeSubmit(): Promise<void>;
     attachReact(element: Element): void;

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.js

@@ -26,6 +26,7 @@ export class DocumentComponent extends ReactComponent {
         };
         this.errorDetails = {};
         this.handleChange = this.handleChange.bind(this);
+        this.handleFileRejections = this.handleFileRejections.bind(this);
     }
     init() {
         this.on(`api-error`, (details) => {
@@ -87,6 +88,12 @@ export class DocumentComponent extends ReactComponent {
             }
         });
     }
+    handleFileRejections(fileRejectionsErrors) {
+        delete this.errorDetails['file-rejections'];
+        if (fileRejectionsErrors.length > 0) {
+            this.errorDetails['file-rejections'] = `${fileRejectionsErrors.join('; ')}.`;
+        }
+    }
     handleValidation(value) {
         const validate = this.component.validate;
         const amountOfDocuments = value?.length ?? 0;
@@ -131,6 +138,6 @@ export class DocumentComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null,
             React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() },
-                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue }))), root);
+                React.createElement(Document, { ...this.component, id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue, onFileRejections: this.handleFileRejections }))), root);
     }
 }

package/dist/published/components/custom/Form/utils.js

@@ -233,6 +233,12 @@ export function convertFormToComponents(entries, parameters, object) {
                     maxDocuments: parameter.type === 'document'
                         ? parameter.validation?.maxDocuments
                         : undefined,
+                    allowedFileExtensions: parameter.type === 'document'
+                        ? parameter.validation?.allowedFileExtensions
+                        : undefined,
+                    maxSizeInKB: parameter.type === 'document'
+                        ? parameter.validation?.maxSizeInKB
+                        : undefined,
                     customMessage: ['integer', 'number', 'date', 'time', 'document'].includes(parameter.type ?? '')
                         ? parameter.validation
                             ?.errorMessage

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -1,11 +1,13 @@
 import { useApiServices } from '@evoke-platform/context';
 import { isNil } from 'lodash';
+import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { UploadCloud } from '../../../../../../icons';
+import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton, Snackbar, Typography } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
+import { createAcceptObject } from '../../../../util';
 import { getPrefixedUrl } from '../../utils';
 import { DocumentList } from './DocumentList';
 export const Document = (props) => {
@@ -15,6 +17,20 @@ export const Document = (props) => {
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
+    let allowedTypesMessage = '';
+    if (validate?.allowedFileExtensions?.length) {
+        if (validate.allowedFileExtensions.length === 1) {
+            allowedTypesMessage = validate.allowedFileExtensions[0];
+        }
+        else {
+            allowedTypesMessage = `${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
+        }
+    }
+    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            validate.maxSizeInKB * 1000 // convert to bytes
+        : undefined;
+    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
     useEffect(() => {
         setDocuments(value);
     }, [value]);
@@ -39,15 +55,24 @@ export const Document = (props) => {
         handleChange(id, newDocuments);
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
-    const { getRootProps, getInputProps, open } = useDropzone({
+    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
+        accept: validate?.allowedFileExtensions ? createAcceptObject(validate.allowedFileExtensions) : undefined,
+        maxSize: maxSizeInBytes,
     });
+    const errors = [];
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
+        errors.push(`Invalid file extension. Allowed extensions are: ${allowedTypesMessage}`);
+    }
+    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
+        errors.push(`File size exceeds the max limit of ${formattedMaxSize}`);
+    }
     return (React.createElement(React.Fragment, null,
         canUpdateProperty && hasUpdatePermission && (React.createElement(Box, { sx: {
                 margin: '5px 0',
-                height: '115px',
+                height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px',
                 borderRadius: '8px',
                 display: 'flex',
                 justifyContent: 'center',
@@ -66,8 +91,23 @@ export const Document = (props) => {
                         ' ',
                         React.createElement(Typography, { component: 'span', color: uploadDisabled ? '#919EAB' : 'primary', sx: { fontSize: '14px' } }, "select file"),
                         ' ',
-                        "to upload"))))),
-        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "115px", sx: { margin: '5px 0', borderRadius: '8px' } })),
+                        "to upload"),
+                    allowedTypesMessage && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, `${allowedTypesMessage}.`)),
+                    formattedMaxSize && (React.createElement(Typography, { sx: {
+                            color: '#637381',
+                            textAlign: 'center',
+                            fontSize: '12px',
+                        } }, validate?.maxDocuments === 1
+                        ? `Max size of ${formattedMaxSize}.`
+                        : `The max size of each document is ${formattedMaxSize}.`)))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })),
         React.createElement(DocumentList, { id: id, instance: instance, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
-        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' })));
+        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
+        errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+            React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
+            React.createElement(Typography, { fontSize: '12px', color: 'error', sx: { lineHeight: '18px' } }, errors.join('; ') + '.')))));
 };

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -130,7 +130,7 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'document') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },
-                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description })));
+                React.createElement(Document, { id: entryId, handleChange: handleChange, error: !!errors[entryId], value: fieldValue, instance: instance, canUpdateProperty: !(entry.type === 'readonlyField'), hasDescription: !!display?.description, validate: validation })));
         }
         else if (fieldDefinition.type === 'criteria') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors) },

package/dist/published/components/custom/util.d.ts

@@ -1 +1,2 @@
 export declare function difference(object?: any, base?: any): any;
+export declare const createAcceptObject: (allowedTypes: string[]) => Record<string, string[]> | undefined;

package/dist/published/components/custom/util.js

@@ -1,4 +1,5 @@
 import { isEqual, isObject, transform } from 'lodash';
+import mime from 'mime-types';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function difference(object, base) {
     if (!object) {
@@ -14,3 +15,30 @@ export function difference(object, base) {
         }
     });
 }
+// Helper function to convert file extensions array to dropzone accept format
+export const createAcceptObject = (allowedTypes) => {
+    if (!allowedTypes.length)
+        return undefined;
+    const acceptObject = {};
+    const customExtensions = [];
+    // First pass: collect custom extensions from allowedTypes that don't map to standard MIME types
+    allowedTypes.forEach((extension) => {
+        const mimeType = mime.lookup(extension);
+        // It's a custom extension
+        if (!mimeType) {
+            customExtensions.push(extension.startsWith('.') ? extension : `.${extension}`);
+        }
+        else {
+            // If it is mapped to a value, add it to the accept object
+            if (!acceptObject[mimeType]) {
+                acceptObject[mimeType] = [];
+            }
+            acceptObject[mimeType].push(extension.startsWith('.') ? extension : `.${extension}`);
+        }
+    });
+    if (customExtensions.length) {
+        // Add custom files extensions to the accept object
+        acceptObject['file/custom'] = customExtensions;
+    }
+    return acceptObject;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.1-dev.0",
+    "version": "1.6.1-testing.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -56,6 +56,7 @@
         "@types/jest": "^28.1.4",
         "@types/json-logic-js": "^2.0.8",
         "@types/luxon": "^3.4.2",
+        "@types/mime-types": "^3.0.1",
         "@types/nanoid-dictionary": "^4.2.3",
         "@types/node": "^18.0.0",
         "@types/react": "^18.0.17",
@@ -87,7 +88,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.0-dev.6",
+        "@evoke-platform/context": "^1.3.0-testing.9",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -119,6 +120,7 @@
         "formiojs": "^4.15.0-rc.23",
         "html-react-parser": "^5.1.18",
         "luxon": "^2.5.2",
+        "mime-type": "^5.0.3",
         "msw": "^2.7.3",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",