cozy-ui 111.20.0 → 112.0.0

package/react/Viewer/NoViewer/NoViewer.spec.jsx

@@ -1,44 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import NoViewer from './NoViewer'
-import DemoProvider from '../docs/DemoProvider'
-
-const file = {
-  _id: 'notSupported',
-  class: 'notSupported',
-  mime: 'notSupported',
-  name: 'notSupported.xyz'
-}
-
-const setup = ({ renderFallbackExtraContent } = {}) => {
-  const root = render(
-    <DemoProvider>
-      <NoViewer
-        file={file}
-        renderFallbackExtraContent={renderFallbackExtraContent}
-      />
-    </DemoProvider>
-  )
-
-  return { root }
-}
-
-describe('NoViewer', () => {
-  it('should render the viewer', () => {
-    const { root } = setup()
-    const { container } = root
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('should render the viewer with specific extra content', () => {
-    const renderFallbackExtraContent = () => (
-      <div>with specific extra content</div>
-    )
-    const { root } = setup({ renderFallbackExtraContent })
-    const { container } = root
-
-    expect(container).toMatchSnapshot()
-  })
-})

package/react/Viewer/NoViewer/__snapshots__/NoViewer.spec.jsx.snap

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NoViewer should render the viewer 1`] = `
-<div>
-  <div
-    class="styles__viewer-noviewer___auG-6"
-  >
-    <svg
-      class="styles__icon___23x3R"
-      height="140"
-      viewBox="0 0 32 32"
-      width="160"
-    >
-      <g
-        fill="none"
-        fill-rule="evenodd"
-      >
-        <path
-          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
-          fill="#D1D5DB"
-        />
-        <path
-          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
-          fill="#A3ACB8"
-        />
-      </g>
-    </svg>
-    <p
-      class="styles__viewer-filename___3jZCt"
-    >
-      notSupported.xyz
-    </p>
-    <button
-      class="styles__c-btn___3kXsk styles__c-btn--center___Nny0n"
-      type="submit"
-    >
-      <span>
-        <span>
-          Download
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`NoViewer should render the viewer with specific extra content 1`] = `
-<div>
-  <div
-    class="styles__viewer-noviewer___auG-6"
-  >
-    <svg
-      class="styles__icon___23x3R"
-      height="140"
-      viewBox="0 0 32 32"
-      width="160"
-    >
-      <g
-        fill="none"
-        fill-rule="evenodd"
-      >
-        <path
-          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
-          fill="#D1D5DB"
-        />
-        <path
-          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
-          fill="#A3ACB8"
-        />
-      </g>
-    </svg>
-    <p
-      class="styles__viewer-filename___3jZCt"
-    >
-      notSupported.xyz
-    </p>
-    <div>
-      with specific extra content
-    </div>
-  </div>
-</div>
-`;

package/react/Viewer/NoViewer/index.jsx

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

package/react/Viewer/Panel/ActionMenuDesktop.jsx

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import styles from './styles.styl'
-import AppLinker from '../../AppLinker'
-import Icon from '../../Icon'
-import Copy from '../../Icons/Copy'
-import Edit from '../../Icons/Rename'
-import Typography from '../../Typography'
-import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu'
-import { useI18n } from '../../providers/I18n'
-
-const ActionMenuDesktop = forwardRef(
-  ({ onClose, isEditable, actions, appLink, appSlug }, ref) => {
-    const { handleCopy, handleEdit } = actions
-    const { t } = useI18n()
-
-    return (
-      <ActionMenu
-        className={styles['ActionMenuDesktop-ActionMenu']}
-        onClose={onClose}
-        anchorElRef={ref}
-      >
-        {isEditable && (
-          <AppLinker app={{ slug: appSlug }} href={appLink}>
-            {({ onClick, href }) => {
-              return (
-                <a href={href} onClick={() => handleEdit(onClick)}>
-                  <ActionMenuItem
-                    left={<Icon icon={Edit} color="var(--iconTextColor)" />}
-                  >
-                    <Typography>
-                      {t(`Viewer.panel.qualification.actions.edit`)}
-                    </Typography>
-                  </ActionMenuItem>
-                </a>
-              )
-            }}
-          </AppLinker>
-        )}
-        <ActionMenuItem
-          onClick={handleCopy}
-          left={<Icon icon={Copy} color="var(--iconTextColor)" />}
-        >
-          <Typography>
-            {t(`Viewer.panel.qualification.actions.copy`)}
-          </Typography>
-        </ActionMenuItem>
-      </ActionMenu>
-    )
-  }
-)
-ActionMenuDesktop.displayName = 'ActionMenuDesktop'
-
-ActionMenuDesktop.propTypes = {
-  onClose: PropTypes.func,
-  isEditable: PropTypes.bool,
-  actions: PropTypes.shape({
-    handleCopy: PropTypes.func,
-    handleEdit: PropTypes.func
-  }),
-  appLink: PropTypes.string,
-  appSlug: PropTypes.string
-}
-
-export default ActionMenuDesktop

package/react/Viewer/Panel/ActionMenuMobile.jsx

@@ -1,74 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import AppLinker from '../../AppLinker'
-import BottomSheet, { BottomSheetItem } from '../../BottomSheet'
-import Icon from '../../Icon'
-import Copy from '../../Icons/Copy'
-import Edit from '../../Icons/Rename'
-import List from '../../List'
-import ListItem from '../../ListItem'
-import ListItemIcon from '../../ListItemIcon'
-import ListItemText from '../../ListItemText'
-import { useI18n } from '../../providers/I18n'
-
-const ActionMenuMobile = ({
-  onClose,
-  isEditable,
-  actions,
-  appLink,
-  appSlug
-}) => {
-  const { t } = useI18n()
-  const { handleCopy, handleEdit } = actions
-
-  return (
-    <BottomSheet backdrop onClose={onClose}>
-      <BottomSheetItem disableGutters>
-        <List>
-          {isEditable && (
-            <AppLinker app={{ slug: appSlug }} href={appLink}>
-              {({ onClick, href }) => {
-                return (
-                  <ListItem
-                    button
-                    component="a"
-                    href={href}
-                    onClick={() => handleEdit(onClick)}
-                  >
-                    <ListItemIcon>
-                      <Icon icon={Edit} />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t(`Viewer.panel.qualification.actions.edit`)}
-                    />
-                  </ListItem>
-                )
-              }}
-            </AppLinker>
-          )}
-          <ListItem button onClick={handleCopy}>
-            <ListItemIcon>
-              <Icon icon={Copy} />
-            </ListItemIcon>
-            <ListItemText
-              primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
-            />
-          </ListItem>
-        </List>
-      </BottomSheetItem>
-    </BottomSheet>
-  )
-}
-
-ActionMenuMobile.propTypes = {
-  onClose: PropTypes.func,
-  isEditable: PropTypes.bool,
-  actions: PropTypes.shape({
-    handleCopy: PropTypes.func,
-    handleEdit: PropTypes.func
-  }),
-  appLink: PropTypes.string
-}
-
-export default ActionMenuMobile

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
-
-import ActionMenuDesktop from './ActionMenuDesktop'
-import ActionMenuMobile from './ActionMenuMobile'
-import { useAlert } from '../../providers/Alert'
-import useBreakpoints from '../../providers/Breakpoints'
-import { useI18n } from '../../providers/I18n'
-import {
-  buildEditAttributePath,
-  isEditableAttribute,
-  getCurrentModel
-} from '../helpers'
-import useActionMenuContext from '../providers/ActionMenuProvider'
-
-const mespapiersAppSlug = 'mespapiers'
-
-const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
-  const { name, value } = optionFile
-  const editPathByModelProps = useActionMenuContext()
-  const { isMobile } = useBreakpoints()
-  const { t } = useI18n()
-  const { showAlert } = useAlert()
-  const client = useClient()
-
-  const currentModel = getCurrentModel(name)
-  const editPath = buildEditAttributePath(
-    editPathByModelProps,
-    currentModel,
-    optionFile.name
-  )
-
-  const { fetchStatus, url } = useAppLinkWithStoreFallback(
-    mespapiersAppSlug,
-    client,
-    editPath
-  )
-  const isAppLinkLoaded = fetchStatus === 'loaded'
-  const isEditable = Boolean(editPath) && isEditableAttribute(name, file)
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(value)
-      showAlert({
-        message: t(`Viewer.snackbar.copiedToClipboard.success`),
-        severity: 'success',
-        variant: 'filled',
-        icon: false
-      })
-    } catch (error) {
-      showAlert({
-        message: t(`Viewer.snackbar.copiedToClipboard.error`),
-        severity: 'error',
-        variant: 'filled',
-        icon: false
-      })
-    }
-    onClose()
-  }
-
-  const handleEdit = cb => {
-    if (isAppLinkLoaded) {
-      onClose()
-      cb && cb()
-    }
-  }
-
-  if (isMobile) {
-    return (
-      <ActionMenuMobile
-        onClose={onClose}
-        isEditable={isEditable}
-        actions={{ handleCopy, handleEdit }}
-        appLink={url}
-        appSlug={mespapiersAppSlug}
-      />
-    )
-  }
-
-  return (
-    <ActionMenuDesktop
-      ref={ref}
-      onClose={onClose}
-      isEditable={isEditable}
-      actions={{ handleCopy, handleEdit }}
-      appLink={url}
-      appSlug={mespapiersAppSlug}
-    />
-  )
-})
-ActionMenuWrapper.displayName = 'ActionMenuWrapper'
-
-ActionMenuWrapper.propTypes = {
-  onClose: PropTypes.func,
-  file: PropTypes.object,
-  optionFile: PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.string
-  })
-}
-
-export default ActionMenuWrapper

package/react/Viewer/Panel/Certifications.jsx

@@ -1,62 +0,0 @@
-import has from 'lodash/has'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Icon, { iconPropType } from '../../Icon'
-import CarbonCopyIcon from '../../Icons/CarbonCopy'
-import SafeIcon from '../../Icons/Safe'
-import Typography from '../../Typography'
-import { Media, Img, Bd } from '../../deprecated/Media'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const Certification = ({ icon, title, caption }) => {
-  return (
-    <div className="u-ph-2 u-pv-1">
-      <Media className="u-mb-half" align="top">
-        <Img className="u-mr-half">
-          <Icon icon={icon} />
-        </Img>
-        <Bd>
-          <Typography variant="body1">{title}</Typography>
-        </Bd>
-      </Media>
-      <Typography variant="caption">{caption}</Typography>
-    </div>
-  )
-}
-
-Certification.propTypes = {
-  icon: iconPropType.isRequired,
-  title: PropTypes.string.isRequired,
-  caption: PropTypes.string.isRequired
-}
-
-const Certifications = ({ file, t }) => {
-  const hasCarbonCopy = has(file, 'metadata.carbonCopy')
-  const hasElectronicSafe = has(file, 'metadata.electronicSafe')
-
-  return (
-    <>
-      {hasCarbonCopy && (
-        <Certification
-          icon={CarbonCopyIcon}
-          title={t('Viewer.panel.certifications.carbonCopy.title')}
-          caption={t('Viewer.panel.certifications.carbonCopy.caption')}
-        />
-      )}
-      {hasElectronicSafe && (
-        <Certification
-          icon={SafeIcon}
-          title={t('Viewer.panel.certifications.electronicSafe.title')}
-          caption={t('Viewer.panel.certifications.electronicSafe.caption')}
-        />
-      )}
-    </>
-  )
-}
-
-Certifications.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default withViewerLocales(Certifications)

package/react/Viewer/Panel/PanelContent.jsx

@@ -1,49 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks'
-import Paper from '../../Paper'
-import Stack from '../../Stack'
-import Typography from '../../Typography'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const PanelContent = ({ file, isPublic, t }) => {
-  const panelBlocks = getPanelBlocks({
-    panelBlocksSpecs: getPanelBlocksSpecs(isPublic),
-    file
-  })
-
-  return (
-    <Stack spacing="s" className={cx('u-flex u-flex-column u-h-100')}>
-      <Paper
-        className="u-flex u-flex-items-center u-h-3 u-ph-2 u-flex-shrink-0"
-        elevation={2}
-        square
-      >
-        <Typography variant="h4">{t('Viewer.panel.title')}</Typography>
-      </Paper>
-      {panelBlocks.map((PanelBlock, index) => (
-        <Paper
-          key={index}
-          className={cx({
-            'u-flex-grow-1': index === panelBlocks.length - 1
-          })}
-          elevation={2}
-          square
-        >
-          <Typography variant="h4" className="u-pv-1">
-            <PanelBlock file={file} />
-          </Typography>
-        </Paper>
-      ))}
-    </Stack>
-  )
-}
-
-PanelContent.propTypes = {
-  file: PropTypes.object.isRequired,
-  isPublic: PropTypes.bool
-}
-
-export default withViewerLocales(PanelContent)

package/react/Viewer/Panel/Qualification.jsx

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
-
-import {
-  isExpiringSoon,
-  formatMetadataQualification,
-  KNOWN_BILLS_ATTRIBUTES_NAMES,
-  getMetadataQualificationType
-} from 'cozy-client/dist/models/paper'
-
-import ActionMenuWrapper from './ActionMenuWrapper'
-import QualificationListItemContact from './QualificationListItemContact'
-import QualificationListItemDate from './QualificationListItemDate'
-import QualificationListItemInformation from './QualificationListItemInformation'
-import QualificationListItemOther from './QualificationListItemOther'
-import List from '../../List'
-import ExpirationAlert from '../components/ExpirationAlert'
-import { withViewerLocales } from '../hoc/withViewerLocales'
-
-const ComponentFromMetadataQualificationType = {
-  contact: QualificationListItemContact,
-  date: QualificationListItemDate,
-  information: QualificationListItemInformation,
-  other: QualificationListItemOther,
-  bills: QualificationListItemInformation
-}
-
-const isExpirationAlertHidden = file => {
-  return file?.metadata?.hideExpirationAlert ?? false
-}
-
-const Qualification = ({ file }) => {
-  const { metadata = {} } = file
-  const actionBtnRef = useRef([])
-  const [optionFile, setOptionFile] = useState({
-    id: '',
-    name: '',
-    value: ''
-  })
-
-  const hideActionsMenu = () => {
-    setOptionFile({ id: '', name: '', value: '' })
-  }
-
-  const toggleActionsMenu = (id, name, value) => {
-    setOptionFile(prev => {
-      if (prev.value) return { id: '', name: '', value: '' }
-      return { id, name, value }
-    })
-  }
-
-  const formattedMetadataQualification = useMemo(() => {
-    const relatedBills = file.bills?.data?.[0]
-
-    if (relatedBills) {
-      const formattedBillsMetadata = KNOWN_BILLS_ATTRIBUTES_NAMES.map(
-        attrName => ({ name: attrName, value: relatedBills[attrName] })
-      )
-
-      return formatMetadataQualification(metadata).concat(
-        formattedBillsMetadata
-      )
-    }
-
-    return formatMetadataQualification(metadata)
-  }, [metadata, file.bills?.data])
-
-  useEffect(() => {
-    actionBtnRef.current = formattedMetadataQualification.map(
-      (_, idx) => actionBtnRef.current[idx] ?? createRef()
-    )
-  }, [formattedMetadataQualification])
-
-  return (
-    <>
-      {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
-        <ExpirationAlert file={file} />
-      )}
-      <List className="u-pv-1">
-        {formattedMetadataQualification.map((meta, idx) => {
-          const { name } = meta
-          const metadataQualificationType = getMetadataQualificationType(name)
-          const QualificationListItemComp =
-            ComponentFromMetadataQualificationType[metadataQualificationType]
-
-          return (
-            <QualificationListItemComp
-              key={idx}
-              file={file}
-              ref={actionBtnRef.current[idx]}
-              formattedMetadataQualification={meta}
-              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
-            />
-          )
-        })}
-
-        {optionFile.name && (
-          <ActionMenuWrapper
-            onClose={hideActionsMenu}
-            file={file}
-            optionFile={optionFile}
-            ref={actionBtnRef.current[optionFile.id]}
-          />
-        )}
-      </List>
-    </>
-  )
-}
-
-Qualification.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default withViewerLocales(Qualification)

package/react/Viewer/Panel/QualificationListItemContact.jsx

@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useRef, useState } from 'react'
-
-import {
-  getTranslatedNameForContact,
-  formatContactValue
-} from 'cozy-client/dist/models/paper'
-
-import ActionMenuWrapper from './ActionMenuWrapper'
-import QualificationListItemText from './QualificationListItemText'
-import Icon from '../../Icon'
-import IconButton from '../../IconButton'
-import Dots from '../../Icons/Dots'
-import ListItem from '../../ListItem'
-import ListItemSecondaryAction from '../../ListItemSecondaryAction'
-import Spinner from '../../Spinner'
-import { useI18n } from '../../providers/I18n'
-import useReferencedContactName from '../hooks/useReferencedContactName'
-
-const QualificationListItemContact = ({ file }) => {
-  const { lang } = useI18n()
-  const actionBtnRef = useRef()
-  const [optionFile, setOptionFile] = useState({
-    name: '',
-    value: ''
-  })
-
-  const hideActionsMenu = () => setOptionFile({ name: '', value: '' })
-  const toggleActionsMenu = (name, value) =>
-    setOptionFile(prev => {
-      if (prev.value) return { name: '', value: '' }
-      return { name, value }
-    })
-
-  const { contacts, isLoadingContacts } = useReferencedContactName(file)
-
-  if (isLoadingContacts) {
-    return (
-      <ListItem className="u-pl-2 u-pr-3">
-        <Spinner color="var(--secondaryTextColor)" />
-      </ListItem>
-    )
-  }
-
-  const formattedTitle = getTranslatedNameForContact({ lang })
-  const formattedValue = formatContactValue(contacts)
-
-  if (!isLoadingContacts && !formattedValue) {
-    return null
-  }
-
-  return (
-    <>
-      <ListItem className="u-ph-2">
-        <QualificationListItemText
-          primary={formattedTitle}
-          secondary={formattedValue}
-        />
-        <ListItemSecondaryAction>
-          <IconButton
-            ref={actionBtnRef}
-            onClick={() => toggleActionsMenu('contact', formattedValue)}
-          >
-            <Icon icon={Dots} />
-          </IconButton>
-        </ListItemSecondaryAction>
-      </ListItem>
-
-      {optionFile.value && (
-        <ActionMenuWrapper
-          onClose={hideActionsMenu}
-          file={file}
-          optionFile={optionFile}
-          ref={actionBtnRef}
-        />
-      )}
-    </>
-  )
-}
-
-QualificationListItemContact.propTypes = {
-  file: PropTypes.object.isRequired
-}
-
-export default QualificationListItemContact