cozy-ui 128.2.0 → 128.3.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [128.3.1](https://github.com/cozy/cozy-ui/compare/v128.3.0...v128.3.1) (2025-09-03)
+
+
+### Bug Fixes
+
+* `patch-package` wasn't a direct dep ([8085fd8](https://github.com/cozy/cozy-ui/commit/8085fd8))
+
+# [128.3.0](https://github.com/cozy/cozy-ui/compare/v128.2.0...v128.3.0) (2025-09-03)
+
+
+### Features
+
+* Add ContactsAddModal component ([5e21445](https://github.com/cozy/cozy-ui/commit/5e21445))
+* **DemoProvider:** Add ability to pass locales ([f6815a3](https://github.com/cozy/cozy-ui/commit/f6815a3))
+
 # [128.2.0](https://github.com/cozy/cozy-ui/compare/v128.1.0...v128.2.0) (2025-09-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "128.2.0",
+  "version": "128.3.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -128,7 +128,6 @@
     "mini-css-extract-plugin": "0.6.0",
     "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
-    "patch-package": "^8.0.0",
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "prettier": "2.6.0",
@@ -171,14 +170,19 @@
     "cozy-interapp": "^0.5.4",
     "date-fns": "2.30.0",
     "filesize": "8.0.7",
+    "final-form": "4.20.9",
+    "final-form-arrays": "3.1.0",
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",
     "mime-types": "2.1.35",
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.5.0",
     "normalize.css": "^8.0.0",
+    "patch-package": "^8.0.0",
     "pdf-lib": "1.17.1",
     "react-chartjs-2": "4.1.0",
+    "react-final-form": "6.5.9",
+    "react-final-form-arrays": "3.1.4",
     "react-markdown": "^4.0.8",
     "react-popper": "^2.2.3",
     "react-remove-scroll": "^2.4.0",

package/react/Contacts/AddModal/ContactAddressDialog/helpers.js

@@ -0,0 +1,22 @@
+import { cleanFormattedAddress } from 'cozy-client/dist/models/contact'
+
+/**
+ * Make formatted address
+ * @param {{ name: string, value: string }[]} subFieldsState - State of address sub fields
+ * @returns {string} - Formatted address
+ */
+export const makeFormattedAddressWithSubFields = (subFieldsState, t) => {
+  const normalizedAddress = subFieldsState.reduce((acc, curr) => {
+    const key = curr.name
+      .split('.')
+      .pop()
+      .replace(/address/, '')
+
+    return {
+      ...acc,
+      [key]: curr.value || ''
+    }
+  }, {})
+
+  return cleanFormattedAddress(t('formatted.address', normalizedAddress))
+}

package/react/Contacts/AddModal/ContactAddressDialog/helpers.spec.js

@@ -0,0 +1,64 @@
+import { makeFormattedAddressWithSubFields } from './helpers'
+
+describe('makeFormattedAddressWithSubFields', () => {
+  it('should return full formatted address', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: '10' },
+      { name: 'address[0].addressstreet', value: 'rue du test' },
+      { name: 'address[0].addresscode', value: '75056' },
+      { name: 'address[0].addresscity', value: 'Paris' },
+      { name: 'address[0].addresscountry', value: 'France' }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => '10 rue du test, 75056 Paris, France')
+    )
+
+    expect(res).toBe('10 rue du test, 75056 Paris, France')
+  })
+  it('should return formatted address if only "code" & "city" values are defined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: undefined },
+      { name: 'address[0].addressstreet', value: undefined },
+      { name: 'address[0].addresscode', value: '75056' },
+      { name: 'address[0].addresscity', value: 'Paris' },
+      { name: 'address[0].addresscountry', value: undefined }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => ' , 75056 Paris, ')
+    )
+
+    expect(res).toBe('75056 Paris')
+  })
+  it('should return formatted address if "code" & "city" values are undefined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: '10' },
+      { name: 'address[0].addressstreet', value: 'rue du test' },
+      { name: 'address[0].addresscode', value: undefined },
+      { name: 'address[0].addresscity', value: undefined },
+      { name: 'address[0].addresscountry', value: 'France' }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => '10 rue du test,  , France')
+    )
+
+    expect(res).toBe('10 rue du test, France')
+  })
+  it('should return formatted address if all values are undefined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: undefined },
+      { name: 'address[0].addressstreet', value: undefined },
+      { name: 'address[0].addresscode', value: undefined },
+      { name: 'address[0].addresscity', value: undefined },
+      { name: 'address[0].addresscountry', value: undefined }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => ' ,  , ')
+    )
+
+    expect(res).toBe('')
+  })
+})

package/react/Contacts/AddModal/ContactAddressDialog/index.jsx

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Field, useForm } from 'react-final-form'
+
+import { makeFormattedAddressWithSubFields } from './helpers'
+import { locales } from './locales'
+import Button from '../../../Buttons'
+import { FixedDialog } from '../../../CozyDialogs'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+import FieldInputWrapper from '../ContactForm/FieldInputWrapper'
+import { fieldInputAttributesTypes } from '../types'
+
+const ContactAddressModal = ({ onClose, name, subFields }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { getFieldState, change } = useForm()
+
+  const subFieldsState = subFields.map(subField =>
+    getFieldState(`${name}${subField.name}`)
+  )
+
+  const onConfirm = () => {
+    const hasBeenModified = subFieldsState.some(state => !state.pristine)
+    if (!hasBeenModified) {
+      return onClose()
+    }
+
+    const formattedAddress = makeFormattedAddressWithSubFields(
+      subFieldsState,
+      t
+    )
+    change(name, formattedAddress)
+
+    onClose()
+  }
+
+  const onCancel = () => {
+    subFieldsState.forEach(({ name, initial }) => change(name, initial))
+    onClose()
+  }
+
+  return (
+    <FixedDialog
+      open
+      onClose={onClose}
+      size="small"
+      title={t('Contacts.AddModal.ContactAddressDialog.fields.address')}
+      content={subFields.map(subField => (
+        <div key={subField.name} className="u-mt-1">
+          <Field
+            label={t(
+              `Contacts.AddModal.ContactAddressDialog.fields.${subField.name}`
+            )}
+            attributes={{ type: subField.type }}
+            name={`${name}${subField.name}`}
+            component={FieldInputWrapper}
+          />
+        </div>
+      ))}
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('Contacts.AddModal.ContactAddressDialog.cancel')}
+            onClick={onCancel}
+          />
+          <Button
+            className="u-ml-half"
+            label={t('Contacts.AddModal.ContactAddressDialog.ok')}
+            onClick={onConfirm}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ContactAddressModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  subFields: PropTypes.arrayOf(fieldInputAttributesTypes).isRequired
+}
+
+export default ContactAddressModal

package/react/Contacts/AddModal/ContactAddressDialog/locales/en.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Address",
+          "number": "Lane number",
+          "street": "Postal address",
+          "code": "Postal code",
+          "city": "City",
+          "country": "Country",
+          "locality": "Locality",
+          "building": "Building",
+          "stairs": "Stairs",
+          "floor": "Floor",
+          "apartment": "Apartment",
+          "region": "Region",
+          "entrycode": "Entry code"
+        },
+        "cancel": "Cancel",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/react/Contacts/AddModal/ContactAddressDialog/locales/fr.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Adresse",
+          "number": "Numéro de voie",
+          "street": "Adresse postal",
+          "code": "Code postal",
+          "city": "Ville",
+          "country": "Pays",
+          "locality": "Lieu-dit",
+          "building": "Bâtiment",
+          "stairs": "Escalier",
+          "floor": "Etage",
+          "apartment": "Appartement",
+          "region": "Région",
+          "entrycode": "Code d'entrée"
+        },
+        "cancel": "Annuler",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/react/Contacts/AddModal/ContactAddressDialog/locales/index.jsx

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/react/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -0,0 +1,117 @@
+import cx from 'classnames'
+import uniqueId from 'lodash/uniqueId'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Field } from 'react-final-form'
+
+import FieldInputWrapper from './FieldInputWrapper'
+import HasValueCondition from './HasValueCondition'
+import { RelatedContactList } from './RelatedContactList'
+import { locales } from './locales'
+import styles from './styles.styl'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+import ContactAddressDialog from '../ContactAddressDialog'
+import { fieldInputAttributesTypes, labelPropTypes } from '../types'
+
+const FieldInput = ({
+  name,
+  labelProps,
+  attributes: { subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText,
+  label,
+  required
+}) => {
+  const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
+  const [hasBeenFocused, setHasBeenFocused] = useState(false)
+  const [isAddressDialogOpen, setIsAddressDialogOpen] = useState(false)
+  const [isRelatedContactDialogOpen, setIsRelatedContactDialogOpen] =
+    useState(false)
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const handleClick = () => {
+    if (name.includes('address')) {
+      setIsAddressDialogOpen(true)
+    }
+
+    if (name.includes('relatedContact')) {
+      setIsRelatedContactDialogOpen(true)
+    }
+  }
+
+  const onFocus = () => {
+    setHasBeenFocused(true)
+  }
+
+  return (
+    <div
+      className={cx(
+        styles['contact-form-field__wrapper'],
+        'u-flex',
+        'u-flex-column-s'
+      )}
+    >
+      <Field
+        required={required}
+        error={error}
+        helperText={helperText}
+        label={label}
+        id={id}
+        attributes={restAttributes}
+        name={name}
+        component={FieldInputWrapper}
+        onFocus={onFocus}
+        onClick={handleClick}
+      />
+      {isAddressDialogOpen && (
+        <ContactAddressDialog
+          onClose={() => setIsAddressDialogOpen(false)}
+          name={name}
+          subFields={subFields}
+        />
+      )}
+      {isRelatedContactDialogOpen && (
+        <RelatedContactList
+          onClose={() => setIsRelatedContactDialogOpen(false)}
+          name={name}
+          contacts={contacts}
+        />
+      )}
+      {labelProps && (
+        <HasValueCondition name={name} otherCondition={hasBeenFocused}>
+          <div className="u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-auto u-miw-4">
+            <Field
+              attributes={labelProps}
+              name={`${name}Label`}
+              label={t('Contacts.AddModal.ContactForm.fields.label')}
+              component={FieldInputWrapper}
+              onFocus={onFocus}
+            />
+          </div>
+        </HasValueCondition>
+      )}
+    </div>
+  )
+}
+
+FieldInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  labelProps: labelPropTypes,
+  attributes: fieldInputAttributesTypes,
+  contacts: PropTypes.shape({
+    data: PropTypes.arrayOf(PropTypes.object)
+  }),
+  // Destructuring props
+  id: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool
+}
+
+FieldInput.defaultProps = {
+  labelProps: null,
+  required: false
+}
+
+export default FieldInput

package/react/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -0,0 +1,80 @@
+import cx from 'classnames'
+import React from 'react'
+import { FieldArray } from 'react-final-form-arrays'
+
+import FieldInput from './FieldInput'
+import { fieldsRequired, addField, removeField } from './helpers'
+import { locales } from './locales'
+import Button from '../../../Buttons'
+import Icon from '../../../Icon'
+import IconButton from '../../../IconButton'
+import CrossCircleIcon from '../../../Icons/CrossCircle'
+import PlusIcon from '../../../Icons/Plus'
+import ListItemIcon from '../../../ListItemIcon'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const FieldInputArray = ({
+  attributes: { name, label, ...restAttributes },
+  contacts,
+  formProps: { valid, submitFailed, errors }
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <FieldArray name={name}>
+      {({ fields }) => {
+        return (
+          <>
+            {fields.map((nameWithIndex, index) => {
+              const key = fields.value[index]?.fieldId || nameWithIndex
+              const showRemove = fields.value[index]?.[name]
+              const inputName = `${nameWithIndex}.${name}`
+              const isError =
+                fieldsRequired.includes(inputName) && !valid && submitFailed
+
+              return (
+                <div
+                  key={key}
+                  className={cx('u-flex u-flex-items-center', {
+                    'u-mt-1': index !== 0
+                  })}
+                >
+                  <FieldInput
+                    attributes={restAttributes}
+                    contacts={contacts}
+                    error={isError}
+                    helperText={isError ? errors[inputName] : null}
+                    name={inputName}
+                    label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+                    labelProps={label}
+                  />
+                  {showRemove && (
+                    <ListItemIcon className="u-ml-half">
+                      <IconButton
+                        aria-label="delete"
+                        color="error"
+                        size="medium"
+                        onClick={() => removeField(fields, index)}
+                      >
+                        <Icon icon={CrossCircleIcon} />
+                      </IconButton>
+                    </ListItemIcon>
+                  )}
+                </div>
+              )
+            })}
+            <Button
+              variant="text"
+              startIcon={<Icon icon={PlusIcon} />}
+              onClick={() => addField(fields)}
+              label={t(`Contacts.AddModal.ContactForm.addLabel.${name}`)}
+            />
+          </>
+        )
+      }}
+    </FieldArray>
+  )
+}
+
+export default FieldInputArray

package/react/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -0,0 +1,65 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import FieldInput from './FieldInput'
+import FieldInputArray from './FieldInputArray'
+import { fieldsRequired } from './helpers'
+import { locales } from './locales'
+import Icon from '../../../Icon'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const FieldInputLayout = ({
+  attributes: { isArray, icon, ...attributes }, // ⚠️ isArray and icon here are removed from attributes to avoid DOM propagration
+  contacts,
+  formProps
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { valid, submitFailed, errors } = formProps
+  const { name, label, ...restAttributes } = attributes
+
+  const isError = fieldsRequired.includes(name) && !valid && submitFailed
+
+  return (
+    <div
+      className={cx('u-flex u-mt-1', {
+        'u-flex-items-center': !isArray,
+        'u-flex-items-baseline': isArray
+      })}
+    >
+      <div className="u-w-2-half">
+        {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
+      </div>
+      <div className="u-w-100">
+        {isArray ? (
+          <FieldInputArray
+            attributes={attributes}
+            contacts={contacts}
+            formProps={formProps}
+          />
+        ) : (
+          <FieldInput
+            attributes={restAttributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+            name={name}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+            labelProps={label}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+FieldInputLayout.propTypes = {
+  attributes: PropTypes.object,
+  contacts: PropTypes.shape({
+    data: PropTypes.arrayOf(PropTypes.object)
+  }),
+  formProps: PropTypes.object
+}
+
+export default FieldInputLayout

package/react/Contacts/AddModal/ContactForm/FieldInputWrapper.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import TextFieldCustomLabelSelect from './TextFieldCustomLabelSelect'
+import TextFieldSelect from './TextFieldSelect'
+import TextField from '../../../TextField'
+import { FieldInputWrapperPropTypes } from '../types'
+
+// component used to flatten props to ensure compatibility
+// between Field from react-final-form and TextField from Mui
+const FieldInputWrapper = ({
+  input,
+  attributes,
+  variant,
+  fullWidth,
+  ...props
+}) => {
+  const Component = attributes.customLabelOptions
+    ? TextFieldCustomLabelSelect
+    : attributes?.select
+    ? TextFieldSelect
+    : TextField
+
+  return (
+    <Component
+      {...attributes}
+      {...input}
+      {...props}
+      variant={variant}
+      fullWidth={fullWidth}
+      minRows="2"
+    />
+  )
+}
+
+FieldInputWrapper.propTypes = FieldInputWrapperPropTypes
+FieldInputWrapper.defaultProps = {
+  variant: 'outlined',
+  fullWidth: true
+}
+
+export default FieldInputWrapper

package/react/Contacts/AddModal/ContactForm/HasValueCondition.jsx

@@ -0,0 +1,31 @@
+/*
+  Wrapper for react-final-form field that renders it children only if the field
+  with the given name has a truthy value or if the other condition is fulfilled
+*/
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Field } from 'react-final-form'
+
+const HasValueCondition = ({ children, otherCondition, name }) => {
+  return (
+    <Field name={name} subscription={{ value: true }}>
+      {({ input: { value } }) =>
+        (otherCondition !== undefined && otherCondition) || value
+          ? children
+          : null
+      }
+    </Field>
+  )
+}
+
+HasValueCondition.defaultProps = {
+  otherCondition: undefined
+}
+
+HasValueCondition.propTypes = {
+  children: PropTypes.element.isRequired,
+  name: PropTypes.string.isRequired,
+  otherCondition: PropTypes.bool
+}
+
+export default HasValueCondition