cozy-ui 132.0.0 → 133.0.0-beta.1

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

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

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

@@ -1,25 +0,0 @@
-{
-  "Contacts": {
-    "AddModal": {
-      "ContactAddressDialog": {
-        "fields": {
-          "address": "Адрес",
-          "number": "Номер дома",
-          "street": "Почтовый адрес",
-          "code": "Почтовый индекс",
-          "city": "Город",
-          "country": "Страна",
-          "locality": "Район",
-          "building": "Здание",
-          "stairs": "Подъезд",
-          "floor": "Этаж",
-          "apartment": "Квартира",
-          "region": "Регион",
-          "entrycode": "Код подъезда"
-        },
-        "cancel": "Отменить",
-        "ok": "ОК"
-      }
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-{
-  "Contacts": {
-    "AddModal": {
-      "ContactAddressDialog": {
-        "fields": {
-          "address": "Địa chỉ",
-          "number": "Số nhà",
-          "street": "Địa chỉ bưu điện",
-          "code": "Mã bưu điện",
-          "city": "Thành phố",
-          "country": "Quốc gia",
-          "locality": "Địa phương",
-          "building": "Tòa nhà",
-          "stairs": "Cầu thang",
-          "floor": "Tầng",
-          "apartment": "Căn hộ",
-          "region": "Vùng",
-          "entrycode": "Mã ra vào"
-        },
-        "cancel": "Hủy",
-        "ok": "Ok"
-      }
-    }
-  }
-}

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

@@ -1,123 +0,0 @@
-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,
-  className,
-  attributes: { subFields, ...restAttributes },
-  contacts,
-  error,
-  helperText,
-  label,
-  isInvisible,
-  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(
-        className,
-        styles['contact-form-field__wrapper'],
-        'u-flex-column-s',
-        { 'u-flex': !isInvisible, 'u-dn': isInvisible }
-      )}
-    >
-      <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,
-  className: PropTypes.string,
-  labelProps: labelPropTypes,
-  attributes: fieldInputAttributesTypes,
-  /** Whether the field is visible by the user or not (still in the DOM anyway) */
-  isInvisible: PropTypes.bool,
-  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/FieldInputAccordion.jsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react'
-
-import FieldInput from './FieldInput'
-import { locales } from './locales'
-import Icon from '../../../Icon'
-import IconButton from '../../../IconButton'
-import DropdownIcon from '../../../Icons/Dropdown'
-import DropupIcon from '../../../Icons/Dropup'
-import { useI18n, useExtendI18n } from '../../../providers/I18n'
-
-const FieldInputAccordion = ({
-  attributes: { name, label, subFields, ...restAttributes },
-  contacts,
-  error,
-  helperText
-}) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const [showExtended, setShowExtended] = useState(false)
-
-  return (
-    <>
-      <div className="u-flex u-flex-items-baseline">
-        <FieldInput
-          attributes={restAttributes}
-          contacts={contacts}
-          error={error}
-          helperText={helperText}
-          name={name}
-          label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
-          labelProps={label}
-        />
-        <IconButton
-          className="u-ml-half"
-          size="medium"
-          onClick={() => setShowExtended(v => !v)}
-        >
-          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
-        </IconButton>
-      </div>
-      {subFields.map(({ name, ...attributes }, index) => {
-        return (
-          <FieldInput
-            key={index}
-            className="u-mt-1"
-            attributes={attributes}
-            name={name}
-            isInvisible={!showExtended}
-            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
-          />
-        )
-      })}
-    </>
-  )
-}
-
-export default FieldInputAccordion

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

@@ -1,80 +0,0 @@
-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-baseline', {
-                    '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

@@ -1,76 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import FieldInput from './FieldInput'
-import FieldInputAccordion from './FieldInputAccordion'
-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: { layout, icon, isSecondary, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` here are removed from attributes to avoid DOM propagration
-  contacts,
-  showSecondaryFields,
-  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-mt-1', {
-        'u-flex-items-center': !layout,
-        'u-flex-items-baseline': !!layout,
-        'u-flex': !isSecondary || showSecondaryFields,
-        'u-dn': isSecondary && !showSecondaryFields
-      })}
-    >
-      <div className="u-w-2-half">
-        {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
-      </div>
-      <div className="u-w-100">
-        {layout === 'array' ? (
-          <FieldInputArray
-            attributes={attributes}
-            contacts={contacts}
-            formProps={formProps}
-          />
-        ) : layout === 'accordion' ? (
-          <FieldInputAccordion
-            attributes={attributes}
-            contacts={contacts}
-            error={isError}
-            helperText={isError ? errors[name] : null}
-          />
-        ) : (
-          <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

@@ -1,43 +0,0 @@
-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: { component, ...restAttributes },
-  variant,
-  fullWidth,
-  ...props
-}) => {
-  const Component =
-    component ||
-    (restAttributes.customLabelOptions
-      ? TextFieldCustomLabelSelect
-      : restAttributes?.select
-      ? TextFieldSelect
-      : TextField)
-
-  return (
-    <Component
-      {...restAttributes}
-      {...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

@@ -1,31 +0,0 @@
-/*
-  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

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

@@ -1,79 +0,0 @@
-import React from 'react'
-import { Form } from 'react-final-form'
-import renderer from 'react-test-renderer'
-
-import HasValueCondition from './HasValueCondition'
-
-describe('HasValueCondition component', () => {
-  it('should render its children if value is truthy', () => {
-    const jsx = (
-      <Form
-        initialValues={{ foo: 'anything' }}
-        onSubmit={jest.fn()}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <HasValueCondition name="foo">
-              <span>Foo should be here</span>
-            </HasValueCondition>
-          </form>
-        )}
-      />
-    )
-    const tree = renderer.create(jsx).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should not render its children if value is falsy', () => {
-    const jsx = (
-      <Form
-        initialValues={{ foo: '' }}
-        onSubmit={jest.fn()}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <HasValueCondition name="foo">
-              <span>Foo should not be here</span>
-            </HasValueCondition>
-          </form>
-        )}
-      />
-    )
-    const tree = renderer.create(jsx).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render its children if value is falsy but other condition is fulfilled', () => {
-    const jsx = (
-      <Form
-        initialValues={{ foo: '' }}
-        onSubmit={jest.fn()}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <HasValueCondition name="foo" otherCondition={true}>
-              <span>Foo should be here</span>
-            </HasValueCondition>
-          </form>
-        )}
-      />
-    )
-    const tree = renderer.create(jsx).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should not render its children if value is falsy and other condition is not fulfilled', () => {
-    const jsx = (
-      <Form
-        initialValues={{ foo: '' }}
-        onSubmit={jest.fn()}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <HasValueCondition name="foo" otherCondition={false}>
-              <span>Foo should not be here</span>
-            </HasValueCondition>
-          </form>
-        )}
-      />
-    )
-    const tree = renderer.create(jsx).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-})

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

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useForm } from 'react-final-form'
-
-import { makeDisplayName } from 'cozy-client/dist/models/contact'
-
-import ContactsListModal from '../../../ContactsListModal'
-
-export const RelatedContactList = ({ name, onClose, contacts }) => {
-  const { change } = useForm()
-
-  /**
-   * @param {import('cozy-client/types/types').IOCozyContact} contact
-   */
-  const onClickContactsListModal = contact => {
-    // Use `makeDisplayName` because if the contact is newly created, it has no `displayName` attribute. (Creation of a contact when selecting a linked contact)
-    change(name, makeDisplayName(contact))
-    change(`${name}Id`, contact._id)
-    onClose()
-  }
-
-  return (
-    <ContactsListModal
-      dismissAction={onClose}
-      onItemClick={contact => onClickContactsListModal(contact)}
-      contacts={contacts}
-    />
-  )
-}
-
-RelatedContactList.propTypes = {
-  name: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  contacts: PropTypes.shape({
-    data: PropTypes.arrayOf(PropTypes.object)
-  }).isRequired
-}

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

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-
-import TextFieldSelect from './TextFieldSelect'
-import { makeCustomLabel, makeInitialCustomValue } from './helpers'
-import { locales } from './locales'
-import { useI18n, useExtendI18n } from '../../../providers/I18n'
-import CustomLabelDialog from '../CustomLabelDialog'
-import { FieldInputWrapperPropTypes } from '../types'
-
-const TextFieldCustomLabelSelect = ({
-  name,
-  value,
-  options,
-  customLabelOptions,
-  onChange,
-  ...props
-}) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const [openModal, setOpenModal] = useState(false)
-  const [customValue, setCustomValue] = useState(() =>
-    makeInitialCustomValue(name, value)
-  )
-
-  const customOption = customValue
-    ? [
-        {
-          value: customValue,
-          label: makeCustomLabel(customValue, t),
-          translated: true,
-          onClick: () => {
-            // trigger modal only if customValue is already selected
-            if (value === customValue) {
-              return setOpenModal(true)
-            }
-          }
-        }
-      ]
-    : [
-        {
-          value: 'skip',
-          label: 'Contacts.AddModal.ContactForm.label.custom',
-          onClick: () => setOpenModal(true)
-        }
-      ]
-  const _options = options.concat(customOption)
-
-  return (
-    <>
-      <TextFieldSelect
-        {...props}
-        name={name}
-        value={value}
-        options={_options}
-        onChange={ev => {
-          if (ev.target.value === 'skip') {
-            return
-          }
-
-          onChange(ev)
-        }}
-      />
-      {openModal && (
-        <CustomLabelDialog
-          customValue={customValue}
-          customLabelOptions={customLabelOptions}
-          setCustomValue={setCustomValue}
-          onSubmit={onChange}
-          onClose={() => setOpenModal(false)}
-        />
-      )}
-    </>
-  )
-}
-
-TextFieldCustomLabelSelect.prototype = FieldInputWrapperPropTypes
-
-export default TextFieldCustomLabelSelect