cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/UploadQueue/Item.jsx

@@ -1,99 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import { splitFilename } from 'cozy-client/dist/models/file'
-
-import FileUploadProgress from './FileUploadProgress'
-import Pending from './Pending'
-import { uploadStatus } from './index'
-import styles from './styles.styl'
-import { useStatusIcon } from './useStatusIcon'
-import Icon from '../Icon'
-import ListItem from '../ListItem'
-import ListItemIcon from '../ListItemIcon'
-import ListItemText from '../ListItemText'
-import Typography from '../Typography'
-import { Img } from '../deprecated/Media'
-import { translate } from '../providers/I18n'
-
-const Item = ({ file, status, isDirectory, progress, getMimeTypeIcon }) => {
-  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
-    uploadStatus
-  const { filename, extension } = splitFilename(file)
-  let done = false
-  let error = false
-  /**
-   * Status came from the Upload Queue, but sometimes we're using
-   * manual upload without using the Upload Queue system but we're still
-   * using the UI component. When this is the case, the file handles on
-   * his own its status.
-   */
-  const statusToUse = file.status ? file.status : status
-
-  if (statusToUse !== LOADING && statusToUse !== CANCEL) {
-    if (ERROR_STATUSES.includes(statusToUse)) {
-      error = true
-    } else if (DONE_STATUSES.includes(statusToUse)) {
-      done = true
-    }
-  }
-
-  const statusIcon = useStatusIcon(statusToUse, progress)
-
-  const isPending =
-    statusToUse !== LOADING &&
-    statusToUse !== CANCEL &&
-    !ERROR_STATUSES.includes(statusToUse) &&
-    !DONE_STATUSES.includes(statusToUse) &&
-    statusToUse === PENDING
-
-  return (
-    <ListItem
-      divider
-      data-testid="upload-queue-item"
-      className={cx({
-        [styles['upload-queue-item--done']]: done,
-        [styles['upload-queue-item--error']]: error
-      })}
-    >
-      {getMimeTypeIcon ? (
-        <ListItemIcon className="u-ta-center">
-          <Icon
-            icon={getMimeTypeIcon(isDirectory, file.name, file.type)}
-            size={32}
-            className="u-mr-1"
-          />
-        </ListItemIcon>
-      ) : null}
-      <ListItemText
-        disableTypography
-        primary={
-          <div data-testid="upload-queue-item-name" className="u-ellipsis">
-            <Typography variant="body1" className="u-ellipsis">
-              {filename}
-              {extension && (
-                <Typography
-                  component="span"
-                  variant="body1"
-                  color="textSecondary"
-                  className="u-dib"
-                >
-                  {extension}
-                </Typography>
-              )}
-            </Typography>
-          </div>
-        }
-        secondary={progress ? <FileUploadProgress progress={progress} /> : null}
-      />
-      {statusIcon && (
-        <ListItemIcon>
-          <Img>{statusIcon}</Img>
-        </ListItemIcon>
-      )}
-      {isPending && <Pending />}
-    </ListItem>
-  )
-}
-
-export default translate()(Item)

package/react/UploadQueue/Pending.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-import Typography from '../Typography'
-import { translate } from '../providers/I18n'
-
-const Pending = translate()(props => (
-  <Typography variant="subtitle1" color="primary">
-    {props.t('item.pending')}
-  </Typography>
-))
-
-export default Pending

package/react/UploadQueue/Readme.md

@@ -1,95 +0,0 @@
-Dumb component to display a list of files being uploaded.
-
-On mobile, the list of files being displayed is not shown, only
-a small banner is shown.
-
-The popover attribute should be used to automatically layout
-the upload queue:
-
-* in a fixed bottom-right position on desktop
-* underneath the top-bar on mobile
-
-```jsx
-import isTesting from '../helpers/isTesting'
-import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
-import UploadQueue from 'cozy-ui/transpiled/react/UploadQueue'
-import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-
-const initialState = {
-  popover: false
-}
-
-const data = {
-  queue: [{
-    file: { name: 'Photo.jpg', type: 'file' },
-    status: 'created'
-  }, {
-    file: { name: 'Photo - conflict error.jpg', type: 'file' },
-    status: 'conflict'
-  }, {
-    file: { name: 'Photo - quota error.jpg', type: 'file' },
-    status: 'quota'
-  }, {
-    file: { name: 'Photo - network error.jpg', type: 'file' },
-    status: 'network'
-  }, {
-    file: { name: 'Photo - generic failure error.jpg', type: 'file' },
-    status: 'failed'
-  }, {
-    file: { name: 'Photo - generic failure error with a very long name - really long - 2020/04/16.txt', type: 'file' },
-    status: 'failed'
-  }, {
-    file: { name: 'File with a very long name - really long - 2020/04/16.txt', type: 'file' },
-    progress: {
-      loaded: 100,
-      total: 400,
-      speed: 135000,
-      remainingTime: 120
-    },
-    status: 'loading'
-  }, {
-    file: { name: 'Directory' },
-    status: 'pending'
-  }],
-  doneCount: 1,
-  successCount: 1
-}
-
-;
-
-<>
-  <Checkbox label="Popover" value={state.popover} onChange={() => setState({ popover: !state.popover })} />
-  <UploadQueue
-    lang='fr'
-    app='Cozy Drive'
-    getMimeTypeIcon={() => FileIcon}
-    queue={data.queue}
-    doneCount={data.doneCount}
-    successCount={data.successCount}
-    popover={state.popover}
-    purgeQueue={() => {}}
-  />
-  {isTesting() && (
-    <>
-      <UploadQueue
-        lang='fr'
-        app='Cozy Drive'
-        getMimeTypeIcon={() => FileIcon}
-        queue={data.queue}
-        doneCount={data.queue.length}
-        successCount={data.queue.length}
-        popover={false}
-      />
-      <UploadQueue
-        lang='fr'
-        app='Cozy Drive'
-        getMimeTypeIcon={() => FileIcon}
-        queue={data.queue}
-        doneCount={data.doneCount}
-        successCount={data.successCount}
-        popover={true}
-      />
-    </>
-  )}
-</>
-```

package/react/UploadQueue/RemainingTime.jsx

@@ -1,26 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import { numberOfReferencesForPluralForm } from './helpers'
-import { formatRemainingTime } from './index'
-import styles from './styles.styl'
-import Typography from '../Typography'
-import { useI18n } from '../providers/I18n'
-
-const RemainingTime = ({ durationInSec }) => {
-  const { t } = useI18n()
-
-  return (
-    <Typography
-      variant="caption"
-      className={cx(styles['upload-queue__progress-caption'], 'u-ellipsis')}
-    >
-      {t('item.remainingTime', {
-        time: formatRemainingTime(durationInSec),
-        smart_count: numberOfReferencesForPluralForm(durationInSec)
-      })}
-    </Typography>
-  )
-}
-
-export default RemainingTime

package/react/UploadQueue/helpers.js

@@ -1,3 +0,0 @@
-// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
-export const numberOfReferencesForPluralForm = durationInSec =>
-  durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2

package/react/UploadQueue/index.jsx

@@ -1,160 +0,0 @@
-import LinearProgress from '@material-ui/core/LinearProgress'
-import cx from 'classnames'
-import React, { Component } from 'react'
-
-import Item from './Item'
-import localeEn from './locales/en.json'
-import localeEs from './locales/es.json'
-import localeFr from './locales/fr.json'
-import localeRu from './locales/ru.json'
-import localeVi from './locales/vi.json'
-import styles from './styles.styl'
-import List from '../List'
-import Typography from '../Typography'
-import Button from '../deprecated/Button'
-import { formatLocallyDistanceToNow } from '../providers/I18n/format'
-import withLocales from '../providers/I18n/withLocales'
-import { withStyles } from '../styles'
-
-const locales = {
-  en: localeEn,
-  es: localeEs,
-  fr: localeFr,
-  ru: localeRu,
-  vi: localeVi
-}
-
-const CANCEL = 'cancel'
-const PENDING = 'pending'
-const LOADING = 'loading'
-const CREATED = 'created'
-const UPDATED = 'updated'
-const FAILED = 'failed'
-const CONFLICT = 'conflict'
-const QUOTA = 'quota'
-const NETWORK = 'network'
-const DONE_STATUSES = [CREATED, UPDATED]
-const ERROR_STATUSES = [CONFLICT, NETWORK, QUOTA, FAILED]
-
-export const uploadStatus = {
-  CANCEL,
-  PENDING,
-  LOADING,
-  CREATED,
-  UPDATED,
-  FAILED,
-  CONFLICT,
-  QUOTA,
-  NETWORK,
-  DONE_STATUSES,
-  ERROR_STATUSES
-}
-
-export const formatRemainingTime = durationInSec => {
-  const later = Date.now() + durationInSec * 1000
-  return formatLocallyDistanceToNow(later)
-}
-
-const QueueLinearProgress = withStyles({
-  root: {
-    height: '2px'
-  }
-})(LinearProgress)
-
-export class UploadQueue extends Component {
-  state = {
-    collapsed: false
-  }
-
-  toggleCollapsed = () => {
-    this.setState(state => ({ collapsed: !state.collapsed }))
-  }
-
-  render() {
-    const {
-      t,
-      queue,
-      doneCount,
-      successCount,
-      purgeQueue,
-      popover,
-      getMimeTypeIcon,
-      app
-    } = this.props
-    const { collapsed } = this.state
-    return (
-      <div
-        data-testid="upload-queue"
-        className={cx(styles['upload-queue'], {
-          [styles['upload-queue--visible']]: queue.length !== 0,
-          [styles['upload-queue--collapsed']]: collapsed,
-          [styles['upload-queue--popover']]: popover
-        })}
-      >
-        <h4
-          className={styles['upload-queue-header']}
-          onDoubleClick={this.toggleCollapsed}
-        >
-          {doneCount < queue.length && (
-            <div className={styles['upload-queue-header-inner']}>
-              <Typography variant="h6" className="u-hide--mob">
-                {t('header', { smart_count: queue.length, app: app })}
-              </Typography>
-              <Typography
-                color="primary"
-                variant="h6"
-                className="u-hide--tablet"
-              >
-                {t('header_mobile', {
-                  done: doneCount,
-                  smart_count: queue.length
-                })}
-              </Typography>
-            </div>
-          )}
-          {doneCount >= queue.length && (
-            <div
-              data-testid="upload-queue-success"
-              className={styles['upload-queue-header-inner']}
-            >
-              <Typography variant="h6">
-                {t('header_done', {
-                  done: successCount,
-                  smart_count: queue.length
-                })}
-              </Typography>
-              <Button
-                subtle
-                className="u-mv-0"
-                label={t('close')}
-                onClick={purgeQueue}
-              />
-            </div>
-          )}
-        </h4>
-        <QueueLinearProgress
-          variant="determinate"
-          value={(doneCount / queue.length) * 100}
-        />
-        <div className={styles['upload-queue-content']}>
-          <List className="u-pv-0">
-            {queue.map((item, index) => (
-              <Item key={index} {...item} getMimeTypeIcon={getMimeTypeIcon} />
-            ))}
-          </List>
-        </div>
-      </div>
-    )
-  }
-}
-
-UploadQueue.defaultProps = {
-  /**
-   * @type {Boolean}
-   * Displays the queue in a popover at the bottom right of the screen
-   * Use false to disable
-   */
-  popover: true
-}
-
-export default withLocales(locales)(UploadQueue)

package/react/UploadQueue/index.spec.jsx

@@ -1,162 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { UploadQueue, formatRemainingTime } from '.'
-import { useI18n } from '../providers/I18n'
-
-jest.mock('../providers/I18n/withLocales', () =>
-  jest.fn().mockImplementation(() => x => x)
-)
-
-jest.mock('../providers/I18n', () => ({
-  translate: jest.fn().mockImplementation(() => x => x),
-  useI18n: jest.fn(),
-  DEFAULT_LANG: 'en'
-}))
-
-describe('UploadQueue', () => {
-  describe('formatRemainingTime', () => {
-    it('should return correct remaining time', () => {
-      const time = formatRemainingTime(29)
-
-      expect(time).toEqual('less than a minute')
-    })
-  })
-
-  describe('UploadQueue', () => {
-    beforeEach(() => {
-      useI18n.mockReturnValue({
-        t: (key, format) =>
-          format ? `${key} ${format.time} ${format.smart_count}` : key
-      })
-    })
-
-    it('should set singular value when "1 minute remaining"', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 89 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime 1 minute 1')
-    })
-
-    it('should set singular value when "moins d 1 minute remaining"', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 29 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime less than a minute 1')
-    })
-
-    it('should set plural value when "44 minutes remainings"', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 2669 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime 44 minutes 2')
-    })
-
-    it('should set singular value when "1 hour remaining" - low limit', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 2671 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime about 1 hour 1')
-    })
-
-    it('should set singular value when "about 1 hour remaining" - high limit', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 5369 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime about 1 hour 1')
-    })
-
-    it('should set plural value when more than "2 hours remainings"', () => {
-      const item = {
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded: 1234, total: 5678, remainingTime: 5371 },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      }
-
-      const { container } = render(<UploadQueue queue={[item]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime about 2 hours 2')
-    })
-
-    it('should not update time and bar everytime loaded/remaining time update', () => {
-      const item = (remainingTime, loaded) => ({
-        file: { name: 'file' },
-        status: 'status',
-        isDirectory: 'isDirectory',
-        progress: { loaded, total: 4936, remainingTime },
-        getMimeTypeIcon: 'getMimeTypeIcon'
-      })
-
-      const { rerender, getAllByRole, container } = render(
-        <UploadQueue queue={[item(5371, 1234)]} />
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime about 2 hours 2')
-      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
-        'aria-valuenow',
-        '25'
-      )
-
-      rerender(<UploadQueue queue={[item(1, 5677)]} />)
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('item.remainingTime about 2 hours 2')
-      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
-        'aria-valuenow',
-        '25'
-      )
-    })
-  })
-})

package/react/UploadQueue/locales/en.json

@@ -1,10 +0,0 @@
-{
-  "header": "Uploading %{smart_count} photo to %{app} |||| Uploading %{smart_count} photos to %{app}",
-  "header_mobile": "Uploading %{done} of %{smart_count}",
-  "header_done": "Uploaded %{done} out of %{smart_count} successfully",
-  "close": "close",
-  "item": {
-    "pending": "Pending",
-    "remainingTime": "%{time} remaining"
-  }
-}

package/react/UploadQueue/locales/es.json

@@ -1,10 +0,0 @@
-{
-  "header": "Subiendo %{smart_count} foto a %{app} |||| Subiendo %{smart_count} fotos a %{app}",
-  "header_mobile": "Subiendo %{done} de %{smart_count}",
-  "header_done": "Subidos %{done} de %{smart_count} con éxito",
-  "close": "cerrar",
-  "item": {
-    "pending": "Pendiente",
-    "remainingTime": "%{time} restante |||| %{time} restantes"
-  }
-}

package/react/UploadQueue/locales/fr.json

@@ -1,10 +0,0 @@
-{
-  "header": "Import de %{smart_count} fichier dans votre %{app} |||| Import de %{smart_count} fichiers dans votre %{app}",
-  "header_mobile": "Import de %{done} sur %{smart_count}",
-  "header_done": "%{done} sur %{smart_count} élément importé |||| %{done} sur %{smart_count} éléments importés",
-  "close": "Fermer",
-  "item": {
-    "pending": "En attente",
-    "remainingTime": "%{time} restante |||| %{time} restantes"
-  }
-}

package/react/UploadQueue/locales/ru.json

@@ -1,10 +0,0 @@
-{
-  "header": "Загрузка %{smart_count} фото в %{app} |||| Загрузка %{smart_count} фото в %{app}",
-  "header_mobile": "Загружено %{done} из %{smart_count}",
-  "header_done": "Успешно загружено %{done} из %{smart_count}",
-  "close": "закрыть",
-  "item": {
-    "pending": "В ожидании",
-    "remainingTime": "Осталось %{time}"
-  }
-}

package/react/UploadQueue/locales/vi.json

@@ -1,10 +0,0 @@
-{
-  "header": "Đang tải lên %{smart_count} ảnh vào %{app} |||| Đang tải lên %{smart_count} ảnh vào %{app}",
-  "header_mobile": "Đã tải lên %{done} trong số %{smart_count}",
-  "header_done": "Đã tải lên thành công %{done} trong số %{smart_count}",
-  "close": "đóng",
-  "item": {
-    "pending": "Đang chờ",
-    "remainingTime": "Còn lại %{time}"
-  }
-}