cozy-ui 101.2.0 → 102.1.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [102.1.0](https://github.com/cozy/cozy-ui/compare/v102.0.0...v102.1.0) (2024-01-25)
+
+
+### Features
+
+* **Action:** Print can now deal with multiple docs ([ee5695d](https://github.com/cozy/cozy-ui/commit/ee5695d))
+* Add pdf-lib package ([9b363e1](https://github.com/cozy/cozy-ui/commit/9b363e1))
+
+# [102.0.0](https://github.com/cozy/cozy-ui/compare/v101.2.0...v102.0.0) (2024-01-23)
+
+
+### Bug Fixes
+
+* **ActionsMenuItem:** Props `t`, `f`, `lang` was spread to DOM element ([3636fe3](https://github.com/cozy/cozy-ui/commit/3636fe3))
+* Func `getOnlyNeededActions` wasn't dealing with `divider` as `hr` ([ec4acf6](https://github.com/cozy/cozy-ui/commit/ec4acf6))
+
+
+### Features
+
+* **Actions:** Add `others` ([0186834](https://github.com/cozy/cozy-ui/commit/0186834))
+* **ActionsBar:** Add this new component ([d80e3cf](https://github.com/cozy/cozy-ui/commit/d80e3cf))
+* **ActionsItems:** Add `component` prop that manages the display ([db16d71](https://github.com/cozy/cozy-ui/commit/db16d71))
+* **ActionsItems:** Add `webviewIntent` in actions ([a64595b](https://github.com/cozy/cozy-ui/commit/a64595b))
+* **ActionsItems:** Spread the action to the displayed component ([a0a9aa4](https://github.com/cozy/cozy-ui/commit/a0a9aa4))
+* **ActionsMenu:** Replace `doc` prop by `docs` ([1049809](https://github.com/cozy/cozy-ui/commit/1049809))
+* **ActionsMenu:** Use own locales and add `getActionsI18n()` ([351595e](https://github.com/cozy/cozy-ui/commit/351595e))
+* **I18n:** Add `getI18n()` that work like `useI18n` but without React ([4b65a35](https://github.com/cozy/cozy-ui/commit/4b65a35))
+* **Icon:** Prop `icon` no longer required + can use Icon comp ([3bd5b9b](https://github.com/cozy/cozy-ui/commit/3bd5b9b))
+* **SelectionBar:** Deprecates the component ([6e72491](https://github.com/cozy/cozy-ui/commit/6e72491))
+
+
+### BREAKING CHANGES
+
+* **ActionsMenu:** When using ActionsMenu, we no longer imply we deal with one single document, but several documents. Who can do more can do less. Beside, `disabled` on actions is no longer a boolean but a function. So:
+- on `<ActionsMenu />` replace `doc` prop by `docs` and provide an array instead of object
+- on actions, `disabled` must be a func instead of a boolean
+
 # [101.2.0](https://github.com/cozy/cozy-ui/compare/v101.1.1...v101.2.0) (2024-01-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "101.2.0",
+  "version": "102.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -171,6 +171,7 @@
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
+    "pdf-lib": "1.17.1",
     "piwik-react-router": "0.12.1",
     "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",

package/react/ActionsBar/Readme.md

@@ -0,0 +1,54 @@
+Use same actions as `<ActionsMenu />`
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
+import { makeActions, modify, emailTo, print, viewInContacts, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+
+const selectedItem = {
+    _id: 1,
+    type: 'file'
+}
+
+const doc = {
+  _id: 'id01',
+  _type: 'io.cozy.contacts',
+  phone: [{ number: '0102030405' }],
+  email: [{ address: 'johndoe@cozy.cc' }],
+}
+
+initialState = { selected: isTesting() ? [doc, doc] : [] }
+
+const addSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.push(doc)
+    return { selected: arr }
+})
+
+const removeSelected = () => setState(previousState => {
+    const arr = previousState.selected
+    arr.pop()
+    return { selected: arr }
+})
+
+const actions = makeActions([ modify, viewInContacts, call, smsTo, emailTo ])
+
+;
+
+<DemoProvider>
+  <Buttons label="Add a selected document" className="u-mb-1-s u-mr-1" onClick={addSelected} />
+  <Buttons label="Remove a selected document" onClick={removeSelected} />
+
+  {state.selected.length > 0 && (
+    <ActionsBar
+      actions={actions}
+      docs={state.selected}
+      onClose={() => setState({selected: []})}
+    />
+  )}
+</DemoProvider>
+```

package/react/ActionsBar/ResponsiveAction.jsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react'
+
+import useBreakpoints from '../providers/Breakpoints'
+import { makeStyles } from '../styles'
+import Button from '../Buttons'
+import Typography from '../Typography'
+import Icon from '../Icon'
+
+const useDesktopStyles = makeStyles({
+  root: {
+    border: 'none !important', // to force also on disabled status
+    '&:hover': {
+      border: 'none'
+    }
+  }
+})
+
+const useMobileStyles = makeStyles({
+  root: {
+    display: 'block',
+    height: '100%',
+    flex: '1 1 0',
+    padding: 0,
+    border: 'none !important', // to force also when disabled
+    '&:hover': {
+      border: 'none'
+    }
+  },
+  label: { textTransform: 'none' },
+  startIcon: {
+    marginRight: 0,
+    marginBottom: 2
+  }
+})
+
+const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
+  const { isMobile } = useBreakpoints()
+  const useStyles = isMobile ? useMobileStyles : useDesktopStyles
+  const styles = useStyles()
+
+  return (
+    <Button
+      ref={ref}
+      classes={styles}
+      variant="secondary"
+      startIcon={<Icon icon={action.icon} />}
+      label={
+        isMobile ? (
+          <Typography
+            variant="caption"
+            color={disabled ? 'inherit' : 'textPrimary'}
+          >
+            {action.label}
+          </Typography>
+        ) : (
+          action.label
+        )
+      }
+      disabled={disabled}
+      onClick={onClick}
+    />
+  )
+})
+
+ResponsiveAction.displayName = 'ResponsiveAction'
+
+export default ResponsiveAction

package/react/ActionsBar/index.jsx

@@ -0,0 +1,190 @@
+import React, { useRef, useState, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { makeStyles } from '../styles'
+import useBreakpoints from '../providers/Breakpoints'
+import AppBar from '../AppBar'
+import Toolbar from '../Toolbar'
+import Box from '../Box'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import CrossIcon from '../Icons/Cross'
+import CrossCircleIcon from '../Icons/CrossCircle'
+import DotsIcon from '../Icons/Dots'
+import ActionsMenu from '../ActionsMenu'
+import ActionsItems from '../ActionsMenu/ActionsItems'
+import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
+import { useI18n } from '../providers/I18n'
+import { makeActions, others } from '../ActionsMenu/Actions'
+
+import ResponsiveAction from './ResponsiveAction'
+import withActionsLocales from './locales/withActionsLocales'
+
+const useStyles = makeStyles({
+  appBar: ({ isMobile }) => ({
+    height: isMobile ? '4rem' : '3rem',
+    top: isMobile ? 'auto' : 0,
+    bottom: isMobile ? 0 : undefined,
+    zIndex: 'var(--zIndex-selection)',
+    boxShadow: isMobile ? 'var(--shadow8)' : 'var(--shadow1)'
+  }),
+  toolbar: {
+    height: 'inherit'
+  },
+  selectedCount: ({ isMobile }) => ({
+    display: 'flex',
+    flexShrink: 0,
+    position: 'relative',
+    height: 'inherit',
+    minWidth: '2rem',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: '0.5rem',
+    gap: !isMobile ? '1rem' : undefined,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      right: '-0.5rem',
+      borderTop: '0.5rem solid transparent',
+      borderBottom: '0.5rem solid transparent',
+      borderLeft: '0.5rem solid var(--primaryColor)'
+    }
+  }),
+  desktopCloseButton: {
+    position: 'absolute',
+    right: 0
+  },
+  actionsContainer: {
+    display: 'flex',
+    height: '100%',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+const ActionsBar = ({
+  actions,
+  docs,
+  autoClose,
+  maxDesktopActions,
+  onClose
+}) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const anchorRef = useRef()
+  const [showMenu, setShowMenu] = useState(false)
+  const styles = useStyles({ isMobile })
+
+  const showMobileCloseButton = !!onClose && isMobile
+  const showDesktopCloseButton = !!onClose && !isMobile
+  const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions
+
+  const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [
+    actions,
+    docs
+  ])
+
+  const countActionsToDisplay =
+    cleanedActions.length > maxActionsDisplayed
+      ? maxActionsDisplayed - 1
+      : maxActionsDisplayed
+  const SLICE_INDEX = Math.max(1, countActionsToDisplay)
+  const barActions = cleanedActions.slice(0, SLICE_INDEX)
+  const menuActions = cleanedActions.slice(SLICE_INDEX)
+  const otherAction = makeActions([others])
+
+  const handleClick = () => {
+    autoClose && onClose?.()
+  }
+
+  return (
+    <AppBar className={styles.appBar} position="fixed" color="inherit">
+      <Toolbar
+        className={styles.toolbar}
+        variant={isMobile ? 'regular' : 'dense'}
+        disableGutters
+      >
+        {showDesktopCloseButton && (
+          <IconButton className={styles.desktopCloseButton} onClick={onClose}>
+            <Icon icon={CrossIcon} />
+          </IconButton>
+        )}
+        <Box
+          className={styles.selectedCount}
+          padding={showMobileCloseButton ? '0 1rem 0 0' : '0 1rem'}
+          color="primary.contrastText"
+          bgcolor="primary.main"
+        >
+          {showMobileCloseButton && (
+            <IconButton color="inherit" onClick={onClose}>
+              <Icon icon={CrossCircleIcon} />
+            </IconButton>
+          )}
+          <div>{isMobile ? docs.length : t('selected', docs.length)}</div>
+        </Box>
+        <div className={styles.actionsContainer}>
+          {/* actions displayed in the bar itself */}
+          <ActionsItems
+            docs={docs}
+            component={ResponsiveAction}
+            actions={barActions}
+            onClick={handleClick}
+          />
+
+          {/* actions displayed in ActionsMenu */}
+          {menuActions.length > 0 && (
+            <>
+              {isMobile ? (
+                <ActionsItems
+                  docs={docs}
+                  component={ResponsiveAction}
+                  actions={otherAction}
+                  onClick={() => setShowMenu(true)}
+                />
+              ) : (
+                <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              )}
+              <ActionsMenu
+                ref={anchorRef}
+                open={showMenu}
+                docs={docs}
+                actions={menuActions}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                componentsProps={{
+                  actionsItems: {
+                    onClick: handleClick
+                  }
+                }}
+                onClose={() => setShowMenu(false)}
+              />
+            </>
+          )}
+        </div>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+ActionsBar.propTypes = {
+  /**
+   * A number corresponding to the display of the maximum number of items.
+   * The other actions will be displayed in an additional menu.
+   * Only works on desktop since maximum number is forced in mobile
+   */
+  maxDesktopActions: PropTypes.number,
+  autoClose: PropTypes.bool
+}
+
+ActionsBar.defaultProps = {
+  maxDesktopActions: 5,
+  autoClose: true
+}
+
+export default withActionsLocales(ActionsBar)

package/react/ActionsBar/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "selected": "%{smart_count} item selected |||| %{smart_count} items selected"
+}

package/react/ActionsBar/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés"
+}

package/react/ActionsBar/locales/withActionsLocales.jsx

@@ -0,0 +1,11 @@
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
+
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withOnlyLocales(locales)

package/react/ActionsMenu/Actions/call.js

@@ -1,33 +1,34 @@
 import React, { forwardRef } from 'react'
 
 import TelephoneIcon from '../../Icons/Telephone'
-import withActionsLocales from './locales/withActionsLocales'
+import { getActionsI18n } from './locales/withActionsLocales'
 import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
-import { useI18n } from '../../providers/I18n'
 
 export const call = () => {
+  const { t } = getActionsI18n()
+  const icon = TelephoneIcon
+  const label = t('call')
+
   return {
     name: 'call',
-    action: doc => {
-      const phoneNumber = doc?.phone?.[0]?.number
+    icon,
+    label,
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
       !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
     },
-    Component: withActionsLocales(
-      forwardRef((props, ref) => {
-        const { t } = useI18n()
-
-        return (
-          <ActionsMenuItem {...props} ref={ref}>
-            <ListItemIcon>
-              <Icon icon={TelephoneIcon} />
-            </ListItemIcon>
-            <ListItemText primary={t('call')} />
-          </ActionsMenuItem>
-        )
-      })
-    )
+    Component: forwardRef((props, ref) => {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={icon} />
+          </ListItemIcon>
+          <ListItemText primary={label} />
+        </ActionsMenuItem>
+      )
+    })
   }
 }

package/react/ActionsMenu/Actions/emailTo.js

@@ -1,33 +1,34 @@
 import React, { forwardRef } from 'react'
 
 import EmailIcon from '../../Icons/Email'
-import withActionsLocales from './locales/withActionsLocales'
+import { getActionsI18n } from './locales/withActionsLocales'
 import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
-import { useI18n } from '../../I18n'
 
 export const emailTo = () => {
+  const { t } = getActionsI18n()
+  const icon = EmailIcon
+  const label = t('emailTo')
+
   return {
     name: 'emailTo',
-    action: doc => {
-      const emailAddress = doc?.email?.[0]?.address
+    icon,
+    label,
+    action: docs => {
+      const emailAddress = docs?.[0]?.email?.[0]?.address
       !!emailAddress && window.open(`mailto:${emailAddress}`, '_self')
     },
-    Component: withActionsLocales(
-      forwardRef((props, ref) => {
-        const { t } = useI18n()
-
-        return (
-          <ActionsMenuItem {...props} ref={ref}>
-            <ListItemIcon>
-              <Icon icon={EmailIcon} />
-            </ListItemIcon>
-            <ListItemText primary={t('emailTo')} />
-          </ActionsMenuItem>
-        )
-      })
-    )
+    Component: forwardRef((props, ref) => {
+      return (
+        <ActionsMenuItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={icon} />
+          </ListItemIcon>
+          <ListItemText primary={label} />
+        </ActionsMenuItem>
+      )
+    })
   }
 }