cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/FilePicker/queries.js

@@ -1,37 +0,0 @@
-import { Q, fetchPolicies } from 'cozy-client'
-
-const FILES_DOCTYPE = 'io.cozy.files'
-
-const defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000)
-const TRASH_DIR_ID = `${FILES_DOCTYPE}.trash-dir`
-const SHARED_DRIVES_DIR_ID = `${FILES_DOCTYPE}.shared-drives-dir`
-
-export const buildCurrentFolderQuery = folderId => ({
-  definition: () => Q(FILES_DOCTYPE).getById(folderId),
-  options: {
-    as: `onlyfolder-${folderId}`,
-    fetchPolicy: defaultFetchPolicy
-  }
-})
-
-export const buildContentFolderQuery = dirId => ({
-  definition: () =>
-    Q(FILES_DOCTYPE)
-      .where({
-        dir_id: dirId,
-        type: { $gt: null },
-        name: { $gt: null }
-      })
-      .partialIndex({
-        _id: {
-          $nin: [SHARED_DRIVES_DIR_ID, TRASH_DIR_ID]
-        }
-      })
-      .indexFields(['dir_id', 'type', 'name'])
-      .sortBy([{ dir_id: 'asc' }, { type: 'asc' }, { name: 'asc' }])
-      .limitBy(20),
-  options: {
-    as: `buildContentFolderQuery-${dirId}`,
-    fetchPolicy: defaultFetchPolicy
-  }
-})

package/react/FilePicker/styles.styl

@@ -1,18 +0,0 @@
-.filePickerBreadcrumb-previousPath
-    color var(--actionColorActive)
-    cursor pointer
-
-.filePickerBreadcrumb-icon
-    color var(--actionColorActive)
-    margin 0 0.25rem
-
-@supports (display: contents)
-    .filePickerBreadcrumb-wrapper
-        display contents
-
-@supports not (display: contents)
-    .filePickerBreadcrumb-wrapper
-        display flex
-        flex 1 1 auto
-        align-items center
-        width 100%

package/react/IntentDialogOpener/IntentDialogOpener.jsx

@@ -1,109 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import { DialogCloseButton } from '../CozyDialogs'
-import Dialog from '../Dialog'
-import IntentIframe, { iframeProps } from '../IntentIframe'
-
-/**
- * Wrapper that adds an `onClick` handler to its children that opens a dialog
- * for the specified intent.
- */
-const IntentDialogOpener = props => {
-  const {
-    options,
-    action,
-    doctype,
-    children,
-    closable,
-    showCloseButton,
-    create,
-    tag,
-    onComplete,
-    onDismiss,
-    iframeProps,
-    Component,
-    ...componentProps
-  } = props
-  const [modalOpened, setModalOpened] = useState(false)
-
-  const openModal = ev => {
-    ev.preventDefault()
-    ev.stopPropagation()
-    setModalOpened(true)
-  }
-  const closeModal = () => setModalOpened(false)
-
-  const handleComplete = result => {
-    closeModal()
-    onComplete && onComplete(result)
-  }
-
-  const handleDismiss = () => {
-    closeModal()
-    onDismiss && onDismiss()
-  }
-
-  const Tag = tag // React needs uppercase element names
-  const elements = [
-    React.cloneElement(children, { key: 'opener', onClick: openModal })
-  ]
-
-  if (modalOpened) {
-    elements.push(
-      <Component
-        key="intent-modal"
-        open={modalOpened}
-        onClose={closable && handleDismiss}
-        {...componentProps}
-      >
-        {closable && showCloseButton && (
-          <DialogCloseButton onClick={handleDismiss} />
-        )}
-        <IntentIframe
-          action={action}
-          type={doctype}
-          data={options}
-          create={create}
-          onCancel={handleDismiss}
-          onTerminate={handleComplete}
-          iframeProps={iframeProps}
-        />
-      </Component>
-    )
-  }
-
-  return <Tag>{elements}</Tag>
-}
-
-IntentDialogOpener.propTypes = {
-  /** Element on which the onClick handler will be added */
-  children: PropTypes.element.isRequired,
-  /** What should happen when the intent has completed */
-  onComplete: PropTypes.func,
-  /** What should happen when the intent has dismissed */
-  onDismiss: PropTypes.func,
-  /** Action you want to execute */
-  action: PropTypes.string.isRequired,
-  /** Doctype on which you want to execute the action */
-  doctype: PropTypes.string.isRequired,
-  /** Whether the dialog is closable by itself (not by the Intent) with a button or by clicking outside of it */
-  closable: PropTypes.bool.isRequired,
-  /** Whether the dialog close button is shown */
-  showCloseButton: PropTypes.bool.isRequired,
-  /** Tag used to wrap children */
-  tag: PropTypes.string.isRequired,
-  /** Component to be used instead of the dialog */
-  Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /** Props to be passed to the iframe */
-  iframeProps: iframeProps
-}
-
-IntentDialogOpener.defaultProps = {
-  tag: 'span',
-  closable: true,
-  Component: Dialog,
-  showCloseButton: true
-}
-
-export default IntentDialogOpener

package/react/IntentDialogOpener/IntentDialogOpener.md

@@ -1,25 +0,0 @@
-```jsx
-import IntentDialogOpener from 'cozy-ui/transpiled/react/IntentDialogOpener'
-import Button from 'cozy-ui/transpiled/react/Buttons'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-;
-
-<DemoProvider>
-  <IntentDialogOpener
-    action='OPEN'
-    doctype='io.cozy.files'
-    // you would not pass create normally as it defaults to
-    // cozy.client.intents.create
-    create={utils.fakeIntentCreate}
-    classes={{ paper: 'u-h-100' }} // extra props will be passed to the dialog
-    fullWidth // extra props will be passed to the dialog
-    maxWidth="md" // extra props will be passed to the dialog
-    iframeProps={{ spinnerProps: { middle: true } }}
-    onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
-    onDismiss={() => alert('intent has been dismissed !')}
-  >
-    <Button label="Launch Intent OPEN for doctype io.cozy.files" />
-  </IntentDialogOpener>
-</DemoProvider>
-```

package/react/IntentDialogOpener/index.js

@@ -1 +0,0 @@
-export { default } from './IntentDialogOpener'

package/react/IntentIframe/IntentIframe.jsx

@@ -1,110 +0,0 @@
-import get from 'lodash/get'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { withClient } from 'cozy-client'
-import { Intents } from 'cozy-interapp'
-
-import styles from './styles.styl'
-import Spinner from '../Spinner'
-
-const DEFAULT_DATA = {
-  // TODO remove `closeable` since it is only there for backward compatibility
-  // https://mattermost.cozycloud.cc/test-team/pl/t1iagfhqp3n8mqf3nchp6bxsur
-  closeable: false,
-  exposeIntentFrameRemoval: true
-}
-
-class IntentIframe extends React.Component {
-  state = { loading: false }
-
-  componentDidMount() {
-    const { action, data, type, onCancel, onError, onTerminate, client } =
-      this.props
-
-    console.warn(
-      'Be carful to use `withBreakpoints()` and not `useBreakpoints()` in intents. See https://github.com/cozy/cozy-ui/issues/1807'
-    )
-
-    let create
-    if (this.props.create) {
-      create = this.props.create
-    } else {
-      const intents = new Intents({ client })
-      create = intents.create
-    }
-
-    this.setState({ loading: true })
-    create(action, type, {
-      ...DEFAULT_DATA,
-      ...data
-    })
-      .start(
-        this.intentViewer,
-        this.onFrameLoaded,
-        this.props.onHideCross,
-        this.props.onShowCross
-      )
-      .then(result => {
-        // eslint-disable-next-line promise/always-return
-        result ? onTerminate && onTerminate(result) : onCancel()
-      })
-      .catch(error => {
-        onError?.(error)
-        this.setState({ error: error, loading: false })
-        this.props.iframeProps?.setIsLoading?.(false)
-      })
-  }
-
-  onFrameLoaded = () => {
-    this.setState({ loading: false })
-    this.props.iframeProps?.setIsLoading?.(false)
-  }
-
-  render() {
-    const { iframeProps } = this.props
-    const { error, loading } = this.state
-
-    return (
-      <div
-        ref={intentViewer => (this.intentViewer = intentViewer)}
-        className={styles.intentContainer}
-        aria-busy={loading}
-        {...get(iframeProps, 'wrapperProps')}
-      >
-        {loading && (
-          <Spinner size="xxlarge" {...get(iframeProps, 'spinnerProps')} />
-        )}
-        {error && (
-          <div className={styles.intentContainer__error}>{error.message}</div>
-        )}
-        {/* intent iframe will be appended here */}
-      </div>
-    )
-  }
-}
-
-export const iframeProps = PropTypes.shape({
-  wrapperProps: PropTypes.object,
-  spinnerProps: PropTypes.object,
-  setIsLoading: PropTypes.func
-})
-
-IntentIframe.propTypes = {
-  action: PropTypes.string.isRequired,
-  create: PropTypes.func,
-  type: PropTypes.string.isRequired,
-  data: PropTypes.object,
-  onCancel: PropTypes.func,
-  onError: PropTypes.func,
-  onTerminate: PropTypes.func.isRequired,
-  iframeProps: iframeProps,
-  onHideCross: PropTypes.func,
-  onShowCross: PropTypes.func
-}
-
-IntentIframe.defaultProps = {
-  data: {}
-}
-
-export default withClient(IntentIframe)

package/react/IntentIframe/Readme.md

@@ -1,80 +0,0 @@
-### Simple usecase
-
-The IntentIframe is the basic and minimal component to open an intent.
-See [the documentation](https://docs.cozy.io/en/cozy-stack/intents/) for more information about intents.
-
-Here a simple example :
-
-```jsx
-import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'
-import utils from '../../docs/utils'
-
-;
-
-<IntentIframe
-  action="PICK"
-  create={utils.fakeIntentCreate}
-  data={{folder: '840af7e7be6c41bed3c5b76d03f66328'}}
-  type="io.cozy.files"
-  onCancel={() => alert('intent cancelled')}
-  onError={(error) => alert('intent has failed with error: ' + error.message)}
-  onTerminate={doc => alert('intent has completed ! ' + JSON.stringify(doc))}
-/>
-```
-
-### Within an application side controled Dialog
-
-Sometimes you have to render an Intent inside a modal, and handle the modal opening state on the application side. You can then use IntentIframe wrapped in a Dialog for that use case, instead of using IntentDialogOpener component (that is useful to start a new intent modal from a click on a button).
-
-This method replaces deprecated `IntentModal` component.
-
-```jsx
-import { withStyles } from 'cozy-ui/transpiled/react/styles'
-import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
-import Dialog from 'cozy-ui/transpiled/react/Dialog'
-import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'
-import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-initialState = { modalOpened: false}
-
-const onClose = () => setState({ modalOpened: false })
-
-const IntentDialog = () => {
-  const { isMobile } = useBreakpoints()
-  return (
-    <Dialog
-      open={state.modalOpened}
-      classes={{ paper: 'u-h-100' }}
-      fullScreen={isMobile}
-      fullWidth
-      maxWidth="md"
-      onClose={onClose}
-    >
-      <DialogCloseButton onClick={onClose} />
-      <IntentIframe
-        onCancel={onClose}
-        onTerminate={res => {
-            setState({ modalOpened: false })
-            alert('intent has completed ! ' + JSON.stringify(res))
-          }
-        }
-        action='OPEN'
-        type='io.cozy.files'
-        // you would not pass create normally as it defaults to
-        // cozy.client.intents.create
-        create={utils.fakeIntentCreate}
-      />
-    </Dialog>
-  )
-}
-
-;
-
-<DemoProvider>
-  <button onClick={()=>setState({ modalOpened: !state.modalOpened })}>
-    Toggle an IntentDialog OPEN io.cozy.files
-  </button>
-  <IntentDialog />
-</DemoProvider>
-```

package/react/IntentIframe/index.js

@@ -1 +0,0 @@
-export { default, iframeProps } from './IntentIframe'

package/react/IntentIframe/styles.styl

@@ -1,21 +0,0 @@
-iframe
-    width 100%
-    height 100%
-    border 0
-
-.intentContainer,
-.intentPlaceHolder
-    height 100%
-    width 100%
-    display flex
-    justify-content center
-    align-items center
-
-/* Don't mess with the spinner centering until the iframe is fully loaded. */
-.intentContainer[aria-busy=true] iframe
-    height 0
-    width 0
-
-.intentContainer__error
-    color var(--errorColor)
-    font-size 1.5em

package/react/Labs/CollectionField/Readme.md

@@ -1,41 +0,0 @@
-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/react/Labs/CollectionField/index.jsx

@@ -1,140 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef } from 'react'
-
-import styles from './styles.styl'
-import { FieldContainer } from '../../Field'
-import Icon from '../../Icon'
-import CrossSmallIcon from '../../Icons/CrossSmall'
-import PlusIcon from '../../Icons/Plus'
-import Label from '../../Label'
-import Stack from '../../Stack'
-import Button from '../../deprecated/Button'
-
-/**
- * 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/react/Labs/CollectionField/styles.styl

@@ -1,15 +0,0 @@
-@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/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx

@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { copyToClipboard } from './helpers'
-import Icon from '../../Icon'
-import CopyIcon from '../../Icons/Copy'
-import ListItem from '../../ListItem'
-import ListItemIcon from '../../ListItemIcon'
-import ListItemText from '../../ListItemText'
-import Typography from '../../Typography'
-import { useI18n } from '../../providers/I18n'
-
-const ExpandedAttribute = ({ label, value, setAlertProps }) => {
-  const { t } = useI18n()
-
-  return (
-    <ListItem
-      className="u-pl-2"
-      button
-      onClick={copyToClipboard({ value, setAlertProps, t })}
-    >
-      <ListItemIcon>
-        <Icon icon={CopyIcon} />
-      </ListItemIcon>
-      <ListItemText
-        primary={<Typography variant="caption">{label}</Typography>}
-        secondary={<Typography variant="body2">{value}</Typography>}
-      />
-    </ListItem>
-  )
-}
-
-ExpandedAttribute.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  setAlertProps: PropTypes.func
-}
-
-export default ExpandedAttribute