cozy-ui-plus 1.1.0

package/src/AppTile/helpers.js

@@ -0,0 +1,25 @@
+export const APP_STATUS = {
+  installed: 'installed',
+  maintenance: 'maintenance',
+  update: 'update'
+}
+
+export const getCurrentStatusLabel = app => {
+  if (hasPendingUpdate(app)) return APP_STATUS.update
+  if (isUnderMaintenance(app)) return APP_STATUS.maintenance
+  if (isInstalledAndNothingToReport(app)) return APP_STATUS.installed
+  return null
+}
+
+export const hasPendingUpdate = app => {
+  return !!app.availableVersion
+}
+
+export const isUnderMaintenance = app => {
+  return !hasPendingUpdate(app) && app.maintenance
+}
+
+/* installed here means no actions needed */
+export const isInstalledAndNothingToReport = app => {
+  return !hasPendingUpdate(app) && !isUnderMaintenance(app) && app.installed
+}

package/src/AppTile/index.jsx

@@ -0,0 +1,139 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import WrenchCircleIcon from 'cozy-ui/transpiled/react/Icons/WrenchCircle'
+import Tile, {
+  TileTitle,
+  TileSubtitle,
+  TileFooter,
+  TileIcon,
+  TileDescription
+} from 'cozy-ui/transpiled/react/Tile'
+import { createUseI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { APP_STATUS, getCurrentStatusLabel } from './helpers'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+import ru from './locales/ru.json'
+import vi from './locales/vi.json'
+import styles from './styles.styl'
+import AppIcon from '../AppIcon'
+import { isShortcutFile } from '../AppSections/helpers.js'
+import { ShortcutTile } from '../ShortcutTile'
+import { AppDoctype } from '../proptypes'
+
+const locales = { en, fr, ru, vi }
+
+let dataset
+const getDataset = () => {
+  if (dataset) return dataset
+  const root = document.querySelector('[role=application]')
+  dataset = root && root.dataset
+  return dataset
+}
+
+const getAppIconProps = () => ({
+  domain: getDataset() && getDataset().cozyDomain,
+  secure: window.location.protocol === 'https:'
+})
+
+const useI18n = createUseI18n(locales)
+
+export const AppTile = ({
+  app,
+  name: nameProp,
+  namePrefix,
+  onClick,
+  showDeveloper,
+  showStatus,
+  IconComponent: IconComponentProp,
+  displaySpecificMaintenanceStyle
+}) => {
+  const { t } = useI18n()
+  const { developer = {} } = app
+
+  const name = nameProp || app.name
+
+  const statusLabel = getCurrentStatusLabel(app)
+
+  const isStatusArray = Array.isArray(showStatus)
+
+  const statusToDisplay =
+    isShortcutFile(app) && statusLabel === APP_STATUS.installed
+      ? 'favorite'
+      : isStatusArray
+      ? showStatus.indexOf(statusLabel) > -1 && statusLabel
+      : showStatus && statusLabel
+
+  const IconComponent = IconComponentProp || AppIcon
+
+  const isInMaintenanceWithSpecificDisplay =
+    displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
+
+  return (
+    <Tile
+      tag="button"
+      type="button"
+      onClick={onClick}
+      className={cx({
+        [styles['AppTile-container-maintenance']]:
+          isInMaintenanceWithSpecificDisplay
+      })}
+      isSecondary={statusLabel === APP_STATUS.installed}
+    >
+      <TileIcon>
+        {isShortcutFile(app) ? (
+          <ShortcutTile file={app} />
+        ) : (
+          <IconComponent
+            app={app}
+            className={styles['AppTile-icon']}
+            {...getAppIconProps()}
+          />
+        )}
+        {isInMaintenanceWithSpecificDisplay && (
+          <Icon
+            data-testid="icon-maintenance"
+            icon={WrenchCircleIcon}
+            color="var(--coolGrey)"
+            className={styles['AppTile-icon-maintenance']}
+          />
+        )}
+      </TileIcon>
+      <TileDescription className={styles[`AppTile-description`]}>
+        <TileTitle isMultiline={!statusLabel}>
+          {namePrefix ? `${namePrefix} ${name}` : name}
+        </TileTitle>
+        {developer.name && showDeveloper && (
+          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
+        )}
+        {statusToDisplay && (
+          <TileFooter isAccent={statusLabel === APP_STATUS.update}>
+            {t(`app_item.${statusToDisplay}`)}
+          </TileFooter>
+        )}
+      </TileDescription>
+    </Tile>
+  )
+}
+
+AppTile.propTypes = {
+  app: AppDoctype,
+  name: PropTypes.string,
+  namePrefix: PropTypes.string,
+  onClick: PropTypes.func,
+  IconComponent: PropTypes.element,
+  showDeveloper: PropTypes.bool,
+  showStatus: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+  displaySpecificMaintenanceStyle: PropTypes.bool
+}
+
+AppTile.defaultProps = {
+  showDeveloper: true,
+  showStatus: true,
+  displaySpecificMaintenanceStyle: false
+}
+
+export default AppTile

package/src/AppTile/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "app_item": {
+    "by": "By",
+    "installed": "Installed",
+    "maintenance": "In maintenance",
+    "update": "Update available",
+    "favorite": "Added to home page"
+  }
+}

package/src/AppTile/locales/fr.json

@@ -0,0 +1,9 @@
+{
+  "app_item": {
+    "by": "Par",
+    "installed": "Installée",
+    "maintenance": "En maintenance",
+    "update": "Mise à jour dispo.",
+    "favorite": "Ajouté sur l'accueil"
+  }
+}

package/src/AppTile/locales/ru.json

@@ -0,0 +1,9 @@
+{
+  "app_item": {
+    "by": "От",
+    "installed": "Установлено",
+    "maintenance": "На обслуживании",
+    "update": "Обновление доступно",
+    "favorite": "Добавлено на главную страницу"
+  }
+}

package/src/AppTile/locales/vi.json

@@ -0,0 +1,9 @@
+{
+  "app_item": {
+    "by": "Bởi",
+    "installed": "Đã cài đặt",
+    "maintenance": "Đang bảo trì",
+    "update": "Có cập nhật mới",
+    "favorite": "Đã thêm vào trang chủ"
+  }
+}

package/src/AppTile/styles.styl

@@ -0,0 +1,27 @@
+@require 'settings/breakpoints.styl'
+
+
+.AppTile-icon
+  object-fit contain
+  max-width 100%
+  width auto
+
+.AppTile-icon--default
+  height 100%
+  padding 0 .5em
+
+.AppTile-icon-maintenance
+  position absolute
+  border 2px solid var(--primaryContrastTextColor)
+  border-radius 50%
+  background var(--primaryContrastTextColor)
+  bottom 80px
+  left 80px
+
+  +small-screen()
+    bottom 6px
+    left 40px
+
+.AppTile-container-maintenance
+  filter grayscale(1)
+  opacity .64

package/src/CipherIcon/Readme.md

@@ -0,0 +1,14 @@
+This is an icon representing a cipher for a given konnector
+
+```jsx
+import CipherIcon from 'cozy-ui/transpiled/react/CipherIcon';
+
+<div>
+  <div>
+    <CipherIcon konnector="payfit" />
+  </div>
+  <div>
+    <CipherIcon konnector={{ slug: 'payfit' }} />
+  </div>
+</div>
+```

package/src/CipherIcon/index.jsx

@@ -0,0 +1,46 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { withClient } from 'cozy-client'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import KeychainIcon from 'cozy-ui/transpiled/react/Icons/Keychain'
+
+import AppIcon from '../AppIcon'
+import { AppDoctype } from '../proptypes'
+
+class CipherIcon extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.fetchIcon = this.fetchIcon.bind(this)
+  }
+
+  fetchIcon() {
+    const { client, konnector } = this.props
+
+    return client.getStackClient().getIconURL({
+      type: 'konnector',
+      slug: konnector.slug || konnector,
+      appData: konnector
+    })
+  }
+
+  render() {
+    const { className, ...rest } = this.props
+
+    return (
+      <div className={cx('u-dib u-pos-relative', className)} {...rest}>
+        <Icon icon={KeychainIcon} size={32} />
+        <div className="u-pos-absolute u-right-0 u-bottom-0">
+          <AppIcon fetchIcon={this.fetchIcon} className="u-w-1 u-h-1" />
+        </div>
+      </div>
+    )
+  }
+}
+
+CipherIcon.propTypes = {
+  konnector: PropTypes.oneOfType([AppDoctype, PropTypes.string]).isRequired
+}
+
+export default withClient(CipherIcon)

package/src/CipherIcon/index.spec.jsx

@@ -0,0 +1,53 @@
+/* eslint-disable no-console */
+
+import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
+import CipherIcon from '.'
+
+jest.mock('cozy-client', () => ({
+  withClient: Component => {
+    const client = {
+      getStackClient: () => ({
+        getIconURL: ({ type, appData }) => {
+          console.log('getIconUrl called with:')
+          console.log(type)
+          console.log(appData)
+        }
+      })
+    }
+    return konnector => (
+      <Component client={client} konnector={{ ...konnector }} />
+    )
+  }
+}))
+
+jest.mock('../AppIcon', () => ({ fetchIcon }) => (
+  <button data-testid="app-icon" onClick={fetchIcon}></button>
+))
+
+describe('CipherIcon', () => {
+  it('should provide appData to getIconUrl in order to get icon simply, when oauth not needed', () => {
+    // Given
+    jest.spyOn(console, 'log').mockImplementation()
+    const konnector = {
+      name: 'PropTypes.string',
+      slug: 'slug',
+      links: {
+        icon: 'icon url'
+      },
+      latest_version: {
+        version: 'version'
+      }
+    }
+    const { getByTestId } = render(<CipherIcon konnector={konnector} />)
+
+    // When
+    fireEvent.click(getByTestId('app-icon'))
+
+    // Then
+    expect(console.log).toHaveBeenNthCalledWith(1, 'getIconUrl called with:')
+    expect(console.log).toHaveBeenNthCalledWith(2, 'konnector')
+    expect(console.log).toHaveBeenNthCalledWith(3, { konnector })
+  })
+})

package/src/CollectionField/Readme.md

@@ -0,0 +1,41 @@
+If the initial data is empty, the button is shown. If it contains
+only `null`, the button will not be shown, and the underlying component
+will receive `null` as its value, which can be handy for example for
+the ContactPicker to remove one click.
+
+```jsx
+import CollectionField from 'cozy-ui/transpiled/react/Labs/CollectionField'
+import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker'
+import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import contacts from '../../ContactsList/_mockContacts.json'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+initialState = { contacts: [contacts[0]] }
+
+const initialVariants = [{
+  inline: false,
+  emptyData: false,
+  nullData: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <DemoProvider client={mockClient}>
+      <CollectionField
+        values={variant.emptyData ? [] : variant.nullData ? [null] : state.contacts}
+        component={ContactPicker}
+        onChange={contacts => setState({ contacts })}
+        onAddField={fieldInstance => fieldInstance.open()}
+        label="Contacts"
+        addButtonLabel="Add a contact"
+        removeButtonLabel="Remove this contact"
+        placeholder="Select a contact"
+        variant={variant.inline ? "inline" : null}
+      />
+    </DemoProvider>
+  )}
+</Variants>
+```

package/src/CollectionField/index.jsx

@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Label from 'cozy-ui/transpiled/react/Label'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+
+import styles from './styles.styl'
+import { FieldContainer } from '../Field'
+
+/**
+ * Handles a collection of form fields.
+ * This is a controlled component. You have to give it some values and handle
+ * changes via the onChange prop. See examples in readme.
+ *
+ * When a field is added, the underlying component receives `null` as
+ * its value.
+ * When a field is being added, the "Add" button is not shown.
+ */
+const CollectionField = props => {
+  const {
+    values,
+    component: Component,
+    placeholder,
+    label,
+    addButtonLabel,
+    removeButtonLabel,
+    onChange,
+    onAddField,
+    ...rest
+  } = props
+
+  // This ref is used to support the onAddField props.
+  // It contains the index of the field that has been
+  // added and is used when handling refs to pass the
+  // instance of the component that was added to the
+  // onAddField prop of the parent.
+  const justAddedFieldIndex = useRef()
+
+  const handleChange = index => contact => {
+    const data = [...values]
+    data[index] = contact
+
+    onChange(data)
+  }
+
+  const handleAdd = () => {
+    const data = [...values, null]
+    onChange(data)
+    justAddedFieldIndex.current = data.length - 1
+  }
+
+  const handleRemove = index => {
+    const data = [...values.slice(0, index), ...values.slice(index + 1)]
+    onChange(data)
+  }
+
+  const handleFieldRef = (index, componentInstance) => {
+    if (!onAddField) {
+      return
+    }
+    if (index === justAddedFieldIndex.current && componentInstance) {
+      justAddedFieldIndex.current = null
+      onAddField(componentInstance)
+    }
+  }
+
+  return (
+    <FieldContainer {...rest}>
+      <Label>{label}</Label>
+      <Stack>
+        {values.length > 0 ? (
+          <Stack spacing="s">
+            {values.map((value, index) => {
+              return (
+                <div key={index} className={styles.CollectionField__row}>
+                  <Component
+                    ref={value => handleFieldRef(index, value)}
+                    value={value}
+                    onChange={handleChange(index)}
+                    placeholder={placeholder}
+                  />
+                  <Button
+                    type="button"
+                    theme="secondary"
+                    label={removeButtonLabel}
+                    iconOnly
+                    round
+                    icon={
+                      <Icon icon={CrossSmallIcon} color="var(--slateGrey)" />
+                    }
+                    onClick={() => handleRemove(index)}
+                  />
+                </div>
+              )
+            })}
+          </Stack>
+        ) : null}
+        {values[values.length - 1] !== null ? (
+          <Button
+            label={addButtonLabel}
+            type="button"
+            theme="text"
+            icon={
+              <Icon
+                icon={PlusIcon}
+                className={styles.CollectionField__addBtnIcon}
+              />
+            }
+            onClick={handleAdd}
+            className={styles.CollectionField__addBtn}
+          />
+        ) : null}
+      </Stack>
+    </FieldContainer>
+  )
+}
+
+CollectionField.propTypes = {
+  /** @type {Array} Individual values will be passed through `value` to the underlying Component */
+  values: PropTypes.array.isRequired,
+  /** @type {ElementType} Component used to render a field */
+  component: PropTypes.elementType.isRequired,
+  /** @type {String} Label of the field */
+  label: PropTypes.node.isRequired,
+  /** @type {Function} Callback called when a value is added / updated / removed */
+  onChange: PropTypes.func.isRequired,
+  /** @type {String} Label of the "Add" button */
+  addButtonLabel: PropTypes.node.isRequired,
+  /** @type {String} Label of the "Remove" button */
+  removeButtonLabel: PropTypes.node.isRequired,
+  /** @type {String} Placeholder passed to the Component */
+  placeholder: PropTypes.string,
+  /** @type {String} Callback called with the instance of the Component when a field is being added */
+  onAddField: PropTypes.func
+}
+
+export default CollectionField

package/src/CollectionField/styles.styl

@@ -0,0 +1,15 @@
+@require 'settings/spaces.styl'
+
+.CollectionField__addBtn
+    margin-left 0
+    margin-right 0
+
+.CollectionField__addBtnIcon
+    margin-right spacing_values.xs
+
+.CollectionField__row
+    display flex
+    align-items center
+
+    > * + *
+        margin-left spacing_values.m

package/src/ContactPicker/Readme.md

@@ -0,0 +1,26 @@
+⚠️ The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactPicker`.
+
+⚠️ Since this component use `ContactsListModal`, it does a request to fetch all contacts, it should be wrapped in a CozyProvider.
+
+Also, to take advantage of realtime updates of the contacts, the CozyClient passed to the provider should have a realtime plugin initialized. The component will work without realtime initialized, but the list will not always be up-to-date.
+
+```jsx
+import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker'
+
+initialState = { selectedContact: null }
+
+;
+
+<DemoProvider client={mockClient}>
+  <ContactPicker
+    placeholder="Select a contact"
+    onChange={selectedContact => setState({ selectedContact })}
+    value={state.selectedContact}
+    listPlaceholder="Search a contact"
+    listEmptyMessage="No contact"
+    addContactLabel="Add a contact"
+  />
+</DemoProvider>
+```

package/src/ContactPicker/index.jsx

@@ -0,0 +1,86 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getDisplayName } from 'cozy-client/dist/models/contact'
+
+import styles from './styles.styl'
+import ContactsListModal from '../ContactsListModal'
+
+const SelectControl = props => {
+  const { className, children, ...rest } = props
+
+  return (
+    <button
+      type="button"
+      className={cx(styles.SelectControl, className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+class ContactPicker extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      opened: this.props.initialOpen
+    }
+    this.open = this.open.bind(this)
+    this.close = this.close.bind(this)
+  }
+
+  open() {
+    this.setState({ opened: true })
+  }
+
+  close() {
+    this.setState({ opened: false })
+  }
+
+  render() {
+    const {
+      placeholder,
+      onChange,
+      value,
+      listPlaceholder,
+      listEmptyMessage,
+      addContactLabel,
+      initialOpen, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props
+    const { opened } = this.state
+
+    const handleChange = contact => {
+      onChange(contact)
+    }
+
+    return (
+      <>
+        <SelectControl {...rest} onClick={this.open}>
+          {value ? getDisplayName(value) : placeholder}
+        </SelectControl>
+        {opened && (
+          <ContactsListModal
+            dismissAction={this.close}
+            onItemClick={handleChange}
+            placeholder={listPlaceholder}
+            emptyMessage={listEmptyMessage}
+            addContactLabel={addContactLabel}
+          />
+        )}
+      </>
+    )
+  }
+}
+
+ContactPicker.defaultProps = {
+  initialOpen: false
+}
+
+ContactPicker.propTypes = {
+  initialOpen: PropTypes.bool
+}
+
+export default ContactPicker

package/src/ContactPicker/styles.styl

@@ -0,0 +1,5 @@
+@require 'tools/mixins'
+@require 'components/forms'
+
+.SelectControl
+    @extend $select

package/src/Contacts/AddModal/ContactAddressDialog/helpers.js

@@ -0,0 +1,22 @@
+import { cleanFormattedAddress } from 'cozy-client/dist/models/contact'
+
+/**
+ * Make formatted address
+ * @param {{ name: string, value: string }[]} subFieldsState - State of address sub fields
+ * @returns {string} - Formatted address
+ */
+export const makeFormattedAddressWithSubFields = (subFieldsState, t) => {
+  const normalizedAddress = subFieldsState.reduce((acc, curr) => {
+    const key = curr.name
+      .split('.')
+      .pop()
+      .replace(/address/, '')
+
+    return {
+      ...acc,
+      [key]: curr.value || ''
+    }
+  }, {})
+
+  return cleanFormattedAddress(t('formatted.address', normalizedAddress))
+}