cozy-ui 131.2.0 → 133.0.0-beta.1

package/react/UploadQueue/styles.styl

@@ -1,155 +0,0 @@
-@require 'settings/icons.styl'
-@require 'settings/breakpoints.styl'
-@require 'settings/spaces.styl'
-@require 'settings/typography.styl'
-
-$coz-bar-size=3rem
-
-.upload-queue
-    border   .0625rem solid var(--dividerColor)
-    border-radius    .5rem
-    background-color var(--paperBackgroundColor)
-    display          flex
-    flex-direction   column
-    max-width 90%
-    width    30rem
-    overflow hidden
-
-.upload-queue__threshold-bar
-    min-width 10rem
-    margin-right 1rem
-
-.upload-queue__progress-caption
-    line-height $caption-font-size
-    height 1rem
-
-.upload-queue__upload-progress
-    align-items center
-    display flex
-    margin-top 0.125rem // Must tweak a bit the margin-top
-
-
-.upload-queue--popover
-    z-index           var(--zIndex-popover)
-    border            rem(1) solid var(--dividerColor)
-    border-radius     .5rem
-    box-shadow        rem(0 1 3 0) rgba(50, 54, 63, .19), rem(0 6 18 0) rgba(50, 54, 63, .19)
-    background-color  var(--paperBackgroundColor)
-    position fixed
-    bottom   .5rem
-    right    1.5rem
-    height   13.125rem
-    transform        translateY(18.75rem)
-    transition       0.5s
-    opacity          0
-    visibility       hidden
-
-
-.upload-queue--popover.upload-queue--visible
-    opacity    1
-    visibility visible
-    transform  translate(0)
-
-.upload-queue-header
-    display          flex
-    flex-direction   column
-    justify-content  center
-    height           2rem
-    min-height       2rem
-    background-color var(--defaultBackgroundColor)
-    font-weight      bold
-    margin           0
-    padding          .5rem 1rem .5rem
-
-    .upload-queue-header-inner
-        display flex
-        justify-content space-between
-        align-items center
-
-
-progress.upload-queue-progress
-    -webkit-appearance none
-    -moz-appearance    none
-    border     none
-    display    block
-    width      100%
-    height     .125rem
-    margin     0
-
-
-.upload-queue-content
-    overflow auto
-
-.upload-queue--collapsed
-    height 2.5rem
-
-    .upload-queue-content
-        visibility none
-
-.upload-queue-list
-    flex      1 1 auto
-    display   flex
-    flex-direction column
-
-.upload-queue-item--error
-    background-color var(--errorBackground)
-
-.upload-queue-item--done
-    background-color var(--defaultBackgroundColor)
-
-.item-file
-    user-select none
-    overflow hidden
-
-.item-status
-    flex       0 0 15%
-    text-align right
-    white-space nowrap
-    padding-left (spacing_values.m)
-
-+medium-screen()
-    // we need to cover the border-bottom of the cozy-bar
-    $coz-bar-border-size = .0625rem
-
-    .upload-queue
-        border-radius 0
-        border 0
-        background-color var(--paperBackgroundColor)
-        box-shadow none
-        width 100%
-        max-width 100%
-        height auto
-        transform none
-
-
-    .upload-queue-header
-        background 0
-        text-transform uppercase
-        padding .5rem
-
-    .upload-queue-content
-        display none
-
-    .upload-queue--popover
-        top $coz-bar-size
-        bottom auto
-        right 0
-        left 0
-        z-index calc(var(--zIndex-app) + 3)
-        max-height 0
-
-        &:before
-            position fixed
-            top $coz-bar-size - $coz-bar-border-size
-            z-index  var(--zIndex-nav)
-            width 100%
-            height $coz-bar-border-size
-            content ''
-            background var(--paperBackgroundColor)
-
-        &.upload-queue--visible
-            max-height 30%
-
-        .upload-queue-content
-            display none
-

package/react/UploadQueue/useStatusIcon.js

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { uploadStatus } from './index'
-import Icon from '../Icon'
-import CheckCircleIcon from '../Icons/CheckCircle'
-import CrossCircleIcon from '../Icons/CrossCircle'
-import WarningIcon from '../Icons/Warning'
-import Spinner from '../Spinner'
-
-export const useStatusIcon = (statusToUse, progress) => {
-  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
-    uploadStatus
-  const SuccessIcon = CheckCircleIcon
-  const ErrorIcon = CrossCircleIcon
-
-  let statusIcon
-
-  if (statusToUse === LOADING) {
-    statusIcon = !progress ? <Spinner color="var(--primaryColor)" /> : null
-  } else if (statusToUse === CANCEL) {
-    statusIcon = <Icon icon={ErrorIcon} color="var(--errorColor)" />
-  } else if (ERROR_STATUSES.includes(statusToUse)) {
-    statusIcon = <Icon icon={WarningIcon} color="var(--errorColor)" />
-  } else if (DONE_STATUSES.includes(statusToUse)) {
-    statusIcon = <Icon icon={SuccessIcon} color="var(--successColor)" />
-  } else if (statusToUse === PENDING) {
-    statusIcon = null
-  }
-
-  return statusIcon
-}

package/react/deprecated/ActionMenu/Actions/modify.js

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import { generateWebLink, useClient } from 'cozy-client'
-
-import withActionsLocales from './locales/withActionsLocales'
-import PenIcon from '../../../Icons/Pen'
-import Link from '../../../Link'
-import { useI18n } from '../../../providers/I18n'
-import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
-
-export const modify = () => {
-  return {
-    name: 'modify',
-    Component: withActionsLocales(({ className, docs, onClick }) => {
-      const { t } = useI18n()
-      const client = useClient()
-
-      const contactId = docs[0]._id
-
-      const webLink = generateWebLink({
-        slug: 'contacts',
-        cozyUrl: client.getStackClient().uri,
-        subDomainType: client.getInstanceOptions().subdomain,
-        pathname: '/',
-        hash: `/${contactId}/edit`
-      })
-
-      return (
-        <ActionMenuItemWrapper
-          className={className}
-          icon={PenIcon}
-          onClick={onClick}
-        >
-          <Link className="u-p-0" href={webLink} target="_blank">
-            {t('modify')}
-          </Link>
-        </ActionMenuItemWrapper>
-      )
-    })
-  }
-}

package/react/deprecated/ActionMenu/Actions/viewInContacts.js

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import { generateWebLink, useClient } from 'cozy-client'
-
-import withActionsLocales from './locales/withActionsLocales'
-import OpenappIcon from '../../../Icons/Openapp'
-import Link from '../../../Link'
-import { useI18n } from '../../../providers/I18n'
-import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
-
-export const viewInContacts = () => {
-  return {
-    name: 'viewInContacts',
-    Component: withActionsLocales(({ className, docs, onClick }) => {
-      const { t } = useI18n()
-      const client = useClient()
-
-      const contactId = docs[0]._id
-
-      const webLink = generateWebLink({
-        slug: 'contacts',
-        cozyUrl: client.getStackClient().uri,
-        subDomainType: client.getInstanceOptions().subdomain,
-        pathname: '/',
-        hash: `/${contactId}`
-      })
-
-      return (
-        <ActionMenuItemWrapper
-          className={className}
-          icon={OpenappIcon}
-          onClick={onClick}
-        >
-          <Link className="u-p-0" href={webLink} target="_blank">
-            {t('viewInContacts')}
-          </Link>
-        </ActionMenuItemWrapper>
-      )
-    })
-  }
-}

package/react/deprecated/IntentModal/IntentModal.jsx

@@ -1,98 +0,0 @@
-import once from 'lodash/once'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-
-import styles from './styles.styl'
-import IntentIframe from '../../IntentIframe'
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
-import Modal from '../Modal'
-
-const logIntentModalDepecrated = createDepreciationLogger()
-
-/**
- * Render a modal for the specified intent.
- *
- * The modal for an intent takes the majority of the viewport.
- *
- * @deprecated Please use IntentIframe with Dialog instead
- */
-class IntentModal extends Component {
-  constructor(props, context) {
-    super(props, context)
-
-    logIntentModalDepecrated(
-      'The IntentModal component has been deprecated and should be replaced by IntentIframe wrapped in Dialog'
-    )
-    this.state = {
-      closable: true
-    }
-  }
-
-  hideCross = () => {
-    this.setState({
-      closable: false
-    })
-  }
-
-  showCross = () => {
-    this.setState({
-      closable: true
-    })
-  }
-  // As dismissAction is passed twice to the modal, both for closing and for
-  // intent cancellation, we need to ensure that it is only actually
-  // called once.
-  // FIXME: this should be fixed by diferenciating dismissAction (for closing
-  // modal) and onCancel (for intent cancellation), but it implies deprecating
-  // dismissAction first, ensure legacy, prevent regressions, etc.
-  dismiss = once(evt => {
-    const { dismissAction } = this.props
-    dismissAction && dismissAction(evt)
-  })
-
-  render() {
-    const { action, doctype, options, onComplete, onError, create } = this.props
-    const modalProps = Object.keys(Modal.propTypes).reduce((props, key) => {
-      return { ...props, [key]: this.props[key] }
-    }, {})
-    return (
-      <Modal
-        {...modalProps}
-        closable={this.state.closable}
-        key="modal"
-        className={styles.intentModal}
-        closeBtnClassName={styles.intentModal__cross}
-        dismissAction={this.dismiss}
-        overflowHidden
-      >
-        <IntentIframe
-          action={action}
-          create={create}
-          data={options}
-          onCancel={this.dismiss}
-          onError={onError}
-          onTerminate={onComplete}
-          type={doctype}
-          onHideCross={this.hideCross}
-          onShowCross={this.showCross}
-        />
-      </Modal>
-    )
-  }
-}
-
-IntentModal.propTypes = {
-  ...Modal.propTypes,
-  /** What should happen when the intent has completed */
-  onComplete: PropTypes.func.isRequired,
-  /** What should happen if an intent error occurs */
-  onError: PropTypes.func,
-  /** Action you want to execute */
-  action: PropTypes.string.isRequired,
-  /** Doctype on which you want to execute the action */
-  doctype: PropTypes.string.isRequired
-}
-
-IntentModal.defaultProps = { ...Modal.defaultProps }
-
-export default IntentModal

package/react/deprecated/IntentModal/IntentModal.md

@@ -1,26 +0,0 @@
-The IntentOpener component is useful to start an new intent modal from a click on a button. But sometimes you want/have to handle the modal opening state on the application side so you need to just render an Intent inside a modal. The IntentModal component is clearly for that use case. This is also the same modal code used by the IntentOpener component.
-
-```
-import IntentModal from 'cozy-ui/transpiled/react/deprecated/IntentModal';
-initialState = { modalOpened: false};
-
-<div>
-  <button onClick={()=>setState({ modalOpened: !state.modalOpened })}>
-    Toggle an IntentModal OPEN io.cozy.files
-  </button>
-  {state.modalOpened &&
-    <IntentModal
-      dismissAction={() => setState({ modalOpened: false })}
-      onComplete={res => {
-          setState({ modalOpened: false })
-          alert('intent has completed ! ' + JSON.stringify(res))
-        }
-      }
-      action='OPEN'
-      doctype='io.cozy.files'
-      // you would not pass create normally as it defaults to
-      // cozy.client.intents.create
-      create={utils.fakeIntentCreate}
-    /> }
-</div>
-```

package/react/deprecated/IntentModal/index.js

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

package/react/deprecated/IntentModal/styles.styl

@@ -1,23 +0,0 @@
-@require 'settings/breakpoints'
-@require 'tools/mixins'
-
-.intentModal
-    height 90vh
-
-    // takes 100% of the screen on mobile
-    +small-screen()
-        height 100%
-        width 100%
-
-    // child takes all height
-    & > div
-        height 100%
-
-        // cozy-collect resizes this element with a max-width of 931px
-        // they will remove it as it is a bug on their part. Then
-        // we can remove this code
-        max-width unset !important
-
-    .intentModal__cross
-        top rem(4)
-        right rem(8)

package/react/deprecated/IntentOpener/IntentOpener.jsx

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
-import IntentModal from '../IntentModal'
-
-const logIntentOpenerDepecrated = createDepreciationLogger()
-
-/**
- * Wrapper that adds an `onClick` handler to its children that opens a modal
- * for the specified intent.
- *
- * The modal for an intent takes the majority of the viewport.
- *
- * @deprecated Please use IntentDialogOpener instead
- */
-const IntentOpener = props => {
-  logIntentOpenerDepecrated(
-    'The IntentOpener component has been deprecated and should be replaced by IntentDialogOpener.'
-  )
-  const {
-    options,
-    action,
-    doctype,
-    children,
-    closable,
-    create,
-    tag,
-    into,
-    onComplete,
-    onDismiss,
-    ...modalProps
-  } = props
-  const [modalOpened, setModalOpened] = useState(false)
-
-  const openModal = () => 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(
-      <IntentModal
-        key="intent-modal"
-        closable={closable}
-        overflowHidden
-        dismissAction={handleDismiss}
-        action={action}
-        doctype={doctype}
-        options={options}
-        onComplete={handleComplete}
-        create={create}
-        into={into}
-        {...modalProps}
-      />
-    )
-  }
-
-  return <Tag>{elements}</Tag>
-}
-
-IntentOpener.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 modal is dimissed */
-  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,
-  /** Where the modal should be rendered in the DOM */
-  into: PropTypes.string
-}
-
-IntentOpener.defaultProps = {
-  tag: 'span',
-  closable: true
-}
-
-export default IntentOpener

package/react/deprecated/IntentOpener/IntentOpener.md

@@ -1,16 +0,0 @@
-```jsx
-import IntentOpener from 'cozy-ui/transpiled/react/deprecated/IntentOpener';
-<IntentOpener
-  onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
-  onDismiss={() => alert('intent has been dismissed !')}
-  action='OPEN'
-  doctype='io.cozy.files'
-  // you would not pass create normally as it defaults to
-  // cozy.client.intents.create
-  create={utils.fakeIntentCreate}
-  //extra props will be passed to the modal
-  size={'xlarge'}
->
-  <button>Launch Intent OPEN for doctype io.cozy.files</button>
-</IntentOpener>
-```

package/react/deprecated/IntentOpener/index.js

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

package/react/deprecated/QuotaAlert/Readme.md

@@ -1,40 +0,0 @@
-# Display a CozyDialog with a link to the manager to buy space
-
-The link to the manager is only displayed if there is a managerUrl
-in the stack response
-
-```jsx
-import QuotaAlert from "cozy-ui/transpiled/react/deprecated/QuotaAlert";
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-const mockClient = {
-  getStackClient: () => ({
-    fetchJSON: (_, url) => {
-      let attributes = {}
-      if(url === '/settings/context') {
-        attributes = {
-          attributes: {
-            enable_premium_links: true,
-            manager_url: "http://mycozy.cloud",
-          }
-        }
-      } else if(url === '/settings/instance') {
-        attributes = {
-          attributes: { uuid: "1223" }
-        }
-      }
-
-      return Promise.resolve({ data: attributes  })
-    }
-  })
-};
-
-<DemoProvider client={mockClient}>
-    <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
-      Toggle modal
-    </button>
-    {state.modalOpened && (
-      <QuotaAlert onClose={() => setState({ modalOpened: false })} />
-    )}
-</DemoProvider>
-```

package/react/deprecated/QuotaAlert/index.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import { QuotaPaywall } from '../../Paywall'
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
-
-const logDeprecatedComponent = createDepreciationLogger()
-
-/**
- * @deprecated This component is depreacated, please use [QuotaPaywall](#/Paywall) instead.
- */
-const QuotaAlert = ({ onClose }) => {
-  logDeprecatedComponent(
-    'QuotaAlert is now exported from the cozy-ui as QuotaPaywall. Please import the component from "cozy-ui/transpiled/react/Paywall"'
-  )
-  return <QuotaPaywall onClose={onClose} />
-}
-
-export default QuotaAlert

package/react/helpers/acceptedTypes.js

@@ -1,50 +0,0 @@
-import mimeTypes from 'mime-types'
-
-import { models } from 'cozy-client'
-
-const {
-  file: { isDirectory, isFile }
-} = models
-
-/**
- * @param {string} types - Types we wish to accept ("folder" and/or "extensions/mime" of file), separated by commas
- * @returns {string[]} All the valid types, if the parameter is undefined or if no type is valid, return an empty array
- */
-export const getCompliantTypes = types => {
-  if (types) {
-    return types
-      .replaceAll(' ', '')
-      .split(',')
-      .filter(type =>
-        type !== 'folder' ? !!mimeTypes.contentType(type) : true
-      )
-  }
-
-  return []
-}
-
-/**
- * Check if Item is a file with accepted extension/mime
- *
- * @param {object} item - file or folder
- * @param {string[]} validTypes - List of accepted types
- * @returns {boolean}
- */
-export const isValidFile = (item, validTypes) => {
-  const fileTypesAccepted =
-    validTypes.includes(`.${item.name.split('.').pop()}`) ||
-    validTypes.includes(item.mime)
-
-  return isFile(item) && (fileTypesAccepted || validTypes.length === 0)
-}
-
-/**
- * Check if Item is a folder with accepted type
- *
- * @param {object} item - file or folder
- * @param {string[]} validTypes - List of accepted types
- * @returns {boolean}
- */
-export const isValidFolder = (item, validTypes) => {
-  return isDirectory(item) && validTypes.includes(`folder`)
-}