cozy-ui-plus 1.1.0

package/src/Contacts/AddModal/types.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types'
+
+import { iconPropType } from 'cozy-ui/transpiled/react/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/src/Contacts/GroupsSelect/GroupCreation.jsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames'
+import React, { Component } from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Input from 'cozy-ui/transpiled/react/legacy/Input'
+import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import styles from './styles.styl'
+
+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/src/Contacts/GroupsSelect/GroupsSelect.jsx

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import ClickAwayListener from 'cozy-ui/transpiled/react/ClickAwayListener'
+import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import CustomMenu from './SelectBox/Menu'
+import CustomOption from './SelectBox/Option'
+import CustomSelectContainer from './SelectBox/SelectContainer'
+import useGroupsSelect from './useGroupSelect'
+
+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/src/Contacts/GroupsSelect/GroupsSelect.spec.jsx

@@ -0,0 +1,249 @@
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import React from 'react'
+
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+
+import GroupsSelect from './GroupsSelect'
+import SelectedGroupProvider from './GroupsSelectProvider'
+import Control from './SelectBox/Control'
+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/src/Contacts/GroupsSelect/GroupsSelectProvider.jsx

@@ -0,0 +1,40 @@
+import React, { useContext, useState } from 'react'
+
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { translatedDefaultSelectedGroup } from './helpers'
+import { locales } from './locales'
+
+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/src/Contacts/GroupsSelect/Readme.md

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

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

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/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