cozy-ui-plus 1.1.0

package/src/SquareAppIcon/index.jsx

@@ -0,0 +1,289 @@
+import cx from 'classnames'
+import get from 'lodash/get'
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+
+import Badge from 'cozy-ui/transpiled/react/Badge'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconCheckAnimated from 'cozy-ui/transpiled/react/Icons/IconCheckAnimated'
+import SvgIconCrossAnimated from 'cozy-ui/transpiled/react/Icons/IconCrossAnimated'
+import iconOut from 'cozy-ui/transpiled/react/Icons/LinkOut'
+import iconPlus from 'cozy-ui/transpiled/react/Icons/Plus'
+import iconWarning from 'cozy-ui/transpiled/react/Icons/WarningCircle'
+import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { nameToColor } from 'cozy-ui/transpiled/react/legacy/Avatar/helpers'
+import { alpha, makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import styles from './styles.styl'
+import AppIcon from '../AppIcon'
+import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
+
+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/src/SquareAppIcon/styles.styl

@@ -0,0 +1,141 @@
+@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/src/Storage/Readme.md

@@ -0,0 +1,45 @@
+```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/src/Storage/StorageButton.jsx

@@ -0,0 +1,34 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import TwakeWorkplaceIcon from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { locales } from './locales'
+
+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/src/Storage/StorageProgress.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { makeDiskInfos } from 'cozy-client/dist/models/instance'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { locales } from './locales'
+
+/**
+ * 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/src/Storage/index.jsx

@@ -0,0 +1,41 @@
+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 useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+import StorageButton from './StorageButton'
+import StorageProgress from './StorageProgress'
+
+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/src/Storage/locales/en.json

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

package/src/Storage/locales/fr.json

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

package/src/Storage/locales/index.jsx

@@ -0,0 +1,11 @@
+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/src/Storage/locales/ru.json

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

package/src/Storage/locales/vi.json

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

package/src/UploadQueue/FileUploadProgress.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { useIntervalWhen } from 'rooks'
+
+import LinearProgress from 'cozy-ui/transpiled/react/LinearProgress'
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
+
+import RemainingTime from './RemainingTime'
+import styles from './styles.styl'
+
+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