cozy-ui 117.0.0 → 117.2.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [117.2.0](https://github.com/cozy/cozy-ui/compare/v117.1.0...v117.2.0) (2025-01-30)
+
+
+### Bug Fixes
+
+* **NestedSelect:** Show now result according to searchResult ([debae36](https://github.com/cozy/cozy-ui/commit/debae36))
+
+
+### Features
+
+* **NestedSelect:** Add delay on search result ([fc57533](https://github.com/cozy/cozy-ui/commit/fc57533))
+* **NestedSelect:** Replace Input by SearchBar for search options ([cf01651](https://github.com/cozy/cozy-ui/commit/cf01651))
+* **QualificationModal:** Add search bar ([fab5baa](https://github.com/cozy/cozy-ui/commit/fab5baa))
+
+# [117.1.0](https://github.com/cozy/cozy-ui/compare/v117.0.0...v117.1.0) (2025-01-21)
+
+
+### Features
+
+* Add Download and Add/Remove favorites actions ([6e4bca4](https://github.com/cozy/cozy-ui/commit/6e4bca4))
+
 # [117.0.0](https://github.com/cozy/cozy-ui/compare/v116.0.0...v117.0.0) (2025-01-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "117.0.0",
+  "version": "117.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/addToFavorites.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import StarOutlineIcon from '../../Icons/StarOutline'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'addToFavorites'
+
+  return Component
+}
+
+export const addToFavorites = ({ showAlert }) => {
+  const { t } = getActionsI18n()
+  const icon = StarOutlineIcon
+  const label = t('favorites.add.label')
+
+  return {
+    name: 'addToFavorites',
+    icon,
+    label,
+    displayCondition: docs =>
+      docs.length > 0 && docs.every(doc => !doc.cozyMetadata?.favorite),
+    Component: makeComponent(label, icon),
+    action: async (docs, { client }) => {
+      try {
+        for (const doc of docs) {
+          await client.save({
+            ...doc,
+            cozyMetadata: {
+              ...doc.cozyMetadata,
+              favorite: true
+            }
+          })
+        }
+
+        const { filename } = splitFilename(docs[0])
+        showAlert({
+          message: t('favorites.add.success', {
+            filename,
+            smart_count: docs.length
+          }),
+          severity: 'success'
+        })
+      } catch (error) {
+        showAlert({ message: t('favorites.error'), severity: 'error' })
+      }
+    }
+  }
+}

package/react/ActionsMenu/Actions/download.js

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+
+import { downloadFile } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import DownloadIcon from '../../Icons/Download'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'download'
+
+  return Component
+}
+
+export const download = ({ encryptedUrl }) => {
+  const { t } = getActionsI18n()
+  const icon = DownloadIcon
+  const label = t('download')
+
+  return {
+    name: 'download',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    action: (docs, { client, webviewIntent }) =>
+      downloadFile({ client, file: docs[0], url: encryptedUrl, webviewIntent })
+  }
+}

package/react/ActionsMenu/Actions/index.js

@@ -5,6 +5,9 @@ export { smsTo } from './smsTo'
 export { call } from './call'
 export { emailTo } from './emailTo'
 export { print } from './print'
+export { download } from './download'
+export { addToFavorites } from './addToFavorites'
+export { removeFromFavorites } from './removeFromFavorites'
 export { viewInContacts } from './viewInContacts'
 export { viewInDrive } from './viewInDrive'
 export { copyToClipboard } from './copyToClipboard'

package/react/ActionsMenu/Actions/locales/en.json

@@ -5,6 +5,18 @@
   "emailTo": "Send an email",
   "smsTo": "Send a message",
   "print": "Print",
+  "download": "Download",
+  "favorites": {
+    "add": {
+      "label": "Add to favorites",
+      "success": "%{filename} has been added to favorites |||| These items have been added to favorites"
+    },
+    "remove": {
+      "label": "Remove from favorites",
+      "success": "%{filename} has been removed from favorites |||| These items have been removed from favorites"
+    },
+    "error": "An error occurred, please try again."
+  },
   "others": "Others",
   "editAttribute": "Edit attribute",
   "copyToClipboard": {

package/react/ActionsMenu/Actions/locales/fr.json

@@ -5,6 +5,18 @@
   "emailTo": "Envoyer un e-mail",
   "smsTo": "Envoyer un message",
   "print": "Imprimer",
+  "download": "Télécharger",
+  "favorites": {
+    "add": {
+      "label": "Ajouter aux favoris",
+      "success": "%{filename} a été ajouté aux favoris |||| Ces éléments ont été ajoutés aux favoris"
+    },
+    "remove": {
+      "label": "Retirer des favoris",
+      "success": "%{filename} a été retiré des favoris |||| Ces éléments ont été retirés des favoris"
+    },
+    "error": "Une erreur est survenue, merci de réessayer."
+  },
   "others": "Autres",
   "editAttribute": "Editer l'attribut",
   "copyToClipboard": {

package/react/ActionsMenu/Actions/removeFromFavorites.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import StarIcon from '../../Icons/Star'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'removeFromFavorites'
+
+  return Component
+}
+
+export const removeFromFavorites = ({ showAlert }) => {
+  const { t } = getActionsI18n()
+  const icon = StarIcon
+  const label = t('favorites.remove.label')
+
+  return {
+    name: 'removeFromFavorites',
+    icon,
+    label,
+    displayCondition: docs =>
+      docs.length > 0 && docs.every(doc => doc.cozyMetadata?.favorite),
+    Component: makeComponent(label, icon),
+    action: async (docs, { client }) => {
+      try {
+        for (const doc of docs) {
+          await client.save({
+            ...doc,
+            cozyMetadata: {
+              ...doc.cozyMetadata,
+              favorite: false
+            }
+          })
+        }
+
+        const { filename } = splitFilename(docs[0])
+        showAlert({
+          message: t('favorites.success.remove', {
+            filename,
+            smart_count: docs.length
+          }),
+          severity: 'success'
+        })
+      } catch (error) {
+        showAlert({ message: t('favorites.error'), severity: 'error' })
+      }
+    }
+  }
+}

package/react/NestedSelect/NestedSelect.jsx

@@ -1,13 +1,14 @@
 import cx from 'classnames'
+import debounce from 'lodash/debounce'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useMemo } from 'react'
 
 import ItemRow from './ItemRow'
 import { makeHistory } from './helpers'
 import styles from './styles.styl'
-import Input from '../Input'
 import List from '../List'
+import SearchBar from '../SearchBar'
 import Typography from '../Typography'
 
 export { ItemRow }
@@ -35,9 +36,13 @@ const NestedSelect = ({
   const innerRef = useRef()
   const [state, setState] = useState({
     history: makeHistory(options, canSelectParent),
-    searchValue: '',
-    searchResult: []
+    searchValue: ''
   })
+  const [searchResult, setSearchResult] = useState(null)
+  const delayedSetSearchResult = useMemo(
+    () => debounce(setSearchResult, 250),
+    [setSearchResult]
+  )
 
   const handleBack = () => {
     const [item, ...newHistory] = state.history
@@ -70,16 +75,21 @@ const NestedSelect = ({
     if (onSearch) {
       const searchValue = ev.target.value
       const searchResult = onSearch(searchValue)
-      setState(state => ({ ...state, searchValue, searchResult }))
+      setState(state => ({ ...state, searchValue }))
+      delayedSetSearchResult(searchResult)
     }
   }
 
+  const onClear = () => {
+    setState(state => ({ ...state, searchValue: '' }))
+    delayedSetSearchResult(null)
+  }
+
   const current = state.history[0]
   const children = current.children || []
   const level = state.history.length - 1
   const parentItem = transformParentItem(omit(current, 'children'))
 
-  const hasSearchResult = state.searchValue?.length > 0
   const isSelectedWithLevel = item => isSelected(item, level)
   const currentTitle = current.title || title
 
@@ -117,16 +127,17 @@ const NestedSelect = ({
               [styles['search-container--without-title']]: !currentTitle
             })}
           >
-            <Input
+            <SearchBar
               placeholder={searchOptions.placeholderSearch}
-              onChange={onChange}
               value={state.searchValue}
+              onChange={onChange}
+              onClear={onClear}
             />
           </div>
         )}
 
-        {hasSearchResult ? (
-          state.searchResult.length === 0 ? (
+        {searchResult ? (
+          searchResult.length === 0 ? (
             <Typography
               variant="body1"
               className="u-flex u-flex-justify-center u-mb-1 "
@@ -134,14 +145,14 @@ const NestedSelect = ({
               {searchOptions.noDataLabel}
             </Typography>
           ) : (
-            state.searchResult.map((item, index) => (
+            searchResult.map((item, index) => (
               <ItemRow
                 radioPosition={radioPosition}
                 key={item.key || item.title}
                 item={item}
                 onClick={handleClickItem}
                 isSelected={isSelectedWithLevel(item)}
-                isLast={index === state.searchResult.length - 1}
+                isLast={index === searchResult.length - 1}
                 ellipsis={ellipsis}
                 noDivider={noDivider}
               />

package/react/NestedSelect/NestedSelect.md

@@ -155,14 +155,7 @@ const InteractiveExample = () => {
     onSearch: (value) => {
       const options = makeOptions({ withHeaders })
       return options.children.filter(o => o.description && o.description.toLowerCase().includes(value.toLowerCase()))
-    },
-    displaySearchResultItem: item =>
-    <ListItem key={item.id} dense button divider>
-      <ListItemText
-        primary={item.description}
-        ellipsis
-      />
-    </ListItem>
+    }
   })
 
   const handleSelect = item => {

package/react/NestedSelect/NestedSelect.spec.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import '@testing-library/jest-dom'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 
 import NestedSelect from './NestedSelect'
-import { BreakpointsProvider } from '../providers/Breakpoints'
+import DemoProvider from '../providers/DemoProvider'
 
 describe('NestedSelect', () => {
   const makeOption = text => ({
@@ -40,7 +40,7 @@ describe('NestedSelect', () => {
     const options = makeOptions(itemSelected)
 
     return render(
-      <BreakpointsProvider>
+      <DemoProvider>
         <NestedSelect
           canSelectParent={canSelectParent}
           options={options}
@@ -49,7 +49,7 @@ describe('NestedSelect', () => {
           onCancel={onCancel}
           searchOptions={searchOptions}
         />
-      </BreakpointsProvider>
+      </DemoProvider>
     )
   }
 
@@ -159,9 +159,11 @@ describe('NestedSelect', () => {
       const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
-      fireEvent.change(searchInput, { target: { value: 'cozy' } })
-      const noData = getByText('No Data Found')
-      expect(noData).toBeTruthy()
+      waitFor(() => {
+        fireEvent.change(searchInput, { target: { value: 'cozy' } })
+        const noData = getByText('No Data Found')
+        expect(noData).toBeTruthy()
+      })
     })
 
     it('should show search results', () => {
@@ -186,11 +188,12 @@ describe('NestedSelect', () => {
       const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
-      fireEvent.change(searchInput, { target: { value: 'cozy' } })
-
-      expect(queryByText('cozy 1')).toBeTruthy()
-      expect(queryByText('cozy 1')).toBeTruthy()
-      expect(queryByText('anything')).toBeFalsy()
+      waitFor(() => {
+        fireEvent.change(searchInput, { target: { value: 'cozy' } })
+        expect(queryByText('cozy 1')).toBeTruthy()
+        expect(queryByText('cozy 1')).toBeTruthy()
+        expect(queryByText('anything')).toBeFalsy()
+      })
     })
   })
 })

package/react/NestedSelect/styles.styl

@@ -13,5 +13,5 @@
     top -0.5rem
 
 .search-container--without-title
-    margin-right 5rem
+    margin-right 1rem
     margin-top 0.5rem

package/react/QualificationModal/helpers.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
+import { getBoundT } from 'cozy-client/dist/models/document/locales'
+
+import Icon from '../Icon'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import QualificationIconStack from '../QualificationIconStack'
+
+export const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIconStack />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIconStack theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={FileTypeNoteIcon} size={64} />
+          ) : (
+            <QualificationIconStack qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+export const searchOptionsFn = (options, value) => {
+  const deepOptions = options.children
+    .flatMap(child => child.children)
+    .reduce((acc, curr) => {
+      if (!!curr && !acc.some(el => el.id === curr.id)) {
+        acc.push(curr)
+      }
+      return acc
+    }, [])
+
+  return deepOptions.filter(deepOption =>
+    deepOption.title.toLowerCase().includes(value.toLowerCase())
+  )
+}
+
+export const makeSearchOptions = ({ options, title, noDataLabel, t }) => {
+  return {
+    placeholderSearch: title || t('QualificationModal.title'),
+    noDataLabel: noDataLabel || t('QualificationModal.noDataLabel'),
+    onSearch: value => searchOptionsFn(options, value)
+  }
+}

package/react/QualificationModal/helpers.spec.js

@@ -0,0 +1,32 @@
+import { searchOptionsFn } from './helpers'
+
+describe('searchOptionsFn', () => {
+  it('should return only the uniq good result', () => {
+    const options = {
+      children: [
+        { id: 'none', title: 'None' },
+        {
+          id: 'theme1',
+          title: 'Identity',
+          children: [
+            { id: '01', title: 'Identity Photo' },
+            { id: '02', title: 'ID card' }
+          ]
+        },
+        {
+          id: 'theme2',
+          title: 'Family',
+          children: [
+            { id: '03', title: 'Family record book' },
+            { id: '04', title: 'Birth certificate' },
+            { id: '01', title: 'Identity Photo' }
+          ]
+        }
+      ]
+    }
+
+    const res = searchOptionsFn(options, 'photo')
+
+    expect(res).toStrictEqual([{ id: '01', title: 'Identity Photo' }])
+  })
+})

package/react/QualificationModal/index.jsx

@@ -2,54 +2,30 @@ import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 
 import { useClient } from 'cozy-client'
-import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
-import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
-import { getBoundT } from 'cozy-client/dist/models/document/locales'
 import { isSupportedQualification } from 'cozy-client/dist/models/document/qualification'
 
+import { makeOptions, makeSearchOptions } from './helpers'
 import { locales } from './locales'
-import Icon from '../Icon'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
 import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
-import QualificationIconStack from '../QualificationIconStack'
 import { useI18n, useExtendI18n } from '../providers/I18n'
 
-const makeOptions = lang => {
-  const qualifT = getBoundT(lang)
-
-  return {
-    children: [
-      {
-        id: 'none',
-        title: qualifT('Scan.themes.none'),
-        icon: <QualificationIconStack />
-      },
-      ...themesList.map(theme => ({
-        id: theme.id,
-        title: qualifT(`Scan.themes.${theme.label}`),
-        icon: <QualificationIconStack theme={theme.label} />,
-        children: theme.items.map(item => ({
-          id: item.label,
-          item,
-          title: qualifT(`Scan.items.${item.label}`),
-          icon: isQualificationNote(item) ? (
-            <Icon icon={FileTypeNoteIcon} size={64} />
-          ) : (
-            <QualificationIconStack qualification={item.label} />
-          )
-        }))
-      }))
-    ]
-  }
-}
-
-const QualificationModal = ({ file, title, onClose }) => {
+const QualificationModal = ({ file, title, noDataLabel, onClose }) => {
   useExtendI18n(locales)
   const client = useClient()
   const { t, lang } = useI18n()
 
   const qualificationLabel = file.metadata?.qualification?.label
   const options = useMemo(() => makeOptions(lang), [lang])
+  const searchOptions = useMemo(
+    () =>
+      makeSearchOptions({
+        options,
+        title,
+        noDataLabel,
+        t
+      }),
+    [options, title, noDataLabel, t]
+  )
 
   const isSelected = ({ id, item }) => {
     return isSupportedQualification(qualificationLabel)
@@ -74,11 +50,11 @@ const QualificationModal = ({ file, title, onClose }) => {
 
   return (
     <NestedSelectResponsive
-      title={title || t('QualificationModal.title')}
       options={options}
       noDivider
       document={file}
       isSelected={isSelected}
+      searchOptions={searchOptions}
       onSelect={handleClick}
       onClose={onClose}
     />
@@ -88,6 +64,7 @@ const QualificationModal = ({ file, title, onClose }) => {
 QualificationModal.propTypes = {
   file: PropTypes.object,
   title: PropTypes.string,
+  noDataLabel: PropTypes.string,
   onClose: PropTypes.func
 }
 

package/react/QualificationModal/locales/en.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Document type"
+    "title": "Document type",
+    "noDataLabel": "No result"
   }
 }

package/react/QualificationModal/locales/fr.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Type de document"
+    "title": "Type de document",
+    "noDataLabel": "Aucun résultat"
   }
 }