cozy-ui 132.1.0 → 133.0.0

package/react/Contacts/AddModal/types.js

@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types'
-
-import { iconPropType } from '../../Icon'
-
-/**
- * @typedef {'text'|'tel'|'email'|'button'|'url'|'date'} FieldType
- */
-
-/**
- * @typedef {Object} CustomLabelOptions
- * @property {string} defaultType - The default type of the option
- * @property {string} defaultLabel - The default label of the option
- * @property {boolean} [hide] - Whether the radio choices is hidden
- */
-
-/**
- * @typedef {Object} LabelField
- * @property {string} name - The name of the label field
- * @property {boolean} select - Whether the field is a select
- * @property {CustomLabelOptions} customLabelOptions - The custom label field options
- * @property {Option[]} options - The options of the label field
- */
-
-/**
- * @typedef {Object} InputLabelProps
- * @property {boolean} shrink - passed to InputLabelProps props
- */
-
-/**
- * @typedef {Object} Field
- * @property {string} name - The name of the field
- * @property {string|null} icon - The icon of the field
- * @property {FieldType} type - The type of the field
- * @property {boolean} [isSecondary] -  Whether the field is hidden from the main form
- * @property {LabelField} [label] - Add a "label" field next to the main field
- * @property {'accordion'|'array'} [layout] - Whether the field is an array (To add fields dynamically (e.g. email, address, etc.))
- * @property {Field[]} [subFields] - The subfields of the field
- * @property {InputLabelProps} [InputLabelProps] - The object passed to InputLabelProps props
- * @property {boolean} [multiline] - Whether the field is multiline
- * @property {number} [position] - Position of a field in the form. 1 is first.
- */
-
-/**
- * @typedef {Object} RelatedContact
- * @property {string} relatedContactId - The id of the related contact
- * @property {string} relatedContact - The displayName of the related contact
- * @property {string} relatedContactLabel - Object with the type of the related contact stringified (e.g. '{\"type\":\"spouse\"}')
- */
-
-export const labelPropTypes = PropTypes.shape({
-  name: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string
-    })
-  ),
-  customLabelOptions: PropTypes.shape({
-    hide: PropTypes.bool,
-    defaultType: PropTypes.string,
-    defaultLabel: PropTypes.string
-  })
-})
-
-export const fieldInputAttributesTypes = PropTypes.shape({
-  name: PropTypes.string,
-  icon: iconPropType,
-  type: PropTypes.string,
-  label: labelPropTypes,
-  layout: PropTypes.string,
-  subFields: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      icon: PropTypes.string,
-      type: PropTypes.string.isRequired
-    })
-  ),
-  labelProps: PropTypes.shape({
-    shrink: PropTypes.bool
-  })
-})
-
-export const FieldInputWrapperPropTypes = {
-  // See official documentation for more information: https://final-form.org/docs/react-final-form/types/FieldRenderProps
-  input: PropTypes.object,
-  //
-  attributes: fieldInputAttributesTypes,
-  // Destructuring props
-  // See official documentation for more information: https://final-form.org/docs/react-final-form/types/FieldRenderProps
-  meta: PropTypes.object,
-  //
-  id: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  variant: PropTypes.string,
-  customLabelOptions: PropTypes.shape({
-    hide: PropTypes.bool,
-    defaultType: PropTypes.string.isRequired,
-    defaultLabel: PropTypes.string.isRequired
-  }),
-  fullWidth: PropTypes.bool
-}

package/react/Contacts/GroupsSelect/GroupCreation.jsx

@@ -1,95 +0,0 @@
-import classNames from 'classnames'
-import React, { Component } from 'react'
-
-import styles from './styles.styl'
-import Icon from '../../Icon'
-import PlusIcon from '../../Icons/Plus'
-import Input from '../../legacy/Input'
-import { translate } from '../../providers/I18n'
-
-const normalizeGroupData = name => {
-  return {
-    name: name,
-    metadata: {
-      version: 1
-    }
-  }
-}
-class GroupCreation extends Component {
-  state = {
-    isInputDisplayed: false,
-    groupName: ''
-  }
-  constructor(props) {
-    super(props)
-    this.textInput = React.createRef()
-  }
-  handleClick = () => {
-    this.setState({ isInputDisplayed: !this.state.isInputDisplayed })
-  }
-  onFocus = e => {
-    e.stopPropagation()
-  }
-
-  onClick = e => {
-    e.stopPropagation()
-  }
-  keyPress = async e => {
-    if (e.keyCode == 13) {
-      this.props.createGroup(normalizeGroupData(e.target.value))
-      this.textInput.current.value = ''
-    }
-    e.stopPropagation()
-  }
-
-  onMouseDown = e => {
-    e.stopPropagation()
-  }
-
-  render() {
-    const { isInputDisplayed } = this.state
-    const { t } = this.props
-    return (
-      <div>
-        <div className={styles['contact-group-creation-divider']} />
-        <div
-          className={classNames(
-            'u-ml-half',
-            'u-mr-half',
-            'u-c-pointer',
-            styles['container']
-          )}
-        >
-          {!isInputDisplayed && (
-            <div
-              onClick={this.handleClick}
-              className={styles['contact-group-create-div-icon']}
-            >
-              <Icon icon={PlusIcon} />
-              <span className="u-pl-half">
-                {t('Contacts.GroupsSelect.create')}
-              </span>
-            </div>
-          )}
-          {isInputDisplayed && (
-            <Input
-              id="createGroupInput"
-              ref={this.textInput}
-              type="text"
-              placeholder={t('Contacts.GroupsSelect.name')}
-              onClick={this.onClick}
-              onFocus={this.onFocus}
-              onKeyDown={this.keyPress}
-              size="tiny"
-              autoComplete="off"
-              autoFocus={true}
-              onMouseDown={this.onMouseDown}
-            />
-          )}
-        </div>
-      </div>
-    )
-  }
-}
-
-export default translate()(GroupCreation)

package/react/Contacts/GroupsSelect/GroupsSelect.jsx

@@ -1,159 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import { useClient } from 'cozy-client'
-
-import CustomMenu from './SelectBox/Menu'
-import CustomOption from './SelectBox/Option'
-import CustomSelectContainer from './SelectBox/SelectContainer'
-import useGroupsSelect from './useGroupSelect'
-import ClickAwayListener from '../../ClickAwayListener'
-import SelectBox from '../../SelectBox'
-import { useBreakpoints } from '../../providers/Breakpoints'
-
-const captureEscapeEvent = e => {
-  if (e.key === 'Escape') {
-    e.stopPropagation()
-    e.target.blur()
-  }
-}
-
-export const GroupsSelect = ({
-  allGroups,
-  closeMenuOnSelect,
-  value,
-  styles,
-  isMulti,
-  noOptionsMessage,
-  withCheckbox,
-  components,
-  onGroupCreated,
-  onChange,
-  onGroupCreate,
-  onGroupUpdate,
-  onGroupDelete,
-  menuPosition
-}) => {
-  const client = useClient()
-  const { isMobile } = useBreakpoints()
-  const [{ menuIsOpen, editedGroupId }, setState] = useState({
-    menuIsOpen: false,
-    editedGroupId: ''
-  })
-  const { createGroup, renameGroup } = useGroupsSelect({
-    allGroups,
-    onGroupCreated,
-    client,
-    onGroupCreate,
-    onGroupUpdate
-  })
-
-  const toggleMenu = () => {
-    setState(prev => ({ ...prev, menuIsOpen: !prev.menuIsOpen }))
-  }
-
-  const closeMenu = () => {
-    setState(prev => ({ ...prev, menuIsOpen: false }))
-  }
-
-  const setEditedGroupId = id => {
-    setState(prev => ({ ...prev, editedGroupId: id }))
-  }
-
-  const handleChange = props => {
-    if (closeMenuOnSelect) {
-      closeMenu()
-    }
-
-    onChange(props)
-  }
-
-  const handleDelete = group => {
-    closeMenu()
-    onGroupDelete(group)
-  }
-
-  const defaultComponents = {
-    Menu: CustomMenu,
-    Option: CustomOption,
-    SelectContainer: CustomSelectContainer
-  }
-
-  return (
-    <>
-      <ClickAwayListener onClickAway={menuIsOpen ? closeMenu : () => {}}>
-        <SelectBox
-          className={isMobile ? 'u-mb-half' : 'u-mr-half'}
-          classNamePrefix="react-select"
-          isMulti={isMulti}
-          withCheckbox={withCheckbox}
-          menuIsOpen={menuIsOpen}
-          blurInputOnSelect={true}
-          hideSelectedOptions={false}
-          isSearchable={false}
-          isClearable={false}
-          closeMenuOnSelect={closeMenuOnSelect}
-          tabSelectsValue={false}
-          onKeyDown={captureEscapeEvent}
-          noOptionsMessage={noOptionsMessage}
-          options={allGroups}
-          value={value}
-          onChange={handleChange}
-          getOptionLabel={group => group.name}
-          getOptionValue={group => group._id}
-          components={{ ...defaultComponents, ...components }}
-          createGroup={createGroup}
-          deleteGroup={handleDelete}
-          renameGroup={renameGroup}
-          styles={styles}
-          onControlClicked={toggleMenu}
-          setEditedGroupId={setEditedGroupId}
-          editedGroupId={editedGroupId}
-          menuPosition={menuPosition}
-          fullwidth
-        />
-      </ClickAwayListener>
-    </>
-  )
-}
-
-GroupsSelect.propTypes = {
-  allGroups: PropTypes.array.isRequired,
-  styles: PropTypes.object,
-  // for multiple selections, value can be an array
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
-  // to customize react-select elements
-  components: PropTypes.object,
-  // to define if it is possible to select more than one option
-  isMulti: PropTypes.bool,
-  // noOptionsMessage is used to show a message when there is no options in the menu list
-  noOptionsMessage: PropTypes.func,
-  // hide/show checkbox besides menu list options
-  withCheckbox: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  // function to be triggered after creating a group
-  onGroupCreated: PropTypes.func,
-  // function to be triggered when creating a group
-  onGroupCreate: PropTypes.func,
-  // function to be triggered when updating a group
-  onGroupUpdate: PropTypes.func,
-  // function to be triggered when deleting a group
-  onGroupDelete: PropTypes.func,
-  closeMenuOnSelect: PropTypes.bool,
-  menuPosition: PropTypes.oneOf(['fixed', 'absolute'])
-}
-
-GroupsSelect.defaultProps = {
-  isMulti: false,
-  components: {},
-  closeMenuOnSelect: false
-}
-
-GroupsSelect.propTypes = {
-  allGroups: PropTypes.array.isRequired,
-  onGroupCreate: PropTypes.func.isRequired,
-  onGroupUpdate: PropTypes.func.isRequired,
-  onGroupDelete: PropTypes.func.isRequired
-}
-
-export default GroupsSelect

package/react/Contacts/GroupsSelect/GroupsSelect.spec.jsx

@@ -1,248 +0,0 @@
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import React from 'react'
-
-import GroupsSelect from './GroupsSelect'
-import SelectedGroupProvider from './GroupsSelectProvider'
-import Control from './SelectBox/Control'
-import AlertProvider from '../../providers/Alert'
-import DemoProvider from '../../providers/DemoProvider'
-
-const createGroup = jest.fn()
-const updateGroup = jest.fn()
-const deleteGroup = jest.fn()
-
-export const groups = [
-  {
-    id: '5b49553c5916cf7b5b2a5f48600078a8',
-    _id: '5b49553c5916cf7b5b2a5f48600078a8',
-    _type: 'io.cozy.contacts.groups',
-    _rev: '1-7862def64fb044932d3264e2f8477454',
-    cozyMetadata: {
-      createdAt: '2019-07-15T11:22:13.551Z',
-      createdByApp: 'Contacts',
-      createdByAppVersion: '0.8.5',
-      metadataVersion: 1,
-      updatedAt: '2019-07-15T11:22:13.551Z',
-      updatedByApps: [
-        { date: '2019-07-15T11:22:13.551Z', slug: 'Contacts', version: '0.8.5' }
-      ]
-    },
-    metadata: { version: 1 },
-    name: '2018-2019 Enseignants'
-  },
-  {
-    id: '8cb7ea7fe264260e997529439b0091c0',
-    _id: '8cb7ea7fe264260e997529439b0091c0',
-    _type: 'io.cozy.contacts.groups',
-    _rev: '1-8b92242f1ccaca20e7862306cddbe37f',
-    cozyMetadata: {
-      createdAt: '2020-04-15T06:46:20.128Z',
-      createdByApp: 'Contacts',
-      createdByAppVersion: '0.8.7',
-      metadataVersion: 1,
-      updatedAt: '2020-04-15T06:46:20.128Z',
-      updatedByApps: [
-        { date: '2020-04-15T06:46:20.128Z', slug: 'Contacts', version: '0.8.7' }
-      ]
-    },
-    metadata: { version: 1 },
-    name: 'ez'
-  },
-  {
-    id: '18c031b0ac9f47cdc48b275b1900726d',
-    _id: '18c031b0ac9f47cdc48b275b1900726d',
-    _type: 'io.cozy.contacts.groups',
-    _rev: '1-f438477a749fa0b90cde2e7c53a41bd6',
-    cozyMetadata: {
-      createdAt: '2019-11-08T07:45:55.424Z',
-      createdByApp: 'Contacts',
-      createdByAppVersion: '0.8.6',
-      metadataVersion: 1,
-      updatedAt: '2019-11-08T07:45:55.424Z',
-      updatedByApps: [
-        { date: '2019-11-08T07:45:55.424Z', slug: 'Contacts', version: '0.8.6' }
-      ]
-    },
-    metadata: { version: 1 },
-    name: 'groupe test'
-  }
-]
-
-const setup = () => {
-  const root = render(
-    <DemoProvider>
-      <AlertProvider>
-        <SelectedGroupProvider>
-          <GroupsSelect
-            value={[groups[0]]}
-            allGroups={groups}
-            components={{ Control }}
-            onChange={() => {}}
-            onGroupCreate={createGroup}
-            onGroupUpdate={updateGroup}
-            onGroupDelete={deleteGroup}
-          />
-        </SelectedGroupProvider>
-      </AlertProvider>
-    </DemoProvider>
-  )
-  return { root }
-}
-
-describe('GroupsSelect', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('should display every groups and group creation button', () => {
-    setup()
-
-    act(() => {
-      fireEvent.click(screen.getByText('Groups'))
-    })
-
-    for (const group of groups) {
-      expect(screen.queryByText(group.name)).not.toBeNull()
-    }
-    expect(screen.queryByText('Create a group')).not.toBeNull()
-  })
-
-  it('should be able to create a new group', () => {
-    setup()
-
-    act(() => {
-      fireEvent.click(screen.getByText('Groups'))
-    })
-
-    act(() => {
-      fireEvent.click(screen.getByText('Create a group'))
-    })
-
-    // it should replace the button by an empty input
-    let createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('')
-
-    act(() => {
-      // it should trigger creation function by pressing Enter key, and clear the input
-      fireEvent.change(
-        screen.getByRole('textbox', {
-          id: 'createGroupInput'
-        }),
-        { target: { value: 'new group' } }
-      )
-    })
-
-    createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('new group')
-
-    act(() => {
-      fireEvent.keyDown(
-        screen.getByRole('textbox', {
-          id: 'createGroupInput'
-        }),
-        { key: 'Enter', keyCode: '13' }
-      )
-    })
-
-    expect(createGroup).toHaveBeenCalled()
-    createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('')
-  })
-
-  it("shouldn't be able to create a new group", () => {
-    setup()
-
-    act(() => {
-      fireEvent.click(screen.getByText('Groups'))
-    })
-
-    act(() => {
-      fireEvent.click(screen.getByText('Create a group'))
-    })
-
-    // it should replace the button by an empty input
-    let createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('')
-
-    act(() => {
-      // it should trigger creation function by pressing Enter key, and clear the input
-      fireEvent.change(
-        screen.getByRole('textbox', {
-          id: 'createGroupInput'
-        }),
-        { target: { value: '' } }
-      )
-    })
-
-    createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('')
-
-    act(() => {
-      fireEvent.keyDown(
-        screen.getByRole('textbox', {
-          id: 'createGroupInput'
-        }),
-        { key: 'Enter', keyCode: '13' }
-      )
-    })
-
-    expect(createGroup).not.toHaveBeenCalled()
-    createGroupInput = screen.queryByRole('textbox', {
-      id: 'createGroupInput'
-    })
-    expect(createGroupInput).not.toBeNull()
-    expect(createGroupInput.value).toBe('')
-  })
-
-  it('should be able to rename a group', () => {
-    setup()
-
-    act(() => {
-      // it should replace the field by input with group name as value
-      fireEvent.click(screen.getByText('Groups'))
-    })
-
-    act(() => {
-      fireEvent.click(
-        screen.getByTestId(`ActionsOption_${groups[0].name}-icon_pen`)
-      )
-    })
-
-    let editGroupInput = screen.queryByRole('textbox', {
-      id: 'editGroupInput'
-    })
-    expect(editGroupInput).not.toBeNull()
-    expect(editGroupInput.value).toBe(groups[0].name)
-
-    act(() => {
-      // it should trigger rename function by pressing Enter key, and remove input
-      fireEvent.keyDown(
-        screen.getByRole('textbox', {
-          id: 'editGroupInput'
-        }),
-        { key: 'Enter', keyCode: '13' }
-      )
-    })
-
-    expect(updateGroup).toHaveBeenCalled()
-    editGroupInput = screen.queryByRole('textbox', {
-      id: 'editGroupInput'
-    })
-    expect(editGroupInput).toBeNull()
-  })
-})

package/react/Contacts/GroupsSelect/GroupsSelectProvider.jsx

@@ -1,39 +0,0 @@
-import React, { useContext, useState } from 'react'
-
-import { translatedDefaultSelectedGroup } from './helpers'
-import { locales } from './locales'
-import { useI18n, useExtendI18n } from '../../providers/I18n'
-
-const SelectedGroupContext = React.createContext()
-
-export const useSelectedGroup = () => {
-  const context = useContext(SelectedGroupContext)
-
-  if (!context) {
-    throw new Error(
-      'useSelectedGroup must be used within a SelectedGroupProvider'
-    )
-  }
-  return context
-}
-
-const SelectedGroupProvider = ({ children }) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const [selectedGroup, setSelectedGroup] = useState(
-    translatedDefaultSelectedGroup(t)
-  )
-
-  const contextValue = {
-    selectedGroup,
-    setSelectedGroup
-  }
-
-  return (
-    <SelectedGroupContext.Provider value={contextValue}>
-      {children}
-    </SelectedGroupContext.Provider>
-  )
-}
-
-export default SelectedGroupProvider

package/react/Contacts/GroupsSelect/Readme.md

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

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

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Button from '../../../Buttons'
-import Icon from '../../../Icon'
-import BottomSelectIcon from '../../../Icons/BottomSelect'
-import { useI18n, useExtendI18n } from '../../../providers/I18n'
-import { locales } from '../locales'
-
-const Control = ({
-  innerRef,
-  innerProps,
-  selectProps: { onControlClicked }
-}) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-
-  return (
-    <div ref={innerRef} {...innerProps}>
-      <Button
-        variant="secondary"
-        size="small"
-        onClick={onControlClicked}
-        onTouchStart={onControlClicked}
-        label={t('Contacts.GroupsSelect.manage')}
-        startIcon={<Icon icon={BottomSelectIcon} width="12" />}
-      />
-    </div>
-  )
-}
-
-Control.propTypes = {
-  selectProps: PropTypes.object.isRequired
-}
-
-export default Control