cozy-ui 104.0.0 → 104.2.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [104.2.0](https://github.com/cozy/cozy-ui/compare/v104.1.0...v104.2.0) (2024-03-12)
+
+
+### Bug Fixes
+
+* **Viewer:** Adjust toolbar spacing and button size ([6a2f8fe](https://github.com/cozy/cozy-ui/commit/6a2f8fe))
+
+
+### Features
+
+* **I18n:** Add useExtendI18n to be able to add locales to existing ones ([ad388b4](https://github.com/cozy/cozy-ui/commit/ad388b4))
+* **I18n:** Expose polyglot, so can be get with useI18n ([7770e7b](https://github.com/cozy/cozy-ui/commit/7770e7b))
+* Update cozy-client to 45.15.0 ([c5f2649](https://github.com/cozy/cozy-ui/commit/c5f2649))
+* **Viewer:** Add Print button, based on print action definition ([ba80052](https://github.com/cozy/cozy-ui/commit/ba80052))
+* **Viewer:** Add ToolbarButtons component ([e0b014c](https://github.com/cozy/cozy-ui/commit/e0b014c))
+* **Viewer:** Add variants on Download/Forward/Sharing buttons ([594b79a](https://github.com/cozy/cozy-ui/commit/594b79a))
+* **Viewer:** Add WebviewIntentProvider ([97f28ff](https://github.com/cozy/cozy-ui/commit/97f28ff))
+* **Viewer:** Expose Toolbarbutton, FooterActionsButtons and ForwardButton ([2b9130f](https://github.com/cozy/cozy-ui/commit/2b9130f))
+* **Viewer:** Modify default buttons on toolbar and footer ([d82013d](https://github.com/cozy/cozy-ui/commit/d82013d))
+* **Viewer:** Remove HOC for locals on no viewer DownloadButton ([edda4a9](https://github.com/cozy/cozy-ui/commit/edda4a9))
+* **Viewer:** Replace toolbar download button by icon button ([6f59eda](https://github.com/cozy/cozy-ui/commit/6f59eda))
+* **Viewer:** Use contact formatting from cozy-client ([eb9c596](https://github.com/cozy/cozy-ui/commit/eb9c596))
+* **Viewer:** Use date metadata qualification formatting from cozy-client ([14bc95d](https://github.com/cozy/cozy-ui/commit/14bc95d))
+* **Viewer:** Use formatMetadataQualification and METADATA_NAMES from ([450fb74](https://github.com/cozy/cozy-ui/commit/450fb74))
+* **Viewer:** Use getMetadataQualificationType from cozy-client ([ae133f4](https://github.com/cozy/cozy-ui/commit/ae133f4))
+* **Viewer:** Use information metadata qualification formatting from cozy-client ([1d106ef](https://github.com/cozy/cozy-ui/commit/1d106ef))
+* **Viewer:** Use other metadata qualification formatting from cozy-client ([98b6510](https://github.com/cozy/cozy-ui/commit/98b6510))
+* **Viewer:** Use useExtendI18n ([d93b97d](https://github.com/cozy/cozy-ui/commit/d93b97d))
+
+# [104.1.0](https://github.com/cozy/cozy-ui/compare/v104.0.0...v104.1.0) (2024-03-12)
+
+
+### Features
+
+* **ListItem:** Add locales for reference tax numbers ([a7d66d2](https://github.com/cozy/cozy-ui/commit/a7d66d2))
+
 # [104.0.0](https://github.com/cozy/cozy-ui/compare/v103.12.0...v104.0.0) (2024-03-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "104.0.0",
+  "version": "104.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -91,7 +91,7 @@
     "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^45.1.0",
+    "cozy-client": "^45.15.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
     "cozy-harvest-lib": "^6.7.3",
@@ -182,7 +182,7 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=45.1.0",
+    "cozy-client": ">=45.15.0",
     "cozy-device-helper": "^2.0.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",

package/react/ListItem/locales/en.json

@@ -32,6 +32,10 @@
         "netSocialAmount": "Net social amount",
         "number": {
           "pay_sheet": "Gross remuneration",
+          "tax_return": "Reference tax number",
+          "tax_notice": "Reference tax number",
+          "real_estate_tax": "Reference tax number",
+          "tax_timetable": "Reference tax number",
           "fine": "Amount of the fine",
           "fidelity_card": "Card number",
           "driver_license": "License number",

package/react/ListItem/locales/fr.json

@@ -32,6 +32,10 @@
         "netSocialAmount": "Montant net social",
         "number": {
           "pay_sheet": "Rémunération brute",
+          "tax_return": "Numéro fiscal de référence",
+          "tax_notice": "Numéro fiscal de référence",
+          "real_estate_tax": "Numéro fiscal de référence",
+          "tax_timetable": "Numéro fiscal de référence",
           "fine": "Montant de l'amende",
           "fidelity_card": "Numéro de la carte",
           "driver_license": "Numéro du permis",

package/react/Viewer/Footer/DownloadButton.jsx

@@ -3,16 +3,21 @@ import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
 
+import { useI18n } from '../../providers/I18n'
 import Icon from '../../Icon'
+import IconButton from '../../IconButton'
 import DownloadIcon from '../../Icons/Download'
 import Button from '../../Buttons'
 import Alerter from '../../deprecated/Alerter'
-import { withViewerLocales } from '../hoc/withViewerLocales'
 
-const DownloadButton = ({ file, t }) => {
+const DownloadButton = ({ file, variant }) => {
   const client = useClient()
+  const { t } = useI18n()
 
-  const handleClick = async file => {
+  const icon = <Icon icon={DownloadIcon} />
+  const label = t('Viewer.download')
+
+  const handleClick = async () => {
     try {
       await client.collection('io.cozy.files').download(file)
     } catch (error) {
@@ -20,19 +25,43 @@ const DownloadButton = ({ file, t }) => {
     }
   }
 
+  if (variant === 'iconButton') {
+    return (
+      <IconButton className="u-white" aria-label={label} onClick={handleClick}>
+        {icon}
+      </IconButton>
+    )
+  }
+
+  if (variant === 'buttonIcon') {
+    return (
+      <Button
+        variant="secondary"
+        label={icon}
+        aria-label={label}
+        onClick={handleClick}
+      />
+    )
+  }
+
   return (
     <Button
       fullWidth
       variant="secondary"
-      startIcon={<Icon icon={DownloadIcon} />}
-      label={t('Viewer.download')}
-      onClick={() => handleClick(file)}
+      startIcon={icon}
+      label={label}
+      onClick={handleClick}
     />
   )
 }
 
 DownloadButton.propTypes = {
-  file: PropTypes.object
+  file: PropTypes.object,
+  variant: PropTypes.oneOf(['default', 'iconButton', 'buttonIcon'])
+}
+
+DownloadButton.defaultProptypes = {
+  variant: 'default'
 }
 
-export default withViewerLocales(DownloadButton)
+export default DownloadButton

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,12 +1,26 @@
-import React, { useMemo, Children, cloneElement, isValidElement } from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 import { makeStyles } from '../../styles'
 import { isValidForPanel } from '../helpers'
+import PrintButton from '../components/PrintButton'
+import { extractChildrenCompByName } from './helpers'
 import BottomSheetContent from './BottomSheetContent'
 
+const FooterButtons = ({
+  file,
+  FooterActionButtonsWithFile = { FooterActionButtonsWithFile }
+}) => {
+  return (
+    <>
+      {FooterActionButtonsWithFile}
+      <PrintButton file={file} variant="button" />
+    </>
+  )
+}
+
 const useStyles = makeStyles(theme => ({
   footer: {
     display: 'flex',
@@ -28,19 +42,11 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
 
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const FooterActionButtons =
-    Children.toArray(children).find(child => {
-      return (
-        child.type.name === 'FooterActionButtons' ||
-        child.type.displayName === 'FooterActionButtons'
-      )
-    }) || null
-
-  const FooterActionButtonsWithFile = isValidElement(FooterActionButtons)
-    ? cloneElement(FooterActionButtons, {
-        file
-      })
-    : null
+  const FooterActionButtonsWithFile = extractChildrenCompByName({
+    children,
+    file,
+    name: 'FooterActionButtons'
+  })
 
   if (isValidForPanel({ file })) {
     return (
@@ -52,7 +58,10 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
         <BottomSheetHeader
           className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}
         >
-          {FooterActionButtonsWithFile}
+          <FooterButtons
+            file={file}
+            FooterActionButtonsWithFile={FooterActionButtonsWithFile}
+          />
         </BottomSheetHeader>
         <BottomSheetContent file={file} isPublic={isPublic} />
       </BottomSheet>
@@ -60,9 +69,16 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
   }
 
   // If `FooterActionButtons` hasn't children
-  if (!FooterActionButtons) return null
+  if (!FooterActionButtonsWithFile) return null
 
-  return <div className={styles.footer}>{FooterActionButtonsWithFile}</div>
+  return (
+    <div className={styles.footer}>
+      <FooterButtons
+        file={file}
+        FooterActionButtonsWithFile={FooterActionButtonsWithFile}
+      />
+    </div>
+  )
 }
 
 FooterContent.propTypes = {

package/react/Viewer/Footer/ForwardButton.jsx

@@ -6,20 +6,23 @@ import { isIOS, isMobileApp } from 'cozy-device-helper'
 
 import { useI18n } from '../../providers/I18n'
 import Icon from '../../Icon'
+import IconButton from '../../IconButton'
 import ReplyIcon from '../../Icons/Reply'
 import ShareIosIcon from '../../Icons/ShareIos'
 import Button from '../../Buttons'
 import Alerter from '../../deprecated/Alerter'
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import { exportFilesNative } from './helpers'
 import { getSharingLink } from 'cozy-client/dist/models/sharing'
 
 const ForwardIcon = isIOS() ? ShareIosIcon : ReplyIcon
 
-const ForwardButton = ({ file, onClick }) => {
+const ForwardButton = ({ file, variant, onClick }) => {
   const { t } = useI18n()
   const client = useClient()
 
+  const icon = <Icon icon={ForwardIcon} />
+  const label = t('Viewer.actions.forward')
+
   const onFileOpen = async file => {
     if (isMobileApp()) {
       try {
@@ -47,13 +50,32 @@ const ForwardButton = ({ file, onClick }) => {
     else onFileOpen(file)
   }
 
+  if (variant === 'iconButton') {
+    return (
+      <IconButton className="u-white" aria-label={label} onClick={handleClick}>
+        {icon}
+      </IconButton>
+    )
+  }
+
+  if (variant === 'buttonIcon') {
+    return (
+      <Button
+        variant="secondary"
+        label={icon}
+        aria-label={label}
+        onClick={handleClick}
+      />
+    )
+  }
+
   return (
     <Button
       fullWidth
       variant="secondary"
-      startIcon={<Icon icon={ForwardIcon} />}
+      startIcon={icon}
       data-testid="openFileButton"
-      label={t('Viewer.actions.forward')}
+      label={label}
       onClick={handleClick}
     />
   )
@@ -61,8 +83,13 @@ const ForwardButton = ({ file, onClick }) => {
 
 ForwardButton.propTypes = {
   file: PropTypes.object.isRequired,
+  variant: PropTypes.oneOf(['default', 'iconButton', 'buttonIcon']),
   onClick: PropTypes.func
 }
 
+ForwardButton.defaultProptypes = {
+  variant: 'default'
+}
+
 export { exportFilesNative }
-export default withViewerLocales(ForwardButton)
+export default ForwardButton

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -7,14 +7,14 @@ import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
 import { shouldBeForwardButton } from './helpers'
 
-const ForwardOrDownloadButton = ({ file }) => {
+const ForwardOrDownloadButton = ({ file, ...props }) => {
   const client = useClient()
 
   const FileActionButton = shouldBeForwardButton(client)
     ? ForwardButton
     : DownloadButton
 
-  return <FileActionButton file={file} />
+  return <FileActionButton file={file} {...props} />
 }
 
 ForwardOrDownloadButton.propTypes = {

package/react/Viewer/Footer/Sharing.jsx

@@ -5,10 +5,28 @@ import { useClient } from 'cozy-client'
 import { ShareModal, ShareButton } from 'cozy-sharing'
 import { SharingProvider } from 'cozy-sharing/dist/SharingProvider'
 
-const Sharing = ({ file }) => {
+import IconButton from '../../IconButton'
+import Icon from '../../Icon'
+import ShareIcon from '../../Icons/Share'
+
+const Sharing = ({ file, variant }) => {
   const client = useClient()
   const [showShareModal, setShowShareModal] = useState(false)
 
+  const SharingButton =
+    variant === 'iconButton' ? (
+      <IconButton className="u-white" onClick={() => setShowShareModal(true)}>
+        <Icon icon={ShareIcon} />
+      </IconButton>
+    ) : (
+      <ShareButton
+        extension="full"
+        useShortLabel
+        docId={file.id}
+        onClick={() => setShowShareModal(true)}
+      />
+    )
+
   return (
     <>
       <SharingProvider
@@ -24,19 +42,19 @@ const Sharing = ({ file }) => {
             onClose={() => setShowShareModal(false)}
           />
         )}
-        <ShareButton
-          extension="full"
-          useShortLabel
-          docId={file.id}
-          onClick={() => setShowShareModal(true)}
-        />
+        {SharingButton}
       </SharingProvider>
     </>
   )
 }
 
 Sharing.propTypes = {
-  file: PropTypes.object
+  file: PropTypes.object,
+  variant: PropTypes.oneOf(['default', 'iconButton'])
+}
+
+Sharing.defaultProptypes = {
+  variant: 'default'
 }
 
 export default Sharing

package/react/Viewer/Footer/helpers.js

@@ -89,3 +89,18 @@ export const mapToAllChildren = (children, cb) => {
     return cb(child)
   })
 }
+
+export const extractChildrenCompByName = ({ children, file, name }) => {
+  const ChildrenComp =
+    Children.toArray(children).find(child => {
+      return child.type.name === name || child.type.displayName === name
+    }) || null
+
+  const ChildrenCompWithFile = isValidElement(ChildrenComp)
+    ? cloneElement(ChildrenComp, {
+        file
+      })
+    : null
+
+  return ChildrenCompWithFile
+}

package/react/Viewer/NoViewer/DownloadButton.jsx

@@ -1,30 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import flow from 'lodash/flow'
 
 import { withClient } from 'cozy-client'
 
+import { useI18n } from '../../providers/I18n'
 import { FileDoctype } from '../../proptypes'
 import Button from '../../deprecated/Button'
 
-import { withViewerLocales } from '../hoc/withViewerLocales'
 import { downloadFile } from '../helpers'
 
-const DownloadButton = ({ t, client, file, url }) => (
-  <Button
-    onClick={() => downloadFile({ client, file, url })}
-    label={t('Viewer.download')}
-  />
-)
+const DownloadButton = ({ client, file, url }) => {
+  const { t } = useI18n()
+
+  return (
+    <Button
+      onClick={() => downloadFile({ client, file, url })}
+      label={t('Viewer.download')}
+    />
+  )
+}
 
 DownloadButton.propTypes = {
-  t: PropTypes.func.isRequired,
   client: PropTypes.object.isRequired,
   file: FileDoctype,
   url: PropTypes.string
 }
 
-export default flow(
-  withClient,
-  withViewerLocales
-)(DownloadButton)
+export default withClient(DownloadButton)

package/react/Viewer/Panel/Qualification.jsx

@@ -1,38 +1,26 @@
 import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { isExpiringSoon } from 'cozy-client/dist/models/paper'
+import {
+  isExpiringSoon,
+  formatMetadataQualification,
+  getMetadataQualificationType
+} from 'cozy-client/dist/models/paper'
 
 import List from '../../List'
 import { withViewerLocales } from '../hoc/withViewerLocales'
-import {
-  formatMetadataQualification,
-  knownDateMetadataNames,
-  knownInformationMetadataNames,
-  knownOtherMetadataNames
-} from '../helpers'
 import ExpirationAlert from '../components/ExpirationAlert'
-import QualificationListItemContact from './QualificationListItemContact'
 import ActionMenuWrapper from './ActionMenuWrapper'
+import QualificationListItemContact from './QualificationListItemContact'
 import QualificationListItemDate from './QualificationListItemDate'
 import QualificationListItemInformation from './QualificationListItemInformation'
 import QualificationListItemOther from './QualificationListItemOther'
 
-const makeQualificationListItemComp = metadataName => {
-  if (knownDateMetadataNames.includes(metadataName)) {
-    return QualificationListItemDate
-  }
-
-  if (knownInformationMetadataNames.includes(metadataName)) {
-    return QualificationListItemInformation
-  }
-
-  if (knownOtherMetadataNames.includes(metadataName)) {
-    if (metadataName === 'contact') {
-      return QualificationListItemContact
-    }
-    return QualificationListItemOther
-  }
+const ComponentFromMetadataQualificationType = {
+  contact: QualificationListItemContact,
+  date: QualificationListItemDate,
+  information: QualificationListItemInformation,
+  other: QualificationListItemOther
 }
 
 const isExpirationAlertHidden = file => {
@@ -77,7 +65,9 @@ const Qualification = ({ file }) => {
       <List className={'u-pv-1'}>
         {formatedMetadataQualification.map((meta, idx) => {
           const { name } = meta
-          const QualificationListItemComp = makeQualificationListItemComp(name)
+          const metadataQualificationType = getMetadataQualificationType(name)
+          const QualificationListItemComp =
+            ComponentFromMetadataQualificationType[metadataQualificationType]
 
           return (
             <QualificationListItemComp

package/react/Viewer/Panel/QualificationListItemContact.jsx

@@ -1,6 +1,11 @@
 import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
+import {
+  getTranslatedNameForContact,
+  formatContactValue
+} from 'cozy-client/dist/models/paper'
+
 import ListItem from '../../ListItem'
 import ListItemSecondaryAction from '../../ListItemSecondaryAction'
 import IconButton from '../../IconButton'
@@ -13,7 +18,7 @@ import { useI18n } from '../../providers/I18n'
 import ActionMenuWrapper from './ActionMenuWrapper'
 
 const QualificationListItemContact = ({ file }) => {
-  const { t } = useI18n()
+  const { lang } = useI18n()
   const actionBtnRef = useRef()
   const [optionFile, setOptionFile] = useState({
     name: '',
@@ -27,7 +32,7 @@ const QualificationListItemContact = ({ file }) => {
       return { name, value }
     })
 
-  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+  const { contacts, isLoadingContacts } = useReferencedContactName(file)
 
   if (isLoadingContacts) {
     return (
@@ -37,7 +42,10 @@ const QualificationListItemContact = ({ file }) => {
     )
   }
 
-  if (!isLoadingContacts && !contactName) {
+  const formattedTitle = getTranslatedNameForContact({ lang })
+  const formattedValue = formatContactValue(contacts)
+
+  if (!isLoadingContacts && !formattedValue) {
     return null
   }
 
@@ -45,13 +53,13 @@ const QualificationListItemContact = ({ file }) => {
     <>
       <ListItem className={'u-ph-2'}>
         <QualificationListItemText
-          primary={t('Viewer.panel.qualification.contact')}
-          secondary={contactName}
+          primary={formattedTitle}
+          secondary={formattedValue}
         />
         <ListItemSecondaryAction>
           <IconButton
             ref={actionBtnRef}
-            onClick={() => toggleActionsMenu('contact', contactName)}
+            onClick={() => toggleActionsMenu('contact', formattedValue)}
           >
             <Icon icon={Dots} />
           </IconButton>

package/react/Viewer/Panel/QualificationListItemDate.jsx

@@ -1,7 +1,12 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { models } from 'cozy-client'
+import {
+  isExpired,
+  isExpiringSoon,
+  getTranslatedNameForDateMetadata,
+  formatDateMetadataValue
+} from 'cozy-client/dist/models/paper'
 
 import ListItem from '../../ListItem'
 import ListItemSecondaryAction from '../../ListItemSecondaryAction'
@@ -12,23 +17,22 @@ import Typography from '../../Typography'
 import ExpirationAnnotation from '../components/ExpirationAnnotation'
 import QualificationListItemText from './QualificationListItemText'
 import { useI18n } from '../../providers/I18n'
-import { formatDate } from '../helpers'
-
-const { isExpired, isExpiringSoon } = models.paper
 
 const QualificationListItemDate = forwardRef(
   ({ file, formatedMetadataQualification, toggleActionsMenu }, ref) => {
-    const { t, f, lang } = useI18n()
+    const { f, lang } = useI18n()
     const { name, value } = formatedMetadataQualification
-    const formattedDate = value
-      ? formatDate({ f, lang, date: value })
-      : t('Viewer.panel.qualification.noInfo')
+    const formattedTitle = getTranslatedNameForDateMetadata(name, { lang })
+    const formattedDate = formatDateMetadataValue(value, {
+      f,
+      lang
+    })
     const isExpirationDate = name === 'expirationDate'
 
     return (
       <ListItem className={'u-pl-2 u-pr-3'}>
         <QualificationListItemText
-          primary={t(`Viewer.panel.qualification.date.title.${name}`)}
+          primary={formattedTitle}
           secondary={
             <>
               <Typography component="span" variant="inherit">