cozy-ui 130.8.1 → 130.10.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [130.10.0](https://github.com/cozy/cozy-ui/compare/v130.9.0...v130.10.0) (2025-10-16)
+
+
+### Features
+
+* Add EditBadge component ([47e98d2](https://github.com/cozy/cozy-ui/commit/47e98d2))
+* **EditBadge:** We can now pass props to the main Badge component ([98eb169](https://github.com/cozy/cozy-ui/commit/98eb169))
+* **Utils/React:** Add `AddPropsToChildren` function ([1724619](https://github.com/cozy/cozy-ui/commit/1724619))
+
+# [130.9.0](https://github.com/cozy/cozy-ui/compare/v130.8.1...v130.9.0) (2025-10-16)
+
+
+### Features
+
+* Add AlertProvider to DemoProvider ([1fea901](https://github.com/cozy/cozy-ui/commit/1fea901))
+* Add ShortcutDialog ([8c501eb](https://github.com/cozy/cozy-ui/commit/8c501eb))
+* Remove useless forwardRef ([7b5cf9b](https://github.com/cozy/cozy-ui/commit/7b5cf9b))
+
 ## [130.8.1](https://github.com/cozy/cozy-ui/compare/v130.8.0...v130.8.1) (2025-10-15)
 
 

package/package.json

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

package/react/CozyDialogs/SpecificDialogs/Readme.md

@@ -102,3 +102,29 @@ const onAuthentification = () => {
   )}
 </Variants>
 ```
+
+### ShortcutDialog dialog
+
+⚠️ Must be used within AlertProvider.
+
+```jsx
+import { useState } from 'react'
+
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import { ShortcutDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+
+const [open, setOpen] = useState(isTesting())
+
+;
+
+<DemoProvider>
+  { open && (
+    <ShortcutDialog
+      onClose={() => { setOpen(false)}}
+      onSave={(...args) => { console.log('onSave called with args', args) }}
+    />
+  )}
+  <Buttons onClick={() => { setOpen(true) }} label="Open ShortcutDialog" />
+</DemoProvider>
+```

package/react/CozyDialogs/SpecificDialogs/ShortcutDialog.jsx

@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import {
+  checkAndSaveShortcut,
+  makeHumanReadableFileName
+} from './helpers/shortcuts'
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+import { ConfirmDialog } from '..'
+import Button from '../../Buttons'
+import Stack from '../../Stack'
+import TextField from '../../TextField'
+import { useAlert } from '../../providers/Alert'
+import { useI18n } from '../../providers/I18n'
+
+const ENTER_KEY = 13
+
+const ShortcutDialog = ({ shortcut, onSave, onClose }) => {
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+
+  const initialName = makeHumanReadableFileName(shortcut?.name || '')
+  const initialUrl = shortcut?.url || ''
+  const isEditing = !!shortcut
+
+  const [fileName, setFilename] = useState(initialName)
+  const [url, setUrl] = useState(initialUrl)
+
+  const saveShortcut = () => {
+    checkAndSaveShortcut({
+      fileName,
+      url,
+      isEditing,
+      onSave,
+      onClose,
+      showAlert,
+      t
+    })
+  }
+
+  const handleKeyDown = e => {
+    if (e.keyCode === ENTER_KEY) {
+      saveShortcut()
+    }
+  }
+
+  return (
+    <ConfirmDialog
+      open={true}
+      title={
+        isEditing
+          ? t('shortcut-dialog.edit-title')
+          : t('shortcut-dialog.create-title')
+      }
+      onClose={onClose}
+      content={
+        <Stack>
+          <div>
+            <TextField
+              label={t('shortcut-dialog.url')}
+              value={url}
+              id="shortcuturl"
+              variant="outlined"
+              onChange={e => setUrl(e.target.value)}
+              onKeyDown={e => handleKeyDown(e)}
+              autoComplete="off"
+              fullWidth
+              margin="normal"
+              autoFocus
+            />
+          </div>
+          <div>
+            <TextField
+              label={t('shortcut-dialog.filename')}
+              value={fileName}
+              id="shortcutfilename"
+              variant="outlined"
+              onChange={e => setFilename(e.target.value)}
+              onKeyDown={e => handleKeyDown(e)}
+              autoComplete="off"
+              fullWidth
+              margin="normal"
+            />
+          </div>
+        </Stack>
+      }
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            label={t('shortcut-dialog.cancel')}
+          />
+          <Button
+            variant="primary"
+            label={
+              isEditing
+                ? t('shortcut-dialog.edit')
+                : t('shortcut-dialog.create')
+            }
+            onClick={saveShortcut}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ShortcutDialog.propTypes = {
+  /** An io.cozy.files.shortcut object if we want to prefill fields */
+  shortcut: PropTypes.object,
+  /** A function called when clicking the save button with filename and url */
+  onSave: PropTypes.func,
+  /** A function called when clicking the close button */
+  onClose: PropTypes.func
+}
+
+ShortcutDialog.displayName = 'ShortcutDialog'
+
+export default withSpecificDialogsLocales(ShortcutDialog)

package/react/CozyDialogs/SpecificDialogs/helpers/shortcuts.js

@@ -0,0 +1,61 @@
+export const isValidURL = url => {
+  try {
+    new URL(url)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+export const makeValidUrl = str => {
+  if (isValidURL(str)) return str
+  else if (isValidURL(`https://${str}`)) return `https://${str}`
+  return false
+}
+
+export const makeValidFileName = fileName =>
+  fileName.endsWith('.url') ? fileName : fileName + '.url'
+
+export const makeHumanReadableFileName = fileName =>
+  fileName.endsWith('.url') ? fileName.slice(0, -4) : fileName
+
+export const checkAndSaveShortcut = async ({
+  fileName,
+  url,
+  isEditing,
+  onSave,
+  onClose,
+  showAlert,
+  t
+}) => {
+  if (!fileName || !url) {
+    showAlert({ message: t('shortcut-dialog.needs-info'), severity: 'error' })
+    return
+  }
+
+  const validFileName = makeValidFileName(fileName)
+
+  const validURL = makeValidUrl(url)
+
+  if (!validURL) {
+    showAlert({
+      message: t('shortcut-dialog.url-bad-format'),
+      severity: 'error'
+    })
+    return
+  }
+  try {
+    onSave(validFileName, validURL)
+
+    showAlert({
+      message: isEditing
+        ? t('shortcut-dialog.edited')
+        : t('shortcut-dialog.created'),
+      severity: 'success'
+    })
+  } catch {
+    showAlert({ message: t('shortcut-dialog.errored'), severity: 'error' })
+  }
+
+  onClose()
+}

package/react/CozyDialogs/SpecificDialogs/index.jsx

@@ -1,3 +1,4 @@
 export { default as AllowLocationDialog } from './AllowLocationDialog'
 export { default as InstallFlagshipAppDialog } from './InstallFlagshipAppDialog'
 export { default as AuthentificationDialog } from './AuthentificationDialog'
+export { default as ShortcutDialog } from './ShortcutDialog'

package/react/CozyDialogs/SpecificDialogs/locales/en.json

@@ -23,5 +23,19 @@
       "invalid_password": "Incorrect password, try again.",
       "server_error": "Something went wrong with the server. Please, reload the page."
     }
+  },
+  "shortcut-dialog": {
+    "create-title": "Create a shortcut",
+    "edit-title": "Modify a shortcut",
+    "filename": "Shortcut name",
+    "url": "URL",
+    "cancel": "Cancel",
+    "create": "Create",
+    "edit": "Edit",
+    "created": "The shortcut has been created",
+    "edited": "The shortcut has been modified",
+    "errored": "An error occurred",
+    "needs-info": "A shortcut needs a name and a URL",
+    "url-bad-format": "The entered URL is not in the correct format"
   }
 }

package/react/CozyDialogs/SpecificDialogs/locales/fr.json

@@ -23,5 +23,19 @@
       "invalid_password": "Mot de passe incorrect, essayer à nouveau.",
       "server_error": "Une erreur s'est produite. Merci de recharger la page."
     }
+  },
+  "shortcut-dialog": {
+    "create-title": "Créer un raccourci",
+    "edit-title": "Modifier un raccourci",
+    "filename": "Nom du raccourci",
+    "url": "URL",
+    "cancel": "Annuler",
+    "create": "Créer",
+    "edit": "Modifier",
+    "created": "Le raccourci a été créé",
+    "edited": "Le raccourci a été modifié",
+    "errored": "Une erreur s'est produite",
+    "needs-info": "Un raccourci a besoin d'un nom et d'une URL",
+    "url-bad-format": "L'URL saisie n'est pas dans le bon format"
   }
 }

package/react/CozyDialogs/SpecificDialogs/locales/ru.json

@@ -23,5 +23,19 @@
       "invalid_password": "Неверный пароль, попробуйте еще раз.",
       "server_error": "Что-то пошло не так с сервером. Пожалуйста, перезагрузите страницу."
     }
+  },
+  "shortcut-dialog": {
+    "create-title": "Создать ярлык",
+    "edit-title": "Изменить ярлык",
+    "filename": "Имя ярлыка",
+    "url": "URL",
+    "cancel": "Отменить",
+    "create": "Создать",
+    "edit": "Изменить",
+    "created": "Ярлык был создан",
+    "edited": "Ярлык был изменен",
+    "errored": "Произошла ошибка",
+    "needs-info": "Для ярлыка нужны имя и URL",
+    "url-bad-format": "Введённый URL имеет неверный формат"
   }
-}
+}

package/react/CozyDialogs/SpecificDialogs/locales/vi.json

@@ -23,5 +23,19 @@
       "invalid_password": "Mật khẩu không chính xác, hãy thử lại.",
       "server_error": "Có lỗi xảy ra với máy chủ. Vui lòng tải lại trang."
     }
+  },
+  "shortcut-dialog": {
+    "create-title": "Tạo lối tắt",
+    "edit-title": "Chỉnh sửa lối tắt",
+    "filename": "Tên lối tắt",
+    "url": "URL",
+    "cancel": "Hủy",
+    "create": "Tạo",
+    "edit": "Chỉnh sửa",
+    "created": "Lối tắt đã được tạo",
+    "edited": "Lối tắt đã được chỉnh sửa",
+    "errored": "Đã xảy ra lỗi",
+    "needs-info": "Lối tắt cần có tên và URL",
+    "url-bad-format": "URL đã nhập không đúng định dạng"
   }
-}
+}

package/react/CozyDialogs/index.jsx

@@ -12,5 +12,6 @@ export { default as TopAnchoredDialog } from './TopAnchoredDialog'
 export {
   AllowLocationDialog,
   InstallFlagshipAppDialog,
-  AuthentificationDialog
+  AuthentificationDialog,
+  ShortcutDialog
 } from './SpecificDialogs'

package/react/EditBadge/EditMenu.jsx

@@ -0,0 +1,102 @@
+import React, { useRef } from 'react'
+
+import { handleDelete, handleUpload } from './helpers'
+import { locales } from './locales'
+import Icon from '../Icon'
+import CameraIcon from '../Icons/Camera'
+import TrashIcon from '../Icons/Trash'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Menu from '../Menu'
+import MenuItem from '../MenuItem'
+import { useAlert } from '../providers/Alert'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const EditMenu = ({
+  anchorRef,
+  status,
+  showMenu,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  onUpload,
+  onDelete
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+
+  const fileInputRef = useRef(null)
+
+  return (
+    <>
+      <input
+        className="u-dn"
+        type="file"
+        ref={fileInputRef}
+        accept="image/*"
+        onChange={event =>
+          handleUpload({
+            event,
+            t,
+            fileInputRef,
+            status,
+            onUpload,
+            setStatus,
+            setTimestamp,
+            setShowMenu,
+            showAlert
+          })
+        }
+      />
+      {showMenu && (
+        <Menu
+          open
+          anchorEl={anchorRef}
+          getContentAnchorEl={null}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'left'
+          }}
+          onClose={() => setShowMenu(false)}
+        >
+          <MenuItem
+            onClick={() => {
+              setShowMenu(false)
+              fileInputRef.current.click() // triggers onChange of the input
+            }}
+          >
+            <ListItemIcon>
+              <Icon icon={CameraIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.update')} />
+          </MenuItem>
+          <MenuItem
+            onClick={() =>
+              handleDelete({
+                t,
+                status,
+                onDelete,
+                setShowMenu,
+                setStatus,
+                setTimestamp,
+                showAlert
+              })
+            }
+          >
+            <ListItemIcon>
+              <Icon icon={TrashIcon} />
+            </ListItemIcon>
+            <ListItemText primary={t('EditBadge.menu.delete')} />
+          </MenuItem>
+        </Menu>
+      )}
+    </>
+  )
+}
+
+export default EditMenu

package/react/EditBadge/Readme.md

@@ -0,0 +1,22 @@
+⚠️ Must be used within `AlertProvider`.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import EditBadge from 'cozy-ui/transpiled/react/EditBadge'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+
+;
+
+<DemoProvider>
+  <AlertProvider>
+    <EditBadge
+      src={timestamp => ""}
+      onUpload={file => {}}
+      onDelete={() => {}}
+    >
+      <Avatar size={94} alt="Avatar" />
+    </EditBadge>
+  </AlertProvider>
+</DemoProvider>
+```

package/react/EditBadge/StatusWrapper.jsx

@@ -0,0 +1,32 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Spinner from '../Spinner'
+import { AddPropsToChildren } from '../utils/react'
+
+const StatusWrapper = ({ src, status, setStatus, timestamp, children }) => {
+  if (status === 'LOADING') {
+    return (
+      <>
+        {AddPropsToChildren(children, childProps => ({
+          className: cx(childProps.className, 'u-o-50')
+        }))}
+        <Spinner className="u-m-0" middle size="large" />
+      </>
+    )
+  }
+
+  if (status === 'PRESENT') {
+    return AddPropsToChildren(children, () => ({
+      key: timestamp,
+      src,
+      onError: () => setStatus('ABSENT')
+    }))
+  }
+
+  return AddPropsToChildren(children, () => ({
+    key: timestamp
+  }))
+}
+
+export default StatusWrapper

package/react/EditBadge/helpers.js

@@ -0,0 +1,102 @@
+const MAX_FILE_SIZE = 5 * 1024 * 1024
+const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+
+export const handleUpload = async ({
+  event,
+  t,
+  fileInputRef,
+  status,
+  onUpload,
+  setStatus,
+  setTimestamp,
+  setShowMenu,
+  showAlert
+}) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (file.size > MAX_FILE_SIZE) {
+    showAlert({
+      message: t('EditBadge.upload.file-size'),
+      severity: 'error'
+    })
+    return
+  }
+
+  if (!ALLOWED_TYPES.includes(file.type)) {
+    showAlert({
+      message: t('EditBadge.upload.file-type'),
+      severity: 'error'
+    })
+    return
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+
+  const previouStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onUpload(file)
+    clearTimeout(timeoutId)
+
+    const newTimestamp = Date.now()
+    setStatus('PRESENT')
+    setTimestamp(newTimestamp)
+    showAlert({
+      message: t('EditBadge.upload.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previouStatus)
+    showAlert({
+      message: t('EditBadge.upload.error'),
+      severity: 'error'
+    })
+  } finally {
+    setShowMenu(false)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+}
+
+export const handleDelete = async ({
+  t,
+  status,
+  onDelete,
+  setShowMenu,
+  setStatus,
+  setTimestamp,
+  showAlert
+}) => {
+  setShowMenu(false)
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 30000)
+  const previousStatus = status
+  setStatus('LOADING')
+
+  try {
+    await onDelete()
+    clearTimeout(timeoutId)
+
+    const checkTimestamp = Date.now()
+
+    setStatus('ABSENT')
+    setTimestamp(checkTimestamp)
+    showAlert({
+      message: t('EditBadge.delete.success'),
+      severity: 'success'
+    })
+  } catch (error) {
+    clearTimeout(timeoutId)
+    setStatus(previousStatus)
+    showAlert({
+      message: t('EditBadge.delete.error'),
+      severity: 'error'
+    })
+  }
+}

package/react/EditBadge/index.jsx

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import EditMenu from './EditMenu'
+import StatusWrapper from './StatusWrapper'
+import Badge from '../Badge'
+import Button from '../Buttons'
+import Icon from '../Icon'
+import PenIcon from '../Icons/Pen'
+
+const EditBadge = ({
+  src,
+  onUpload,
+  onDelete,
+  anchorOrigin,
+  children,
+  ...props
+}) => {
+  const [showMenu, setShowMenu] = useState(false)
+  const [status, setStatus] = useState('PRESENT') // PRESENT || ABSENT || LOADING
+  const [timestamp, setTimestamp] = useState(Date.now())
+
+  const menuAnchorRef = useRef(null)
+
+  return (
+    <Badge
+      {...props}
+      anchorOrigin={anchorOrigin}
+      badgeContent={
+        <>
+          <Button
+            ref={menuAnchorRef}
+            component="div"
+            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            classes={{ label: 'u-flex u-w-auto' }}
+            style={{
+              outline: '4px solid var(--paperBackgroundColor)'
+            }}
+            label={<Icon icon={PenIcon} />}
+            size="small"
+            onClick={() => setShowMenu(v => !v)}
+          />
+          <EditMenu
+            anchorRef={menuAnchorRef.current}
+            status={status}
+            showMenu={showMenu}
+            setShowMenu={setShowMenu}
+            setStatus={setStatus}
+            setTimestamp={setTimestamp}
+            onUpload={onUpload}
+            onDelete={onDelete}
+          />
+        </>
+      }
+    >
+      <StatusWrapper
+        src={src(timestamp)}
+        status={status}
+        setStatus={setStatus}
+        timestamp={timestamp}
+      >
+        {children}
+      </StatusWrapper>
+    </Badge>
+  )
+}
+
+EditBadge.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  }
+}
+
+EditBadge.propTypes = {
+  src: PropTypes.func.isRequired,
+  onUpload: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
+}
+
+export default EditBadge