cozy-ui 131.2.0 → 133.0.0-beta.1

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

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-
-import Input from '../../../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/react/Contacts/GroupsSelect/SelectBox/Menu.jsx

@@ -1,26 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import styles from './styles.styl'
-import { components } from '../../../SelectBox'
-import Typography from '../../../Typography'
-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/react/Contacts/GroupsSelect/SelectBox/Option.jsx

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

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

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

package/react/Contacts/GroupsSelect/helpers.js

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

@@ -1,21 +0,0 @@
-{
-  "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

@@ -1,21 +0,0 @@
-{
-  "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

@@ -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/GroupsSelect/locales/ru.json

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

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

@@ -1,21 +0,0 @@
-{
-  "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/react/Contacts/GroupsSelect/styles.styl

@@ -1,48 +0,0 @@
-@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/react/Contacts/GroupsSelect/useGroupSelect.jsx

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

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

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

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

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