cozy-ui 146.0.0 → 146.2.0

package/react/MemberList/index.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useGetIsMounted } from 'rooks'
+
+import EmptyMembers from './EmptyMembers'
+import List from '../List'
+import MemberRow from '../MemberRow'
+import { memberPropType, rolesPropType } from '../MemberRow/propTypes'
+
+/**
+ * Lists the members of a sharing, the owner first
+ *
+ * @param {object} props
+ * @param {object[]} props.members - Members to display, see `MemberRow`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ * @param {boolean} [props.showEmptyState] - Whether to show a placeholder
+ * when there is no member but the owner
+ * @param {string} [props.className] - Class name of the list
+ */
+const MemberList = ({
+  members,
+  roles,
+  onRoleChange,
+  onRemove,
+  showEmptyState = true,
+  className
+}) => {
+  const getIsMounted = useGetIsMounted()
+  const owner = members.find(member => member.isOwner)
+  const otherMembers = members.filter(member => !member.isOwner)
+
+  return (
+    <>
+      <List className={className}>
+        {owner && (
+          <MemberRow
+            member={owner}
+            roles={roles}
+            onRoleChange={onRoleChange}
+            onRemove={onRemove}
+          />
+        )}
+        {otherMembers.map(member => (
+          <MemberRow
+            key={member.id}
+            member={member}
+            roles={roles}
+            isNew={getIsMounted()}
+            onRoleChange={onRoleChange}
+            onRemove={onRemove}
+          />
+        ))}
+      </List>
+      {showEmptyState && otherMembers.length === 0 && <EmptyMembers />}
+    </>
+  )
+}
+
+MemberList.propTypes = {
+  members: PropTypes.arrayOf(memberPropType).isRequired,
+  roles: rolesPropType.isRequired,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  showEmptyState: PropTypes.bool,
+  className: PropTypes.string
+}
+
+export default MemberList

package/react/MemberList/locales/de.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Noch niemand hinzugefügt",
+      "subtitle": "Eingeladene Personen werden hier angezeigt."
+    }
+  }
+}

package/react/MemberList/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "No one has been added yet",
+      "subtitle": "People invited to join will be listed here."
+    }
+  }
+}

package/react/MemberList/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Todavía no se ha añadido a nadie",
+      "subtitle": "Las personas invitadas aparecerán aquí."
+    }
+  }
+}

package/react/MemberList/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Personne n'a encore été ajouté",
+      "subtitle": "Les personnes invitées apparaîtront ici."
+    }
+  }
+}

package/react/MemberList/locales/index.js

@@ -0,0 +1,17 @@
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import it from './it.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ru,
+  vi
+}

package/react/MemberList/locales/it.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Nessuno è stato ancora aggiunto",
+      "subtitle": "Le persone invitate verranno elencate qui."
+    }
+  }
+}

package/react/MemberList/locales/ru.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Пока никто не добавлен",
+      "subtitle": "Здесь появятся приглашённые пользователи."
+    }
+  }
+}

package/react/MemberList/locales/vi.json

@@ -0,0 +1,8 @@
+{
+  "MemberList": {
+    "empty": {
+      "title": "Chưa có ai được thêm",
+      "subtitle": "Những người được mời sẽ hiển thị tại đây."
+    }
+  }
+}

package/react/MemberRow/MemberAvatar.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+
+import Avatar from '../Avatar'
+
+const MemberAvatar = ({ initials, avatarUrl, ...rest }) => {
+  // Remember which image url failed to load so we can fall back to the
+  // initials. Storing the url (instead of a boolean) means a new url is
+  // retried automatically, without an effect to reset the error state.
+  const [erroredSrc, setErroredSrc] = useState(null)
+
+  // The avatar can become unreachable (eg. the related sharing is revoked
+  // while its members are still rendered), in which case the image request
+  // fails. Without a fallback the browser shows a broken-image icon, so we
+  // render the initials instead.
+  return (
+    <Avatar {...rest}>
+      {avatarUrl && erroredSrc !== avatarUrl ? (
+        <img
+          width="100%"
+          height="100%"
+          src={avatarUrl}
+          onError={() => setErroredSrc(avatarUrl)}
+        />
+      ) : (
+        initials
+      )}
+    </Avatar>
+  )
+}
+
+export default MemberAvatar

package/react/MemberRow/MemberAvatar.spec.jsx

@@ -0,0 +1,26 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import MemberAvatar from './MemberAvatar'
+import DemoProvider from '../providers/DemoProvider'
+
+describe('MemberAvatar', () => {
+  const setup = (initials, avatarUrl) =>
+    render(
+      <DemoProvider>
+        <MemberAvatar initials={initials} avatarUrl={avatarUrl} />
+      </DemoProvider>
+    )
+
+  it('falls back to the initials when the avatar image fails to load', () => {
+    const { container, getByText } = setup(
+      'B',
+      'http://cozy.example.com/sharings/123/recipients/0/avatar?v=owner'
+    )
+
+    fireEvent.error(container.querySelector('img'))
+
+    expect(container.querySelector('img')).toBeNull()
+    expect(getByText('B')).toBeTruthy()
+  })
+})

package/react/MemberRow/MemberGroupAvatar.jsx

@@ -0,0 +1,17 @@
+import { Icon, Peoples } from '@linagora/twake-icons'
+import React from 'react'
+
+import Avatar, { colorToGradient } from '../Avatar'
+import { COLORS } from '../ColorList/helpers'
+
+const DEFAULT_COLOR = COLORS[4]
+
+const MemberGroupAvatar = ({ size, color = DEFAULT_COLOR, className }) => {
+  return (
+    <Avatar size={size} color={colorToGradient(color)} className={className}>
+      <Icon icon={Peoples} />
+    </Avatar>
+  )
+}
+
+export default MemberGroupAvatar

package/react/MemberRow/MemberRoleMenu.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+
+import MemberRoleMenuHeader from './MemberRoleMenuHeader'
+import { memberPropType, rolesPropType } from './propTypes'
+import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
+import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
+import DropdownButton from '../DropdownButton'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Radios from '../Radios'
+import useBreakpoints from '../providers/Breakpoints'
+
+const MemberRoleMenu = ({ member, value, roles, onChange }) => {
+  const { isMobile } = useBreakpoints()
+  const buttonRef = useRef()
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+
+  const label = roles.find(role => role.value === value)?.label
+
+  const handleRoleClick = role => {
+    if (role.value !== value) onChange(role.value)
+  }
+
+  return (
+    <>
+      <DropdownButton
+        ref={buttonRef}
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={() => setMenuDisplayed(true)}
+        textVariant="body2"
+      >
+        {label}
+      </DropdownButton>
+      <ActionsMenuWrapper
+        open={isMenuDisplayed}
+        anchorEl={buttonRef.current}
+        getContentAnchorEl={null}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        keepMounted
+        autoClose
+        onClose={() => setMenuDisplayed(false)}
+      >
+        {/* The header renders nothing on desktop but would still take the initial focus of the menu */}
+        {isMobile && <MemberRoleMenuHeader member={member} />}
+        {roles.map(role => (
+          <ActionsMenuItem
+            key={role.value}
+            onClick={() => handleRoleClick(role)}
+          >
+            <ListItemIcon>
+              <Radios checked={role.value === value} />
+            </ListItemIcon>
+            <ListItemText primary={role.label} />
+          </ActionsMenuItem>
+        ))}
+      </ActionsMenuWrapper>
+    </>
+  )
+}
+
+MemberRoleMenu.propTypes = {
+  member: memberPropType.isRequired,
+  value: PropTypes.string.isRequired,
+  roles: rolesPropType.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default MemberRoleMenu

package/react/MemberRow/MemberRoleMenu.spec.jsx

@@ -0,0 +1,49 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import MemberRoleMenu from './MemberRoleMenu'
+import DemoProvider from '../providers/DemoProvider'
+
+const viewer = { value: 'viewer', label: 'Viewer' }
+const editor = { value: 'editor', label: 'Editor' }
+
+describe('MemberRoleMenu', () => {
+  let createRangeBackup
+
+  beforeAll(() => {
+    createRangeBackup = global.document.createRange
+    global.document.createRange = jest.fn(() => ({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: { nodeName: 'BODY', ownerDocument: document }
+    }))
+  })
+
+  afterAll(() => {
+    global.document.createRange = createRangeBackup
+  })
+
+  const setup = roles => {
+    const onChange = jest.fn()
+    render(
+      <DemoProvider>
+        <MemberRoleMenu
+          member={{ id: 'bob', name: 'Bob' }}
+          value="editor"
+          roles={roles}
+          onChange={onChange}
+        />
+      </DemoProvider>
+    )
+    return { onChange }
+  }
+
+  it('does not change the role when the current one is picked', () => {
+    const { onChange } = setup([viewer, editor])
+
+    fireEvent.click(screen.getByRole('button', { name: 'Editor' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Editor' }))
+
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/react/MemberRow/MemberRoleMenuHeader.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useI18n } from 'twake-i18n'
+
+import MemberAvatar from './MemberAvatar'
+import MemberGroupAvatar from './MemberGroupAvatar'
+import { memberPropType } from './propTypes'
+import ActionsMenuMobileHeader from '../ActionsMenu/ActionsMenuMobileHeader'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+
+const MemberRoleMenuHeader = ({ member }) => {
+  const { t } = useI18n()
+  const { name, avatarUrl, initials, color, isGroup, isCurrentUser } = member
+
+  return (
+    <ActionsMenuMobileHeader>
+      <ListItemIcon>
+        {isGroup ? (
+          <MemberGroupAvatar size="m" color={color} />
+        ) : (
+          <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
+        )}
+      </ListItemIcon>
+      <ListItemText
+        primary={
+          isCurrentUser
+            ? t('MemberRow.you')
+            : name || t('MemberRow.defaultName')
+        }
+        primaryTypographyProps={{ variant: 'h6' }}
+      />
+    </ActionsMenuMobileHeader>
+  )
+}
+
+MemberRoleMenuHeader.propTypes = {
+  member: memberPropType.isRequired
+}
+
+export default MemberRoleMenuHeader

package/react/MemberRow/MemberRow.spec.jsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { I18n, useI18n } from 'twake-i18n'
+
+import MemberRow from '.'
+import List from '../List'
+import DemoProvider from '../providers/DemoProvider'
+
+describe('MemberRow', () => {
+  it('keeps the translations of the app in the subtitle, and its own', () => {
+    const AppSubtitle = () => {
+      const { t } = useI18n()
+      return t('status')
+    }
+    render(
+      <DemoProvider>
+        <I18n lang="en" dictRequire={() => ({ status: 'Invitation sent' })}>
+          <List>
+            <MemberRow
+              member={{
+                id: 'bob',
+                name: 'Bob',
+                subtitle: <AppSubtitle />,
+                role: 'editor',
+                canRemove: true
+              }}
+              roles={[{ value: 'editor', label: 'Editor' }]}
+              onRoleChange={jest.fn()}
+              onRemove={jest.fn()}
+            />
+          </List>
+        </I18n>
+      </DemoProvider>
+    )
+
+    expect(screen.queryByText('Invitation sent')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Remove from sharing')).toBeInTheDocument()
+  })
+})

package/react/MemberRow/MemberRowActions.jsx

@@ -0,0 +1,56 @@
+import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useI18n } from 'twake-i18n'
+
+import MemberRoleMenu from './MemberRoleMenu'
+import { memberPropType, rolesPropType } from './propTypes'
+import IconButton from '../IconButton'
+import Spinner from '../Spinner'
+import Typography from '../Typography'
+
+const MemberRowActions = ({ member, roles, onRoleChange, onRemove }) => {
+  const { t } = useI18n()
+  const { role, canChangeRole, canRemove, removeIcon, removeLabel, isPending } =
+    member
+  const memberRoles = member.roles ?? roles
+
+  const isRoleMenuShown = canChangeRole && !isPending
+
+  return (
+    <div className="u-flex u-flex-items-center u-g-1">
+      {isPending && <Spinner />}
+      {isRoleMenuShown ? (
+        <MemberRoleMenu
+          member={member}
+          value={role}
+          roles={memberRoles}
+          onChange={newRole => onRoleChange(member, newRole)}
+        />
+      ) : (
+        <Typography variant="body2">
+          {memberRoles.find(memberRole => memberRole.value === role)?.label}
+        </Typography>
+      )}
+      {canRemove && !isPending && (
+        <IconButton
+          onClick={() => onRemove(member)}
+          size="small"
+          className="u-ml-half"
+          aria-label={removeLabel ?? t('MemberRow.remove')}
+        >
+          <Icon icon={removeIcon ?? CrossCircleOutline} />
+        </IconButton>
+      )}
+    </div>
+  )
+}
+
+MemberRowActions.propTypes = {
+  member: memberPropType.isRequired,
+  roles: rolesPropType.isRequired,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+}
+
+export default MemberRowActions

package/react/MemberRow/Readme.md

@@ -0,0 +1,57 @@
+Displays a member of a sharing: avatar, name, subtitle, and on the right its role and a button to remove them. `MemberList` renders one row per member.
+
+### Props of a member
+
+* **id**: unique key of the member
+* **name**: displayed name, replaced by "You" when `isCurrentUser`
+* **subtitle**: email, status… (any node)
+* **avatarUrl** and **initials**: picture of the member, initials when there is no picture or it fails to load
+* **isGroup** and **color**: shows a group avatar
+* **isOwner**: shows the "Owner" label and no action
+* **role** and **roles**: current role, and the roles of this member when they differ from the `roles` of the row
+* **canChangeRole**: shows the role in a menu, as text otherwise
+* **canRemove**, **removeIcon** and **removeLabel**: remove button, its icon and its accessible label
+* **action**: `{ label, onClick }` button shown in place of the role and the remove button
+* **isPending**: shows a spinner instead of the actions
+* **onClick**: makes the row clickable
+* **data**: anything the app needs back in its callbacks, not read by the row
+
+### Demo
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import List from 'cozy-ui/transpiled/react/List'
+import MemberRow from 'cozy-ui/transpiled/react/MemberRow'
+import { Unlink } from '@linagora/twake-icons'
+
+const roles = [
+  { value: 'viewer', label: 'Viewer' },
+  { value: 'editor', label: 'Editor' }
+]
+
+const rows = [
+  ['Owner', { id: 'alice', name: 'Alice', subtitle: 'alice@cozy.cc', initials: 'A', isOwner: true, isCurrentUser: true }],
+  ['Role and remove button', { id: 'bob', name: 'Bob', subtitle: 'bob@cozy.cc', initials: 'B', role: 'editor', canChangeRole: true, canRemove: true }],
+  ['Role as text', { id: 'carol', name: 'Carol', subtitle: 'carol@cozy.cc', initials: 'C', role: 'viewer' }],
+  ['Action', { id: 'dave', name: 'Dave', subtitle: 'dave@cozy.cc', initials: 'D', action: { label: 'Verify', onClick: () => {} } }],
+  ['Pending', { id: 'eve', name: 'Eve', subtitle: 'eve@cozy.cc', initials: 'E', role: 'editor', canChangeRole: true, canRemove: true, isPending: true }],
+  ['Clickable group with its only role', { id: 'family', name: 'Family', subtitle: '2 members', isGroup: true, role: 'editor', roles: [{ value: 'editor', label: 'Editor' }], canChangeRole: true, canRemove: true, onClick: () => {} }],
+  ['Clickable group, other remove icon', { id: 'team', name: 'Team', subtitle: '3 members', isGroup: true, color: '#FF7F1B', role: 'editor', canRemove: true, removeIcon: Unlink, removeLabel: 'Unlink Team', onClick: () => {} }]
+]
+
+;
+
+<DemoProvider>
+  <List>
+    {rows.map(([label, member]) => (
+      <MemberRow
+        key={member.id}
+        member={{ ...member, name: `${member.name} (${label})` }}
+        roles={roles}
+        onRoleChange={() => {}}
+        onRemove={() => {}}
+      />
+    ))}
+  </List>
+</DemoProvider>
+```

package/react/MemberRow/index.jsx

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import MemberAvatar from './MemberAvatar'
+import MemberGroupAvatar from './MemberGroupAvatar'
+import MemberRowActions from './MemberRowActions'
+import { locales } from './locales'
+import { memberPropType, rolesPropType } from './propTypes'
+import Button from '../Buttons'
+import Fade from '../Fade'
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemSecondaryAction from '../ListItemSecondaryAction'
+import ListItemText from '../ListItemText'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+
+export const FADE_IN_DURATION = 600
+
+/**
+ * Displays a member of a sharing: avatar, name, subtitle, role and remove button
+ *
+ * @param {object} props
+ * @param {object} props.member - Member to display, see `memberPropType`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {boolean} [props.isNew] - Whether the row fades in
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ */
+const MemberRow = ({ member, roles, isNew, onRoleChange, onRemove }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const {
+    name,
+    subtitle,
+    avatarUrl,
+    initials,
+    color,
+    isGroup,
+    isOwner,
+    isCurrentUser,
+    action,
+    onClick
+  } = member
+
+  const ActionsWrapper = onClick ? ListItemSecondaryAction : Fragment
+  const actionsWrapperProps = onClick
+    ? { className: isMobile ? 'u-mr-1' : 'u-mr-2' }
+    : undefined
+
+  return (
+    <Fade in timeout={isNew ? FADE_IN_DURATION : 0}>
+      <ListItem
+        button={Boolean(onClick)}
+        onClick={onClick}
+        gutters={isMobile ? 'default' : 'double'}
+        size="small"
+      >
+        <ListItemIcon>
+          {isGroup ? (
+            <MemberGroupAvatar size="m" color={color} />
+          ) : (
+            <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
+          )}
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography variant="body1">
+              {isCurrentUser
+                ? t('MemberRow.you')
+                : name || t('MemberRow.defaultName')}
+            </Typography>
+          }
+          secondary={subtitle}
+        />
+        <ActionsWrapper {...actionsWrapperProps}>
+          {isOwner && (
+            <Typography variant="body2">{t('MemberRow.owner')}</Typography>
+          )}
+          {action && (
+            <Button
+              style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
+              variant="text"
+              onClick={action.onClick}
+              label={action.label}
+            />
+          )}
+          {!isOwner && !action && (
+            <MemberRowActions
+              member={member}
+              roles={roles}
+              onRoleChange={onRoleChange}
+              onRemove={onRemove}
+            />
+          )}
+        </ActionsWrapper>
+      </ListItem>
+    </Fade>
+  )
+}
+
+MemberRow.propTypes = {
+  member: memberPropType.isRequired,
+  roles: rolesPropType.isRequired,
+  isNew: PropTypes.bool,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+}
+
+export default MemberRow

package/react/MemberRow/locales/de.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Eigentümer",
+    "you": "Du",
+    "remove": "Aus der Freigabe entfernen",
+    "defaultName": "Anonym"
+  }
+}