cozy-ui 111.5.0 → 111.6.0

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', () => {

package/react/hooks/useEventListener.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+
 import { unRef } from '../helpers/ref'
 
 const useEventListener = (element, event, cb) => {

package/react/hooks/useEventListener.spec.js

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

package/react/hooks/usePeriodicRender.spec.js

@@ -1,6 +1,7 @@
-import usePeriodicRender from './usePeriodicRender'
 import { renderHook } from '@testing-library/react-hooks'
 
+import usePeriodicRender from './usePeriodicRender'
+
 async function wait(duration) {
   return new Promise(resolve => {
     window.setTimeout(() => {

package/react/hooks/useRealtime.spec.js

@@ -1,6 +1,7 @@
-import useRealtime from './useRealtime'
 import { renderHook } from '@testing-library/react-hooks'
 
+import useRealtime from './useRealtime'
+
 it('should subscribe to realtime events according to given specs', () => {
   const onCreateOrUpdate = jest.fn()
 

package/react/hooks/useScroll.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import debounce from 'lodash/debounce'
+import { useState } from 'react'
 
 import useEventListener from './useEventListener'
 import { unRef } from '../helpers/ref'

package/react/hooks/useScroll.spec.jsx

@@ -1,4 +1,5 @@
 import { renderHook, act } from '@testing-library/react-hooks'
+
 import useScroll from './useScroll'
 
 jest.mock('lodash/debounce', () => fn => fn)

package/react/hooks/useSetFlagshipUi/helpers.js

@@ -1,5 +1,4 @@
 // eslint-disable-next-line no-unused-vars
-import { FlagshipUI } from './useSetFlagshipUI'
 import { getFlagshipMetadata as getFlagshipMetadataFromDeviceHelper } from 'cozy-device-helper'
 
 /**

package/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { renderHook } from '@testing-library/react-hooks'
-import { useSetFlagshipUI } from './useSetFlagshipUI'
+
 import { useWebviewIntent } from 'cozy-intent'
 
+import { useSetFlagshipUI } from './useSetFlagshipUI'
+
 jest.mock('cozy-intent')
 
 const mockCall = jest.fn()

package/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts

@@ -1,8 +1,8 @@
-import { useEffect } from 'react'
-import pickBy from 'lodash/pickBy'
 import identity from 'lodash/identity'
 import isEmpty from 'lodash/isEmpty'
 import isObject from 'lodash/isObject'
+import pickBy from 'lodash/pickBy'
+import { useEffect } from 'react'
 
 import { useWebviewIntent } from 'cozy-intent'
 import { FlagshipUI as IntentInterface } from 'cozy-intent/dist/api/models/applications'
@@ -32,7 +32,7 @@ export const parseArg = (
 
   if (!webviewIntent) return
 
-  validUI && webviewIntent.call('setFlagshipUI', validUI, caller)
+  validUI && void webviewIntent.call('setFlagshipUI', validUI, caller)
 }
 
 export const useSetFlagshipUI = (

package/react/legacy/Breadcrumbs/index.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import IconButton from '@material-ui/core/IconButton'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import styles from './styles.styl'
 import Icon from '../../Icon'
-import Typography from '../../Typography'
 import LeftIcon from '../../Icons/Left'
-
-import styles from './styles.styl'
+import Typography from '../../Typography'
 
 const BreadcrumbSeparator = () => (
   <span className={styles.BreadcrumbSeparator}>/</span>

package/react/providers/Alert/index.jsx

@@ -1,8 +1,8 @@
 import React, { createContext, useState, useContext, useMemo } from 'react'
 
-import Snackbar from '../../Snackbar'
 import Alert from '../../Alert'
 import AlertTitle from '../../AlertTitle'
+import Snackbar from '../../Snackbar'
 
 /**
  * @typedef {import('../../Alert').AlertProps & { message: string, title: string }} ShowAlertArgs

package/react/providers/Breakpoints/index.jsx

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useEffect } from 'react'
 import throttle from 'lodash/throttle'
+import React, { createContext, useContext, useState, useEffect } from 'react'
 
 import breakpointDefs, {
   getBreakpointsStatus as _getBreakpointsStatus

package/react/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client'
 
-import { buildSettingsInstanceQuery } from './queries'
 import DumbCozyTheme from './DumbCozyTheme'
+import { buildSettingsInstanceQuery } from './queries'
 
 const CozyThemeWithQuery = props => {
   const instanceQuery = buildSettingsInstanceQuery()

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import flag from 'cozy-flags'
-import useMediaQuery from '../../hooks/useMediaQuery'
-import MuiCozyTheme from '../../MuiCozyTheme'
 
 import { CozyThemeContext } from './index'
+import MuiCozyTheme from '../../MuiCozyTheme'
+import useMediaQuery from '../../hooks/useMediaQuery'
 
 const DumbCozyTheme = ({
   variant,
@@ -45,9 +45,8 @@ const DumbCozyTheme = ({
       <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
         <div
           className={cx(className, {
-            [`CozyTheme--${selfThemeType}-${selfThemeVariant}`]: Boolean(
-              selfThemeVariant
-            ),
+            [`CozyTheme--${selfThemeType}-${selfThemeVariant}`]:
+              Boolean(selfThemeVariant),
             'u-dc': ignoreItself
           })}
         >

package/react/providers/CozyTheme/index.jsx

@@ -1,11 +1,11 @@
-import React, { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
+import React, { createContext, useContext } from 'react'
 
 import log from 'cozy-logger'
 
-import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 import CozyThemeWithQuery from './CozyThemeWithQuery'
 import DumbCozyTheme from './DumbCozyTheme'
+import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 
 export const CozyThemeContext = createContext()
 

package/react/providers/I18n/createUseI18n.jsx

@@ -1,8 +1,8 @@
-import { useMemo } from 'react'
 import Polyglot from 'node-polyglot'
+import { useMemo } from 'react'
 
-import { initFormat } from './format'
 import { useI18n, DEFAULT_LANG } from '.'
+import { initFormat } from './format'
 
 const createUseI18n = locales => () => {
   const { lang } = useI18n() || { lang: DEFAULT_LANG }

package/react/providers/I18n/format.jsx

@@ -1,5 +1,5 @@
-import format from 'date-fns/format'
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
+import format from 'date-fns/format'
 
 import { DEFAULT_LANG } from '.'
 
@@ -27,13 +27,12 @@ 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 =>
   distanceInWordsToNow(date, { locale: locales[lang] })

package/react/providers/I18n/helpers.js

@@ -1,6 +1,6 @@
-import { initTranslation } from './translation'
-import { initFormat } from './format'
 import { DEFAULT_LANG } from './'
+import { initFormat } from './format'
+import { initTranslation } from './translation'
 
 const getAppOrUiLang = defaultLang => {
   const appContainer = document.querySelector('[role=application]')

package/react/providers/I18n/index.jsx

@@ -4,11 +4,11 @@
 
 'use strict'
 
-import React, { Component, useContext } from 'react'
 import PropTypes from 'prop-types'
+import React, { Component, useContext } from 'react'
 
-import { initTranslation } from './translation'
 import { initFormat } from './format'
+import { initTranslation } from './translation'
 
 export const DEFAULT_LANG = 'en'
 

package/react/providers/I18n/index.spec.jsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import { render, fireEvent } from '@testing-library/react'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
 import I18n, { useI18n, createUseI18n } from '.'
 
 const locales = { helloworld: 'Hello World !' }

package/react/providers/I18n/translate.jsx

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

package/react/providers/I18n/withLocales.jsx

@@ -1,6 +1,7 @@
+import omit from 'lodash/omit'
 import React from 'react'
+
 import { I18n, translate } from '.'
-import omit from 'lodash/omit'
 
 /**
  *
@@ -35,8 +36,9 @@ 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)

package/react/providers/I18n/withLocales.spec.jsx

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

package/react/providers/I18n/withOnlyLocales.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+
 import { I18n, useI18n } from '.'
 
 /**
@@ -27,8 +28,9 @@ const withOnlyLocales = localesOrRequire => Component => {
     ...(Component.propTypes || {})
   }
 
-  Wrapped.displayName = `withOnlyLocales(${Component.displayName ||
-    Component.name})`
+  Wrapped.displayName = `withOnlyLocales(${
+    Component.displayName || Component.name
+  })`
 
   return Wrapped
 }

package/react/providers/Intent/index.jsx

@@ -7,8 +7,8 @@ import React, {
 } from 'react'
 
 import { useClient } from 'cozy-client'
-import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
 
 export const IntentContext = createContext()
 

package/react/utils/color.js

@@ -20,10 +20,7 @@ export const createNodeWithThemeCssVars = (type, variant) => {
 const realGetCssVariableValue = (varName, type, variant) => {
   const node = getNodeWithThemeCssVars(type, variant)
 
-  return window
-    .getComputedStyle(node)
-    .getPropertyValue(`--${varName}`)
-    .trim()
+  return window.getComputedStyle(node).getPropertyValue(`--${varName}`).trim()
 }
 
 export const getCssVariableValue = (varName, type, variant) =>

package/react/utils.jsx

@@ -1,21 +1,19 @@
 import React from 'react'
 
-const mkComponent = (Tag, extra = {}) => ({
-  children,
-  className,
-  ...props
-}) => {
-  const { className: extraClassName, ...restExtra } = extra
+const mkComponent =
+  (Tag, extra = {}) =>
+  ({ children, className, ...props }) => {
+    const { className: extraClassName, ...restExtra } = extra
 
-  return (
-    <Tag
-      {...restExtra}
-      {...props}
-      className={(className || '') + ' ' + (extraClassName || '')}
-    >
-      {children}
-    </Tag>
-  )
-}
+    return (
+      <Tag
+        {...restExtra}
+        {...props}
+        className={(className || '') + ' ' + (extraClassName || '')}
+      >
+        {children}
+      </Tag>
+    )
+  }
 
 export { mkComponent }

package/scripts/screenshots/prepares.js

@@ -33,7 +33,10 @@ const prepareFS = async options => {
  * Returns { browser, page }
  */
 const prepareBrowser = async (puppeteer, options) => {
-  const browser = await puppeteer.launch({ headless: 'new' })
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: `/usr/bin/google-chrome` // could be `/Applications/Chrome.app/Contents/MacOS/Chrome` on MacOS
+  })
   const page = await browser.newPage()
   // Put Argos in user agent
   await page.setUserAgent(