cozy-ui 132.1.0 → 133.0.0

package/react/ContactsList/helpers.js

@@ -1,132 +0,0 @@
-import get from 'lodash/get'
-
-export function buildLastNameFirst(contact) {
-  const givenName =
-    contact.name && contact.name.givenName
-      ? contact.name.givenName.toUpperCase()
-      : ''
-  const familyName =
-    contact.name && contact.name.familyName
-      ? contact.name.familyName.toUpperCase()
-      : ''
-
-  if (!givenName && !familyName && contact.fullname) {
-    return contact.fullname.toUpperCase().trim()
-  } else {
-    return `${familyName} ${givenName}`.trim()
-  }
-}
-
-export const sortLastNameFirst = (contact, comparedContact) => {
-  const nameA = buildLastNameFirst(contact)
-  const nameB = buildLastNameFirst(comparedContact)
-  return nameA.localeCompare(nameB)
-}
-
-export const sortContacts = contacts => contacts.sort(sortLastNameFirst)
-
-/**
- * Build header for a contact (first letter of last name)
- * @param {object} contact
- * @param {function} t translation function
- * @returns {string} header
- */
-const makeHeader = (contact, t) => {
-  if (contact.me) return t('me')
-
-  const name = buildLastNameFirst(contact)
-  return name[0] || t('empty')
-}
-
-/**
- * Build header for a contact (first letter of indexes.byFamilyNameGivenNameEmailCozyUrl)
- * @param {object} contact
- * @param {function} t translation function
- * @returns {string} header
- */
-const makeHeaderForIndexedContacts = (contact, t) => {
-  if (contact.me) return t('me')
-  if (contact.cozyMetadata?.favorite) return t('favorite')
-
-  const index = get(contact, 'indexes.byFamilyNameGivenNameEmailCozyUrl', '')
-  const hasIndex = index !== null && index.length > 0
-
-  if (hasIndex) {
-    const firstLetterWithoutAccent = index[0]
-      .normalize('NFD')
-      .replace(/\p{Diacritic}/gu, '')
-    return firstLetterWithoutAccent
-  }
-
-  return t('empty')
-}
-
-/**
- * @typedef {Object.<string, Object>} CategorizedContactsResult
- */
-
-/**
- * Categorize contacts by first letter of last name
- * Expl.: all contacts with A as first letter will be in A category
- * @param {object[]} contacts io.cozy.contacts documents
- * @param {function} t translation function
- * @returns {CategorizedContactsResult} Categorized contacts
- */
-export const categorizeContacts = (contacts, t) =>
-  contacts.reduce((acc, contact) => {
-    const header = makeHeader(contact, t)
-    acc[header] = acc[header] || []
-    acc[header].push(contact)
-    return acc
-  }, {})
-
-/**
- * Sort headers (first letter of last name) alphabetically and put 'me' and 'empty' first
- * @param {CategorizedContactsResult} categorized categorized contacts
- * @param {function} t translation function
- * @returns {string[]}
- */
-export const sortHeaders = (categorized, t) => {
-  const headers = Object.keys(categorized)
-  const notEmptyAndMyselfHeaders = headers.filter(
-    header => header !== t('empty') && header !== t('me')
-  )
-  const notEmptyAndMyselfSorted = notEmptyAndMyselfHeaders.slice().sort()
-
-  if (headers.length === notEmptyAndMyselfHeaders.length) {
-    return notEmptyAndMyselfSorted
-  }
-
-  const headersSorted = []
-  if (headers.includes(t('me'))) {
-    headersSorted.push(t('me'))
-  }
-  if (headers.includes(t('empty'))) {
-    headersSorted.push(t('empty'))
-  }
-
-  return headersSorted.concat(notEmptyAndMyselfSorted)
-}
-
-/**
- * Counts how many contacts are categorized by first letter and store it in `groupCounts`
- * Expl.: if there is 3 contacts in A and 2 in B, it will return [3,2]
- * Also store first letters and store them in `groupLabels`
- * @param {array} contacts - Array of io.cozy.contact documents
- * @returns {object}
- */
-export const makeGroupLabelsAndCounts = (contacts, t) => {
-  return contacts.reduce(
-    (acc, contact) => {
-      const header = makeHeaderForIndexedContacts(contact, t)
-      if (!acc.groupLabels.includes(header)) {
-        acc.groupLabels.push(header)
-      }
-      const idx = acc.groupLabels.indexOf(header)
-      const val = acc.groupCounts[idx] || 0
-      acc.groupCounts[idx] = val + 1
-      return acc
-    },
-    { groupLabels: [], groupCounts: [] }
-  )
-}

package/react/ContactsList/helpers.spec.js

@@ -1,150 +0,0 @@
-import {
-  sortLastNameFirst,
-  sortHeaders,
-  makeGroupLabelsAndCounts
-} from './helpers'
-
-const t = x => x
-
-describe('Sort contacts', () => {
-  describe('By Last Name', () => {
-    it('should sort contact by last name', () => {
-      const contacts = [
-        { name: { givenName: '', familyName: '' } },
-        { name: { givenName: 'A', familyName: 'A' } },
-        { name: { givenName: 'B', familyName: 'A' } },
-        { name: { givenName: 'A', familyName: 'B' } },
-        { name: { givenName: 'B', familyName: 'B' } },
-        { name: { givenName: 'A', familyName: '' } },
-        { name: { givenName: 'B', familyName: '' } },
-        { name: { givenName: 'A', familyName: 'C' } },
-        { name: { givenName: 'C', familyName: 'B' } },
-        { name: { givenName: 'B', familyName: 'C' } },
-        { name: { givenName: '', familyName: 'B' } },
-        { name: { givenName: '', familyName: 'A' } }
-      ]
-      const sortedContact = [...contacts].sort(sortLastNameFirst)
-      expect(sortedContact).toEqual([
-        { name: { givenName: '', familyName: '' } },
-        { name: { givenName: 'A', familyName: '' } },
-        { name: { givenName: '', familyName: 'A' } },
-        { name: { givenName: 'A', familyName: 'A' } },
-        { name: { givenName: 'B', familyName: 'A' } },
-        { name: { givenName: 'B', familyName: '' } },
-        { name: { givenName: '', familyName: 'B' } },
-        { name: { givenName: 'A', familyName: 'B' } },
-        { name: { givenName: 'B', familyName: 'B' } },
-        { name: { givenName: 'C', familyName: 'B' } },
-        { name: { givenName: 'A', familyName: 'C' } },
-        { name: { givenName: 'B', familyName: 'C' } }
-      ])
-    })
-
-    it('should work with incomplete data', () => {
-      const contacts = [
-        { name: { givenName: '' } },
-        { name: { givenName: 'A' } },
-        { name: { givenName: 'A', familyName: 'A' } },
-        { name: { givenName: 'B', familyName: 'A' } },
-        { name: { familyName: 'B' } },
-        { name: { familyName: 'C' } },
-        { name: { givenName: 'B', familyName: 'B' } },
-        { name: { givenName: 'A', familyName: '' } },
-        { name: { givenName: 'B', familyName: '' } },
-        { name: { givenName: 'A', familyName: 'C' } },
-        { name: { givenName: 'C', familyName: 'B' } },
-        { name: { givenName: 'B', familyName: 'C' } },
-        { name: { givenName: '', familyName: 'B' } },
-        { name: { givenName: '', familyName: 'A' } }
-      ]
-      const sortedContact = [...contacts].sort(sortLastNameFirst)
-      expect(sortedContact).toEqual([
-        { name: { givenName: '' } },
-        { name: { givenName: 'A' } },
-        { name: { givenName: 'A', familyName: '' } },
-        { name: { givenName: '', familyName: 'A' } },
-        { name: { givenName: 'A', familyName: 'A' } },
-        { name: { givenName: 'B', familyName: 'A' } },
-        { name: { familyName: 'B' } },
-        { name: { givenName: 'B', familyName: '' } },
-        { name: { givenName: '', familyName: 'B' } },
-        { name: { givenName: 'B', familyName: 'B' } },
-        { name: { givenName: 'C', familyName: 'B' } },
-        { name: { familyName: 'C' } },
-        { name: { givenName: 'A', familyName: 'C' } },
-        { name: { givenName: 'B', familyName: 'C' } }
-      ])
-    })
-  })
-})
-
-describe('sortHeaders', () => {
-  const t = jest.fn(x => x)
-  it('should return headers sorted', () => {
-    const contacts = {
-      F: [],
-      B: [],
-      H: []
-    }
-
-    const sortedHeaders = sortHeaders(contacts, t)
-
-    expect(sortedHeaders).toEqual(['B', 'F', 'H'])
-  })
-
-  it('Should sort in the following order "me", "empty", "A", "..."', () => {
-    const contacts = {
-      F: [],
-      B: [],
-      me: [],
-      H: [],
-      empty: []
-    }
-
-    const sortedHeaders = sortHeaders(contacts, t)
-
-    expect(sortedHeaders).toEqual(['me', 'empty', 'B', 'F', 'H'])
-  })
-})
-
-describe('makeGroupLabelsAndCounts', () => {
-  it('should returns labels and counts', () => {
-    const contacts = [
-      { name: 'Alex', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
-      { name: 'Alan', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'A' } },
-      { name: 'Cleo', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
-      { name: 'Cloé', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
-      { name: 'Clotilde', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
-      { name: 'Constant', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' } },
-      {
-        name: 'Christophe',
-        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'C' }
-      },
-      { name: 'Bernard', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
-      { name: 'Baptiste', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'B' } },
-      { name: 'Xavier', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'X' } },
-      { name: 'Zorro', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Z' } },
-      { name: '', indexes: { byFamilyNameGivenNameEmailCozyUrl: '' } },
-      { name: {}, indexes: { byFamilyNameGivenNameEmailCozyUrl: {} } },
-      { name: 'John', indexes: { byFamilyNameGivenNameEmailCozyUrl: null } },
-      {
-        name: 'Connor',
-        indexes: { byFamilyNameGivenNameEmailCozyUrl: undefined }
-      },
-      { name: 'Àlbert', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'À' } },
-      {
-        name: 'Alice',
-        me: true,
-        indexes: { byFamilyNameGivenNameEmailCozyUrl: 'Alice' }
-      },
-      { name: 'Èllen', indexes: { byFamilyNameGivenNameEmailCozyUrl: 'È' } }
-    ]
-
-    const res = makeGroupLabelsAndCounts(contacts, t)
-
-    expect(res).toStrictEqual({
-      groupLabels: ['A', 'C', 'B', 'X', 'Z', 'empty', 'me', 'E'],
-      groupCounts: [3, 5, 2, 1, 1, 4, 1, 1]
-    })
-  })
-})

package/react/ContactsList/index.js

@@ -1,3 +0,0 @@
-import ContactsList from './ContactsList'
-
-export default ContactsList

package/react/ContactsList/locales/en.json

@@ -1,5 +0,0 @@
-{
-  "empty": "EMPTY",
-  "me": "me",
-  "favorite": "favorites"
-}

package/react/ContactsList/locales/fr.json

@@ -1,5 +0,0 @@
-{
-  "empty": "VIDE",
-  "me": "moi",
-  "favorite": "favoris"
-}

package/react/ContactsList/locales/ru.json

@@ -1,5 +0,0 @@
-{
-  "empty": "ПУСТО",
-  "me": "я",
-  "favorite": "избранное"
-}

package/react/ContactsList/locales/vi.json

@@ -1,5 +0,0 @@
-{
-  "empty": "TRỐNG",
-  "me": "tôi",
-  "favorite": "yêu thích"
-}

package/react/ContactsList/locales/withContactsListLocales.jsx

@@ -1,14 +0,0 @@
-import en from './en.json'
-import fr from './fr.json'
-import ru from './ru.json'
-import vi from './vi.json'
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
-
-export const locales = {
-  en,
-  fr,
-  ru,
-  vi
-}
-
-export default withOnlyLocales(locales)

package/react/ContactsList/styles.styl

@@ -1,35 +0,0 @@
-@require 'settings/breakpoints.styl'
-
-.contact
-    color var(--secondaryTextColor)
-
-    +small-screen()
-        height auto
-
-.contact--clickable
-    cursor pointer
-
-.contact-phone
-    flex 0 0 12rem
-
-.contact-cozyurl
-    flex 0 0 12rem
-
-.contact-email
-    flex-basis 30%
-
-.contact-myself
-    color var(--secondaryTextColor)
-    padding-left .5rem
-
-.contact-identity
-    flex-basis 30%
-
-    +small-screen()
-        flex 1 1 auto
-
-.contact-firstname
-    margin-left 1rem
-
-.contact-avatar
-    flex-shrink 0

package/react/ContactsListModal/AddContact/AddContactActions.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import Button from '../../Buttons'
-import { withContactsListLocales } from '../withContactsListLocales'
-
-const AddContactActions = ({ t, onCancel, onSave }) => {
-  return (
-    <>
-      <Button variant="secondary" label={t('cancel')} onClick={onCancel} />
-      <Button label={t('save')} onClick={onSave} />
-    </>
-  )
-}
-
-export default withContactsListLocales(AddContactActions)

package/react/ContactsListModal/AddContact/AddContactContent.jsx

@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import styles from './styles.styl'
-import Icon from '../../Icon'
-import PeopleIcon from '../../Icons/People'
-import TextField from '../../TextField'
-import Typography from '../../Typography'
-import { Media, Img, Bd } from '../../deprecated/Media'
-import { withContactsListLocales } from '../withContactsListLocales'
-
-const AddContactContent = ({ t, setContactValues }) => {
-  const handleChange = ev => {
-    const { name, value } = ev.target
-    setContactValues(v => ({ ...v, [name]: value }))
-  }
-
-  return (
-    <>
-      <Typography variant="h5">{t('coordinates')}</Typography>
-      <Media>
-        <Img className={styles.icon}>
-          <Icon icon={PeopleIcon} />
-        </Img>
-        <Bd className="u-mr-1">
-          <TextField
-            className="u-mt-1"
-            variant="outlined"
-            fullWidth
-            id="givenName"
-            name="givenName"
-            label={t('givenName')}
-            onChange={handleChange}
-          />
-        </Bd>
-      </Media>
-      <Media>
-        <Bd className="u-ml-3 u-mr-1">
-          <TextField
-            className="u-mt-1"
-            variant="outlined"
-            fullWidth
-            id="familyName"
-            name="familyName"
-            label={t('familyName')}
-            onChange={handleChange}
-          />
-        </Bd>
-      </Media>
-    </>
-  )
-}
-
-AddContactContent.propTypes = {
-  t: PropTypes.func,
-  setContactValues: PropTypes.func
-}
-
-export default withContactsListLocales(AddContactContent)

package/react/ContactsListModal/AddContact/AddContactDialog.jsx

@@ -1,38 +0,0 @@
-import React, { useState } from 'react'
-
-import { useClient } from 'cozy-client'
-
-import AddContactActions from './AddContactActions'
-import AddContactContent from './AddContactContent'
-import AddContactTitle from './AddContactTitle'
-import { handleSubmit } from './helpers'
-import { FixedDialog } from '../../CozyDialogs'
-
-const AddContactDialog = ({ onListClose, onCreate, onClose }) => {
-  const [contactValues, setContactValues] = useState({})
-  const client = useClient()
-
-  return (
-    <FixedDialog
-      open={true}
-      onClose={onClose}
-      title={<AddContactTitle />}
-      content={<AddContactContent setContactValues={setContactValues} />}
-      actions={
-        <AddContactActions
-          onCancel={onClose}
-          onSave={() =>
-            handleSubmit({
-              client,
-              contactValues,
-              onCreate,
-              onListClose
-            })
-          }
-        />
-      }
-    />
-  )
-}
-
-export default AddContactDialog

package/react/ContactsListModal/AddContact/AddContactTitle.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-import { withContactsListLocales } from '../withContactsListLocales'
-
-const AddContactTitle = ({ t }) => {
-  return <>{t('newContact')}</>
-}
-
-export default withContactsListLocales(AddContactTitle)

package/react/ContactsListModal/AddContact/helpers.js

@@ -1,18 +0,0 @@
-export const handleSubmit = async ({
-  client,
-  contactValues,
-  onCreate,
-  onListClose
-}) => {
-  const { givenName, familyName } = contactValues
-
-  if (!givenName && !familyName) return
-
-  const { data: contact } = await client.save({
-    _type: 'io.cozy.contacts',
-    name: { familyName, givenName }
-  })
-
-  onCreate(contact)
-  onListClose()
-}

package/react/ContactsListModal/AddContact/helpers.spec.js

@@ -1,74 +0,0 @@
-import { createMockClient } from 'cozy-client'
-
-import { handleSubmit } from './helpers'
-
-const client = createMockClient({})
-client.save = jest.fn(x => ({ data: x }))
-const onCreate = jest.fn()
-const onListClose = jest.fn()
-
-describe('handleSubmit', () => {
-  it('should not create the contact if no givenName of familyName', async () => {
-    await handleSubmit({ contactValues: {}, client, onCreate, onListClose })
-
-    expect(onCreate).not.toHaveBeenCalled()
-    expect(onListClose).not.toHaveBeenCalled()
-  })
-
-  it('should create the contact if there is only the givenName', async () => {
-    await handleSubmit({
-      contactValues: { givenName: 'John' },
-      client,
-      onCreate,
-      onListClose
-    })
-
-    expect(client.save).toHaveBeenCalled()
-    expect(onCreate).toHaveBeenCalledWith({
-      _type: 'io.cozy.contacts',
-      name: {
-        familyName: undefined,
-        givenName: 'John'
-      }
-    })
-    expect(onListClose).toHaveBeenCalled()
-  })
-
-  it('should create the contact if there is only the familyName', async () => {
-    await handleSubmit({
-      contactValues: { familyName: 'Connor' },
-      client,
-      onCreate,
-      onListClose
-    })
-
-    expect(client.save).toHaveBeenCalled()
-    expect(onCreate).toHaveBeenCalledWith({
-      _type: 'io.cozy.contacts',
-      name: {
-        familyName: 'Connor',
-        givenName: undefined
-      }
-    })
-    expect(onListClose).toHaveBeenCalled()
-  })
-
-  it('should create the contact if there is the givenName and familyName', async () => {
-    await handleSubmit({
-      contactValues: { givenName: 'John', familyName: 'Connor' },
-      client,
-      onCreate,
-      onListClose
-    })
-
-    expect(client.save).toHaveBeenCalled()
-    expect(onCreate).toHaveBeenCalledWith({
-      _type: 'io.cozy.contacts',
-      name: {
-        familyName: 'Connor',
-        givenName: 'John'
-      }
-    })
-    expect(onListClose).toHaveBeenCalled()
-  })
-})

package/react/ContactsListModal/AddContact/styles.styl

@@ -1,2 +0,0 @@
-.icon
-  margin 1rem 1.5rem 0 0.5rem

package/react/ContactsListModal/ContactsListContent.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import { models } from 'cozy-client'
-const { getDisplayName } = models.contact
-
-import EmptyMessage from './EmptyMessage'
-import { withContactsListLocales } from './withContactsListLocales'
-import ContactsList from '../ContactsList'
-import Spinner from '../Spinner'
-import { useI18n } from '../providers/I18n'
-
-const mkFilter = filterStr => contacts => {
-  if (!filterStr) {
-    return contacts
-  }
-
-  const f = filterStr.toLowerCase()
-
-  // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
-  return contacts.filter(contact => {
-    const displayName = getDisplayName(contact)
-
-    if (!displayName) {
-      return false
-    }
-
-    return displayName.toLowerCase().includes(f)
-  })
-}
-
-const ContactsListContent = ({
-  filter,
-  contacts,
-  emptyMessage,
-  onItemClick,
-  dismissAction
-}) => {
-  const { t } = useI18n()
-
-  const loading =
-    (contacts.fetchStatus === 'loading' ||
-      contacts.fetchStatus === 'pending') &&
-    !contacts.lastFetch
-
-  const filterContacts = mkFilter(filter)
-  const filteredContacts = filterContacts(contacts.data)
-  const selfEmptyMessage = emptyMessage ?? t('emptyContact')
-
-  const handleItemClick = contact => {
-    if (!onItemClick) {
-      return
-    }
-
-    onItemClick(contact)
-    dismissAction()
-  }
-
-  if (loading) {
-    return (
-      <div className="u-mv-2 u-ta-center">
-        <Spinner size="xxlarge" />
-      </div>
-    )
-  }
-
-  if (filteredContacts.length === 0) {
-    return <EmptyMessage>{selfEmptyMessage}</EmptyMessage>
-  }
-
-  return (
-    <ContactsList contacts={filteredContacts} onItemClick={handleItemClick} />
-  )
-}
-
-export default withContactsListLocales(ContactsListContent)