cozy-ui 132.1.0 → 133.0.0

package/react/SquareAppIcon/index.jsx

@@ -1,289 +0,0 @@
-import cx from 'classnames'
-import get from 'lodash/get'
-import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-
-import styles from './styles.styl'
-import AppIcon from '../AppIcon'
-import Badge from '../Badge'
-import Icon from '../Icon'
-import IconCheckAnimated from '../Icons/IconCheckAnimated'
-import SvgIconCrossAnimated from '../Icons/IconCrossAnimated'
-import iconOut from '../Icons/LinkOut'
-import iconPlus from '../Icons/Plus'
-import iconWarning from '../Icons/WarningCircle'
-import InfosBadge from '../InfosBadge'
-import Spinner from '../Spinner'
-import Typography from '../Typography'
-import { nameToColor } from '../legacy/Avatar/helpers'
-import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
-import { alpha, makeStyles } from '../styles'
-
-const makeTwakeColor = theme =>
-  theme.variant === 'inverted' || theme.type === 'dark'
-    ? 'var(--white)'
-    : 'var(--black)'
-
-const useStyles = makeStyles(theme => ({
-  name: {
-    color: makeTwakeColor(theme),
-    textShadow:
-      theme.variant === 'inverted' || theme.type === 'dark'
-        ? '0px 0px 10px rgba(0, 0, 0, 0.10), 0px 0px 2px rgba(0, 0, 0, 0.20), 0.5px 0.5px 1px rgba(0, 0, 0, 0.50)'
-        : undefined,
-    width: '5.5rem',
-    textAlign: 'center',
-    margin: '0.5rem 0.25rem 0 0.25rem',
-    lineClamp: '2',
-    boxOrient: 'vertical',
-    display: '-webkit-box',
-    height: '2.375rem',
-    [theme.breakpoints.down('sm')]: {
-      width: '3.75rem',
-      margin: '0.25rem 0.25rem 0 0.25rem',
-      height: '2rem'
-    }
-  },
-  nameInverted: {
-    textShadow: theme.textShadows[1]
-  },
-  squareAppIconGhost: {
-    backgroundColor: alpha(
-      theme.palette.primary.main,
-      theme.palette.action.ghostOpacity
-    ),
-    border: `1px dashed ${alpha(
-      theme.palette.primary.main,
-      theme.palette.border.ghostOpacity
-    )}`
-  },
-  letter: {
-    color: 'white',
-    margin: 'auto'
-  },
-  errorIcon: {
-    fill: 'var(--errorColor)',
-    backgroundColor: 'var(--primaryContrastTextColor)',
-    borderRadius: '1rem'
-  },
-  tileWrapper: {
-    cursor: 'pointer', // Whole block is clickable so we should display the pointer
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    minWidth: '6rem',
-    [theme.breakpoints.down('sm')]: {
-      minWidth: '4.25rem'
-    }
-  },
-  detailedTileWrapper: {
-    flexDirection: 'row',
-    width: 'auto'
-  }
-}))
-
-const shouldRenderSpinner = (variant, animationState) => {
-  return ['loading'].includes(variant) || animationState
-}
-
-const SquareAppIconSpinner = ({ variant, animationState }) => {
-  if (!shouldRenderSpinner(variant, animationState)) {
-    return null
-  }
-
-  return <Spinner className={cx(styles['SquareAppIcon-spinner'], 'u-m-0')} />
-}
-
-export const SquareAppIcon = ({
-  display,
-  name,
-  variant,
-  IconContent,
-  description,
-  hideShortcutBadge = false,
-  ...appIconProps
-}) => {
-  const { variant: themeVariant, type } = useCozyTheme()
-  const classes = useStyles()
-  const appName =
-    name || get(appIconProps, 'app.name') || get(appIconProps, 'app') || ''
-  const letter = appName[0] || ''
-  const prevVariant = React.useRef(variant)
-  const [animationState, setAnimationState] = useState()
-
-  const handleAnimationEnd = e => {
-    if (e.animationName.includes('end')) setAnimationState()
-  }
-
-  useEffect(() => {
-    const curr = prevVariant.current
-
-    if (curr === 'loading' && variant === 'error') setAnimationState('failed')
-
-    if (curr === 'loading' && (variant === 'default' || variant === undefined))
-      setAnimationState('success')
-
-    prevVariant.current = variant
-  }, [variant])
-
-  const exceptionVariant = ['ghost']
-
-  const squareTheme = exceptionVariant.includes(variant)
-    ? themeVariant
-    : 'normal'
-
-  return (
-    <div
-      data-testid="square-app-icon"
-      className={cx(classes.tileWrapper, {
-        [classes.detailedTileWrapper]: display === 'detailed'
-      })}
-    >
-      <CozyTheme variant={squareTheme}>
-        <InfosBadge
-          badgeContent={
-            variant === 'shortcut' && !hideShortcutBadge ? (
-              <Icon size="10" icon={iconOut} />
-            ) : null
-          }
-          className={cx({ ['u-mr-1']: display === 'detailed' })}
-          overlap="rectangular"
-          invisible={variant !== 'shortcut' || hideShortcutBadge}
-        >
-          <SquareAppIconSpinner
-            variant={variant}
-            animationState={animationState}
-          />
-          <Badge
-            className={cx(
-              styles[`SquareAppIcon-wrapper`],
-              styles[`SquareAppIcon-wrapper-${variant}`],
-              styles[`SquareAppIcon-wrapper--${type}`],
-              {
-                [classes.squareAppIconGhost]:
-                  exceptionVariant.includes(variant),
-                [classes.shadow]: !exceptionVariant.includes(variant)
-              }
-            )}
-            badgeContent={
-              variant === 'error' ? (
-                <Icon
-                  size={16}
-                  className={cx(classes.errorIcon)}
-                  icon={iconWarning}
-                />
-              ) : (
-                ''
-              )
-            }
-            color={variant === 'error' ? 'error' : undefined}
-            withBorder={false}
-            size="large"
-            overlap="rectangular"
-            style={
-              variant === 'shortcut' && !IconContent
-                ? {
-                    ['background']: nameToColor(name)
-                  }
-                : null
-            }
-          >
-            {variant === 'shortcut' && !IconContent ? (
-              <Typography
-                className={classes.letter}
-                variant="h2"
-                align="center"
-              >
-                {letter.toUpperCase()}
-              </Typography>
-            ) : (
-              <div
-                className={cx(styles['SquareAppIcon-icon-container'], {
-                  [styles['SquareAppIcon-icon-container-normal']]:
-                    themeVariant === 'normal'
-                })}
-              >
-                <div
-                  className={cx(
-                    styles['onEnd'],
-                    { [styles['isSuccess']]: animationState === 'success' },
-                    { [styles['isFailed']]: animationState === 'failed' }
-                  )}
-                  onAnimationEnd={handleAnimationEnd}
-                >
-                  {animationState && (
-                    <Icon
-                      size={32}
-                      icon={
-                        animationState === 'success'
-                          ? IconCheckAnimated
-                          : SvgIconCrossAnimated
-                      }
-                    />
-                  )}
-                </div>
-
-                {variant === 'add' ? (
-                  <Icon icon={iconPlus} color="var(--primaryColor)" />
-                ) : IconContent ? (
-                  IconContent
-                ) : (
-                  <div className="u-w-2 u-h-2">
-                    <AppIcon {...appIconProps} />
-                  </div>
-                )}
-              </div>
-            )}
-          </Badge>
-        </InfosBadge>
-      </CozyTheme>
-      {display === 'detailed' ? (
-        <ListItemText primary={appName} secondary={description} />
-      ) : (
-        <Typography
-          className={cx(
-            classes.name,
-            { [classes.nameInverted]: themeVariant === 'inverted' },
-            'u-spacellipsis'
-          )}
-          variant="h6"
-          align="center"
-        >
-          {appName}
-        </Typography>
-      )}
-    </div>
-  )
-}
-
-/**
- * Having both a `display` and a `variant` prop is a bit confusing,
- * but it's necessary since the `variant` prop can be used both in "compact" and "detailed" mode.
- *
- * As for the `description` prop, it will only be displayed in "detailed" mode.
- * Providing it in "compact" mode will have no effect.
- */
-SquareAppIcon.propTypes = {
-  display: PropTypes.oneOf(['compact', 'detailed']),
-  description: PropTypes.string,
-  name: PropTypes.string,
-  variant: PropTypes.oneOf([
-    'default',
-    'loading',
-    'ghost',
-    'maintenance',
-    'error',
-    'add',
-    'shortcut'
-  ]),
-  IconContent: PropTypes.node
-}
-
-SquareAppIcon.defaultProps = {
-  display: 'compact',
-  variant: 'default'
-}
-
-export default SquareAppIcon

package/react/SquareAppIcon/styles.styl

@@ -1,141 +0,0 @@
-@require 'settings/breakpoints.styl'
-constants=json('constants.json', { hash: true })
-
-$iconSize = constants['iconSize']
-$iconPadding = constants['iconPadding']
-$mobileIconSize = constants['mobileIconSize']
-$mobileIconPadding = constants['mobileIconPadding']
-
-.SquareAppIcon-wrapper
-    box-sizing border-box
-    border-radius 100%
-    height $iconSize
-    width $iconSize
-    transition transform 300ms, border-radius 300ms
-
-    +small-screen()
-        height $mobileIconSize
-        width $mobileIconSize
-
-    &--light
-        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), rgba(255, 251, 254, 0.80)
-
-    &--dark
-        background linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 100%), #2C3039
-
-.SquareAppIcon-icon-container
-    display flex
-    align-items center
-    justify-content center
-    padding $iconPadding
-    border-radius 100%
-    width 100%
-
-    +small-screen()
-        padding $mobileIconPadding
-
-    svg, img
-        width 100%
-
-.SquareAppIcon-wrapper-ghost
-    .SquareAppIcon-icon-container
-        mix-blend-mode screen
-
-        svg, img
-            filter saturate(0%)
-
-    .SquareAppIcon-icon-container-normal
-        mix-blend-mode luminosity
-
-        svg, img
-            opacity .5
-
-.SquareAppIcon-wrapper-maintenance
-    .SquareAppIcon-icon-container
-        mix-blend-mode luminosity
-
-        svg, img
-            opacity .5
-
-.SquareAppIcon-wrapper-loading
-    border-radius 50%
-    transform scale(0.875)
-
-    +small-screen()
-        transform scale(0.8334)
-
-.SquareAppIcon-spinner
-    margin 0 !important
-
-    svg
-        position absolute
-        height 100%
-        width 100%
-
-animation-duration = 1.50s
-icon-duration = 0.2s
-icon-start = 0.2s
-border-radius-start = 50%
-border-radius-end = 100%
-opacity-start = 0
-opacity-end = 1
-
-.onEnd
-    align-items center
-    border-radius border-radius-start
-    display flex
-    height 100%
-    opacity opacity-start
-    position absolute
-    width 100%
-    z-index 1
-
-    svg
-        fill transparent !important
-
-        path
-            animation-duration icon-duration !important
-
-        path:first-of-type
-            animation-delay icon-start !important
-
-        // The second path is a part of the cross,
-        // since it has its own hardcoded animation delay we need to add it again (.16s)
-        path+path
-            animation-delay icon-start + .16s !important
-
-        *
-            stroke var(--white) !important
-
-.onEnd.isFailed
-    --animationColor var(--errorColor)
-
-.onEnd.isSuccess
-    --animationColor var(--successColor)
-
-.isSuccess
-.isFailed
-    animation end-animation animation-duration forwards
-
-@keyframes end-animation {
-  0% {
-    background-color transparent
-    border-radius border-radius-start
-    opacity opacity-start
-  }
-  13.33% {
-    background-color var(--animationColor)
-    border-radius border-radius-end
-    opacity opacity-end
-  }
-  66.67% {
-    background-color var(--animationColor)
-    border-radius border-radius-end
-    opacity opacity-end
-  }
-  100% {
-    border-radius border-radius-end
-    opacity opacity-start
-    background-color transparent
-  }
-}

package/react/Storage/Readme.md

@@ -1,46 +0,0 @@
-```jsx
-import Storage from 'cozy-ui/transpiled/react/Storage'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-const client = {
-  store: {
-    getState: () => {},
-    subscribe: () => {},
-    unsubscribe: () => {}
-  },
-  getInstanceOptions: () => {},
-  query: () => {},
-  getQueryFromState: queryName => {
-    if (queryName === 'io.cozy.settings/io.cozy.settings.instance') {
-      return {
-        data: {
-          uuid: "uid123"
-        }
-      }
-    } else if (queryName === 'io.cozy.settings/io.cozy.settings.context') {
-      return {
-        data: {
-          manager_url: "http://manager-url/",
-          enable_premium_links: true
-        }
-      }
-    } else if (queryName === 'io.cozy.settings/io.cozy.settings.disk-usage') {
-      return {
-        data: {
-          used: "500000000",
-          quota: "1000000000"
-        }
-      }
-    }
-  }
-}
-
-;
-
-<DemoProvider client={client}>
-  <div className="u-p-1-half u-maw-5">
-    <Storage onlyDesktop={false} />
-  </div>
-</DemoProvider>
-
-```

package/react/Storage/StorageButton.jsx

@@ -1,34 +0,0 @@
-import cx from 'classnames'
-import React from 'react'
-
-import { useInstanceInfo } from 'cozy-client'
-import { buildPremiumLink } from 'cozy-client/dist/models/instance'
-
-import { locales } from './locales'
-import Button from '../Buttons'
-import Icon from '../Icon'
-import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
-import { useI18n, useExtendI18n } from '../providers/I18n'
-
-const StorageButton = ({ className }) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const instanceInfo = useInstanceInfo()
-
-  return (
-    <Button
-      className={cx('u-bdrs-4', className)}
-      variant="secondary"
-      label={t('Storage.increase')}
-      startIcon={<Icon icon={TwakeWorkplaceIcon} size={22} />}
-      size="small"
-      height="auto"
-      fullWidth
-      component="a"
-      target="_blank"
-      href={buildPremiumLink(instanceInfo)}
-    />
-  )
-}
-
-export default StorageButton

package/react/Storage/StorageProgress.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import { useInstanceInfo } from 'cozy-client'
-import { makeDiskInfos } from 'cozy-client/dist/models/instance'
-
-import { locales } from './locales'
-import Icon from '../Icon'
-import CloudIcon from '../Icons/Cloud'
-import { LinearProgress } from '../Progress'
-import Typography from '../Typography'
-import { useI18n, useExtendI18n } from '../providers/I18n'
-
-/**
- * Show remaining disk space with a progress bar
- */
-const StorageProgress = () => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-
-  const { diskUsage } = useInstanceInfo()
-
-  const { humanDiskQuota, humanDiskUsage, percentUsage } = makeDiskInfos(
-    diskUsage.data?.used,
-    diskUsage.data?.quota
-  )
-
-  return (
-    <>
-      <div className="u-flex u-flex-items-center">
-        <Icon
-          className="u-mr-half"
-          icon={CloudIcon}
-          size={24}
-          color="var(--iconTextColor)"
-        />
-        <Typography variant="caption">{t('Storage.title')}</Typography>
-      </div>
-      <LinearProgress
-        className="u-mv-half"
-        variant="determinate"
-        value={parseInt(percentUsage)}
-      />
-      <Typography variant="caption">
-        {t('Storage.availability', {
-          smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
-        })}
-      </Typography>
-    </>
-  )
-}
-
-export default StorageProgress

package/react/Storage/index.jsx

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { useInstanceInfo } from 'cozy-client'
-import { shouldDisplayOffers } from 'cozy-client/dist/models/instance'
-import { isFlagshipApp } from 'cozy-device-helper'
-
-import StorageButton from './StorageButton'
-import StorageProgress from './StorageProgress'
-import useBreakpoints from '../providers/Breakpoints'
-
-const Storage = ({ onlyDesktop }) => {
-  const { isDesktop, isMobile } = useBreakpoints()
-  const instanceInfo = useInstanceInfo()
-
-  if (onlyDesktop && !isDesktop) return null
-
-  const showStorageButton =
-    instanceInfo.isLoaded &&
-    !isFlagshipApp() &&
-    !isMobile &&
-    shouldDisplayOffers(instanceInfo)
-
-  return (
-    <>
-      <StorageProgress />
-      {showStorageButton && <StorageButton className="u-mt-1" />}
-    </>
-  )
-}
-
-Storage.propTypes = {
-  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
-  onlyDesktop: PropTypes.bool
-}
-
-Storage.defaultProps = {
-  onlyDesktop: true
-}
-
-export default Storage

package/react/Storage/locales/en.json

@@ -1,7 +0,0 @@
-{
-  "Storage": {
-    "title": "Storage",
-    "availability": "%{smart_count} GB available",
-    "increase": "Increase the space"
-  }
-}

package/react/Storage/locales/fr.json

@@ -1,7 +0,0 @@
-{
-  "Storage": {
-    "title": "Stockage",
-    "availability": "%{smart_count} Go disponible",
-    "increase": "Augmenter l'espace"
-  }
-}

package/react/Storage/locales/index.jsx

@@ -1,11 +0,0 @@
-import en from './en.json'
-import fr from './fr.json'
-import ru from './ru.json'
-import vi from './vi.json'
-
-export const locales = {
-  en,
-  fr,
-  ru,
-  vi
-}

package/react/Storage/locales/ru.json

@@ -1,7 +0,0 @@
-{
-  "Storage": {
-    "title": "Хранилище",
-    "availability": "%{smart_count} ГБ доступно",
-    "increase": "Увеличить место"
-  }
-}

package/react/Storage/locales/vi.json

@@ -1,7 +0,0 @@
-{
-  "Storage": {
-    "title": "Lưu trữ",
-    "availability": "%{smart_count} GB có sẵn",
-    "increase": "Tăng dung lượng"
-  }
-}

package/react/UploadQueue/FileUploadProgress.jsx

@@ -1,49 +0,0 @@
-import LinearProgress from '@material-ui/core/LinearProgress'
-import React, { useState } from 'react'
-import { useIntervalWhen } from 'rooks'
-
-import RemainingTime from './RemainingTime'
-import styles from './styles.styl'
-import { withStyles } from '../styles'
-
-const FileLinearProgress = withStyles(theme => ({
-  root: {
-    borderRadius: theme.shape.borderRadius
-  },
-  colorPrimary: {
-    backgroundColor: theme.palette.background.default
-  },
-  barColorPrimary: {
-    backgroundColor: 'var(--emerald)'
-  }
-}))(LinearProgress)
-
-const FileUploadProgress = ({ progress: progressProps }) => {
-  const [progress, setProgress] = useState(progressProps)
-  useIntervalWhen(
-    () => {
-      setProgress(progressProps)
-    },
-    1000,
-    true,
-    true
-  )
-
-  return (
-    <div className={styles['upload-queue__upload-progress']}>
-      <div className="u-flex-grow-1 u-pr-1">
-        <FileLinearProgress
-          variant="determinate"
-          value={(progress.loaded / progress.total) * 100}
-        />
-      </div>
-      <div className="u-flex-shrink">
-        {progress.remainingTime ? (
-          <RemainingTime durationInSec={progress.remainingTime} />
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export default FileUploadProgress