@telus-uds/components-base 1.93.0 → 1.95.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/Icon/IconText.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, View } from 'react-native'
-
+import { Platform, View, Text, StyleSheet } from 'react-native'
 import Icon, { iconComponentPropTypes } from './Icon'
 import { getStackedContent } from '../StackView'
 import { spacingProps } from '../utils'
@@ -46,6 +45,18 @@ const IconText = React.forwardRef(
     const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
     const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
+    const adjustedContainerWithPosition = (
+      <View style={staticStyles.adjustedContainer}>{adjustedContainer}</View>
+    )
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text>
+          {children} {adjustedContainerWithPosition}
+        </Text>
+      )
+    }
+
     return getStackedContent(
       iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
@@ -62,9 +73,9 @@ IconText.propTypes = {
    */
   space: spacingProps.types.spacingValue,
   /**
-   * Whether the icon should be to the left of the content or the right of the content.
+   * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
@@ -83,4 +94,10 @@ IconText.propTypes = {
   /* eslint-enable react/no-unused-prop-types */
 }
 
+const staticStyles = StyleSheet.create({
+  adjustedContainer: {
+    position: 'absolute'
+  }
+})
+
 export default IconText

package/src/Link/LinkBase.jsx

@@ -240,9 +240,9 @@ LinkBase.propTypes = {
    */
   icon: PropTypes.elementType,
   /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.

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/Modal.jsx

@@ -147,7 +147,7 @@ const Modal = React.forwardRef(
       if (Platform.OS === 'web') {
         const handleFocus = () => {
           // If the focus is on the last item of the web modal container, move it to the close button
-          if (document.activeElement === focusTrapRef.current) {
+          if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
             closeButtonRef.current.focus()
           }
           return undefined

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
   }
 })