cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/SelectionBar/SelectionBarMore.jsx

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types'
+import React, { useState, useRef } from 'react'
+
+import styles from './styles.styl'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import DotsIcon from '../Icons/Dots'
+import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu'
+import { useI18n } from '../providers/I18n'
+
+const SelectionBarMore = ({ actions, selectedCount, selected }) => {
+  const { t } = useI18n()
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+  const anchorRef = useRef(null)
+
+  const toggleMenu = () => setMenuDisplayed(!isMenuDisplayed)
+  const hideMenu = () => setMenuDisplayed(false)
+
+  return (
+    <>
+      <IconButton
+        className={styles['SelectionBar-action']}
+        label={t('SelectionBar.more')}
+        size="medium"
+        onClick={toggleMenu}
+        ref={anchorRef}
+        aria-haspopup="true"
+        aria-controls="selection-bar--more"
+      >
+        <Icon icon={DotsIcon} />
+      </IconButton>
+      {isMenuDisplayed && (
+        <ActionMenuWithClose
+          id="selection-bar--more"
+          ref={anchorRef}
+          onClose={hideMenu}
+        >
+          {actions.map((action, index) => {
+            return (
+              <ActionMenuItem
+                key={index}
+                left={<Icon icon={action.icon || action.name.toLowerCase()} />}
+                disabled={
+                  action.disabled === undefined
+                    ? selectedCount < 1 // to avoid breaking change
+                    : action.disabled(selected)
+                }
+                onClick={() => action.action(selected)}
+              >
+                {t('SelectionBar.' + action.name)}
+              </ActionMenuItem>
+            )
+          })}
+        </ActionMenuWithClose>
+      )}
+    </>
+  )
+}
+
+SelectionBarMore.propTypes = {
+  /**
+   * List of object with the property of action and a name
+   */
+  actions: PropTypes.array.isRequired,
+  /**
+   * Number of item selected
+   */
+  selectedCount: PropTypes.number.isRequired,
+  /**
+   * List of ids of the selected items
+   */
+  selected: PropTypes.array.isRequired
+}
+
+export default SelectionBarMore

package/react/SelectionBar/helpers.js

@@ -0,0 +1,22 @@
+/**
+ * Compute the maximum number of actions to display according to the breakpoint
+ * @param {number|object} maxAction an number or a set of maximum for each breakpoint
+ * @param {object} breakpoints a set of breakpoints with a boolean to know if it is active or not
+ * @returns the maximum number or undefined if there is no matching result
+ */
+export function computeMaxAction(maxAction, breakpoints) {
+  if (typeof maxAction === 'object' && maxAction !== null && breakpoints) {
+    const maxActionKeys = Object.keys(maxAction)
+    const currentMaxAction = Object.keys(breakpoints)
+      .filter(key => breakpoints[key])
+      .filter(key => maxActionKeys.includes(key))
+
+    if (currentMaxAction.length > 0) {
+      return maxAction[currentMaxAction[0]]
+    }
+  }
+
+  if (typeof maxAction === 'number') return maxAction
+
+  return undefined
+}

package/react/SelectionBar/helpers.spec.js

@@ -0,0 +1,54 @@
+import { computeMaxAction } from './helpers'
+
+describe('computeMaxAction', () => {
+  it('should return maxAction directly if it is a number', () => {
+    expect(computeMaxAction(3)).toBe(3)
+  })
+
+  it('should return isMedium maximum if the corresponding breakpoint is true', () => {
+    expect(
+      computeMaxAction(
+        {
+          isLarge: 4,
+          isMedium: 3,
+          isSmall: 2,
+          isTiny: 1
+        },
+        {
+          isLarge: false,
+          isMedium: true,
+          isSmall: true
+        }
+      )
+    ).toBe(3)
+  })
+
+  it('should return an undefined value if no breakpoint matches maximum values', () => {
+    expect(
+      computeMaxAction(
+        {
+          isLarge: 4,
+          isMedium: 3,
+          isSmall: 2,
+          isTiny: 1
+        },
+        {
+          isLarge: false,
+          isMedium: false
+        }
+      )
+    ).toBe(undefined)
+  })
+
+  it('should return undefined when there is no breakpoint', () => {
+    expect(
+      computeMaxAction({
+        isLarge: 4
+      })
+    ).toBe(undefined)
+  })
+
+  it('should return an undefined value when maxAction is null', () => {
+    expect(computeMaxAction(null)).toBe(undefined)
+  })
+})

package/react/SelectionBar/index.jsx

@@ -0,0 +1,178 @@
+import { useTheme } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+
+import { useWebviewIntent } from 'cozy-intent'
+
+import SelectionBarAction from './SelectionBarAction'
+import SelectionBarMore from './SelectionBarMore'
+import styles from './styles.styl'
+import useMaxActions from './useMaxActions'
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import CrossIcon from '../Icons/Cross'
+import useBreakpoints from '../providers/Breakpoints'
+import { useI18n } from '../providers/I18n'
+
+/*
+
+If you want use SelectionBar component, you must have `actions` parameter, like :
+
+actions = {
+  trash: {
+    action: selections => dispatch(trashFiles(selections))),
+    icon: 'trash'
+  },
+  rename: {
+    action: selections => dispatch(startRenamingAsync(selected[0])),
+    displayCondition: selections => selections.length === 1
+  }
+}
+
+*/
+
+/**
+ * @deprecated This component is depreacated, please use [ActionsBar](#/ActionsBar) instead.
+ */
+const SelectionBar = ({
+  actions,
+  selected,
+  hideSelectionBar,
+  maxAction = {
+    isHuge: 6,
+    isLarge: 5,
+    isMedium: 8,
+    isSmall: 8,
+    isTiny: 3
+  }
+}) => {
+  console.warn(
+    '<SelectionBar /> is deprecated, please use <ActionsBar /> instead'
+  )
+
+  const { t } = useI18n()
+  const webviewIntent = useWebviewIntent()
+  const theme = useTheme()
+  const breakpoints = useBreakpoints()
+
+  const selectedCount = selected.length
+
+  const actionList = Object.keys(actions)
+    .filter(actionName => {
+      const action = actions[actionName]
+      return (
+        action.displayCondition === undefined ||
+        action.displayCondition(selected)
+      )
+    })
+    .map(actionName => ({
+      name: actionName,
+      ...actions[actionName]
+    }))
+
+  const maxActionDisplayed = useMaxActions(maxAction)
+
+  // This component is always rendered but hidden with CSS if there is no selection
+  // That is why we do not use useSetFlagship API here because that hook can not accept changing values
+  useEffect(() => {
+    if (!webviewIntent || !theme) return
+
+    selectedCount === 0 &&
+      webviewIntent &&
+      webviewIntent.call('setFlagshipUI', {
+        bottomBackground: theme.palette.background.default,
+        bottomTheme: 'dark'
+      })
+
+    selectedCount > 0 &&
+      webviewIntent &&
+      webviewIntent.call('setFlagshipUI', {
+        bottomBackground: theme.palette.grey[700],
+        bottomTheme: 'light'
+      })
+
+    return () =>
+      webviewIntent &&
+      theme &&
+      webviewIntent.call(
+        'setFlagshipUI',
+        {
+          bottomBackground: theme.palette.background.default,
+          bottomTheme: 'dark'
+        },
+        'cozy-ui/SelectionBar'
+      )
+    // TODO: validate the deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCount, webviewIntent])
+
+  return (
+    <div
+      data-testid="selectionBar"
+      className={styles['SelectionBar']}
+      role="toolbar"
+    >
+      <span
+        data-testid="selectionBar-count"
+        className={styles['SelectionBar-count']}
+      >
+        {selectedCount}
+        {!breakpoints.isMobile && (
+          <span>
+            {' '}
+            {t('SelectionBar.selected_count', { smart_count: selectedCount })}
+          </span>
+        )}
+      </span>
+      <div>
+        {actionList.slice(0, maxActionDisplayed).map((action, idx) => (
+          <SelectionBarAction
+            key={idx}
+            selectedCount={selectedCount}
+            selected={selected}
+            action={action}
+          />
+        ))}
+        {actionList.length > maxActionDisplayed && (
+          <SelectionBarMore
+            actions={actionList.slice(maxActionDisplayed)}
+            selectedCount={selectedCount}
+            selected={selected}
+          />
+        )}
+      </div>
+      <IconButton
+        data-testid="selectionBar-action-close"
+        className={styles['SelectionBar-action']}
+        label={t('SelectionBar.close')}
+        size="medium"
+        onClick={hideSelectionBar}
+      >
+        <Icon icon={CrossIcon} />
+      </IconButton>
+    </div>
+  )
+}
+
+SelectionBar.propTypes = {
+  /**
+   * An object with actions
+   */
+  actions: PropTypes.object.isRequired,
+  /**
+   * List of ids of the selected items
+   */
+  selected: PropTypes.array.isRequired,
+  /**
+   * function to close SelectionBar.
+   */
+  hideSelectionBar: PropTypes.func.isRequired,
+  /**
+   * A number corresponding to the display of the maximum number of items.
+   * The other actions will be displayed in an additional menu.
+   * With an object, they can be detailed according to the breakpoints
+   */
+  maxAction: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
+}
+
+export default SelectionBar

package/react/SelectionBar/styles.styl

@@ -0,0 +1,6 @@
+@require '../../stylus/tools/mixins'
+@require '../../stylus/components/button'
+@require '../../stylus/components/selectionbar'
+
+.SelectionBar
+  @extend $selectionbar

package/react/SelectionBar/useMaxActions.jsx

@@ -0,0 +1,36 @@
+import throttle from 'lodash/throttle'
+import { useState } from 'react'
+
+import { computeMaxAction } from './helpers'
+import breakpointDefs, { getBreakpointsStatus } from '../helpers/breakpoints'
+import useEventListener from '../hooks/useEventListener'
+
+const huge = 1400
+const large = 1200
+
+const breakpoints = {
+  isHuge: [large + 1, huge],
+  ...breakpointDefs
+}
+
+const getCurrentMaxAction = maxAction =>
+  computeMaxAction(maxAction, getBreakpointsStatus(breakpoints))
+
+/**
+ * Compute the maximum number of actions to display according to the breakpoint
+ * @param {number|object} maxAction an number or a set of maximum for each breakpoint
+ * @returns the maximum number or undefined if there is no matching result
+ */
+const useMaxActions = maxAction => {
+  const [currentMax, setCurrentMax] = useState(getCurrentMaxAction(maxAction))
+
+  const handleResize = throttle(() => {
+    setCurrentMax(getCurrentMaxAction(maxAction))
+  }, 100)
+
+  useEventListener(window, 'resize', handleResize)
+
+  return currentMax
+}
+
+export default useMaxActions

package/react/ShortcutTile/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { IOCozyFile } from 'cozy-client/types/types'
+
+import styles from '../AppTile/styles.styl'
+import { nameToColor } from '../legacy/Avatar/helpers'
+import { TileIcon } from '../Tile'
+import Typography from '../Typography'
+import { makeStyles } from '../styles'
+
+interface ShortcutTileProps {
+  file: Partial<IOCozyFile> & {
+    name: string
+    attributes?: { metadata?: { icon?: string; iconMimeType?: string } }
+  }
+}
+
+const useStyles = makeStyles({
+  letter: {
+    color: 'white',
+    margin: 'auto'
+  },
+  letterWrapper: {
+    backgroundColor: ({ name }: { name: string }) =>
+      (nameToColor as (name: string) => string)(name)
+  }
+})
+
+export const ShortcutTile = ({ file }: ShortcutTileProps): JSX.Element => {
+  const classes = useStyles({ name: file.name })
+  const icon = file.attributes?.metadata?.icon
+  const iconMimeType = file.attributes?.metadata?.iconMimeType
+
+  if (icon) {
+    return (
+      <TileIcon>
+        <img
+          className={styles['AppTile-icon']}
+          src={
+            iconMimeType
+              ? `data:${iconMimeType};base64,${icon}`
+              : `data:image/svg+xml;base64,${window.btoa(icon)}`
+          }
+          width={48}
+          height={48}
+          alt={file.name}
+        />
+      </TileIcon>
+    )
+  }
+
+  return (
+    <TileIcon>
+      <div className={classes.letterWrapper}>
+        <Typography className={classes.letter} variant="h2" align="center">
+          {file.name[0].toUpperCase()}
+        </Typography>
+      </div>
+    </TileIcon>
+  )
+}

package/react/Sidebar/Readme.md

@@ -0,0 +1,65 @@
+On desktop shows a vertical menu on the left. On mobile, shows a horizontal bottom nav.
+
+⚠️ `NavLink` must be imported normally from `react-router-dom` and used as follows.
+
+⚠️ You must use `genNavLinkForV6` instead of `genNavLink` for `react-router-dom` version 6.
+
+```jsx static
+import { NavLink as RouterLink } from 'react-router'
+import { genNavLink } from 'cozy-ui/transpiled/react/Nav'
+
+const NavLink = genNavLink(RouterLink)
+```
+
+In action :
+
+```jsx
+import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
+import Nav, { NavItem, NavIcon, NavText, genNavLink } from 'cozy-ui/transpiled/react/Nav'
+import WarnIcon from 'cozy-ui/transpiled/react/Icons/Warn'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
+// <-- only usefull for the documentation,
+// should be `const NavLink = genNavLink(RouterLink)`
+import cx from 'classnames'
+
+const NavLink = genNavLink(
+  ({ children, className, active, activeClassName }) => (
+    <a className={cx(className, active ? activeClassName : null)}>{children}</a>
+  )
+)
+
+const demoStyle = { position: "initial" }
+// -->
+
+;
+
+<Sidebar id='sidebar' style={demoStyle}>
+  <Nav>
+    <NavItem id='nav-item'>
+      <NavLink to="/warn" active>
+        <NavIcon icon={WarnIcon} />
+        <NavText>Warn</NavText>
+      </NavLink>
+    </NavItem>
+    <NavItem>
+      <NavLink to="/check">
+        <NavIcon icon={CheckIcon} />
+        <NavText>Check</NavText>
+      </NavLink>
+    </NavItem>
+    <NavItem secondary>
+      <NavLink to="/secondary">
+        <NavText>Secondary link</NavText>
+      </NavLink>
+    </NavItem>
+    <NavItem>
+      <NavLink to="/download">
+        <NavIcon icon={DownloadIcon} />
+        <NavText>Download</NavText>
+      </NavLink>
+    </NavItem>
+  </Nav>
+</Sidebar>
+```

package/react/Sidebar/index.jsx

@@ -0,0 +1,41 @@
+import { useTheme } from '@material-ui/core'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './styles.styl'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useCozyTheme } from '../providers/CozyTheme'
+
+const Sidebar = ({ children, className, ...restProps }) => {
+  const theme = useTheme()
+  const { isLight } = useCozyTheme()
+
+  useSetFlagshipUI(
+    {
+      bottomBackground: theme.palette.background.default,
+      bottomTheme: isLight ? 'dark' : 'light'
+    },
+    {
+      bottomBackground: theme.palette.background.paper
+    },
+    'cozy-ui/Sidebar'
+  )
+
+  return (
+    <aside
+      id="sidebar"
+      className={cx(styles['o-sidebar'], className)}
+      {...restProps}
+    >
+      {children}
+    </aside>
+  )
+}
+
+Sidebar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+}
+
+export default Sidebar

package/react/Sidebar/styles.styl

@@ -0,0 +1,4 @@
+@require 'objects/sidebar'
+
+.o-sidebar
+    @extend $sidebar

package/react/Skeleton/index.js

@@ -0,0 +1,3 @@
+import Skeleton from '@material-ui/lab/Skeleton'
+
+export default Skeleton

package/react/Skeletons/ListItemSkeleton.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Divider from '../Divider'
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Skeleton from '../Skeleton'
+
+const ListItemSkeleton = ({ hasSecondary, divider, gutters }) => {
+  return (
+    <>
+      <ListItem gutters={gutters}>
+        <ListItemIcon>
+          <Skeleton
+            className="u-bdrs-4"
+            variant="rect"
+            width={32}
+            height={32}
+          />
+        </ListItemIcon>
+        <ListItemText
+          primary={<Skeleton width="75%" height={13} />}
+          secondary={
+            hasSecondary ? <Skeleton width="37%" height={13} /> : undefined
+          }
+        />
+      </ListItem>
+      {divider && <Divider />}
+    </>
+  )
+}
+
+ListItemSkeleton.propTypes = {
+  /** Show secondary line or not */
+  hasSecondary: PropTypes.bool,
+  /** Show divider after the ListItem */
+  divider: PropTypes.bool,
+  gutters: PropTypes.string
+}
+
+export default ListItemSkeleton

package/react/Skeletons/ListSkeleton.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import ListItemSkeleton from './ListItemSkeleton'
+import List from '../List'
+import ListSubheader from '../ListSubheader'
+
+const ListSkeleton = ({ count, hasSecondary, withSubheader, divider }) => {
+  return (
+    <List
+      subheader={
+        withSubheader ? <ListSubheader>&nbsp;</ListSubheader> : undefined
+      }
+    >
+      {[...Array(count).keys()].map((_, idx) => (
+        <ListItemSkeleton
+          key={idx}
+          hasSecondary={hasSecondary}
+          divider={divider}
+        />
+      ))}
+    </List>
+  )
+}
+
+ListSkeleton.propTypes = {
+  /** Show secondary line or not */
+  hasSecondary: PropTypes.bool,
+  /** Number of element to show */
+  count: PropTypes.number,
+  /** Show divider between ListItems */
+  divider: PropTypes.bool
+}
+
+ListSkeleton.defaultProps = {
+  count: 1
+}
+
+export default ListSkeleton

package/react/Skeletons/Readme.md

@@ -0,0 +1,50 @@
+### List
+
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import ListSkeleton from 'cozy-ui/transpiled/react/Skeletons/ListSkeleton'
+
+const initialVariants = [{ hasSecondary: false, withSubheader: false, divider: false }]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <ListSkeleton
+      count={5}
+      hasSecondary={variant.hasSecondary}
+      withSubheader={variant.withSubheader}
+      divider={variant.divider}
+    />
+  )}
+</Variants>
+```
+
+### ListItem
+
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import ListItemSkeleton from 'cozy-ui/transpiled/react/Skeletons/ListItemSkeleton'
+
+const initialVariants = [{
+  hasSecondary: false,
+  divider: false,
+  disabledGutters: false,
+  doubleGutters: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => {
+    const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
+
+    return (
+    <ListItemSkeleton
+      hasSecondary={variant.hasSecondary}
+      divider={variant.divider}
+      gutters={gutters}
+    />
+  )}}
+</Variants>
+```

package/react/Skeletons/index.js

@@ -0,0 +1,2 @@
+export { default as ListItemSkeleton } from './ListItemSkeleton'
+export { default as ListSkeleton } from './ListSkeleton'

package/react/Slide/index.js

@@ -0,0 +1,3 @@
+import MuiSlide from '@material-ui/core/Slide'
+
+export default MuiSlide