cozy-ui 131.2.0 → 133.0.0-beta.1

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -1,126 +0,0 @@
-import cx from 'classnames'
-import filesize from 'filesize'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { models } from 'cozy-client'
-
-import styles from './styles.styl'
-import Checkbox from '../Checkbox'
-import Divider from '../Divider'
-import Icon from '../Icon'
-import FileTypeFolder from '../Icons/FileTypeFolder'
-import FileTypeText from '../Icons/FileTypeText'
-import ListItem from '../ListItem'
-import ListItemIcon from '../ListItemIcon'
-import ListItemText from '../ListItemText'
-import Radio from '../Radios'
-import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
-import { useI18n } from '../providers/I18n'
-import { makeStyles } from '../styles'
-
-const {
-  file: { isDirectory, isFile }
-} = models
-
-const useStyles = makeStyles(() => ({
-  verticalDivider: {
-    height: '2rem',
-    display: 'flex',
-    alignSelf: 'auto',
-    alignItems: 'center',
-    marginLeft: '0.5rem'
-  }
-}))
-
-const FilePickerBodyItem = ({
-  item,
-  itemTypesAccepted,
-  multiple,
-  handleChoiceClick,
-  handleListItemClick,
-  itemsIdsSelected,
-  hasDivider
-}) => {
-  const classes = useStyles()
-  const { f } = useI18n()
-  const hasChoice =
-    isValidFile(item, itemTypesAccepted) ||
-    isValidFolder(item, itemTypesAccepted)
-
-  const Input = multiple ? Checkbox : Radio
-
-  const listItemSecondaryContent = isFile(item)
-    ? `${f(item.updated_at, 'dd LLL yyyy')} - ${filesize(item.size, {
-        base: 10
-      })}`
-    : null
-
-  return (
-    <>
-      <ListItem
-        disabled={!hasChoice && isFile(item)}
-        size="small"
-        button
-        data-testid="list-item"
-      >
-        <div
-          data-testid="listitem-onclick"
-          className={styles['filePickerBreadcrumb-wrapper']}
-          onClick={handleListItemClick(item)}
-        >
-          <ListItemIcon>
-            <Icon
-              icon={isDirectory(item) ? FileTypeFolder : FileTypeText}
-              width="32"
-              height="32"
-            />
-          </ListItemIcon>
-          <ListItemText
-            primary={item.name}
-            secondary={listItemSecondaryContent}
-          />
-        </div>
-        {isDirectory(item) && hasChoice && (
-          <Divider
-            orientation="vertical"
-            flexItem
-            className={classes.verticalDivider}
-          />
-        )}
-        <div
-          data-testid="choice-onclick"
-          className="u-pv-half u-h-2 u-flex u-flex-items-center"
-          onClick={hasChoice ? handleChoiceClick(item) : undefined}
-        >
-          <Input
-            data-testid={multiple ? 'checkbox-btn' : 'radio-btn'}
-            onChange={() => {
-              // handled by onClick on the container
-            }}
-            checked={itemsIdsSelected.includes(item._id)}
-            value={item._id}
-            className={cx('u-p-0', {
-              'u-o-100': hasChoice,
-              'u-o-0': !hasChoice
-            })}
-            disabled={!hasChoice}
-          />
-        </div>
-      </ListItem>
-      {hasDivider && <Divider component="li" />}
-    </>
-  )
-}
-
-FilePickerBodyItem.propTypes = {
-  item: PropTypes.object.isRequired,
-  itemTypesAccepted: PropTypes.arrayOf(PropTypes.string).isRequired,
-  multiple: PropTypes.bool,
-  handleChoiceClick: PropTypes.func.isRequired,
-  handleListItemClick: PropTypes.func.isRequired,
-  itemsIdsSelected: PropTypes.arrayOf(PropTypes.string).isRequired,
-  hasDivider: PropTypes.bool.isRequired
-}
-
-export default FilePickerBodyItem

package/react/FilePicker/FilePickerBodyItem.spec.jsx

@@ -1,164 +0,0 @@
-import { render, fireEvent } from '@testing-library/react'
-import filesize from 'filesize'
-import React from 'react'
-
-import FilePickerBodyItem from './FilePickerBodyItem'
-import DemoProvider from './docs/DemoProvider'
-import { isValidFile, isValidFolder } from '../helpers/acceptedTypes'
-
-const mockFile01 = {
-  _id: '001',
-  type: 'file',
-  name: 'Filename.pdf',
-  mime: 'application/pdf',
-  updated_at: '2021-01-01T12:00:00.000000+01:00'
-}
-const mockFolder01 = {
-  _id: '002',
-  type: 'directory',
-  name: 'Foldername',
-  updated_at: '2021-01-01T12:00:00.000000+01:00'
-}
-
-jest.mock('filesize', () => jest.fn())
-jest.mock('../helpers/acceptedTypes', () => ({
-  ...jest.requireActual('../helpers/acceptedTypes'),
-  isValidFile: jest.fn(),
-  isValidFolder: jest.fn()
-}))
-
-describe('FilePickerBodyItem components:', () => {
-  const mockHandleChoiceClick = jest.fn()
-  const mockHandleListItemClick = jest.fn()
-  filesize.mockReturnValue('111Ko')
-
-  const setup = ({
-    item = mockFile01,
-    multiple = false,
-    validFile = false,
-    validFolder = false
-  } = {}) => {
-    isValidFile.mockReturnValue(validFile)
-    isValidFolder.mockReturnValue(validFolder)
-
-    return render(
-      <DemoProvider>
-        <FilePickerBodyItem
-          item={item}
-          itemTypesAccepted={[]}
-          multiple={multiple}
-          handleChoiceClick={mockHandleChoiceClick}
-          handleListItemClick={mockHandleListItemClick}
-          itemsIdsSelected={[]}
-          hasDivider={false}
-        />
-      </DemoProvider>
-    )
-  }
-
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('should be rendered correctly', () => {
-    const { container } = setup()
-
-    expect(container).toBeDefined()
-  })
-
-  it('should display filename', () => {
-    const { getByText } = setup()
-
-    expect(getByText('Filename.pdf'))
-  })
-
-  it('should display foldername', () => {
-    const { getByText } = setup({ item: mockFolder01 })
-
-    expect(getByText('Foldername'))
-  })
-
-  it("should item's line is not disabled when has not valid type & is File", () => {
-    const { getByTestId } = setup({
-      item: mockFile01,
-      validFile: false,
-      validFolder: false
-    })
-    const listItem = getByTestId('list-item')
-
-    expect(listItem).toHaveAttribute('aria-disabled', 'true')
-  })
-
-  it("should item's line is not disabled when has not valid type & is Folder", () => {
-    const { getByTestId } = setup({
-      item: mockFolder01,
-      validFile: false,
-      validFolder: false
-    })
-    const listItem = getByTestId('list-item')
-
-    expect(listItem).toHaveAttribute('aria-disabled', 'false')
-  })
-
-  describe('Functions called', () => {
-    it('should call "handleChoiceClick" function when click on checkbox/radio area', () => {
-      const { getByTestId } = setup({ validFile: true })
-      fireEvent.click(getByTestId('choice-onclick'))
-
-      expect(mockHandleChoiceClick).toHaveBeenCalled()
-    })
-
-    it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is Folder & not accepted', () => {
-      const { getByTestId } = setup({
-        item: mockFolder01,
-        validFolder: false
-      })
-      fireEvent.click(getByTestId('choice-onclick'))
-
-      expect(mockHandleChoiceClick).not.toHaveBeenCalled()
-    })
-    it('should NOT call "handleChoiceClick" function when click on checkbox/radio area, if is File & not accepted', () => {
-      const { getByTestId } = setup({ validFile: false })
-      fireEvent.click(getByTestId('choice-onclick'))
-
-      expect(mockHandleChoiceClick).not.toHaveBeenCalled()
-    })
-
-    it('should call "handleListItemClick" function when click on ListItem node', () => {
-      const { getByTestId } = setup()
-      fireEvent.click(getByTestId('listitem-onclick'))
-
-      expect(mockHandleListItemClick).toHaveBeenCalled()
-    })
-  })
-
-  describe('Attribute "multiple"', () => {
-    it('should radio button exists if "multiple" atribute is False', () => {
-      const { getByTestId } = setup()
-      const radioBtn = getByTestId('radio-btn')
-      expect(radioBtn).not.toBeNull()
-    })
-
-    it('should checkbox button exists if "multiple" atribute is True', () => {
-      const { getByTestId } = setup({ multiple: true })
-      const checkboxBtn = getByTestId('checkbox-btn')
-      expect(checkboxBtn).not.toBeNull()
-    })
-  })
-
-  describe('Radio/Checkbox button', () => {
-    it('should disable and not display the Radio button if it is a File and is not accepted', () => {
-      const { getByTestId } = setup({ validFile: false })
-      const radioBtn = getByTestId('radio-btn')
-
-      expect(radioBtn.getAttribute('disabled')).toBe(null)
-    })
-
-    it('should disable and not display the Radio button if it is a Folder and is not accepted', () => {
-      const { getByTestId } = setup({ item: mockFolder01 })
-      const radioBtn = getByTestId('radio-btn')
-
-      expect(radioBtn.getAttribute('disabled')).toBe(null)
-    })
-  })
-})

package/react/FilePicker/FilePickerBreadcrumb.jsx

@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { Fragment, useCallback, memo } from 'react'
-
-import styles from './styles.styl'
-import Icon from '../Icon'
-import RightIcon from '../Icons/Right'
-import Typography from '../Typography'
-import useBreakpoints from '../providers/Breakpoints'
-
-const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
-  const { isMobile } = useBreakpoints()
-  const hasPath = path && path.length > 0
-
-  const navigateTo = useCallback(
-    folder => () => onBreadcrumbClick(folder),
-    [onBreadcrumbClick]
-  )
-
-  return (
-    <Typography variant="h4" className="u-flex u-flex-items-center">
-      {hasPath
-        ? isMobile
-          ? path[path.length - 1].name
-          : path.map((folder, idx) => {
-              if (idx < path.length - 1) {
-                return (
-                  <Fragment key={idx}>
-                    <span
-                      className={styles['filePickerBreadcrumb-previousPath']}
-                      onClick={navigateTo(folder)}
-                    >
-                      {folder.name}
-                    </span>
-                    <Icon
-                      icon={RightIcon}
-                      className={styles['filePickerBreadcrumb-icon']}
-                    />
-                  </Fragment>
-                )
-              } else {
-                return <span key={idx}>{folder.name}</span>
-              }
-            })
-        : null}
-    </Typography>
-  )
-}
-
-FilePickerBreadcrumb.propTypes = {
-  path: PropTypes.array,
-  onBreadcrumbClick: PropTypes.func
-}
-
-export default memo(FilePickerBreadcrumb)

package/react/FilePicker/FilePickerFooter.jsx

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { memo } from 'react'
-
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-import ru from './locales/ru.json'
-import vi from './locales/vi.json'
-import Button from '../deprecated/Button'
-import { createUseI18n } from '../providers/I18n'
-
-const locales = { en, fr, ru, vi }
-const useI18n = createUseI18n(locales)
-
-const FilePickerFooter = ({ onConfirm, onClose, disabledConfirm }) => {
-  const { t } = useI18n()
-
-  return (
-    <>
-      <Button
-        data-testid="close-btn"
-        label={t('footer.buttons.cancel')}
-        theme="secondary"
-        onClick={onClose}
-      />
-      <Button
-        data-testid="confirm-btn"
-        label={t('footer.buttons.confirm')}
-        onClick={onConfirm}
-        disabled={disabledConfirm}
-      />
-    </>
-  )
-}
-
-FilePickerFooter.propTypes = {
-  onConfirm: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  disabledConfirm: PropTypes.bool.isRequired
-}
-
-export default memo(FilePickerFooter)

package/react/FilePicker/FilePickerFooter.spec.jsx

@@ -1,41 +0,0 @@
-import { render, fireEvent } from '@testing-library/react'
-import React from 'react'
-
-import FilePickerFooter from './FilePickerFooter'
-import DemoProvider from './docs/DemoProvider'
-
-describe('FilePickerFooter components:', () => {
-  const mockOnConfirm = jest.fn()
-  const mockOnClose = jest.fn()
-
-  const setup = (disabledConfirm = false) => {
-    return render(
-      <DemoProvider>
-        <FilePickerFooter
-          onConfirm={mockOnConfirm}
-          onClose={mockOnClose}
-          disabledConfirm={disabledConfirm}
-        />
-      </DemoProvider>
-    )
-  }
-  it('should be rendered correctly', () => {
-    const { container } = setup()
-
-    expect(container).toBeDefined()
-  })
-
-  it('should confirm button have been called', () => {
-    const { getByTestId } = setup()
-    fireEvent.click(getByTestId('confirm-btn'))
-
-    expect(mockOnConfirm).toHaveBeenCalled()
-  })
-
-  it('should close button have been called', () => {
-    const { getByTestId } = setup()
-    fireEvent.click(getByTestId('close-btn'))
-
-    expect(mockOnClose).toHaveBeenCalled()
-  })
-})

package/react/FilePicker/FilePickerHeader.jsx

@@ -1,89 +0,0 @@
-import get from 'lodash/get'
-import uniqBy from 'lodash/uniqBy'
-import PropTypes from 'prop-types'
-import React, { useCallback, memo } from 'react'
-
-import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
-
-import { ROOT_DIR_ID } from '.'
-import FilePickerBreadcrumb from './FilePickerBreadcrumb'
-import { buildCurrentFolderQuery } from './queries'
-import Icon from '../Icon'
-import IconButton from '../IconButton'
-import Previous from '../Icons/Previous'
-import useBreakpoints from '../providers/Breakpoints'
-
-/**
- * @param {IOCozyFolder} displayedFolder - An io.cozy.files folder
- * @returns {{id: string, name: string}[]}
- */
-const getBreadcrumbPath = displayedFolder => {
-  return uniqBy(
-    [
-      {
-        id: ROOT_DIR_ID
-      },
-      {
-        id: get(displayedFolder, 'dir_id')
-      },
-      {
-        id: displayedFolder.id,
-        name: displayedFolder.name
-      }
-    ],
-    'id'
-  )
-    .filter(({ id }) => Boolean(id))
-    .map(breadcrumb => ({
-      id: breadcrumb.id,
-      name: breadcrumb.name || (breadcrumb.id === ROOT_DIR_ID ? 'Drive' : '…')
-    }))
-}
-
-const FilePickerHeader = ({ navigateTo, folderId, onClose }) => {
-  const { isMobile } = useBreakpoints()
-
-  const currentFolderQuery = buildCurrentFolderQuery(folderId)
-  const { data: currentFolder, ...restCurrentFolder } = useQuery(
-    currentFolderQuery.definition,
-    currentFolderQuery.options
-  )
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const path = hasQueryBeenLoaded(restCurrentFolder)
-    ? getBreadcrumbPath(currentFolder[0])
-    : []
-
-  const onBack = useCallback(path => navigateTo(path), [navigateTo])
-
-  const handleClick = useCallback(() => {
-    path.length > 1 && isMobile ? onBack(path[path.length - 2]) : onClose()
-  }, [isMobile, path, onBack, onClose])
-
-  return (
-    <div className="u-flex u-flex-items-center">
-      {isMobile && (
-        <IconButton
-          onClick={handleClick}
-          className="u-p-0 u-pr-1"
-          size="medium"
-        >
-          <Icon icon={Previous} />
-        </IconButton>
-      )}
-      <FilePickerBreadcrumb
-        path={path}
-        onBreadcrumbClick={navigateTo}
-        opening={false}
-        inlined
-      />
-    </div>
-  )
-}
-
-FilePickerHeader.propTypes = {
-  folderId: PropTypes.string.isRequired,
-  navigateTo: PropTypes.func.isRequired
-}
-
-export default memo(FilePickerHeader)

package/react/FilePicker/Readme.md

@@ -1,50 +0,0 @@
-FilePicker allows you to select a file or folder in Drive
-
-```jsx
-import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-import FilePicker from 'cozy-ui/transpiled/react/FilePicker'
-import Variants from 'cozy-ui/docs/components/Variants'
-import DemoProvider from './docs/DemoProvider';
-
-initialState = {
-  filePickerOpened: isTesting()
-};
-
-const initialVariants = [
-  { acceptFileTXT: false, acceptFileMD: false, acceptFolder: false, multiple: false }
-];
-
-const toggleFilePicker = () => setState({ filePickerOpened: !state.filePickerOpened });
-const onChange = (fileId) => alert(`ID of file selected : [${fileId}]`);
-<DemoProvider>
-  <Variants initialVariants={initialVariants} screenshotAllVariants>
-    {variant => {
-      const acceptRule = []
-      if (variant.acceptFileMD) {
-        acceptRule.push('.md')
-      }
-      if (variant.acceptFileTXT) {
-        acceptRule.push('.txt')
-      }
-      if (variant.acceptFolder) {
-        acceptRule.push('folder')
-      }
-
-      return (
-        <>
-          <button onClick={toggleFilePicker}>Open FilePicker</button>
-          {state.filePickerOpened && (
-            <FilePicker
-              onClose={toggleFilePicker}
-              onChange={onChange}
-              accept={acceptRule.toString()}
-              multiple={variant.multiple}
-            />
-          )}
-        </>
-      )
-    }}
-  </Variants>
-</DemoProvider>
-```

package/react/FilePicker/index.jsx

@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState, memo } from 'react'
-
-import FilePickerBody from './FilePickerBody'
-import FilePickerFooter from './FilePickerFooter'
-import FilePickerHeader from './FilePickerHeader'
-import { FixedDialog } from '../CozyDialogs'
-import { getCompliantTypes } from '../helpers/acceptedTypes'
-import useBreakpoints from '../providers/Breakpoints'
-import { makeStyles } from '../styles'
-
-const useStyles = makeStyles(() => ({
-  paper: {
-    height: '100%'
-  }
-}))
-
-export const ROOT_DIR_ID = 'io.cozy.files.root-dir'
-
-const FilePicker = ({ onClose, onChange, accept, multiple }) => {
-  const { isMobile } = useBreakpoints()
-  const classes = useStyles()
-  const [folderId, setFolderId] = useState(ROOT_DIR_ID)
-  const [itemsIdsSelected, setItemsIdsSelected] = useState([])
-
-  const onSelectItemId = fileId => {
-    if (!multiple) {
-      handleConfirm(null, fileId)
-    } else {
-      setItemsIdsSelected(fileId)
-    }
-  }
-
-  const navigateTo = folder => setFolderId(folder.id)
-
-  const handleConfirm = (_, fileId) => {
-    onChange(fileId ? fileId : itemsIdsSelected)
-    onClose()
-  }
-  const itemTypesAccepted = getCompliantTypes(accept)
-
-  return (
-    <FixedDialog
-      open
-      disableGutters
-      onClose={isMobile ? undefined : onClose}
-      size="large"
-      classes={{
-        paper: classes.paper
-      }}
-      title={
-        <FilePickerHeader
-          navigateTo={navigateTo}
-          folderId={folderId}
-          onClose={onClose}
-        />
-      }
-      content={
-        <FilePickerBody
-          navigateTo={navigateTo}
-          onSelectItemId={onSelectItemId}
-          itemsIdsSelected={itemsIdsSelected}
-          folderId={folderId}
-          itemTypesAccepted={itemTypesAccepted}
-          multiple={multiple}
-        />
-      }
-      actions={
-        multiple ? (
-          <FilePickerFooter
-            onClose={onClose}
-            onConfirm={handleConfirm}
-            disabledConfirm={itemsIdsSelected.length === 0}
-          />
-        ) : null
-      }
-    />
-  )
-}
-
-FilePicker.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  accept: PropTypes.string,
-  multiple: PropTypes.bool
-}
-
-FilePicker.defaultProps = {
-  accept: '',
-  multiple: false
-}
-
-export default memo(FilePicker)

package/react/FilePicker/locales/en.json

@@ -1,8 +0,0 @@
-{
-  "footer": {
-    "buttons": {
-      "cancel": "Cancel",
-      "confirm": "Select"
-    }
-  }
-}

package/react/FilePicker/locales/fr.json

@@ -1,8 +0,0 @@
-{
-  "footer": {
-    "buttons": {
-      "cancel": "Annuler",
-      "confirm": "Sélectionner"
-    }
-  }
-}

package/react/FilePicker/locales/ru.json

@@ -1,8 +0,0 @@
-{
-  "footer": {
-    "buttons": {
-      "cancel": "Отменить",
-      "confirm": "Выбрать"
-    }
-  }
-}

package/react/FilePicker/locales/vi.json

@@ -1,8 +0,0 @@
-{
-  "footer": {
-    "buttons": {
-      "cancel": "Hủy",
-      "confirm": "Chọn"
-    }
-  }
-}