cozy-ui 131.2.0 → 133.0.0-beta.1

package/react/ContactsListModal/ContactsListModal.jsx

@@ -1,143 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import { useClient } from 'cozy-client'
-
-import AddContactDialog from './AddContact/AddContactDialog'
-import ContactsListContent from './ContactsListContent'
-import MobileHeader from './MobileHeader'
-import styles from './styles.styl'
-import Button from '../Buttons'
-import {
-  TopAnchoredDialog,
-  DialogCloseButton,
-  useCozyDialog
-} from '../CozyDialogs'
-import { DialogTitle, DialogContent } from '../Dialog'
-import Icon from '../Icon'
-import PlusIcon from '../Icons/Plus'
-import TextField from '../TextField'
-import useEventListener from '../hooks/useEventListener'
-import useRealtime from '../hooks/useRealtime'
-import useBreakpoints from '../providers/Breakpoints'
-import CozyTheme from '../providers/CozyTheme'
-import { useI18n } from '../providers/I18n'
-
-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/react/ContactsListModal/ContactsListModalWithQuery.jsx

@@ -1,27 +0,0 @@
-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/react/ContactsListModal/EmptyMessage.jsx

@@ -1,18 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import Typography from '../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/react/ContactsListModal/MobileHeader.jsx

@@ -1,49 +0,0 @@
-import Input from '@material-ui/core/Input'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Icon from '../Icon'
-import IconButton from '../IconButton'
-import PreviousIcon from '../Icons/Previous'
-import Paper from '../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/react/ContactsListModal/Readme.md

@@ -1,45 +0,0 @@
-## 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/react/ContactsListModal/index.jsx

@@ -1,28 +0,0 @@
-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/react/ContactsListModal/locales/en.json

@@ -1,11 +0,0 @@
-{
-  "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/react/ContactsListModal/locales/fr.json

@@ -1,11 +0,0 @@
-{
-  "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/react/ContactsListModal/locales/ru.json

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

package/react/ContactsListModal/locales/vi.json

@@ -1,11 +0,0 @@
-{
-  "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/react/ContactsListModal/mockClient.jsx

@@ -1,47 +0,0 @@
-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/react/ContactsListModal/queries.js

@@ -1,12 +0,0 @@
-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/react/ContactsListModal/styles.styl

@@ -1,12 +0,0 @@
-@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/react/ContactsListModal/withContactsListLocales.jsx

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

package/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx

@@ -1,115 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useMemo, useState } from 'react'
-
-import { useClient } from 'cozy-client'
-
-import withSpecificDialogsLocales from './withSpecificDialogsLocales'
-import Buttons from '../../Buttons'
-import CozyAuthentificationIcon from '../../Icons/CozyAuthentification'
-import PasswordField from '../../PasswordField'
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-import PermissionDialog from '../PermissionDialog'
-
-/**
- * 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)