cozy-ui 145.0.0 → 146.1.0

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"
+  }
+}

package/react/MemberRow/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Owner",
+    "you": "You",
+    "remove": "Remove from sharing",
+    "defaultName": "Anonymous"
+  }
+}

package/react/MemberRow/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Propietario",
+    "you": "Tú",
+    "remove": "Quitar del uso compartido",
+    "defaultName": "Anónimo"
+  }
+}

package/react/MemberRow/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Propriétaire",
+    "you": "Vous",
+    "remove": "Arrêter le partage",
+    "defaultName": "Anonyme"
+  }
+}

package/react/MemberRow/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/MemberRow/locales/it.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Proprietario",
+    "you": "Tu",
+    "remove": "Rimuovi dalla condivisione",
+    "defaultName": "Anonimo"
+  }
+}

package/react/MemberRow/locales/ru.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Владелец",
+    "you": "Вы",
+    "remove": "Удалить из общего доступа",
+    "defaultName": "Аноним"
+  }
+}

package/react/MemberRow/locales/vi.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Chủ sở hữu",
+    "you": "Bạn",
+    "remove": "Xóa khỏi chia sẻ",
+    "defaultName": "Ẩn danh"
+  }
+}

package/react/MemberRow/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+
+const rolePropType = PropTypes.shape({
+  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired
+})
+
+export const rolesPropType = PropTypes.arrayOf(rolePropType)
+
+export const memberPropType = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  subtitle: PropTypes.node,
+  avatarUrl: PropTypes.string,
+  initials: PropTypes.string,
+  color: PropTypes.string,
+  isGroup: PropTypes.bool,
+  isOwner: PropTypes.bool,
+  isCurrentUser: PropTypes.bool,
+  role: PropTypes.string,
+  roles: rolesPropType,
+  canChangeRole: PropTypes.bool,
+  canRemove: PropTypes.bool,
+  removeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  removeLabel: PropTypes.string,
+  action: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired
+  }),
+  isPending: PropTypes.bool,
+  onClick: PropTypes.func,
+  data: PropTypes.any
+})

package/react/MuiCozyTheme/overrides/makeDarkOverrides.js

@@ -1,6 +1,7 @@
 import merge from 'lodash/merge'
 
 import { makeLightOverrides } from './makeLightOverrides'
+import { alpha } from '../../styles'
 
 export const makeDarkOverrides = theme => {
   const makeOverridesForDarkTheme = theme => ({
@@ -8,6 +9,11 @@ export const makeDarkOverrides = theme => {
       colorDefault: {
         backgroundColor: theme.palette.primary.main
       }
+    },
+    MuiBackdrop: {
+      root: {
+        backgroundColor: alpha(theme.palette.common.black, 0.5)
+      }
     }
   })
 

package/react/MuiCozyTheme/overrides/makeLightOverrides.js

@@ -587,6 +587,11 @@ export const makeLightOverrides = theme => ({
       }
     }
   },
+  MuiBackdrop: {
+    root: {
+      backgroundColor: alpha(theme.palette.common.black, 0.12)
+    }
+  },
   MuiDialog: {
     paper: {
       width: '100%',

package/skills/cozy-ui-reference/references/components.md

@@ -1280,6 +1280,15 @@ This component is used to render markdown content. To see more about the Markdow
 import Markdown from 'cozy-ui/transpiled/react/Markdown'
 ```
 
+**Example:**
+
+```jsx
+import { getPlainTextFromMarkdown } from 'cozy-ui/transpiled/react/Markdown/helpers'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+<Typography noWrap>{getPlainTextFromMarkdown(answer)}</Typography>
+```
+
 
 ### MidEllipsis
 

package/transpiled/react/Markdown/helpers.d.ts

@@ -0,0 +1,3 @@
+export const remarkPlugins: remarkGfm.Gfm[];
+export function getPlainTextFromMarkdown(content: string): string;
+import remarkGfm from "remark-gfm";

package/transpiled/react/Markdown/helpers.js

@@ -0,0 +1,28 @@
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import unified from 'unified';
+export var remarkPlugins = [remarkGfm];
+var markdown = unified().use(remarkParse).use(remarkPlugins); // Nodes whose children are blocks or cells: a space keeps their words apart
+
+var BLOCKS = ['root', 'blockquote', 'list', 'listItem', 'table', 'tableRow'];
+
+var getWords = function getWords(node) {
+  var _node$alt, _node$children;
+
+  if (node.type === 'image' || node.type === 'imageReference') return (_node$alt = node.alt) !== null && _node$alt !== void 0 ? _node$alt : '';
+  if (node.type === 'break') return ' ';
+  if (typeof node.value === 'string') return node.value;
+  return ((_node$children = node.children) !== null && _node$children !== void 0 ? _node$children : []).map(getWords).join(BLOCKS.includes(node.type) ? ' ' : '');
+};
+/**
+ * Gives the words of a Markdown content on one line, without its syntax,
+ * as the Markdown component shows them: for a preview
+ *
+ * @param {string} content - Markdown content
+ * @returns {string}
+ */
+
+
+export var getPlainTextFromMarkdown = function getPlainTextFromMarkdown(content) {
+  return getWords(markdown.parse(content)).replace(/\s+/g, ' ').trim();
+};

package/transpiled/react/Markdown/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/Markdown/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { remarkPlugins } from "cozy-ui/transpiled/react/Markdown/helpers";
 import Link from "cozy-ui/transpiled/react/Link";
 import Typography from "cozy-ui/transpiled/react/Typography";
 
@@ -44,7 +44,7 @@ var components = _objectSpread({
 var Markdown = function Markdown(_ref4) {
   var content = _ref4.content;
   return /*#__PURE__*/React.createElement(ReactMarkdown, {
-    remarkPlugins: [remarkGfm],
+    remarkPlugins: remarkPlugins,
     components: components
   }, content);
 };

package/transpiled/react/MemberList/EmptyMembers.d.ts

@@ -0,0 +1,2 @@
+export default EmptyMembers;
+declare function EmptyMembers(): JSX.Element;

package/transpiled/react/MemberList/EmptyMembers.js

@@ -0,0 +1,42 @@
+import { Icon, Team } from '@linagora/twake-icons';
+import cx from 'classnames';
+import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+import { locales } from "cozy-ui/transpiled/react/MemberList/locales";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
+    }
+  };
+});
+
+var EmptyMembers = function EmptyMembers() {
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-flex-column u-flex-items-center u-pv-2 u-ph-1 u-bdrs-6', isMobile ? 'u-mh-1' : 'u-mh-2', classes.root)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: Team,
+    size: 48,
+    color: "var(--primaryColorLight)"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    className: "u-mt-half"
+  }, t('MemberList.empty.title')), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, t('MemberList.empty.subtitle')));
+};
+
+export default EmptyMembers;

package/transpiled/react/MemberList/MemberList.spec.d.ts

@@ -0,0 +1 @@
+export {};