cozy-ui-plus 1.1.0

package/src/ListItem/ListItemContact/helpers.spec.js

@@ -0,0 +1,41 @@
+import {
+  divider,
+  emailTo,
+  smsTo,
+  call
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+import { makeOptionalActions } from './helpers'
+
+describe('makeOptionalActions', () => {
+  it('should return divider, call, smsTo, emailTo', () => {
+    const res = makeOptionalActions({
+      email: [{ address: 'mail@cozy.com' }],
+      phone: [{ number: '123456' }]
+    })
+
+    expect(res).toStrictEqual([divider, call, smsTo, emailTo])
+  })
+
+  it('should return divider, emailTo', () => {
+    const res = makeOptionalActions({
+      email: [{ address: 'mail@cozy.com' }]
+    })
+
+    expect(res).toStrictEqual([divider, emailTo])
+  })
+
+  it('should return divider, call, smsTo', () => {
+    const res = makeOptionalActions({
+      phone: [{ number: '123456' }]
+    })
+
+    expect(res).toStrictEqual([divider, call, smsTo])
+  })
+
+  it('should empty array', () => {
+    const res = makeOptionalActions({})
+
+    expect(res).toStrictEqual([])
+  })
+})

package/src/ListItem/ListItemContact/index.jsx

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getDisplayName } from 'cozy-client/dist/models/contact'
+import Filename from 'cozy-ui/transpiled/react/Filename'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ContactsIcon from 'cozy-ui/transpiled/react/Icons/Contacts'
+
+import useActions from './useActions'
+import ListItemBase from '../ListItemBase'
+
+const ListItemContact = ({
+  contact,
+  primary,
+  secondary,
+  icon,
+  actions,
+  selectProps,
+  expandedAttributesProps,
+  onClick
+}) => {
+  const defaultActions = useActions(contact)
+  const primaryText = primary || getDisplayName(contact)
+  const secondaryText = secondary || contact.email?.[0]?.address
+  const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
+
+  const itemActions = defaultActions.concat(actions)
+
+  return (
+    <ListItemBase
+      doc={contact}
+      primary={primaryText}
+      secondary={secondaryText}
+      icon={itemIcon}
+      actions={itemActions}
+      actionMenuComp={{
+        Header: <Filename icon={ContactsIcon} filename={primaryText} />
+      }}
+      selectProps={selectProps}
+      expandedAttributesProps={expandedAttributesProps}
+      onClick={onClick}
+    />
+  )
+}
+
+ListItemContact.defaultProps = {
+  actions: []
+}
+
+ListItemContact.propTypes = {
+  contact: PropTypes.object,
+  primary: PropTypes.node,
+  secondary: PropTypes.node,
+  icon: PropTypes.node,
+  actions: PropTypes.array,
+  selectProps: PropTypes.shape({
+    isSelectActive: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    isChecked: PropTypes.bool
+  }),
+  expandedAttributesProps: PropTypes.shape({
+    isExpandedAttributesActive: PropTypes.bool,
+    expandedAttributes: PropTypes.array
+  }),
+  onClick: PropTypes.func
+}
+
+export default ListItemContact

package/src/ListItem/ListItemContact/useActions.jsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+
+import {
+  makeActions,
+  modify,
+  viewInContacts
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+import { makeOptionalActions } from './helpers'
+
+const useActions = contact => {
+  const optionalActions = useMemo(() => makeOptionalActions(contact), [contact])
+  const finalActions = useMemo(
+    () => [modify, viewInContacts].concat(optionalActions),
+    [optionalActions]
+  )
+  const actions = useMemo(() => makeActions(finalActions), [finalActions])
+
+  return actions
+}
+
+export default useActions

package/src/ListItem/ListItemFile/ExpirationAnnotation.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import {
+  computeExpirationDate,
+  isExpired,
+  makeExpiredMessage,
+  makeExpiresInMessage
+} from 'cozy-client/dist/models/paper'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import withListItemLocales from '../hoc/withListItemLocales'
+
+const ExpirationAnnotation = ({ file }) => {
+  const { lang } = useI18n()
+
+  if (isExpired(file)) {
+    return (
+      <Typography component="span" variant="inherit" color="error">
+        {makeExpiredMessage({ lang })}
+      </Typography>
+    )
+  }
+
+  const expirationDate = computeExpirationDate(file)
+
+  return (
+    <Typography component="span" variant="inherit" className="u-warning">
+      {makeExpiresInMessage(expirationDate, { lang })}
+    </Typography>
+  )
+}
+
+ExpirationAnnotation.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default withListItemLocales(ExpirationAnnotation)

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+import { isNote } from 'cozy-client/dist/models/file'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
+import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
+
+import FileImageLoader from '../../FileImageLoader'
+
+const ItemIcon = ({ icon, file }) => {
+  const client = useClient()
+
+  if (icon) return icon
+
+  return (
+    <FileImageLoader
+      client={client}
+      file={file}
+      linkType="tiny"
+      render={src => {
+        return (
+          <Thumbnail>
+            {src ? (
+              <img src={src} alt="" />
+            ) : (
+              <Skeleton variant="rect" animation="wave" />
+            )}
+          </Thumbnail>
+        )
+      }}
+      renderFallback={() => (
+        <Thumbnail>
+          <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
+        </Thumbnail>
+      )}
+    />
+  )
+}
+
+ItemIcon.propTypes = {
+  icon: PropTypes.node,
+  file: PropTypes.object
+}
+
+export default ItemIcon

package/src/ListItem/ListItemFile/PrimaryText.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+import Filename from 'cozy-ui/transpiled/react/Filename'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+
+const PrimaryText = ({ primary, file }) => {
+  const { isMobile } = useBreakpoints()
+
+  if (primary) return primary
+
+  return (
+    <Filename
+      variant="body1"
+      midEllipsis={isMobile}
+      filename={
+        splitFilename({
+          name: file.name,
+          type: 'file'
+        }).filename
+      }
+      extension={
+        splitFilename({
+          name: file.name,
+          type: 'file'
+        }).extension
+      }
+    />
+  )
+}
+
+PrimaryText.propTypes = {
+  primary: PropTypes.node,
+  file: PropTypes.object
+}
+
+export default PrimaryText

package/src/ListItem/ListItemFile/SecondaryText.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { isExpired, isExpiringSoon } from 'cozy-client/dist/models/paper'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ExpirationAnnotation from './ExpirationAnnotation'
+
+const SecondaryText = ({ secondary, file }) => {
+  const { f } = useI18n()
+
+  if (secondary) return secondary
+
+  const date = file?.metadata?.datetime
+    ? f(file?.metadata?.datetime, 'dd/LL/yyyy')
+    : null
+
+  return (
+    <>
+      {date ? date : ''}
+      {(isExpired(file) || isExpiringSoon(file)) && (
+        <>
+          {date ? ' · ' : ''}
+          <ExpirationAnnotation file={file} />
+        </>
+      )}
+    </>
+  )
+}
+
+SecondaryText.propTypes = {
+  secondary: PropTypes.node,
+  file: PropTypes.object
+}
+
+export default SecondaryText

package/src/ListItem/ListItemFile/index.jsx

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+import Filename from 'cozy-ui/transpiled/react/Filename'
+import FiletypePdfIcon from 'cozy-ui/transpiled/react/Icons/FileTypePdf'
+
+import ItemIcon from './ItemIcon'
+import PrimaryText from './PrimaryText'
+import SecondaryText from './SecondaryText'
+import ListItemBase from '../ListItemBase'
+
+const ListItemFile = ({
+  file,
+  primary,
+  secondary,
+  icon,
+  actions,
+  selectProps,
+  expandedAttributesProps,
+  onClick
+}) => {
+  const { filename, extension } = splitFilename({
+    name: file.name,
+    type: 'file'
+  })
+
+  return (
+    <ListItemBase
+      doc={file}
+      primary={<PrimaryText primary={primary} file={file} />}
+      secondary={<SecondaryText secondary={secondary} file={file} />}
+      icon={<ItemIcon icon={icon} file={file} />}
+      actions={actions}
+      actionMenuComp={{
+        Header: (
+          <Filename
+            icon={FiletypePdfIcon}
+            filename={filename}
+            extension={extension}
+          />
+        )
+      }}
+      selectProps={selectProps}
+      expandedAttributesProps={expandedAttributesProps}
+      onClick={onClick}
+    />
+  )
+}
+
+ListItemFile.defaultProps = {
+  expandedAttributesProps: {
+    isExpandedAttributesActive: false
+  }
+}
+
+ListItemFile.propTypes = {
+  file: PropTypes.object,
+  primary: PropTypes.node,
+  secondary: PropTypes.node,
+  icon: PropTypes.node,
+  actions: PropTypes.array,
+  selectProps: PropTypes.shape({
+    isSelectActive: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    isChecked: PropTypes.bool
+  }),
+  expandedAttributesProps: PropTypes.shape({
+    isExpandedAttributesActive: PropTypes.bool,
+    expandedAttributes: PropTypes.array
+  }),
+  onClick: PropTypes.func
+}
+
+export default ListItemFile

package/src/ListItem/Readme.md

@@ -0,0 +1,211 @@
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import List from 'cozy-ui/transpiled/react/List'
+import ListSubheader from 'cozy-ui/transpiled/react/ListSubheader'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CommentIcon from 'cozy-ui/transpiled/react/Icons/Comment'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots"
+import PenIcon from "cozy-ui/transpiled/react/Icons/Pen"
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash"
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+
+const initialVariants = [{
+  dense: false,
+  longText: false,
+  disabledGutters: false,
+  doubleGutters: false,
+  small: false,
+  large: false,
+  bigIcons: false,
+  smallIcons: false,
+  multipleLeftIcons: false,
+  multipleRightIcons: false,
+  withActions: false,
+  ellipsis: true
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => {
+    const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
+    const size = variant.small ? 'small' : variant.large ? 'large' : 'medium'
+    const listItemProps = { gutters, size, ellipsis: variant.ellipsis }
+
+    const iconSize = variant.smallIcons ? 8 : variant.bigIcons ? 32 : 16
+    const text = variant.longText ? content.ada.short : "I'm a primary text"
+
+    return (
+      <>
+        <List dense={variant.dense} subheader={<ListSubheader>Section 1</ListSubheader>}>
+          <ListItem {...listItemProps} button>
+            <ListItemIcon>
+              <Icon icon={CommentIcon} size={iconSize} />
+            </ListItemIcon>
+            {variant.multipleLeftIcons && (
+              <>
+                <ListItemIcon>
+                  <Icon icon={PeopleIcon} size={iconSize} />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Radio />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Checkbox />
+                </ListItemIcon>
+              </>
+            )}
+            <ListItemText primary={text} />
+            {variant.multipleRightIcons && (
+              <>
+                <ListItemIcon>
+                  <Icon icon={RightIcon} size={iconSize} />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Radio />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Checkbox />
+                </ListItemIcon>
+              </>
+            )}
+            {variant.withActions && (
+              <ListItemSecondaryAction>
+                <IconButton>
+                  <Icon icon={PenIcon} />
+                </IconButton>
+                <IconButton>
+                  <Icon icon={TrashIcon} />
+                </IconButton>
+                <IconButton>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
+          </ListItem>
+        </List>
+      </>
+    )
+  }}
+</Variants>
+```
+
+### Contextualized items
+
+```jsx
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
+}
+
+const contacts = [
+  {
+    _id: 'id01',
+    _type: 'io.cozy.contacts',
+    displayName: 'John Doe',
+    birthday: '25/10/2022',
+    email: [{ address: 'johndoe@cozy.cc', primary: true }],
+    phone: [{ number: '0102030405', primary: true }]
+  },
+  {
+    _id: 'id02',
+    _type: 'io.cozy.contacts',
+    displayName: 'Jason Bourne',
+    birthday: '01/01/2020',
+    email: [{ address: 'jbourne@cozy.cc', primary: true }]
+  }
+]
+
+const files = [
+  {
+    _type: 'io.cozy.files',
+    name: 'File01.pdf',
+    metadata: {
+      number: 12345,
+      refTaxIncome: '153',
+      datetime: '2024-01-11T12:00:00.000Z',
+      datetimeLabel: 'expirationDate',
+      referencedDate: '2024-01-01T12:00:00.000Z',
+      expirationDate: '2024-01-11T12:00:00.000Z',
+      issueDate: '2024-01-11T12:00:00.000Z',
+      noticePeriod: '30',
+      qualification: {
+        label: 'driver_license'
+      }
+    }
+  },
+  {
+    _type: 'io.cozy.files',
+    type: 'file',
+    name: 'Note01.cozy-note',
+    metadata: {
+      title: 'note title',
+      version: 0
+    }
+  }
+]
+
+;
+
+<DemoProvider client={mockClient}>
+  <List>
+    <ListItemByDoc
+      doc={contacts[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['email', 'birthday']
+      }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['metadata.number']
+      }}
+      onClick={() => {}}
+    />
+    <ListItemByDoc
+      doc={files[0]}
+      expandedAttributesProps={{ isExpandedAttributesActive: true }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[1]}
+      onClick={() => {}}
+    />
+  </List>
+</DemoProvider>
+```

package/src/ListItem/hoc/withListItemLocales.jsx

@@ -0,0 +1,15 @@
+import withLocales from 'cozy-ui/transpiled/react/providers/I18n/withLocales'
+
+import en from '../locales/en.json'
+import fr from '../locales/fr.json'
+import ru from '../locales/ru.json'
+import vi from '../locales/vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}
+
+export default withLocales(locales)

package/src/ListItem/locales/en.json

@@ -0,0 +1,75 @@
+{
+  "common": {
+    "day": "%{smart_count} day |||| %{smart_count} days"
+  },
+  "ListItem": {
+    "attributes": {
+      "birthday": "Birthday",
+      "birthcity": "Birth city",
+      "address": "Address",
+      "email": "Email address",
+      "phone": "Phone number",
+      "company": "Company",
+      "jobTitle": "Job title",
+      "metadata": {
+        "datetime": "Added on",
+        "issueDate": "Delivered on",
+        "expirationDate": "Expiration date",
+        "referencedDate": "Referenced date",
+        "shootingDate": "Shooting date",
+        "obtentionDate": "Date obtained",
+        "date": "Document date",
+        "country": "Country of delivery",
+        "refTaxIncome": "Reference tax income",
+        "contractType": "Contract type",
+        "noticePeriod": "Expiration alert",
+        "cafFileNumber": "CAF file number",
+        "vinNumber": "Vehicle registration number (VIN)",
+        "cardNumber": "National ID card number",
+        "ibanNumber": "IBAN number",
+        "bicNumber": "BIC number",
+        "passportNumber": "Passport number",
+        "netSocialAmount": "Net social amount",
+        "vehicle": {
+          "licenseNumber": "Vehicle registration number",
+          "confidentialNumber": "Confidential vehicle registration code"
+        },
+        "number": {
+          "pay_sheet": "Gross remuneration",
+          "tax_return": "Reference tax number",
+          "tax_notice": "Reference tax number",
+          "real_estate_tax": "Reference tax number",
+          "tax_timetable": "Reference tax number",
+          "fine": "Amount of the fine",
+          "fidelity_card": "Card number",
+          "driver_license": "License number",
+          "caf": "CAF file number",
+          "payment_proof_family_allowance": "CAF file number",
+          "vehicle_registration": "Vehicle registration number (VIN)",
+          "national_id_card": "National ID card number",
+          "bank_details": "IBAN number",
+          "passport": "Passport number",
+          "residence_permit": "License number"
+        }
+      }
+    },
+    "file": {
+      "page": {
+        "back": "Back side",
+        "front": "Front side"
+      }
+    },
+    "snackbar": {
+      "copyToClipboard": {
+        "success": "Copied to clipboard",
+        "error": "Cannot copy to clipboard"
+      }
+    },
+    "renameModal": {
+      "title": "Rename",
+      "content": "You are about to change the file extension. Do you want to continue?",
+      "cancel": "Cancel",
+      "submit": "Continue"
+    }
+  }
+}