cozy-ui 90.0.0 → 90.2.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [90.2.0](https://github.com/cozy/cozy-ui/compare/v90.1.0...v90.2.0) (2023-07-31)
+
+
+### Bug Fixes
+
+* **Viewer:** Success alert for copied item is now with a success style ([f934e3c](https://github.com/cozy/cozy-ui/commit/f934e3c))
+
+
+### Features
+
+* Add copy-text-to-clipboard 3.2.0 package ([c79456f](https://github.com/cozy/cozy-ui/commit/c79456f))
+* Replace navigator.clipboard by copy-text-to-clipboard ([2884a37](https://github.com/cozy/cozy-ui/commit/2884a37))
+
+# [90.1.0](https://github.com/cozy/cozy-ui/compare/v90.0.0...v90.1.0) (2023-07-26)
+
+
+### Bug Fixes
+
+* **CozyTheme:** Set default variant to "normal" ([816034d](https://github.com/cozy/cozy-ui/commit/816034d))
+
+
+### Features
+
+* **ActionsMenu:** MakeActions() can now receive nullish actions ([de39ce7](https://github.com/cozy/cozy-ui/commit/de39ce7))
+
 # [90.0.0](https://github.com/cozy/cozy-ui/compare/v89.1.0...v90.0.0) (2023-07-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "90.0.0",
+  "version": "90.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -134,7 +134,7 @@
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",
     "react-redux": "7.2.7",
-    "react-styleguidist": "9.1.16",
+    "react-styleguidist": "10.6.2",
     "react-test-renderer": "16.12.0",
     "redux": "3.7.2",
     "redux-mock-store": "^1.5.4",
@@ -161,6 +161,7 @@
     "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",
     "classnames": "^2.2.5",
+    "copy-text-to-clipboard": "3.2.0",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
     "filesize": "8.0.7",

package/react/ActionsMenu/Actions/helpers.js

@@ -6,7 +6,7 @@
  * @returns {object[]} Array of actions
  */
 export const makeActions = (actions = [], options = {}) => {
-  return actions.map(action => {
+  return actions.filter(Boolean).map(action => {
     const actionMenu = action(options)
     const name = actionMenu.name || action.name
 

package/react/ActionsMenu/Actions/helpers.spec.js

@@ -7,6 +7,32 @@ describe('makeActions', () => {
     expect(actions).toStrictEqual([])
   })
 
+  it('should exclude `null` and `undefined` actions', () => {
+    const mockFuncActionWithName = jest.fn(() => ({
+      name: 'mockFuncActionWithName name'
+    }))
+
+    const actions = makeActions([
+      undefined,
+      mockFuncActionWithName,
+      null,
+      mockFuncActionWithName
+    ])
+
+    expect(actions).toStrictEqual([
+      {
+        'mockFuncActionWithName name': {
+          name: 'mockFuncActionWithName name'
+        }
+      },
+      {
+        'mockFuncActionWithName name': {
+          name: 'mockFuncActionWithName name'
+        }
+      }
+    ])
+  })
+
   it('should have object with key named with name property of the object returned by the function and value is the full object returned by the function', () => {
     const mockFuncActionWithName = jest.fn(() => ({
       name: 'mockFuncActionWithName name'

package/react/CozyTheme/index.jsx

@@ -1,11 +1,14 @@
 import React, { createContext, useContext } from 'react'
+import PropTypes from 'prop-types'
 import cx from 'classnames'
 
 import MuiCozyTheme from '../MuiCozyTheme'
 
 export const CozyThemeContext = createContext()
 
-const CozyTheme = ({ variant, children, className }) => (
+export const useCozyTheme = () => useContext(CozyThemeContext)
+
+const CozyTheme = ({ variant, className, children }) => (
   <CozyThemeContext.Provider value={variant}>
     <MuiCozyTheme variant={variant}>
       <div
@@ -19,6 +22,14 @@ const CozyTheme = ({ variant, children, className }) => (
   </CozyThemeContext.Provider>
 )
 
-export const useCozyTheme = () => useContext(CozyThemeContext)
+CozyTheme.propTypes = {
+  variant: PropTypes.oneOf(['normal', 'inverted']),
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
+CozyTheme.defaultProps = {
+  variant: 'normal'
+}
 
 export default CozyTheme

package/react/List/Readme.md

@@ -279,116 +279,3 @@ import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
   </ListItem>
 </List>
 ```
-
-### Contextualized item
-
-```jsx
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import List from 'cozy-ui/transpiled/react/List'
-import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
-import ListItem from 'cozy-ui/transpiled/react/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-const mockClient = {
-  plugins: {
-    realtime: {
-      subscribe: () => {},
-      unsubscribe: () => {},
-      unsubscribeAll: () => {}
-    }
-  },
-  getStackClient: () => ({
-    uri: 'https://cozy.io/'
-  }),
-  getInstanceOptions: () => ({
-    subdomain: ''
-  })
-}
-
-const contacts = [
-  {
-    _id: 'id01',
-    _type: 'io.cozy.contacts',
-    displayName: 'John Doe',
-    birthday: '25/10/2022',
-    email: [{ address: 'johndoe@cozy.cc', primary: true }],
-    phone: [{ number: '0102030405', primary: true }]
-  },
-  {
-    _id: 'id02',
-    _type: 'io.cozy.contacts',
-    displayName: 'Jason Bourne',
-    birthday: '01/01/2020',
-    email: [{ address: 'jbourne@cozy.cc', primary: true }]
-  }
-]
-
-const files = [
-  {
-    _type: 'io.cozy.files',
-    name: 'File01.pdf',
-    metadata: {
-      number: 12345,
-      qualification: {
-        label: 'driver_license'
-      }
-    }
-  },
-  {
-    _type: 'io.cozy.files',
-    type: 'file',
-    name: 'Note01.cozy-note',
-    metadata: {
-      title: 'note title',
-      version: 0
-    }
-  }
-]
-
-;
-
-<DemoProvider client={mockClient}>
-  <List>
-    <ListItem button>
-      <ListItemIcon>
-        <Icon icon={FiletypeTextIcon} width="32" height="32" />
-      </ListItemIcon>
-      <ListItemText primary="I'm a standard item" />
-    </ListItem>
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={contacts[0]}
-      expandedAttributesProps={{ isExpandedAttributesActive: true, expandedAttributes: ['email', 'birthday'] }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={contacts[1]}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[0]}
-      expandedAttributesProps={{ isExpandedAttributesActive: true, expandedAttributes: ['metadata.number'] }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[1]}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItem button>
-      <ListItemIcon>
-        <Icon icon={FiletypeTextIcon} width="32" height="32" />
-      </ListItemIcon>
-      <ListItemText primary="I'm a standard item" />
-    </ListItem>
-  </List>
-</DemoProvider>
-```

package/react/ListItem/ExpandedAttributes/helpers.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get'
+import copy from 'copy-text-to-clipboard'
 
 import { formatDate } from '../../Viewer/helpers'
 
@@ -67,9 +68,8 @@ export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => {
 }
 
 export const copyToClipboard = ({ value, setAlertProps, t }) => () => {
-  if (navigator?.clipboard) {
-    navigator.clipboard.writeText(value)
-
+  const hasCopied = copy(value)
+  if (hasCopied) {
     setAlertProps({
       open: true,
       severity: 'success',

package/react/ListItem/ExpandedAttributes/helpers.spec.js

@@ -7,6 +7,8 @@ import {
 import { I18nContext } from '../../jestLib/I18n'
 import en from '../locales/en'
 
+jest.mock('copy-text-to-clipboard', () => ({ copy: jest.fn() }))
+
 const i18nContext = I18nContext({
   locale: en
 })

package/react/ListItem/Readme.md

@@ -97,3 +97,103 @@ const initialVariants = [{
   }}
 </Variants>
 ```
+
+### Contextualized items
+
+```jsx
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
+}
+
+const contacts = [
+  {
+    _id: 'id01',
+    _type: 'io.cozy.contacts',
+    displayName: 'John Doe',
+    birthday: '25/10/2022',
+    email: [{ address: 'johndoe@cozy.cc', primary: true }],
+    phone: [{ number: '0102030405', primary: true }]
+  },
+  {
+    _id: 'id02',
+    _type: 'io.cozy.contacts',
+    displayName: 'Jason Bourne',
+    birthday: '01/01/2020',
+    email: [{ address: 'jbourne@cozy.cc', primary: true }]
+  }
+]
+
+const files = [
+  {
+    _type: 'io.cozy.files',
+    name: 'File01.pdf',
+    metadata: {
+      number: 12345,
+      qualification: {
+        label: 'driver_license'
+      }
+    }
+  },
+  {
+    _type: 'io.cozy.files',
+    type: 'file',
+    name: 'Note01.cozy-note',
+    metadata: {
+      title: 'note title',
+      version: 0
+    }
+  }
+]
+
+;
+
+<DemoProvider client={mockClient}>
+  <List>
+    <ListItemByDoc
+      doc={contacts[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['email', 'birthday']
+      }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['metadata.number']
+      }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[1]}
+      onClick={() => {}}
+    />
+  </List>
+</DemoProvider>
+```

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -153,7 +153,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
   data-testid="square-app-icon"
 >
   <div
-    class=""
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-195"
@@ -268,7 +268,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
   data-testid="square-app-icon"
 >
   <div
-    class=""
+    class="CozyTheme--normal"
   >
     <span
       class="MuiBadge-root-133"

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import copy from 'copy-text-to-clipboard'
 
 import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
 
@@ -40,10 +41,10 @@ const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
   const isAppLinkLoaded = fetchStatus === 'loaded'
 
   const handleCopy = () => {
-    if (navigator?.clipboard) {
-      navigator.clipboard.writeText(value)
+    const hasCopied = copy(value)
+    if (hasCopied) {
       showViewerSnackbar(
-        'secondary',
+        'success',
         t(`Viewer.snackbar.copiedToClipboard.success`)
       )
     } else {

package/react/Viewer/Panel/getPanelBlocks.spec.jsx

@@ -4,6 +4,8 @@ jest.mock('cozy-harvest-lib/dist/components/KonnectorBlock', () => jest.fn())
 const block1Component = jest.fn()
 const block2Component = jest.fn()
 
+jest.mock('copy-text-to-clipboard', () => ({ copy: jest.fn() }))
+
 describe('getPanelBlocks', () => {
   it('should return only blocks with truthy condition', () => {
     // with two truthy component