cozy-ui-plus 1.1.0

package/src/FilePicker/docs/DemoProvider.jsx

@@ -0,0 +1,273 @@
+import React from 'react'
+
+import CozyClient, { CozyProvider } from 'cozy-client'
+import { initQuery, receiveQueryResult } from 'cozy-client/dist/store'
+import { normalizeDoc } from 'cozy-stack-client'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { I18nContext } from 'cozy-ui/transpiled/react/providers/I18n'
+
+/**
+ * @typedef {object} CreateMockClientForDocParam
+ * @property {object} [queries] - Prefill queries inside the store
+ */
+/**
+ * @typedef {object} FillQueryInsideClientQueryOptions
+ * @property {IOCozyFile[]} data - Array of IOCozyFile
+ * @property {{ doctype: string, selector: object }} definition - Prefill queries inside the store
+ */
+
+/**
+ * @param {CozyClient} client - Instance of CozyClient
+ * @param {string} queryName - Name of the query
+ * @param {FillQueryInsideClientQueryOptions} queryOptions - Options of the query
+ */
+const fillQueryInsideClient = (client, queryName, queryOptions) => {
+  const { definition, data } = queryOptions
+  client.store.dispatch(initQuery(queryName, definition))
+  client.store.dispatch(
+    receiveQueryResult(queryName, {
+      data: data ? data.map(doc => normalizeDoc(doc, definition.doctype)) : []
+    })
+  )
+}
+
+/**
+ * Creates a client suitable for use in Documentation
+ *
+ * @param {CreateMockClientForDocParam} param
+ * @returns {CozyClient} Instance of CozyClient
+ */
+const createMockClientForDoc = ({ queries = {} }) => {
+  const client = new CozyClient()
+  client.ensureStore()
+
+  for (let [queryName, queryOptions] of Object.entries(queries)) {
+    fillQueryInsideClient(client, queryName, queryOptions)
+  }
+
+  return client
+}
+
+const setupClient = () => {
+  const client = createMockClientForDoc({
+    queries: {
+      'onlyfolder-io.cozy.files.root-dir': {
+        data: [
+          {
+            _id: 'io.cozy.files.root-dir',
+            id: 'io.cozy.files.root-dir',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'io.cozy.files.root-dir',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'io.cozy.files.root-dir'
+          }
+        }
+      },
+
+      'buildContentFolderQuery-io.cozy.files.root-dir': {
+        data: [
+          {
+            _id: 'folder.01.id',
+            id: 'folder.01.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'Folder one',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          },
+          {
+            _id: 'folder.02.id',
+            id: 'folder.02.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'Folder two',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          },
+          {
+            _id: 'file.a.id',
+            id: 'file.a.id',
+            _type: 'io.cozy.files',
+            type: 'file',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'File A.md',
+            updated_at: '2021-01-01T12:00:00.000000+01:00',
+            size: '111609'
+          },
+          {
+            _id: 'file.b.id',
+            id: 'file.b.id',
+            _type: 'io.cozy.files',
+            type: 'file',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'File B.png',
+            updated_at: '2021-01-01T12:00:00.000000+01:00',
+            size: '11160963'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'io.cozy.files.root-dir'
+          }
+        }
+      },
+
+      'onlyfolder-folder.01.id': {
+        data: [
+          {
+            _id: 'folder.01.id',
+            id: 'folder.01.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'Folder One',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'io.cozy.files.root-dir'
+          }
+        }
+      },
+      'buildContentFolderQuery-folder.01.id': {
+        data: [
+          {
+            _id: 'folder.03.id',
+            id: 'folder.03.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'Folder One',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          },
+          {
+            _id: 'file.c.id',
+            id: 'file.c.id',
+            _type: 'io.cozy.files',
+            type: 'file',
+            dir_id: 'folder.01.id',
+            name: 'File C.txt',
+            updated_at: '2021-01-01T12:00:00.000000+01:00',
+            size: '111609'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'folder.01.id'
+          }
+        }
+      },
+
+      'onlyfolder-folder.02.id': {
+        data: [
+          {
+            _id: 'folder.02.id',
+            id: 'folder.02.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'io.cozy.files.root-dir',
+            name: 'Folder Two',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'io.cozy.files.root-dir'
+          }
+        }
+      },
+      'buildContentFolderQuery-folder.02.id': {
+        data: [
+          {
+            _id: 'file.d.id',
+            id: 'file.d.id',
+            _type: 'io.cozy.files',
+            type: 'file',
+            dir_id: 'folder.02.id',
+            name: 'File D.jpg',
+            updated_at: '2021-01-01T12:00:00.000000+01:00',
+            size: '222111'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'folder.02.id'
+          }
+        }
+      },
+
+      'onlyfolder-folder.03.id': {
+        data: [
+          {
+            _id: 'folder.03.id',
+            id: 'folder.03.id',
+            _type: 'io.cozy.files',
+            type: 'directory',
+            dir_id: 'folder.01.id',
+            name: 'Folder Three',
+            updated_at: '2021-01-01T12:00:00.000000+01:00'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'folder.01.id'
+          }
+        }
+      },
+      'buildContentFolderQuery-folder.03.id': {
+        data: [
+          {
+            _id: 'file.e.id',
+            id: 'file.e.id',
+            _type: 'io.cozy.files',
+            type: 'file',
+            dir_id: 'folder.03.id',
+            name: 'File E.doc',
+            updated_at: '2021-01-01T12:00:00.000000+01:00',
+            size: '222111'
+          }
+        ],
+        definition: {
+          doctype: 'io.cozy.files',
+          selector: {
+            dir_id: 'folder.03.id'
+          }
+        }
+      }
+    }
+  })
+
+  return client
+}
+
+const mockClient = setupClient()
+
+const Wrapper = ({ children }) => {
+  return (
+    <CozyProvider client={mockClient}>
+      <BreakpointsProvider>
+        <I18nContext.Provider
+          value={{ t: x => x, f: () => '01 Jan. 2022', lang: 'en' }}
+        >
+          {children}
+        </I18nContext.Provider>
+      </BreakpointsProvider>
+    </CozyProvider>
+  )
+}
+
+export default Wrapper

package/src/FilePicker/helpers.js

@@ -0,0 +1,46 @@
+import mimeTypes from 'mime-types'
+
+import { isDirectory, isFile } from 'cozy-client/dist/models/file'
+
+/**
+ * @param {string} types - Types we wish to accept ("folder" and/or "extensions/mime" of file), separated by commas
+ * @returns {string[]} All the valid types, if the parameter is undefined or if no type is valid, return an empty array
+ */
+export const getCompliantTypes = types => {
+  if (types) {
+    return types
+      .replaceAll(' ', '')
+      .split(',')
+      .filter(type =>
+        type !== 'folder' ? !!mimeTypes.contentType(type) : true
+      )
+  }
+
+  return []
+}
+
+/**
+ * Check if Item is a file with accepted extension/mime
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+export const isValidFile = (item, validTypes) => {
+  const fileTypesAccepted =
+    validTypes.includes(`.${item.name.split('.').pop()}`) ||
+    validTypes.includes(item.mime)
+
+  return isFile(item) && (fileTypesAccepted || validTypes.length === 0)
+}
+
+/**
+ * Check if Item is a folder with accepted type
+ *
+ * @param {object} item - file or folder
+ * @param {string[]} validTypes - List of accepted types
+ * @returns {boolean}
+ */
+export const isValidFolder = (item, validTypes) => {
+  return isDirectory(item) && validTypes.includes(`folder`)
+}

package/src/FilePicker/helpers.spec.js

@@ -0,0 +1,84 @@
+import { isValidFile, isValidFolder, getCompliantTypes } from './helpers'
+
+const makeMockFile = ({
+  extension = '.pdf',
+  mime = 'application/pdf'
+} = {}) => ({
+  _id: '123',
+  type: 'file',
+  mime: mime,
+  name: `mockFile${extension}`
+})
+const makeMockFolder = () => ({
+  _id: '789',
+  type: 'directory',
+  name: 'mockDir'
+})
+
+describe('getCompliantTypes', () => {
+  it('should an array with all valid types', () => {
+    const res = getCompliantTypes('.pdf, text/plain, .not')
+
+    expect(res).toStrictEqual(['.pdf', 'text/plain'])
+  })
+})
+
+describe('isValidFile', () => {
+  it('should be valid when item has no type providen', () => {
+    const item = makeMockFile()
+    const validTypesAccepted = []
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(true)
+  })
+
+  it('should be valid when item has an accepted extension', () => {
+    const item = makeMockFile({ extension: '.png' })
+    const validTypesAccepted = ['.png', '.pdf']
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(true)
+  })
+
+  it('should not be valid when item has not an accepted extension', () => {
+    const item = makeMockFile({ extension: '.png' })
+    const validTypesAccepted = ['.pdf']
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(false)
+  })
+
+  it('should be valid when item has an accepted mime', () => {
+    const item = makeMockFile({ mime: 'image/png' })
+    const validTypesAccepted = ['application/pdf', 'image/png']
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(true)
+  })
+
+  it('should not be valid when item has not an accepted mime', () => {
+    const item = makeMockFile({ mime: 'image/png' })
+    const validTypesAccepted = ['application/pdf']
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(false)
+  })
+
+  it('should not be valid when item is not an file', () => {
+    const item = makeMockFolder()
+    const validTypesAccepted = []
+
+    expect(isValidFile(item, validTypesAccepted)).toBe(false)
+  })
+})
+
+describe('isValidFolder', () => {
+  it('should be valid when item is an folder', () => {
+    const item = makeMockFolder()
+    const validTypesAccepted = ['folder']
+
+    expect(isValidFolder(item, validTypesAccepted)).toBe(true)
+  })
+
+  it('should not be valid when item is not an folder', () => {
+    const item = makeMockFile()
+    const validTypesAccepted = ['folder']
+
+    expect(isValidFolder(item, validTypesAccepted)).toBe(false)
+  })
+})

package/src/FilePicker/index.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types'
+import React, { useState, memo } from 'react'
+
+import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import FilePickerBody from './FilePickerBody'
+import FilePickerFooter from './FilePickerFooter'
+import FilePickerHeader from './FilePickerHeader'
+import { getCompliantTypes } from '../helpers'
+
+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/src/FilePicker/locales/en.json

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

package/src/FilePicker/locales/fr.json

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

package/src/FilePicker/locales/ru.json

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

package/src/FilePicker/locales/vi.json

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

package/src/FilePicker/queries.js

@@ -0,0 +1,37 @@
+import { Q, fetchPolicies } from 'cozy-client'
+
+const FILES_DOCTYPE = 'io.cozy.files'
+
+const defaultFetchPolicy = fetchPolicies.olderThan(30 * 1000)
+const TRASH_DIR_ID = `${FILES_DOCTYPE}.trash-dir`
+const SHARED_DRIVES_DIR_ID = `${FILES_DOCTYPE}.shared-drives-dir`
+
+export const buildCurrentFolderQuery = folderId => ({
+  definition: () => Q(FILES_DOCTYPE).getById(folderId),
+  options: {
+    as: `onlyfolder-${folderId}`,
+    fetchPolicy: defaultFetchPolicy
+  }
+})
+
+export const buildContentFolderQuery = dirId => ({
+  definition: () =>
+    Q(FILES_DOCTYPE)
+      .where({
+        dir_id: dirId,
+        type: { $gt: null },
+        name: { $gt: null }
+      })
+      .partialIndex({
+        _id: {
+          $nin: [SHARED_DRIVES_DIR_ID, TRASH_DIR_ID]
+        }
+      })
+      .indexFields(['dir_id', 'type', 'name'])
+      .sortBy([{ dir_id: 'asc' }, { type: 'asc' }, { name: 'asc' }])
+      .limitBy(20),
+  options: {
+    as: `buildContentFolderQuery-${dirId}`,
+    fetchPolicy: defaultFetchPolicy
+  }
+})

package/src/FilePicker/styles.styl

@@ -0,0 +1,18 @@
+.filePickerBreadcrumb-previousPath
+    color var(--actionColorActive)
+    cursor pointer
+
+.filePickerBreadcrumb-icon
+    color var(--actionColorActive)
+    margin 0 0.25rem
+
+@supports (display: contents)
+    .filePickerBreadcrumb-wrapper
+        display contents
+
+@supports not (display: contents)
+    .filePickerBreadcrumb-wrapper
+        display flex
+        flex 1 1 auto
+        align-items center
+        width 100%

package/src/Intent/IntentDialogOpener/Readme.md

@@ -0,0 +1,25 @@
+```jsx
+import IntentDialogOpener from 'cozy-ui/transpiled/react/IntentDialogOpener'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+;
+
+<DemoProvider>
+  <IntentDialogOpener
+    action='OPEN'
+    doctype='io.cozy.files'
+    // you would not pass create normally as it defaults to
+    // cozy.client.intents.create
+    create={utils.fakeIntentCreate}
+    classes={{ paper: 'u-h-100' }} // extra props will be passed to the dialog
+    fullWidth // extra props will be passed to the dialog
+    maxWidth="md" // extra props will be passed to the dialog
+    iframeProps={{ spinnerProps: { middle: true } }}
+    onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
+    onDismiss={() => alert('intent has been dismissed !')}
+  >
+    <Button label="Launch Intent OPEN for doctype io.cozy.files" />
+  </IntentDialogOpener>
+</DemoProvider>
+```