cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/ListItem/ExpandedAttributes/helpers.js

@@ -1,214 +0,0 @@
-import get from 'lodash/get'
-
-import {
-  getTranslatedNameForInformationMetadata,
-  KNOWN_INFORMATION_METADATA_NAMES,
-  KNOWN_DATE_METADATA_NAMES,
-  formatInformationMetadataValue,
-  formatDateMetadataValue
-} from 'cozy-client/dist/models/paper'
-
-export const normalizeExpandedAttribute = attr =>
-  attr
-    .replaceAll(':', '.')
-    .replace('flexsearchProps.', '')
-    .replace('translated.', '')
-
-// attributes not considered as specific expanded attributes
-// and then fallback to default expanded attributes
-export const notExpandedAttributes = {
-  'io.cozy.contacts': ['fullname', 'civility', 'note'],
-  'io.cozy.files': [
-    ...KNOWN_DATE_METADATA_NAMES.map(x => `metadata.${x}`),
-    'metadata.noticePeriod',
-    'name',
-    'flexsearchProps:translated:qualificationLabel',
-    'flexsearchProps:translated:driverLicense',
-    'flexsearchProps:translated:paymentProofFamilyAllowance',
-    'flexsearchProps:translated:caf',
-    'flexsearchProps:translated:vehicleRegistration',
-    'flexsearchProps:translated:nationalIdCard',
-    'flexsearchProps:translated:bankDetails',
-    'flexsearchProps:translated:paySheet',
-    'flexsearchProps:translated:passport',
-    'flexsearchProps:translated:residencePermit'
-  ]
-}
-
-// attributes that we want to display if no attribute of the document is related to the search
-export const defaultExpandedAttributes = {
-  'io.cozy.contacts': ['email', 'phone', 'address', 'birthday'],
-  'io.cozy.files': [
-    ...KNOWN_INFORMATION_METADATA_NAMES.map(x => `metadata.${x}`),
-    ...KNOWN_DATE_METADATA_NAMES.map(x => `metadata.${x}`)
-  ].filter(x => !notExpandedAttributes['io.cozy.files'].includes(x))
-}
-
-export const hasAllElement = (arr1, arr2) => arr1?.every(x => arr2.includes(x))
-
-export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => {
-  const doctype = doc?._type
-
-  if (!doc || !doctype) return undefined
-
-  // checks if there are any expanded attributes.
-  // If there are none, the default expanded attributes are returned
-  if (
-    !expandedAttributes ||
-    hasAllElement(expandedAttributes, notExpandedAttributes[doctype])
-  ) {
-    return defaultExpandedAttributes[doctype]
-  }
-
-  return expandedAttributes
-    .map(expandedAttribute =>
-      notExpandedAttributes[doctype].includes(expandedAttribute)
-        ? undefined
-        : normalizeExpandedAttribute(expandedAttribute)
-    )
-    .filter(x => x)
-}
-
-export const copyToClipboard =
-  ({ value, setAlertProps, t }) =>
-  async () => {
-    try {
-      await navigator.clipboard.writeText(value)
-      setAlertProps({
-        open: true,
-        severity: 'success',
-        message: t(`ListItem.snackbar.copyToClipboard.success`)
-      })
-    } catch (error) {
-      setAlertProps({
-        open: true,
-        severity: 'error',
-        message: t(`ListItem.snackbar.copyToClipboard.error`)
-      })
-    }
-  }
-
-export const isDate = value => {
-  if (!isNaN(value)) return false
-  const dateTime = new Date(value).getTime()
-  const dateParsedValue = Date.parse(value)
-
-  return dateTime === dateParsedValue
-}
-
-export const getAttrValue = (doc, attrName) => {
-  const attrValue = get(doc, attrName)
-  if (!attrValue || attrValue.length === 0) return undefined
-
-  switch (true) {
-    case attrName === 'email':
-      return attrValue.find(x => x.primary === true)?.address
-
-    case attrName === 'address':
-      return attrValue.find(x => x.primary === true)?.formattedAddress
-
-    case attrName === 'phone':
-      return attrValue.find(x => x.primary === true)?.number
-
-    default:
-      return attrValue
-  }
-}
-
-export const makeAttrsValues = (doc, expandedAttributes) => {
-  const attrsValues = expandedAttributes
-    .map(attrName => {
-      const attrValue = getAttrValue(doc, attrName)
-
-      if (!attrValue) return undefined
-
-      return {
-        attrName,
-        attrValue
-      }
-    })
-    .filter(x => x)
-    .slice(0, 3)
-
-  return attrsValues
-}
-
-// could be use in apps
-export const hasExpandedAttributesDisplayed = ({ doc, expandedAttributes }) => {
-  const defaultExpandedAttributes = makeDefaultExpandedAttributes(
-    doc,
-    expandedAttributes
-  )
-
-  const attrsValues = makeAttrsValues(doc, defaultExpandedAttributes)
-
-  return attrsValues?.length > 0 || false
-}
-
-export const getFormattedValue = ({
-  attrName,
-  attrValue,
-  qualificationLabel,
-  f,
-  lang
-}) => {
-  if (isDate(attrValue)) {
-    return formatDateMetadataValue(attrValue, { f, lang })
-  }
-
-  if (qualificationLabel) {
-    return formatInformationMetadataValue(attrValue, {
-      lang,
-      name: attrName.split('metadata.')[1],
-      qualificationLabel
-    })
-  }
-
-  return attrValue
-}
-
-export const makeLabel = ({ attrName, qualificationLabel, t, lang }) => {
-  if (qualificationLabel) {
-    const name = attrName.split('metadata.')[1]
-    const label = getTranslatedNameForInformationMetadata(name, {
-      lang,
-      qualificationLabel
-    })
-    return label
-  }
-
-  return t(`ListItem.attributes.${attrName}`)
-}
-
-export const makeAttrsLabelAndFormattedValue = ({
-  doc,
-  expandedAttributes,
-  t,
-  f,
-  lang
-}) => {
-  const attrsKeyAndFormattedValue = makeAttrsValues(doc, expandedAttributes)
-
-  return attrsKeyAndFormattedValue.map(({ attrName, attrValue }) => {
-    const _attrName =
-      attrName.match(/\[.+\]/g) !== null ? attrName.split('[')[0] : attrName
-    const qualificationLabel = doc.metadata?.qualification?.label
-
-    const label = makeLabel({
-      attrName: _attrName,
-      qualificationLabel,
-      t,
-      lang
-    })
-
-    const value = getFormattedValue({
-      attrName: _attrName,
-      attrValue,
-      qualificationLabel,
-      f,
-      lang
-    })
-
-    return { label, value }
-  })
-}

package/react/ListItem/ExpandedAttributes/helpers.spec.js

@@ -1,175 +0,0 @@
-import {
-  makeAttrsValues,
-  getAttrValue,
-  makeLabel,
-  normalizeExpandedAttribute
-} from './helpers'
-
-describe('makeAttrsValues', () => {
-  it('should return attributes names and values', () => {
-    const doc = { metadata: { number: '123', refTaxIncome: '400' } }
-    const res = makeAttrsValues(doc, [
-      'metadata.number',
-      'metadata.refTaxIncome'
-    ])
-
-    expect(res).toStrictEqual([
-      {
-        attrName: 'metadata.number',
-        attrValue: '123'
-      },
-      {
-        attrName: 'metadata.refTaxIncome',
-        attrValue: '400'
-      }
-    ])
-  })
-})
-
-describe('getAttrValue', () => {
-  it('should return the email value', () => {
-    const res = getAttrValue(
-      { email: [{ address: 'xx@yy.zz' }] },
-      'email[0].address'
-    )
-
-    expect(res).toBe('xx@yy.zz')
-  })
-
-  it('should return the primary email value', () => {
-    const res = getAttrValue(
-      {
-        email: [{ address: 'xx@yy.zz' }, { address: 'zz@yy.xx', primary: true }]
-      },
-      'email'
-    )
-
-    expect(res).toBe('zz@yy.xx')
-  })
-
-  it('should return the address value', () => {
-    const res = getAttrValue(
-      { address: [{ formattedAddress: 'baker street' }] },
-      'address[0].formattedAddress'
-    )
-
-    expect(res).toBe('baker street')
-  })
-
-  it('should return the primary address value', () => {
-    const res = getAttrValue(
-      {
-        address: [
-          { formattedAddress: 'baker street' },
-          { formattedAddress: 'street baker', primary: true }
-        ]
-      },
-      'address'
-    )
-
-    expect(res).toBe('street baker')
-  })
-
-  it('should return the phone number', () => {
-    const res = getAttrValue(
-      { phone: ['', { number: '0102030405' }] },
-      'phone[1].number'
-    )
-
-    expect(res).toBe('0102030405')
-  })
-
-  it('should return the primary phone number', () => {
-    const res = getAttrValue(
-      {
-        phone: [
-          { number: '0908070605', primary: true },
-          { number: '0102030405' }
-        ]
-      },
-      'phone'
-    )
-
-    expect(res).toBe('0908070605')
-  })
-
-  it('should return metadata number value', () => {
-    const res = getAttrValue({ metadata: { number: '123' } }, 'metadata.number')
-
-    expect(res).toBe('123')
-  })
-
-  it('should return an ISO string date', () => {
-    const res = getAttrValue(
-      { metadata: { date: '2023-03-08T12:48:18.000Z' } },
-      'metadata.date'
-    )
-
-    expect(res).toBe('2023-03-08T12:48:18.000Z')
-  })
-
-  it('should return the civility value', () => {
-    const res = getAttrValue({ civility: 'female' }, 'civility')
-
-    expect(res).toBe('female')
-  })
-})
-
-describe('normalizeExpandedAttribute', () => {
-  it('sould remove flexsearchProps and translated words', () => {
-    const res = normalizeExpandedAttribute(
-      'flexsearchProps:translated:qualificationLabel'
-    )
-
-    expect(res).toBe('qualificationLabel')
-  })
-
-  it('should keep metadata.x intact', () => {
-    const res = normalizeExpandedAttribute(
-      'flexsearchProps:translated:metadata.contractType'
-    )
-
-    expect(res).toBe('metadata.contractType')
-  })
-
-  it('should keep email[1] intact', () => {
-    const res = normalizeExpandedAttribute('flexsearchProps:email[1].address')
-
-    expect(res).toBe('email[1].address')
-  })
-
-  it('should replace : by .', () => {
-    const res = normalizeExpandedAttribute('metadata:number')
-
-    expect(res).toBe('metadata.number')
-  })
-
-  it('should do nothing for simple word', () => {
-    const res = normalizeExpandedAttribute('fullname')
-
-    expect(res).toBe('fullname')
-  })
-})
-
-describe('makeLabel', () => {
-  it('should', () => {
-    const res = makeLabel({
-      attrName: 'metadata.number',
-      qualificationLabel: 'driver_license',
-      t: x => x,
-      lang: 'fr'
-    })
-
-    expect(res).toBe('Numéro du permis')
-  })
-
-  it('should', () => {
-    const res = makeLabel({
-      attrName: 'birthday',
-      t: x => x,
-      lang: 'fr'
-    })
-
-    expect(res).toBe('ListItem.attributes.birthday')
-  })
-})

package/react/ListItem/ExpandedAttributes/index.jsx

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import ExpandedAttribute from './ExpandedAttribute'
-import { makeAttrsLabelAndFormattedValue } from './helpers'
-import Alert from '../../Alert'
-import Snackbar from '../../Snackbar'
-import { useI18n } from '../../providers/I18n'
-import withListItemLocales from '../hoc/withListItemLocales'
-
-const ExpandedAttributes = ({ doc, expandedAttributes }) => {
-  const { t, f, lang } = useI18n()
-  const [alertProps, setAlertProps] = useState({
-    open: false,
-    severity: 'primary',
-    message: ''
-  })
-
-  const attrsLabelAndFormattedValue = makeAttrsLabelAndFormattedValue({
-    doc,
-    expandedAttributes,
-    t,
-    f,
-    lang
-  })
-
-  const handleClose = () => setAlertProps({ open: false })
-
-  return (
-    <>
-      {attrsLabelAndFormattedValue.map(({ label, value }, index) => {
-        return (
-          <ExpandedAttribute
-            key={index}
-            label={label}
-            value={value}
-            setAlertProps={setAlertProps}
-          />
-        )
-      })}
-      {alertProps.open && (
-        <Snackbar open onClose={handleClose}>
-          <Alert
-            variant="filled"
-            severity={alertProps.severity}
-            onClose={handleClose}
-          >
-            {alertProps.message}
-          </Alert>
-        </Snackbar>
-      )}
-    </>
-  )
-}
-
-ExpandedAttributes.propTypes = {
-  doc: PropTypes.object,
-  expandedAttributes: PropTypes.array
-}
-
-export default withListItemLocales(ExpandedAttributes)

package/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Button from '../../../Buttons'
-import { ConfirmDialog } from '../../../CozyDialogs'
-import { useI18n } from '../../../providers/I18n'
-import withListItemLocales from '../../hoc/withListItemLocales'
-
-const RenameDialog = ({ onSubmit, onCancel }) => {
-  const { t } = useI18n()
-
-  return (
-    <ConfirmDialog
-      open
-      title={t('ListItem.renameModal.title')}
-      content={t('ListItem.renameModal.content')}
-      actions={
-        <>
-          <Button
-            variant="secondary"
-            label={t('ListItem.renameModal.cancel')}
-            onClick={onCancel}
-          />
-          <Button label={t('ListItem.renameModal.submit')} onClick={onSubmit} />
-        </>
-      }
-      onClose={onCancel}
-    />
-  )
-}
-
-RenameDialog.propTypes = {
-  onSubmit: PropTypes.func,
-  onCancel: PropTypes.func
-}
-
-export default withListItemLocales(RenameDialog)

package/react/ListItem/ListItemBase/Renaming/RenameInput.jsx

@@ -1,134 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect, useReducer, useRef, useState } from 'react'
-
-import { useClient } from 'cozy-client'
-import { splitFilename } from 'cozy-client/dist/models/file'
-
-import RenameDialog from './RenameDialog'
-import { renameFile } from './helpers'
-import Input from '../../../legacy/Input'
-import InputGroup from '../../../InputGroup'
-import Spinner from '../../../Spinner'
-import { makeStyles } from '../../../styles'
-
-const KEYS = {
-  ESCAPE: 'Escape',
-  ENTER: 'Enter'
-}
-
-const useStyles = makeStyles({
-  inputGroup: {
-    maxWidth: 'none',
-    height: '2rem',
-    margin: '1rem 1rem 1rem 0',
-    '& > div': {
-      display: 'flex'
-    },
-    '& input': {
-      maxWidth: 'none',
-      padding: '.3125rem'
-    }
-  },
-  spinner: {
-    margin: '.4375rem'
-  }
-})
-
-const RenameInput = ({ file, onClose }) => {
-  const client = useClient()
-  const styles = useStyles()
-  const textInput = useRef()
-  const [isBusy, toggleBusy] = useReducer(prev => !prev, false)
-  const [isModalOpened, setIsModalOpened] = useState(false)
-  const defaultValue = file.name
-
-  const check = async () => {
-    const { value } = textInput.current
-    if (value === '' || value === '.' || value === '..') {
-      await submit()
-      return
-    }
-    const oldExtension = splitFilename({
-      name: defaultValue,
-      type: 'file'
-    }).extension
-    const newExtension = splitFilename({
-      name: value,
-      type: 'file'
-    }).extension
-    if (oldExtension === newExtension) {
-      await submit()
-      return
-    }
-    setIsModalOpened(true)
-  }
-
-  const submit = async () => {
-    const { value } = textInput.current
-    await close(value)
-  }
-
-  const cancel = async () => {
-    await close(defaultValue)
-  }
-
-  const close = async value => {
-    toggleBusy()
-    if (value !== defaultValue) {
-      await renameFile(client, file, value)
-    }
-    onClose()
-  }
-
-  const handleKeyDown = async event => {
-    if (event.key === KEYS.ENTER) {
-      await check()
-    } else if (event.key === KEYS.ESCAPE) {
-      await cancel()
-    }
-  }
-
-  const handleBlur = async () => {
-    // On top of "normal" blurs, the event happens all the time after a submit or a cancel, because this component is removed from the DOM while having the focus.
-    // we want to do things only on "normal" blurs, *not* after a cancel
-    if (!isModalOpened && !isBusy) {
-      await check()
-    }
-  }
-
-  const handleFocus = () => {
-    const { length } = splitFilename({
-      name: defaultValue,
-      type: 'file'
-    }).filename
-
-    textInput.current.setSelectionRange(0, length)
-  }
-
-  useEffect(() => {
-    textInput.current.focus()
-  }, [])
-
-  return (
-    <InputGroup className={styles.inputGroup}>
-      <Input
-        ref={textInput}
-        type="text"
-        defaultValue={defaultValue}
-        disabled={isModalOpened || isBusy}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        onKeyDown={handleKeyDown}
-      />
-      {(isModalOpened || isBusy) && <Spinner className={styles.spinner} />}
-      {isModalOpened && <RenameDialog onSubmit={submit} onCancel={cancel} />}
-    </InputGroup>
-  )
-}
-
-RenameInput.propTypes = {
-  file: PropTypes.object.isRequired,
-  onClose: PropTypes.func.isRequired
-}
-
-export default RenameInput

package/react/ListItem/ListItemBase/Renaming/helpers.js

@@ -1,35 +0,0 @@
-import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
-
-export const renameFile = async (client, file, name) => {
-  try {
-    return await client.save({
-      ...file,
-      name
-    })
-  } catch (error) {
-    if (error.message.includes('Missing name argument')) {
-      Alerter.error('RenameInput.filenameMissing')
-    } else if (error.message.includes('Invalid filename:')) {
-      Alerter.error('RenameInput.filenameIllegalName', {
-        name
-      })
-    } else if (
-      error.message.includes(
-        'Invalid filename containing illegal character(s):'
-      )
-    ) {
-      Alerter.error(
-        'RenameInput.filenameIllegalCharacters',
-        {
-          name,
-          characters: error.message.split(
-            'Invalid filename containing illegal character(s): '
-          )[1]
-        },
-        { duration: 2000 }
-      )
-    } else {
-      Alerter.error('RenameInput.fileExisting', { name })
-    }
-  }
-}