cozy-ui-plus 1.1.0

package/src/ContactsListModal/ContactsListModal.jsx

@@ -0,0 +1,143 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import {
+  TopAnchoredDialog,
+  DialogCloseButton,
+  useCozyDialog
+} from 'cozy-ui/transpiled/react/CozyDialogs'
+import { DialogTitle, DialogContent } from 'cozy-ui/transpiled/react/Dialog'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import useEventListener from 'cozy-ui/transpiled/react/hooks/useEventListener'
+import useRealtime from 'cozy-ui/transpiled/react/hooks/useRealtime'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import AddContactDialog from './AddContact/AddContactDialog'
+import ContactsListContent from './ContactsListContent'
+import MobileHeader from './MobileHeader'
+import styles from './styles.styl'
+import CozyTheme from '../providers/CozyTheme'
+
+const ContactsListModal = ({
+  onItemClick,
+  placeholder,
+  addContactLabel,
+  emptyMessage,
+  dismissAction,
+  contacts
+}) => {
+  const [filter, setFilter] = useState('')
+  const [showAddDialog, setShowAddDialog] = useState(false)
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const { dialogProps, dialogTitleProps } = useCozyDialog({
+    size: 'large',
+    open: true,
+    onClose: dismissAction
+  })
+  const client = useClient()
+
+  useRealtime(
+    client,
+    {
+      'io.cozy.contacts': {
+        created: contacts.fetch,
+        updated: contacts.fetch
+      }
+    },
+    []
+  )
+  useEventListener(document, 'resume', contacts.fetch)
+
+  const handleFilterChange = e => {
+    setFilter(e.target.value)
+  }
+
+  const selfAddContactLabel = addContactLabel ?? t('addContact')
+  const selfPlaceholder = placeholder ?? t('searchContact')
+
+  return (
+    <TopAnchoredDialog {...dialogProps}>
+      <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
+        <DialogCloseButton onClick={dismissAction} />
+      </CozyTheme>
+      <DialogTitle
+        {...dialogTitleProps}
+        className={cx(dialogTitleProps.className, {
+          'u-p-0 u-w-100': isMobile
+        })}
+      >
+        {isMobile ? (
+          <MobileHeader
+            filter={filter}
+            placeholder={selfPlaceholder}
+            onChange={handleFilterChange}
+            onDismiss={dismissAction}
+          />
+        ) : (
+          <TextField
+            variant="outlined"
+            type="text"
+            label={selfPlaceholder}
+            id="contactsListModal-search-id"
+            fullWidth
+            value={filter}
+            onChange={handleFilterChange}
+            autoFocus
+          />
+        )}
+      </DialogTitle>
+      <DialogContent className="u-p-0">
+        <div className="dialogContentInner">
+          <div className={styles.ContactsListModal__addContactContainer}>
+            <Button
+              className={isMobile && 'u-mt-1'}
+              variant="secondary"
+              theme="secondary"
+              label={selfAddContactLabel || <Icon icon={PlusIcon} />}
+              {...(selfAddContactLabel && {
+                startIcon: <Icon icon={PlusIcon} />
+              })}
+              onClick={setShowAddDialog}
+            />
+          </div>
+          <ContactsListContent
+            filter={filter}
+            contacts={contacts}
+            onItemClick={onItemClick}
+            emptyMessage={emptyMessage}
+            dismissAction={dismissAction}
+          />
+        </div>
+      </DialogContent>
+      {showAddDialog && (
+        <AddContactDialog
+          onListClose={dismissAction}
+          onCreate={onItemClick}
+          onClose={() => setShowAddDialog(false)}
+        />
+      )}
+    </TopAnchoredDialog>
+  )
+}
+
+ContactsListModal.propTypes = {
+  onItemClick: PropTypes.func,
+  /** Label to show in the search input */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Label to show on the button to add a contact */
+  addContactLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Message to show when no result */
+  emptyMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  dismissAction: PropTypes.func,
+  /** Query state of contacts */
+  contacts: PropTypes.object
+}
+
+export default ContactsListModal

package/src/ContactsListModal/ContactsListModalWithQuery.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useQueryAll } from 'cozy-client'
+
+import ContactsListModal from './ContactsListModal'
+import { buildContactsQuery } from './queries'
+
+const ContactsListModalWithQuery = props => {
+  const contactsQuery = buildContactsQuery()
+  const contacts = useQueryAll(contactsQuery.definition, contactsQuery.options)
+
+  return <ContactsListModal contacts={contacts} {...props} />
+}
+
+ContactsListModalWithQuery.propTypes = {
+  onItemClick: PropTypes.func,
+  /** Label to show in the search input */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Label to show on the button to add a contact */
+  addContactLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Message to show when no result */
+  emptyMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  dismissAction: PropTypes.func
+}
+
+export default ContactsListModalWithQuery

package/src/ContactsListModal/EmptyMessage.jsx

@@ -0,0 +1,18 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const EmptyMessage = props => {
+  const { className, ...rest } = props
+
+  return (
+    <Typography
+      className={cx('u-ta-center u-pv-2', className)}
+      {...rest}
+      variant="body1"
+    />
+  )
+}
+
+export default EmptyMessage

package/src/ContactsListModal/MobileHeader.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
+import Input from 'cozy-ui/transpiled/react/Input'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+
+import CozyTheme from '../providers/CozyTheme'
+
+const barStyle = {
+  height: 48
+}
+
+const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
+  return (
+    <CozyTheme variant="inverted">
+      <Paper
+        square
+        elevation={0}
+        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+        style={barStyle}
+      >
+        <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
+          <Icon icon={PreviousIcon} />
+        </IconButton>
+        <Input
+          type="text"
+          placeholder={placeholder}
+          id={placeholder}
+          value={filter}
+          onChange={onChange}
+          autoFocus
+          fullWidth
+          disableUnderline
+        />
+      </Paper>
+    </CozyTheme>
+  )
+}
+
+MobileHeader.propTypes = {
+  filter: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onDismiss: PropTypes.func
+}
+
+export default MobileHeader

package/src/ContactsListModal/Readme.md

@@ -0,0 +1,45 @@
+## ContactsListModal
+
+A filterable list of contacts shown in a modal.
+
+⚠️ The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactsListModal`.
+
+⚠️ Since this component 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 static
+import CozyClient, { CozyProvider } from 'cozy-client'
+import { RealtimePlugin } from 'cozy-realtime'
+
+const client = new CozyClient(/* ... */)
+client.registerPlugin(RealtimePlugin)
+
+<CozyProvider client={client}>
+  {/* ... */}
+</CozyProvider>
+```
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import ContactsListModal from 'cozy-ui/transpiled/react/ContactsListModal'
+import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { I18nContext } from 'cozy-ui/transpiled/react/providers/I18n'
+
+initialState = { opened: isTesting() }
+
+;
+
+<DemoProvider client={mockClient}>
+  <button type="button" onClick={() => setState({ opened: true })}>
+    Open contacts list
+  </button>
+  {state.opened && (
+    <ContactsListModal
+      dismissAction={() => setState({ opened: false })}
+      onItemClick={contact => alert(`Clicked on ${contact._id}`)}
+    />
+  )}
+</DemoProvider>
+```

package/src/ContactsListModal/index.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ContactsListModal from './ContactsListModal'
+import ContactsListModalWithQuery from './ContactsListModalWithQuery'
+import { withContactsListLocales } from './withContactsListLocales'
+
+const ContactsListModalWrapper = ({ contacts, ...props }) => {
+  if (contacts) {
+    return <ContactsListModal contacts={contacts} {...props} />
+  }
+  return <ContactsListModalWithQuery {...props} />
+}
+
+ContactsListModalWrapper.propTypes = {
+  onItemClick: PropTypes.func,
+  /** Label to show in the search input */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Label to show on the button to add a contact */
+  addContactLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Message to show when no result */
+  emptyMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  dismissAction: PropTypes.func,
+  /** Query state of contacts */
+  contacts: PropTypes.object
+}
+
+export default withContactsListLocales(ContactsListModalWrapper)

package/src/ContactsListModal/locales/en.json

@@ -0,0 +1,11 @@
+{
+  "cancel": "Cancel",
+  "save": "Save",
+  "newContact": "New contact",
+  "coordinates": "Coordinates",
+  "givenName": "Firstname",
+  "familyName": "Lastname",
+  "addContact": "Add a contact",
+  "searchContact": "Search a contact",
+  "emptyContact": "No contact"
+}

package/src/ContactsListModal/locales/fr.json

@@ -0,0 +1,11 @@
+{
+  "cancel": "Annuler",
+  "save": "Enregistrer",
+  "newContact": "Nouveau contact",
+  "coordinates": "Coordonnées",
+  "givenName": "Prénom",
+  "familyName": "Nom",
+  "addContact": "Ajouter un contact",
+  "searchContact": "Rechercher un contact",
+  "emptyContact": "Aucun contact"
+}

package/src/ContactsListModal/locales/ru.json

@@ -0,0 +1,11 @@
+{
+  "cancel": "Отменить",
+  "save": "Сохранить",
+  "newContact": "Новый контакт",
+  "coordinates": "Координаты",
+  "givenName": "Имя",
+  "familyName": "Фамилия",
+  "addContact": "Добавить контакт",
+  "searchContact": "Найти контакт",
+  "emptyContact": "Нет контактов"
+}

package/src/ContactsListModal/locales/vi.json

@@ -0,0 +1,11 @@
+{
+  "cancel": "Hủy",
+  "save": "Lưu",
+  "newContact": "Liên hệ mới",
+  "coordinates": "Tọa độ",
+  "givenName": "Tên",
+  "familyName": "Họ",
+  "addContact": "Thêm liên hệ",
+  "searchContact": "Tìm liên hệ",
+  "emptyContact": "Không có liên hệ"
+}

package/src/ContactsListModal/mockClient.jsx

@@ -0,0 +1,47 @@
+import CozyClient from 'cozy-client'
+
+import contacts from '../ContactsList/_mockContacts.json'
+
+const mockClient = new CozyClient({
+  uri: 'http://cozy.tools:8080',
+  token: 'faketoken'
+})
+
+mockClient.__proto__.requestQuery = ({ doctype }) => {
+  if (doctype === 'io.cozy.contacts') {
+    return Promise.resolve({
+      fetchStatus: 'loaded',
+      data: contacts
+    })
+  }
+
+  if (doctype === 'io.cozy.apps') {
+    return Promise.resolve({
+      fetchStatus: 'loaded',
+      data: [
+        {
+          _id: 'io.cozy.apps/contacts',
+          _type: 'io.cozy.apps',
+          attributes: {
+            slug: 'contacts'
+          },
+          links: {
+            related: 'http://contacts.cozy.tools:8080/'
+          }
+        }
+      ]
+    })
+  }
+}
+
+mockClient.plugins = {
+  realtime: {
+    subscribe: () => {},
+    unsubscribe: () => {},
+    unsubscribeAll: () => {}
+  }
+}
+
+mockClient.save = () => ({ data: contacts[0] })
+
+export default mockClient

package/src/ContactsListModal/queries.js

@@ -0,0 +1,12 @@
+import { Q, fetchPolicies } from 'cozy-client'
+import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
+
+const defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000)
+
+export const buildContactsQuery = () => ({
+  definition: () => Q(CONTACTS_DOCTYPE).limitBy(1000),
+  options: {
+    as: `${CONTACTS_DOCTYPE}`,
+    fetchPolicy: defaultFetchPolicy
+  }
+})

package/src/ContactsListModal/styles.styl

@@ -0,0 +1,12 @@
+@require 'settings/breakpoints'
+@require 'settings/spaces'
+
+.ContactsListModal__addContactContainer
+    display flex
+    justify-content center
+    margin-bottom spacing_values.m
+    margin 0 spacing_values.xs spacing_values.m
+
+    +small-screen()
+        > *
+            flex 1

package/src/ContactsListModal/withContactsListLocales.jsx

@@ -0,0 +1,11 @@
+import withLocales from 'cozy-ui/transpiled/react/providers/I18n/withLocales'
+
+import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export const withContactsListLocales = withLocales(locales)

package/src/Dialogs/AuthenticationDialogs/index.jsx

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types'
+import React, { useMemo, useState } from 'react'
+
+import { useClient } from 'cozy-client'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import PermissionDialog from 'cozy-ui/transpiled/react/CozyDialogs/PermissionDialog'
+import CozyAuthentificationIcon from 'cozy-ui/transpiled/react/Icons/CozyAuthentification'
+import PasswordField from 'cozy-ui/transpiled/react/PasswordField'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+
+/**
+ * Dialog used to authenticate a user in the cozy system.
+ * The authentication logic is implemented in the applications.
+ */
+const AuthentificationDialog = ({
+  onClose,
+  onSubmit,
+  isLoading,
+  isOIDC,
+  error,
+  resetRedirection
+}) => {
+  const { t } = useI18n()
+  const client = useClient()
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    onSubmit(password)
+  }
+
+  const onPasswordChange = e => {
+    setPassword(e.currentTarget.value)
+  }
+
+  const passphraseResetUrl = useMemo(() => {
+    const url = new URL('/auth/passphrase_reset', client.getStackClient().uri)
+    if (resetRedirection) {
+      url.searchParams.set('from', resetRedirection)
+    }
+    return url.href
+  }, [client, resetRedirection])
+
+  return (
+    <PermissionDialog
+      open
+      onClose={onClose}
+      title={t(`authentification-dialog.${isOIDC ? 'title-oidc' : 'title'}`)}
+      icon={CozyAuthentificationIcon}
+      content={
+        <form onSubmit={handleSubmit}>
+          <Typography variant="body1" className="u-ta-center">
+            {t('authentification-dialog.subtitle')}
+          </Typography>
+          <PasswordField
+            autoFocus
+            disabled={isLoading}
+            value={password}
+            onChange={onPasswordChange}
+            className="u-mv-1"
+            label={t(
+              `authentification-dialog.${isOIDC ? 'label-oidc' : 'label'}`
+            )}
+            error={Boolean(error)}
+            helperText={error && t(`authentification-dialog.errors.${error}`)}
+            fullWidth
+            required
+          />
+          <Typography
+            variant="body1"
+            component="a"
+            color="primary"
+            href={passphraseResetUrl}
+            className="u-link"
+          >
+            {t('authentification-dialog.forgotten-password')}
+          </Typography>
+        </form>
+      }
+      actions={
+        <Buttons
+          busy={isLoading}
+          disabled={isLoading || password.length === 0}
+          onClick={handleSubmit}
+          label={t('authentification-dialog.unlock')}
+          fullWidth
+        />
+      }
+    />
+  )
+}
+
+AuthentificationDialog.defaultProps = {
+  isOIDC: false
+}
+
+AuthentificationDialog.propTypes = {
+  /** A function call on clicking the close button */
+  onClose: PropTypes.func,
+  /** A function call on submitting the form with the password entered */
+  onSubmit: PropTypes.func,
+  /** Waiting status, e.g. processing of form submission */
+  isLoading: PropTypes.bool,
+  /** Show specific wording for OIDC */
+  isOIDC: PropTypes.bool,
+  /** Error key to display a message */
+  error: PropTypes.string,
+  /** Application slug where to redirect the user after a password reset */
+  resetRedirection: PropTypes.string
+}
+
+export default withSpecificDialogsLocales(AuthentificationDialog)