cozy-ui 127.11.0 → 127.13.0

package/react/Contacts/GroupsSelect/SelectBox/Option.jsx

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import EditGroupName from './EditGroupName'
+import { ActionsOption, Option as DefaultOption } from '../../../SelectBox'
+
+const Option = props => {
+  const { name: groupName, id: groupId, withNoAction } = props.data
+  const {
+    editedGroupId,
+    setEditedGroupId,
+    deleteGroup,
+    renameGroup,
+    withCheckbox
+  } = props.selectProps
+
+  if (editedGroupId === groupId) {
+    return (
+      <EditGroupName
+        groupId={groupId}
+        groupName={groupName}
+        setEditedGroupId={setEditedGroupId}
+        renameGroup={renameGroup}
+      />
+    )
+  }
+
+  if (withNoAction) {
+    return <DefaultOption {...props} />
+  }
+
+  return (
+    <ActionsOption
+      {...props}
+      withCheckbox={withCheckbox}
+      actions={[
+        {
+          icon: 'pen',
+          onClick: ({ data }) => setEditedGroupId(data.id),
+          iconProps: {
+            'data-testid': `ActionsOption_${props.children}-icon_pen`
+          }
+        },
+        {
+          icon: 'trash',
+          onClick: ({ data }) => deleteGroup(data)
+        }
+      ]}
+    />
+  )
+}
+
+Option.propTypes = {
+  selectProps: PropTypes.shape({
+    editedGroupId: PropTypes.string.isRequired,
+    deleteGroup: PropTypes.func.isRequired,
+    setEditedGroupId: PropTypes.func.isRequired,
+    withCheckbox: PropTypes.bool
+  }),
+  data: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    withNoAction: PropTypes.bool
+  })
+}
+
+export default Option

package/react/Contacts/GroupsSelect/SelectBox/SelectContainer.jsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { components } from '../../../SelectBox'
+
+const SelectContainer = props => {
+  return (
+    <components.SelectContainer
+      {...props}
+      className={classNames(props.className, 'react-select__custom__container')}
+    />
+  )
+}
+
+export default SelectContainer

package/react/Contacts/GroupsSelect/SelectBox/styles.styl

@@ -0,0 +1,2 @@
+.menu
+    min-width fit-content

package/react/Contacts/GroupsSelect/helpers.js

@@ -0,0 +1,25 @@
+export const isExistingGroup = (groupsAlreadyCreated, groupToCreate) => {
+  const isNameAlreadyUsed =
+    groupsAlreadyCreated.find(
+      group => group.name.toLowerCase() === groupToCreate.name.toLowerCase()
+    ) !== undefined
+
+  return isNameAlreadyUsed
+}
+
+/**
+ * Returns the group defined as default in the group filter
+ */
+export const defaultSelectedGroup = {
+  name: 'Contacts.GroupsSelect.filter.all-groups',
+  withNoAction: true
+}
+
+/**
+ * Returns the translated group defined as default in the group filter
+ * @param {function} t - Translate
+ */
+export const translatedDefaultSelectedGroup = t => ({
+  ...defaultSelectedGroup,
+  name: t(defaultSelectedGroup.name)
+})

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

@@ -0,0 +1,21 @@
+{
+  "Contacts": {
+    "GroupsSelect": {
+      "create": "Create a group",
+      "name": "Name of the group",
+      "already_exists": "The group %{name} already exists.",
+      "manage": "Groups",
+      "filter": {
+        "all-groups": "All groups"
+      },
+      "created": {
+        "success": "The group has been created correctly.",
+        "error": "The group has not been created."
+      },
+      "renamed": {
+        "success": "The group has been renamed correctly.",
+        "error": "The group has not been renamed."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "Contacts": {
+    "GroupsSelect": {
+      "create": "Créer un groupe",
+      "name": "Nom du groupe",
+      "already_exists": "Le groupe %{name} existe déjà.",
+      "manage": "Groupes",
+      "filter": {
+        "all-groups": "Tous les groupes"
+      },
+      "created": {
+        "success": "Le groupe a bien été créé.",
+        "error": "Le groupe n'a pas été créé."
+      },
+      "renamed": {
+        "success": "Le groupe a bien été renommé.",
+        "error": "Le groupe n'a pas été renommé."
+      }
+    }
+  }
+}

package/react/Contacts/GroupsSelect/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/GroupsSelect/styles.styl

@@ -0,0 +1,47 @@
+@require 'cozy-ui'
+
+.container
+    height rem(48)
+    display flex
+    align-items center
+    color var(--primaryTextColor)
+
+.contact-group-creation-divider
+    width 100%
+    border-top 1px solid var(--dividerColor)
+
+.contact-group-create-div-icon
+    display flex
+    align-items center
+    flex 1
+
+/*since we keep the existing style of
+react-select for the menu and we only
+want to override width & zindex... important
+is important. Right positionning is just set,
+it overrides nothing so there's no need for
+!important */
+:global(.react-select__menu) // @stylint ignore Naming imposed by react-select
+    width rem(384) !important
+    z-index 100000 !important
+    right 0
+
+    +small-screen()
+        top auto !important
+        width 100% !important
+
+:global(.react-select__container) // @stylint ignore Naming imposed by react-select
+    display inline-block
+    vertical-align middle
+
+:global(.react-select__menu-notice--no-options) // @stylint ignore Naming imposed by react-select
+    color var(--primaryTextColor)
+    margin-left .5rem !important
+    height rem(48)
+    display flex
+    align-items center
+
+:global(.react-select__menu-list) // @stylint ignore Naming imposed by react-select
+    text-align initial
+    +small-screen()
+        max-width inherit !important

package/react/Contacts/GroupsSelect/useGroupSelect.jsx

@@ -0,0 +1,88 @@
+import get from 'lodash/get'
+
+import { useSelectedGroup } from './GroupsSelectProvider'
+import { isExistingGroup } from './helpers'
+import { locales } from './locales'
+import { useAlert } from '../../providers/Alert'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+
+const useGroupsSelect = ({
+  allGroups,
+  onGroupCreated,
+  client,
+  onGroupCreate,
+  onGroupUpdate
+}) => {
+  const { selectedGroup, setSelectedGroup } = useSelectedGroup()
+  const { showAlert } = useAlert()
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const createGroupSelf = async group => {
+    if (!group.name) return
+
+    if (isExistingGroup(allGroups, group)) {
+      return showAlert({
+        severity: 'error',
+        message: t('Contacts.GroupsSelect.already_exists', {
+          name: group.name
+        })
+      })
+    }
+
+    try {
+      const { data: createdGroup } = await onGroupCreate(client, group)
+      if (onGroupCreated) {
+        onGroupCreated(createdGroup)
+      }
+      return showAlert({
+        severity: 'success',
+        message: t('Contacts.GroupsSelect.created.success')
+      })
+    } catch {
+      return showAlert({
+        severity: 'error',
+        message: t('Contacts.GroupsSelect.created.error')
+      })
+    }
+  }
+
+  const renameGroupSelf = async (groupId, newName) => {
+    const group = allGroups.find(group => group.id === groupId)
+    const allOtherGroups = allGroups.filter(group => group.id !== groupId)
+    const isRenamedGroupSelected =
+      get(group, '_id') === get(selectedGroup, '_id')
+
+    if (isExistingGroup(allOtherGroups, { name: newName })) {
+      return showAlert({
+        severity: 'error',
+        message: t('Contacts.GroupsSelect.already_exists', {
+          name: newName
+        })
+      })
+    }
+
+    try {
+      const { data } = await onGroupUpdate(client, { ...group, name: newName })
+      if (isRenamedGroupSelected) {
+        setSelectedGroup(data)
+      }
+      return showAlert({
+        severity: 'success',
+        message: t('Contacts.GroupsSelect.renamed.success')
+      })
+    } catch {
+      return showAlert({
+        severity: 'error',
+        message: t('Contacts.GroupsSelect.renamed.error')
+      })
+    }
+  }
+
+  return {
+    createGroup: createGroupSelf,
+    renameGroup: renameGroupSelf
+  }
+}
+
+export default useGroupsSelect

package/react/Contacts/Header/GroupsSelection.jsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import { locales } from './locales'
+import { ControlDefault } from '../../SelectBox'
+import { useBreakpoints } from '../../providers/Breakpoints'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+import GroupsSelect from '../GroupsSelect/GroupsSelect'
+import { useSelectedGroup } from '../GroupsSelect/GroupsSelectProvider'
+import { translatedDefaultSelectedGroup } from '../GroupsSelect/helpers'
+
+const setGroupsSelectOptions = (allGroups, defaultSelectedGroup) =>
+  allGroups.length > 0 ? [defaultSelectedGroup].concat(allGroups) : allGroups
+
+const useGroupsSelectCustomStyles = () => {
+  const { isMobile } = useBreakpoints()
+
+  return {
+    container: base => ({
+      ...base,
+      width: isMobile ? '100%' : '50%'
+    }),
+    noOptionsMessage: base => ({ ...base, textAlign: 'left' })
+  }
+}
+
+const ControlDefaultWithTestId = ({ ...props }) => {
+  return (
+    <ControlDefault
+      {...props}
+      innerProps={{
+        ...props.innerProps,
+        'data-testid': 'selectBox-controlDefault',
+        className: 'u-bdrs-4'
+      }}
+    />
+  )
+}
+
+const GroupsSelection = ({
+  allGroups,
+  onGroupCreate,
+  onGroupUpdate,
+  onGroupDelete
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { selectedGroup, setSelectedGroup } = useSelectedGroup()
+
+  const groupsSelectOptions = setGroupsSelectOptions(
+    allGroups,
+    translatedDefaultSelectedGroup(t)
+  )
+
+  const groupsSelectCustomStyles = useGroupsSelectCustomStyles()
+
+  return (
+    <GroupsSelect
+      allGroups={groupsSelectOptions}
+      value={selectedGroup}
+      noOptionsMessage={() => t('Contacts.Header.filter.no-group')}
+      styles={groupsSelectCustomStyles}
+      closeMenuOnSelect={true}
+      components={{
+        Control: ControlDefaultWithTestId
+      }}
+      onChange={setSelectedGroup}
+      onGroupCreate={onGroupCreate}
+      onGroupUpdate={onGroupUpdate}
+      onGroupDelete={onGroupDelete}
+    />
+  )
+}
+
+export default GroupsSelection

package/react/Contacts/Header/ImportDropdown.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useRef } from 'react'
+
+import { useClient, generateWebLink } from 'cozy-client'
+import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
+
+import { locales } from './locales'
+import AppIcon from '../../AppIcon'
+import AppLinker from '../../AppLinker'
+import Button from '../../Buttons'
+import Icon from '../../Icon'
+import BottomIcon from '../../Icons/Bottom'
+import TeamIcon from '../../Icons/Team'
+import Link from '../../Link'
+import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu'
+import { useI18n, useExtendI18n } from '../../providers/I18n'
+
+const ImportDropdown = ({ onContactImport }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const client = useClient()
+  const anchorRef = useRef()
+  const [showMenu, setShowMenu] = useState(false)
+
+  const storeURL = generateWebLink({
+    cozyUrl: client.getStackClient().uri,
+    hash: `discover/?type=konnector&doctype=${CONTACTS_DOCTYPE}`,
+    pathname: '/',
+    slug: 'store',
+    subDomainType: client.getInstanceOptions().subdomain
+  })
+
+  return (
+    <>
+      <Button
+        ref={anchorRef}
+        variant="secondary"
+        label={t('Contacts.Header.import.title')}
+        endIcon={<Icon icon={BottomIcon} />}
+        fullWidth
+        onClick={() => setShowMenu(v => !v)}
+      />
+
+      {showMenu && (
+        <ActionMenu
+          anchorElRef={anchorRef}
+          popperOptions={{ placement: 'bottom-end' }}
+          onClose={() => setShowMenu(false)}
+        >
+          <ActionMenuItem
+            left={<Icon icon={TeamIcon} />}
+            onClick={onContactImport}
+          >
+            {t('Contacts.Header.import.vcard')}
+          </ActionMenuItem>
+
+          <AppLinker app={{ slug: 'store' }} href={storeURL}>
+            {({ onClick, href }) => (
+              <ActionMenuItem
+                left={<AppIcon app="store" className="u-h-1 u-w-1" />}
+                onClick={onClick}
+              >
+                <Link
+                  className="u-p-0"
+                  href={href}
+                  style={{ color: 'var(--primaryTextColor)' }}
+                >
+                  {t('Contacts.Header.import.store')}
+                </Link>
+              </ActionMenuItem>
+            )}
+          </AppLinker>
+        </ActionMenu>
+      )}
+    </>
+  )
+}
+
+export default ImportDropdown

package/react/Contacts/Header/Readme.md

@@ -0,0 +1,40 @@
+<!-- For styleguidist, a .md file is needed in directories -->
+
+Must be used within `SelectedGroupProvider` and `AlertProvider`.
+
+```jsx
+import Header from 'cozy-ui/transpiled/react/Contacts/Header'
+import SelectedGroupProvider from 'cozy-ui/transpiled/react/Contacts/GroupsSelect/GroupsSelectProvider'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+;
+
+<DemoProvider>
+  <AlertProvider>
+    <SelectedGroupProvider>
+      <Header
+        allGroups={[]}
+        onContactCreate={() => {
+          console.info('onCreateContact')
+        }}
+        onContactImport={() => {
+          console.info('onImportContact')
+        }}
+        onGroupCreate={() => {
+          console.info('onGroupCreate')
+        }}
+        onGroupUpdate={() => {
+          console.info('onGroupUpdate')
+        }}
+        onGroupDelete={() => {
+          console.info('onGroupDelete')
+        }}
+        onSearch={searchValue => {
+          console.info(`onSearch with ${searchValue}`)
+        }}
+      />
+    </SelectedGroupProvider>
+  </AlertProvider>
+</DemoProvider>
+```

package/react/Contacts/Header/SearchInput.jsx

@@ -0,0 +1,19 @@
+import debounce from 'lodash/debounce'
+import React, { useMemo } from 'react'
+
+import SearchBar from '../../SearchBar'
+
+const SearchInput = ({ setSearchValue }) => {
+  const delayedSetSearchValue = useMemo(
+    () => debounce(searchValue => setSearchValue(searchValue), 375),
+    [setSearchValue]
+  )
+
+  const handleOnChange = ev => {
+    delayedSetSearchValue(ev.target.value)
+  }
+
+  return <SearchBar size="small" elevation={0} onChange={handleOnChange} />
+}
+
+export default SearchInput

package/react/Contacts/Header/index.jsx

@@ -0,0 +1,79 @@
+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

@@ -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/react/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/react/Contacts/Header/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/Readme.md

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

package/react/ContactsList/ContactCell.jsx

@@ -29,7 +29,7 @@ const Cell = ({ row, column, cell, actions }) => {
         <ListItemIcon>
           <IconButton
             ref={actionsRef}
-            arial-label={t('menu')}
+            arial-label={t('ContactsList.menu')}
             onClick={() => setShowActions(true)}
           >
             <Icon icon={DotsIcon} />

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -14,7 +14,11 @@ const MyselfMarker = () => {
   useExtendI18n(locales)
   const { t } = useI18n()
 
-  return <span className={`${styles['contact-myself']}`}>({t('me')})</span>
+  return (
+    <span className={`${styles['contact-myself']}`}>
+      ({t('ContactsList.me')})
+    </span>
+  )
 }
 
 const ContactIdentity = ({ contact }) => {

package/react/ContactsList/ContactsList.jsx

@@ -4,13 +4,15 @@ import React from 'react'
 import ContactRow from './ContactRow'
 import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
 import withContactsListLocales from './locales/withContactsListLocales'
+import { locales } 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'
+import { useI18n, useExtendI18n } from '../providers/I18n'
 
 const ContactsList = ({ contacts, onItemClick, ...rest }) => {
+  useExtendI18n(locales)
   const { t } = useI18n()
   const sortedContacts = sortContacts(contacts)
   const categorizedContacts = categorizeContacts(sortedContacts, t)