cozy-ui-plus 1.1.0

package/src/Contacts/Header/index.jsx

@@ -0,0 +1,80 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PersonAddIcon from 'cozy-ui/transpiled/react/Icons/PersonAdd'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import GroupsSelection from './GroupsSelection'
+import ImportDropdown from './ImportDropdown'
+import SearchInput from './SearchInput'
+import { locales } from './locales'
+
+const Header = ({
+  allGroups,
+  onContactCreate,
+  onContactImport,
+  onSearch,
+  onGroupCreate,
+  onGroupDelete,
+  onGroupUpdate
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+
+  return (
+    <div className={!isMobile ? 'u-flex u-flex-justify-between' : undefined}>
+      <div
+        className={cx('u-flex u-flex-items-center u-w-auto-s u-w-5 u-maw-6', {
+          'u-mb-1': isMobile,
+          'u-mr-1': !isMobile
+        })}
+      >
+        <Button
+          className="u-mr-half"
+          variant="ghost"
+          startIcon={<Icon icon={PersonAddIcon} />}
+          label={t('Contacts.Header.create')}
+          fullWidth
+          onClick={onContactCreate}
+        />
+        <ImportDropdown onContactImport={onContactImport} />
+      </div>
+      <div
+        className={
+          !isMobile
+            ? 'u-flex u-flex-items-center u-flex-justify-end u-flex-grow-1 u-maw-7'
+            : undefined
+        }
+      >
+        <GroupsSelection
+          allGroups={allGroups}
+          onGroupCreate={onGroupCreate}
+          onGroupUpdate={onGroupUpdate}
+          onGroupDelete={onGroupDelete}
+        />
+        <SearchInput setSearchValue={onSearch} />
+      </div>
+    </div>
+  )
+}
+
+Header.propTypes = {
+  allGroups: PropTypes.array,
+  onContactCreate: PropTypes.func,
+  onContactImport: PropTypes.func,
+  onSearch: PropTypes.func,
+  onGroupCreate: PropTypes.func,
+  onGroupUpdate: PropTypes.func,
+  onGroupDelete: PropTypes.func
+}
+
+Header.defaultProps = {
+  allGroups: []
+}
+
+export default Header

package/src/Contacts/Header/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "Header": {
+      "create": "Create",
+      "filter": {
+        "no-group": "Create contact groups to facilitate filing and sharing!"
+      },
+      "import": {
+        "title": "Import",
+        "store": "From other sources",
+        "vcard": "From a vCard file"
+      }
+    }
+  }
+}

package/src/Contacts/Header/locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "Header": {
+      "create": "Créer",
+      "filter": {
+        "no-group": "Créer des groupes de contacts pour faciliter leur classement et le partage !"
+      },
+      "import": {
+        "title": "Importer",
+        "store": "Depuis d'autres sources",
+        "vcard": "Depuis un fichier vCard"
+      }
+    }
+  }
+}

package/src/Contacts/Header/locales/index.jsx

@@ -0,0 +1,11 @@
+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/src/Contacts/Header/locales/ru.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "Header": {
+      "create": "Создать",
+      "filter": {
+        "no-group": "Создайте группы контактов для упрощения организации и обмена!"
+      },
+      "import": {
+        "title": "Импорт",
+        "store": "Из других источников",
+        "vcard": "Из файла vCard"
+      }
+    }
+  }
+}

package/src/Contacts/Header/locales/vi.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "Header": {
+      "create": "Tạo",
+      "filter": {
+        "no-group": "Tạo nhóm liên hệ để dễ dàng phân loại và chia sẻ!"
+      },
+      "import": {
+        "title": "Nhập",
+        "store": "Từ nguồn khác",
+        "vcard": "Từ tập tin vCard"
+      }
+    }
+  }
+}

package/src/Contacts/Readme.md

@@ -0,0 +1 @@
+<!-- For styleguidist, a .md file is needed in directories -->

package/src/ContactsList/ContactCell.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ActionsMenuButton from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuButton'
+
+import ContactIdentity from './Contacts/ContactIdentity'
+
+const Cell = ({ row, column, cell, actions }) => {
+  if (column.id === 'fullname') {
+    return <ContactIdentity contact={row} noWrapper />
+  }
+
+  if (column.id === 'actions') {
+    if (!actions) {
+      return null
+    }
+
+    return <ActionsMenuButton docs={[row]} actions={actions} />
+  }
+
+  return cell
+}
+
+export default React.memo(Cell)

package/src/ContactsList/ContactRow.jsx

@@ -0,0 +1,46 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { models } from 'cozy-client'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import ContactCozy from './Contacts/ContactCozy'
+import ContactEmail from './Contacts/ContactEmail'
+import ContactIdentity from './Contacts/ContactIdentity'
+import ContactPhone from './Contacts/ContactPhone'
+
+const { getPrimaryCozy, getPrimaryPhone, getPrimaryEmail } = models.contact
+
+const ContactRow = ({ className, contact, onClick, divider, ...rest }) => {
+  const { isMobile } = useBreakpoints()
+  const phone = getPrimaryPhone(contact) || undefined
+  const email = getPrimaryEmail(contact) || undefined
+  const cozyUrl = getPrimaryCozy(contact) || undefined
+  const { isDesktop } = useBreakpoints()
+
+  return (
+    <ListItem
+      data-testid="contact-listItem"
+      className={cx({ 'u-c-pointer': onClick }, className)}
+      divider={divider}
+      gutters={isDesktop ? 'double' : 'default'}
+      onClick={() => onClick?.(contact)}
+      {...rest}
+    >
+      <ContactIdentity contact={contact} />
+      {!isMobile && <ContactEmail email={email} />}
+      {!isMobile && <ContactPhone phone={phone} />}
+      {!isMobile && <ContactCozy cozyUrl={cozyUrl} />}
+    </ListItem>
+  )
+}
+
+ContactRow.propTypes = {
+  contact: PropTypes.object.isRequired,
+  onClick: PropTypes.func,
+  divider: PropTypes.bool
+}
+
+export default ContactRow

package/src/ContactsList/ContactRow.spec.js

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import logger from 'cozy-logger'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import ContactRow from './ContactRow'
+
+logger.setLevel('error')
+
+const makeContact = attrs => ({
+  _id: 'contactid',
+  _type: 'io.cozy.contacts',
+  ...attrs
+})
+
+const setup = ({ contact }) => {
+  render(
+    <BreakpointsProvider>
+      <ContactRow contact={contact} />
+    </BreakpointsProvider>
+  )
+}
+
+describe('ContactRow', () => {
+  it('should accept the strict minimum', () => {
+    const contact = makeContact({ email: [{ address: 'johndoe@localhost' }] })
+    setup({ contact })
+
+    // With a minimal contact, email is displayed twice
+    // - one as display name
+    // - one as email
+    expect(screen.getAllByText('johndoe@localhost').length).toBe(2)
+  })
+
+  it('should display data', () => {
+    const contact = makeContact({
+      name: { familyName: 'Doe', givenName: 'John' },
+      phone: [{ number: '0123456789' }],
+      email: [{ address: 'johndoe@localhost' }],
+      cozy: [{ url: 'http://johndoe.mycozy.cloud' }]
+    })
+    setup({ contact })
+
+    // We need to check first and last name separatly because they are in two different span
+    expect(screen.getByText('John')).toBeInTheDocument()
+    expect(screen.getByText('Doe')).toBeInTheDocument()
+    expect(screen.getByText('0123456789')).toBeInTheDocument()
+    expect(screen.getByText('johndoe@localhost')).toBeInTheDocument()
+    expect(screen.getByText('http://johndoe.mycozy.cloud')).toBeInTheDocument()
+  })
+
+  it('should display email for missing information', () => {
+    const contact = makeContact({
+      email: [{ address: 'johndoe@localhost' }]
+    })
+    setup({ contact })
+
+    const emailColumn = screen.getByTestId('ContactEmail')
+    expect(emailColumn.textContent).toBe('johndoe@localhost')
+
+    const phoneColumn = screen.getByTestId('ContactPhone')
+    expect(phoneColumn.textContent).toBe('—')
+
+    const cozyColumn = screen.getByTestId('ContactCozy')
+    expect(cozyColumn.textContent).toBe('—')
+  })
+
+  it('should accept empty array', () => {
+    const contact = makeContact({ email: [] })
+    setup({ contact })
+    const emailColumn = screen.getByTestId('ContactEmail')
+    expect(emailColumn.textContent).toBe('—')
+  })
+})

package/src/ContactsList/Contacts/ContactCozy.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
+
+import styles from '../styles.styl'
+
+const ContactCozy = ({ cozyUrl }) => (
+  <TableCell
+    data-testid="ContactCozy" // used by a test in cozy-contacts
+    className={`${styles['contact-cozyurl']} u-ellipsis u-p-0`}
+  >
+    {cozyUrl}
+  </TableCell>
+)
+ContactCozy.propTypes = {
+  cozyUrl: PropTypes.string
+}
+ContactCozy.defaultProps = {
+  cozyUrl: '—'
+}
+
+export default ContactCozy

package/src/ContactsList/Contacts/ContactEmail.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
+
+import styles from '../styles.styl'
+
+const ContactEmail = ({ email }) => (
+  <TableCell
+    data-testid="ContactEmail" // used by a test in cozy-contacts
+    className={`${styles['contact-email']} u-ellipsis u-p-0`}
+  >
+    {email}
+  </TableCell>
+)
+ContactEmail.propTypes = {
+  email: PropTypes.string
+}
+ContactEmail.defaultProps = {
+  email: '—'
+}
+
+export default ContactEmail

package/src/ContactsList/Contacts/ContactIdentity.jsx

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getInitials } from 'cozy-client/dist/models/contact'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ContactName from './ContactName'
+import { locales } from '../locales/withContactsListLocales'
+import styles from '../styles.styl'
+
+const MyselfMarker = () => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return <span className={`${styles['contact-myself']}`}>({t('me')})</span>
+}
+
+const ContactIdentity = ({ contact }) => {
+  const isMyself = !!contact.me
+
+  return (
+    <>
+      <Avatar display="inline" size="s">
+        {getInitials(contact)}
+      </Avatar>
+      <ContactName contact={contact} />
+      {isMyself && <MyselfMarker />}
+    </>
+  )
+}
+
+ContactIdentity.propTypes = {
+  contact: PropTypes.object.isRequired
+}
+
+const ContactIdentityWrapper = ({ noWrapper, ...props }) => {
+  if (noWrapper) {
+    return <ContactIdentity {...props} />
+  }
+
+  return (
+    <TableCell
+      data-testid="ContactIdentity" // used by a test in cozy-contacts
+      className={`${styles['contact-identity']} u-flex u-flex-items-center u-ellipsis u-p-0`}
+    >
+      <ContactIdentity {...props} />
+    </TableCell>
+  )
+}
+
+ContactIdentityWrapper.defaultProps = {
+  noWrapper: false
+}
+
+export default ContactIdentityWrapper

package/src/ContactsList/Contacts/ContactName.jsx

@@ -0,0 +1,43 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getDisplayName } from 'cozy-client/dist/models/contact'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const ContactName = ({ contact }) => {
+  const familyName = contact.name?.familyName
+  const displayName = getDisplayName(contact)
+  const namesToDisplay = displayName?.split(' ')
+
+  return (
+    <Typography
+      data-testid="ContactName" // used by a test in cozy-contacts
+      className="u-ml-1"
+      noWrap
+      display="inline"
+    >
+      {namesToDisplay?.map((name, index) => {
+        const isLastItem = index === namesToDisplay.length - 1
+
+        return (
+          <span
+            key={`display-${index}`}
+            className={cx({
+              'u-fw-bold': name === familyName
+            })}
+          >
+            {name}
+            {!isLastItem && <>&nbsp;</>}
+          </span>
+        )
+      })}
+    </Typography>
+  )
+}
+
+ContactName.propTypes = {
+  contact: PropTypes.object.isRequired
+}
+
+export default ContactName

package/src/ContactsList/Contacts/ContactPhone.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
+
+import styles from '../styles.styl'
+
+const ContactPhone = ({ phone }) => (
+  <TableCell
+    data-testid="ContactPhone" // used by a test in cozy-contacts
+    className={`${styles['contact-phone']} u-ellipsis u-p-0`}
+  >
+    {phone}
+  </TableCell>
+)
+
+ContactPhone.propTypes = {
+  phone: PropTypes.string
+}
+ContactPhone.defaultProps = {
+  phone: '—'
+}
+
+export default ContactPhone

package/src/ContactsList/ContactsList.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import List from 'cozy-ui/transpiled/react/List'
+import ListSubheader from 'cozy-ui/transpiled/react/ListSubheader'
+import { Table } from 'cozy-ui/transpiled/react/deprecated/Table'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ContactRow from './ContactRow'
+import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
+import withContactsListLocales from './locales/withContactsListLocales'
+
+const ContactsList = ({ contacts, onItemClick, ...rest }) => {
+  const { t } = useI18n()
+  const sortedContacts = sortContacts(contacts)
+  const categorizedContacts = categorizeContacts(sortedContacts, t)
+  const sortedHeaders = sortHeaders(categorizedContacts, t)
+  const { isDesktop } = useBreakpoints()
+
+  return (
+    <Table {...rest}>
+      {sortedHeaders.map(header => (
+        <List
+          key={header}
+          subheader={
+            <ListSubheader gutters={isDesktop ? 'double' : 'default'}>
+              {header}
+            </ListSubheader>
+          }
+        >
+          {categorizedContacts[header].map((contact, index) => (
+            <ContactRow
+              key={contact._id}
+              id={contact._id}
+              contact={contact}
+              divider={index !== categorizedContacts[header].length - 1}
+              onClick={onItemClick}
+            />
+          ))}
+        </List>
+      ))}
+    </Table>
+  )
+}
+
+ContactsList.propTypes = {
+  contacts: PropTypes.array.isRequired,
+  onItemClick: PropTypes.func
+}
+
+export default withContactsListLocales(ContactsList)

package/src/ContactsList/Readme.md

@@ -0,0 +1,47 @@
+### Raw list
+
+```jsx
+import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
+import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import contacts from './_mockContacts.json'
+
+;
+
+<DemoProvider client={mockClient}>
+  <div style={{ height: 500, overflowY: 'scroll' }}>
+    <ContactsList contacts={contacts} />
+  </div>
+</DemoProvider>
+```
+
+### Clickable items
+
+```jsx
+import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
+import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import contacts from './_mockContacts.json'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+initialState = { contact: null }
+
+;
+
+<DemoProvider client={mockClient}>
+  <p>
+    {state.contact ? (
+        `Clicked on contact ${state.contact._id}`
+      ) : (
+        'No contact clicked'
+    )}
+  </p>
+  <div style={{ height: 500, overflowY: 'scroll' }}>
+    <ContactsList
+      contacts={contacts}
+      onItemClick={contact => setState({ contact })}
+    />
+  </div>
+</DemoProvider>
+```