cozy-ui 67.0.2 → 68.0.0

package/CHANGELOG.md

@@ -1,3 +1,55 @@
+# [68.0.0](https://github.com/cozy/cozy-ui/compare/v67.0.4...v68.0.0) (2022-05-24)
+
+
+### Bug Fixes
+
+* Warning of proptypes ([7b2c464](https://github.com/cozy/cozy-ui/commit/7b2c464))
+
+
+### Features
+
+* Add FooterActionButtons component ([1c3efc1](https://github.com/cozy/cozy-ui/commit/1c3efc1))
+* Refactor the viewer to let the app handle the action buttons ([60084d6](https://github.com/cozy/cozy-ui/commit/60084d6))
+
+
+### BREAKING CHANGES
+
+* The management of action buttons
+should now be handled on the application side
+via the `FooterActionButtons` component.
+The `disableSharing` prop has also been removed, as it is no longer needed.
+
+Example:
+```
+<Viewer {...props}>
+   <FooterActionButtons>
+      <SharingButton />
+      <ForwardOrDownloadButton />
+   </FooterActionButtons>
+</Viewer>
+```
+You can use a codemods `transform-viewer.js` to automatically handle this breaking change.
+[See the codemods documentation](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-codemods).
+Using linter js auto-correction can be a good idea after that.
+Here a common example (don't forget to change `src` value):
+```
+jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-viewer.js src --parser babel --extensions js,jsx && yarn lint:js --fix
+```
+
+## [67.0.4](https://github.com/cozy/cozy-ui/compare/v67.0.3...v67.0.4) (2022-05-20)
+
+
+### Bug Fixes
+
+* **Buttons:** Classname when using ghost variant ([c070c0c](https://github.com/cozy/cozy-ui/commit/c070c0c))
+
+## [67.0.3](https://github.com/cozy/cozy-ui/compare/v67.0.2...v67.0.3) (2022-05-20)
+
+
+### Bug Fixes
+
+* Action buttons at the bottom of Dialog/IllustrationDialog on mobile ([b924001](https://github.com/cozy/cozy-ui/commit/b924001))
+
 ## [67.0.2](https://github.com/cozy/cozy-ui/compare/v67.0.1...v67.0.2) (2022-05-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "67.0.2",
+  "version": "68.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Buttons/index.jsx

@@ -37,12 +37,12 @@ DefaultButton.defaultProps = {
   color: 'primary'
 }
 
-const Buttons = forwardRef(({ variant, ...props }, ref) => {
+const Buttons = forwardRef(({ variant, className = '', ...props }, ref) => {
   switch (variant) {
     case 'ghost':
       return (
         <DefaultButton
-          className="ghost"
+          className={`ghost ${className}`}
           variant="outlined"
           {...props}
           ref={ref}
@@ -50,16 +50,30 @@ const Buttons = forwardRef(({ variant, ...props }, ref) => {
       )
 
     case 'secondary':
-      return <DefaultButton variant="outlined" {...props} ref={ref} />
+      return (
+        <DefaultButton
+          variant="outlined"
+          className={className}
+          {...props}
+          ref={ref}
+        />
+      )
 
     case 'text':
-      return <DefaultButton variant="text" {...props} ref={ref} />
+      return (
+        <DefaultButton
+          variant="text"
+          className={className}
+          {...props}
+          ref={ref}
+        />
+      )
 
     case 'primary':
-      return <DefaultButton {...props} ref={ref} />
+      return <DefaultButton className={className} {...props} ref={ref} />
 
     default:
-      return <DefaultButton {...props} ref={ref} />
+      return <DefaultButton className={className} {...props} ref={ref} />
   }
 })
 Buttons.displayName = 'Buttons'

package/react/CozyDialogs/ConfirmDialog.jsx

@@ -48,7 +48,13 @@ const ConfirmDialog = props => {
               <DialogTitle {...dialogTitleProps}>{title}</DialogTitle>
             </div>
           )}
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

package/react/CozyDialogs/Dialog.jsx

@@ -50,7 +50,13 @@ const Dialog = props => {
       )}
       <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

package/react/CozyDialogs/IllustrationDialog.jsx

@@ -48,7 +48,13 @@ const IllustrationDialog = props => {
               <div className="u-flex u-flex-justify-center">{title}</div>
             </DialogTitle>
           )}
-          {content}
+          <div
+            className={cx('dialogContentWrapper', {
+              withActions: Boolean(actions)
+            })}
+          >
+            {content}
+          </div>
           {actions && (
             <DialogActions
               {...dialogActionsProps}

package/react/CozyDialogs/Readme.md

@@ -46,10 +46,16 @@ import {
 
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Alerter from 'cozy-ui/transpiled/react/Alerter'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 
 import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
 
@@ -65,12 +71,12 @@ const ExampleDialogActions = () => {
   return (
     <>
       <Button
-        theme="secondary"
-        onClick={handleClose}
+        variant="secondary"
         label={'Close Modal'}
+        onClick={handleClose}
       />
       <Button
-        theme="primary"
+        variant="primary"
         label='Do something'
         onClick={() => alert('click')}
       />
@@ -82,12 +88,12 @@ const ConfirmDialogActions = () => {
   return (
     <>
       <Button
-        theme="secondary"
-        onClick={handleClose}
+        variant="secondary"
         label={'Close Modal'}
+        onClick={handleClose}
       />
       <Button
-        theme="danger"
+        color="error"
         label='Do something destructive'
         onClick={() => alert('click')}
       />
@@ -148,105 +154,122 @@ initialState = {
   modalOpened: isTesting(),
   modal: Dialog,
   size: 'medium',
-  actionsLayout: 'row',
-  title: 'short',
+  content: 'default',
+  theme: 'normal',
+}
+
+const initialVariants = [{
+  actionsLayoutColumn: false,
+  titleLong: false,
   disableTitleAutoPadding: false,
   withCloseButton: true,
   withBackButton: false,
-  content: 'default',
-  theme: 'normal',
-  align: 'middle',
+  alignTop: false,
   showActions: true,
   disableGutters: false,
   hideTitle: false
-}
+}]
 
 ;
 
-<>
-  <BreakpointsProvider>
-    <p>With close button:
-      <StateRadio value={true} name='withCloseButton' /> yes{' '}
-      <StateRadio value={false} name='withCloseButton' /> no
-    </p>
-    <p>With back button:
-      <StateRadio value={true} name='withBackButton' /> yes{' '}
-      <StateRadio value={false} name='withBackButton' /> no
-    </p>
-    <p>Disable Title auto-positionning:
-      <StateRadio value={true} name='disableTitleAutoPadding' /> yes{' '}
-      <StateRadio value={false} name='disableTitleAutoPadding' /> no
-    </p>
-    <p>Title:
-      <StateRadio value='short' name='title' /> short{' '}
-      <StateRadio value='long' name='title' /> long
-    </p>
-    <p>Hide title:
-      <StateRadio value={true} name='hideTitle' /> yes{' '}
-      <StateRadio value={false} name='hideTitle' /> no
-    </p>
-    <p>Content:
-      <StateRadio value='default' name='content' /> default{' '}
-      <StateRadio value='short' name='content' /> short{' '}
-      <StateRadio value='long' name='content' /> long
-    </p>
-    <p>Size:
-      <StateRadio value='small' name='size' /> small {' '}
-      <StateRadio value='medium' name='size' /> medium {' '}
-      <StateRadio value='large' name='size' /> large
-    </p>
-    <p>With actions:
-      <StateRadio value={true} name='showActions' /> yes
-      <StateRadio value={false} name='showActions' /> no
-    </p>
-    <p>Actions layout:
-      <StateRadio value='row' name='actionsLayout' /> row{' '}
-      <StateRadio value='column' name='actionsLayout' /> column
-    </p>
-    <p>Alignment:
-      <StateRadio value='middle' name='align' /> middle
-      <StateRadio value='top' name='align' /> top{' '}
-    </p>
-    <p>Disable gutters (inner padding):
-      <StateRadio value={true} name='disableGutters' /> yes
-      <StateRadio value={false} name='disableGutters' /> no{' '}
-    </p>
-    <DialogComponent
-      size={DialogComponent !== ConfirmDialog ? state.size : undefined}
-      open={state.modalOpened}
-      onClose={state.withCloseButton ? handleClose : undefined}
-      onBack={state.withBackButton ? handleBack : undefined}
-      disableTitleAutoPadding={state.disableTitleAutoPadding}
-      align={state.align}
-      title={state.hideTitle
-        ? undefined
-        : DialogComponent !== IllustrationDialog && state.title === "long"
-          ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
-          : dialogTitles[DialogComponent.name]
-      }
-      disableGutters={state.disableGutters}
-      content={
-        <Typography variant='body1' color='textPrimary'>
-          { state.content == 'default'
-          ? dialogContents[DialogComponent.name]
-          : state.content == 'long'
-            ? content.ada.long
-            : content.ada.short}<br/>
-          <Button className='u-mt-1 u-ml-0' label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
-        </Typography>}
-      actions={state.showActions && dialogActions[DialogComponent.name]}
-      actionsLayout={state.actionsLayout}
-    />
-  </BreakpointsProvider>
-
-  {dialogs.map(dialog => (
-    <button
-      key={`open-btn-${dialog.name}`}
-      data-testid={`open-btn-${dialog.name}`}
-      onClick={() => toggleDialog(dialog)}
-    >
-      Open {dialog.name}
-    </button>
-  ))}
-</>
+<BreakpointsProvider>
+  <Variants initialVariants={initialVariants}>
+    {variant => (
+      <>
+        <FormControl component="fieldset" fullWidth>
+          <FormLabel component="legend">Content</FormLabel>
+          <RadioGroup
+            aria-label="radio"
+            name="content"
+            row
+            value={state.content}
+            onChange={event => { setState({ content: event.target.value }) }}
+          >
+            <FormControlLabel
+              value="default"
+              label="Default"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="short"
+              label="Short"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="long"
+              label="Long"
+              control={<Radio />}
+            />
+          </RadioGroup>
+        </FormControl>
+        <FormControl component="fieldset" >
+          <FormLabel component="legend">Size</FormLabel>
+          <RadioGroup
+            aria-label="radio"
+            name="size"
+            row
+            value={state.size}
+            onChange={event => { setState({ size: event.target.value }) }}
+          >
+            <FormControlLabel
+              value="small"
+              label="Small"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="medium"
+              label="Medium"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="large"
+              label="Large"
+              control={<Radio />}
+            />
+          </RadioGroup>
+        </FormControl>
+        <div className="u-mt-1">
+          {dialogs.map(dialog => (
+            <Button
+              key={`open-btn-${dialog.name}`}
+              data-testid={`open-btn-${dialog.name}`}
+              className="u-m-half"
+              label={`Open ${dialog.name}`}
+              variant="ghost"
+              size="small"
+              onClick={() => toggleDialog(dialog)}
+            />
+          ))}
+        </div>
+
+        <DialogComponent
+          size={DialogComponent !== ConfirmDialog ? state.size : undefined}
+          open={state.modalOpened}
+          onClose={variant.withCloseButton ? handleClose : undefined}
+          onBack={variant.withBackButton ? handleBack : undefined}
+          disableTitleAutoPadding={variant.disableTitleAutoPadding}
+          align={variant.alignTop ? 'top': 'middle'}
+          title={variant.hideTitle
+            ? undefined
+            : DialogComponent !== IllustrationDialog && variant.titleLong
+              ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
+              : dialogTitles[DialogComponent.name]
+          }
+          disableGutters={variant.disableGutters}
+          content={
+            <Typography variant='body1' color='textPrimary'>
+              { state.content == 'default'
+              ? dialogContents[DialogComponent.name]
+              : state.content == 'long'
+                ? content.ada.long
+                : content.ada.short}<br/>
+              <Button className='u-mt-1 u-ml-0' label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
+            </Typography>}
+          actions={variant.showActions && dialogActions[DialogComponent.name]}
+          actionsLayout={variant.actionsLayoutColumn ? 'column' : 'row'}
+        />
+      </>
+    )}
+  </Variants>
+</BreakpointsProvider>
 ```

package/react/MuiCozyTheme/makeOverrides.js

@@ -577,7 +577,19 @@ const makeOverrides = theme => ({
         marginBottom: '24px',
         '&.withFluidActions': {
           [theme.breakpoints.down('sm')]: {
-            marginBottom: '16px'
+            marginBottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            '& .dialogContentWrapper': {
+              flexGrow: 1,
+              '&:not(.withActions)': {
+                paddingBottom: '16px'
+              }
+            },
+            '& .cozyDialogActions': {
+              paddingBottom: '16px'
+            }
           }
         },
         '& .dialogTitleFluidContainer': {

package/react/Viewer/Footer/DownloadButton.jsx

@@ -31,7 +31,7 @@ const DownloadButton = ({ file, t }) => {
 }
 
 DownloadButton.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 }
 
 export default withViewerLocales(DownloadButton)

package/react/Viewer/Footer/FooterActionButtons.jsx

@@ -0,0 +1,20 @@
+import { cloneElement } from 'react'
+import PropTypes from 'prop-types'
+
+import { mapToAllChildren } from './helpers'
+
+const FooterActionButtons = ({ children, file }) => {
+  if (!children) return null
+
+  return mapToAllChildren(children, child => cloneElement(child, { file }))
+}
+
+FooterActionButtons.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]),
+  file: PropTypes.object
+}
+
+export default FooterActionButtons

package/react/Viewer/Footer/FooterActionButtons.spec.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import FooterActionButtons from './FooterActionButtons'
+
+describe('FooterActionButtons', () => {
+  it('should not return children', () => {
+    const { container } = render(<FooterActionButtons />)
+
+    expect(container).toMatchInlineSnapshot('<div />')
+  })
+
+  it('should render all childrens', () => {
+    const { getByText } = render(
+      <FooterActionButtons>
+        <div>
+          <p>First child</p>
+          <div>
+            <p>Sub first children</p>
+          </div>
+        </div>
+        <div>Second child</div>
+      </FooterActionButtons>
+    )
+
+    expect(getByText('First child'))
+    expect(getByText('Sub first children'))
+    expect(getByText('Second child'))
+  })
+})

package/react/Viewer/Footer/FooterContent.jsx

@@ -1,22 +1,12 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, Children, cloneElement } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { getReferencedBy, useQuery, models, useClient } from 'cozy-client'
-
 import BottomSheet, { BottomSheetHeader } from '../../BottomSheet'
 
-import { buildContactByIdsQuery } from '../queries'
 import { isValidForPanel } from '../helpers'
-import Sharing from './Sharing'
-import ForwardButton from './ForwardButton'
-import DownloadButton from './DownloadButton'
 import BottomSheetContent from './BottomSheetContent'
-import { shouldBeForwardButton } from './helpers'
-
-const {
-  contact: { getDisplayName }
-} = models
+import useReferencedContactName from './useReferencedContactName'
 
 const useStyles = makeStyles(theme => ({
   footer: {
@@ -30,54 +20,49 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const FooterContent = ({ file, toolbarRef, disableSharing }) => {
+const FooterContent = ({ file, toolbarRef, children }) => {
   const styles = useStyles()
-  const client = useClient()
-  const FileActionButton = shouldBeForwardButton(client)
-    ? ForwardButton
-    : DownloadButton
+
   const toolbarProps = useMemo(() => ({ ref: toolbarRef }), [toolbarRef])
 
-  const contactIds = getReferencedBy(file, 'io.cozy.contacts').map(
-    ref => ref.id
-  )
-  const contactByIdsQuery = buildContactByIdsQuery(contactIds)
-  const { data: contactList } = useQuery(contactByIdsQuery.definition, {
-    ...contactByIdsQuery.options,
-    enabled: contactIds.length > 0
+  const { contactName, isLoadingContacts } = useReferencedContactName(file)
+
+  const FooterActionButtons = Children.toArray(children).find(child => {
+    return (
+      child.type.name === 'FooterActionButtons' ||
+      child.type.displayName === 'FooterActionButtons'
+    )
   })
 
-  const contactsFullname = Array.isArray(contactList)
-    ? contactList.map(contact => `${getDisplayName(contact)}`).join(', ')
-    : ''
+  const FooterActionButtonsWithFile = cloneElement(FooterActionButtons, {
+    file
+  })
 
-  if (
-    isValidForPanel({ file }) &&
-    (contactsFullname || contactIds.length === 0)
-  ) {
+  // We have to wait for the Contact request to finish before rendering `BottomSheet`, because it doesn't handle async well.
+  if (isValidForPanel({ file }) && !isLoadingContacts) {
     return (
       <BottomSheet toolbarProps={toolbarProps}>
         <BottomSheetHeader className="u-ph-1 u-pb-1">
-          {!disableSharing && <Sharing file={file} />}
-          <FileActionButton file={file} />
+          {FooterActionButtonsWithFile}
         </BottomSheetHeader>
-        <BottomSheetContent file={file} contactsFullname={contactsFullname} />
+        <BottomSheetContent file={file} contactsFullname={contactName} />
       </BottomSheet>
     )
   }
 
-  return (
-    <div className={styles.footer}>
-      {!disableSharing && <Sharing file={file} />}
-      <FileActionButton file={file} />
-    </div>
-  )
+  // If `FooterActionButtons` hasn't children
+  if (!FooterActionButtons) return null
+
+  return <div className={styles.footer}>{FooterActionButtonsWithFile}</div>
 }
 
 FooterContent.propTypes = {
   file: PropTypes.object.isRequired,
   toolbarRef: PropTypes.object,
-  disableSharing: PropTypes.bool
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ])
 }
 
 export default FooterContent

package/react/Viewer/Footer/ForwardOrDownloadButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useClient } from 'cozy-client'
+
+import ForwardButton from './ForwardButton'
+import DownloadButton from './DownloadButton'
+import { shouldBeForwardButton } from './helpers'
+
+const ForwardOrDownloadButton = ({ file }) => {
+  const client = useClient()
+
+  const FileActionButton = shouldBeForwardButton(client)
+    ? ForwardButton
+    : DownloadButton
+
+  return <FileActionButton file={file} />
+}
+
+ForwardOrDownloadButton.propTypes = {
+  file: PropTypes.object
+}
+
+export default ForwardOrDownloadButton

package/react/Viewer/Footer/Sharing.jsx

@@ -37,7 +37,7 @@ const Sharing = ({ file }) => {
 }
 
 Sharing.propTypes = {
-  file: PropTypes.object.isRequired
+  file: PropTypes.object
 }
 
 export default Sharing