feat: Update cozy-ui 138

jestHelpers/setup.js

@@ -1,6 +1,14 @@
 import React from 'react'
+import { TransformStream } from 'stream/web'
 
 global.cozy = {}
+global.TransformStream = TransformStream
+
+jest.mock('cozy-search', () => ({
+  AssistantDesktop: () => null,
+  AssistantDialog: () => null,
+  SearchDialog: () => null
+}))
 
 jest.mock('cozy-bar', () => ({
   ...jest.requireActual('cozy-bar'),

package.json

@@ -73,27 +73,27 @@
   "dependencies": {
     "@sentry/react": "7.119.0",
     "classnames": "2.3.1",
-    "cozy-bar": "^30.0.0",
+    "cozy-bar": "^33.1.3",
     "cozy-client": "^60.23.1",
     "cozy-dataproxy-lib": "^4.13.0",
     "cozy-device-helper": "^4.0.1",
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.85.4",
     "cozy-flags": "^4.6.1",
-    "cozy-harvest-lib": "^36.0.4",
+    "cozy-harvest-lib": "^37.0.6",
     "cozy-intent": "^2.30.1",
-    "cozy-interapp": "^0.15.1",
+    "cozy-interapp": "^0.17.1",
     "cozy-keys-lib": "^7.0.0",
     "cozy-logger": "^1.17.0",
     "cozy-minilog": "3.9.1",
     "cozy-pouch-link": "^60.19.0",
     "cozy-realtime": "^5.8.0",
-    "cozy-search": "^0.14.1",
-    "cozy-sharing": "^30.1.0",
+    "cozy-search": "^0.25.3",
+    "cozy-sharing": "^30.1.1",
     "cozy-stack-client": "^60.23.0",
-    "cozy-ui": "^137.0.0",
-    "cozy-ui-plus": "^4.4.1",
-    "cozy-viewer": "^26.6.4",
+    "cozy-ui": "^138.3.0",
+    "cozy-ui-plus": "^7.0.0",
+    "cozy-viewer": "^28.0.7",
     "date-fns": "2.30.0",
     "diacritics": "1.3.0",
     "filesize": "10.1.6",

src/components/ColorPicker/ColorPicker.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import GridList from 'cozy-ui/transpiled/react/GridList'
 import GridListTile from 'cozy-ui/transpiled/react/GridListTile'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -39,9 +39,10 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
         cellHeight={isMobile ? CELL_HEIGHT_MOBILE : CELL_HEIGHT_DESKTOP}
       >
         <GridListTile className="u-ta-center">
-          <Circle
+          <Avatar
+            color="var(--papeBackgroundColor)"
+            textColor="var(--white)"
             size={isMobile ? CIRCLE_SIZE_MOBILE : CIRCLE_SIZE_DESKTOP}
-            backgroundColor="var(--papeBackgroundColor)"
             className={styles.noneIconFrame}
           >
             <IconButton onClick={() => onColorSelect()}>
@@ -51,13 +52,14 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
                 color="textSecondary"
               />
             </IconButton>
-          </Circle>
+          </Avatar>
         </GridListTile>
         {COLORS.map(color => (
           <GridListTile key={color} className="u-ta-center">
-            <Circle
+            <Avatar
+              color={color}
+              textColor="var(--white)"
               size={isMobile ? CIRCLE_SIZE_MOBILE : CIRCLE_SIZE_DESKTOP}
-              backgroundColor={color}
             >
               <IconButton onClick={() => onColorSelect(color)}>
                 {selectedColor === color && (
@@ -68,7 +70,7 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
                   />
                 )}
               </IconButton>
-            </Circle>
+            </Avatar>
           </GridListTile>
         ))}
       </GridList>

src/components/FolderPicker/FolderPickerHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
 
@@ -36,7 +36,15 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
   const subTitleToUse = subTitle ? subTitle : t('Move.to')
 
   return (
-    <Card inset style={specificCardStyle}>
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+      className="u-m-half-s u-mv-1 u-mh-2"
+      style={specificCardStyle}
+    >
       <FolderPickerHeaderIllustration entries={entries} />
       <div className="u-ellipsis">
         <Typography variant="h6" noWrap>
@@ -46,7 +54,7 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
           {subTitleToUse}
         </Typography>
       </div>
-    </Card>
+    </Box>
   )
 }
 

src/components/FolderPicker/FolderPickerHeaderIllustration.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
-import Circle from 'cozy-ui/transpiled/react/Circle'
-import Counter from 'cozy-ui/transpiled/react/Counter'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import DriveIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 
@@ -44,9 +43,9 @@ const FolderPickerHeaderIllustration: React.FC<
   }
   if (entries.length > 1) {
     return (
-      <Circle>
-        <Counter count={entries.length} />
-      </Circle>
+      <Avatar color="var(--dodgerBlue)" textColor="var(--white)">
+        <span>{entries.length > 99 ? '99+' : entries.length}</span>
+      </Avatar>
     )
   }
   return null

src/components/PushBanner/QuotaBanner.jsx

@@ -8,7 +8,7 @@ import {
 import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
-import Banner from 'cozy-ui/transpiled/react/Banner'
+import Alert from 'cozy-ui/transpiled/react/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CloudSyncIcon from 'cozy-ui/transpiled/react/Icons/CloudSync'
@@ -53,28 +53,29 @@ const QuotaBanner = () => {
 
   return (
     <div className="u-pos-relative">
-      <Banner
-        inline
+      <Alert
         icon={<Icon icon={CloudSyncIcon} />}
-        bgcolor="var(--defaultBackgroundColor)"
-        text={t('PushBanner.quota.text')}
-        buttonOne={
-          <Button
-            label={t('PushBanner.quota.actions.first')}
-            variant="text"
-            onClick={onDismiss}
-          />
-        }
-        buttonTwo={
-          canOpenPremiumLink ? (
+        color="var(--defaultBackgroundColor)"
+        action={
+          <>
             <Button
-              label={t('PushBanner.quota.actions.second')}
+              label={t('PushBanner.quota.actions.first')}
               variant="text"
-              onClick={onAction}
+              onClick={onDismiss}
             />
-          ) : null
+
+            {canOpenPremiumLink ? (
+              <Button
+                label={t('PushBanner.quota.actions.second')}
+                variant="text"
+                onClick={onAction}
+              />
+            ) : null}
+          </>
         }
-      />
+      >
+        {t('PushBanner.quota.text')}
+      </Alert>
     </div>
   )
 }

src/components/pushClient/Banner.jsx

@@ -6,7 +6,7 @@ import flow from 'lodash/flow'
 import React, { Component } from 'react'
 
 import { withClient } from 'cozy-client'
-import Banner from 'cozy-ui/transpiled/react/Banner'
+import Alert from 'cozy-ui/transpiled/react/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import DesktopDownloadIcon from 'cozy-ui/transpiled/react/Icons/DesktopDownload'
@@ -66,9 +66,8 @@ class BannerClient extends Component {
 
     return (
       <div className="u-pos-relative">
-        <Banner
-          inline
-          disableIconStyles
+        <Alert
+          square
           icon={
             <Icon
               className="u-mt-1 u-ml-1"
@@ -77,32 +76,33 @@ class BannerClient extends Component {
               size={isMobile ? 24 : 20}
             />
           }
-          text={t(text, {
+          color="var(--defaultBackgroundColor)"
+          action={
+            <>
+              <Button
+                component="a"
+                variant="text"
+                label={t('Nav.banner-btn-client')}
+                size="small"
+                onClick={() => this.markAsSeen('banner')}
+                startIcon={<Icon icon={DownloadIcon} />}
+                target="_blank"
+                rel="noopener noreferrer"
+                href={link}
+              />
+              <Button
+                variant="text"
+                label={t('SelectionBar.close')}
+                size="small"
+                onClick={() => this.markAsSeen('close')}
+              />
+            </>
+          }
+        >
+          {t(text, {
             name: 'Twake Drive'
           })}
-          bgcolor="var(--defaultBackgroundColor)"
-          buttonOne={
-            <Button
-              component="a"
-              variant="text"
-              label={t('Nav.banner-btn-client')}
-              size="small"
-              onClick={() => this.markAsSeen('banner')}
-              startIcon={<Icon icon={DownloadIcon} />}
-              target="_blank"
-              href={link}
-            />
-          }
-          buttonTwo={
-            <Button
-              variant="text"
-              label={t('SelectionBar.close')}
-              size="small"
-              onClick={() => this.markAsSeen('close')}
-            />
-          }
-          noDivider
-        />
+        </Alert>
       </div>
     )
   }

src/modules/filelist/File.jsx

@@ -6,7 +6,7 @@ import React, { useState, useRef } from 'react'
 import { useSelector } from 'react-redux'
 
 import { isDirectory } from 'cozy-client/dist/models/file'
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import { TableRow, TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
@@ -42,9 +42,17 @@ const FileWrapper = ({ children, viewType, className, onContextMenu }) =>
       {children}
     </TableRow>
   ) : (
-    <Card className={className} onContextMenu={onContextMenu}>
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+      className={className}
+      onContextMenu={onContextMenu}
+    >
       {children}
-    </Card>
+    </Box>
   )
 
 const ThumbnailWrapper = ({ children, viewType, className }) =>

src/modules/filelist/cells/SharingShortcutBadge.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { isSharingShortcutNew } from 'cozy-client/dist/models/file'
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
 import { useI18n } from 'twake-i18n'
 
@@ -20,14 +20,14 @@ const SharingShortcutBadge = ({ file }) => {
       )}
     >
       {isSharingShortcutNew(file) ? (
-        <Circle size="xsmall" backgroundColor="var(--errorColor)">
+        <Avatar color="var(--errorColor)" textColor="var(--white)" size="xs">
           <span
             style={{ fontSize: '11px', lineHeight: '1rem' }}
             aria-label={t('table.row_sharing_shortcut_aria_label')}
           >
             1
           </span>
-        </Circle>
+        </Avatar>
       ) : null}
     </TableCell>
   )