fix(deps): Upgrade few packages

Also add minor changes to improve codebase

package.json

@@ -69,6 +69,9 @@
   "devDependencies": {
     "@babel/cli": "7.11.5",
     "@babel/core": "7.16.12",
+    "@babel/helper-builder-react-jsx": "7.16.7",
+    "@babel/helper-define-map": "7.16.7",
+    "@babel/helper-regex": "7.10.5",
     "@cozy/codemods": "^1.9.0",
     "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
@@ -83,7 +86,7 @@
     "babel-loader": "8.1.0",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-json-import": "0.3.2",
-    "babel-preset-cozy-app": "^2.0.2",
+    "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.6.0",
@@ -92,7 +95,7 @@
     "cozy-device-helper": "^1.16.1",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
-    "cozy-intent": "^1.13.0",
+    "cozy-intent": "1.13.0",
     "cozy-sharing": "^3.10.0",
     "cozy-stack-client": "27.19.1",
     "css-loader": "0.28.11",
@@ -101,7 +104,7 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint-config-cozy-app": "^4.0.0",
+    "eslint-config-cozy-app": "4.0.0",
     "express": "^4.17.1",
     "focus-trap-react": "^6.0.0",
     "git-directory-deploy": "1.5.1",

react/ActionMenu/index.jsx

@@ -1,18 +1,19 @@
-import React from 'react'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import PropTypes from 'prop-types'
+import React from 'react'
 import cx from 'classnames'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import styles from './styles.styl'
-import { Media, Bd, Img } from '../Media'
+import { usePopper } from 'react-popper'
+import { useTheme } from '@material-ui/core'
+
 import BottomDrawer from '../BottomDrawer'
+import Radio from '../Radio'
+import createDepreciationLogger from '../helpers/createDepreciationLogger'
+import styles from './styles.styl'
 import useBreakpoints from '../hooks/useBreakpoints'
+import { Media, Bd, Img } from '../Media'
 import { getCssVariableValue } from '../utils/color'
-import Radio from '../Radio'
 import { spacingProp } from '../Stack'
-import { usePopper } from 'react-popper'
-import createDepreciationLogger from '../helpers/createDepreciationLogger'
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
-import { useTheme } from '@material-ui/core'
 
 const ActionMenuWrapper = ({
   inline,
@@ -110,7 +111,7 @@ const ActionMenu = ({
     {
       bottomBackground: theme.palette.background.paper,
       bottomTheme: 'dark',
-      topOverlay: getCssVariableValue('overlay'),
+      topOverlay: getCssVariableValue('overlay'), // TODO: refactor to semantic variable
       topBackground: theme.palette.background.paper,
       topTheme: 'light'
     },

react/ActionMenu/index.spec.jsx

@@ -15,7 +15,7 @@ describe('ActionMenu', () => {
 
   beforeEach(() => {
     // eslint-disable-next-line no-console
-    console.error = function (msg, arg) {
+    console.error = function(msg, arg) {
       if (
         msg.includes('An update to %s inside a test was not wrapped in act') &&
         arg == 'ActionMenuWrapper'
@@ -43,7 +43,12 @@ describe('ActionMenu', () => {
     )
     // Remove an update was not wrapped in act() warning
     await act(async () => {})
-    expect(comp.find(ActionMenuItem).parent().getElement()).toMatchSnapshot()
+    expect(
+      comp
+        .find(ActionMenuItem)
+        .parent()
+        .getElement()
+    ).toMatchSnapshot()
   })
 
   it('should support auto-closing the menu', async () => {
@@ -67,13 +72,19 @@ describe('ActionMenu', () => {
     )
 
     await act(async () => {
-      comp.find(ActionMenuItem).at(1).simulate('click')
+      comp
+        .find(ActionMenuItem)
+        .at(1)
+        .simulate('click')
     })
     expect(menuAction2).toHaveBeenCalled()
     expect(closeMenu).not.toHaveBeenCalled()
 
     act(() => {
-      comp.find(ActionMenuItem).at(0).simulate('click')
+      comp
+        .find(ActionMenuItem)
+        .at(0)
+        .simulate('click')
     })
     expect(menuAction1).toHaveBeenCalled()
     expect(closeMenu).toHaveBeenCalled()

react/Alerter/alerter.spec.js

@@ -17,7 +17,12 @@ describe('Alerter component', () => {
     it(`renders correctly an ${type} alert`, () => {
       const wrapper = shallow(<Alerter />)
       Alerter[type](`Test ${type} alert`)
-      expect(wrapper.find(Alert).dive().getElement()).toMatchSnapshot()
+      expect(
+        wrapper
+          .find(Alert)
+          .dive()
+          .getElement()
+      ).toMatchSnapshot()
     })
   })
 
@@ -34,7 +39,12 @@ describe('Alerter component', () => {
     Alerter.info(`Test alert with button`, {
       buttonText: 'BTN'
     })
-    expect(wrapper.find(Alert).dive().getElement()).toMatchSnapshot()
+    expect(
+      wrapper
+        .find(Alert)
+        .dive()
+        .getElement()
+    ).toMatchSnapshot()
   })
 
   it('handles dismiss provided to buttonAction', () => {
@@ -54,7 +64,10 @@ describe('Alerter component', () => {
     // we have to wait the same delay as in the Alerter didMount
     setTimeout(() => {
       expect(alert.state('hidden')).toBe(false)
-      alert.children().find(Button).simulate('click')
+      alert
+        .children()
+        .find(Button)
+        .simulate('click')
       expect(alert.state('hidden')).toBe(true)
     }, 20)
   })

react/AppLinker/expiringMemoize.js

@@ -1,4 +1,4 @@
-export default function (fn, duration, keyFn) {
+export default function(fn, duration, keyFn) {
   const memo = {}
   return arg => {
     const key = keyFn(arg)

react/AppLinker/index.jsx

@@ -142,7 +142,7 @@ export class AppLinker extends React.Component {
     AppLinker.onAppSwitch(onAppSwitch)
     openDeeplinkOrRedirect(
       appInfo.uri + (nativePath === '/' ? '' : nativePath),
-      function () {
+      function() {
         window.location.href = href
       }
     )

react/AppTile/index.jsx

@@ -66,8 +66,9 @@ export const AppTile = ({
       type="button"
       onClick={onClick}
       className={cx({
-        [styles['AppTile-container-maintenance']]:
-          isInMaintenanceWithSpecificDisplay
+        [styles[
+          'AppTile-container-maintenance'
+        ]]: isInMaintenanceWithSpecificDisplay
       })}
       isSecondary={statusLabel === APP_STATUS.installed}
     >

react/BottomDrawer/index.jsx

@@ -49,8 +49,8 @@ class BottomDrawer extends Component {
 
     // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
     // bottom of the page; but using the height is much easier to compute and accurate enough.
-    const maximumGestureDistance =
-      this.menuNode.current.getBoundingClientRect().height
+    const maximumGestureDistance = this.menuNode.current.getBoundingClientRect()
+      .height
     // between 0 and 1, how far down the gesture must be to be considered complete upon release
     const minimumCloseDistance = 0.6
     // a gesture faster than this will dismiss the menu, regardless of distance traveled

react/Button/index.jsx

@@ -6,7 +6,7 @@ import Icon, { iconPropType } from '../Icon'
 
 import SpinnerIcon from 'cozy-ui/transpiled/react/Icons/Spinner'
 
-const btnClass = function (options) {
+const btnClass = function(options) {
   const { className, extension, size, theme, variant, round, align } = options
   return cx(
     styles['c-btn'],

react/ContactsList/Contacts/ContactName.jsx

@@ -4,8 +4,10 @@ import { Contact } from 'cozy-doctypes'
 
 const ContactName = ({ contact }) => {
   const name = contact.name || {}
-  const { givenName: firstname = contact.fullname, familyName: lastname = '' } =
-    name
+  const {
+    givenName: firstname = contact.fullname,
+    familyName: lastname = ''
+  } = name
 
   return (
     <div>

react/DateMonthPicker/index.jsx

@@ -86,7 +86,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
   )
 }
 
-const dateMonthProp = function (props, propName, componentName) {
+const dateMonthProp = function(props, propName, componentName) {
   if (!/^[0-9]{4}-[0-9]{2}$/.test(props[propName])) {
     return new Error(
       'Invalid prop `' +

react/Dialog/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
-import { styles } from '@material-ui/core/Backdrop/Backdrop'
 import { useTheme } from '@material-ui/core'
 
 import useBreakpoints from '../hooks/useBreakpoints'
@@ -41,8 +40,8 @@ const Dialog = props => {
       : {
           bottomBackground: theme.palette.background.default,
           bottomTheme: 'light',
-          bottomOverlay: styles.root.backgroundColor,
-          topOverlay: styles.root.backgroundColor,
+          bottomOverlay: 'rgba(0, 0, 0, 0.5)',
+          topOverlay: 'rgba(0, 0, 0, 0.5)',
           topBackground: theme.palette.background.paper,
           topTheme: 'light'
         },

react/Field/index.jsx

@@ -270,7 +270,7 @@ Field.propTypes = {
   name: PropTypes.string,
   type: PropTypes.oneOf(allowedTypes),
   // value should be an object for type=select and string for others
-  value: function (props, propName, componentName) {
+  value: function(props, propName, componentName) {
     // not a required props
     if (typeof props[propName] === 'undefined') return
     if (props.type === 'select' && typeof props[propName] !== 'object') {

react/Figure/Figure.spec.jsx

@@ -30,10 +30,7 @@ describe('Figure', () => {
   ]
 
   const combinations = combine
-    .apply(
-      null,
-      coloredAttributes.map(x => [{ [x]: true }, { [x]: false }])
-    )
+    .apply(null, coloredAttributes.map(x => [{ [x]: true }, { [x]: false }]))
     .map(attrs => {
       return merge.apply(null, [{}, ...attrs])
     })

react/FilePicker/FilePickerBody.jsx

@@ -21,11 +21,10 @@ const FilePickerBody = ({
   multiple
 }) => {
   const contentFolderQuery = buildContentFolderQuery(folderId)
-  const {
-    data: contentFolder,
-    hasMore,
-    fetchMore
-  } = useQuery(contentFolderQuery.definition, contentFolderQuery.options)
+  const { data: contentFolder, hasMore, fetchMore } = useQuery(
+    contentFolderQuery.definition,
+    contentFolderQuery.options
+  )
 
   const onCheck = useCallback(
     fileId => {

react/FilePicker/FilePickerBreadcrumb.jsx

@@ -12,10 +12,9 @@ const FilePickerBreadcrumb = ({ path, onBreadcrumbClick }) => {
   const { isMobile } = useBreakpoints()
   const hasPath = path && path.length > 0
 
-  const navigateTo = useCallback(
-    folder => () => onBreadcrumbClick(folder),
-    [onBreadcrumbClick]
-  )
+  const navigateTo = useCallback(folder => () => onBreadcrumbClick(folder), [
+    onBreadcrumbClick
+  ])
 
   return (
     <Typography variant="h4" className="u-flex u-flex-items-center">

react/I18n/format.jsx

@@ -26,12 +26,13 @@ export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
   return locales[lang]
 }
 
-export const initFormat =
-  (userLang, defaultLang = DEFAULT_LANG) =>
-  (date, formatStr) => {
-    const locale = provideDateFnsLocale(userLang, defaultLang)
-    return format(date, formatStr, { locale })
-  }
+export const initFormat = (userLang, defaultLang = DEFAULT_LANG) => (
+  date,
+  formatStr
+) => {
+  const locale = provideDateFnsLocale(userLang, defaultLang)
+  return format(date, formatStr, { locale })
+}
 
 export const formatLocallyDistanceToNow = date =>
   formatDistanceToNow(date, { locale: locales[lang] })

react/I18n/index.jsx

@@ -89,9 +89,8 @@ export const translate = () => WrappedComponent => {
       />
     )
   }
-  Wrapper.displayName = `withI18n(${
-    WrappedComponent.displayName || WrappedComponent.name
-  })`
+  Wrapper.displayName = `withI18n(${WrappedComponent.displayName ||
+    WrappedComponent.name})`
   return Wrapper
 }
 

react/I18n/withLocales.jsx

@@ -35,9 +35,8 @@ const withLocales = localesOrRequire => Component => {
     ...I18n.childContextTypes
   }
 
-  Wrapped.displayName = `withLocales(${
-    Component.displayName || Component.name
-  })`
+  Wrapped.displayName = `withLocales(${Component.displayName ||
+    Component.name})`
 
   // The outer component needs to receive lang
   return translate()(Wrapped)

react/Icon/index.jsx

@@ -42,10 +42,9 @@ function Icon(props) {
     ...restProps
   } = props
 
-  const Svg = useMemo(
-    () => (isFunction(icon) ? icon : getSvgObject(icon)),
-    [icon]
-  )
+  const Svg = useMemo(() => (isFunction(icon) ? icon : getSvgObject(icon)), [
+    icon
+  ])
 
   let style = props.style
   style = Object.assign({}, style)

react/Infos/index.jsx

@@ -68,8 +68,14 @@ const InfosMigration = React.memo(function InfosMigration(props) {
     props.text ||
     props.title
   if (isUsingDeprecatedProps) {
-    const { title, text, icon, actionButton, isImportant, ...otherProps } =
-      props
+    const {
+      title,
+      text,
+      icon,
+      actionButton,
+      isImportant,
+      ...otherProps
+    } = props
     logInfosDepecrated(
       'The Infos component API has changed, using any of the following props is deprecated: title, text, icon, actionButton, isImportant'
     )

react/InfosCarrousel/index.jsx

@@ -39,7 +39,7 @@ const InfosCarrousel = ({
   const hasNextInfos = index === count - 1
 
   const onChangeIndex = useCallback(
-    function (index) {
+    function(index) {
       const { onChangeIndex: onChangeIndexProp } = swipeableProps
       if (onChangeIndexProp) {
         onChangeIndexProp(index)

react/InfosCarrousel/index.spec.jsx

@@ -37,7 +37,10 @@ const getArrowsDisabledProps = root =>
 
 const simulateSwipeToSlideIndex = (root, slideIndex) => {
   act(() => {
-    root.find(SwipeableViews).props().onChangeIndex(slideIndex)
+    root
+      .find(SwipeableViews)
+      .props()
+      .onChangeIndex(slideIndex)
   })
   root.update()
 }