cozy-ui 62.11.0 → 64.0.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# [64.0.0](https://github.com/cozy/cozy-ui/compare/v63.0.0...v64.0.0) (2022-04-26)
+
+
+### Features
+
+* Add AddContactDialog to add a contact from the contact list ([7333bf9](https://github.com/cozy/cozy-ui/commit/7333bf9))
+* Add ContactsList locales and HOC to get them ([e315f40](https://github.com/cozy/cozy-ui/commit/e315f40))
+
+
+### BREAKING CHANGES
+
+* the app must now have `POST` permission on `io.cozy.contacts` doctype to use `ContactsListModal`
+
+# [63.0.0](https://github.com/cozy/cozy-ui/compare/v62.12.0...v63.0.0) (2022-04-26)
+
+
+### Features
+
+* **Viewer:** Improve ForwardButton ([2195cb4](https://github.com/cozy/cozy-ui/commit/2195cb4))
+* Update cozy-client ([45a4a48](https://github.com/cozy/cozy-ui/commit/45a4a48))
+
+
+### BREAKING CHANGES
+
+* You need to update `cozy-client` to `>28.1.0`.
+
+# [62.12.0](https://github.com/cozy/cozy-ui/compare/v62.11.0...v62.12.0) (2022-04-26)
+
+
+### Bug Fixes
+
+* Hide bottom of screen in immersive mode ([65fcc5f](https://github.com/cozy/cozy-ui/commit/65fcc5f))
+* Revert icons to white in immersive mode ([43bc925](https://github.com/cozy/cozy-ui/commit/43bc925))
+* Upgrade cozy-intent and cozy-device-helper ([44904b4](https://github.com/cozy/cozy-ui/commit/44904b4))
+
+
+### Features
+
+* Use new caller API in components ([10742b0](https://github.com/cozy/cozy-ui/commit/10742b0))
+
 # [62.11.0](https://github.com/cozy/cozy-ui/compare/v62.10.0...v62.11.0) (2022-04-22)
 
 

package/CODEOWNERS

@@ -0,0 +1,2 @@
+# General code owners
+*       @JF-Cozy @Merkur39 @trollepierre @Ldoppea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "62.11.0",
+  "version": "64.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -43,7 +43,6 @@
     "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
     "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss",
     "prepare": "yarn release",
-    "prepush": "[[ $(git rev-parse --abbrev-ref HEAD) != 'gh-pages' ]] && yarn lint || true",
     "release": "npm-run-all --parallel sprite palette && yarn build",
     "semantic-release": "semantic-release",
     "sprite": "scripts/make-icon-sprite.sh",
@@ -91,11 +90,11 @@
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "27.19.1",
-    "cozy-device-helper": "^1.16.1",
+    "cozy-client": "28.1.0",
+    "cozy-device-helper": "1.18.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "1.13.0",
+    "cozy-intent": "1.16.1",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",
@@ -176,7 +175,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": ">=4.12",
-    "cozy-client": ">=27.19.1",
+    "cozy-client": ">=28.1.0",
     "cozy-device-helper": "^1.16.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",

package/react/ActionMenu/index.jsx

@@ -121,7 +121,8 @@ const ActionMenu = ({
       topOverlay: 'transparent',
       topBackground: theme.palette.background.paper,
       topTheme: 'dark'
-    }
+    },
+    'cozy-ui/ActionMenu'
   )
 
   if (placement)

package/react/BottomSheet/BottomSheet.jsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
 
+import { flagshipMetadata } from 'cozy-device-helper'
+
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
@@ -27,6 +29,15 @@ const makeStyles = ({ isTopPosition }) => ({
   },
   stack: {
     backgroundColor: 'var(--defaultBackgroundColor)'
+  },
+  flagshipImmersive: {
+    backgroundColor: 'var(--paperBackgroundColor)',
+    bottom: 0,
+    content: '',
+    height: 'var(--flagship-bottom-height)',
+    position: 'fixed',
+    width: '100%',
+    zIndex: 'var(--zIndex-modal)'
   }
 })
 
@@ -97,18 +108,11 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
         )
       : 0
 
-    // Will return 0 if the variable is not set
-    const flagshipBottomOffset = Number(
-      getComputedStyle(document.body)
-        .getPropertyValue('--flagship-bottom-height')
-        .replace('px', '')
-    )
-
     const minHeight =
       headerRef.current.offsetHeight +
       actionButtonsHeight +
       actionButtonsBottomMargin +
-      flagshipBottomOffset
+      (flagshipMetadata.navbarHeight || 0)
 
     // Used so that the bottomSheet can be opened to the top,
     // without stopping at the content height
@@ -149,43 +153,47 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
   })
 
   return (
-    <MuiBottomSheet
-      peekHeights={peekHeights}
-      defaultHeight={initPos}
-      backdrop={false}
-      fullHeight={false}
-      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
-      styles={{ root: styles.root }}
-      threshold={0}
-      // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-      springConfig={{
-        tension: defaultBottomSheetSpringConfig.tension,
-        friction: defaultBottomSheetSpringConfig.friction,
-        clamp: defaultBottomSheetSpringConfig.clamp
-      }}
-      disabledClosing={true}
-      snapPointSeekerMode="next"
-    >
-      <div ref={innerContentRef}>
-        <Paper
-          data-testid="bottomSheet-header"
-          className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-          ref={headerRef}
-          elevation={0}
-          square
-        >
-          <div style={styles.indicator} />
-        </Paper>
-        <Stack
-          style={styles.stack}
-          className="u-flex u-flex-column u-ov-hidden"
-          spacing="s"
-        >
-          {overriddenChildren}
-        </Stack>
-      </div>
-      <div style={{ height: bottomSpacerHeight }} />
-    </MuiBottomSheet>
+    <>
+      {flagshipMetadata.immersive && <span style={styles.flagshipImmersive} />}
+
+      <MuiBottomSheet
+        peekHeights={peekHeights}
+        defaultHeight={initPos}
+        backdrop={false}
+        fullHeight={false}
+        onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
+        styles={{ root: styles.root }}
+        threshold={0}
+        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+        springConfig={{
+          tension: defaultBottomSheetSpringConfig.tension,
+          friction: defaultBottomSheetSpringConfig.friction,
+          clamp: defaultBottomSheetSpringConfig.clamp
+        }}
+        disabledClosing={true}
+        snapPointSeekerMode="next"
+      >
+        <div ref={innerContentRef}>
+          <Paper
+            data-testid="bottomSheet-header"
+            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+            ref={headerRef}
+            elevation={0}
+            square
+          >
+            <div style={styles.indicator} />
+          </Paper>
+          <Stack
+            style={styles.stack}
+            className="u-flex u-flex-column u-ov-hidden"
+            spacing="s"
+          >
+            {overriddenChildren}
+          </Stack>
+        </div>
+        <div style={{ height: bottomSpacerHeight }} />
+      </MuiBottomSheet>
+    </>
   )
 }
 

package/react/ContactsListModal/AddContact/AddContactActions.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Button from '../../Buttons'
+import { withContactsListLocales } from '../withContactsListLocales'
+
+const AddContactActions = ({ t, onCancel, onSave }) => {
+  return (
+    <>
+      <Button variant="secondary" label={t('cancel')} onClick={onCancel} />
+      <Button label={t('save')} onClick={onSave} />
+    </>
+  )
+}
+
+export default withContactsListLocales(AddContactActions)

package/react/ContactsListModal/AddContact/AddContactContent.jsx

@@ -0,0 +1,52 @@
+import { Typography } from '@material-ui/core'
+import React from 'react'
+
+import { Media, Img, Bd } from '../../Media'
+import Icon from '../../Icon'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import TextField from '../../MuiCozyTheme/TextField'
+
+import { withContactsListLocales } from '../withContactsListLocales'
+import styles from './styles.styl'
+
+const AddContactContent = ({ t, setContactValues }) => {
+  const handleChange = ev => {
+    const { name, value } = ev.target
+    setContactValues(v => ({ ...v, [name]: value }))
+  }
+
+  return (
+    <>
+      <Typography variant="h5">{t('coordinates')}</Typography>
+      <Media>
+        <Img className={styles.icon}>
+          <Icon icon={PeopleIcon} />
+        </Img>
+        <Bd className="u-mr-1">
+          <TextField
+            className="u-mt-1"
+            variant="outlined"
+            fullWidth={true}
+            name="givenName"
+            label={t('givenName')}
+            onChange={handleChange}
+          />
+        </Bd>
+      </Media>
+      <Media>
+        <Bd className="u-ml-3 u-mr-1">
+          <TextField
+            className="u-mt-1"
+            variant="outlined"
+            fullWidth={true}
+            name="familyName"
+            label={t('familyName')}
+            onChange={handleChange}
+          />
+        </Bd>
+      </Media>
+    </>
+  )
+}
+
+export default withContactsListLocales(AddContactContent)

package/react/ContactsListModal/AddContact/AddContactDialog.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+
+import { useClient } from 'cozy-client'
+
+import { FixedDialog } from '../../CozyDialogs'
+import AddContactTitle from './AddContactTitle'
+import AddContactContent from './AddContactContent'
+import AddContactActions from './AddContactActions'
+import { handleSubmit } from './helpers'
+
+const AddContactDialog = ({ onListClose, onCreate, onClose }) => {
+  const [contactValues, setContactValues] = useState({})
+  const client = useClient()
+
+  return (
+    <FixedDialog
+      open={true}
+      onClose={onClose}
+      title={<AddContactTitle />}
+      content={<AddContactContent setContactValues={setContactValues} />}
+      actions={
+        <AddContactActions
+          onCancel={onClose}
+          onSave={() =>
+            handleSubmit({
+              client,
+              contactValues,
+              onCreate,
+              onListClose
+            })
+          }
+        />
+      }
+    />
+  )
+}
+
+export default AddContactDialog

package/react/ContactsListModal/AddContact/AddContactTitle.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { withContactsListLocales } from '../withContactsListLocales'
+
+const AddContactTitle = ({ t }) => {
+  return <>{t('newContact')}</>
+}
+
+export default withContactsListLocales(AddContactTitle)

package/react/ContactsListModal/AddContact/helpers.js

@@ -0,0 +1,18 @@
+export const handleSubmit = async ({
+  client,
+  contactValues,
+  onCreate,
+  onListClose
+}) => {
+  const { givenName, familyName } = contactValues
+
+  if (!givenName && !familyName) return
+
+  const { data: contact } = await client.save({
+    _type: 'io.cozy.contacts',
+    name: { familyName, givenName }
+  })
+
+  onCreate(contact)
+  onListClose()
+}

package/react/ContactsListModal/AddContact/helpers.spec.js

@@ -0,0 +1,74 @@
+import { createMockClient } from 'cozy-client'
+
+import { handleSubmit } from './helpers'
+
+const client = createMockClient({})
+client.save = jest.fn(x => ({ data: x }))
+const onCreate = jest.fn()
+const onListClose = jest.fn()
+
+describe('handleSubmit', () => {
+  it('should not create the contact if no givenName of familyName', async () => {
+    await handleSubmit({ contactValues: {}, client, onCreate, onListClose })
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(onListClose).not.toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is only the givenName', async () => {
+    await handleSubmit({
+      contactValues: { givenName: 'John' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: undefined,
+        givenName: 'John'
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is only the familyName', async () => {
+    await handleSubmit({
+      contactValues: { familyName: 'Connor' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: 'Connor',
+        givenName: undefined
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+
+  it('should create the contact if there is the givenName and familyName', async () => {
+    await handleSubmit({
+      contactValues: { givenName: 'John', familyName: 'Connor' },
+      client,
+      onCreate,
+      onListClose
+    })
+
+    expect(client.save).toHaveBeenCalled()
+    expect(onCreate).toHaveBeenCalledWith({
+      _type: 'io.cozy.contacts',
+      name: {
+        familyName: 'Connor',
+        givenName: 'John'
+      }
+    })
+    expect(onListClose).toHaveBeenCalled()
+  })
+})

package/react/ContactsListModal/AddContact/styles.styl

@@ -0,0 +1,2 @@
+.icon
+  margin 1rem 1.5rem 0 0.5rem

package/react/ContactsListModal/ContactsListContent.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { Contact } from 'cozy-doctypes'
+
+import ContactsList from '../ContactsList'
+import Spinner from '../Spinner'
+import EmptyMessage from './EmptyMessage'
+
+const mkFilter = filterStr => contacts => {
+  if (!filterStr) {
+    return contacts
+  }
+
+  const f = filterStr.toLowerCase()
+
+  // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
+  return contacts.filter(contact => {
+    const displayName = Contact.getDisplayName(contact)
+
+    if (!displayName) {
+      return false
+    }
+
+    return displayName.toLowerCase().includes(f)
+  })
+}
+
+const ContactsListContent = ({
+  filter,
+  contacts,
+  emptyMessage,
+  onItemClick,
+  dismissAction
+}) => {
+  const loading =
+    (contacts.fetchStatus === 'loading' ||
+      contacts.fetchStatus === 'pending') &&
+    !contacts.lastFetch
+
+  const filterContacts = mkFilter(filter)
+  const filteredContacts = filterContacts(contacts.data)
+
+  const handleItemClick = contact => {
+    if (!onItemClick) {
+      return
+    }
+
+    onItemClick(contact)
+    dismissAction()
+  }
+
+  if (loading) {
+    return (
+      <div className="u-mv-2">
+        <Spinner size="xxlarge" />
+      </div>
+    )
+  }
+
+  if (filteredContacts.length === 0) {
+    return <EmptyMessage>{emptyMessage}</EmptyMessage>
+  }
+
+  return (
+    <ContactsList contacts={filteredContacts} onItemClick={handleItemClick} />
+  )
+}
+
+export default ContactsListContent

package/react/ContactsListModal/DemoProvider.jsx

@@ -42,6 +42,8 @@ mockClient.plugins = {
   }
 }
 
+mockClient.save = () => ({ data: contacts[0] })
+
 const Wrapper = ({ children }) => {
   return <CozyProvider client={mockClient}>{children}</CozyProvider>
 }

package/react/ContactsListModal/MobileHeader.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import CozyTheme from '../CozyTheme'
+import Icon from '../Icon'
+import PreviousIcon from '../Icons/Previous'
+import Paper from '../Paper'
+import IconButton from '@material-ui/core/IconButton'
+import Input from '@material-ui/core/Input'
+
+const barStyle = {
+  height: 48
+}
+
+const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
+  return (
+    <CozyTheme variant="inverted">
+      <Paper
+        square
+        elevation={0}
+        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+        style={barStyle}
+      >
+        <IconButton className="u-mr-half" onClick={onDismiss}>
+          <Icon icon={PreviousIcon} />
+        </IconButton>
+        <Input
+          type="text"
+          placeholder={placeholder}
+          value={filter}
+          onChange={onChange}
+          autoFocus
+          fullWidth
+          disableUnderline
+        />
+      </Paper>
+    </CozyTheme>
+  )
+}
+
+export default MobileHeader