cozy-ui 111.5.0 → 111.7.0

package/react/deprecated/IntentModal/IntentModal.jsx

@@ -1,12 +1,11 @@
-import React, { Component } from 'react'
-import styles from './styles.styl'
-import PropTypes from 'prop-types'
-
 import once from 'lodash/once'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
+import styles from './styles.styl'
 import IntentIframe from '../../IntentIframe'
-import Modal from '../Modal'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+import Modal from '../Modal'
 
 const logIntentModalDepecrated = createDepreciationLogger()
 

package/react/deprecated/IntentOpener/IntentOpener.jsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import React, { useState } from 'react'
 
-import IntentModal from '../IntentModal'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+import IntentModal from '../IntentModal'
 
 const logIntentOpenerDepecrated = createDepreciationLogger()
 

package/react/deprecated/Media/Media.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 /**
  * Useful to align image/icon and content.

package/react/deprecated/Menus/index.js

@@ -2,13 +2,13 @@
 // Since the MuiMenu component doesn't allow another Popover positioning,
 // we have to recompose the Menu component ourselves with basic Mui component
 
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Grow from '@material-ui/core/Grow'
-import Popper from '@material-ui/core/Popper'
-import Paper from '@material-ui/core/Paper'
 import MenuList from '@material-ui/core/MenuList'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import { withStyles } from '../../styles'
 import MenuButton from '../Button'

package/react/deprecated/Modal/ModalBackButton.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import cx from 'classnames'
-import Button from '../Button'
+import React from 'react'
+
 import styles from './styles.styl'
 import PreviousIcon from '../../Icons/Previous'
-
 import useBreakpoints from '../../providers/Breakpoints'
+import Button from '../Button'
 
 const DumbModalBackButton = props => {
   const { isMobile } = useBreakpoints()

package/react/deprecated/Modal/ModalButtons.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 import Button from '../Button'
 
 const ModalButtons = ({

package/react/deprecated/Modal/ModalContent.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
 import cx from 'classnames'
-import styles from './styles.styl'
+import React, { Component } from 'react'
+
 import AnimatedContentHeader from './AnimatedContentHeader'
+import styles from './styles.styl'
 
 function _getChildrenToRender(children) {
   return React.Children.map(children, child =>

package/react/deprecated/Modal/ModalCross.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import CrossIcon from '../../Icons/Cross'
-import useBreakpoints from '../../providers/Breakpoints'
 import palette from '../../palette'
-
-import styles from './styles.styl'
+import useBreakpoints from '../../providers/Breakpoints'
 
 export const ModalCrossIcon = props => {
   const { isMobile } = useBreakpoints()

package/react/deprecated/Modal/ModalEffects.ts

@@ -6,8 +6,8 @@ import { Theme, useTheme } from '@material-ui/core'
 
 import { isFlagshipApp } from 'cozy-device-helper'
 
-import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { getFlagshipMetadata } from '../../hooks/useSetFlagshipUi/helpers'
+import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import { useCozyTheme } from '../../providers/CozyTheme'
 
 const getTopBackground = (theme: Theme, cozyBar: Element | null): string =>
@@ -35,10 +35,10 @@ const useHook = (): void => {
   useSetFlagshipUI(
     {
       bottomBackground: theme.palette.background.paper,
-      // @ts-ignore
+      // @ts-expect-error
       bottomTheme: isLight ? 'dark' : 'light',
       topBackground: theme.palette.background.paper,
-      // @ts-ignore
+      // @ts-expect-error
       topTheme: isLight ? 'dark' : 'light'
     },
     {

package/react/deprecated/Modal/ModalFooter.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalFooter = ({ children, className }) => (
   <div className={cx(styles['c-modal-footer'], className)}>{children}</div>

package/react/deprecated/Modal/ModalHeader.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalHeader = ({
   title,

package/react/deprecated/Modal/ModalSection.jsx

@@ -1,6 +1,7 @@
+import cx from 'classnames'
 import React from 'react'
+
 import styles from './styles.styl'
-import cx from 'classnames'
 
 const ModalSection = ({ children, className }) => (
   <div

package/react/deprecated/Modal/index.jsx

@@ -1,21 +1,22 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
-import Overlay from '../Overlay'
-import migrateProps from '../../helpers/migrateProps'
-import Portal from '../../Portal'
 import uniqueId from 'lodash/uniqueId'
-import styles from './styles.styl'
-import ModalContent from './ModalContent'
-import ModalSection from './ModalSection'
-import { ModalHeader, ModalBrandedHeader } from './ModalHeader'
-import ModalCross from './ModalCross'
-import ModalFooter from './ModalFooter'
-import ModalButtons from './ModalButtons'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
 import AnimatedContentHeader from './AnimatedContentHeader'
 import ModalBackButton from './ModalBackButton'
+import ModalButtons from './ModalButtons'
+import ModalContent from './ModalContent'
+import ModalCross from './ModalCross'
 import { ModalEffects } from './ModalEffects'
+import ModalFooter from './ModalFooter'
+import { ModalHeader, ModalBrandedHeader } from './ModalHeader'
+import ModalSection from './ModalSection'
+import styles from './styles.styl'
+import Portal from '../../Portal'
+import migrateProps from '../../helpers/migrateProps'
 import { useCozyTheme } from '../../providers/CozyTheme'
+import Overlay from '../Overlay'
 
 const ModalDescription = ModalContent
 

package/react/deprecated/Modal/index.spec.jsx

@@ -1,6 +1,7 @@
+import { mount } from 'enzyme'
 import React, { useState } from 'react'
 import { act } from 'react-dom/test-utils'
-import { mount } from 'enzyme'
+
 import Modal, { BODY_CLASS } from '.'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
 
@@ -21,11 +22,7 @@ describe('Modal', () => {
   }
 
   const clickNthButton = (root, n) =>
-    root
-      .find('button')
-      .at(n)
-      .props()
-      .onClick()
+    root.find('button').at(n).props().onClick()
 
   const mountFirstModal = root => clickNthButton(root, 0)
   const mountSecondModal = root => clickNthButton(root, 1)

package/react/deprecated/NarrowContent/index.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import cx from 'classnames'
+import React from 'react'
+
 import styles from './styles.styl'
 
 const NarrowContent = props => {

package/react/deprecated/Overlay/index.jsx

@@ -1,10 +1,11 @@
-import React, { Component } from 'react'
-import styles from './styles.styl'
 import cx from 'classnames'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 
+import styles from './styles.styl'
+
 const ESC_KEYCODE = 27
 
 const nonDOMProps = ['onEscape', 'children', 'className', 'innerRef']

package/react/deprecated/PercentageBar/index.jsx

@@ -1,7 +1,8 @@
+import cx from 'classnames'
 import React from 'react'
-import PercentageLine from '../PercentageLine'
+
 import styles from './styles.styl'
-import cx from 'classnames'
+import PercentageLine from '../PercentageLine'
 
 const PercentageBar = props => {
   const { value, color, className, ...rest } = props

package/react/deprecated/PercentageLine/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import cx from 'classnames'
-import styles from './PercentageLine.styl'
 import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './PercentageLine.styl'
 
 /**
  * @deprecated Use [Progress](#/Progress)

package/react/deprecated/PushClientButton/index.jsx

@@ -1,12 +1,11 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
 import DeviceLaptopIcon from '../../Icons/DeviceLaptop'
 
-import styles from './styles.styl'
-
 const ButtonClient = props => {
   const { label, href, onClick, className, icon } = props
 

package/react/deprecated/PushClientButton/index.spec.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
 import { render } from '@testing-library/react'
+import React from 'react'
 
 import PushClientButton from '.'
 

package/react/deprecated/QuotaAlert/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 import { QuotaPaywall } from '../../Paywall'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
 const logDeprecatedComponent = createDepreciationLogger()
 

package/react/deprecated/Radio/index.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import { useRadioGroup } from '@material-ui/core/RadioGroup'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import styles from './styles.styl'
-import { useRadioGroup } from '@material-ui/core/RadioGroup'
+import React from 'react'
 
+import styles from './styles.styl'
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
 const logRadioDepecrated = createDepreciationLogger()

package/react/deprecated/Radio/index.spec.jsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react'
-
 import { render, fireEvent } from '@testing-library/react'
+import React, { useState } from 'react'
 
 import Radio from '.'
-import RadioGroup from '../../RadioGroup'
 import FormControlLabel from '../../FormControlLabel'
+import RadioGroup from '../../RadioGroup'
 
 const RadioGroupComponent = ({ radioOnChange, radioName }) => {
   const [radioValue, setRadioValue] = useState('item1')
@@ -76,7 +75,7 @@ xdescribe('Radio', () => {
   })
 
   it(`should handle a 'name' prop`, async () => {
-    const { container } = render(<Radio name={'hello'} />)
+    const { container } = render(<Radio name="hello" />)
 
     const input = container.querySelector('input[type=radio]')
 

package/react/deprecated/RaisedList/index.js

@@ -1,6 +1,6 @@
-import React from 'react'
 import List from '@material-ui/core/List'
 import Paper from '@material-ui/core/Paper'
+import React from 'react'
 
 import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 

package/react/deprecated/Table/index.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import styles from './styles.styl'
 

package/react/deprecated/ViewStack/ModalStack.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import Modal from '../Modal'
+
 import { ViewStackContext } from './context'
 import { useStack } from './hooks'
+import Modal from '../Modal'
 
 /**
  * Wraps children so that they can push views that will appear as modals.

package/react/deprecated/ViewStack/ViewStack.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import SwipeableViews from 'react-swipeable-views'
-import { useStack } from './hooks'
+
 import { ViewStackContext } from './context'
+import { useStack } from './hooks'
 
 // This is guessed, I could not see how to interface properly with
 // react-swipeable-views's onTransitionEnd

package/react/deprecated/ViewStack/example.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { useViewStack } from '.'
 import Button from '../Button'
 

package/react/deprecated/ViewStack/index.spec.jsx

@@ -1,10 +1,11 @@
 import { mount } from 'enzyme'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
-import { Slide } from './example'
+import SwipeableViews from 'react-swipeable-views'
+
 import ViewStack from '.'
+import { Slide } from './example'
 import Button from '../Button'
-import SwipeableViews from 'react-swipeable-views'
 
 const findButtonWithLabel = (root, label) =>
   root.findWhere(n => n.type() == Button && n.props().label === label)
@@ -15,7 +16,7 @@ describe('ViewStack', () => {
 
     // Ignore act's warning, since act does not support async logic and we have
     // a sleep when popping to wait for the animation
-    jest.spyOn(console, 'error').mockImplementation(function(message) {
+    jest.spyOn(console, 'error').mockImplementation(function (message) {
       if (
         !message.includes(
           'An update to %s inside a test was not wrapped in act'
@@ -38,9 +39,7 @@ describe('ViewStack', () => {
     )
     expect(root.find(Slide).props().number).toBe(1)
     act(() => {
-      findButtonWithLabel(root, 'stack')
-        .props()
-        .onClick()
+      findButtonWithLabel(root, 'stack').props().onClick()
     })
     root.update()
 
@@ -50,9 +49,7 @@ describe('ViewStack', () => {
 
     let prom
     act(() => {
-      prom = findButtonWithLabel(root, 'pop')
-        .props()
-        .onClick()
+      prom = findButtonWithLabel(root, 'pop').props().onClick()
     })
     root.update()
     const swiperProps2 = root.find(SwipeableViews).props()

package/react/examples.spec.jsx

@@ -1,6 +1,7 @@
-import testFromStyleguidist from '../test/testFromStyleguidist'
 import path from 'path'
 
+import testFromStyleguidist from '../test/testFromStyleguidist'
+
 // Popper does not work well inside of jest as it heavily relies on DOM APIs (see https://github.com/popperjs/popper-core/issues/478).
 jest.mock('@material-ui/core/Popper', () => {
   return ({ children }) => children

package/react/helpers/appDataset.spec.js

@@ -1,4 +1,5 @@
 import memoize from 'lodash/memoize'
+
 import {
   readCozyDataFromDOM,
   readApplicationDataset,

package/react/helpers/tracker.jsx

@@ -1,6 +1,7 @@
 /* global __PIWIK_TRACKER_URL__ __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__ */
 /* global Piwik */
 import memoize from 'lodash/memoize'
+
 import { readCozyDataFromDOM } from './appDataset'
 
 // Think of these functions as a singleton class with only static methods.

package/react/helpers/tracker.spec.js

@@ -1,5 +1,5 @@
-import * as trackerFile from './tracker'
 import { resetCache } from './appDataset'
+import * as trackerFile from './tracker'
 
 window.__PIWIK_DIMENSION_ID_APP__ = 1234
 

package/react/helpers/withBreakpoints.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
 import throttle from 'lodash/throttle'
 import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 
 import breakpoints, { getBreakpointsStatus } from './breakpoints'
 
@@ -25,40 +25,44 @@ import breakpoints, { getBreakpointsStatus } from './breakpoints'
  *
  *
  */
-const withBreakpoints = (bp = breakpoints) => Wrapped => {
-  class Aware extends Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        breakpoints: getBreakpointsStatus(bp)
+const withBreakpoints =
+  (bp = breakpoints) =>
+  Wrapped => {
+    class Aware extends Component {
+      constructor(props) {
+        super(props)
+        this.state = {
+          breakpoints: getBreakpointsStatus(bp)
+        }
+        this.checkBreakpoints = throttle(
+          () => {
+            this.setState({ breakpoints: getBreakpointsStatus(bp) })
+          },
+          100,
+          { trailing: true }
+        )
       }
-      this.checkBreakpoints = throttle(
-        () => {
-          this.setState({ breakpoints: getBreakpointsStatus(bp) })
-        },
-        100,
-        { trailing: true }
-      )
-    }
 
-    componentDidMount() {
-      window.addEventListener('resize', this.checkBreakpoints)
-    }
+      componentDidMount() {
+        window.addEventListener('resize', this.checkBreakpoints)
+      }
 
-    componentWillUnmount() {
-      window.removeEventListener('resize', this.checkBreakpoints)
-    }
+      componentWillUnmount() {
+        window.removeEventListener('resize', this.checkBreakpoints)
+      }
 
-    render() {
-      const props = this.props
-      const { breakpoints } = this.state
-      return <Wrapped {...props} breakpoints={breakpoints} />
+      render() {
+        const props = this.props
+        const { breakpoints } = this.state
+        return <Wrapped {...props} breakpoints={breakpoints} />
+      }
     }
-  }
 
-  Aware.displayName = `withBreakpoints(${Wrapped.displayName || Wrapped.name})`
-  return Aware
-}
+    Aware.displayName = `withBreakpoints(${
+      Wrapped.displayName || Wrapped.name
+    })`
+    return Aware
+  }
 
 /**
  * PropTypes to use into the component Proptypes definition

package/react/hooks/useBrowserOffline.js

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react'
+
 import useEventListener from './useEventListener'
 
 /**
@@ -17,12 +18,14 @@ export default function useBrowserOffline() {
 
   const [isOffline, setOfflineSince] = useState(isOfflineNow)
 
-  const setNavigatorOffline = useCallback(() => setOfflineSince(new Date()), [
-    setOfflineSince
-  ])
-  const setNavigatorOnline = useCallback(() => setOfflineSince(false), [
-    setOfflineSince
-  ])
+  const setNavigatorOffline = useCallback(
+    () => setOfflineSince(new Date()),
+    [setOfflineSince]
+  )
+  const setNavigatorOnline = useCallback(
+    () => setOfflineSince(false),
+    [setOfflineSince]
+  )
 
   useEventListener(window, 'online', setNavigatorOnline)
   useEventListener(window, 'offline', setNavigatorOffline)

package/react/hooks/useBrowserOffline.spec.js

@@ -1,6 +1,7 @@
-import useBrowserOffline from './useBrowserOffline'
 import { renderHook, act } from '@testing-library/react-hooks'
 
+import useBrowserOffline from './useBrowserOffline'
+
 const triggerEvent = (element, eventType) => {
   const event = new Event(eventType)
   element.dispatchEvent(event)

package/react/hooks/useConfirmExit/index.jsx

@@ -1,13 +1,12 @@
-import React, { useCallback, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-
-import useEventListener from '../useEventListener'
-import withLocales from '../../providers/I18n/withLocales'
-import { ConfirmDialog } from '../../CozyDialogs'
-import Button from '../../deprecated/Button'
+import React, { useCallback, useRef, useState } from 'react'
 
 import en from './locales/en.json'
 import fr from './locales/fr.json'
+import { ConfirmDialog } from '../../CozyDialogs'
+import Button from '../../deprecated/Button'
+import withLocales from '../../providers/I18n/withLocales'
+import useEventListener from '../useEventListener'
 
 /**
  * Confirmation modal

package/react/hooks/useConfirmExit/index.spec.js

@@ -1,7 +1,8 @@
-import useConfirmExit from '.'
 import { renderHook, act } from '@testing-library/react-hooks'
 import { isElement } from 'react-dom/test-utils'
 
+import useConfirmExit from '.'
+
 function triggerBeforeUnload() {
   const event = new Event('beforeunload')
   return window.dispatchEvent(event)
@@ -30,14 +31,16 @@ expect.extend({
     ) {
       return {
         pass: true,
-        message: `expected ${typeof received} should be a function where arguments ${received &&
-          received.length} should be at least ${number}`
+        message: `expected ${typeof received} should be a function where arguments ${
+          received && received.length
+        } should be at least ${number}`
       }
     } else {
       return {
         pass: true,
-        message: `expected ${typeof received} should not be a function or where arguments ${received &&
-          received.length} should be less than ${number}`
+        message: `expected ${typeof received} should not be a function or where arguments ${
+          received && received.length
+        } should be less than ${number}`
       }
     }
   }

package/react/hooks/useCycle.spec.jsx

@@ -1,4 +1,5 @@
 import { renderHook, act } from '@testing-library/react-hooks'
+
 import useCycle from './useCycle'
 
 describe('useCycle', () => {