cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/Contacts/Header/index.jsx

@@ -1,79 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import GroupsSelection from './GroupsSelection'
-import ImportDropdown from './ImportDropdown'
-import SearchInput from './SearchInput'
-import { locales } from './locales'
-import Button from '../../Buttons'
-import Icon from '../../Icon'
-import PersonAddIcon from '../../Icons/PersonAdd'
-import { useBreakpoints } from '../../providers/Breakpoints'
-import { useI18n, useExtendI18n } from '../../providers/I18n'
-
-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/react/Contacts/Header/locales/en.json

@@ -1,15 +0,0 @@
-{
-  "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/react/Contacts/Header/locales/fr.json

@@ -1,15 +0,0 @@
-{
-  "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/react/Contacts/Header/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/Header/locales/ru.json

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

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

@@ -1,15 +0,0 @@
-{
-  "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/react/Contacts/Readme.md

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

package/react/ContactsList/ContactCell.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import ContactIdentity from './Contacts/ContactIdentity'
-import ActionsMenuButton from '../ActionsMenu/ActionsMenuButton'
-
-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/react/ContactsList/ContactRow.jsx

@@ -1,46 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { models } from 'cozy-client'
-
-import ContactCozy from './Contacts/ContactCozy'
-import ContactEmail from './Contacts/ContactEmail'
-import ContactIdentity from './Contacts/ContactIdentity'
-import ContactPhone from './Contacts/ContactPhone'
-import ListItem from '../ListItem'
-import useBreakpoints from '../providers/Breakpoints'
-
-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/react/ContactsList/ContactRow.spec.js

@@ -1,75 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-
-import logger from 'cozy-logger'
-
-import ContactRow from './ContactRow'
-import { BreakpointsProvider } from '../providers/Breakpoints'
-
-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/react/ContactsList/Contacts/ContactCozy.jsx

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { TableCell } from '../../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/react/ContactsList/Contacts/ContactEmail.jsx

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { TableCell } from '../../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/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { getInitials } from 'cozy-client/dist/models/contact'
-
-import ContactName from './ContactName'
-import Avatar from '../../Avatar'
-import { TableCell } from '../../deprecated/Table'
-import { useI18n, useExtendI18n } from '../../providers/I18n'
-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/react/ContactsList/Contacts/ContactName.jsx

@@ -1,44 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { getDisplayName } from 'cozy-client/dist/models/contact'
-
-import Typography from '../../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/react/ContactsList/Contacts/ContactPhone.jsx

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { TableCell } from '../../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/react/ContactsList/ContactsList.jsx

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import ContactRow from './ContactRow'
-import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
-import withContactsListLocales from './locales/withContactsListLocales'
-import List from '../List'
-import ListSubheader from '../ListSubheader'
-import { Table } from '../deprecated/Table'
-import useBreakpoints from '../providers/Breakpoints'
-import { useI18n } from '../providers/I18n'
-
-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/react/ContactsList/Readme.md

@@ -1,47 +0,0 @@
-### 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>
-```