cozy-ui-plus 1.1.0

package/src/Contacts/GroupsSelect/SelectBox/EditGroupName.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
+
+import Input from 'cozy-ui/transpiled/react/legacy/Input'
+
+const EditGroupName = ({
+  groupId,
+  groupName,
+  setEditedGroupId,
+  renameGroup
+}) => {
+  const inputRef = useRef()
+
+  const stopPropagation = e => {
+    e.stopPropagation()
+  }
+
+  const exitEditMode = () => setEditedGroupId('')
+
+  const handleKeyDown = async e => {
+    const ENTER_KEY_CODE = 13
+    if (e.keyCode == ENTER_KEY_CODE) {
+      exitEditMode()
+      renameGroup(groupId, inputRef.current.value)
+    }
+    stopPropagation(e)
+  }
+
+  return (
+    <Input
+      id="editGroupInput"
+      ref={inputRef}
+      type="text"
+      defaultValue={groupName}
+      size="tiny"
+      autoComplete="off"
+      autoFocus={true}
+      onKeyDown={handleKeyDown}
+      onClick={stopPropagation}
+      onFocus={stopPropagation}
+      onMouseDown={stopPropagation}
+      onBlur={exitEditMode}
+    />
+  )
+}
+
+Option.propTypes = {
+  groupName: PropTypes.string.isRequired,
+  setEditedGroupId: PropTypes.string.isRequired
+}
+
+export default EditGroupName

package/src/Contacts/GroupsSelect/SelectBox/Menu.jsx

@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { components } from 'cozy-ui/transpiled/react/SelectBox'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import styles from './styles.styl'
+import GroupCreation from '../GroupCreation'
+
+const Menu = ({ children, selectProps, className, ...props }) => {
+  const { createGroup, ...restSelectProps } = selectProps
+
+  return (
+    <components.Menu
+      {...props}
+      className={cx(className, styles['menu'])}
+      selectProps={restSelectProps}
+    >
+      <Typography variant="body1" component="div">
+        {children}
+        <GroupCreation createGroup={createGroup} />
+      </Typography>
+    </components.Menu>
+  )
+}
+
+export default Menu

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

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import {
+  ActionsOption,
+  Option as DefaultOption
+} from 'cozy-ui/transpiled/react/SelectBox'
+
+import EditGroupName from './EditGroupName'
+
+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/src/Contacts/GroupsSelect/SelectBox/SelectContainer.jsx

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

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

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

package/src/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/src/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/src/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/src/Contacts/GroupsSelect/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/GroupsSelect/locales/ru.json

@@ -0,0 +1,21 @@
+{
+  "Contacts": {
+    "GroupsSelect": {
+      "create": "Создать группу",
+      "name": "Название группы",
+      "already_exists": "Группа %{name} уже существует.",
+      "manage": "Группы",
+      "filter": {
+        "all-groups": "Все группы"
+      },
+      "created": {
+        "success": "Группа была создана успешно.",
+        "error": "Группа не была создана."
+      },
+      "renamed": {
+        "success": "Группа была переименована успешно.",
+        "error": "Группа не была переименована."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "Contacts": {
+    "GroupsSelect": {
+      "create": "Tạo nhóm",
+      "name": "Tên nhóm",
+      "already_exists": "Nhóm %{name} đã tồn tại.",
+      "manage": "Nhóm",
+      "filter": {
+        "all-groups": "Tất cả nhóm"
+      },
+      "created": {
+        "success": "Nhóm đã được tạo thành công.",
+        "error": "Nhóm chưa được tạo."
+      },
+      "renamed": {
+        "success": "Nhóm đã được đổi tên thành công.",
+        "error": "Nhóm chưa được đổi tên."
+      }
+    }
+  }
+}

package/src/Contacts/GroupsSelect/styles.styl

@@ -0,0 +1,48 @@
+@require 'tools/mixins'
+@require 'settings/breakpoints.styl'
+
+.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/src/Contacts/GroupsSelect/useGroupSelect.jsx

@@ -0,0 +1,89 @@
+import get from 'lodash/get'
+
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { useSelectedGroup } from './GroupsSelectProvider'
+import { isExistingGroup } from './helpers'
+import { locales } from './locales'
+
+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/src/Contacts/Header/GroupsSelection.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { ControlDefault } from 'cozy-ui/transpiled/react/SelectBox'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { locales } from './locales'
+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/src/Contacts/Header/ImportDropdown.jsx

@@ -0,0 +1,80 @@
+import React, { useState, useRef } from 'react'
+
+import { useClient, generateWebLink } from 'cozy-client'
+import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
+import Link from 'cozy-ui/transpiled/react/Link'
+import ActionMenu, {
+  ActionMenuItem
+} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { locales } from './locales'
+import AppIcon from '../../AppIcon'
+import AppLinker from '../../AppLinker'
+
+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/src/Contacts/Header/Readme.md

@@ -0,0 +1,38 @@
+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/src/Contacts/Header/SearchInput.jsx

@@ -0,0 +1,19 @@
+import debounce from 'lodash/debounce'
+import React, { useMemo } from 'react'
+
+import SearchBar from 'cozy-ui/transpiled/react/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