Rework cozy-ui-plus Contacts add modal

AGENTS.md

@@ -0,0 +1,81 @@
+# Configuration for AI agents
+
+## ESLint Configuration
+
+This project uses ESLint rules from `cozy-libs`. When generating code, strictly follow these rules:
+
+### Configuration files
+
+- `config/eslint-config-cozy-app/basics.js`
+- `config/eslint-config-cozy-app/react.js`
+
+### Important rules to follow
+
+#### Prettier (formatting)
+
+```javascript
+'prettier/prettier': [
+  'error',
+  {
+    arrowParens: 'avoid',      // No parentheses for single-parameter arrow functions
+    endOfLine: 'auto',         // Automatic line ending
+    semi: false,               // NO SEMICOLONS at end of lines
+    singleQuote: true,         // Single quotes
+    trailingComma: 'none'      // NO TRAILING COMMAS
+  }
+]
+```
+
+#### Import/Order (import order)
+
+- Mandatory alphabetical order (`alphabetize: { order: 'asc' }`)
+- Import groups in this order:
+  1. `builtin` (Node.js modules)
+  2. `external` (npm packages)
+  3. `internal` (project internal imports)
+  4. `['parent', 'sibling', 'index']` (relative imports)
+- Special pattern for cozy-\_ and twake-\_ (position after external)
+- Empty line between each group (`newlines-between: 'always'`)
+
+#### React
+
+- `react/prop-types`: off (disabled)
+- `react/jsx-curly-brace-presence`: no unnecessary braces for props and children
+- No `display-name` in .spec files
+
+#### TypeScript (if applicable)
+
+- `explicit-function-return-type`: required
+- `no-explicit-any`: forbidden
+
+### Compliant code example
+
+```javascript
+import React from "react";
+
+import Button from "cozy-ui/transpiled/react/Buttons";
+import cx from "classnames";
+
+import FieldInput from "./FieldInput";
+import { makeIsRequiredError } from "./helpers";
+
+const MyComponent = ({ name, label }) => {
+  const isError = makeIsRequiredError(name);
+
+  return (
+    <div className={cx("u-mt-1", { "u-flex": isError })}>
+      <FieldInput name={name} label={label} />
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+Note:
+
+- No semicolons
+- Single quotes
+- No trailing comma
+- Alphabetical import order (React before Button, Button before cx)
+- Empty line between import groups (builtin/external, external/internal, etc.)

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -4,16 +4,32 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Field } from 'react-final-form'
 
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInputWrapper from './FieldInputWrapper'
 import HasValueCondition from './HasValueCondition'
 import { RelatedContactList } from './RelatedContactList'
+import RemoveButton from './RemoveButton'
 import { locales } from './locales'
-import styles from './styles.styl'
 import ContactAddressDialog from '../ContactAddressDialog'
 import { fieldInputAttributesTypes, labelPropTypes } from '../types'
 
+const FieldAndRemove = ({ showRemove, onRemove, ...props }) => {
+  const { isMobile } = useBreakpoints()
+
+  if (isMobile) {
+    return (
+      <div className="u-flex u-flex-items-center u-w-100">
+        <Field {...props} />
+        {showRemove && <RemoveButton onRemove={onRemove} />}
+      </div>
+    )
+  }
+
+  return <Field {...props} />
+}
+
 const FieldInput = ({
   name,
   labelProps,
@@ -22,6 +38,8 @@ const FieldInput = ({
   contacts,
   contact,
   error,
+  onRemove,
+  showRemove,
   helperText,
   label,
   isInvisible
@@ -33,6 +51,7 @@ const FieldInput = ({
     useState(false)
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const handleClick = () => {
     if (name.includes('address')) {
@@ -50,14 +69,12 @@ const FieldInput = ({
 
   return (
     <div
-      className={cx(
-        className,
-        styles['contact-form-field__wrapper'],
-        'u-flex-column-s',
-        { 'u-flex': !isInvisible, 'u-dn': isInvisible }
-      )}
+      className={cx(className, 'u-flex-column-s u-flex-items-center u-w-100', {
+        'u-flex': !isInvisible,
+        'u-dn': isInvisible
+      })}
     >
-      <Field
+      <FieldAndRemove
         error={error}
         helperText={helperText}
         label={label}
@@ -66,6 +83,8 @@ const FieldInput = ({
         name={name}
         contact={contact}
         component={FieldInputWrapper}
+        showRemove={showRemove}
+        onRemove={onRemove}
         onFocus={onFocus}
         onClick={handleClick}
       />
@@ -85,7 +104,7 @@ const FieldInput = ({
       )}
       {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">
+          <div className="u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-100-s u-w-auto u-miw-4">
             <Field
               attributes={labelProps}
               name={`${name}Label`}
@@ -97,6 +116,7 @@ const FieldInput = ({
           </div>
         </HasValueCondition>
       )}
+      {showRemove && !isMobile && <RemoveButton onRemove={onRemove} />}
     </div>
   )
 }

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -4,10 +4,7 @@ import { FieldArray } from 'react-final-form-arrays'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import FieldInput from './FieldInput'
@@ -53,22 +50,14 @@ const FieldInputArray = ({
                     contacts={contacts}
                     contact={contact}
                     error={isError}
+                    index={index}
+                    showRemove={showRemove}
                     helperText={isError ? errors[inputName] : null}
                     name={inputName}
                     label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
                     labelProps={label}
+                    onRemove={() => removeField(fields, index)}
                   />
-                  {showRemove && (
-                    <ListItemIcon className="u-ml-half">
-                      <IconButton
-                        aria-label="delete"
-                        size="medium"
-                        onClick={() => removeField(fields, index)}
-                      >
-                        <Icon icon={CrossCircleIcon} />
-                      </IconButton>
-                    </ListItemIcon>
-                  )}
                 </div>
               )
             })}

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -35,9 +35,11 @@ const FieldInputLayout = ({
         'u-dn': isSecondary && !showSecondaryFields
       })}
     >
-      <div className="u-w-2-half">
-        {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
-      </div>
+      {icon && (
+        <div className="u-w-2-half">
+          <Icon icon={icon} color="var(--iconTextColor)" />
+        </div>
+      )}
       <div className="u-w-100">
         {layout === 'array' ? (
           <FieldInputArray

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/FieldInputWrapper.jsx

@@ -13,11 +13,12 @@ const FieldInputWrapper = ({
   attributes: {
     component,
     layout,
+    isHalfWidth,
     icon,
     isSecondary,
     validate,
     ...restAttributes
-  }, // ⚠️ `layout` `icon` `isSecondary` `validate` are removed from attributes to avoid DOM propagration, only used for business rules
+  }, // ⚠️ `layout` `isHalfWidth` `icon` `isSecondary` `validate` are removed from attributes to avoid DOM propagration, only used for business rules
   variant,
   fullWidth,
   ...props
@@ -37,6 +38,7 @@ const FieldInputWrapper = ({
       {...props}
       variant={variant}
       fullWidth={fullWidth}
+      size="small"
       minRows="2"
     />
   )

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/RemoveButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+
+const RemoveButton = ({ onRemove }) => {
+  return (
+    <ListItemIcon className="u-ml-half">
+      <IconButton aria-label="delete" size="medium" onClick={onRemove}>
+        <Icon icon={CrossCircleIcon} />
+      </IconButton>
+    </ListItemIcon>
+  )
+}
+
+export default RemoveButton

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -40,6 +40,7 @@ export const fields = [
     icon: null,
     type: 'text',
     layout: 'accordion',
+    isHalfWidth: true,
     subFields: [
       {
         name: 'additionalName',
@@ -56,7 +57,8 @@ export const fields = [
   {
     name: 'familyName',
     icon: null,
-    type: 'text'
+    type: 'text',
+    isHalfWidth: true
   },
   {
     name: 'company',

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/helpers.js

@@ -460,17 +460,26 @@ export const makeFields = (customFields, defaultFields) => {
     return defaultFields
   }
 
-  const fields = [...defaultFields]
+  let fields = [...defaultFields]
 
   customFields.forEach(customField => {
     const defaultField = fields.find(field => field.name === customField.name)
+
+    // If isRemoved is true, remove the field from the result
+    if (customField.isRemoved) {
+      if (defaultField) {
+        fields = fields.filter(field => field.name !== customField.name)
+      }
+      return
+    }
+
     const _field = defaultField || customField
 
     if (defaultField) {
       Object.assign(_field, customField)
     }
 
-    if (_field.position) {
+    if (_field.position !== undefined) {
       if (defaultField) {
         const fieldIndex = fields.indexOf(defaultField)
         fields.splice(fieldIndex, 1)

packages/cozy-ui-plus/src/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -441,6 +441,68 @@ describe('makeFields', () => {
       }
     ])
   })
+
+  it('should remove default field when custom field has isRemoved set to true', () => {
+    const defaultFields = [
+      { name: 'firstname' },
+      { name: 'lastname' },
+      { name: 'email' }
+    ]
+    const customFields = [{ name: 'lastname', isRemoved: true }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([{ name: 'firstname' }, { name: 'email' }])
+  })
+
+  it('should remove multiple default fields when multiple custom fields have isRemoved set to true', () => {
+    const defaultFields = [
+      { name: 'firstname' },
+      { name: 'lastname' },
+      { name: 'email' },
+      { name: 'phone' }
+    ]
+    const customFields = [
+      { name: 'lastname', isRemoved: true },
+      { name: 'phone', isRemoved: true }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([{ name: 'firstname' }, { name: 'email' }])
+  })
+
+  it('should ignore custom fields with isRemoved but no matching default field', () => {
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+    const customFields = [{ name: 'nonexistent', isRemoved: true }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual(defaultFields)
+  })
+
+  it('should handle mixed custom fields with isRemoved, position, and property overrides', () => {
+    const defaultFields = [
+      { name: 'firstname', type: 'text' },
+      { name: 'lastname', type: 'text' },
+      { name: 'email', type: 'email' },
+      { name: 'phone', type: 'tel' }
+    ]
+    const customFields = [
+      { name: 'lastname', isRemoved: true },
+      { name: 'email', isSecondary: true, position: 0 },
+      { name: 'middlename', position: 1 }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'email', type: 'email', isSecondary: true, position: 0 },
+      { name: 'middlename', position: 1 },
+      { name: 'firstname', type: 'text' },
+      { name: 'phone', type: 'tel' }
+    ])
+  })
 })
 
 describe('hasNoValues', () => {