cozy-ui 128.2.0 → 128.3.0

package/react/Contacts/AddModal/index.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import ContactForm, { getSubmitContactForm } from './ContactForm'
+import { locales } from './locales'
+import Button from '../../Buttons'
+import { FixedDialog } from '../../CozyDialogs'
+import { useAlert } from '../../providers/Alert'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+
+const AddModal = ({ contacts, contact, onSubmit, onClose }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+  const [isBusy, setIsBusy] = useState(false)
+  // Tip to prevent fields from being filled with old information for a short period of time during form submission.
+  const [selfContact, setSelfContact] = useState(contact)
+
+  const handleClick = event => {
+    const submitContactForm = getSubmitContactForm()
+    submitContactForm(event)
+  }
+
+  /**
+   * @param {import('cozy-client/types/types').IOCozyContact} formData - Contact document (except _id, _rev & _type attrs to create a new contact)
+   */
+  const handleFormSubmit = async formData => {
+    setSelfContact(formData)
+    setIsBusy(true)
+    try {
+      await onSubmit(formData)
+      onClose()
+    } catch (err) {
+      setIsBusy(false)
+      console.warn(err) // eslint-disable-line no-console
+      showAlert({
+        severity: 'error',
+        message: t('Contacts.AddModal.error.save')
+      })
+    }
+  }
+
+  return (
+    <FixedDialog
+      open
+      onClose={onClose}
+      title={
+        contact
+          ? t('Contacts.AddModal.edit-contact')
+          : t('Contacts.AddModal.create_contact')
+      }
+      content={
+        <ContactForm
+          contacts={contacts}
+          contact={selfContact}
+          onSubmit={handleFormSubmit}
+        />
+      }
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('Contacts.AddModal.cancel')}
+            onClick={onClose}
+          />
+          <Button
+            className="u-ml-half"
+            type="submit"
+            label={t('Contacts.AddModal.save')}
+            busy={isBusy}
+            onClick={handleClick}
+          />
+        </>
+      }
+    />
+  )
+}
+
+export default AddModal

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "An error occurred while saving the contact, please try again"
+      },
+      "edit-contact": "Edit contact",
+      "create_contact": "Create a contact",
+      "cancel": "Cancel",
+      "save": "Save"
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "Une erreur est survenue lors de l'enregistrement du contact, veuillez réessayer"
+      },
+      "edit-contact": "Edit contact",
+      "create_contact": "Créer un contact",
+      "cancel": "Annuler",
+      "save": "Enregistrer"
+    }
+  }
+}

package/react/Contacts/AddModal/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/mocks.js

@@ -0,0 +1,249 @@
+export const johnDoeContact = {
+  id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _type: 'io.cozy.contacts',
+  _rev: '1-19c313536e8b27473aa26bf105b03269',
+  address: [
+    {
+      formattedAddress: '94 Hinton Road 05034 Fresno, Singapore',
+      type: 'Home',
+      primary: true
+    },
+    {
+      pobox: '2',
+      street: '426 Runolfsson Knolls',
+      city: 'Port Easter',
+      region: undefined,
+      country: 'Cocos (Keeling) Islands',
+      postcode: '84573',
+      type: 'Work'
+    }
+  ],
+  email: [
+    {
+      address: 'john.doe@posteo.net',
+      type: 'personal',
+      primary: false
+    },
+    {
+      address: 'john.doe@cozycloud.cc',
+      primary: true
+    }
+  ],
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  cozy: [
+    {
+      type: 'MyCozy',
+      primary: true,
+      url: 'https://johndoe.mycozy.cloud'
+    }
+  ],
+  fullname: 'John Doe',
+  name: {
+    givenName: 'John',
+    familyName: 'Doe',
+    additionalName: 'J.'
+  },
+  metadata: {
+    cozy: true,
+    version: 1
+  },
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  phone: [
+    {
+      number: '+33 (2)0 90 00 54 04',
+      primary: true
+    },
+    {
+      number: '+33 6 77 11 22 33',
+      primary: false
+    }
+  ]
+}
+
+export const johnDoeFormValues = {
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  cozy: 'https://johndoe.mycozy.cloud',
+  cozyLabel: '{"type":"MyCozy"}',
+  address: [
+    {
+      fieldId: 'fieldId_1',
+      address: '94 Hinton Road 05034 Fresno, Singapore',
+      addressLabel: '{"type":"Home"}',
+      addressapartment: undefined,
+      addressbuilding: undefined,
+      addresscity: undefined,
+      addresscode: undefined,
+      addressregion: undefined,
+      addresscountry: undefined,
+      addressentrycode: undefined,
+      addressfloor: undefined,
+      addresslocality: undefined,
+      addressnumber: undefined,
+      addressstairs: undefined,
+      addressstreet: '94 Hinton Road 05034 Fresno, Singapore'
+    },
+    {
+      fieldId: 'fieldId_2',
+      address:
+        '426 Runolfsson Knolls 84573 Port Easter Cocos (Keeling) Islands',
+      addressLabel: '{"type":"Work"}',
+      addressapartment: undefined,
+      addressbuilding: undefined,
+      addresscity: 'Port Easter',
+      addressregion: undefined,
+      addresscode: '84573',
+      addresscountry: 'Cocos (Keeling) Islands',
+      addressentrycode: undefined,
+      addressfloor: undefined,
+      addresslocality: undefined,
+      addressnumber: undefined,
+      addressstairs: undefined,
+      addressstreet: '426 Runolfsson Knolls'
+    }
+  ],
+  email: [
+    {
+      fieldId: 'fieldId_3',
+      email: 'john.doe@cozycloud.cc',
+      emailLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_4',
+      email: 'john.doe@posteo.net',
+      emailLabel: '{"type":"personal"}'
+    }
+  ],
+  phone: [
+    {
+      fieldId: 'fieldId_5',
+      phone: '+33 (2)0 90 00 54 04',
+      phoneLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_6',
+      phone: '+33 6 77 11 22 33',
+      phoneLabel: undefined
+    }
+  ],
+  givenName: 'John',
+  additionalName: 'J.',
+  familyName: 'Doe',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  relatedContact: [
+    {
+      relatedContactId: 'relatedContactID',
+      relatedContactLabel: '{"type":"related"}'
+    }
+  ]
+}
+
+export const johnDoeContactWithRelated = {
+  id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _type: 'io.cozy.contacts',
+  _rev: '1-19c313536e8b27473aa26bf105b03269',
+  address: [
+    {
+      formattedAddress: '94 Hinton Road 05034 Fresno, Singapore',
+      type: 'Home',
+      primary: true
+    },
+    {
+      pobox: '2',
+      street: '426 Runolfsson Knolls',
+      city: 'Port Easter',
+      region: undefined,
+      country: 'Cocos (Keeling) Islands',
+      postcode: '84573',
+      type: 'Work'
+    }
+  ],
+  email: [
+    {
+      address: 'john.doe@posteo.net',
+      type: 'personal',
+      primary: false
+    },
+    {
+      address: 'john.doe@cozycloud.cc',
+      primary: true
+    }
+  ],
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  cozy: [
+    {
+      type: 'MyCozy',
+      primary: true,
+      url: 'https://johndoe.mycozy.cloud'
+    }
+  ],
+  fullname: 'John Doe',
+  name: {
+    givenName: 'John',
+    familyName: 'Doe',
+    additionalName: 'J.'
+  },
+  metadata: {
+    cozy: true,
+    version: 1
+  },
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  phone: [
+    {
+      number: '+33 (2)0 90 00 54 04',
+      primary: true
+    },
+    {
+      number: '+33 6 77 11 22 33',
+      primary: false
+    }
+  ],
+
+  relationships: {
+    accounts: { data: [] },
+    groups: { data: [] },
+    related: {
+      data: [
+        {
+          metadata: { relationTypes: ['spouse'] },
+          _id: '5b49553c5916cf7b5b2a5f48600078a8',
+          _type: 'io.cozy.contacts'
+        }
+      ]
+    }
+  },
+  related: {
+    target: {
+      id: '4e33fd27e1d8e55a34742bac6d16d3bd',
+      _id: '4e33fd27e1d8e55a34742bac6d16d3bd',
+      _type: 'io.cozy.contacts',
+      _rev: '6-57f4ab78b1fb97bb90ea273ec881f196',
+      company: '',
+      fullname: 'John Doe',
+      me: true,
+      note: ''
+    },
+    name: 'related',
+    doctype: 'io.cozy.contacts',
+    data: [
+      {
+        displayName: 'Alice Doe',
+        _id: '5b49553c5916cf7b5b2a5f48600078a8',
+        _type: 'io.cozy.contacts'
+      }
+    ]
+  }
+}

package/react/Contacts/AddModal/types.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types'
+
+import { iconPropType } from '../../Icon'
+
+export const labelPropTypes = PropTypes.shape({
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string
+    })
+  ),
+  customLabelOptions: PropTypes.shape({
+    hide: PropTypes.bool,
+    defaultType: PropTypes.string,
+    defaultLabel: PropTypes.string
+  })
+})
+
+export const fieldInputAttributesTypes = PropTypes.shape({
+  name: PropTypes.string,
+  icon: iconPropType,
+  type: PropTypes.string,
+  label: labelPropTypes,
+  isArray: PropTypes.bool,
+  subFields: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      type: PropTypes.string.isRequired
+    })
+  ),
+  labelProps: PropTypes.shape({
+    shrink: PropTypes.bool
+  })
+})
+
+export const FieldInputWrapperPropTypes = {
+  // See official documentation for more information: https://final-form.org/docs/react-final-form/types/FieldRenderProps
+  input: PropTypes.object,
+  //
+  attributes: fieldInputAttributesTypes,
+  // Destructuring props
+  // See official documentation for more information: https://final-form.org/docs/react-final-form/types/FieldRenderProps
+  meta: PropTypes.object,
+  //
+  id: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  variant: PropTypes.string,
+  customLabelOptions: PropTypes.shape({
+    hide: PropTypes.bool,
+    defaultType: PropTypes.string.isRequired,
+    defaultLabel: PropTypes.string.isRequired
+  }),
+  fullWidth: PropTypes.bool
+}

package/react/Contacts/Header/Readme.md

@@ -1,5 +1,3 @@
-<!-- For styleguidist, a .md file is needed in directories -->
-
 Must be used within `SelectedGroupProvider` and `AlertProvider`.
 
 ```jsx

package/react/providers/DemoProvider.jsx

@@ -22,13 +22,14 @@ const defaultClient = {
   })
 }
 
-const DemoProvider = ({ client, variant, children }) => {
+const DemoProvider = ({ client, variant, dictRequire, children }) => {
   const lang = localStorage.getItem('lang') || 'en'
+  const _dictRequire = dictRequire ? dictRequire : () => ({})
 
   return (
     <CozyProvider client={client || defaultClient}>
       <BreakpointsProvider>
-        <I18n lang={lang} dictRequire={() => ({})}>
+        <I18n lang={lang} dictRequire={_dictRequire}>
           <CozyTheme variant={variant}>{children}</CozyTheme>
         </I18n>
       </BreakpointsProvider>

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/helpers.d.ts

@@ -0,0 +1,4 @@
+export function makeFormattedAddressWithSubFields(subFieldsState: {
+    name: string;
+    value: string;
+}[], t: any): string;

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

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 var makeFormattedAddressWithSubFields = function makeFormattedAddressWithSubFields(subFieldsState, t) {
+  var normalizedAddress = subFieldsState.reduce(function (acc, curr) {
+    var key = curr.name.split('.').pop().replace(/address/, '');
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, curr.value || ''));
+  }, {});
+  return cleanFormattedAddress(t('formatted.address', normalizedAddress));
+};

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/index.d.ts

@@ -0,0 +1,39 @@
+export default ContactAddressModal;
+declare function ContactAddressModal({ onClose, name, subFields }: {
+    onClose: any;
+    name: any;
+    subFields: any;
+}): JSX.Element;
+declare namespace ContactAddressModal {
+    namespace propTypes {
+        const onClose: PropTypes.Validator<(...args: any[]) => any>;
+        const name: PropTypes.Validator<string>;
+        const subFields: PropTypes.Validator<(PropTypes.InferProps<{
+            name: PropTypes.Requireable<string>;
+            icon: PropTypes.Requireable<string | object>;
+            type: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Requireable<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    value: PropTypes.Requireable<string>;
+                    label: PropTypes.Requireable<string>;
+                }> | null)[]>;
+                customLabelOptions: PropTypes.Requireable<PropTypes.InferProps<{
+                    hide: PropTypes.Requireable<boolean>;
+                    defaultType: PropTypes.Requireable<string>;
+                    defaultLabel: PropTypes.Requireable<string>;
+                }>>;
+            }>>;
+            isArray: PropTypes.Requireable<boolean>;
+            subFields: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                icon: PropTypes.Requireable<string>;
+                type: PropTypes.Validator<string>;
+            }> | null)[]>;
+            labelProps: PropTypes.Requireable<PropTypes.InferProps<{
+                shrink: PropTypes.Requireable<boolean>;
+            }>>;
+        }> | null)[]>;
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/index.js

@@ -0,0 +1,87 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Field, useForm } from 'react-final-form';
+import { makeFormattedAddressWithSubFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactAddressDialog/helpers";
+import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactAddressDialog/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import { FixedDialog } from "cozy-ui/transpiled/react/CozyDialogs";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import FieldInputWrapper from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputWrapper";
+import { fieldInputAttributesTypes } from "cozy-ui/transpiled/react/Contacts/AddModal/types";
+
+var ContactAddressModal = function ContactAddressModal(_ref) {
+  var onClose = _ref.onClose,
+      name = _ref.name,
+      subFields = _ref.subFields;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useForm = useForm(),
+      getFieldState = _useForm.getFieldState,
+      change = _useForm.change;
+
+  var subFieldsState = subFields.map(function (subField) {
+    return getFieldState("".concat(name).concat(subField.name));
+  });
+
+  var onConfirm = function onConfirm() {
+    var hasBeenModified = subFieldsState.some(function (state) {
+      return !state.pristine;
+    });
+
+    if (!hasBeenModified) {
+      return onClose();
+    }
+
+    var formattedAddress = makeFormattedAddressWithSubFields(subFieldsState, t);
+    change(name, formattedAddress);
+    onClose();
+  };
+
+  var onCancel = function onCancel() {
+    subFieldsState.forEach(function (_ref2) {
+      var name = _ref2.name,
+          initial = _ref2.initial;
+      return change(name, initial);
+    });
+    onClose();
+  };
+
+  return /*#__PURE__*/React.createElement(FixedDialog, {
+    open: true,
+    onClose: onClose,
+    size: "small",
+    title: t('Contacts.AddModal.ContactAddressDialog.fields.address'),
+    content: subFields.map(function (subField) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: subField.name,
+        className: "u-mt-1"
+      }, /*#__PURE__*/React.createElement(Field, {
+        label: t("Contacts.AddModal.ContactAddressDialog.fields.".concat(subField.name)),
+        attributes: {
+          type: subField.type
+        },
+        name: "".concat(name).concat(subField.name),
+        component: FieldInputWrapper
+      }));
+    }),
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      label: t('Contacts.AddModal.ContactAddressDialog.cancel'),
+      onClick: onCancel
+    }), /*#__PURE__*/React.createElement(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/transpiled/react/Contacts/AddModal/ContactAddressDialog/locales/index.d.ts

@@ -0,0 +1,6 @@
+export namespace locales {
+    export { en };
+    export { fr };
+}
+import en from "./en.json";
+import fr from "./fr.json";

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/locales/index.js

@@ -0,0 +1,54 @@
+var en = {
+  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"
+      }
+    }
+  }
+};
+var fr = {
+  Contacts: {
+    AddModal: {
+      ContactAddressDialog: {
+        fields: {
+          address: "Adresse",
+          number: "Num\xE9ro de voie",
+          street: "Adresse postal",
+          code: "Code postal",
+          city: "Ville",
+          country: "Pays",
+          locality: "Lieu-dit",
+          building: "B\xE2timent",
+          stairs: "Escalier",
+          floor: "Etage",
+          apartment: "Appartement",
+          region: "R\xE9gion",
+          entrycode: "Code d'entr\xE9e"
+        },
+        cancel: "Annuler",
+        ok: "Ok"
+      }
+    }
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};