cozy-ui-plus 7.0.0 → 8.0.0

package/src/UploadQueue/RemainingTime.jsx

@@ -1,27 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import { useI18n } from 'twake-i18n'
-
-import { numberOfReferencesForPluralForm } from './helpers'
-import { formatRemainingTime } from './index'
-import styles from './styles.styl'
-
-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/src/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/src/UploadQueue/index.jsx

@@ -1,160 +0,0 @@
-import cx from 'classnames'
-import React, { Component } from 'react'
-
-import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
-import List from 'cozy-ui/transpiled/react/List'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-import { withStyles } from 'cozy-ui/transpiled/react/styles'
-import { formatLocallyDistanceToNow, withLocales } from 'twake-i18n'
-
-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'
-
-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/src/UploadQueue/index.spec.jsx

@@ -1,177 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
-
-import { UploadQueue, formatRemainingTime } from '.'
-import localeEn from './locales/en.json'
-
-describe('UploadQueue', () => {
-  describe('formatRemainingTime', () => {
-    it('should return correct remaining time', () => {
-      const time = formatRemainingTime(29)
-
-      expect(time).toEqual('less than a minute')
-    })
-  })
-
-  describe('UploadQueue', () => {
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('1 minute remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('less than a minute remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('44 minutes remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('about 1 hour remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('about 1 hour remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('about 2 hours remaining')
-    })
-
-    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(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item(5371, 1234)]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('about 2 hours remaining')
-      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
-        'aria-valuenow',
-        '25'
-      )
-
-      rerender(
-        <DemoProvider dictRequire={() => localeEn}>
-          <UploadQueue queue={[item(1, 5677)]} />
-        </DemoProvider>
-      )
-
-      expect(
-        container.getElementsByClassName('u-flex-shrink')[0]
-      ).toHaveTextContent('about 2 hours remaining')
-      expect(getAllByRole('progressbar')[1]).toHaveAttribute(
-        'aria-valuenow',
-        '25'
-      )
-    })
-  })
-})

package/src/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/src/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/src/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/src/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/src/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}"
-  }
-}

package/src/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/src/UploadQueue/useStatusIcon.js

@@ -1,32 +0,0 @@
-import React from 'react'
-
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CheckCircleIcon from 'cozy-ui/transpiled/react/Icons/CheckCircle'
-import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
-import WarningIcon from 'cozy-ui/transpiled/react/Icons/Warning'
-import Spinner from 'cozy-ui/transpiled/react/Spinner'
-
-import { uploadStatus } from './index'
-
-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
-}