@telus-uds/components-base 1.92.0 → 1.94.0

package/src/FileUpload/FileUpload.jsx

@@ -0,0 +1,396 @@
+import React from 'react'
+import { View, Platform } from 'react-native'
+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'
+
+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, [key, value]) => {
+    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 = React.forwardRef(
+  (
+    {
+      tokens,
+      variant,
+      copy = 'en',
+      fileTypes,
+      allowMultipleFiles = false,
+      maxFileSize,
+      maxFilesCount = 1,
+      onUpload,
+      onDelete,
+      documentPicker,
+      ...rest
+    },
+    ref
+  ) => {
+    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: (
+                <NotificationContent
+                  file={file}
+                  color={selectComponentTokens(themeTokens, 'notification').color}
+                >{` ${getCopy('uploadError')} ${results[index].error}.`}</NotificationContent>
+              ),
+              style: 'error'
+            }
+          }
+          return {
+            description: (
+              <NotificationContent
+                file={file}
+                color={selectComponentTokens(themeTokens, 'notification').color}
+              >{` ${getCopy('uploadSuccess')}`}</NotificationContent>
+            ),
+            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: (
+                    <NotificationContent
+                      file={file}
+                      color={selectComponentTokens(themeTokens, 'notification').color}
+                    >{` ${getCopy('uploadSuccess')}`}</NotificationContent>
+                  ),
+                  style: 'success',
+                  file,
+                  onDismiss: () => handleFileDeletion(file)
+                },
+                {
+                  description: (
+                    <NotificationContent
+                      file={file}
+                      color={selectComponentTokens(themeTokens, 'notification').color}
+                    >{` ${getCopy('deleteProblem')} ${result.error}.`}</NotificationContent>
+                  ),
+                  style: 'error',
+                  file
+                }
+              ]
+            : filteredFilesStatus
+        })
+      } catch (error) {
+        setFilesStatus([
+          {
+            description: (
+              <NotificationContent
+                file={file}
+                color={selectComponentTokens(themeTokens, 'notification').color}
+              >{` ${getCopy('problemDeleting')}`}</NotificationContent>
+            ),
+            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 (
+      <View ref={ref} {...selectProps(rest)}>
+        <InputLabel
+          label={getCopy('label')}
+          hint={
+            fileTypes &&
+            getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes))
+          }
+          hintPosition="below"
+        />
+        <Spacer space={4} />
+        {Platform.OS === 'web' && (
+          <input
+            type="file"
+            multiple={allowMultipleFiles}
+            ref={inputFileRef}
+            hidden={true}
+            accept={fileTypes && fileTypes.map((type) => `.${type}`).join(', ')}
+            onChange={handleOnChange}
+          />
+        )}
+        <Button
+          onClick={onFileUploadButtonClick}
+          tokens={selectComponentTokens(themeTokens, 'button')}
+        >
+          {getCopy('buttonLabel')}
+        </Button>
+        {filesStatus.length > 0 && (
+          <View>
+            <Spacer space={4} />
+            <StackView space={4}>
+              {filesStatus.map(({ description, style, onDismiss }, index) => (
+                <Notification
+                  key={`${index.toString()}-${renderTrigger}`}
+                  variant={{ style }}
+                  dismissible={!!onDismiss}
+                  onDismiss={onDismiss}
+                  tokens={selectComponentTokens(themeTokens, 'notification')}
+                >
+                  {description}
+                </Notification>
+              ))}
+            </StackView>
+          </View>
+        )}
+      </View>
+    )
+  }
+)
+
+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/src/FileUpload/NotificationContent.jsx

@@ -0,0 +1,44 @@
+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.
+ */
+const NotificationContent = React.forwardRef(({ file, color, children }, ref) => {
+  return (
+    <Typography tokens={{ color }} ref={ref}>
+      <Typography variant={{ bold: true }} tokens={{ color }}>
+        {file.name}
+      </Typography>
+      {children}
+    </Typography>
+  )
+})
+
+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/src/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/src/FileUpload/index.js

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

package/src/Link/TextButton.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 import { variantProp } from '../utils'
@@ -14,25 +13,19 @@ const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
-      <View style={styles.textButton}>
-        <LinkBase
-          onPress={onPress}
-          accessibilityRole={accessibilityRole}
-          tokens={getTokens}
-          ref={ref}
-          {...linkProps}
-        >
-          {children}
-        </LinkBase>
-      </View>
+      <LinkBase
+        onPress={onPress}
+        accessibilityRole={accessibilityRole}
+        tokens={getTokens}
+        ref={ref}
+        {...linkProps}
+      >
+        {children}
+      </LinkBase>
     )
   }
 )
-const styles = StyleSheet.create({
-  textButton: {
-    flex: 1
-  }
-})
+
 TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {

package/src/Modal/ModalContent.jsx

@@ -133,9 +133,11 @@ const ModalContent = React.forwardRef(
               </Button>
             )}
             {hasCancelButton ? (
-              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
-                {cancelButtonText}
-              </CancelButton>
+              <View style={styles.cancelButton}>
+                <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
+                  {cancelButtonText}
+                </CancelButton>
+              </View>
             ) : null}
           </View>
         )}
@@ -151,6 +153,9 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
+  },
+  cancelButton: {
+    flex: 1
   }
 })
 

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import { Portal } from '@gorhom/portal'
 import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
@@ -13,8 +13,26 @@ import IconButton from '../IconButton'
 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',
@@ -29,18 +47,23 @@ const staticStyles = StyleSheet.create({
   }
 })
 
+const selectContainerStyle = (enableFullscreen, themeTokens) => ({
+  borderColor: themeTokens.borderColor,
+  ...Platform.select({
+    web: {
+      position: enableFullscreen ? 'fixed' : 'absolute'
+    },
+    default: {
+      position: 'absolute'
+    }
+  })
+})
+
 const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingRight,
   paddingTop
 })
 
-const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight }) => ({
-  paddingBottom: 35,
-  paddingTop,
-  paddingLeft,
-  paddingRight
-})
-
 const ModalOverlay = React.forwardRef(
   (
     {
@@ -56,17 +79,18 @@ const ModalOverlay = React.forwardRef(
       variant,
       tokens,
       copy,
-      onClose
+      onClose,
+      enableFullscreen = false
     },
     ref
   ) => {
     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 } = themeTokens
@@ -83,10 +107,11 @@ const ModalOverlay = React.forwardRef(
             overlaidPosition,
             containerWidthHeight,
             staticStyles.positioner,
-            !isReady && staticStyles.hidden
+            !isReady && staticStyles.hidden,
+            selectContainerStyle(enableFullscreen, themeTokens)
           ]}
         >
-          <Card tokens={selectPaddingContainerStyles(themeTokens)}>
+          <Card tokens={staticStyles.card}>
             <View
               style={[
                 staticStyles.closeButtonContainer,
@@ -127,7 +152,8 @@ ModalOverlay.propTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  enableFullscreen: PropTypes.bool
 }
 
 export default ModalOverlay