cozy-ui-plus 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -74,5 +74,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "b1d504a12eb88b8ecda4a53f82c400482d79452b"
+  "gitHead": "1fe28398fc8315ebb5eba401731f8e318c00f05a"
 }

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

@@ -22,8 +22,7 @@ const FieldInput = ({
   error,
   helperText,
   label,
-  isInvisible,
-  required
+  isInvisible
 }) => {
   const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
   const [hasBeenFocused, setHasBeenFocused] = useState(false)
@@ -57,7 +56,6 @@ const FieldInput = ({
       )}
     >
       <Field
-        required={required}
         error={error}
         helperText={helperText}
         label={label}
@@ -111,13 +109,11 @@ FieldInput.propTypes = {
   }),
   // Destructuring props
   id: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool
+  label: PropTypes.string
 }
 
 FieldInput.defaultProps = {
-  labelProps: null,
-  required: false
+  labelProps: null
 }
 
 export default FieldInput

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

@@ -11,16 +11,17 @@ import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 
 import FieldInput from './FieldInput'
-import { fieldsRequired, addField, removeField } from './helpers'
+import { addField, removeField, makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputArray = ({
   attributes: { name, label, ...restAttributes },
   contacts,
-  formProps: { valid, submitFailed, errors }
+  formProps
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { errors } = formProps
 
   return (
     <FieldArray name={name}>
@@ -31,8 +32,10 @@ const FieldInputArray = ({
               const key = fields.value[index]?.fieldId || nameWithIndex
               const showRemove = fields.value[index]?.[name]
               const inputName = `${nameWithIndex}.${name}`
-              const isError =
-                fieldsRequired.includes(inputName) && !valid && submitFailed
+              const isError = makeIsRequiredError(
+                restAttributes.required,
+                formProps
+              )
 
               return (
                 <div

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

@@ -8,7 +8,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FieldInput from './FieldInput'
 import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
-import { fieldsRequired } from './helpers'
+import { makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputLayout = ({
@@ -19,10 +19,10 @@ const FieldInputLayout = ({
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
-  const { valid, submitFailed, errors } = formProps
+  const { errors } = formProps
   const { name, label, ...restAttributes } = attributes
 
-  const isError = fieldsRequired.includes(name) && !valid && submitFailed
+  const isError = makeIsRequiredError(restAttributes.required, formProps)
 
   return (
     <div

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

@@ -25,8 +25,8 @@ const FieldInputWrapper = ({
 
   return (
     <Component
-      {...restAttributes}
       {...input}
+      {...restAttributes}
       {...props}
       variant={variant}
       fullWidth={fullWidth}

package/src/Contacts/AddModal/ContactForm/contactToFormValues.js

@@ -2,108 +2,93 @@ import uniqueId from 'lodash/uniqueId'
 
 import { getFormattedAddress } from 'cozy-client/dist/models/contact'
 
-import { fields } from './fieldsConfig'
 import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
 
 const contactToFormValues = ({ contact, makeCustomContactValues, t }) => {
-  // initialize the form values, required so that array fields start with at least one editable field
-  const initialFieldValues = fields.reduce(
-    (initialValues, { name, layout }) => {
-      initialValues[name] = layout === 'array' ? [undefined] : undefined
-      return initialValues
-    },
-    {}
-  )
+  const {
+    gender,
+    address,
+    birthday,
+    birthplace,
+    company,
+    jobTitle,
+    cozy,
+    email,
+    impp,
+    name,
+    note,
+    phone
+  } = contact
 
-  if (contact) {
-    const {
-      gender,
-      address,
-      birthday,
-      birthplace,
-      company,
-      jobTitle,
-      cozy,
-      email,
-      impp,
-      name,
-      note,
-      phone
-    } = contact
+  const addressValue =
+    address && address.length > 0
+      ? movePrimaryToHead(address).map(addressInfo => ({
+          fieldId: uniqueId('fieldId_'),
+          address: getFormattedAddress(addressInfo, t),
+          addressnumber: addressInfo.number,
+          addressstreet:
+            addressInfo.street || getFormattedAddress(addressInfo, t),
+          addresscode: addressInfo.postcode || addressInfo.code,
+          addresscity: addressInfo.city,
+          addressregion: addressInfo.region,
+          addresscountry: addressInfo.country,
+          addresslocality: addressInfo.extendedAddress?.locality,
+          addressbuilding: addressInfo.extendedAddress?.building,
+          addressstairs: addressInfo.extendedAddress?.stairs,
+          addressfloor: addressInfo.extendedAddress?.floor,
+          addressapartment: addressInfo.extendedAddress?.apartment,
+          addressentrycode: addressInfo.extendedAddress?.entrycode,
+          addressLabel: makeItemLabel(addressInfo)
+        }))
+      : [undefined]
+  const cozyValue = cozy && cozy.length > 0 ? cozy[0].url : undefined
+  const cozyLabel = cozy && cozy.length > 0 ? makeItemLabel(cozy[0]) : undefined
+  const emailValue =
+    email && email.length > 0
+      ? movePrimaryToHead(email).map(item => ({
+          fieldId: uniqueId('fieldId_'),
+          email: item?.address,
+          emailLabel: makeItemLabel(item)
+        }))
+      : [undefined]
+  const matrixValue =
+    impp && impp.length > 0
+      ? impp.find(item => item.label === 'work' && item.protocol === 'matrix')
+          ?.uri || undefined
+      : undefined
+  const phoneValue =
+    phone && phone.length > 0
+      ? movePrimaryToHead(phone).map(item => ({
+          fieldId: uniqueId('fieldId_'),
+          phone: item?.number,
+          phoneLabel: makeItemLabel(item)
+        }))
+      : [undefined]
 
-    const addressValue =
-      address && address.length > 0
-        ? movePrimaryToHead(address).map(addressInfo => ({
-            fieldId: uniqueId('fieldId_'),
-            address: getFormattedAddress(addressInfo, t),
-            addressnumber: addressInfo.number,
-            addressstreet:
-              addressInfo.street || getFormattedAddress(addressInfo, t),
-            addresscode: addressInfo.postcode || addressInfo.code,
-            addresscity: addressInfo.city,
-            addressregion: addressInfo.region,
-            addresscountry: addressInfo.country,
-            addresslocality: addressInfo.extendedAddress?.locality,
-            addressbuilding: addressInfo.extendedAddress?.building,
-            addressstairs: addressInfo.extendedAddress?.stairs,
-            addressfloor: addressInfo.extendedAddress?.floor,
-            addressapartment: addressInfo.extendedAddress?.apartment,
-            addressentrycode: addressInfo.extendedAddress?.entrycode,
-            addressLabel: makeItemLabel(addressInfo)
-          }))
-        : [undefined]
-    const cozyValue = cozy && cozy.length > 0 ? cozy[0].url : undefined
-    const cozyLabel =
-      cozy && cozy.length > 0 ? makeItemLabel(cozy[0]) : undefined
-    const emailValue =
-      email && email.length > 0
-        ? movePrimaryToHead(email).map(item => ({
-            fieldId: uniqueId('fieldId_'),
-            email: item?.address,
-            emailLabel: makeItemLabel(item)
-          }))
-        : [undefined]
-    const matrixValue =
-      impp && impp.length > 0
-        ? impp.find(item => item.label === 'work' && item.protocol === 'matrix')
-            ?.uri || undefined
-        : undefined
-    const phoneValue =
-      phone && phone.length > 0
-        ? movePrimaryToHead(phone).map(item => ({
-            fieldId: uniqueId('fieldId_'),
-            phone: item?.number,
-            phoneLabel: makeItemLabel(item)
-          }))
-        : [undefined]
+  const relatedContactValue = makeRelatedContact(contact)
 
-    const relatedContactValue = makeRelatedContact(contact)
+  const customValues = makeCustomContactValues?.(contact) || {}
 
-    const customValues = makeCustomContactValues?.(contact) || {}
-
-    return {
-      ...customValues,
-      gender,
-      givenName: name?.givenName,
-      additionalName: name?.additionalName,
-      surname: name?.surname,
-      familyName: name?.familyName,
-      phone: phoneValue,
-      email: emailValue,
-      matrix: matrixValue,
-      address: addressValue,
-      cozy: cozyValue,
-      cozyLabel: cozyLabel,
-      company,
-      jobTitle,
-      birthday,
-      birthplace,
-      note,
-      relatedContact: relatedContactValue
-    }
+  return {
+    ...customValues,
+    gender,
+    givenName: name?.givenName,
+    additionalName: name?.additionalName,
+    surname: name?.surname,
+    familyName: name?.familyName,
+    phone: phoneValue,
+    email: emailValue,
+    matrix: matrixValue,
+    address: addressValue,
+    cozy: cozyValue,
+    cozyLabel: cozyLabel,
+    company,
+    jobTitle,
+    birthday,
+    birthplace,
+    note,
+    relatedContact: relatedContactValue
   }
-
-  return initialFieldValues
 }
 
 export default contactToFormValues

package/src/Contacts/AddModal/ContactForm/contactToFormValues.spec.js

@@ -5,29 +5,6 @@ import { johnDoeContact, johnDoeFormValues } from '../mocks'
 describe('contactToFormValues function', () => {
   const tSpy = jest.fn()
 
-  it('should return default initial values', () => {
-    const expected = {
-      address: [undefined],
-      birthday: undefined,
-      birthplace: undefined,
-      gender: undefined,
-      company: undefined,
-      jobTitle: undefined,
-      cozy: undefined,
-      cozyLabel: undefined,
-      email: [undefined],
-      matrix: undefined,
-      familyName: undefined,
-      givenName: undefined,
-      note: undefined,
-      phone: [undefined],
-      relatedContact: [undefined]
-    }
-
-    const result = contactToFormValues({ contact: null, t: tSpy })
-    expect(result).toEqual(expected)
-  })
-
   it('should return initial values when a contact is given (edit)', () => {
     const expected = { ...johnDoeFormValues, relatedContact: [undefined] }
     tSpy.mockReturnValue(

package/src/Contacts/AddModal/ContactForm/helpers.js

@@ -9,26 +9,63 @@ import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
 
 import contactToFormValues from './contactToFormValues'
 
-export const fieldsRequired = [
-  'givenName',
-  'familyName',
-  'email[0].email',
-  'cozy'
-]
+export const getFirstValueIfArray = values => {
+  return Object.keys(values).reduce((acc, key) => {
+    const val = values[key]
+    acc[key] = Array.isArray(val) ? val[0] : val
+    return acc
+  }, {})
+}
+
+/**
+ * Returns true if all fields have no values
+ * @param {object} values - Fields values
+ * @param {import('../types').Field[]} fields - Fields configuration
+ * @returns {boolean} True if all fields have no values
+ */
+export const hasNoValues = (values, fields) => {
+  const _values = getFirstValueIfArray(values)
+
+  return fields.every(field => !get(_values, field.name))
+}
+
+/**
+ * Returns true if the input is required and the form is invalid
+ * @param {boolean} required - Whether the input is required
+ * @param {object} formProps - The form props
+ * @returns {boolean} True if the input is required and the form is invalid
+ */
+export const makeIsRequiredError = (required, formProps) => {
+  const { valid, submitFailed } = formProps
+
+  return required && !valid && submitFailed
+}
 
 /**
- * Returns errors if all required fields are empty
+ * Returns errors for required fields that are empty
  * @param {object} values - Fields values
- * @param {func} t - Translation function
+ * @param {import('../types').Field[]} fields - Fields configuration
+ * @param {Function} t - Translation function
  * @returns {object} Errors
  */
-export const validateFields = (values, t) => {
+export const validateFields = (values, fields, t) => {
   const errors = {}
-  if (fieldsRequired.every(field => !get(values, field))) {
-    fieldsRequired.forEach(field => {
-      errors[field] = t('Contacts.AddModal.ContactForm.fields.required')
-    })
-  }
+  const fieldsRequired = fields.filter(field => field.required)
+  const _values = getFirstValueIfArray(values)
+
+  fieldsRequired.forEach(field => {
+    if (!get(_values, field.name)) {
+      errors[field.name] =
+        field.layout === 'array'
+          ? [
+              {
+                [field.name]: t('Contacts.AddModal.ContactForm.fields.required')
+              }
+            ]
+          : t('Contacts.AddModal.ContactForm.fields.required')
+    }
+  })
+
   return errors
 }
 
@@ -329,6 +366,18 @@ export const makeImppValues = (oldContact, value) => {
   )
 }
 
+export const initializationFieldValues = fields => {
+  const initialFieldValues = fields.reduce(
+    (initialValues, { name, layout, defaultValue }) => {
+      initialValues[name] = layout === 'array' ? [undefined] : defaultValue
+      return initialValues
+    },
+    {}
+  )
+
+  return initialFieldValues
+}
+
 /**
  *
  * @param {string} name
@@ -384,9 +433,20 @@ export const makeFields = (customFields, defaultFields) => {
 
   const fields = [...defaultFields]
 
-  customFields.map(customField => {
-    if (customField.position) {
-      fields.splice(customField.position, 0, customField)
+  customFields.forEach(customField => {
+    const defaultField = fields.find(field => field.name === customField.name)
+    const _field = defaultField || customField
+
+    if (defaultField) {
+      Object.assign(_field, customField)
+    }
+
+    if (_field.position) {
+      if (defaultField) {
+        const fieldIndex = fields.indexOf(defaultField)
+        fields.splice(fieldIndex, 1)
+      }
+      fields.splice(_field.position, 0, _field)
     }
   })