@telus-uds/components-base 1.92.0 → 1.94.0

package/lib-module/FileUpload/FileUpload.js

@@ -0,0 +1,329 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, convertFromMegaByteToByte } from '../utils';
+import InputLabel from '../InputLabel';
+import { Button } from '../Button';
+import Notification from '../Notification';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import NotificationContent from './NotificationContent';
+import dictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const getHintFromFileTypes = fileTypes => {
+  const acceptedFileTypes = fileTypes.map(type => type.toUpperCase());
+  return acceptedFileTypes.reduce((acc, curr, index) => {
+    if (index === 0) {
+      return `${curr}`;
+    }
+    return `${acc}, ${curr}`;
+  }, '');
+};
+const stringifyFileTypesList = (fileTypes, getCopy) => {
+  const acceptedFileTypes = fileTypes.map(type => `.${type.toUpperCase()}`);
+  return acceptedFileTypes.reduce((acc, curr, index) => {
+    if (index === 0) {
+      return curr;
+    }
+    if (index === acceptedFileTypes.length - 1) {
+      return `${acc} ${getCopy('or')} ${curr}`;
+    }
+    return `${acc}, ${curr}`;
+  }, '');
+};
+const selectComponentTokens = (tokens, componentIdentifier) => {
+  return Object.entries(tokens).reduce((acc, _ref) => {
+    let [key, value] = _ref;
+    if (key.startsWith(componentIdentifier) && value !== null) {
+      const newKey = key.replace(componentIdentifier, '').replace('Text', '').charAt(0).toLowerCase() + key.replace(componentIdentifier, '').replace('Text', '').slice(1);
+      acc[newKey] = value;
+    }
+    return acc;
+  }, {});
+};
+
+/**
+ * FileUpload component for uploading files.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <FileUpload
+ *   tokens={tokens}
+ *   variant={variant}
+ *   copy={copy}
+ *   fileTypes={fileTypes}
+ *   allowMultipleFiles={allowMultipleFiles}
+ *   maxFileSize={maxFileSize}
+ *   maxFilesCount={maxFilesCount}
+ *   onUpload={onUpload}
+ *   onDelete={onDelete}
+ *   documentPicker={documentPicker}
+ *   {...rest}
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.tokens - The tokens for styling the component.
+ * @param {string} props.variant - The variant of the component.
+ * @param {string} props.copy - The copy for the component.
+ * @param {string[]} props.fileTypes - The allowed file types for upload.
+ * @param {boolean} props.allowMultipleFiles - Whether multiple files can be uploaded.
+ * @param {number} props.maxFileSize - The maximum file size in megabytes.
+ * @param {number} props.maxFilesCount - The maximum number of files that can be uploaded.
+ * @param {Function} props.onUpload - The callback function for file upload.
+ * @param {Function} props.onDelete - The callback function for file deletion.
+ * @param {Object} props.documentPicker - The document picker object.
+ * @param {any} props.rest - Additional props to be spread to the component.
+ * @returns {JSX.Element} The rendered FileUpload component.
+ */
+const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    copy = 'en',
+    fileTypes,
+    allowMultipleFiles = false,
+    maxFileSize,
+    maxFilesCount = 1,
+    onUpload,
+    onDelete,
+    documentPicker,
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('FileUpload', tokens, variant);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const inputFileRef = React.useRef(null);
+  const [filesStatus, setFilesStatus] = React.useState([]);
+  const [renderTrigger, setRenderTrigger] = React.useState(0);
+  React.useEffect(() => {
+    setRenderTrigger(prev => prev + 1);
+  }, [filesStatus]);
+  const areFileTypesExtensionsValid = files => files.some(file => {
+    const fileExtension = file.name.split('.').pop().toLowerCase();
+    if (!fileTypes.includes(fileExtension)) {
+      setFilesStatus([{
+        description: getCopy('wrongFileType').replace('%{fileType}', stringifyFileTypesList(fileTypes, getCopy)),
+        style: 'error'
+      }]);
+      return false;
+    }
+    return true;
+  });
+  const areFileSizesWithinLimit = files => files.some(file => {
+    if (file.size > convertFromMegaByteToByte(maxFileSize)) {
+      setFilesStatus([{
+        description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
+        style: 'error'
+      }]);
+      return false;
+    }
+    return true;
+  });
+  const areMoreFilesUploadedThanAllowed = files => {
+    if (files.length > maxFilesCount) {
+      setFilesStatus([{
+        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
+        style: 'error'
+      }]);
+      return true;
+    }
+    return false;
+  };
+  const handleFilesUpload = async files => {
+    try {
+      const results = await onUpload(files);
+      const currentFilesStatus = files.map((file, index) => {
+        if (results[index].error) {
+          return {
+            description: /*#__PURE__*/_jsx(NotificationContent, {
+              file: file,
+              color: selectComponentTokens(themeTokens, 'notification').color,
+              children: ` ${getCopy('uploadError')} ${results[index].error}.`
+            }),
+            style: 'error'
+          };
+        }
+        return {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('uploadSuccess')}`
+          }),
+          style: 'success',
+          file,
+          onDismiss: () => handleFileDeletion(file)
+        };
+      });
+      setFilesStatus(currentFilesStatus);
+    } catch (error) {
+      setFilesStatus([{
+        description: allowMultipleFiles ? getCopy('problemUploadingMultipleFiles') : getCopy('problemUploading'),
+        style: 'error'
+      }]);
+    }
+  };
+  const handleFileDeletion = async file => {
+    const copyFile = {
+      ...file
+    };
+    try {
+      const result = await onDelete(copyFile);
+      setFilesStatus(prevStatus => {
+        const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
+        return result.error ? [...filteredFilesStatus, {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('uploadSuccess')}`
+          }),
+          style: 'success',
+          file,
+          onDismiss: () => handleFileDeletion(file)
+        }, {
+          description: /*#__PURE__*/_jsx(NotificationContent, {
+            file: file,
+            color: selectComponentTokens(themeTokens, 'notification').color,
+            children: ` ${getCopy('deleteProblem')} ${result.error}.`
+          }),
+          style: 'error',
+          file
+        }] : filteredFilesStatus;
+      });
+    } catch (error) {
+      setFilesStatus([{
+        description: /*#__PURE__*/_jsx(NotificationContent, {
+          file: file,
+          color: selectComponentTokens(themeTokens, 'notification').color,
+          children: ` ${getCopy('problemDeleting')}`
+        }),
+        style: 'error'
+      }]);
+    }
+  };
+  const handleOnChange = async event => {
+    const targetFiles = event.target.files;
+    const files = Array.from(targetFiles);
+    if (files.length === 0) return;
+    if (fileTypes && !areFileTypesExtensionsValid(files)) return;
+    if (maxFileSize && !areFileSizesWithinLimit(files)) return;
+    if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return;
+    await handleFilesUpload(files);
+    if (inputFileRef.current) inputFileRef.current.value = '';
+  };
+  const onFileUploadButtonClick = async () => {
+    if (Platform.OS === 'web') {
+      inputFileRef.current.click();
+    } else {
+      try {
+        const result = await documentPicker.getDocumentAsync({
+          multiple: allowMultipleFiles
+        });
+        if (result) {
+          const files = Array.isArray(result) ? result : [result];
+          if (files.find(file => file.type === 'cancel')) return;
+          const event = {
+            target: {
+              files
+            }
+          };
+          await handleOnChange(event);
+        }
+      } catch (_) {
+        setFilesStatus([{
+          description: allowMultipleFiles ? getCopy('problemUploadingFiles') : getCopy('problemUploading'),
+          style: 'error'
+        }]);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(InputLabel, {
+      label: getCopy('label'),
+      hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
+      hintPosition: "below"
+    }), /*#__PURE__*/_jsx(Spacer, {
+      space: 4
+    }), Platform.OS === 'web' && /*#__PURE__*/_jsx("input", {
+      type: "file",
+      multiple: allowMultipleFiles,
+      ref: inputFileRef,
+      hidden: true,
+      accept: fileTypes && fileTypes.map(type => `.${type}`).join(', '),
+      onChange: handleOnChange
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onFileUploadButtonClick,
+      tokens: selectComponentTokens(themeTokens, 'button'),
+      children: getCopy('buttonLabel')
+    }), filesStatus.length > 0 && /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(StackView, {
+        space: 4,
+        children: filesStatus.map((_ref3, index) => {
+          let {
+            description,
+            style,
+            onDismiss
+          } = _ref3;
+          return /*#__PURE__*/_jsx(Notification, {
+            variant: {
+              style
+            },
+            dismissible: !!onDismiss,
+            onDismiss: onDismiss,
+            tokens: selectComponentTokens(themeTokens, 'notification'),
+            children: description
+          }, `${index.toString()}-${renderTrigger}`);
+        })
+      })]
+    })]
+  });
+});
+FileUpload.displayName = 'FileUpload';
+FileUpload.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('FileUpload'),
+  variant: variantProp.propType,
+  /**
+   * To define the locale of the copy
+   */
+  copy: copyPropTypes,
+  /**
+   * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
+   */
+  fileTypes: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Whether to allow multiple files to be uploaded.
+   */
+  allowMultipleFiles: PropTypes.bool,
+  /**
+   * The maximum file size allowed for upload in MB.
+   */
+  maxFileSize: PropTypes.number,
+  /**
+   * The maximum number of files allowed for upload.
+   */
+  maxFilesCount: PropTypes.number,
+  /**
+   * Callback function called when a file is uploaded.
+   */
+  onUpload: PropTypes.func,
+  /**
+   * Callback function called when a file is deleted
+   */
+  onDelete: PropTypes.func,
+  /**
+   * The document picker to use for mobile
+   */
+  documentPicker: PropTypes.object
+};
+export default FileUpload;

package/lib-module/FileUpload/NotificationContent.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '../Typography';
+
+/**
+ * Renders the content of a notification for a file upload.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Object} props.file - The file object.
+ * @param {string} props.children - The content to be displayed.
+ * @param {string} props.color - The color of the typography.
+ * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
+ * @returns {JSX.Element} The rendered NotificationContent component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const NotificationContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    file,
+    color,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Typography, {
+    tokens: {
+      color
+    },
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: {
+        bold: true
+      },
+      tokens: {
+        color
+      },
+      children: file.name
+    }), children]
+  });
+});
+NotificationContent.displayName = 'NotificationContent';
+NotificationContent.propTypes = {
+  /**
+   * The file object.
+   */
+  file: PropTypes.object,
+  /**
+   * The content to be displayed.
+   */
+  children: PropTypes.string,
+  /**
+   * The color of the typography.
+   */
+  color: PropTypes.string
+};
+export default NotificationContent;

package/lib-module/FileUpload/dictionary.js

@@ -0,0 +1,40 @@
+export default {
+  en: {
+    label: 'Upload files',
+    buttonLabel: 'Choose files',
+    dismissButtonLabel: 'Remove file',
+    wrongFileType: 'The selected file must be a %{fileType}.',
+    allowedFileTypes: 'Allowed file types: %{fileTypes}.',
+    fileTooBig: 'The selected file must be smaller than %{size}MB.',
+    fileIsEmpty: 'The selected file is empty.',
+    problemUploading: 'The selected file could not be uploaded. Try again.',
+    problemDeleting: 'The selected file could not be deleted. Try again.',
+    problemUploadingMultipleFiles: 'The selected files could not be uploaded. Try again.',
+    only: 'only',
+    and: 'and',
+    or: 'or',
+    uploadSuccess: 'uploaded successfully.',
+    uploadError: 'was not uploaded due to',
+    deleteProblem: 'was not deleted due to',
+    tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.'
+  },
+  fr: {
+    label: 'Téléverser les fichiers"',
+    buttonLabel: 'Choisir les fichiers',
+    dismissButtonLabel: 'Supprimer le fichier',
+    wrongFileType: 'Le fichier sélectionné doit être au format %{fileType}.',
+    allowedFileTypes: 'Formats de fichiers autorisés : %{fileTypes}.',
+    fileTooBig: 'Le fichier sélectionné doit être inférieur à %{size}Mo.',
+    fileIsEmpty: 'Le fichier sélectionné est vide.',
+    problemUploading: 'Impossible de téléverser le fichier sélectionné. Veuillez réessayer.',
+    problemDeleting: `Le fichier sélectionné n'a pas pu être supprimé. Réessayez.`,
+    problemUploadingMultipleFiles: `Les fichiers sélectionnés n'ont pas pu être téléchargés. Veuillez réessayer.`,
+    only: 'uniquement',
+    and: 'et',
+    or: 'ou',
+    uploadSuccess: 'téléchargé avec succès.',
+    uploadError: `n'a pas été téléchargé en raison de`,
+    deleteProblem: `n'a pas été supprimé en raison de`,
+    tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`
+  }
+};

package/lib-module/FileUpload/index.js

@@ -0,0 +1,2 @@
+import FileUpload from './FileUpload';
+export default FileUpload;

package/lib-module/Link/TextButton.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { variantProp } from '../utils';
@@ -22,23 +20,15 @@ const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...linkProps
   } = _ref;
   const getTokens = useThemeTokensCallback('Link', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.textButton,
-    children: /*#__PURE__*/_jsx(LinkBase, {
-      onPress: onPress,
-      accessibilityRole: accessibilityRole,
-      tokens: getTokens,
-      ref: ref,
-      ...linkProps,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(LinkBase, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ref: ref,
+    ...linkProps,
+    children: children
   });
 });
-const styles = StyleSheet.create({
-  textButton: {
-    flex: 1
-  }
-});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ...LinkBase.propTypes,

package/lib-module/Modal/ModalContent.js

@@ -135,12 +135,15 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/_jsx(CancelButton, {
-        tokens: {
-          color: cancelButtonColor
-        },
-        onPress: onCancel,
-        children: cancelButtonText
+      }), hasCancelButton ? /*#__PURE__*/_jsx(View, {
+        style: styles.cancelButton,
+        children: /*#__PURE__*/_jsx(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
       }) : null]
     })]
   });
@@ -151,6 +154,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
+  },
+  cancelButton: {
+    flex: 1
   }
 });
 ModalContent.propTypes = {

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import { Portal } from '@gorhom/portal';
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
@@ -15,10 +16,32 @@ const staticStyles = StyleSheet.create({
   positioner: {
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
-    position: 'absolute',
-    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+    zIndex: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    elevation: 10000,
+    // Position on top of all the other overlays, including backdrops and modals,
+    borderRadius: 4,
+    ...Platform.select({
+      web: {
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
+      },
+      default: {
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 1,
+        shadowRadius: 8
+      }
+    })
+  },
+  card: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0
   },
-
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
@@ -31,6 +54,17 @@ const staticStyles = StyleSheet.create({
     opacity: 0
   }
 });
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ...Platform.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+});
 const selectCloseButtonContainerStyles = _ref => {
   let {
     paddingRight,
@@ -41,20 +75,7 @@ const selectCloseButtonContainerStyles = _ref => {
     paddingTop
   };
 };
-const selectPaddingContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  } = _ref2;
-  return {
-    paddingBottom: 35,
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  };
-};
-const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     isReady = false,
@@ -68,22 +89,19 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     variant,
     tokens,
     copy,
-    onClose
-  } = _ref3;
+    onClose,
+    enableFullscreen = false
+  } = _ref2;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
     maxWidth: false
   });
   const containerWidthHeight = {
-    minWidth,
-    minHeight,
-    ...(tokens.maxWidth && maxWidthSize && {
-      maxWidth: maxWidthSize
-    }),
-    ...(maxHeight && maxHeightSize && {
-      maxHeight: maxHeightSize
-    })
+    minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
+    minHeight: maxHeight ? maxHeightSize : minHeight,
+    maxWidth: maxWidthSize,
+    maxHeight: maxHeightSize
   };
   const {
     closeIcon: CloseIconComponent
@@ -97,9 +115,9 @@ const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/_jsx(View, {
       ref: ref,
       onLayout: onLayout,
-      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden],
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
       children: /*#__PURE__*/_jsxs(Card, {
-        tokens: selectPaddingContainerStyles(themeTokens),
+        tokens: staticStyles.card,
         children: [/*#__PURE__*/_jsx(View, {
           style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
           children: /*#__PURE__*/_jsx(IconButton, {
@@ -132,6 +150,7 @@ ModalOverlay.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  enableFullscreen: PropTypes.bool
 };
 export default ModalOverlay;