diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index ed06c9e532..c8329eb277 100644 --- a/docs/styleguide.config.js +++ b/docs/styleguide.config.js @@ -1,4 +1,5 @@ const path = require('path') + const webpackMerge = require('webpack-merge') module.exports = { diff --git a/react/AccordionSummary/index.js b/react/AccordionSummary/index.js index 29277d53aa..32252d525a 100644 --- a/react/AccordionSummary/index.js +++ b/react/AccordionSummary/index.js @@ -1,5 +1,5 @@ -import React from 'react' import AccordionSummary from '@material-ui/core/AccordionSummary' +import React from 'react' import AccordionExpandIcon from './AccordionExpandIcon' diff --git a/react/ActionsBar/ResponsiveAction.jsx b/react/ActionsBar/ResponsiveAction.jsx index 4bcfda3fbb..9bdbe7aadd 100644 --- a/react/ActionsBar/ResponsiveAction.jsx +++ b/react/ActionsBar/ResponsiveAction.jsx @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react' -import useBreakpoints from '../providers/Breakpoints' -import { makeStyles } from '../styles' import Button from '../Buttons' -import Typography from '../Typography' import Icon from '../Icon' +import Typography from '../Typography' +import useBreakpoints from '../providers/Breakpoints' +import { makeStyles } from '../styles' const useDesktopStyles = makeStyles({ root: { diff --git a/react/ActionsBar/index.jsx b/react/ActionsBar/index.jsx index b4d01f5fce..9e7cdc68ea 100644 --- a/react/ActionsBar/index.jsx +++ b/react/ActionsBar/index.jsx @@ -1,24 +1,23 @@ -import React, { useRef, useState, useMemo } from 'react' import PropTypes from 'prop-types' +import React, { useRef, useState, useMemo } from 'react' -import { makeStyles } from '../styles' -import useBreakpoints from '../providers/Breakpoints' +import ResponsiveAction from './ResponsiveAction' +import withActionsLocales from './locales/withActionsLocales' +import ActionsMenu from '../ActionsMenu' +import { makeActions, others } from '../ActionsMenu/Actions' +import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers' +import ActionsItems from '../ActionsMenu/ActionsItems' import AppBar from '../AppBar' -import Toolbar from '../Toolbar' import Box from '../Box' import Icon from '../Icon' import IconButton from '../IconButton' import CrossIcon from '../Icons/Cross' import CrossCircleIcon from '../Icons/CrossCircle' import DotsIcon from '../Icons/Dots' -import ActionsMenu from '../ActionsMenu' -import ActionsItems from '../ActionsMenu/ActionsItems' -import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers' +import Toolbar from '../Toolbar' +import useBreakpoints from '../providers/Breakpoints' import { useI18n } from '../providers/I18n' -import { makeActions, others } from '../ActionsMenu/Actions' - -import ResponsiveAction from './ResponsiveAction' -import withActionsLocales from './locales/withActionsLocales' +import { makeStyles } from '../styles' const useStyles = makeStyles({ appBar: ({ isMobile }) => ({ @@ -81,10 +80,10 @@ const ActionsBar = ({ const showDesktopCloseButton = !!onClose && !isMobile const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions - const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [ - actions, - docs - ]) + const cleanedActions = useMemo( + () => getOnlyNeededActions(actions, docs), + [actions, docs] + ) const countActionsToDisplay = cleanedActions.length > maxActionsDisplayed diff --git a/react/ActionsBar/locales/withActionsLocales.jsx b/react/ActionsBar/locales/withActionsLocales.jsx index 741c2c71f6..67dbe68a3a 100644 --- a/react/ActionsBar/locales/withActionsLocales.jsx +++ b/react/ActionsBar/locales/withActionsLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/ActionsMenu/Actions/call.js b/react/ActionsMenu/Actions/call.js index e91b0c153a..14e40b3052 100644 --- a/react/ActionsMenu/Actions/call.js +++ b/react/ActionsMenu/Actions/call.js @@ -1,11 +1,11 @@ import React, { forwardRef } from 'react' -import TelephoneIcon from '../../Icons/Telephone' import { getActionsI18n } from './locales/withActionsLocales' -import ActionsMenuItem from '../ActionsMenuItem' -import ListItemIcon from '../../ListItemIcon' import Icon from '../../Icon' +import TelephoneIcon from '../../Icons/Telephone' +import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' +import ActionsMenuItem from '../ActionsMenuItem' export const call = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/emailTo.js b/react/ActionsMenu/Actions/emailTo.js index 6315637eba..5680dc5b1d 100644 --- a/react/ActionsMenu/Actions/emailTo.js +++ b/react/ActionsMenu/Actions/emailTo.js @@ -1,11 +1,11 @@ import React, { forwardRef } from 'react' -import EmailIcon from '../../Icons/Email' import { getActionsI18n } from './locales/withActionsLocales' -import ActionsMenuItem from '../ActionsMenuItem' -import ListItemIcon from '../../ListItemIcon' import Icon from '../../Icon' +import EmailIcon from '../../Icons/Email' +import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' +import ActionsMenuItem from '../ActionsMenuItem' export const emailTo = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/helpers.js b/react/ActionsMenu/Actions/helpers.js index 7728bf5b68..e56d03073b 100644 --- a/react/ActionsMenu/Actions/helpers.js +++ b/react/ActionsMenu/Actions/helpers.js @@ -1,4 +1,5 @@ import { PDFDocument } from 'pdf-lib' + import { fetchBlobFileById } from 'cozy-client/dist/models/file' // Should guarantee good resolution for different uses (printing, downloading, etc.) diff --git a/react/ActionsMenu/Actions/locales/withActionsLocales.jsx b/react/ActionsMenu/Actions/locales/withActionsLocales.jsx index ee2c3115d4..444ba17a45 100644 --- a/react/ActionsMenu/Actions/locales/withActionsLocales.jsx +++ b/react/ActionsMenu/Actions/locales/withActionsLocales.jsx @@ -1,8 +1,7 @@ -import { getI18n } from '../../../providers/I18n/helpers' -import withOnlyLocales from '../../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import { getI18n } from '../../../providers/I18n/helpers' +import withOnlyLocales from '../../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/ActionsMenu/Actions/modify.js b/react/ActionsMenu/Actions/modify.js index 9e033df0bf..299247bf85 100644 --- a/react/ActionsMenu/Actions/modify.js +++ b/react/ActionsMenu/Actions/modify.js @@ -2,12 +2,12 @@ import React, { forwardRef } from 'react' import { generateWebLink } from 'cozy-client' -import ListItemIcon from '../../ListItemIcon' -import ListItemText from '../../ListItemText' +import { getActionsI18n } from './locales/withActionsLocales' import Icon from '../../Icon' import PenIcon from '../../Icons/Pen' +import ListItemIcon from '../../ListItemIcon' +import ListItemText from '../../ListItemText' import ActionsMenuItem from '../ActionsMenuItem' -import { getActionsI18n } from './locales/withActionsLocales' export const modify = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/others.jsx b/react/ActionsMenu/Actions/others.jsx index 2dbc2dd033..32fa60cf2a 100644 --- a/react/ActionsMenu/Actions/others.jsx +++ b/react/ActionsMenu/Actions/others.jsx @@ -1,6 +1,5 @@ -import DotsIcon from '../../Icons/Dots' - import { getActionsI18n } from './locales/withActionsLocales' +import DotsIcon from '../../Icons/Dots' export const others = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/print.js b/react/ActionsMenu/Actions/print.js index 0fb758e12f..f48f0d1a18 100644 --- a/react/ActionsMenu/Actions/print.js +++ b/react/ActionsMenu/Actions/print.js @@ -1,15 +1,15 @@ import React, { forwardRef } from 'react' -import logger from 'cozy-logger' import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file' +import logger from 'cozy-logger' import { makeBase64FromFile, makePdfBlob } from './helpers' -import PrinterIcon from '../../Icons/Printer' import { getActionsI18n } from './locales/withActionsLocales' -import ActionsMenuItem from '../ActionsMenuItem' -import ListItemIcon from '../../ListItemIcon' import Icon from '../../Icon' +import PrinterIcon from '../../Icons/Printer' +import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' +import ActionsMenuItem from '../ActionsMenuItem' export const print = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/smsTo.js b/react/ActionsMenu/Actions/smsTo.js index c06052b100..764eabb7cc 100644 --- a/react/ActionsMenu/Actions/smsTo.js +++ b/react/ActionsMenu/Actions/smsTo.js @@ -1,11 +1,11 @@ import React, { forwardRef } from 'react' -import CommentIcon from '../../Icons/Comment' import { getActionsI18n } from './locales/withActionsLocales' -import ActionsMenuItem from '../ActionsMenuItem' -import ListItemIcon from '../../ListItemIcon' import Icon from '../../Icon' +import CommentIcon from '../../Icons/Comment' +import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' +import ActionsMenuItem from '../ActionsMenuItem' export const smsTo = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/Actions/viewInContacts.js b/react/ActionsMenu/Actions/viewInContacts.js index 98c2c6788e..f2afbc9a30 100644 --- a/react/ActionsMenu/Actions/viewInContacts.js +++ b/react/ActionsMenu/Actions/viewInContacts.js @@ -2,12 +2,12 @@ import React, { forwardRef } from 'react' import { generateWebLink } from 'cozy-client' -import OpenappIcon from '../../Icons/Openapp' import { getActionsI18n } from './locales/withActionsLocales' -import ActionsMenuItem from '../ActionsMenuItem' -import ListItemIcon from '../../ListItemIcon' import Icon from '../../Icon' +import OpenappIcon from '../../Icons/Openapp' +import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' +import ActionsMenuItem from '../ActionsMenuItem' export const viewInContacts = () => { const { t } = getActionsI18n() diff --git a/react/ActionsMenu/ActionsItems.jsx b/react/ActionsMenu/ActionsItems.jsx index f723be860b..f7350f5e23 100644 --- a/react/ActionsMenu/ActionsItems.jsx +++ b/react/ActionsMenu/ActionsItems.jsx @@ -1,11 +1,11 @@ -import React, { forwardRef, useMemo } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef, useMemo } from 'react' import { useClient } from 'cozy-client' import { useWebviewIntent } from 'cozy-intent' -import { useI18n } from '../providers/I18n' import { getActionName, getOnlyNeededActions } from './Actions/helpers' +import { useI18n } from '../providers/I18n' const ActionsItems = forwardRef( ( @@ -23,10 +23,10 @@ const ActionsItems = forwardRef( const webviewIntent = useWebviewIntent() const { t } = useI18n() - const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [ - actions, - docs - ]) + const cleanedActions = useMemo( + () => getOnlyNeededActions(actions, docs), + [actions, docs] + ) return cleanedActions.map((actionObject, idx) => { const actionName = getActionName(actionObject) diff --git a/react/ActionsMenu/ActionsMenuItem.jsx b/react/ActionsMenu/ActionsMenuItem.jsx index 69928a3a81..b965662adb 100644 --- a/react/ActionsMenu/ActionsMenuItem.jsx +++ b/react/ActionsMenu/ActionsMenuItem.jsx @@ -1,10 +1,10 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import omit from 'lodash/omit' import cx from 'classnames' +import omit from 'lodash/omit' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import MenuItem from '../MenuItem' import ListItem from '../ListItem' +import MenuItem from '../MenuItem' const cleanPropsForDOM = props => { const nonDOMProps = ['docs', 'action', 't', 'f', 'lang'] diff --git a/react/ActionsMenu/ActionsMenuMobileHeader.jsx b/react/ActionsMenu/ActionsMenuMobileHeader.jsx index 90a5b7f26c..701b46d124 100644 --- a/react/ActionsMenu/ActionsMenuMobileHeader.jsx +++ b/react/ActionsMenu/ActionsMenuMobileHeader.jsx @@ -1,5 +1,5 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import ActionsMenuItem from './ActionsMenuItem' import Divider from '../Divider' diff --git a/react/ActionsMenu/ActionsMenuWrapper.jsx b/react/ActionsMenu/ActionsMenuWrapper.jsx index 27a8eec7cb..7679065bad 100644 --- a/react/ActionsMenu/ActionsMenuWrapper.jsx +++ b/react/ActionsMenu/ActionsMenuWrapper.jsx @@ -1,12 +1,12 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import Menu from '../Menu' -import useBreakpoints from '../providers/Breakpoints' import BottomSheet from '../BottomSheet' -import isTesting from '../helpers/isTesting' +import Menu from '../Menu' import Paper from '../Paper' import { useActionMenuEffects } from '../deprecated/ActionMenu/ActionMenuEffects' +import isTesting from '../helpers/isTesting' +import useBreakpoints from '../providers/Breakpoints' const ActionsMenuWrapper = ({ children, diff --git a/react/ActionsMenu/index.jsx b/react/ActionsMenu/index.jsx index 93a00bd586..184c462b40 100644 --- a/react/ActionsMenu/index.jsx +++ b/react/ActionsMenu/index.jsx @@ -1,8 +1,8 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import ActionsMenuWrapper from './ActionsMenuWrapper' import ActionsItems from './ActionsItems' +import ActionsMenuWrapper from './ActionsMenuWrapper' const useTransformOrigin = ({ vertical, horizontal }) => { const v = diff --git a/react/Alert/index.jsx b/react/Alert/index.jsx index a32a5ca11f..c481e54304 100644 --- a/react/Alert/index.jsx +++ b/react/Alert/index.jsx @@ -1,15 +1,15 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' +import MuiAlert from '@material-ui/lab/Alert' import cx from 'classnames' import merge from 'lodash/merge' -import MuiAlert from '@material-ui/lab/Alert' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import { makeStyles } from '../styles' import Icon from '../Icon' import CheckCircleIcon from '../Icons/CheckCircle' +import InfoIcon from '../Icons/Info' import WarningIcon from '../Icons/Warning' import WarningCircleIcon from '../Icons/WarningCircle' -import InfoIcon from '../Icons/Info' +import { makeStyles } from '../styles' const DEFAULT_ICON_SIZE = 16 diff --git a/react/AppIcon/index.jsx b/react/AppIcon/index.jsx index e53c6e44cb..aa13b6efee 100644 --- a/react/AppIcon/index.jsx +++ b/react/AppIcon/index.jsx @@ -1,14 +1,13 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { Component } from 'react' + import { withClient } from 'cozy-client' -import styles from './styles.styl' +import styles from './styles.styl' import Icon, { iconPropType } from '../Icon' import CubeIcon from '../Icons/Cube' - import palette from '../palette' - import { AppDoctype } from '../proptypes' const DONE = 'done' diff --git a/react/AppIcon/test/AppIcon.spec.js b/react/AppIcon/test/AppIcon.spec.js index e96b415a81..dba8b3d3c8 100644 --- a/react/AppIcon/test/AppIcon.spec.js +++ b/react/AppIcon/test/AppIcon.spec.js @@ -1,8 +1,8 @@ 'use strict' /* eslint-env jest */ -import React from 'react' import { shallow } from 'enzyme' +import React from 'react' import { AppIcon } from '..' diff --git a/react/AppLinker/expiringMemoize.js b/react/AppLinker/expiringMemoize.js index 43cdb4f1fe..91cf50b9e2 100644 --- a/react/AppLinker/expiringMemoize.js +++ b/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) diff --git a/react/AppLinker/index.deprecated.spec.jsx b/react/AppLinker/index.deprecated.spec.jsx index 41758dbd7e..6003616663 100644 --- a/react/AppLinker/index.deprecated.spec.jsx +++ b/react/AppLinker/index.deprecated.spec.jsx @@ -6,9 +6,9 @@ * Those tests should be kept until `slug` prop is completely removed */ -import React from 'react' import { render } from '@testing-library/react' import userEvent from '@testing-library/user-event' +import React from 'react' import { isMobileApp, @@ -30,7 +30,7 @@ const setup = ({ app, onAppSwitch }) => { {({ onClick, href, name }) => (
diff --git a/react/AppLinker/index.jsx b/react/AppLinker/index.jsx index 2b1a80aa58..d63aaf9f67 100644 --- a/react/AppLinker/index.jsx +++ b/react/AppLinker/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { withClient } from 'cozy-client' import { @@ -14,13 +14,13 @@ import { import { WebviewContext } from 'cozy-intent' import logger from 'cozy-logger' +import expiringMemoize from './expiringMemoize' import { generateUniversalLink, generateWebLink, getUniversalLinkDomain } from './native' import { NATIVE_APP_INFOS } from './native.config' -import expiringMemoize from './expiringMemoize' const expirationDelay = 10 * 1000 const memoizedCheckApp = expiringMemoize( @@ -162,7 +162,7 @@ export class AppLinker extends React.Component { AppLinker.onAppSwitch(onAppSwitch) openDeeplinkOrRedirect( appInfo.uri + (nativePath === '/' ? '' : nativePath), - function() { + function () { window.location.href = href } ) diff --git a/react/AppLinker/index.spec.jsx b/react/AppLinker/index.spec.jsx index 8d888b326b..336ef3550e 100644 --- a/react/AppLinker/index.spec.jsx +++ b/react/AppLinker/index.spec.jsx @@ -1,6 +1,6 @@ -import React from 'react' import { render } from '@testing-library/react' import userEvent from '@testing-library/user-event' +import React from 'react' import { isMobileApp, @@ -19,7 +19,7 @@ const setup = ({ app, onAppSwitch }) => { return { user: userEvent.setup({ delay: null }), ...render( - + {({ onClick, href, name }) => (
diff --git a/react/AppSections/Sections.jsx b/react/AppSections/Sections.jsx index 3e30f03454..3e15fae4a3 100644 --- a/react/AppSections/Sections.jsx +++ b/react/AppSections/Sections.jsx @@ -1,23 +1,19 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { Component } from 'react' -import Typography from '../Typography' -import { translate } from '../providers/I18n' -import withBreakpoints from '../helpers/withBreakpoints' - +import styles from './Sections.styl' +import * as catUtils from './categories' import AppsSection from './components/AppsSection' import DropdownFilter from './components/DropdownFilter' - import { APP_TYPE } from './constants' -import * as searchUtils from './search' -import * as catUtils from './categories' - -import styles from './Sections.styl' - -import withLocales from '../providers/I18n/withLocales' import en from './locales/en.json' import fr from './locales/fr.json' +import * as searchUtils from './search' +import Typography from '../Typography' +import withBreakpoints from '../helpers/withBreakpoints' +import { translate } from '../providers/I18n' +import withLocales from '../providers/I18n/withLocales' const locales = { en, diff --git a/react/AppSections/categories.spec.js b/react/AppSections/categories.spec.js index 6d9bed8d93..ae7b235d78 100644 --- a/react/AppSections/categories.spec.js +++ b/react/AppSections/categories.spec.js @@ -2,12 +2,12 @@ /* eslint-env jest */ -import * as catUtils from './categories' +import mapValues from 'lodash/mapValues' +import * as catUtils from './categories' +import en from './locales/en' import { I18nContext } from '../jestLib/I18n' import mockApps from '../mocks/apps' -import en from './locales/en' -import mapValues from 'lodash/mapValues' const i18nContext = I18nContext({ locale: en diff --git a/react/AppSections/components/AppsSection.jsx b/react/AppSections/components/AppsSection.jsx index 0525369df4..5db137d4e4 100644 --- a/react/AppSections/components/AppsSection.jsx +++ b/react/AppSections/components/AppsSection.jsx @@ -1,11 +1,12 @@ -import React, { useMemo } from 'react' +import sortBy from 'lodash/sortBy' import PropTypes from 'prop-types' -import { useI18n } from '../../providers/I18n' +import React, { useMemo } from 'react' + +import styles from './AppsSection.styl' +import AppTile from '../../AppTile' import useBreakpoints from '../../providers/Breakpoints' +import { useI18n } from '../../providers/I18n' import { getTranslatedManifestProperty } from '../helpers' -import sortBy from 'lodash/sortBy' -import AppTile from '../../AppTile' -import styles from './AppsSection.styl' const makeNameGetter = t => app => getTranslatedManifestProperty(app, 'name', t) diff --git a/react/AppSections/components/AppsSection.spec.jsx b/react/AppSections/components/AppsSection.spec.jsx index 9360e7009a..32da06a17c 100644 --- a/react/AppSections/components/AppsSection.spec.jsx +++ b/react/AppSections/components/AppsSection.spec.jsx @@ -2,19 +2,18 @@ /* eslint-env jest */ -import React from 'react' import { mount } from 'enzyme' +import React from 'react' import { CozyProvider } from 'cozy-client' -import mockApps from '../../mocks/apps' -import en from '../locales/en' -import { I18nContext } from '../../jestLib/I18n' +import { AppsSection } from './AppsSection' import Tile, { TileTitle, TileSubtitle, TileFooter } from '../../Tile' +import { I18nContext } from '../../jestLib/I18n' +import mockApps from '../../mocks/apps' import { BreakpointsProvider } from '../../providers/Breakpoints' import { I18n } from '../../providers/I18n' - -import { AppsSection } from './AppsSection' +import en from '../locales/en' const i18nContext = I18nContext({ locale: en }) const tMock = i18nContext.t diff --git a/react/AppSections/components/DropdownFilter.jsx b/react/AppSections/components/DropdownFilter.jsx index 379ed98687..927d40ae99 100644 --- a/react/AppSections/components/DropdownFilter.jsx +++ b/react/AppSections/components/DropdownFilter.jsx @@ -1,13 +1,12 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import styles from './DropdownFilter.styl' import Icon from '../../Icon' import BottomIcon from '../../Icons/Bottom' import SelectBox from '../../SelectBox' -import styles from './DropdownFilter.styl' - const SmallArrow = () => ( diff --git a/react/AppTitle/index.jsx b/react/AppTitle/index.jsx index dbb3eb9ead..efdafb897c 100644 --- a/react/AppTitle/index.jsx +++ b/react/AppTitle/index.jsx @@ -1,7 +1,8 @@ -import React from 'react' -import cx from 'classnames' import Typography from '@material-ui/core/Typography' +import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' export const AppTitle = ({ children, tag, className, ...restProps }) => { diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx index 29200d23e3..aefed118af 100644 --- a/react/Avatar/index.jsx +++ b/react/Avatar/index.jsx @@ -1,13 +1,13 @@ -import React from 'react' import cx from 'classnames' -import PropTypes from 'prop-types' import assign from 'lodash/assign' +import PropTypes from 'prop-types' +import React from 'react' +import { nameToColor } from './helpers' import styles from './styles.styl' +import { createSizeStyle } from '../Circle' import Icon, { iconPropType } from '../Icon' import PeopleIcon from '../Icons/People' -import { createSizeStyle } from '../Circle' -import { nameToColor } from './helpers' const createBgColorStyle = ({ text, textId }) => text ? { backgroundColor: `${nameToColor(textId || text)}` } : {} diff --git a/react/Backdrop/index.js b/react/Backdrop/index.js index 4fd06207b0..96379dabe1 100644 --- a/react/Backdrop/index.js +++ b/react/Backdrop/index.js @@ -1,7 +1,7 @@ -import React from 'react' -import PropTypes from 'prop-types' import MuiBackdrop from '@material-ui/core/Backdrop' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' import { makeStyles } from '../styles' diff --git a/react/Badge/index.jsx b/react/Badge/index.jsx index 30677fa805..5bfa658bcd 100644 --- a/react/Badge/index.jsx +++ b/react/Badge/index.jsx @@ -1,7 +1,7 @@ -import React from 'react' +import MuiBadge from '@material-ui/core/Badge' import cx from 'classnames' import PropTypes from 'prop-types' -import MuiBadge from '@material-ui/core/Badge' +import React from 'react' const Badge = ({ classes = {}, diff --git a/react/Banner/index.jsx b/react/Banner/index.jsx index 68172f293c..44be04e00a 100644 --- a/react/Banner/index.jsx +++ b/react/Banner/index.jsx @@ -1,14 +1,13 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' -import Paper from '../Paper' -import Grid from '../Grid' +import styles from './styles.styl' import Divider from '../Divider' +import Grid from '../Grid' +import Paper from '../Paper' import Typography from '../Typography' -import styles from './styles.styl' - /** * A banner displays a prominent message and related optional actions. */ diff --git a/react/Banner/index.spec.jsx b/react/Banner/index.spec.jsx index 9e7cd97b12..2a847d745e 100644 --- a/react/Banner/index.spec.jsx +++ b/react/Banner/index.spec.jsx @@ -1,5 +1,6 @@ -import React from 'react' import { render } from '@testing-library/react' +import React from 'react' + import Banner from '.' describe('Grid', () => { diff --git a/react/BarButton/index.jsx b/react/BarButton/index.jsx index 4a0fda75b0..08c740fcdc 100644 --- a/react/BarButton/index.jsx +++ b/react/BarButton/index.jsx @@ -1,9 +1,8 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { PureComponent } from 'react' import styles from './styles.styl' - import Icon from '../Icon' class MaybeLink extends PureComponent { diff --git a/react/BarContextProvider/index.jsx b/react/BarContextProvider/index.jsx index 975f5db859..92291d660a 100644 --- a/react/BarContextProvider/index.jsx +++ b/react/BarContextProvider/index.jsx @@ -1,11 +1,12 @@ import React from 'react' -import { I18nContext } from '../providers/I18n' -import { BreakpointsProvider } from '../providers/Breakpoints' +import { Provider } from 'react-redux' import { CozyProvider } from 'cozy-client' -import { Provider } from 'react-redux' import { WebviewIntentProvider } from 'cozy-intent' +import { BreakpointsProvider } from '../providers/Breakpoints' +import { I18nContext } from '../providers/I18n' + const BarContextProvider = ({ children, store, diff --git a/react/BarContextProvider/index.spec.jsx b/react/BarContextProvider/index.spec.jsx index 4025a351a7..b53fff9b73 100644 --- a/react/BarContextProvider/index.spec.jsx +++ b/react/BarContextProvider/index.spec.jsx @@ -1,14 +1,14 @@ +import { render } from '@testing-library/react' import React from 'react' import { Provider, useStore } from 'react-redux' import configureStore from 'redux-mock-store' -import { render } from '@testing-library/react' -import { useWebviewIntent } from 'cozy-intent' import CozyClient, { createMockClient, CozyProvider, useClient } from 'cozy-client' +import { useWebviewIntent } from 'cozy-intent' import BarContextProvider from '.' import I18n, { useI18n, translate } from '../providers/I18n' diff --git a/react/BarTitle/index.jsx b/react/BarTitle/index.jsx index 231dddfc9d..bc1a6acfeb 100644 --- a/react/BarTitle/index.jsx +++ b/react/BarTitle/index.jsx @@ -1,9 +1,8 @@ -import React from 'react' import PropTypes from 'prop-types' - -import Typography from '../Typography' +import React from 'react' import styles from './styles.styl' +import Typography from '../Typography' const BarTitle = ({ noWrap, children }) => { return ( diff --git a/react/BottomSheet/BottomSheet.jsx b/react/BottomSheet/BottomSheet.jsx index 6865fa5566..ec99a60f4d 100644 --- a/react/BottomSheet/BottomSheet.jsx +++ b/react/BottomSheet/BottomSheet.jsx @@ -1,3 +1,7 @@ +import Fade from '@material-ui/core/Fade' +import Portal from '@material-ui/core/Portal' +import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet' +import PropTypes from 'prop-types' import React, { useState, useEffect, @@ -7,19 +11,10 @@ import React, { memo, Fragment } from 'react' -import PropTypes from 'prop-types' -import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet' import { useMutationObserver, useTimeoutWhen } from 'rooks' -import Fade from '@material-ui/core/Fade' -import Portal from '@material-ui/core/Portal' -import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers' - -import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' -import CozyTheme, { useCozyTheme } from '../providers/CozyTheme' -import Stack from '../Stack' -import Paper from '../Paper' import BackdropOrFragment from './BackdropOrFragment' +import { ANIMATION_DURATION } from './constants' import { computeMaxHeight, computeMediumHeight, @@ -31,8 +26,12 @@ import { computeBottomSpacer, getCssValue } from './helpers' -import { ANIMATION_DURATION } from './constants' import stylescss from './styles.styl' +import Paper from '../Paper' +import Stack from '../Stack' +import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers' +import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' +import CozyTheme, { useCozyTheme } from '../providers/CozyTheme' const createContainerWrapperStyles = () => ({ container: { diff --git a/react/BottomSheet/BottomSheetHeader.jsx b/react/BottomSheet/BottomSheetHeader.jsx index 007c8c851e..ca0a01cdce 100644 --- a/react/BottomSheet/BottomSheetHeader.jsx +++ b/react/BottomSheet/BottomSheetHeader.jsx @@ -1,5 +1,5 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' import { BottomSheetItem } from '../BottomSheet' diff --git a/react/BottomSheet/BottomSheetItem.jsx b/react/BottomSheet/BottomSheetItem.jsx index 4ce4f5e6b2..151fbc6f4e 100644 --- a/react/BottomSheet/BottomSheetItem.jsx +++ b/react/BottomSheet/BottomSheetItem.jsx @@ -1,6 +1,6 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import Paper from '../Paper' diff --git a/react/BottomSheet/BottomSheetTitle.jsx b/react/BottomSheet/BottomSheetTitle.jsx index 244ef47f24..8fa57d893b 100644 --- a/react/BottomSheet/BottomSheetTitle.jsx +++ b/react/BottomSheet/BottomSheetTitle.jsx @@ -1,13 +1,13 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import { BottomSheetItem } from '../BottomSheet' import Icon, { iconPropType } from '../Icon' -import ListItemText from '../ListItemText' import List from '../List' import ListItem from '../ListItem' import ListItemIcon from '../ListItemIcon' +import ListItemText from '../ListItemText' import Typography from '../Typography' const BottomSheetTitle = forwardRef(({ className, label, icon }, ref) => { diff --git a/react/Buttons/index.jsx b/react/Buttons/index.jsx index a7f279aa9e..92d2aeacb1 100644 --- a/react/Buttons/index.jsx +++ b/react/Buttons/index.jsx @@ -1,8 +1,7 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import cx from 'classnames' - import MuiButton from '@material-ui/core/Button' +import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import Icon from '../Icon' import SpinnerIcon from '../Icons/Spinner' diff --git a/react/Card/index.jsx b/react/Card/index.jsx index e326c5dd23..3d70bbdc87 100644 --- a/react/Card/index.jsx +++ b/react/Card/index.jsx @@ -1,6 +1,6 @@ -import React, { PureComponent } from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React, { PureComponent } from 'react' import styles from './styles.styl' diff --git a/react/Checkbox/index.jsx b/react/Checkbox/index.jsx index 5891e252af..95f75e1f38 100644 --- a/react/Checkbox/index.jsx +++ b/react/Checkbox/index.jsx @@ -1,9 +1,8 @@ -import React from 'react' -import cx from 'classnames' -import PropTypes from 'prop-types' - import MUICheckbox from '@material-ui/core/Checkbox' import FormControlLabel from '@material-ui/core/FormControlLabel' +import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' import createDepreciationLogger from '../helpers/createDepreciationLogger' diff --git a/react/Chips/index.jsx b/react/Chips/index.jsx index 671ca246e4..f53bd4809c 100644 --- a/react/Chips/index.jsx +++ b/react/Chips/index.jsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' +import MuiChip from '@material-ui/core/Chip' import cx from 'classnames' import PropTypes from 'prop-types' -import MuiChip from '@material-ui/core/Chip' +import React, { forwardRef } from 'react' const Chips = forwardRef( ( diff --git a/react/CipherIcon/index.jsx b/react/CipherIcon/index.jsx index 9d7ef73d42..56a729d431 100644 --- a/react/CipherIcon/index.jsx +++ b/react/CipherIcon/index.jsx @@ -1,12 +1,13 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' -import AppIcon from '../AppIcon' -import Icon from '../Icon' +import PropTypes from 'prop-types' +import React from 'react' + import { withClient } from 'cozy-client' -import { AppDoctype } from '../proptypes' +import AppIcon from '../AppIcon' +import Icon from '../Icon' import KeychainIcon from '../Icons/Keychain' +import { AppDoctype } from '../proptypes' class CipherIcon extends React.PureComponent { constructor(props) { diff --git a/react/CipherIcon/index.spec.jsx b/react/CipherIcon/index.spec.jsx index 33f1a8d276..64bdc4a25b 100644 --- a/react/CipherIcon/index.spec.jsx +++ b/react/CipherIcon/index.spec.jsx @@ -1,5 +1,6 @@ -import React from 'react' import { fireEvent, render } from '@testing-library/react' +import React from 'react' + import CipherIcon from '.' jest.mock('cozy-client', () => ({ diff --git a/react/Circle/index.jsx b/react/Circle/index.jsx index 9110612450..87e892d2e5 100644 --- a/react/Circle/index.jsx +++ b/react/Circle/index.jsx @@ -1,6 +1,6 @@ -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' diff --git a/react/CircleButton/index.jsx b/react/CircleButton/index.jsx index 118a397c6a..e3e47d9441 100644 --- a/react/CircleButton/index.jsx +++ b/react/CircleButton/index.jsx @@ -1,12 +1,12 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import { makeStyles } from '../styles' +import { makeTypoColor, makeButtonShadow } from './helpers' import Box from '../Box' import IconButton from '../IconButton' import Typography from '../Typography' -import { makeTypoColor, makeButtonShadow } from './helpers' import { getRandomUUID } from '../helpers/getRandomUUID' +import { makeStyles } from '../styles' const useStyles = makeStyles(theme => ({ iconButton: { diff --git a/react/CircularChart/CircularChartProgress.jsx b/react/CircularChart/CircularChartProgress.jsx index ad1d23946e..a3a8423344 100644 --- a/react/CircularChart/CircularChartProgress.jsx +++ b/react/CircularChart/CircularChartProgress.jsx @@ -1,8 +1,8 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import { makeStyles } from '../styles' import MuiCircularProgress from '../CircularProgress' +import { makeStyles } from '../styles' const useStyles = makeStyles({ root: { diff --git a/react/CircularChart/CircularProgressWithBackground.jsx b/react/CircularChart/CircularProgressWithBackground.jsx index 35f9a420ad..0508af2767 100644 --- a/react/CircularChart/CircularProgressWithBackground.jsx +++ b/react/CircularChart/CircularProgressWithBackground.jsx @@ -1,8 +1,8 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import Box from '../Box' import CircularChartProgress from './CircularChartProgress' +import Box from '../Box' const CircularProgressWithBackground = forwardRef( ({ value, color, backgroundColor, size, thickness, ...props }, ref) => { diff --git a/react/CircularChart/index.jsx b/react/CircularChart/index.jsx index 60a96af0e6..20900b416c 100644 --- a/react/CircularChart/index.jsx +++ b/react/CircularChart/index.jsx @@ -1,16 +1,14 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import Box from '../Box' import CircularProgressWithBackground from './CircularProgressWithBackground' import { makeSizeAndThickness } from './helpers' +import Box from '../Box' const CircularChart = forwardRef( ({ size, primaryProps, secondaryProps, children, ...props }, ref) => { - const { - primarySizeAndThickness, - secondarySizeAndThickness - } = makeSizeAndThickness(size, Boolean(secondaryProps)) + const { primarySizeAndThickness, secondarySizeAndThickness } = + makeSizeAndThickness(size, Boolean(secondaryProps)) return ( { const { className, children, ...rest } = props diff --git a/react/ContactPicker/index.spec.jsx b/react/ContactPicker/index.spec.jsx index bb0375b013..7a2f80007b 100644 --- a/react/ContactPicker/index.spec.jsx +++ b/react/ContactPicker/index.spec.jsx @@ -1,11 +1,10 @@ -import React from 'react' import { render, fireEvent, waitFor } from '@testing-library/react' - -import DemoProvider from '../providers/DemoProvider' -import mockClient from '../ContactsListModal/mockClient' -import contacts from '../ContactsList/_mockContacts.json' +import React from 'react' import ContactPicker from '.' +import contacts from '../ContactsList/_mockContacts.json' +import mockClient from '../ContactsListModal/mockClient' +import DemoProvider from '../providers/DemoProvider' const Wrapper = ({ children }) => { return {children} diff --git a/react/ContactsList/ContactRow.jsx b/react/ContactsList/ContactRow.jsx index fd2b97c811..11f6ddd971 100644 --- a/react/ContactsList/ContactRow.jsx +++ b/react/ContactsList/ContactRow.jsx @@ -1,14 +1,14 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' import { models } from 'cozy-client' -import ListItem from '../ListItem' -import ContactPhone from './Contacts/ContactPhone' -import ContactIdentity from './Contacts/ContactIdentity' import ContactCozy from './Contacts/ContactCozy' import ContactEmail from './Contacts/ContactEmail' +import ContactIdentity from './Contacts/ContactIdentity' +import ContactPhone from './Contacts/ContactPhone' +import ListItem from '../ListItem' import useBreakpoints from '../providers/Breakpoints' const { getPrimaryCozy, getPrimaryPhone, getPrimaryEmail } = models.contact diff --git a/react/ContactsList/ContactRow.spec.js b/react/ContactsList/ContactRow.spec.js index 8e3fc50e31..fcc2dd8bfa 100644 --- a/react/ContactsList/ContactRow.spec.js +++ b/react/ContactsList/ContactRow.spec.js @@ -1,11 +1,12 @@ -import React from 'react' import { mount } from 'enzyme' - -import { BreakpointsProvider } from '../providers/Breakpoints' -import ContactRow from './ContactRow' +import React from 'react' import renderer from 'react-test-renderer' + import logger from 'cozy-logger' +import ContactRow from './ContactRow' +import { BreakpointsProvider } from '../providers/Breakpoints' + logger.setLevel('error') const makeContact = attrs => ({ diff --git a/react/ContactsList/Contacts/ContactCozy.jsx b/react/ContactsList/Contacts/ContactCozy.jsx index b8de633210..f2978cb2fa 100644 --- a/react/ContactsList/Contacts/ContactCozy.jsx +++ b/react/ContactsList/Contacts/ContactCozy.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { TableCell } from '../../deprecated/Table' import styles from '../styles.styl' diff --git a/react/ContactsList/Contacts/ContactEmail.jsx b/react/ContactsList/Contacts/ContactEmail.jsx index 8207c09356..41c949f14a 100644 --- a/react/ContactsList/Contacts/ContactEmail.jsx +++ b/react/ContactsList/Contacts/ContactEmail.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { TableCell } from '../../deprecated/Table' import styles from '../styles.styl' diff --git a/react/ContactsList/Contacts/ContactIdentity.jsx b/react/ContactsList/Contacts/ContactIdentity.jsx index 6a61b8b912..597378b868 100644 --- a/react/ContactsList/Contacts/ContactIdentity.jsx +++ b/react/ContactsList/Contacts/ContactIdentity.jsx @@ -1,10 +1,11 @@ +import PropTypes from 'prop-types' import React from 'react' + import { models } from 'cozy-client' -import PropTypes from 'prop-types' +import ContactName from './ContactName' import { Avatar } from '../../Avatar' import { TableCell } from '../../deprecated/Table' -import ContactName from './ContactName' import styles from '../styles.styl' const { getDisplayName, getInitials } = models.contact @@ -21,9 +22,7 @@ const ContactIdentity = ({ contact }) => { return ( diff --git a/react/ContactsList/Contacts/ContactName.jsx b/react/ContactsList/Contacts/ContactName.jsx index acbfe06a4d..0d4ea71491 100644 --- a/react/ContactsList/Contacts/ContactName.jsx +++ b/react/ContactsList/Contacts/ContactName.jsx @@ -1,6 +1,6 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' import Typography from '../../Typography' diff --git a/react/ContactsList/Contacts/ContactPhone.jsx b/react/ContactsList/Contacts/ContactPhone.jsx index e113b6f36c..610271b6b3 100644 --- a/react/ContactsList/Contacts/ContactPhone.jsx +++ b/react/ContactsList/Contacts/ContactPhone.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { TableCell } from '../../deprecated/Table' import styles from '../styles.styl' diff --git a/react/ContactsList/ContactsList.jsx b/react/ContactsList/ContactsList.jsx index a3da24f4a3..38a0a7a098 100644 --- a/react/ContactsList/ContactsList.jsx +++ b/react/ContactsList/ContactsList.jsx @@ -1,14 +1,14 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import { useI18n } from '../providers/I18n' -import { Table } from '../deprecated/Table' +import ContactRow from './ContactRow' +import { sortContacts, categorizeContacts, sortHeaders } from './helpers' +import withContactsListLocales from './locales/withContactsListLocales' import List from '../List' import ListSubheader from '../ListSubheader' -import { sortContacts, categorizeContacts, sortHeaders } from './helpers' -import ContactRow from './ContactRow' +import { Table } from '../deprecated/Table' import useBreakpoints from '../providers/Breakpoints' -import withContactsListLocales from './locales/withContactsListLocales' +import { useI18n } from '../providers/I18n' const ContactsList = ({ contacts, onItemClick, ...rest }) => { const { t } = useI18n() diff --git a/react/ContactsList/locales/withContactsListLocales.jsx b/react/ContactsList/locales/withContactsListLocales.jsx index 2fc686b9b8..4db577f977 100644 --- a/react/ContactsList/locales/withContactsListLocales.jsx +++ b/react/ContactsList/locales/withContactsListLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' const locales = { en, diff --git a/react/ContactsListModal/AddContact/AddContactContent.jsx b/react/ContactsListModal/AddContact/AddContactContent.jsx index f692dedb57..ccfd4f6641 100644 --- a/react/ContactsListModal/AddContact/AddContactContent.jsx +++ b/react/ContactsListModal/AddContact/AddContactContent.jsx @@ -1,15 +1,14 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import styles from './styles.styl' import Icon from '../../Icon' import PeopleIcon from '../../Icons/People' -import { Media, Img, Bd } from '../../deprecated/Media' import TextField from '../../TextField' import Typography from '../../Typography' +import { Media, Img, Bd } from '../../deprecated/Media' import { withContactsListLocales } from '../withContactsListLocales' -import styles from './styles.styl' - const AddContactContent = ({ t, setContactValues }) => { const handleChange = ev => { const { name, value } = ev.target @@ -28,7 +27,7 @@ const AddContactContent = ({ t, setContactValues }) => { className="u-mt-1" variant="outlined" fullWidth - id={'givenName'} + id="givenName" name="givenName" label={t('givenName')} onChange={handleChange} @@ -41,7 +40,7 @@ const AddContactContent = ({ t, setContactValues }) => { className="u-mt-1" variant="outlined" fullWidth - id={'familyName'} + id="familyName" name="familyName" label={t('familyName')} onChange={handleChange} diff --git a/react/ContactsListModal/AddContact/AddContactDialog.jsx b/react/ContactsListModal/AddContact/AddContactDialog.jsx index 04ffccb1fb..36729b1ae7 100644 --- a/react/ContactsListModal/AddContact/AddContactDialog.jsx +++ b/react/ContactsListModal/AddContact/AddContactDialog.jsx @@ -2,11 +2,11 @@ import React, { useState } from 'react' import { useClient } from 'cozy-client' -import { FixedDialog } from '../../CozyDialogs' -import AddContactTitle from './AddContactTitle' -import AddContactContent from './AddContactContent' import AddContactActions from './AddContactActions' +import AddContactContent from './AddContactContent' +import AddContactTitle from './AddContactTitle' import { handleSubmit } from './helpers' +import { FixedDialog } from '../../CozyDialogs' const AddContactDialog = ({ onListClose, onCreate, onClose }) => { const [contactValues, setContactValues] = useState({}) diff --git a/react/ContactsListModal/ContactsListContent.jsx b/react/ContactsListModal/ContactsListContent.jsx index 6a68bcacd4..b5d6361ecf 100644 --- a/react/ContactsListModal/ContactsListContent.jsx +++ b/react/ContactsListModal/ContactsListContent.jsx @@ -3,11 +3,11 @@ import React from 'react' import { models } from 'cozy-client' const { getDisplayName } = models.contact +import EmptyMessage from './EmptyMessage' +import { withContactsListLocales } from './withContactsListLocales' import ContactsList from '../ContactsList' import Spinner from '../Spinner' import { useI18n } from '../providers/I18n' -import EmptyMessage from './EmptyMessage' -import { withContactsListLocales } from './withContactsListLocales' const mkFilter = filterStr => contacts => { if (!filterStr) { diff --git a/react/ContactsListModal/ContactsListModal.jsx b/react/ContactsListModal/ContactsListModal.jsx index d83efc30f0..b5aae04855 100644 --- a/react/ContactsListModal/ContactsListModal.jsx +++ b/react/ContactsListModal/ContactsListModal.jsx @@ -1,29 +1,28 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { useState } from 'react' import { useClient } from 'cozy-client' -import { DialogTitle, DialogContent } from '../Dialog' -import CozyTheme from '../providers/CozyTheme' +import AddContactDialog from './AddContact/AddContactDialog' +import ContactsListContent from './ContactsListContent' +import MobileHeader from './MobileHeader' +import styles from './styles.styl' +import Button from '../Buttons' import { TopAnchoredDialog, DialogCloseButton, useCozyDialog } from '../CozyDialogs' -import useRealtime from '../hooks/useRealtime' +import { DialogTitle, DialogContent } from '../Dialog' +import Icon from '../Icon' +import PlusIcon from '../Icons/Plus' import useEventListener from '../hooks/useEventListener' +import useRealtime from '../hooks/useRealtime' +import CozyTheme from '../providers/CozyTheme' import useBreakpoints from '../providers/Breakpoints' import { useI18n } from '../providers/I18n' -import Button from '../Buttons' -import PlusIcon from '../Icons/Plus' -import Icon from '../Icon' import TextField from '../TextField' -import MobileHeader from './MobileHeader' -import ContactsListContent from './ContactsListContent' -import AddContactDialog from './AddContact/AddContactDialog' - -import styles from './styles.styl' const ContactsListModal = ({ onItemClick, diff --git a/react/ContactsListModal/ContactsListModalWithQuery.jsx b/react/ContactsListModal/ContactsListModalWithQuery.jsx index 5ab705cdf7..8e6fa29087 100644 --- a/react/ContactsListModal/ContactsListModalWithQuery.jsx +++ b/react/ContactsListModal/ContactsListModalWithQuery.jsx @@ -1,10 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { useQueryAll } from 'cozy-client' -import { buildContactsQuery } from './queries' import ContactsListModal from './ContactsListModal' +import { buildContactsQuery } from './queries' const ContactsListModalWithQuery = props => { const contactsQuery = buildContactsQuery() diff --git a/react/ContactsListModal/EmptyMessage.jsx b/react/ContactsListModal/EmptyMessage.jsx index a336fc0d92..e37f18146d 100644 --- a/react/ContactsListModal/EmptyMessage.jsx +++ b/react/ContactsListModal/EmptyMessage.jsx @@ -1,5 +1,6 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' + import Typography from '../Typography' const EmptyMessage = props => { diff --git a/react/ContactsListModal/MobileHeader.jsx b/react/ContactsListModal/MobileHeader.jsx index 67fb1ee311..d90b46774d 100644 --- a/react/ContactsListModal/MobileHeader.jsx +++ b/react/ContactsListModal/MobileHeader.jsx @@ -1,12 +1,12 @@ -import React from 'react' -import PropTypes from 'prop-types' import Input from '@material-ui/core/Input' +import PropTypes from 'prop-types' +import React from 'react' -import CozyTheme from '../providers/CozyTheme' import Icon from '../Icon' +import IconButton from '../IconButton' import PreviousIcon from '../Icons/Previous' import Paper from '../Paper' -import IconButton from '../IconButton' +import CozyTheme from '../providers/CozyTheme' const barStyle = { height: 48 diff --git a/react/ContactsListModal/index.jsx b/react/ContactsListModal/index.jsx index 8dbe98f393..cf7ac25b35 100644 --- a/react/ContactsListModal/index.jsx +++ b/react/ContactsListModal/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import { withContactsListLocales } from './withContactsListLocales' import ContactsListModal from './ContactsListModal' import ContactsListModalWithQuery from './ContactsListModalWithQuery' +import { withContactsListLocales } from './withContactsListLocales' const ContactsListModalWrapper = ({ contacts, ...props }) => { if (contacts) { diff --git a/react/ContactsListModal/withContactsListLocales.jsx b/react/ContactsListModal/withContactsListLocales.jsx index e8feca82a8..4cbf04b9e1 100644 --- a/react/ContactsListModal/withContactsListLocales.jsx +++ b/react/ContactsListModal/withContactsListLocales.jsx @@ -1,7 +1,6 @@ -import withLocales from '../providers/I18n/withLocales' - import en from './locales/en.json' import fr from './locales/fr.json' +import withLocales from '../providers/I18n/withLocales' export const locales = { en, diff --git a/react/Counter/index.jsx b/react/Counter/index.jsx index 1174d5c416..d8cae01685 100644 --- a/react/Counter/index.jsx +++ b/react/Counter/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' const Counter = ({ count, max }) => ( {count > max ? `${max}+` : count} diff --git a/react/CozyDialogs/ConfirmDialog.jsx b/react/CozyDialogs/ConfirmDialog.jsx index e9a9005b33..4831ddd6dd 100644 --- a/react/CozyDialogs/ConfirmDialog.jsx +++ b/react/CozyDialogs/ConfirmDialog.jsx @@ -1,12 +1,11 @@ -import React from 'react' import cx from 'classnames/dedupe' +import React from 'react' -import useCozyDialog from './useCozyDialog' -import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' - -import dialogPropTypes from './dialogPropTypes' import DialogBackButton from './DialogBackButton' import DialogCloseButton from './DialogCloseButton' +import dialogPropTypes from './dialogPropTypes' +import useCozyDialog from './useCozyDialog' +import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' const ConfirmDialog = props => { const { onClose, onBack, title, content, actions, actionsLayout } = props diff --git a/react/CozyDialogs/Dialog.jsx b/react/CozyDialogs/Dialog.jsx index c48b9909a8..fa938aea4d 100644 --- a/react/CozyDialogs/Dialog.jsx +++ b/react/CozyDialogs/Dialog.jsx @@ -1,14 +1,13 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' +import DialogBackButton from './DialogBackButton' +import DialogCloseButton from './DialogCloseButton' +import dialogPropTypes from './dialogPropTypes' import useCozyDialog from './useCozyDialog' import MUIDialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' import Divider from '../Divider' -import dialogPropTypes from './dialogPropTypes' -import DialogBackButton from './DialogBackButton' -import DialogCloseButton from './DialogCloseButton' - const Dialog = props => { const { onClose, onBack, title, content, actions, actionsLayout } = props const { diff --git a/react/CozyDialogs/DialogBackButton.jsx b/react/CozyDialogs/DialogBackButton.jsx index 60a83815d8..b1eb2f8780 100644 --- a/react/CozyDialogs/DialogBackButton.jsx +++ b/react/CozyDialogs/DialogBackButton.jsx @@ -1,13 +1,11 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import IconButton from '../IconButton' +import locales from './locales' +import styles from './styles.styl' import Icon from '../Icon' - +import IconButton from '../IconButton' import PreviousIcon from '../Icons/Previous' - -import styles from './styles.styl' -import locales from './locales' import { createUseI18n } from '../providers/I18n' const useI18n = createUseI18n(locales) diff --git a/react/CozyDialogs/DialogCloseButton.jsx b/react/CozyDialogs/DialogCloseButton.jsx index 0880524e33..12724f535e 100644 --- a/react/CozyDialogs/DialogCloseButton.jsx +++ b/react/CozyDialogs/DialogCloseButton.jsx @@ -1,14 +1,13 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import IconButton from '../IconButton' +import locales from './locales' +import styles from './styles.styl' import Icon from '../Icon' +import IconButton from '../IconButton' import CrossMediumIcon from '../Icons/CrossMedium' import { createUseI18n } from '../providers/I18n' -import styles from './styles.styl' -import locales from './locales' - const useI18n = createUseI18n(locales) const CloseButton = ({ onClick, ...props }) => { diff --git a/react/CozyDialogs/DialogTransition.jsx b/react/CozyDialogs/DialogTransition.jsx index ab0993d9a1..25021b94e9 100644 --- a/react/CozyDialogs/DialogTransition.jsx +++ b/react/CozyDialogs/DialogTransition.jsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import MuiSlide from '@material-ui/core/Slide' import MuiGrow from '@material-ui/core/Grow' +import MuiSlide from '@material-ui/core/Slide' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' const DialogTransition = forwardRef( ({ fullScreen, isFullscreen, ...props }, ref) => { diff --git a/react/CozyDialogs/FixedActionsDialog.jsx b/react/CozyDialogs/FixedActionsDialog.jsx index 64f4d5e39f..7616138427 100644 --- a/react/CozyDialogs/FixedActionsDialog.jsx +++ b/react/CozyDialogs/FixedActionsDialog.jsx @@ -1,14 +1,13 @@ -import React from 'react' import cx from 'classnames/dedupe' +import React from 'react' +import DialogBackButton from './DialogBackButton' +import DialogCloseButton from './DialogCloseButton' +import dialogPropTypes from './dialogPropTypes' import useCozyDialog from './useCozyDialog' import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' import Divider from '../Divider' -import dialogPropTypes from './dialogPropTypes' -import DialogBackButton from './DialogBackButton' -import DialogCloseButton from './DialogCloseButton' - const FixedActionsDialog = props => { const { onClose, onBack, title, content, actions, actionsLayout } = props const { diff --git a/react/CozyDialogs/FixedDialog.jsx b/react/CozyDialogs/FixedDialog.jsx index f20dd14e9a..48e58592ff 100644 --- a/react/CozyDialogs/FixedDialog.jsx +++ b/react/CozyDialogs/FixedDialog.jsx @@ -1,14 +1,13 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' +import DialogBackButton from './DialogBackButton' +import DialogCloseButton from './DialogCloseButton' +import dialogPropTypes from './dialogPropTypes' import useCozyDialog from './useCozyDialog' import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' import Divider from '../Divider' -import dialogPropTypes from './dialogPropTypes' -import DialogBackButton from './DialogBackButton' -import DialogCloseButton from './DialogCloseButton' - const FixedDialog = props => { const { onClose, onBack, title, content, actions, actionsLayout } = props const { diff --git a/react/CozyDialogs/IllustrationDialog.jsx b/react/CozyDialogs/IllustrationDialog.jsx index 058de64024..622150af8e 100644 --- a/react/CozyDialogs/IllustrationDialog.jsx +++ b/react/CozyDialogs/IllustrationDialog.jsx @@ -1,12 +1,11 @@ -import React from 'react' import cx from 'classnames/dedupe' +import React from 'react' -import useCozyDialog from './useCozyDialog' -import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' - -import dialogPropTypes from './dialogPropTypes' import DialogBackButton from './DialogBackButton' import DialogCloseButton from './DialogCloseButton' +import dialogPropTypes from './dialogPropTypes' +import useCozyDialog from './useCozyDialog' +import Dialog, { DialogTitle, DialogActions, DialogContent } from '../Dialog' const IllustrationDialog = props => { const { onClose, onBack, title, content, actions, actionsLayout } = props diff --git a/react/CozyDialogs/PermissionDialog.jsx b/react/CozyDialogs/PermissionDialog.jsx index 145655b2b4..9f11499b10 100644 --- a/react/CozyDialogs/PermissionDialog.jsx +++ b/react/CozyDialogs/PermissionDialog.jsx @@ -1,12 +1,12 @@ -import React from 'react' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' -import { makeStyles } from '../styles' -import CozyTheme from '../providers/CozyTheme' import ConfirmDialog from './ConfirmDialog' -import PropTypes from 'prop-types' import Icon from '../Icon' import Paper from '../Paper' +import CozyTheme from '../providers/CozyTheme' +import { makeStyles } from '../styles' const useStyles = makeStyles({ floatingIcon: { diff --git a/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx b/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx index 72ae5c0911..5f0ac55c51 100644 --- a/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx +++ b/react/CozyDialogs/SpecificDialogs/AllowLocationDialog.jsx @@ -1,14 +1,13 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' +import CozyLocation from './icons/CozyLocation' +import withSpecificDialogsLocales from './withSpecificDialogsLocales' import { IllustrationDialog } from '..' -import { useI18n } from '../../providers/I18n' +import Button from '../../Buttons' import Icon from '../../Icon' import Typography from '../../Typography' -import Button from '../../Buttons' -import CozyLocation from './icons/CozyLocation' - -import withSpecificDialogsLocales from './withSpecificDialogsLocales' +import { useI18n } from '../../providers/I18n' const createStyles = () => ({ typography: { diff --git a/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx b/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx index 555fc4ab61..178ab749f8 100644 --- a/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx +++ b/react/CozyDialogs/SpecificDialogs/AuthentificationDialog.jsx @@ -1,15 +1,15 @@ -import React, { useMemo, useState } from 'react' import PropTypes from 'prop-types' +import React, { useMemo, useState } from 'react' -import PermissionDialog from '../PermissionDialog' -import Buttons from '../../Buttons' -import { useI18n } from '../../providers/I18n' -import Typography from '../../Typography' import { useClient } from 'cozy-client' -import CozyAuthentificationIcon from '../../Icons/CozyAuthentification' -import PasswordField from '../../PasswordField' import withSpecificDialogsLocales from './withSpecificDialogsLocales' +import Buttons from '../../Buttons' +import CozyAuthentificationIcon from '../../Icons/CozyAuthentification' +import PasswordField from '../../PasswordField' +import Typography from '../../Typography' +import { useI18n } from '../../providers/I18n' +import PermissionDialog from '../PermissionDialog' /** * Dialog used to authenticate a user in the cozy system. diff --git a/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx b/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx index 7a143dc590..acfe94316c 100644 --- a/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx +++ b/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx @@ -1,15 +1,14 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' - -import { IllustrationDialog } from '..' -import { useI18n } from '../../providers/I18n' -import Link from '../../Link' -import Typography from '../../Typography' +import React, { forwardRef } from 'react' import DefaultQRCode from './icons/QRCodeInstallFlagshipAppDialog.png' import appStoreIcon from './icons/appstore.png' import playStoreIcon from './icons/playstore.png' import withSpecificDialogsLocales from './withSpecificDialogsLocales' +import { IllustrationDialog } from '..' +import Link from '../../Link' +import Typography from '../../Typography' +import { useI18n } from '../../providers/I18n' const InstallFlagshipAppDialog = forwardRef( ({ onClose, playStoreUrl, appStoreUrl, QRCode }, ref) => { @@ -24,7 +23,7 @@ const InstallFlagshipAppDialog = forwardRef( componentsProps={{ dialogTitle: { className: 'u-pt-2-half' } }} title={ diff --git a/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx b/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx index 7e530ac61d..6d5331c0cb 100644 --- a/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx +++ b/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './locales/en.json' import fr from './locales/fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/CozyDialogs/TopAnchoredDialog.jsx b/react/CozyDialogs/TopAnchoredDialog.jsx index 869289a511..874b0ea954 100644 --- a/react/CozyDialogs/TopAnchoredDialog.jsx +++ b/react/CozyDialogs/TopAnchoredDialog.jsx @@ -1,7 +1,7 @@ import React from 'react' -import { withStyles } from '../styles' import Dialog from '../Dialog' +import { withStyles } from '../styles' /** * A Dialog that will not be centered vertically. Useful when diff --git a/react/CozyDialogs/testing.spec.jsx b/react/CozyDialogs/testing.spec.jsx index c6c3ef65dd..484f6ea859 100644 --- a/react/CozyDialogs/testing.spec.jsx +++ b/react/CozyDialogs/testing.spec.jsx @@ -1,8 +1,7 @@ -import React from 'react' import { render, fireEvent } from '@testing-library/react' +import React from 'react' import Dialog from './Dialog' - import { getDialog, getCloseButton, diff --git a/react/CozyDialogs/useCozyDialog.js b/react/CozyDialogs/useCozyDialog.js index 6bd80dbc40..f3d90f465e 100644 --- a/react/CozyDialogs/useCozyDialog.js +++ b/react/CozyDialogs/useCozyDialog.js @@ -1,11 +1,10 @@ -import { useState } from 'react' import cx from 'classnames' +import { useState } from 'react' +import DialogTransition from './DialogTransition' import useBreakpoints from '../providers/Breakpoints' import { makeStyles } from '../styles' -import DialogTransition from './DialogTransition' - let globalId = 0 const modalSizes = ['small', 'medium', 'large'] diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx index 00e6131870..6d612fb464 100644 --- a/react/DateMonthPicker/index.jsx +++ b/react/DateMonthPicker/index.jsx @@ -1,15 +1,14 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' -import range from 'lodash/range' -import format from 'date-fns/format' import cx from 'classnames' +import format from 'date-fns/format' +import range from 'lodash/range' +import PropTypes from 'prop-types' +import React, { useState } from 'react' -import { useI18n } from '../providers/I18n' +import styles from './styles.styl' import Icon from '../Icon' import LeftIcon from '../Icons/Left' import RightIcon from '../Icons/Right' - -import styles from './styles.styl' +import { useI18n } from '../providers/I18n' const MonthButton = ({ monthNum, onClick, isSelected }) => { const { f } = useI18n() @@ -86,7 +85,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 `' + diff --git a/react/DateMonthPicker/index.spec.jsx b/react/DateMonthPicker/index.spec.jsx index ebe8a10094..ee2a882913 100644 --- a/react/DateMonthPicker/index.spec.jsx +++ b/react/DateMonthPicker/index.spec.jsx @@ -1,11 +1,11 @@ import { mount } from 'enzyme' import React from 'react' -import DateMonthPicker from '.' import { act } from 'react-dom/test-utils' -import I18n from '../providers/I18n' +import DateMonthPicker from '.' import LeftIcon from '../Icons/Left' import RightIcon from '../Icons/Right' +import I18n from '../providers/I18n' const findButtonWithLabel = (root, label) => root.findWhere(n => n.type() == 'button' && n.props().children === label) diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx index fad2fb2e44..31d2975fa7 100644 --- a/react/Dialog/index.jsx +++ b/react/Dialog/index.jsx @@ -1,8 +1,8 @@ -import React from 'react' import { default as MUIDialog } from '@material-ui/core/Dialog' +import React from 'react' -import { useCozyTheme } from '../providers/CozyTheme' import { useDialogEffects } from './DialogEffects' +import { useCozyTheme } from '../providers/CozyTheme' const Dialog = props => { const { type, variant } = useCozyTheme() diff --git a/react/Divider/TextDivider/index.jsx b/react/Divider/TextDivider/index.jsx index 5f175aa04e..e86e699762 100644 --- a/react/Divider/TextDivider/index.jsx +++ b/react/Divider/TextDivider/index.jsx @@ -1,10 +1,9 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' - -import Typography from '../../Typography' +import React from 'react' import styles from './styles.styl' +import Typography from '../../Typography' /** * @description This component is composing `` and has access to the same props diff --git a/react/Divider/index.jsx b/react/Divider/index.jsx index d5827960e0..3f62333cdd 100644 --- a/react/Divider/index.jsx +++ b/react/Divider/index.jsx @@ -1,9 +1,8 @@ -import React, { forwardRef } from 'react' import MuiDivider from '@material-ui/core/Divider' - -import { withStyles } from '../styles' +import React, { forwardRef } from 'react' import TextDivider from './TextDivider' +import { withStyles } from '../styles' /** * @desc If this component is provided a string children, it will render a `` component diff --git a/react/DropdownButton/index.jsx b/react/DropdownButton/index.jsx index 600a1d68a0..27f8e376e0 100644 --- a/react/DropdownButton/index.jsx +++ b/react/DropdownButton/index.jsx @@ -1,9 +1,9 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import Button from '@material-ui/core/Button' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import { makeStyles } from '../styles' import DropdownText from '../DropdownText' +import { makeStyles } from '../styles' const useStyles = makeStyles({ root: { diff --git a/react/DropdownText/index.jsx b/react/DropdownText/index.jsx index 6a52ea20c9..372458bca1 100644 --- a/react/DropdownText/index.jsx +++ b/react/DropdownText/index.jsx @@ -1,10 +1,10 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import { makeStyles } from '../styles' -import Typography from '../Typography' import Icon from '../Icon' import BottomIcon from '../Icons/Bottom' +import Typography from '../Typography' +import { makeStyles } from '../styles' const useStyles = makeStyles(theme => ({ container: { diff --git a/react/Empty/index.jsx b/react/Empty/index.jsx index 98cc25f193..fb5602c551 100644 --- a/react/Empty/index.jsx +++ b/react/Empty/index.jsx @@ -1,12 +1,11 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' +import styles from './styles.styl' import Icon, { iconPropType } from '../Icon' import Typography from '../Typography' -import styles from './styles.styl' - export const Empty = ({ icon, iconSize, diff --git a/react/Fab/ExtendableFab.jsx b/react/Fab/ExtendableFab.jsx index 214a083015..a183bb3dbb 100644 --- a/react/Fab/ExtendableFab.jsx +++ b/react/Fab/ExtendableFab.jsx @@ -1,8 +1,8 @@ import React from 'react' +import Fab from '.' import Icon from '../Icon' import useScroll from '../hooks/useScroll' -import Fab from '.' const ExtendableFab = ({ label, diff --git a/react/Field/index.jsx b/react/Field/index.jsx index b69acf0241..33e0dba115 100644 --- a/react/Field/index.jsx +++ b/react/Field/index.jsx @@ -1,15 +1,15 @@ -import React, { useState } from 'react' import cx from 'classnames' import omit from 'lodash/omit' import PropTypes from 'prop-types' +import React, { useState } from 'react' -import labelStyles from '../Label/styles.styl' import styles from './styles.styl' -import Label from '../Label' +import ContactPicker from '../ContactPicker' import Input from '../Input' +import Label from '../Label' +import labelStyles from '../Label/styles.styl' import SelectBox from '../SelectBox' import Textarea from '../Textarea' -import ContactPicker from '../ContactPicker' /** * PropTypes to pass to Input but not to other components, like SelectBox @@ -263,7 +263,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') { diff --git a/react/Field/index.spec.js b/react/Field/index.spec.js index 1af878e36c..0a650724b5 100644 --- a/react/Field/index.spec.js +++ b/react/Field/index.spec.js @@ -1,6 +1,7 @@ +import { shallow } from 'enzyme' import React from 'react' + import Field from '.' -import { shallow } from 'enzyme' describe('Field component', () => { beforeEach(() => { diff --git a/react/Figure/Figure.jsx b/react/Figure/Figure.jsx index 131ee7dfa3..904587fef8 100644 --- a/react/Figure/Figure.jsx +++ b/react/Figure/Figure.jsx @@ -1,6 +1,7 @@ -import React from 'react' -import Types from 'prop-types' import cx from 'classnames' +import Types from 'prop-types' +import React from 'react' + import styles from './Figure.styl' /** diff --git a/react/Figure/Figure.spec.jsx b/react/Figure/Figure.spec.jsx index 70587f7c25..a462a547b5 100644 --- a/react/Figure/Figure.spec.jsx +++ b/react/Figure/Figure.spec.jsx @@ -1,6 +1,7 @@ -import React from 'react' import { shallow } from 'enzyme' import { flatten, merge } from 'lodash' +import React from 'react' + import Figure from './Figure' const combine = (...iterables) => { @@ -30,7 +31,10 @@ 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]) }) diff --git a/react/Figure/FigureBlock.jsx b/react/Figure/FigureBlock.jsx index aec5b44b8e..b78370a917 100644 --- a/react/Figure/FigureBlock.jsx +++ b/react/Figure/FigureBlock.jsx @@ -1,9 +1,10 @@ -import React from 'react' -import Types from 'prop-types' import classNames from 'classnames' +import Types from 'prop-types' +import React from 'react' + import Figure from './Figure' -import Typography from '../Typography' import styles from './FigureBlock.styl' +import Typography from '../Typography' /** * Shows a `Figure` with a label, useful for important numbers. diff --git a/react/FileImageLoader/index.jsx b/react/FileImageLoader/index.jsx index e500288d9f..7d69d6f407 100644 --- a/react/FileImageLoader/index.jsx +++ b/react/FileImageLoader/index.jsx @@ -1,5 +1,6 @@ -import { Component } from 'react' import PropTypes from 'prop-types' +import { Component } from 'react' + import { withClient } from 'cozy-client' import logger from 'cozy-logger' diff --git a/react/FileImageLoader/index.spec.jsx b/react/FileImageLoader/index.spec.jsx index fc2633f43d..3291c49e80 100644 --- a/react/FileImageLoader/index.spec.jsx +++ b/react/FileImageLoader/index.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { render, waitFor } from '@testing-library/react' +import React from 'react' import { createMockClient } from 'cozy-client' import logger from 'cozy-logger' diff --git a/react/FileInput/index.jsx b/react/FileInput/index.jsx index 74afa95884..80e77eb4d3 100644 --- a/react/FileInput/index.jsx +++ b/react/FileInput/index.jsx @@ -1,7 +1,7 @@ import cx from 'classnames' -import React from 'react' -import PropTypes from 'prop-types' import uniqueId from 'lodash/uniqueId' +import PropTypes from 'prop-types' +import React from 'react' import styles from './styles.styl' diff --git a/react/FileInput/index.spec.jsx b/react/FileInput/index.spec.jsx index 2f00562af4..70da94f57a 100644 --- a/react/FileInput/index.spec.jsx +++ b/react/FileInput/index.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import uniqueId from 'lodash/uniqueId' +import React from 'react' import FileInput from '.' diff --git a/react/FilePath/index.jsx b/react/FilePath/index.jsx index 18bf0f13c5..3ef7a75b7d 100644 --- a/react/FilePath/index.jsx +++ b/react/FilePath/index.jsx @@ -1,6 +1,7 @@ import React from 'react' -import MidEllipsis from '../MidEllipsis' + import styles from './styles.styl' +import MidEllipsis from '../MidEllipsis' const FilePath = ({ children, className }) => ( diff --git a/react/FilePathLink/index.jsx b/react/FilePathLink/index.jsx index e8086918bc..f9bf8e263a 100644 --- a/react/FilePathLink/index.jsx +++ b/react/FilePathLink/index.jsx @@ -1,6 +1,7 @@ import React from 'react' -import Link from '../Link' + import FilePath from '../FilePath' +import Link from '../Link' const FilePathLink = ({ children, ...props }) => ( diff --git a/react/FilePicker/FilePickerBody.jsx b/react/FilePicker/FilePickerBody.jsx index 33373810fd..abb6138dcb 100644 --- a/react/FilePicker/FilePickerBody.jsx +++ b/react/FilePicker/FilePickerBody.jsx @@ -1,12 +1,12 @@ -import React, { useCallback } from 'react' import PropTypes from 'prop-types' +import React, { useCallback } from 'react' import { models, useQuery } from 'cozy-client' -import List from '../List' -import LoadMore from '../LoadMore' -import { buildContentFolderQuery } from './queries' import FilePickerBodyItem from './FilePickerBodyItem' +import { buildContentFolderQuery } from './queries' +import List from '../List' +import LoadMore from '../LoadMore' import { isValidFile } from '../helpers/acceptedTypes' const { @@ -22,10 +22,11 @@ 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( itemId => { @@ -94,7 +95,7 @@ const FilePickerBody = ({ /> ) })} - {hasMore && } + {hasMore && } ) } diff --git a/react/FilePicker/FilePickerBodyItem.jsx b/react/FilePicker/FilePickerBodyItem.jsx index 152a9a393c..8f913f054d 100644 --- a/react/FilePicker/FilePickerBodyItem.jsx +++ b/react/FilePicker/FilePickerBodyItem.jsx @@ -1,25 +1,23 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' import filesize from 'filesize' +import PropTypes from 'prop-types' +import React from 'react' import { models } from 'cozy-client' -import { makeStyles } from '../styles' -import ListItem from '../ListItem' -import ListItemIcon from '../ListItemIcon' -import ListItemText from '../ListItemText' +import styles from './styles.styl' +import Checkbox from '../Checkbox' import Divider from '../Divider' import Icon from '../Icon' -import FileTypeText from '../Icons/FileTypeText' import FileTypeFolder from '../Icons/FileTypeFolder' -import Checkbox from '../Checkbox' +import FileTypeText from '../Icons/FileTypeText' +import ListItem from '../ListItem' +import ListItemIcon from '../ListItemIcon' +import ListItemText from '../ListItemText' import Radio from '../Radios' -import { useI18n } from '../providers/I18n' - import { isValidFile, isValidFolder } from '../helpers/acceptedTypes' - -import styles from './styles.styl' +import { useI18n } from '../providers/I18n' +import { makeStyles } from '../styles' const { file: { isDirectory, isFile } diff --git a/react/FilePicker/FilePickerBodyItem.spec.jsx b/react/FilePicker/FilePickerBodyItem.spec.jsx index 144faa6015..124bfbe81c 100644 --- a/react/FilePicker/FilePickerBodyItem.spec.jsx +++ b/react/FilePicker/FilePickerBodyItem.spec.jsx @@ -1,9 +1,9 @@ -import React from 'react' import { render, fireEvent } from '@testing-library/react' import filesize from 'filesize' +import React from 'react' -import DemoProvider from './docs/DemoProvider' import FilePickerBodyItem from './FilePickerBodyItem' +import DemoProvider from './docs/DemoProvider' import { isValidFile, isValidFolder } from '../helpers/acceptedTypes' const mockFile01 = { diff --git a/react/FilePicker/FilePickerBreadcrumb.jsx b/react/FilePicker/FilePickerBreadcrumb.jsx index 222d3f1454..9b76c03afc 100644 --- a/react/FilePicker/FilePickerBreadcrumb.jsx +++ b/react/FilePicker/FilePickerBreadcrumb.jsx @@ -1,20 +1,20 @@ -import React, { Fragment, useCallback, memo } from 'react' import PropTypes from 'prop-types' +import React, { Fragment, useCallback, memo } from 'react' -import Typography from '../Typography' +import styles from './styles.styl' import Icon from '../Icon' import RightIcon from '../Icons/Right' +import Typography from '../Typography' import useBreakpoints from '../providers/Breakpoints' -import styles from './styles.styl' - 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 ( diff --git a/react/FilePicker/FilePickerFooter.jsx b/react/FilePicker/FilePickerFooter.jsx index 3a2f98b41c..88634b7491 100644 --- a/react/FilePicker/FilePickerFooter.jsx +++ b/react/FilePicker/FilePickerFooter.jsx @@ -1,11 +1,10 @@ -import React, { memo } from 'react' import PropTypes from 'prop-types' - -import Button from '../deprecated/Button' -import { createUseI18n } from '../providers/I18n' +import React, { memo } from 'react' import en from './locales/en.json' import fr from './locales/fr.json' +import Button from '../deprecated/Button' +import { createUseI18n } from '../providers/I18n' const locales = { en, fr } const useI18n = createUseI18n(locales) diff --git a/react/FilePicker/FilePickerFooter.spec.jsx b/react/FilePicker/FilePickerFooter.spec.jsx index ecf1167c2b..25fe64b9f7 100644 --- a/react/FilePicker/FilePickerFooter.spec.jsx +++ b/react/FilePicker/FilePickerFooter.spec.jsx @@ -1,8 +1,8 @@ -import React from 'react' import { render, fireEvent } from '@testing-library/react' +import React from 'react' -import DemoProvider from './docs/DemoProvider' import FilePickerFooter from './FilePickerFooter' +import DemoProvider from './docs/DemoProvider' describe('FilePickerFooter components:', () => { const mockOnConfirm = jest.fn() diff --git a/react/FilePicker/FilePickerHeader.jsx b/react/FilePicker/FilePickerHeader.jsx index d0e3cdea21..da0403e63e 100644 --- a/react/FilePicker/FilePickerHeader.jsx +++ b/react/FilePicker/FilePickerHeader.jsx @@ -1,18 +1,17 @@ -import React, { useCallback, memo } from 'react' -import PropTypes from 'prop-types' -import uniqBy from 'lodash/uniqBy' import get from 'lodash/get' +import uniqBy from 'lodash/uniqBy' +import PropTypes from 'prop-types' +import React, { useCallback, memo } from 'react' import { useQuery, hasQueryBeenLoaded } from 'cozy-client' -import useBreakpoints from '../providers/Breakpoints' -import IconButton from '../IconButton' -import Icon from '../Icon' -import Previous from '../Icons/Previous' - +import { ROOT_DIR_ID } from '.' import FilePickerBreadcrumb from './FilePickerBreadcrumb' import { buildCurrentFolderQuery } from './queries' -import { ROOT_DIR_ID } from '.' +import Icon from '../Icon' +import IconButton from '../IconButton' +import Previous from '../Icons/Previous' +import useBreakpoints from '../providers/Breakpoints' /** * @param {IOCozyFolder} displayedFolder - An io.cozy.files folder diff --git a/react/FilePicker/index.jsx b/react/FilePicker/index.jsx index d76222eea7..c2739c5b01 100644 --- a/react/FilePicker/index.jsx +++ b/react/FilePicker/index.jsx @@ -1,13 +1,13 @@ -import React, { useState, memo } from 'react' import PropTypes from 'prop-types' +import React, { useState, memo } from 'react' -import { makeStyles } from '../styles' -import { FixedDialog } from '../CozyDialogs' -import FilePickerHeader from './FilePickerHeader' -import FilePickerFooter from './FilePickerFooter' import FilePickerBody from './FilePickerBody' -import useBreakpoints from '../providers/Breakpoints' +import FilePickerFooter from './FilePickerFooter' +import FilePickerHeader from './FilePickerHeader' +import { FixedDialog } from '../CozyDialogs' import { getCompliantTypes } from '../helpers/acceptedTypes' +import useBreakpoints from '../providers/Breakpoints' +import { makeStyles } from '../styles' const useStyles = makeStyles(() => ({ paper: { diff --git a/react/Filename/index.jsx b/react/Filename/index.jsx index 942318f171..6404300f61 100644 --- a/react/Filename/index.jsx +++ b/react/Filename/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Icon, { iconPropType } from '../Icon' -import Typography from '../Typography' import MidEllipsis from '../MidEllipsis' +import Typography from '../Typography' const Filename = ({ icon, filename, extension, midEllipsis, variant }) => { return ( diff --git a/react/GhostFileBadge/index.jsx b/react/GhostFileBadge/index.jsx index f47da95c4c..8f826d200f 100644 --- a/react/GhostFileBadge/index.jsx +++ b/react/GhostFileBadge/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' import Badge from '../Badge' import { withStyles } from '../styles' diff --git a/react/Hero/index.jsx b/react/Hero/index.jsx index 15f17f0883..ff289291aa 100644 --- a/react/Hero/index.jsx +++ b/react/Hero/index.jsx @@ -1,6 +1,7 @@ import React from 'react' -import BaseIcon from '../Icon' + import styles from './styles.styl' +import BaseIcon from '../Icon' import { mkComponent } from '../utils' // Cannot use mkComponent since it is not picked up by styleguidist diff --git a/react/HistoryRow/index.jsx b/react/HistoryRow/index.jsx index cad246e2ec..ed2dd4aeb1 100644 --- a/react/HistoryRow/index.jsx +++ b/react/HistoryRow/index.jsx @@ -1,14 +1,13 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import styles from './styles.styl' import Circle from '../Circle' import Icon from '../Icon' import DownloadIcon from '../Icons/Download' import FileIcon from '../Icons/File' -import { Media, Bd, Img } from '../deprecated/Media' import Typography from '../Typography' - -import styles from './styles.styl' +import { Media, Bd, Img } from '../deprecated/Media' /** * diff --git a/react/I18n/index.js b/react/I18n/index.js index 64ab57c2bc..fa54778d9a 100644 --- a/react/I18n/index.js +++ b/react/I18n/index.js @@ -1,6 +1,7 @@ import React from 'react' -import DeprecatedI18n, { useI18n as deprecatedUseI18n } from '../providers/I18n' + import createDepreciationLogger from '../helpers/createDepreciationLogger' +import DeprecatedI18n, { useI18n as deprecatedUseI18n } from '../providers/I18n' const logDeprecatedFunc = createDepreciationLogger() const logDeprecatedComp = createDepreciationLogger() diff --git a/react/I18n/withLocales.js b/react/I18n/withLocales.js index 5cc1ef0d72..42fef16b2c 100644 --- a/react/I18n/withLocales.js +++ b/react/I18n/withLocales.js @@ -1,5 +1,5 @@ -import withLocales from '../providers/I18n/withLocales' import createDepreciationLogger from '../helpers/createDepreciationLogger' +import withLocales from '../providers/I18n/withLocales' const logDeprecatedWithLocale = createDepreciationLogger() diff --git a/react/Icon/Sprite.jsx b/react/Icon/Sprite.jsx index ecf006d4b4..c88bf78ab4 100644 --- a/react/Icon/Sprite.jsx +++ b/react/Icon/Sprite.jsx @@ -1,6 +1,7 @@ -import IconSprintContent from './icons-sprite' import React from 'react' +import IconSprintContent from './icons-sprite' + const displayNone = { display: 'none' } const Sprite = () => { diff --git a/react/Icon/index.jsx b/react/Icon/index.jsx index 53e6b66f52..836703cce5 100644 --- a/react/Icon/index.jsx +++ b/react/Icon/index.jsx @@ -1,6 +1,6 @@ -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' diff --git a/react/IconButton/index.jsx b/react/IconButton/index.jsx index 6cd128e864..bd4500fa9d 100644 --- a/react/IconButton/index.jsx +++ b/react/IconButton/index.jsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import cx from 'classnames' import MuiIconButton from '@material-ui/core/IconButton' +import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' const muiSupportedColors = ['default', 'inherit', 'primary', 'secondary'] diff --git a/react/IconStack/index.jsx b/react/IconStack/index.jsx index 93ffd52e93..268fba6e65 100644 --- a/react/IconStack/index.jsx +++ b/react/IconStack/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' import classNames from 'classnames' import PropTypes from 'prop-types' +import React from 'react' -import migrateProps from '../helpers/migrateProps' import styles from './styles.styl' +import migrateProps from '../helpers/migrateProps' const IconStack = ({ backgroundClassName, diff --git a/react/InfosBadge/index.jsx b/react/InfosBadge/index.jsx index ca8d5ac9f1..f7df6cee70 100644 --- a/react/InfosBadge/index.jsx +++ b/react/InfosBadge/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' import Badge from '../Badge' import { withStyles } from '../styles' diff --git a/react/Input/index.jsx b/react/Input/index.jsx index 992502fbd5..50425e3514 100644 --- a/react/Input/index.jsx +++ b/react/Input/index.jsx @@ -1,6 +1,7 @@ -import React, { forwardRef } from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' + import styles from './styles.styl' const Input = forwardRef((props, ref) => { diff --git a/react/InputGroup/index.jsx b/react/InputGroup/index.jsx index f8cc77629b..7499b49564 100644 --- a/react/InputGroup/index.jsx +++ b/react/InputGroup/index.jsx @@ -1,6 +1,7 @@ -import React, { Component } from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React, { Component } from 'react' + import styles from './styles.styl' class InputGroup extends Component { @@ -22,14 +23,8 @@ class InputGroup extends Component { } render() { - const { - children, - prepend, - append, - error, - fullwidth, - className - } = this.props + const { children, prepend, append, error, fullwidth, className } = + this.props const { focused } = this.state return (
(
diff --git a/react/IntentIframe/IntentIframe.jsx b/react/IntentIframe/IntentIframe.jsx index 66561f4800..69925e46ef 100644 --- a/react/IntentIframe/IntentIframe.jsx +++ b/react/IntentIframe/IntentIframe.jsx @@ -1,12 +1,12 @@ -import React from 'react' -import PropTypes from 'prop-types' import get from 'lodash/get' +import PropTypes from 'prop-types' +import React from 'react' -import { Intents } from 'cozy-interapp' import { withClient } from 'cozy-client' +import { Intents } from 'cozy-interapp' -import Spinner from '../Spinner' import styles from './styles.styl' +import Spinner from '../Spinner' const DEFAULT_DATA = { // TODO remove `closeable` since it is only there for backward compatibility @@ -19,15 +19,8 @@ class IntentIframe extends React.Component { state = { loading: false } componentDidMount() { - const { - action, - data, - type, - onCancel, - onError, - onTerminate, - client - } = this.props + const { action, data, type, onCancel, onError, onTerminate, client } = + this.props console.warn( 'Be carful to use `withBreakpoints()` and not `useBreakpoints()` in intents. See https://github.com/cozy/cozy-ui/issues/1807' diff --git a/react/IntentWrapper/index.jsx b/react/IntentWrapper/index.jsx index 88b7dde97a..67970f1c23 100644 --- a/react/IntentWrapper/index.jsx +++ b/react/IntentWrapper/index.jsx @@ -1,8 +1,8 @@ -import React from 'react' +import cx from 'classnames' import PropTypes from 'prop-types' -import styles from './styles.styl' +import React from 'react' -import cx from 'classnames' +import styles from './styles.styl' import { ModalHeader, ModalContent } from '../deprecated/Modal' export const IntentWrapper = ({ diff --git a/react/Label/index.jsx b/react/Label/index.jsx index d7a91f13dc..c305ba2220 100644 --- a/react/Label/index.jsx +++ b/react/Label/index.jsx @@ -1,6 +1,7 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' const Label = props => { diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx index 5124aeb81f..e02c855d10 100644 --- a/react/Labs/CollectionField/index.jsx +++ b/react/Labs/CollectionField/index.jsx @@ -1,15 +1,14 @@ -import React, { useRef } from 'react' import PropTypes from 'prop-types' +import React, { useRef } from 'react' -import Button from '../../deprecated/Button' +import styles from './styles.styl' import { FieldContainer } from '../../Field' import Icon from '../../Icon' -import Label from '../../Label' import CrossSmallIcon from '../../Icons/CrossSmall' import PlusIcon from '../../Icons/Plus' +import Label from '../../Label' import Stack from '../../Stack' - -import styles from './styles.styl' +import Button from '../../deprecated/Button' /** * Handles a collection of form fields. diff --git a/react/Labs/ExperimentalDialog/index.jsx b/react/Labs/ExperimentalDialog/index.jsx index 6d43a329dc..d10253abdb 100644 --- a/react/Labs/ExperimentalDialog/index.jsx +++ b/react/Labs/ExperimentalDialog/index.jsx @@ -1,8 +1,8 @@ import React from 'react' import Dialog from '../../Dialog' -import DialogTitle from '../../Dialog/DialogTitle' import DialogActions from '../../Dialog/DialogActions' +import DialogTitle from '../../Dialog/DialogTitle' import createDepreciationLogger from '../../helpers/createDepreciationLogger' const logDepecratedExperimentalDialog = createDepreciationLogger() diff --git a/react/Labs/IconGrid/index.jsx b/react/Labs/IconGrid/index.jsx index 9b23a9c094..205994c991 100644 --- a/react/Labs/IconGrid/index.jsx +++ b/react/Labs/IconGrid/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import styles from './styles.styl' const IconGrid = ({ children }) => ( diff --git a/react/Labs/PasswordInput/index.jsx b/react/Labs/PasswordInput/index.jsx index 26692e2b98..3d62467072 100644 --- a/react/Labs/PasswordInput/index.jsx +++ b/react/Labs/PasswordInput/index.jsx @@ -1,13 +1,14 @@ -import React, { useState } from 'react' -import Icon from '../../Icon' -import InputGroup from '../../InputGroup' -import Input from '../../Input' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { useState } from 'react' + import { getStrength } from './helpers' import styles from './styles.styl' -import PropTypes from 'prop-types' +import Icon from '../../Icon' import EyeIcon from '../../Icons/Eye' import EyeClosedIcon from '../../Icons/EyeClosed' +import Input from '../../Input' +import InputGroup from '../../InputGroup' const HideShowButton = props => { const { hidden, className, ...rest } = props diff --git a/react/Layout/Layout.jsx b/react/Layout/Layout.jsx index d98153395b..2dc896fef3 100644 --- a/react/Layout/Layout.jsx +++ b/react/Layout/Layout.jsx @@ -1,7 +1,8 @@ -import React, { Component } from 'react' +import cx from 'classnames' import PropTypes from 'prop-types' +import React, { Component } from 'react' + import styles from './styles.styl' -import cx from 'classnames' export const Layout = ({ children, className, monoColumn, ...rest }) => { return ( diff --git a/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx b/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx index a15793d023..183612675a 100644 --- a/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx +++ b/react/ListItem/ExpandedAttributes/ExpandedAttribute.jsx @@ -1,16 +1,15 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import { copyToClipboard } from './helpers' +import Icon from '../../Icon' +import CopyIcon from '../../Icons/Copy' import ListItem from '../../ListItem' -import ListItemText from '../../ListItemText' import ListItemIcon from '../../ListItemIcon' +import ListItemText from '../../ListItemText' import Typography from '../../Typography' -import Icon from '../../Icon' -import CopyIcon from '../../Icons/Copy' import { useI18n } from '../../providers/I18n' -import { copyToClipboard } from './helpers' - const ExpandedAttribute = ({ label, value, setAlertProps }) => { const { t } = useI18n() diff --git a/react/ListItem/ExpandedAttributes/helpers.js b/react/ListItem/ExpandedAttributes/helpers.js index 377e7ebc37..db559298f4 100644 --- a/react/ListItem/ExpandedAttributes/helpers.js +++ b/react/ListItem/ExpandedAttributes/helpers.js @@ -69,22 +69,24 @@ export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => { .filter(x => x) } -export const copyToClipboard = ({ value, setAlertProps, t }) => async () => { - try { - await navigator.clipboard.writeText(value) - setAlertProps({ - open: true, - severity: 'success', - message: t(`ListItem.snackbar.copyToClipboard.success`) - }) - } catch (error) { - setAlertProps({ - open: true, - severity: 'error', - message: t(`ListItem.snackbar.copyToClipboard.error`) - }) +export const copyToClipboard = + ({ value, setAlertProps, t }) => + async () => { + try { + await navigator.clipboard.writeText(value) + setAlertProps({ + open: true, + severity: 'success', + message: t(`ListItem.snackbar.copyToClipboard.success`) + }) + } catch (error) { + setAlertProps({ + open: true, + severity: 'error', + message: t(`ListItem.snackbar.copyToClipboard.error`) + }) + } } -} export const isDate = value => { if (!isNaN(value)) return false diff --git a/react/ListItem/ExpandedAttributes/index.jsx b/react/ListItem/ExpandedAttributes/index.jsx index 376c4c5f9e..0c42c9ede9 100644 --- a/react/ListItem/ExpandedAttributes/index.jsx +++ b/react/ListItem/ExpandedAttributes/index.jsx @@ -1,13 +1,12 @@ -import React, { useState } from 'react' import PropTypes from 'prop-types' +import React, { useState } from 'react' -import Snackbar from '../../Snackbar' +import ExpandedAttribute from './ExpandedAttribute' +import { makeAttrsLabelAndFormattedValue } from './helpers' import Alert from '../../Alert' +import Snackbar from '../../Snackbar' import { useI18n } from '../../providers/I18n' - import withListItemLocales from '../hoc/withListItemLocales' -import ExpandedAttribute from './ExpandedAttribute' -import { makeAttrsLabelAndFormattedValue } from './helpers' const ExpandedAttributes = ({ doc, expandedAttributes }) => { const { t, f, lang } = useI18n() diff --git a/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx b/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx index 666a9c019b..a8d85f74bf 100644 --- a/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx +++ b/react/ListItem/ListItemBase/Renaming/RenameDialog.jsx @@ -1,10 +1,9 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Button from '../../../Buttons' import { ConfirmDialog } from '../../../CozyDialogs' import { useI18n } from '../../../providers/I18n' - import withListItemLocales from '../../hoc/withListItemLocales' const RenameDialog = ({ onSubmit, onCancel }) => { diff --git a/react/ListItem/ListItemBase/Renaming/RenameInput.jsx b/react/ListItem/ListItemBase/Renaming/RenameInput.jsx index a058275d3b..9f68220714 100644 --- a/react/ListItem/ListItemBase/Renaming/RenameInput.jsx +++ b/react/ListItem/ListItemBase/Renaming/RenameInput.jsx @@ -1,16 +1,15 @@ -import React, { useEffect, useReducer, useRef, useState } from 'react' import PropTypes from 'prop-types' +import React, { useEffect, useReducer, useRef, useState } from 'react' import { useClient } from 'cozy-client' import { splitFilename } from 'cozy-client/dist/models/file' -import { makeStyles } from '../../../styles' +import RenameDialog from './RenameDialog' +import { renameFile } from './helpers' import Input from '../../../Input' import InputGroup from '../../../InputGroup' import Spinner from '../../../Spinner' - -import RenameDialog from './RenameDialog' -import { renameFile } from './helpers' +import { makeStyles } from '../../../styles' const KEYS = { ESCAPE: 'Escape', diff --git a/react/ListItem/ListItemBase/index.jsx b/react/ListItem/ListItemBase/index.jsx index e5648b6d88..423b0bd6ea 100644 --- a/react/ListItem/ListItemBase/index.jsx +++ b/react/ListItem/ListItemBase/index.jsx @@ -1,20 +1,19 @@ -import React, { useState, useRef } from 'react' import PropTypes from 'prop-types' +import React, { useState, useRef } from 'react' +import RenameInput from './Renaming/RenameInput' import ListItem from '..' -import ListItemText from '../../ListItemText' -import ListItemIcon from '../../ListItemIcon' -import ListItemSecondaryAction from '../../ListItemSecondaryAction' -import IconButton from '../../IconButton' -import Icon from '../../Icon' -import DotsIcon from '../../Icons/Dots' -import Checkbox from '../../Checkbox' import ActionsMenu from '../../ActionsMenu' import ActionsMenuMobileHeader from '../../ActionsMenu/ActionsMenuMobileHeader' - -import withListItemLocales from '../hoc/withListItemLocales' +import Checkbox from '../../Checkbox' +import Icon from '../../Icon' +import IconButton from '../../IconButton' +import DotsIcon from '../../Icons/Dots' +import ListItemIcon from '../../ListItemIcon' +import ListItemSecondaryAction from '../../ListItemSecondaryAction' +import ListItemText from '../../ListItemText' import ExpandedAttributes from '../ExpandedAttributes' -import RenameInput from './Renaming/RenameInput' +import withListItemLocales from '../hoc/withListItemLocales' const ListItemBase = ({ doc, diff --git a/react/ListItem/ListItemByDoc/index.jsx b/react/ListItem/ListItemByDoc/index.jsx index a0c740da21..e0e6e3286a 100644 --- a/react/ListItem/ListItemByDoc/index.jsx +++ b/react/ListItem/ListItemByDoc/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import ListItemFile from '../ListItemFile' -import ListItemContact from '../ListItemContact' import { makeDefaultExpandedAttributes } from '../ExpandedAttributes/helpers' +import ListItemContact from '../ListItemContact' +import ListItemFile from '../ListItemFile' const ListItemByDoc = ({ doc, diff --git a/react/ListItem/ListItemContact/helpers.spec.js b/react/ListItem/ListItemContact/helpers.spec.js index 210ba44091..3d5039ce20 100644 --- a/react/ListItem/ListItemContact/helpers.spec.js +++ b/react/ListItem/ListItemContact/helpers.spec.js @@ -1,6 +1,5 @@ -import { divider, emailTo, smsTo, call } from '../../ActionsMenu/Actions' - import { makeOptionalActions } from './helpers' +import { divider, emailTo, smsTo, call } from '../../ActionsMenu/Actions' describe('makeOptionalActions', () => { it('should return divider, call, smsTo, emailTo', () => { diff --git a/react/ListItem/ListItemContact/index.jsx b/react/ListItem/ListItemContact/index.jsx index 85997b3980..32a2f6be6c 100644 --- a/react/ListItem/ListItemContact/index.jsx +++ b/react/ListItem/ListItemContact/index.jsx @@ -1,14 +1,13 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { getDisplayName } from 'cozy-client/dist/models/contact' +import useActions from './useActions' import Filename from '../../Filename' import Icon from '../../Icon' import ContactsIcon from '../../Icons/Contacts' - import ListItemBase from '../ListItemBase' -import useActions from './useActions' const ListItemContact = ({ contact, diff --git a/react/ListItem/ListItemContact/useActions.jsx b/react/ListItem/ListItemContact/useActions.jsx index 57aa3d240f..1a4fc4ae03 100644 --- a/react/ListItem/ListItemContact/useActions.jsx +++ b/react/ListItem/ListItemContact/useActions.jsx @@ -1,8 +1,7 @@ import { useMemo } from 'react' -import { makeActions, modify, viewInContacts } from '../../ActionsMenu/Actions' - import { makeOptionalActions } from './helpers' +import { makeActions, modify, viewInContacts } from '../../ActionsMenu/Actions' const useActions = contact => { const optionalActions = useMemo(() => makeOptionalActions(contact), [contact]) diff --git a/react/ListItem/ListItemFile/ExpirationAnnotation.jsx b/react/ListItem/ListItemFile/ExpirationAnnotation.jsx index ea35a0b0d6..e8698a3e6c 100644 --- a/react/ListItem/ListItemFile/ExpirationAnnotation.jsx +++ b/react/ListItem/ListItemFile/ExpirationAnnotation.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { computeExpirationDate, @@ -10,7 +10,6 @@ import { import Typography from '../../Typography' import { useI18n } from '../../providers/I18n' - import withListItemLocales from '../hoc/withListItemLocales' const ExpirationAnnotation = ({ file }) => { diff --git a/react/ListItem/ListItemFile/ItemIcon.jsx b/react/ListItem/ListItemFile/ItemIcon.jsx index 7054db298c..e389c15599 100644 --- a/react/ListItem/ListItemFile/ItemIcon.jsx +++ b/react/ListItem/ListItemFile/ItemIcon.jsx @@ -1,15 +1,15 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { useClient } from 'cozy-client' import { isNote } from 'cozy-client/dist/models/file' +import FileImageLoader from '../../FileImageLoader' import Icon from '../../Icon' -import FiletypeTextIcon from '../../Icons/FileTypeText' import FiletypeNoteIcon from '../../Icons/FileTypeNote' -import FileImageLoader from '../../FileImageLoader' -import Thumbnail from '../../Thumbnail' +import FiletypeTextIcon from '../../Icons/FileTypeText' import Skeleton from '../../Skeleton' +import Thumbnail from '../../Thumbnail' const ItemIcon = ({ icon, file }) => { const client = useClient() diff --git a/react/ListItem/ListItemFile/PrimaryText.jsx b/react/ListItem/ListItemFile/PrimaryText.jsx index f57554d58b..72812653d4 100644 --- a/react/ListItem/ListItemFile/PrimaryText.jsx +++ b/react/ListItem/ListItemFile/PrimaryText.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { splitFilename } from 'cozy-client/dist/models/file' diff --git a/react/ListItem/ListItemFile/SecondaryText.jsx b/react/ListItem/ListItemFile/SecondaryText.jsx index 7f935757ae..1f736e8814 100644 --- a/react/ListItem/ListItemFile/SecondaryText.jsx +++ b/react/ListItem/ListItemFile/SecondaryText.jsx @@ -1,11 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { isExpired, isExpiringSoon } from 'cozy-client/dist/models/paper' -import { useI18n } from '../../providers/I18n' - import ExpirationAnnotation from './ExpirationAnnotation' +import { useI18n } from '../../providers/I18n' const SecondaryText = ({ secondary, file }) => { const { f } = useI18n() diff --git a/react/ListItem/ListItemFile/index.jsx b/react/ListItem/ListItemFile/index.jsx index ebc84fa32b..375a7d4aaa 100644 --- a/react/ListItem/ListItemFile/index.jsx +++ b/react/ListItem/ListItemFile/index.jsx @@ -1,15 +1,14 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { splitFilename } from 'cozy-client/dist/models/file' -import Filename from '../../Filename' -import FiletypePdfIcon from '../../Icons/FileTypePdf' - -import ListItemBase from '../ListItemBase' import ItemIcon from './ItemIcon' import PrimaryText from './PrimaryText' import SecondaryText from './SecondaryText' +import Filename from '../../Filename' +import FiletypePdfIcon from '../../Icons/FileTypePdf' +import ListItemBase from '../ListItemBase' const ListItemFile = ({ file, diff --git a/react/ListItem/hoc/withListItemLocales.jsx b/react/ListItem/hoc/withListItemLocales.jsx index 0f95ca95c9..1540e9f754 100644 --- a/react/ListItem/hoc/withListItemLocales.jsx +++ b/react/ListItem/hoc/withListItemLocales.jsx @@ -1,5 +1,4 @@ import withLocales from '../../providers/I18n/withLocales' - import en from '../locales/en.json' import fr from '../locales/fr.json' diff --git a/react/ListItem/index.js b/react/ListItem/index.js index 6fe9dd3184..8377ac3449 100644 --- a/react/ListItem/index.js +++ b/react/ListItem/index.js @@ -1,9 +1,9 @@ -import React, { forwardRef } from 'react' -import cx from 'classnames' -import PropTypes from 'prop-types' -import merge from 'lodash/merge' import MuiListItem from '@material-ui/core/ListItem' import isMuiElement from '@material-ui/core/utils/isMuiElement' +import cx from 'classnames' +import merge from 'lodash/merge' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import { makeStyles } from '../styles' import { diff --git a/react/ListItemIcon/index.js b/react/ListItemIcon/index.js index e8bd03e320..6f4629d2d4 100644 --- a/react/ListItemIcon/index.js +++ b/react/ListItemIcon/index.js @@ -1,7 +1,6 @@ -import React, { forwardRef } from 'react' import MuiListItemIcon from '@material-ui/core/ListItemIcon' - import cx from 'classnames' +import React, { forwardRef } from 'react' export const smallSize = 16 export const mediumSize = 24 diff --git a/react/ListItemText/index.jsx b/react/ListItemText/index.jsx index 3c0b54e432..ca1993a653 100644 --- a/react/ListItemText/index.jsx +++ b/react/ListItemText/index.jsx @@ -1,7 +1,7 @@ -import React, { forwardRef, useEffect, useMemo } from 'react' -import cx from 'classnames' import MUIListItemText from '@material-ui/core/ListItemText' +import cx from 'classnames' import once from 'lodash/once' +import React, { forwardRef, useEffect, useMemo } from 'react' const logDeprecatedWarning = once(() => { console.warn( diff --git a/react/ListSubheader/index.js b/react/ListSubheader/index.js index 8f6ae4649d..0b33d0732a 100644 --- a/react/ListSubheader/index.js +++ b/react/ListSubheader/index.js @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' -import merge from 'lodash/merge' import MuiListSubheader from '@material-ui/core/ListSubheader' +import merge from 'lodash/merge' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import { makeStyles } from '../styles' diff --git a/react/LoadMore/index.jsx b/react/LoadMore/index.jsx index fc135c4c2a..4369fc8cbb 100644 --- a/react/LoadMore/index.jsx +++ b/react/LoadMore/index.jsx @@ -1,7 +1,8 @@ -import React, { useState, useEffect, useRef, useCallback } from 'react' import PropTypes from 'prop-types' -import Button from '../deprecated/Button' +import React, { useState, useEffect, useRef, useCallback } from 'react' + import Spinner from '../Spinner' +import Button from '../deprecated/Button' import 'intersection-observer' // polyfill for safari (mobile and desktop) diff --git a/react/MenuItem/index.js b/react/MenuItem/index.js index fc57f73ac6..7265730ef1 100644 --- a/react/MenuItem/index.js +++ b/react/MenuItem/index.js @@ -1,5 +1,5 @@ -import React, { forwardRef } from 'react' import MuiMenuItem from '@material-ui/core/MenuItem' +import React, { forwardRef } from 'react' import ListItem, { LitItemPropTypes } from '../ListItem' diff --git a/react/MidEllipsis/index.jsx b/react/MidEllipsis/index.jsx index 7e1a5bcb12..ae6b48ccf7 100644 --- a/react/MidEllipsis/index.jsx +++ b/react/MidEllipsis/index.jsx @@ -1,6 +1,6 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' /** The left-to-right mark (LRM) is a control character (an invisible formatting character) * used in computerized typesetting (including word processing in a program like Microsoft Word) diff --git a/react/MuiCozyTheme/Divider/index.jsx b/react/MuiCozyTheme/Divider/index.jsx index eb92f8030f..5ecf3fc8b7 100644 --- a/react/MuiCozyTheme/Divider/index.jsx +++ b/react/MuiCozyTheme/Divider/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import Divider from '../../Divider' import createDepreciationLogger from '../../helpers/createDepreciationLogger' diff --git a/react/MuiCozyTheme/List/index.jsx b/react/MuiCozyTheme/List/index.jsx index a561b0775d..bce3e15e3f 100644 --- a/react/MuiCozyTheme/List/index.jsx +++ b/react/MuiCozyTheme/List/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import List from '../../List' import createDepreciationLogger from '../../helpers/createDepreciationLogger' diff --git a/react/MuiCozyTheme/ListItem/index.jsx b/react/MuiCozyTheme/ListItem/index.jsx index a8fddec68f..c4173396c8 100644 --- a/react/MuiCozyTheme/ListItem/index.jsx +++ b/react/MuiCozyTheme/ListItem/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import ListItem from '../../ListItem' import createDepreciationLogger from '../../helpers/createDepreciationLogger' diff --git a/react/MuiCozyTheme/ListItemIcon/index.jsx b/react/MuiCozyTheme/ListItemIcon/index.jsx index 543d7253cc..39bea5c271 100644 --- a/react/MuiCozyTheme/ListItemIcon/index.jsx +++ b/react/MuiCozyTheme/ListItemIcon/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import ListItemIcon from '../../ListItemIcon' import createDepreciationLogger from '../../helpers/createDepreciationLogger' diff --git a/react/MuiCozyTheme/ListItemSecondaryAction/index.jsx b/react/MuiCozyTheme/ListItemSecondaryAction/index.jsx index 6f2fba35be..7ecb99e66f 100644 --- a/react/MuiCozyTheme/ListItemSecondaryAction/index.jsx +++ b/react/MuiCozyTheme/ListItemSecondaryAction/index.jsx @@ -1,4 +1,5 @@ import React from 'react' + import ListItemSecondaryAction from '../../ListItemSecondaryAction' import createDepreciationLogger from '../../helpers/createDepreciationLogger' diff --git a/react/MuiCozyTheme/index.jsx b/react/MuiCozyTheme/index.jsx index 53aca5a9d3..6254bc3e77 100644 --- a/react/MuiCozyTheme/index.jsx +++ b/react/MuiCozyTheme/index.jsx @@ -1,8 +1,8 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import { ThemeProvider } from '../styles' import { getTheme } from './theme' +import { ThemeProvider } from '../styles' const MuiCozyTheme = ({ type, variant, children }) => { const theme = getTheme(type, variant) diff --git a/react/MuiCozyTheme/makeTheme.jsx b/react/MuiCozyTheme/makeTheme.jsx index 1b869f50f8..bc2e6d237d 100644 --- a/react/MuiCozyTheme/makeTheme.jsx +++ b/react/MuiCozyTheme/makeTheme.jsx @@ -1,14 +1,13 @@ -import { createTheme } from '../styles' -import isTesting from '../helpers/isTesting' -import { createNodeWithThemeCssVars } from '../utils/color' - import { makeShadows } from './helpers' import { makePalette } from './makePalette' import { makeTypography } from './makeTypography' -import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides' -import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides' -import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides' import { makeDarkInvertedOverrides } from './overrides/makeDarkInvertedOverrides' +import { makeDarkNormalOverrides } from './overrides/makeDarkNormalOverrides' +import { makeLightInvertedOverrides } from './overrides/makeLightInvertedOverrides' +import { makeLightNormalOverrides } from './overrides/makeLightNormalOverrides' +import isTesting from '../helpers/isTesting' +import { createTheme } from '../styles' +import { createNodeWithThemeCssVars } from '../utils/color' const makeOverridesByTheme = theme => ({ light: { diff --git a/react/MuiTabs/index.jsx b/react/MuiTabs/index.jsx index c73abbd85c..a65e6f5582 100644 --- a/react/MuiTabs/index.jsx +++ b/react/MuiTabs/index.jsx @@ -1,6 +1,7 @@ -import React from 'react' -import MuiTabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab' +import MuiTabs from '@material-ui/core/Tabs' +import React from 'react' + import useBreakpoints from '../providers/Breakpoints' const Tabs = props => { diff --git a/react/Nav/index.jsx b/react/Nav/index.jsx index cf78a9368c..7132695de4 100644 --- a/react/Nav/index.jsx +++ b/react/Nav/index.jsx @@ -1,12 +1,13 @@ +import cx from 'classnames' import React, { Children, isValidElement, useState, forwardRef } from 'react' -import Icon from '../Icon' + +import withNavLocales from './locales/withNavLocales' import styles from './styles.styl' -import cx from 'classnames' +import Icon from '../Icon' import BottomIcon from '../Icons/Bottom' import TopIcon from '../Icons/Top' -import { useI18n } from '../providers/I18n' -import withNavLocales from './locales/withNavLocales' import useBreakpoints from '../providers/Breakpoints' +import { useI18n } from '../providers/I18n' export const NavItem = ({ children, secondary, ...restProps }) => (
  • ({ to, children, ...rest }) => ( - - {children} - -) +export const genNavLink = + RRNavLink => + ({ to, children, ...rest }) => + ( + + {children} + + ) // Generates a styled NavLink for react-routeur v6 export const genNavLinkForV6 = RRNavLink => diff --git a/react/Nav/locales/withNavLocales.jsx b/react/Nav/locales/withNavLocales.jsx index 97f266acb3..67dbe68a3a 100644 --- a/react/Nav/locales/withNavLocales.jsx +++ b/react/Nav/locales/withNavLocales.jsx @@ -1,6 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/NavigationList/index.jsx b/react/NavigationList/index.jsx index 038c72b86f..9167632033 100644 --- a/react/NavigationList/index.jsx +++ b/react/NavigationList/index.jsx @@ -1,12 +1,13 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' + +import styles from './styles.styl' +import Card from '../Card' import List from '../List' +import ListSubheader from '../ListSubheader' import Stack from '../Stack' -import Card from '../Card' import Typography from '../Typography' import useBreakpoints from '../providers/Breakpoints' -import ListSubheader from '../ListSubheader' -import styles from './styles.styl' const NavigationList = ({ children, style, className }) => { const { isMobile } = useBreakpoints() diff --git a/react/NestedSelect/BottomSheet.jsx b/react/NestedSelect/BottomSheet.jsx index 270fa26d81..b51d0fcbac 100644 --- a/react/NestedSelect/BottomSheet.jsx +++ b/react/NestedSelect/BottomSheet.jsx @@ -1,14 +1,13 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' +import NestedSelect from './NestedSelect' +import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet' +import Divider from '../Divider' import Icon from '../Icon' import IconButton from '../IconButton' import ArrowUpIcon from '../Icons/ArrowUp' -import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet' import Typography from '../Typography' -import Divider from '../Divider' - -import NestedSelect from './NestedSelect' const HeaderComponent = ({ title, showBack, onClickBack }) => { if (!title) return null diff --git a/react/NestedSelect/ItemRow.jsx b/react/NestedSelect/ItemRow.jsx index a1a8ed2a91..dad5ea0e71 100644 --- a/react/NestedSelect/ItemRow.jsx +++ b/react/NestedSelect/ItemRow.jsx @@ -1,15 +1,15 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import Divider from '../Divider' import Icon from '../Icon' import RightIcon from '../Icons/Right' -import ListItemText from '../ListItemText' -import Divider from '../Divider' import ListItem from '../ListItem' import ListItemIcon from '../ListItemIcon' +import ListItemText from '../ListItemText' import Radio from '../Radios' -import useBreakpoints from '../providers/Breakpoints' import Typography from '../Typography' +import useBreakpoints from '../providers/Breakpoints' const infoStyle = { color: 'var(--secondaryTextColor)' } diff --git a/react/NestedSelect/Modal.jsx b/react/NestedSelect/Modal.jsx index df03742303..e2e3414c1d 100644 --- a/react/NestedSelect/Modal.jsx +++ b/react/NestedSelect/Modal.jsx @@ -1,15 +1,14 @@ import React from 'react' +import NestedSelect from './NestedSelect' +import styles from './styles.styl' import { useCozyDialog, DialogCloseButton } from '../CozyDialogs' import Dialog, { DialogTitle, DialogContent } from '../Dialog' import Icon from '../Icon' import IconButton from '../IconButton' import LeftIcon from '../Icons/Left' -import { Media, Bd, Img } from '../deprecated/Media' - -import NestedSelect from './NestedSelect' -import styles from './styles.styl' import List from '../List' +import { Media, Bd, Img } from '../deprecated/Media' const NestedSelectDialogHeader = ({ onClickBack, showBack, title }) => { const { dialogTitleProps } = useCozyDialog({ @@ -50,7 +49,7 @@ const NestedSelectModal = props => { { const { isMobile } = useBreakpoints() diff --git a/react/OrderedList/index.jsx b/react/OrderedList/index.jsx index 1de465d8a6..192f7e2433 100644 --- a/react/OrderedList/index.jsx +++ b/react/OrderedList/index.jsx @@ -1,7 +1,8 @@ -import React from 'react' -import Stack from '../Stack' import cx from 'classnames' +import React from 'react' + import styles from './styles.styl' +import Stack from '../Stack' export const OrderedList = props => { const { className, ...rest } = props diff --git a/react/Page/index.jsx b/react/Page/index.jsx index 8d863b7863..c9fb880cd8 100644 --- a/react/Page/index.jsx +++ b/react/Page/index.jsx @@ -8,6 +8,7 @@ */ import React from 'react' + import { useKeyboardInfo } from './keyboard' import styles from './styles.styl' import useBreakpoints from '../providers/Breakpoints' diff --git a/react/Panel/index.jsx b/react/Panel/index.jsx index c22263c1d1..9a9157544c 100644 --- a/react/Panel/index.jsx +++ b/react/Panel/index.jsx @@ -1,5 +1,5 @@ -import { mkComponent } from '../utils' import styles from './styles.styl' +import { mkComponent } from '../utils' export const Group = mkComponent('div', { className: styles['Panel-group'] }) export const Main = mkComponent('div', { className: styles['Panel-main'] }) diff --git a/react/PasswordExample/index.jsx b/react/PasswordExample/index.jsx index 762d7daec6..7b569c1c8e 100644 --- a/react/PasswordExample/index.jsx +++ b/react/PasswordExample/index.jsx @@ -1,7 +1,8 @@ -import React from 'react' import cx from 'classnames' -import InlineCard from '../deprecated/InlineCard' +import React from 'react' + import styles from './styles.styl' +import InlineCard from '../deprecated/InlineCard' const alphaRegexp = /^[a-z]$/i const numberRegexp = /^[0-9]$/ diff --git a/react/PasswordField/index.jsx b/react/PasswordField/index.jsx index 24877cac86..6fd9ede84c 100644 --- a/react/PasswordField/index.jsx +++ b/react/PasswordField/index.jsx @@ -1,17 +1,16 @@ import React, { useState } from 'react' -import TextField from '../TextField' -import IconButton from '../IconButton' +import en from './locales/en.json' +import fr from './locales/fr.json' import Icon from '../Icon' -import InputAdornment from '../InputAdornment' +import IconButton from '../IconButton' import EyeIcon from '../Icons/Eye' import EyeClosedIcon from '../Icons/EyeClosed' +import InputAdornment from '../InputAdornment' +import TextField from '../TextField' import { useI18n } from '../providers/I18n' import withOnlyLocales from '../providers/I18n/withOnlyLocales' -import en from './locales/en.json' -import fr from './locales/fr.json' - export const locales = { en, fr diff --git a/react/Paywall/MaxAccountsByKonnectorPaywall.jsx b/react/Paywall/MaxAccountsByKonnectorPaywall.jsx index 1207ae344b..efde7d0a6f 100644 --- a/react/Paywall/MaxAccountsByKonnectorPaywall.jsx +++ b/react/Paywall/MaxAccountsByKonnectorPaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' import withPaywallLocales from './locales/withPaywallLocales' diff --git a/react/Paywall/MaxAccountsPaywall.jsx b/react/Paywall/MaxAccountsPaywall.jsx index 0f78fbce3e..68558fff99 100644 --- a/react/Paywall/MaxAccountsPaywall.jsx +++ b/react/Paywall/MaxAccountsPaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' import withPaywallLocales from './locales/withPaywallLocales' diff --git a/react/Paywall/MaxDaysToCapturePaywall.jsx b/react/Paywall/MaxDaysToCapturePaywall.jsx index f03360e16c..ab8fc4e84c 100644 --- a/react/Paywall/MaxDaysToCapturePaywall.jsx +++ b/react/Paywall/MaxDaysToCapturePaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' import withPaywallLocales from './locales/withPaywallLocales' diff --git a/react/Paywall/MaxPapersPaywall.jsx b/react/Paywall/MaxPapersPaywall.jsx index 1a72f9fa04..13785ebe9c 100644 --- a/react/Paywall/MaxPapersPaywall.jsx +++ b/react/Paywall/MaxPapersPaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' import withPaywallLocales from './locales/withPaywallLocales' diff --git a/react/Paywall/OnlyOfficePaywall.jsx b/react/Paywall/OnlyOfficePaywall.jsx index 1c2c3b1cb2..50379fccbd 100644 --- a/react/Paywall/OnlyOfficePaywall.jsx +++ b/react/Paywall/OnlyOfficePaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' diff --git a/react/Paywall/PasswordSharingPaywall.jsx b/react/Paywall/PasswordSharingPaywall.jsx index 4502e7ab29..82d05e5421 100644 --- a/react/Paywall/PasswordSharingPaywall.jsx +++ b/react/Paywall/PasswordSharingPaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' diff --git a/react/Paywall/Paywall.jsx b/react/Paywall/Paywall.jsx index 8db6cf5cac..160144bf1e 100644 --- a/react/Paywall/Paywall.jsx +++ b/react/Paywall/Paywall.jsx @@ -1,22 +1,22 @@ +import PropTypes from 'prop-types' import React, { useEffect, useState } from 'react' import ReactMarkdown from 'react-markdown' -import PropTypes from 'prop-types' -import { isFlagshipApp } from 'cozy-device-helper' import { useInstanceInfo } from 'cozy-client' import { buildPremiumLink } from 'cozy-client/dist/models/instance' +import { isFlagshipApp } from 'cozy-device-helper' import flag from 'cozy-flags' import { useWebviewIntent } from 'cozy-intent' -import Spinner from '../Spinner' +import { makeType } from './helpers' +import withPaywallLocales from './locales/withPaywallLocales' +import Button from '../Buttons' import { IllustrationDialog } from '../CozyDialogs' import Icon from '../Icon' import CozyUpgradeIcon from '../Icons/CozyUpgrade' -import Button from '../Buttons' +import Spinner from '../Spinner' import Typography from '../Typography' -import { makeType } from './helpers' import { useI18n } from '../providers/I18n' -import withPaywallLocales from './locales/withPaywallLocales' /** * Component with the core logic of the paywall, which is then declined in several variants to adapt to the user case diff --git a/react/Paywall/Paywall.spec.jsx b/react/Paywall/Paywall.spec.jsx index 2d17b4cd32..9fbfd144cb 100644 --- a/react/Paywall/Paywall.spec.jsx +++ b/react/Paywall/Paywall.spec.jsx @@ -1,13 +1,13 @@ -import React from 'react' import { render, screen, fireEvent } from '@testing-library/react' +import React from 'react' import { createMockClient, useInstanceInfo } from 'cozy-client' import { isFlagshipApp } from 'cozy-device-helper' import flag from 'cozy-flags' import { useWebviewIntent } from 'cozy-intent' -import DemoProvider from '../providers/DemoProvider' import Paywall from './Paywall' +import DemoProvider from '../providers/DemoProvider' jest.mock('cozy-device-helper', () => ({ ...jest.requireActual('cozy-device-helper'), diff --git a/react/Paywall/QuotaPaywall.jsx b/react/Paywall/QuotaPaywall.jsx index 482e47c5da..a3f055eb18 100644 --- a/react/Paywall/QuotaPaywall.jsx +++ b/react/Paywall/QuotaPaywall.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Paywall from './Paywall' diff --git a/react/Paywall/index.jsx b/react/Paywall/index.jsx index 6cfdadd6cf..a0cbd70cf7 100644 --- a/react/Paywall/index.jsx +++ b/react/Paywall/index.jsx @@ -1,8 +1,6 @@ export { default as OnlyOfficePaywall } from './OnlyOfficePaywall' export { default as PasswordSharingPaywall } from './PasswordSharingPaywall' -export { - default as MaxAccountsByKonnectorPaywall -} from './MaxAccountsByKonnectorPaywall' +export { default as MaxAccountsByKonnectorPaywall } from './MaxAccountsByKonnectorPaywall' export { default as MaxAccountsPaywall } from './MaxAccountsPaywall' export { default as MaxPapersPaywall } from './MaxPapersPaywall' export { default as QuotaPaywall } from './QuotaPaywall' diff --git a/react/Paywall/locales/withPaywallLocales.jsx b/react/Paywall/locales/withPaywallLocales.jsx index 2fc686b9b8..4db577f977 100644 --- a/react/Paywall/locales/withPaywallLocales.jsx +++ b/react/Paywall/locales/withPaywallLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' const locales = { en, diff --git a/react/PieChart/index.jsx b/react/PieChart/index.jsx index bc2f2ab067..c42706d463 100644 --- a/react/PieChart/index.jsx +++ b/react/PieChart/index.jsx @@ -1,15 +1,15 @@ -import React from 'react' -import PropTypes from 'prop-types' -import cx from 'classnames' -import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js' -import { Doughnut } from 'react-chartjs-2' import { useTheme } from '@material-ui/core' -import set from 'lodash/set' +import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js' +import cx from 'classnames' import cloneDeep from 'lodash/cloneDeep' +import set from 'lodash/set' +import PropTypes from 'prop-types' +import React from 'react' +import { Doughnut } from 'react-chartjs-2' -import { makeStyles } from '../styles' import Typography from '../Typography' import isTesting from '../helpers/isTesting' +import { makeStyles } from '../styles' ChartJS.register(ArcElement, Tooltip) diff --git a/react/PointerAlert/index.jsx b/react/PointerAlert/index.jsx index e4fde39ac4..9e9d94f855 100644 --- a/react/PointerAlert/index.jsx +++ b/react/PointerAlert/index.jsx @@ -1,12 +1,11 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' -import { makeStyles } from '../styles' -import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers' import { AlertPropTypes, AlertDefaultProps } from '../Alert' - import Alert from '../Alert' +import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers' +import { makeStyles } from '../styles' const useStyles = makeStyles(theme => ({ topArrow: { diff --git a/react/Popup/index.jsx b/react/Popup/index.jsx index 964e8c1c40..488ff1850c 100644 --- a/react/Popup/index.jsx +++ b/react/Popup/index.jsx @@ -1,5 +1,5 @@ -import { PureComponent } from 'react' import PropTypes from 'prop-types' +import { PureComponent } from 'react' import { isMobileApp } from 'cozy-device-helper' diff --git a/react/Popup/index.spec.jsx b/react/Popup/index.spec.jsx index 4f9f2b93e7..069b0f8565 100644 --- a/react/Popup/index.spec.jsx +++ b/react/Popup/index.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { shallow } from 'enzyme' +import React from 'react' import { isMobileApp } from 'cozy-device-helper' diff --git a/react/PopupOpener/index.jsx b/react/PopupOpener/index.jsx index b8c0ebf328..e12a440801 100644 --- a/react/PopupOpener/index.jsx +++ b/react/PopupOpener/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' // customized function to center a popup window // source https://stackoverflow.com/a/16861050 diff --git a/react/ProgressionBanner/index.jsx b/react/ProgressionBanner/index.jsx index c7521a58ff..c7292b8d21 100644 --- a/react/ProgressionBanner/index.jsx +++ b/react/ProgressionBanner/index.jsx @@ -1,10 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' -import { withStyles } from '../styles' import Banner from '../Banner' import { LinearProgress } from '../Progress' import Typography from '../Typography' +import { withStyles } from '../styles' const progressHeight = '0.125rem' diff --git a/react/QualificationGrid/index.jsx b/react/QualificationGrid/index.jsx index 57ceb98772..a6ecb6d226 100644 --- a/react/QualificationGrid/index.jsx +++ b/react/QualificationGrid/index.jsx @@ -1,22 +1,21 @@ -import React, { Fragment, useState } from 'react' import PropTypes from 'prop-types' +import React, { Fragment, useState } from 'react' +import { getThemesList } from './helpers' +import withLocales from './locales/withLocales' import Grid from '../Grid' -import QualificationItem from '../QualificationItem' -import { useI18n } from '../providers/I18n' +import BankIcon from '../Icons/Bank' +import BillIcon from '../Icons/Bill' +import CarIcon from '../Icons/Car' +import ChessIcon from '../Icons/Chess' +import DotsIcon from '../Icons/Dots' +import HeartIcon from '../Icons/Heart' import PeopleIcon from '../Icons/People' import TeamIcon from '../Icons/Team' import WorkIcon from '../Icons/Work' -import ChessIcon from '../Icons/Chess' -import HeartIcon from '../Icons/Heart' import HomeIcon from '../Icons/Home' -import CarIcon from '../Icons/Car' -import BankIcon from '../Icons/Bank' -import BillIcon from '../Icons/Bill' -import DotsIcon from '../Icons/Dots' - -import withLocales from './locales/withLocales' -import { getThemesList } from './helpers' +import QualificationItem from '../QualificationItem' +import { useI18n } from '../providers/I18n' const IconByName = { people: PeopleIcon, diff --git a/react/QualificationGrid/locales/withLocales.jsx b/react/QualificationGrid/locales/withLocales.jsx index 741c2c71f6..67dbe68a3a 100644 --- a/react/QualificationGrid/locales/withLocales.jsx +++ b/react/QualificationGrid/locales/withLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/QualificationItem/index.jsx b/react/QualificationItem/index.jsx index 816f421f78..f594badbd9 100644 --- a/react/QualificationItem/index.jsx +++ b/react/QualificationItem/index.jsx @@ -1,10 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import ButtonBase from '../ButtonBase' import Icon, { iconPropType } from '../Icon' -import FileDuotoneIcon from '../Icons/FileDuotone' import IconStack from '../IconStack' +import FileDuotoneIcon from '../Icons/FileDuotone' import Typography from '../Typography' import { makeStyles } from '../styles' diff --git a/react/Radios/index.jsx b/react/Radios/index.jsx index 43f99422a3..adacacc072 100644 --- a/react/Radios/index.jsx +++ b/react/Radios/index.jsx @@ -1,6 +1,5 @@ -import React from 'react' - import MuiRadio from '@material-ui/core/Radio' +import React from 'react' import Icon from '../Icon' import RadioCheckedIcon from '../Icons/RadioChecked' diff --git a/react/SearchBar/index.jsx b/react/SearchBar/index.jsx index 62590ec99f..7ca4dc3e7e 100644 --- a/react/SearchBar/index.jsx +++ b/react/SearchBar/index.jsx @@ -1,17 +1,17 @@ -import React, { forwardRef, useState, useMemo } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' import debounce from 'lodash/debounce' +import PropTypes from 'prop-types' +import React, { forwardRef, useState, useMemo } from 'react' -import { useI18n } from '../providers/I18n' import withOnlyLocales from './locales/withOnlyLocales' -import { makeStyles } from '../styles' -import Paper from '../Paper' -import InputBase from '../InputBase' -import IconButton from '../IconButton' import Icon from '../Icon' -import MagnifierIcon from '../Icons/Magnifier' +import IconButton from '../IconButton' import CrossCircleIcon from '../Icons/CrossCircle' +import MagnifierIcon from '../Icons/Magnifier' +import InputBase from '../InputBase' +import Paper from '../Paper' +import { useI18n } from '../providers/I18n' +import { makeStyles } from '../styles' const useStyles = makeStyles(theme => ({ root: { diff --git a/react/SearchBar/locales/withOnlyLocales.jsx b/react/SearchBar/locales/withOnlyLocales.jsx index 741c2c71f6..67dbe68a3a 100644 --- a/react/SearchBar/locales/withOnlyLocales.jsx +++ b/react/SearchBar/locales/withOnlyLocales.jsx @@ -1,7 +1,6 @@ -import withOnlyLocales from '../../providers/I18n/withOnlyLocales' - import en from './en.json' import fr from './fr.json' +import withOnlyLocales from '../../providers/I18n/withOnlyLocales' export const locales = { en, diff --git a/react/SelectBox/ControlDefault.jsx b/react/SelectBox/ControlDefault.jsx index 87da5df481..b7c9e387af 100644 --- a/react/SelectBox/ControlDefault.jsx +++ b/react/SelectBox/ControlDefault.jsx @@ -1,6 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' - +import React from 'react' import { components } from 'react-select' const ControlDefault = ({ diff --git a/react/SelectBox/SelectBox.jsx b/react/SelectBox/SelectBox.jsx index ed64130791..4bc0ca94af 100644 --- a/react/SelectBox/SelectBox.jsx +++ b/react/SelectBox/SelectBox.jsx @@ -1,18 +1,17 @@ -import React, { Component } from 'react' +import classNames from 'classnames' import PropTypes from 'prop-types' +import React, { Component } from 'react' import ReactSelect, { components } from 'react-select' -import classNames from 'classnames' import { isIOSApp } from 'cozy-device-helper' +import ControlDefault from './ControlDefault' +import styles from './styles.styl' import Icon from '../Icon' +import BottomIcon from '../Icons/Bottom' import CheckIcon from '../Icons/Check' -import withBreakpoints from '../helpers/withBreakpoints' import TopIcon from '../Icons/Top' -import BottomIcon from '../Icons/Bottom' - -import styles from './styles.styl' -import ControlDefault from './ControlDefault' +import withBreakpoints from '../helpers/withBreakpoints' const heights = { tiny: '2rem', @@ -131,16 +130,15 @@ const DropdownIndicator = props => { ) } -const reactSelectControl = CustomControl => ({ - innerProps, - innerRef, - children -}) => ( -
    - {CustomControl} -
    {children}
    -
    -) +const reactSelectControl = + CustomControl => + ({ innerProps, innerRef, children }) => + ( +
    + {CustomControl} +
    {children}
    +
    + ) const Option = ({ children, diff --git a/react/SelectBox/SelectBoxWithFixedOptions.jsx b/react/SelectBox/SelectBoxWithFixedOptions.jsx index 8b69b17406..427d62e391 100644 --- a/react/SelectBox/SelectBoxWithFixedOptions.jsx +++ b/react/SelectBox/SelectBoxWithFixedOptions.jsx @@ -1,6 +1,6 @@ -import { components } from 'react-select' -import React from 'react' import groupBy from 'lodash/groupBy' +import React from 'react' +import { components } from 'react-select' import SelectBox from './SelectBox' import styles from './styles.styl' diff --git a/react/SelectBox/index.jsx b/react/SelectBox/index.jsx index 80f159ebe3..a0cae3ee66 100644 --- a/react/SelectBox/index.jsx +++ b/react/SelectBox/index.jsx @@ -8,8 +8,6 @@ export { reactSelectControl } from './SelectBox' -export { - default as SelectBoxWithFixedOptions -} from './SelectBoxWithFixedOptions' +export { default as SelectBoxWithFixedOptions } from './SelectBoxWithFixedOptions' export { default as ControlDefault } from './ControlDefault' diff --git a/react/SelectBox/test/SelectBox.spec.js b/react/SelectBox/test/SelectBox.spec.js index 5f588ef9a4..4e6e597088 100644 --- a/react/SelectBox/test/SelectBox.spec.js +++ b/react/SelectBox/test/SelectBox.spec.js @@ -2,9 +2,10 @@ /* eslint-env jest */ import React from 'react' +import { isIOSApp } from 'cozy-device-helper' + import { computedMenuListHeightStyles } from '../SelectBox' import { SelectBox } from '../SelectBox' -import { isIOSApp } from 'cozy-device-helper' jest.mock('cozy-device-helper', () => ({ ...jest.requireActual('cozy-device-helper'), diff --git a/react/SelectionBar/SelectionBarAction.jsx b/react/SelectionBar/SelectionBarAction.jsx index 4fbcbee2d9..34aa6a7d24 100644 --- a/react/SelectionBar/SelectionBarAction.jsx +++ b/react/SelectionBar/SelectionBarAction.jsx @@ -1,15 +1,14 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' +import styles from './styles.styl' import Button from '../Button' -import useBreakpoints from '../providers/Breakpoints' import Icon from '../Icon' import IconButton from '../IconButton' +import useBreakpoints from '../providers/Breakpoints' import { useI18n } from '../providers/I18n' -import styles from './styles.styl' - const SelectionBarAction = ({ selectedCount, selected, action }) => { const { isDesktop } = useBreakpoints() const { t } = useI18n() diff --git a/react/SelectionBar/SelectionBarMore.jsx b/react/SelectionBar/SelectionBarMore.jsx index ae1b7745a5..5e6c2edc2f 100644 --- a/react/SelectionBar/SelectionBarMore.jsx +++ b/react/SelectionBar/SelectionBarMore.jsx @@ -1,14 +1,13 @@ -import React, { useState, useRef } from 'react' import PropTypes from 'prop-types' +import React, { useState, useRef } from 'react' +import styles from './styles.styl' import Icon from '../Icon' import IconButton from '../IconButton' import DotsIcon from '../Icons/Dots' import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu' import { useI18n } from '../providers/I18n' -import styles from './styles.styl' - const SelectionBarMore = ({ actions, selectedCount, selected }) => { const { t } = useI18n() const [isMenuDisplayed, setMenuDisplayed] = useState(false) diff --git a/react/SelectionBar/index.jsx b/react/SelectionBar/index.jsx index de64037e5a..f23efaabdc 100644 --- a/react/SelectionBar/index.jsx +++ b/react/SelectionBar/index.jsx @@ -1,19 +1,18 @@ -import React, { useEffect } from 'react' -import PropTypes from 'prop-types' import { useTheme } from '@material-ui/core' +import PropTypes from 'prop-types' +import React, { useEffect } from 'react' import { useWebviewIntent } from 'cozy-intent' -import { useI18n } from '../providers/I18n' +import SelectionBarAction from './SelectionBarAction' +import SelectionBarMore from './SelectionBarMore' +import styles from './styles.styl' +import useMaxActions from './useMaxActions' import Icon from '../Icon' import IconButton from '../IconButton' import CrossIcon from '../Icons/Cross' import useBreakpoints from '../providers/Breakpoints' - -import styles from './styles.styl' -import SelectionBarAction from './SelectionBarAction' -import SelectionBarMore from './SelectionBarMore' -import useMaxActions from './useMaxActions' +import { useI18n } from '../providers/I18n' /* diff --git a/react/SelectionBar/useMaxActions.jsx b/react/SelectionBar/useMaxActions.jsx index e0633e1460..22270c9532 100644 --- a/react/SelectionBar/useMaxActions.jsx +++ b/react/SelectionBar/useMaxActions.jsx @@ -1,9 +1,9 @@ -import { useState } from 'react' import throttle from 'lodash/throttle' +import { useState } from 'react' +import { computeMaxAction } from './helpers' import breakpointDefs, { getBreakpointsStatus } from '../helpers/breakpoints' import useEventListener from '../hooks/useEventListener' -import { computeMaxAction } from './helpers' const huge = 1400 const large = 1200 diff --git a/react/Sidebar/index.jsx b/react/Sidebar/index.jsx index 87b713099b..649d281123 100644 --- a/react/Sidebar/index.jsx +++ b/react/Sidebar/index.jsx @@ -1,10 +1,11 @@ -import React from 'react' +import { useTheme } from '@material-ui/core' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' import { useCozyTheme } from '../providers/CozyTheme' -import { useTheme } from '@material-ui/core' const Sidebar = ({ children, className, ...restProps }) => { const theme = useTheme() diff --git a/react/Skeletons/ListItemSkeleton.jsx b/react/Skeletons/ListItemSkeleton.jsx index c042190a2c..d4c58d2c0f 100644 --- a/react/Skeletons/ListItemSkeleton.jsx +++ b/react/Skeletons/ListItemSkeleton.jsx @@ -1,11 +1,11 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import Divider from '../Divider' import ListItem from '../ListItem' import ListItemIcon from '../ListItemIcon' import ListItemText from '../ListItemText' import Skeleton from '../Skeleton' -import Divider from '../Divider' const ListItemSkeleton = ({ hasSecondary, divider }) => { return ( diff --git a/react/Skeletons/ListSkeleton.jsx b/react/Skeletons/ListSkeleton.jsx index 525a0cd204..972d1a3bba 100644 --- a/react/Skeletons/ListSkeleton.jsx +++ b/react/Skeletons/ListSkeleton.jsx @@ -1,11 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import ListItemSkeleton from './ListItemSkeleton' import List from '../List' import ListSubheader from '../ListSubheader' -import ListItemSkeleton from './ListItemSkeleton' - const ListSkeleton = ({ count, hasSecondary, withSubheader, divider }) => { return ( { return ( diff --git a/react/Spinner/index.jsx b/react/Spinner/index.jsx index e015e54b22..e46241883e 100644 --- a/react/Spinner/index.jsx +++ b/react/Spinner/index.jsx @@ -1,13 +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 styles from './styles.styl' import Icon from '../Icon' +import SpinnerIcon from '../Icons/Spinner' import Typography from '../Typography' import { translate } from '../providers/I18n' -import SpinnerIcon from '../Icons/Spinner' - -import styles from './styles.styl' export const Spinner = ({ t, diff --git a/react/SquareAppIcon/SquareAppIcon.spec.js b/react/SquareAppIcon/SquareAppIcon.spec.js index bd9f7ff7e7..014775ae0b 100644 --- a/react/SquareAppIcon/SquareAppIcon.spec.js +++ b/react/SquareAppIcon/SquareAppIcon.spec.js @@ -1,14 +1,14 @@ /* eslint-env jest */ -import React from 'react' import { render } from '@testing-library/react' +import React from 'react' import CozyClient from 'cozy-client' +import SquareAppIcon from '.' import Icon from '../Icon' import CozyIcon from '../Icons/Cozy' import DemoProvider from '../providers/DemoProvider' -import SquareAppIcon from '.' const appMock = { slug: 'test', diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx index 2a5cffdc93..894cb2841d 100644 --- a/react/SquareAppIcon/index.jsx +++ b/react/SquareAppIcon/index.jsx @@ -1,25 +1,25 @@ -import React, { useEffect, useState } from 'react' import cx from 'classnames' -import PropTypes from 'prop-types' import get from 'lodash/get' +import PropTypes from 'prop-types' +import React, { useEffect, useState } from 'react' + +import ListItemText from 'cozy-ui/transpiled/react/ListItemText' +import styles from './styles.styl' import AppIcon from '../AppIcon' +import { nameToColor } from '../Avatar/helpers' import Badge from '../Badge' import Icon from '../Icon' import IconCheckAnimated from '../Icons/IconCheckAnimated' -import InfosBadge from '../InfosBadge' -import Spinner from '../Spinner' import SvgIconCrossAnimated from '../Icons/IconCrossAnimated' -import Typography from '../Typography' import iconOut from '../Icons/LinkOut' import iconPlus from '../Icons/Plus' import iconWarning from '../Icons/WarningCircle' -import { alpha, makeStyles } from '../styles' -import { nameToColor } from '../Avatar/helpers' +import InfosBadge from '../InfosBadge' +import Spinner from '../Spinner' +import Typography from '../Typography' import CozyTheme, { useCozyTheme } from '../providers/CozyTheme' -import ListItemText from 'cozy-ui/transpiled/react/ListItemText' - -import styles from './styles.styl' +import { alpha, makeStyles } from '../styles' const useStyles = makeStyles(theme => ({ name: { diff --git a/react/Stack/index.jsx b/react/Stack/index.jsx index 9519157ffc..0dc2dec384 100644 --- a/react/Stack/index.jsx +++ b/react/Stack/index.jsx @@ -1,6 +1,7 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' const Stack = ({ spacing, tag: Tag, ...props }) => { diff --git a/react/Stepper/testing.jsx b/react/Stepper/testing.jsx index 5b2c7938b8..d2166aca68 100644 --- a/react/Stepper/testing.jsx +++ b/react/Stepper/testing.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { render } from '@testing-library/react' +import React from 'react' import { Stepper, Step, StepLabel, StepButton } from '../Stepper' diff --git a/react/Tabs/index.jsx b/react/Tabs/index.jsx index 90653e7e32..9ce0f86e09 100644 --- a/react/Tabs/index.jsx +++ b/react/Tabs/index.jsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from 'react' -import PropTypes from 'prop-types' import MuiTabs from '@material-ui/core/Tabs' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import useBreakpoints from '../providers/Breakpoints' diff --git a/react/TextField/MobileSelect.jsx b/react/TextField/MobileSelect.jsx index df6315c197..3fce9a887b 100644 --- a/react/TextField/MobileSelect.jsx +++ b/react/TextField/MobileSelect.jsx @@ -1,16 +1,16 @@ -import React, { forwardRef, useEffect, useState } from 'react' -import merge from 'lodash/merge' import MuiTextField from '@material-ui/core/TextField' +import merge from 'lodash/merge' import PropTypes from 'prop-types' +import React, { forwardRef, useEffect, useState } from 'react' +import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem' +import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper' import Icon from '../Icon' import BottomIcon from '../Icons/Bottom' import InputAdornment from '../InputAdornment' -import ListItemText from '../ListItemText' import ListItemIcon from '../ListItemIcon' +import ListItemText from '../ListItemText' import Radio from '../Radios' -import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper' -import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem' const MobileSelect = forwardRef( ( @@ -31,11 +31,13 @@ const MobileSelect = forwardRef( onClick?.() } - const handleItemClick = ({ value, children, onClick }) => ev => { - onClick?.(merge({}, ev, { target: { value } })) - setState({ label: children, value }) - onChange?.({ target: { value } }) - } + const handleItemClick = + ({ value, children, onClick }) => + ev => { + onClick?.(merge({}, ev, { target: { value } })) + setState({ label: children, value }) + onChange?.({ target: { value } }) + } const handleClose = () => { setShowDrawer(false) diff --git a/react/TextField/index.jsx b/react/TextField/index.jsx index 1b536debd6..bdf35dbdf5 100644 --- a/react/TextField/index.jsx +++ b/react/TextField/index.jsx @@ -1,11 +1,11 @@ -import React, { forwardRef } from 'react' import MuiTextField from '@material-ui/core/TextField' +import React, { forwardRef } from 'react' +import MobileSelect from './MobileSelect' import Icon from '../Icon' import BottomIcon from '../Icons/Bottom' import { getRandomUUID } from '../helpers/getRandomUUID' import { useBreakpoints } from '../providers/Breakpoints' -import MobileSelect from './MobileSelect' const TextField = forwardRef(({ select, options, children, ...props }, ref) => { // A11Y, https://v4.mui.com/api/text-field/#props diff --git a/react/Textarea/index.jsx b/react/Textarea/index.jsx index 242435c898..ee09043ade 100644 --- a/react/Textarea/index.jsx +++ b/react/Textarea/index.jsx @@ -1,6 +1,7 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' const Textarea = React.forwardRef((props, ref) => { diff --git a/react/Thumbnail/index.jsx b/react/Thumbnail/index.jsx index fe76338182..a1138e65ab 100644 --- a/react/Thumbnail/index.jsx +++ b/react/Thumbnail/index.jsx @@ -1,6 +1,6 @@ -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 './Thumbnail.styl' diff --git a/react/Tile/index.jsx b/react/Tile/index.jsx index 9bad48c894..3e9779d068 100644 --- a/react/Tile/index.jsx +++ b/react/Tile/index.jsx @@ -1,8 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' -import Typography from '../Typography' +import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' +import Typography from '../Typography' const Tile = ({ children, className, tag: Tag, isSecondary, ...props }) => { return ( diff --git a/react/Toggle/index.jsx b/react/Toggle/index.jsx index ba381948c3..7006393c65 100644 --- a/react/Toggle/index.jsx +++ b/react/Toggle/index.jsx @@ -1,7 +1,7 @@ -import styles from './styles.styl' - -import React, { Component } from 'react' import PropTypes from 'prop-types' +import React, { Component } from 'react' + +import styles from './styles.styl' class Toggle extends Component { componentDidMount() { diff --git a/react/Typography/index.jsx b/react/Typography/index.jsx index 94585957bb..c02a338061 100644 --- a/react/Typography/index.jsx +++ b/react/Typography/index.jsx @@ -1,5 +1,5 @@ -import React, { forwardRef } from 'react' import MuiTypography from '@material-ui/core/Typography' +import React, { forwardRef } from 'react' const Typography = forwardRef(({ color, variant, children, ...props }, ref) => { const madeColor = diff --git a/react/UnorderedList/index.jsx b/react/UnorderedList/index.jsx index 3063cb1f5c..fa22c6a84d 100644 --- a/react/UnorderedList/index.jsx +++ b/react/UnorderedList/index.jsx @@ -1,5 +1,6 @@ -import React from 'react' import cx from 'classnames' +import React from 'react' + import styles from './styles.styl' import Stack from '../Stack' diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx index 93bd570886..3d034aa0d7 100644 --- a/react/UploadQueue/index.jsx +++ b/react/UploadQueue/index.jsx @@ -1,17 +1,18 @@ -import React, { Component, useState } from 'react' -import cx from 'classnames' import LinearProgress from '@material-ui/core/LinearProgress' +import cx from 'classnames' +import React, { Component, useState } from 'react' import { useIntervalWhen } from 'rooks' import { splitFilename } from 'cozy-client/dist/models/file' -import { withStyles } from '../styles' +import localeEn from './locales/en.json' +import localeEs from './locales/es.json' +import localeFr from './locales/fr.json' +import styles from './styles.styl' +import Icon from '../Icon' +import CheckIcon from '../Icons/Check' import CrossIcon from '../Icons/Cross' import WarningIcon from '../Icons/Warning' -import CheckIcon from '../Icons/Check' -import { translate, useI18n } from '../providers/I18n' -import withLocales from '../providers/I18n/withLocales' -import Icon from '../Icon' import Spinner from '../Spinner' import Typography from '../Typography' import List from '../List' @@ -20,12 +21,10 @@ import ListItemText from '../ListItemText' import ListItemIcon from '../ListItemIcon' import { Img } from '../deprecated/Media' import Button from '../deprecated/Button' - -import styles from './styles.styl' -import localeEn from './locales/en.json' -import localeEs from './locales/es.json' -import localeFr from './locales/fr.json' +import { translate, useI18n } from '../providers/I18n' import { formatLocallyDistanceToNow } from '../providers/I18n/format' +import withLocales from '../providers/I18n/withLocales' +import { withStyles } from '../styles' const locales = { en: localeEn, diff --git a/react/UploadQueue/index.spec.jsx b/react/UploadQueue/index.spec.jsx index 80963e2b9f..33f743a03a 100644 --- a/react/UploadQueue/index.spec.jsx +++ b/react/UploadQueue/index.spec.jsx @@ -1,6 +1,7 @@ +import { render } from '@testing-library/react' import React from 'react' + import { UploadQueue, formatRemainingTime } from '.' -import { render } from '@testing-library/react' import { useI18n } from '../providers/I18n' jest.mock('../providers/I18n/withLocales', () => diff --git a/react/Viewer/Footer/BottomSheetContent.jsx b/react/Viewer/Footer/BottomSheetContent.jsx index a0bff94150..545f180016 100644 --- a/react/Viewer/Footer/BottomSheetContent.jsx +++ b/react/Viewer/Footer/BottomSheetContent.jsx @@ -1,8 +1,7 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { BottomSheetItem } from '../../BottomSheet' - import getPanelBlocks, { getPanelBlocksSpecs } from '../Panel/getPanelBlocks' const BottomSheetContent = ({ file, isPublic }) => { diff --git a/react/Viewer/Footer/DownloadButton.jsx b/react/Viewer/Footer/DownloadButton.jsx index ab1c1a253b..2dd9c1a72f 100644 --- a/react/Viewer/Footer/DownloadButton.jsx +++ b/react/Viewer/Footer/DownloadButton.jsx @@ -1,14 +1,14 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { useClient } from 'cozy-client' -import { useI18n } from '../../providers/I18n' +import Button from '../../Buttons' import Icon from '../../Icon' import IconButton from '../../IconButton' import DownloadIcon from '../../Icons/Download' -import Button from '../../Buttons' import Alerter from '../../deprecated/Alerter' +import { useI18n } from '../../providers/I18n' const DownloadButton = ({ file, variant }) => { const client = useClient() diff --git a/react/Viewer/Footer/FooterActionButtons.jsx b/react/Viewer/Footer/FooterActionButtons.jsx index 6f165e89f5..4951ee0a2b 100644 --- a/react/Viewer/Footer/FooterActionButtons.jsx +++ b/react/Viewer/Footer/FooterActionButtons.jsx @@ -1,5 +1,5 @@ -import { cloneElement } from 'react' import PropTypes from 'prop-types' +import { cloneElement } from 'react' import { mapToAllChildren } from './helpers' diff --git a/react/Viewer/Footer/FooterActionButtons.spec.jsx b/react/Viewer/Footer/FooterActionButtons.spec.jsx index 8b841df82c..83ab9ea219 100644 --- a/react/Viewer/Footer/FooterActionButtons.spec.jsx +++ b/react/Viewer/Footer/FooterActionButtons.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { render } from '@testing-library/react' +import React from 'react' import FooterActionButtons from './FooterActionButtons' diff --git a/react/Viewer/Footer/FooterContent.jsx b/react/Viewer/Footer/FooterContent.jsx index 869851b18f..0709a57597 100644 --- a/react/Viewer/Footer/FooterContent.jsx +++ b/react/Viewer/Footer/FooterContent.jsx @@ -1,13 +1,13 @@ -import React, { useMemo } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { useMemo } from 'react' +import BottomSheetContent from './BottomSheetContent' +import { extractChildrenCompByName } from './helpers' import BottomSheet, { BottomSheetHeader } from '../../BottomSheet' import { makeStyles } from '../../styles' -import { isValidForPanel } from '../helpers' import PrintButton from '../components/PrintButton' -import { extractChildrenCompByName } from './helpers' -import BottomSheetContent from './BottomSheetContent' +import { isValidForPanel } from '../helpers' const FooterButtons = ({ file, diff --git a/react/Viewer/Footer/ForwardButton.jsx b/react/Viewer/Footer/ForwardButton.jsx index 3aa529a6ff..44911a9c09 100644 --- a/react/Viewer/Footer/ForwardButton.jsx +++ b/react/Viewer/Footer/ForwardButton.jsx @@ -1,18 +1,18 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { useClient } from 'cozy-client' +import { getSharingLink } from 'cozy-client/dist/models/sharing' import { isIOS, isMobileApp } from 'cozy-device-helper' -import { useI18n } from '../../providers/I18n' +import { exportFilesNative } from './helpers' +import Button from '../../Buttons' import Icon from '../../Icon' import IconButton from '../../IconButton' import ReplyIcon from '../../Icons/Reply' import ShareIosIcon from '../../Icons/ShareIos' -import Button from '../../Buttons' import Alerter from '../../deprecated/Alerter' -import { exportFilesNative } from './helpers' -import { getSharingLink } from 'cozy-client/dist/models/sharing' +import { useI18n } from '../../providers/I18n' const ForwardIcon = isIOS() ? ShareIosIcon : ReplyIcon diff --git a/react/Viewer/Footer/ForwardButton.spec.jsx b/react/Viewer/Footer/ForwardButton.spec.jsx index 1501e50260..53d12d6ea5 100644 --- a/react/Viewer/Footer/ForwardButton.spec.jsx +++ b/react/Viewer/Footer/ForwardButton.spec.jsx @@ -1,12 +1,12 @@ -import React from 'react' import { render, fireEvent } from '@testing-library/react' +import React from 'react' import { getSharingLink } from 'cozy-client/dist/models/sharing' import { isMobileApp } from 'cozy-device-helper' -import DemoProvider from '../docs/DemoProvider' import ForwardButton from './ForwardButton' import { exportFilesNative } from './helpers' +import DemoProvider from '../docs/DemoProvider' jest.mock('cozy-device-helper') jest.mock('cozy-client/dist/models/sharing', () => ({ diff --git a/react/Viewer/Footer/ForwardOrDownloadButton.jsx b/react/Viewer/Footer/ForwardOrDownloadButton.jsx index f91c12add5..3aa962576d 100644 --- a/react/Viewer/Footer/ForwardOrDownloadButton.jsx +++ b/react/Viewer/Footer/ForwardOrDownloadButton.jsx @@ -1,10 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { useClient } from 'cozy-client' -import ForwardButton from './ForwardButton' import DownloadButton from './DownloadButton' +import ForwardButton from './ForwardButton' import { shouldBeForwardButton } from './helpers' const ForwardOrDownloadButton = ({ file, ...props }) => { diff --git a/react/Viewer/Footer/Sharing.jsx b/react/Viewer/Footer/Sharing.jsx index 2488b3841d..3275fa7ffc 100644 --- a/react/Viewer/Footer/Sharing.jsx +++ b/react/Viewer/Footer/Sharing.jsx @@ -1,12 +1,12 @@ -import React, { useState } from 'react' import PropTypes from 'prop-types' +import React, { useState } from 'react' import { useClient } from 'cozy-client' import { ShareModal, ShareButton } from 'cozy-sharing' import { SharingProvider } from 'cozy-sharing/dist/SharingProvider' -import IconButton from '../../IconButton' import Icon from '../../Icon' +import IconButton from '../../IconButton' import ShareIcon from '../../Icons/Share' const Sharing = ({ file, variant }) => { diff --git a/react/Viewer/Footer/helpers.js b/react/Viewer/Footer/helpers.js index 0d1364fd9f..1b586a6f53 100644 --- a/react/Viewer/Footer/helpers.js +++ b/react/Viewer/Footer/helpers.js @@ -1,4 +1,5 @@ import { isValidElement, Children, cloneElement } from 'react' + import { saveFileWithCordova } from 'cozy-client/dist/models/fsnative' import { isIOS, isMobileApp } from 'cozy-device-helper' diff --git a/react/Viewer/NoViewer/DownloadButton.jsx b/react/Viewer/NoViewer/DownloadButton.jsx index 5aa14f4098..1a873bccec 100644 --- a/react/Viewer/NoViewer/DownloadButton.jsx +++ b/react/Viewer/NoViewer/DownloadButton.jsx @@ -1,12 +1,11 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { withClient } from 'cozy-client' -import { useI18n } from '../../providers/I18n' -import { FileDoctype } from '../../proptypes' import Button from '../../deprecated/Button' - +import { FileDoctype } from '../../proptypes' +import { useI18n } from '../../providers/I18n' import { downloadFile } from '../helpers' const DownloadButton = ({ client, file, url }) => { diff --git a/react/Viewer/NoViewer/FileIcon.jsx b/react/Viewer/NoViewer/FileIcon.jsx index 706ff928b0..1c689c6e22 100644 --- a/react/Viewer/NoViewer/FileIcon.jsx +++ b/react/Viewer/NoViewer/FileIcon.jsx @@ -3,12 +3,12 @@ import React from 'react' import Icon from '../../Icon' import FileTypeBinIcon from '../../Icons/FileTypeBin' import FileTypeCodeIcon from '../../Icons/FileTypeCode' +import FileTypeFilesIcon from '../../Icons/FileTypeFiles' +import FileTypePdfIcon from '../../Icons/FileTypePdf' import FileTypeSheetIcon from '../../Icons/FileTypeSheet' import FileTypeSlideIcon from '../../Icons/FileTypeSlide' import FileTypeTextIcon from '../../Icons/FileTypeText' import FileTypeZipIcon from '../../Icons/FileTypeZip' -import FileTypePdfIcon from '../../Icons/FileTypePdf' -import FileTypeFilesIcon from '../../Icons/FileTypeFiles' const FileIcon = ({ type }) => { let icon diff --git a/react/Viewer/NoViewer/NoViewer.jsx b/react/Viewer/NoViewer/NoViewer.jsx index 7b2103c06c..bcf0371445 100644 --- a/react/Viewer/NoViewer/NoViewer.jsx +++ b/react/Viewer/NoViewer/NoViewer.jsx @@ -1,9 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' -import FileIcon from './FileIcon' +import React from 'react' + import DownloadButton from './DownloadButton' -import styles from '../ViewersByFile/styles.styl' +import FileIcon from './FileIcon' import { FileDoctype } from '../../proptypes' +import styles from '../ViewersByFile/styles.styl' const NoViewer = ({ file, url, renderFallbackExtraContent }) => (
    diff --git a/react/Viewer/NoViewer/NoViewer.spec.jsx b/react/Viewer/NoViewer/NoViewer.spec.jsx index a5c9dcf395..3327017b24 100644 --- a/react/Viewer/NoViewer/NoViewer.spec.jsx +++ b/react/Viewer/NoViewer/NoViewer.spec.jsx @@ -1,9 +1,8 @@ -import React from 'react' import { render } from '@testing-library/react' - -import DemoProvider from '../docs/DemoProvider' +import React from 'react' import NoViewer from './NoViewer' +import DemoProvider from '../docs/DemoProvider' const file = { _id: 'notSupported', diff --git a/react/Viewer/Panel/ActionMenuDesktop.jsx b/react/Viewer/Panel/ActionMenuDesktop.jsx index 2db8f0945c..0400c3b9ee 100644 --- a/react/Viewer/Panel/ActionMenuDesktop.jsx +++ b/react/Viewer/Panel/ActionMenuDesktop.jsx @@ -1,14 +1,14 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' -import styles from './styles.styl' +import React, { forwardRef } from 'react' +import styles from './styles.styl' +import AppLinker from '../../AppLinker' import Icon from '../../Icon' import Copy from '../../Icons/Copy' import Edit from '../../Icons/Rename' -import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu' import Typography from '../../Typography' +import ActionMenu, { ActionMenuItem } from '../../deprecated/ActionMenu' import { useI18n } from '../../providers/I18n' -import AppLinker from '../../AppLinker' const ActionMenuDesktop = forwardRef( ({ onClose, isEditable, actions, appLink, appSlug }, ref) => { diff --git a/react/Viewer/Panel/ActionMenuMobile.jsx b/react/Viewer/Panel/ActionMenuMobile.jsx index 731d971428..29bce2a8e1 100644 --- a/react/Viewer/Panel/ActionMenuMobile.jsx +++ b/react/Viewer/Panel/ActionMenuMobile.jsx @@ -1,16 +1,16 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' +import AppLinker from '../../AppLinker' +import BottomSheet, { BottomSheetItem } from '../../BottomSheet' +import Icon from '../../Icon' +import Copy from '../../Icons/Copy' +import Edit from '../../Icons/Rename' import List from '../../List' import ListItem from '../../ListItem' import ListItemIcon from '../../ListItemIcon' import ListItemText from '../../ListItemText' -import Icon from '../../Icon' -import Copy from '../../Icons/Copy' -import Edit from '../../Icons/Rename' -import BottomSheet, { BottomSheetItem } from '../../BottomSheet' import { useI18n } from '../../providers/I18n' -import AppLinker from '../../AppLinker' const ActionMenuMobile = ({ onClose, diff --git a/react/Viewer/Panel/ActionMenuWrapper.jsx b/react/Viewer/Panel/ActionMenuWrapper.jsx index 26445452e1..bfcf02de2d 100644 --- a/react/Viewer/Panel/ActionMenuWrapper.jsx +++ b/react/Viewer/Panel/ActionMenuWrapper.jsx @@ -1,19 +1,19 @@ -import React, { forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { forwardRef } from 'react' import { useAppLinkWithStoreFallback, useClient } from 'cozy-client' +import ActionMenuDesktop from './ActionMenuDesktop' +import ActionMenuMobile from './ActionMenuMobile' +import { useAlert } from '../../providers/Alert' import useBreakpoints from '../../providers/Breakpoints' import { useI18n } from '../../providers/I18n' -import { useAlert } from '../../providers/Alert' import { buildEditAttributePath, isEditableAttribute, getCurrentModel } from '../helpers' import useActionMenuContext from '../providers/ActionMenuProvider' -import ActionMenuMobile from './ActionMenuMobile' -import ActionMenuDesktop from './ActionMenuDesktop' const mespapiersAppSlug = 'mespapiers' diff --git a/react/Viewer/Panel/Certifications.jsx b/react/Viewer/Panel/Certifications.jsx index bb85babf43..089ccc55b5 100644 --- a/react/Viewer/Panel/Certifications.jsx +++ b/react/Viewer/Panel/Certifications.jsx @@ -1,17 +1,17 @@ -import React from 'react' -import PropTypes from 'prop-types' import has from 'lodash/has' +import PropTypes from 'prop-types' +import React from 'react' -import Typography from '../../Typography' -import { Media, Img, Bd } from '../../deprecated/Media' import Icon, { iconPropType } from '../../Icon' import CarbonCopyIcon from '../../Icons/CarbonCopy' import SafeIcon from '../../Icons/Safe' +import Typography from '../../Typography' +import { Media, Img, Bd } from '../../deprecated/Media' import { withViewerLocales } from '../hoc/withViewerLocales' const Certification = ({ icon, title, caption }) => { return ( -
    +
    diff --git a/react/Viewer/Panel/PanelContent.jsx b/react/Viewer/Panel/PanelContent.jsx index 02b6ffe3be..f91c66b17d 100644 --- a/react/Viewer/Panel/PanelContent.jsx +++ b/react/Viewer/Panel/PanelContent.jsx @@ -1,14 +1,13 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' -import Stack from '../../Stack' +import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks' import Paper from '../../Paper' +import Stack from '../../Stack' import Typography from '../../Typography' import { withViewerLocales } from '../hoc/withViewerLocales' -import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks' - const PanelContent = ({ file, isPublic, t }) => { const panelBlocks = getPanelBlocks({ panelBlocksSpecs: getPanelBlocksSpecs(isPublic), @@ -33,7 +32,7 @@ const PanelContent = ({ file, isPublic, t }) => { elevation={2} square > - + diff --git a/react/Viewer/Panel/Qualification.jsx b/react/Viewer/Panel/Qualification.jsx index c3c33b7bcf..0a49b719b9 100644 --- a/react/Viewer/Panel/Qualification.jsx +++ b/react/Viewer/Panel/Qualification.jsx @@ -1,5 +1,5 @@ -import React, { useRef, useState, createRef, useMemo, useEffect } from 'react' import PropTypes from 'prop-types' +import React, { useRef, useState, createRef, useMemo, useEffect } from 'react' import { isExpiringSoon, @@ -8,14 +8,14 @@ import { getMetadataQualificationType } from 'cozy-client/dist/models/paper' -import List from '../../List' -import { withViewerLocales } from '../hoc/withViewerLocales' -import ExpirationAlert from '../components/ExpirationAlert' import ActionMenuWrapper from './ActionMenuWrapper' import QualificationListItemContact from './QualificationListItemContact' import QualificationListItemDate from './QualificationListItemDate' import QualificationListItemInformation from './QualificationListItemInformation' import QualificationListItemOther from './QualificationListItemOther' +import List from '../../List' +import ExpirationAlert from '../components/ExpirationAlert' +import { withViewerLocales } from '../hoc/withViewerLocales' const ComponentFromMetadataQualificationType = { contact: QualificationListItemContact, @@ -76,7 +76,7 @@ const Qualification = ({ file }) => { {isExpiringSoon(file) && !isExpirationAlertHidden(file) && ( )} - + {formattedMetadataQualification.map((meta, idx) => { const { name } = meta const metadataQualificationType = getMetadataQualificationType(name) diff --git a/react/Viewer/Panel/QualificationListItemContact.jsx b/react/Viewer/Panel/QualificationListItemContact.jsx index 42e7f8169b..92a5fa119f 100644 --- a/react/Viewer/Panel/QualificationListItemContact.jsx +++ b/react/Viewer/Panel/QualificationListItemContact.jsx @@ -1,21 +1,21 @@ -import React, { useRef, useState } from 'react' import PropTypes from 'prop-types' +import React, { useRef, useState } from 'react' import { getTranslatedNameForContact, formatContactValue } from 'cozy-client/dist/models/paper' -import ListItem from '../../ListItem' -import ListItemSecondaryAction from '../../ListItemSecondaryAction' -import IconButton from '../../IconButton' +import ActionMenuWrapper from './ActionMenuWrapper' +import QualificationListItemText from './QualificationListItemText' import Icon from '../../Icon' +import IconButton from '../../IconButton' import Dots from '../../Icons/Dots' -import QualificationListItemText from './QualificationListItemText' +import ListItem from '../../ListItem' +import ListItemSecondaryAction from '../../ListItemSecondaryAction' import Spinner from '../../Spinner' -import useReferencedContactName from '../hooks/useReferencedContactName' import { useI18n } from '../../providers/I18n' -import ActionMenuWrapper from './ActionMenuWrapper' +import useReferencedContactName from '../hooks/useReferencedContactName' const QualificationListItemContact = ({ file }) => { const { lang } = useI18n() @@ -36,7 +36,7 @@ const QualificationListItemContact = ({ file }) => { if (isLoadingContacts) { return ( - + ) @@ -51,7 +51,7 @@ const QualificationListItemContact = ({ file }) => { return ( <> - + { @@ -30,7 +30,7 @@ const QualificationListItemDate = forwardRef( const isExpirationDate = name === 'expirationDate' return ( - + { @@ -35,7 +35,7 @@ const QualificationListItemInformation = forwardRef( formattedTitle === name ? : formattedTitle return ( - + { @@ -31,7 +31,7 @@ const QualificationListItemOther = forwardRef( }) return ( - + } diff --git a/react/Viewer/Panel/QualificationListItemText.jsx b/react/Viewer/Panel/QualificationListItemText.jsx index a599809979..ff2b585a06 100644 --- a/react/Viewer/Panel/QualificationListItemText.jsx +++ b/react/Viewer/Panel/QualificationListItemText.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import ListItemText from '../../ListItemText' import Typography from '../../Typography' diff --git a/react/Viewer/Panel/getPanelBlocks.jsx b/react/Viewer/Panel/getPanelBlocks.jsx index 5f61d2801a..fa2a25f79d 100644 --- a/react/Viewer/Panel/getPanelBlocks.jsx +++ b/react/Viewer/Panel/getPanelBlocks.jsx @@ -1,5 +1,5 @@ -import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock' import { models } from 'cozy-client' +import KonnectorBlock from 'cozy-harvest-lib/dist/components/KonnectorBlock' import Certifications from './Certifications' import Qualification from './Qualification' diff --git a/react/Viewer/Viewer.jsx b/react/Viewer/Viewer.jsx index 4f6b81e5f1..4570c51841 100644 --- a/react/Viewer/Viewer.jsx +++ b/react/Viewer/Viewer.jsx @@ -1,11 +1,10 @@ -import React, { Component } from 'react' import PropTypes from 'prop-types' +import React, { Component } from 'react' -import { FileDoctype } from '../proptypes' - -import ViewerControls from './components/ViewerControls' -import ViewerByFile from './components/ViewerByFile' import { toolbarPropsPropType } from '.' +import ViewerByFile from './components/ViewerByFile' +import ViewerControls from './components/ViewerControls' +import { FileDoctype } from '../proptypes' const KEY_CODE_LEFT = 37 const KEY_CODE_RIGHT = 39 diff --git a/react/Viewer/ViewerContainer.jsx b/react/Viewer/ViewerContainer.jsx index c22e6abe67..0222f49c18 100644 --- a/react/Viewer/ViewerContainer.jsx +++ b/react/Viewer/ViewerContainer.jsx @@ -1,22 +1,21 @@ -import React, { createRef } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React, { createRef } from 'react' -import useBreakpoints from '../providers/Breakpoints' -import { FileDoctype } from '../proptypes' -import { useExtendI18n } from '../providers/I18n' -import { useCozyTheme } from '../providers/CozyTheme' -import Modal from '../Modal' - -import { toolbarPropsPropType } from './proptypes' -import { isValidForPanel } from './helpers' import Viewer from './Viewer' import ViewerInformationsWrapper from './ViewerInformationsWrapper' -import EncryptedProvider from './providers/EncryptedProvider' -import AlertProvider from '../providers/Alert' -import { ActionMenuProvider } from './providers/ActionMenuProvider' +import { isValidForPanel } from './helpers' import { locales } from './locales' +import { toolbarPropsPropType } from './proptypes' +import { ActionMenuProvider } from './providers/ActionMenuProvider' +import EncryptedProvider from './providers/EncryptedProvider' import styles from './styles.styl' +import Modal from '../Modal' +import { FileDoctype } from '../proptypes' +import AlertProvider from '../providers/Alert' +import useBreakpoints from '../providers/Breakpoints' +import { useCozyTheme } from '../providers/CozyTheme' +import { useExtendI18n } from '../providers/I18n' const ViewerContainer = props => { const { diff --git a/react/Viewer/ViewerInformationsWrapper.jsx b/react/Viewer/ViewerInformationsWrapper.jsx index f7a7697057..cb0e8314ca 100644 --- a/react/Viewer/ViewerInformationsWrapper.jsx +++ b/react/Viewer/ViewerInformationsWrapper.jsx @@ -1,14 +1,13 @@ -import React from 'react' -import PropTypes from 'prop-types' import { useTheme } from '@material-ui/core' +import PropTypes from 'prop-types' +import React from 'react' -import { FileDoctype } from '../proptypes' - -import InformationPanel from './components/InformationPanel' -import Footer from './components/Footer' -import PanelContent from './Panel/PanelContent' import FooterContent from './Footer/FooterContent' +import PanelContent from './Panel/PanelContent' +import Footer from './components/Footer' +import InformationPanel from './components/InformationPanel' import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' +import { FileDoctype } from '../proptypes' import { useCozyTheme } from '../providers/CozyTheme' const ViewerInformationsWrapper = ({ diff --git a/react/Viewer/ViewerInformationsWrapper.spec.jsx b/react/Viewer/ViewerInformationsWrapper.spec.jsx index d1e6c9b55d..4f8f79feba 100644 --- a/react/Viewer/ViewerInformationsWrapper.spec.jsx +++ b/react/Viewer/ViewerInformationsWrapper.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { render } from '@testing-library/react' +import React from 'react' import ViewerInformationsWrapper from './ViewerInformationsWrapper' diff --git a/react/Viewer/ViewerWithCustomPanelAndFooter.jsx b/react/Viewer/ViewerWithCustomPanelAndFooter.jsx index 4ab7b00509..c1a59179c5 100644 --- a/react/Viewer/ViewerWithCustomPanelAndFooter.jsx +++ b/react/Viewer/ViewerWithCustomPanelAndFooter.jsx @@ -1,13 +1,11 @@ -import React, { createRef } from 'react' import cx from 'classnames' +import React, { createRef } from 'react' -import useBreakpoints from '../providers/Breakpoints' - -import InformationPanel from './components/InformationPanel' -import Footer from './components/Footer' import Viewer from './Viewer' - +import Footer from './components/Footer' +import InformationPanel from './components/InformationPanel' import styles from './styles.styl' +import useBreakpoints from '../providers/Breakpoints' const ViewerWithCustomPanelAndFooter = props => { console.warn( diff --git a/react/Viewer/ViewersByFile/AudioViewer.jsx b/react/Viewer/ViewersByFile/AudioViewer.jsx index 6b7bb67c92..3f55407a19 100644 --- a/react/Viewer/ViewersByFile/AudioViewer.jsx +++ b/react/Viewer/ViewersByFile/AudioViewer.jsx @@ -1,13 +1,11 @@ import React from 'react' +import styles from './styles.styl' import Icon from '../../Icon' import FileTypeAudioIcon from '../../Icons/FileTypeAudio' import isTesting from '../../helpers/isTesting' - import withFileUrl from '../hoc/withFileUrl' -import styles from './styles.styl' - const AudioViewer = ({ file, url }) => (
    diff --git a/react/Viewer/ViewersByFile/AudioViewer.spec.jsx b/react/Viewer/ViewersByFile/AudioViewer.spec.jsx index ef55f2ba87..0016aa6292 100644 --- a/react/Viewer/ViewersByFile/AudioViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/AudioViewer.spec.jsx @@ -1,12 +1,10 @@ -import React from 'react' import { render, waitFor } from '@testing-library/react' +import React from 'react' +import AudioViewer from './AudioViewer' import { BreakpointsProvider } from '../../providers/Breakpoints' - import DemoProvider from '../docs/DemoProvider' -import AudioViewer from './AudioViewer' - const file = { _id: 'audio', class: 'audio', diff --git a/react/Viewer/ViewersByFile/BlankPaperViewer.jsx b/react/Viewer/ViewersByFile/BlankPaperViewer.jsx index c6a680eaed..9a3cd800f5 100644 --- a/react/Viewer/ViewersByFile/BlankPaperViewer.jsx +++ b/react/Viewer/ViewersByFile/BlankPaperViewer.jsx @@ -1,15 +1,13 @@ import React, { useState } from 'react' +import styles from './styles.styl' +import Backdrop from '../../Backdrop' import Button from '../../Buttons' import Empty from '../../Empty' -import Backdrop from '../../Backdrop' import IntentDialogOpener from '../../IntentDialogOpener' - import IlluGenericNewPage from '../assets/IlluGenericNewPage.svg' import { withViewerLocales } from '../hoc/withViewerLocales' -import styles from './styles.styl' - const BlankPaperViewer = ({ file, t }) => { const [isLoading, setIsLoading] = useState(true) diff --git a/react/Viewer/ViewersByFile/ImageViewer.jsx b/react/Viewer/ViewersByFile/ImageViewer.jsx index f75f300f61..ac1cd200b2 100644 --- a/react/Viewer/ViewersByFile/ImageViewer.jsx +++ b/react/Viewer/ViewersByFile/ImageViewer.jsx @@ -1,12 +1,10 @@ -import React, { Component } from 'react' import Hammer from 'hammerjs' +import React, { Component } from 'react' -import FileImageLoader from '../../FileImageLoader' - -import ViewerSpinner from '../components/ViewerSpinner' import NoNetworkViewer from './NoNetworkViewer' - import styles from './styles.styl' +import FileImageLoader from '../../FileImageLoader' +import ViewerSpinner from '../components/ViewerSpinner' const MIN_SCALE = 1 const MAX_SCALE = 6 diff --git a/react/Viewer/ViewersByFile/ImageViewer.spec.jsx b/react/Viewer/ViewersByFile/ImageViewer.spec.jsx index 2115fc6bfc..f47385f146 100644 --- a/react/Viewer/ViewersByFile/ImageViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/ImageViewer.spec.jsx @@ -1,14 +1,12 @@ -import React from 'react' import { render, waitFor } from '@testing-library/react' +import React from 'react' -import { BreakpointsProvider } from '../../providers/Breakpoints' +import ImageViewer from './ImageViewer' import { checkImageSource } from '../../FileImageLoader/checkImageSource' - +import { BreakpointsProvider } from '../../providers/Breakpoints' import DemoProvider from '../docs/DemoProvider' import EncryptedProvider from '../providers/EncryptedProvider' -import ImageViewer from './ImageViewer' - jest.mock('../../FileImageLoader/checkImageSource', () => ({ ...jest.requireActual('../../FileImageLoader/checkImageSource'), checkImageSource: jest.fn() diff --git a/react/Viewer/ViewersByFile/NoNetworkViewer.jsx b/react/Viewer/ViewersByFile/NoNetworkViewer.jsx index c876059cdc..8671e0a3f6 100644 --- a/react/Viewer/ViewersByFile/NoNetworkViewer.jsx +++ b/react/Viewer/ViewersByFile/NoNetworkViewer.jsx @@ -1,13 +1,11 @@ import React from 'react' +import styles from './styles.styl' import Icon from '../../Icon' import CloudBrokenIcon from '../../Icons/CloudBroken' import Button from '../../deprecated/Button' - import { withViewerLocales } from '../hoc/withViewerLocales' -import styles from './styles.styl' - const NoNetworkViewer = ({ t, onReload }) => (
    diff --git a/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx b/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx index 2e1b1ffd10..1caba966db 100644 --- a/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx +++ b/react/Viewer/ViewersByFile/OnlyOfficeViewer.jsx @@ -1,11 +1,10 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Button from '../../deprecated/Button' import { FileDoctype } from '../../proptypes' - -import { withViewerLocales } from '../hoc/withViewerLocales' import NoViewer from '../NoViewer' +import { withViewerLocales } from '../hoc/withViewerLocales' const OnlyOfficeViewer = ({ file, onlyOfficeOpener, t }) => { return ( diff --git a/react/Viewer/ViewersByFile/PdfJsViewer.jsx b/react/Viewer/ViewersByFile/PdfJsViewer.jsx index 156c0d1451..1b261f6d4c 100644 --- a/react/Viewer/ViewersByFile/PdfJsViewer.jsx +++ b/react/Viewer/ViewersByFile/PdfJsViewer.jsx @@ -1,17 +1,16 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { Document, Page } from 'react-pdf' import cx from 'classnames' -import throttle from 'lodash/throttle' import flow from 'lodash/flow' +import throttle from 'lodash/throttle' +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import { Document, Page } from 'react-pdf' +import styles from './styles.styl' +import NoViewer from '../NoViewer' +import ToolbarButton from '../components/PdfToolbarButton' import ViewerSpinner from '../components/ViewerSpinner' -import { withViewerLocales } from '../hoc/withViewerLocales' import withFileUrl from '../hoc/withFileUrl' -import ToolbarButton from '../components/PdfToolbarButton' -import NoViewer from '../NoViewer' - -import styles from './styles.styl' +import { withViewerLocales } from '../hoc/withViewerLocales' export const MIN_SCALE = 0.25 export const MAX_SCALE = 3 @@ -208,7 +207,4 @@ PdfJsViewer.propTypes = { renderFallbackExtraContent: PropTypes.func } -export default flow( - withFileUrl, - withViewerLocales -)(PdfJsViewer) +export default flow(withFileUrl, withViewerLocales)(PdfJsViewer) diff --git a/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx b/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx index 342a0bf172..53f039eb41 100644 --- a/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/PdfJsViewer.spec.jsx @@ -1,5 +1,5 @@ -import React from 'react' import { shallow } from 'enzyme' +import React from 'react' import { PdfJsViewer, MIN_SCALE, MAX_SCALE, MAX_PAGES } from './PdfJsViewer' @@ -14,7 +14,7 @@ describe('PDFViewer', () => { } beforeEach(() => { component = shallow( - x} /> + x} /> ) }) afterEach(() => { diff --git a/react/Viewer/ViewersByFile/PdfMobileViewer.jsx b/react/Viewer/ViewersByFile/PdfMobileViewer.jsx index ee0bbbc66c..6368d6b12c 100644 --- a/react/Viewer/ViewersByFile/PdfMobileViewer.jsx +++ b/react/Viewer/ViewersByFile/PdfMobileViewer.jsx @@ -1,17 +1,15 @@ -import React, { useState, useEffect, useRef, useCallback } from 'react' import PropTypes from 'prop-types' +import React, { useState, useEffect, useRef, useCallback } from 'react' import { useClient } from 'cozy-client' -import Spinner from '../../Spinner' -import FileImageLoader from '../../FileImageLoader' - -import DownloadButton from '../NoViewer/DownloadButton' -import NoViewer from '../NoViewer' - import styles from './styles.styl' +import FileImageLoader from '../../FileImageLoader' +import Spinner from '../../Spinner' import { FileDoctype } from '../../proptypes' import { useAlert } from '../../providers/Alert' +import NoViewer from '../NoViewer' +import DownloadButton from '../NoViewer/DownloadButton' import { withViewerLocales } from '../hoc/withViewerLocales' export const PdfMobileViewer = ({ file, url, t, gestures }) => { diff --git a/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx b/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx index c4d88dd934..6feabfaf96 100644 --- a/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/PdfMobileViewer.spec.jsx @@ -1,13 +1,12 @@ -import React from 'react' import { render, waitFor } from '@testing-library/react' +import React from 'react' import { CozyProvider, createMockClient } from 'cozy-client' import logger from 'cozy-logger' +import { PdfMobileViewer } from './PdfMobileViewer' import { I18n } from '../../providers/I18n' - import EncryptedProvider from '../providers/EncryptedProvider' -import { PdfMobileViewer } from './PdfMobileViewer' logger.error = logger.warn = jest.fn() diff --git a/react/Viewer/ViewersByFile/ShortcutViewer.jsx b/react/Viewer/ViewersByFile/ShortcutViewer.jsx index da4b8feea2..daa356ec20 100644 --- a/react/Viewer/ViewersByFile/ShortcutViewer.jsx +++ b/react/Viewer/ViewersByFile/ShortcutViewer.jsx @@ -1,13 +1,13 @@ +import get from 'lodash/get' import React from 'react' + import { useClient, useFetchShortcut } from 'cozy-client' -import get from 'lodash/get' -import { withViewerLocales } from '../hoc/withViewerLocales' +import OpenwithIcon from '../../Icons/Openwith' import { ButtonLink } from '../../deprecated/Button' import { FileDoctype } from '../../proptypes' -import OpenwithIcon from '../../Icons/Openwith' - import NoViewer from '../NoViewer' +import { withViewerLocales } from '../hoc/withViewerLocales' const ShortcutViewer = ({ t, file }) => { const client = useClient() diff --git a/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx b/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx index 23bccff149..30444784a3 100644 --- a/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/ShortcutViewer.spec.jsx @@ -1,12 +1,11 @@ +import { render, waitFor } from '@testing-library/react' import React from 'react' import CozyClient, { CozyProvider } from 'cozy-client' -import { render, waitFor } from '@testing-library/react' -import I18n from '../../providers/I18n' - -import en from '../locales/en.json' import ShortcutViewer from './ShortcutViewer' +import I18n from '../../providers/I18n' +import en from '../locales/en.json' export const locales = { en diff --git a/react/Viewer/ViewersByFile/TextViewer.jsx b/react/Viewer/ViewersByFile/TextViewer.jsx index ff6daba602..9d29635c3e 100644 --- a/react/Viewer/ViewersByFile/TextViewer.jsx +++ b/react/Viewer/ViewersByFile/TextViewer.jsx @@ -1,18 +1,16 @@ +import cx from 'classnames' +import PropTypes from 'prop-types' import React from 'react' import ReactMarkdown from 'react-markdown' -import PropTypes from 'prop-types' -import cx from 'classnames' import { withClient, models } from 'cozy-client' +import styles from './styles.styl' import { FileDoctype } from '../../proptypes' - -import ViewerSpinner from '../components/ViewerSpinner' -import withFileUrl from '../hoc/withFileUrl' import NoViewer from '../NoViewer' +import ViewerSpinner from '../components/ViewerSpinner' import { isFileEncrypted } from '../helpers' - -import styles from './styles.styl' +import withFileUrl from '../hoc/withFileUrl' const MarkdownRenderer = ({ text }) => ( { inst.setState({ loading: false, isMarkdown: true, - text: - "It's very easy to make some words **bold** and other words *italic* with Markdown" + text: "It's very easy to make some words **bold** and other words *italic* with Markdown" }) expect(comp.toJSON()).toMatchSnapshot() }) diff --git a/react/Viewer/ViewersByFile/VideoViewer.jsx b/react/Viewer/ViewersByFile/VideoViewer.jsx index d3169bb244..a67d430b84 100644 --- a/react/Viewer/ViewersByFile/VideoViewer.jsx +++ b/react/Viewer/ViewersByFile/VideoViewer.jsx @@ -1,8 +1,7 @@ import React from 'react' -import withFileUrl from '../hoc/withFileUrl' - import styles from './styles.styl' +import withFileUrl from '../hoc/withFileUrl' const VideoViewer = ({ file, url }) => (
    diff --git a/react/Viewer/ViewersByFile/VideoViewer.spec.jsx b/react/Viewer/ViewersByFile/VideoViewer.spec.jsx index dfc6925fc5..09c465ae0e 100644 --- a/react/Viewer/ViewersByFile/VideoViewer.spec.jsx +++ b/react/Viewer/ViewersByFile/VideoViewer.spec.jsx @@ -1,11 +1,10 @@ -import React from 'react' import { render, waitFor } from '@testing-library/react' +import React from 'react' +import VideoViewer from './VideoViewer' import { BreakpointsProvider } from '../../providers/Breakpoints' import DemoProvider from '../docs/DemoProvider' -import VideoViewer from './VideoViewer' - const file = { _id: 'video', class: 'video', diff --git a/react/Viewer/components/ExpirationAlert.jsx b/react/Viewer/components/ExpirationAlert.jsx index 11931f9c9d..03ea330608 100644 --- a/react/Viewer/components/ExpirationAlert.jsx +++ b/react/Viewer/components/ExpirationAlert.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react' import PropTypes from 'prop-types' +import React, { useState } from 'react' import { useClient } from 'cozy-client' import { @@ -13,8 +13,8 @@ import Alert from '../../Alert' import Button from '../../Buttons' import Link from '../../Link' import Typography from '../../Typography' -import { withViewerLocales } from '../hoc/withViewerLocales' import { useI18n } from '../../providers/I18n' +import { withViewerLocales } from '../hoc/withViewerLocales' const FILES_DOCTYPE = 'io.cozy.files' diff --git a/react/Viewer/components/ExpirationAnnotation.jsx b/react/Viewer/components/ExpirationAnnotation.jsx index 42349d634a..ada6aeb798 100644 --- a/react/Viewer/components/ExpirationAnnotation.jsx +++ b/react/Viewer/components/ExpirationAnnotation.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import { models } from 'cozy-client' diff --git a/react/Viewer/components/Footer.jsx b/react/Viewer/components/Footer.jsx index 763979b86c..ef5dd19b75 100644 --- a/react/Viewer/components/Footer.jsx +++ b/react/Viewer/components/Footer.jsx @@ -1,8 +1,7 @@ import React from 'react' -import useBreakpoints from '../../providers/Breakpoints' - import styles from './styles.styl' +import useBreakpoints from '../../providers/Breakpoints' const Footer = ({ children }) => { const { isDesktop } = useBreakpoints() diff --git a/react/Viewer/components/InformationPanel.jsx b/react/Viewer/components/InformationPanel.jsx index 76ba6fb122..55d0785360 100644 --- a/react/Viewer/components/InformationPanel.jsx +++ b/react/Viewer/components/InformationPanel.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' export const infoWidth = '22rem' diff --git a/react/Viewer/components/Navigation.jsx b/react/Viewer/components/Navigation.jsx index 5507790f3c..8db4fac661 100644 --- a/react/Viewer/components/Navigation.jsx +++ b/react/Viewer/components/Navigation.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 { default as ArrowIcon } from '../../Icons/DropdownClose' -import styles from './styles.styl' - const Navigation = ({ className, hidden, diff --git a/react/Viewer/components/PdfToolbarButton.jsx b/react/Viewer/components/PdfToolbarButton.jsx index bf46266a09..2b6f2f6126 100644 --- a/react/Viewer/components/PdfToolbarButton.jsx +++ b/react/Viewer/components/PdfToolbarButton.jsx @@ -1,5 +1,5 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import Button from '../../deprecated/Button' diff --git a/react/Viewer/components/PrintButton.jsx b/react/Viewer/components/PrintButton.jsx index 8b083cc226..958bf4d71c 100644 --- a/react/Viewer/components/PrintButton.jsx +++ b/react/Viewer/components/PrintButton.jsx @@ -1,16 +1,16 @@ -import React, { useState, useEffect, forwardRef } from 'react' import PropTypes from 'prop-types' +import React, { useState, useEffect, forwardRef } from 'react' import { useWebviewIntent } from 'cozy-intent' -import Button from '../../Buttons' -import IconButton from '../../IconButton' -import Icon from '../../Icon' +import { makeActions } from '../../ActionsMenu/Actions/helpers' +import { print } from '../../ActionsMenu/Actions/print' import ActionsItems, { actionsItemsComponentPropTypes } from '../../ActionsMenu/ActionsItems' -import { print } from '../../ActionsMenu/Actions/print' -import { makeActions } from '../../ActionsMenu/Actions/helpers' +import Button from '../../Buttons' +import Icon from '../../Icon' +import IconButton from '../../IconButton' const ActionComponent = forwardRef(({ action, variant, onClick }, ref) => { const { label, icon } = action diff --git a/react/Viewer/components/Toolbar.jsx b/react/Viewer/components/Toolbar.jsx index faefd66704..3e28886974 100644 --- a/react/Viewer/components/Toolbar.jsx +++ b/react/Viewer/components/Toolbar.jsx @@ -1,26 +1,24 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' import { useClient } from 'cozy-client' -import withBreakpoints from '../../helpers/withBreakpoints' -import { makeStyles } from '../../styles' -import IconButton from '../../IconButton' +import PrintButton from './PrintButton' +import { ToolbarFilePath } from './ToolbarFilePath' +import styles from './styles.styl' import Icon from '../../Icon' -import Typography from '../../Typography' -import PreviousIcon from '../../Icons/Previous' +import IconButton from '../../IconButton' import DownloadIcon from '../../Icons/Download' -import { useI18n } from '../../providers/I18n' +import PreviousIcon from '../../Icons/Previous' import MidEllipsis from '../../MidEllipsis' - +import Typography from '../../Typography' +import withBreakpoints from '../../helpers/withBreakpoints' +import { useI18n } from '../../providers/I18n' +import { makeStyles } from '../../styles' +import { extractChildrenCompByName } from '../Footer/helpers' import { downloadFile } from '../helpers' import { useEncrypted } from '../providers/EncryptedProvider' -import { extractChildrenCompByName } from '../Footer/helpers' -import { ToolbarFilePath } from './ToolbarFilePath' -import PrintButton from './PrintButton' - -import styles from './styles.styl' const useClasses = makeStyles(theme => ({ iconButton: { diff --git a/react/Viewer/components/ToolbarFilePath.jsx b/react/Viewer/components/ToolbarFilePath.jsx index 9674786dd5..3786fffc43 100644 --- a/react/Viewer/components/ToolbarFilePath.jsx +++ b/react/Viewer/components/ToolbarFilePath.jsx @@ -2,11 +2,10 @@ import React, { useMemo } from 'react' import { useClient, useQuery, models } from 'cozy-client' -import Link from '../../Link' import AppLinker from '../../AppLinker' import FilePath from '../../FilePath' +import Link from '../../Link' import useBreakpoints from '../../providers/Breakpoints' - import { makeWebLink, normalizeAndSpreadAttributes, diff --git a/react/Viewer/components/ViewerByFile.jsx b/react/Viewer/components/ViewerByFile.jsx index b33d8ab2e3..fda652197d 100644 --- a/react/Viewer/components/ViewerByFile.jsx +++ b/react/Viewer/components/ViewerByFile.jsx @@ -1,23 +1,21 @@ -import React, { useMemo } from 'react' import PropTypes from 'prop-types' +import React, { useMemo } from 'react' -import { isMobile as isMobileDevice } from 'cozy-device-helper' import { isPlainText } from 'cozy-client/dist/models/file' +import { isMobile as isMobileDevice } from 'cozy-device-helper' -import { FileDoctype } from '../../proptypes' import withBreakpoints from '../../helpers/withBreakpoints' - -import ImageViewer from '../ViewersByFile/ImageViewer' +import { FileDoctype } from '../../proptypes' +import NoViewer from '../NoViewer' import AudioViewer from '../ViewersByFile/AudioViewer' -import VideoViewer from '../ViewersByFile/VideoViewer' -import PdfJsViewer from '../ViewersByFile/PdfJsViewer' import BlankPaperViewer from '../ViewersByFile/BlankPaperViewer' -import TextViewer from '../ViewersByFile/TextViewer' +import ImageViewer from '../ViewersByFile/ImageViewer' +import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer' +import PdfJsViewer from '../ViewersByFile/PdfJsViewer' import PdfMobileViewer from '../ViewersByFile/PdfMobileViewer' -import NoViewer from '../NoViewer' import ShortcutViewer from '../ViewersByFile/ShortcutViewer' -import OnlyOfficeViewer from '../ViewersByFile/OnlyOfficeViewer' - +import TextViewer from '../ViewersByFile/TextViewer' +import VideoViewer from '../ViewersByFile/VideoViewer' import { useEncrypted } from '../providers/EncryptedProvider' const isBlankPaper = doc => doc.metadata?.paperProps?.isBlank diff --git a/react/Viewer/components/ViewerControls.jsx b/react/Viewer/components/ViewerControls.jsx index 11ef55d493..4579050bad 100644 --- a/react/Viewer/components/ViewerControls.jsx +++ b/react/Viewer/components/ViewerControls.jsx @@ -1,19 +1,17 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import flow from 'lodash/flow' import cx from 'classnames' import Hammer from 'hammerjs' +import flow from 'lodash/flow' +import PropTypes from 'prop-types' +import React, { Component } from 'react' -import { withStyles } from '../../styles' -import withBreakpoints from '../../helpers/withBreakpoints' - -import { isValidForPanel } from '../helpers' -import { toolbarPropsPropType } from '..' import { infoWidth } from './InformationPanel' -import Toolbar from './Toolbar' import Navigation from './Navigation' - +import Toolbar from './Toolbar' import styles from './styles.styl' +import { toolbarPropsPropType } from '..' +import withBreakpoints from '../../helpers/withBreakpoints' +import { withStyles } from '../../styles' +import { isValidForPanel } from '../helpers' const ACTIONS_HIDE_DELAY = 3000 @@ -132,9 +130,8 @@ class ViewerControls extends Component {
    { @@ -190,7 +187,4 @@ ViewerControls.propTypes = { showInfoPanel: PropTypes.bool } -export default flow( - withBreakpoints(), - withStyles(customStyles) -)(ViewerControls) +export default flow(withBreakpoints(), withStyles(customStyles))(ViewerControls) diff --git a/react/Viewer/components/ViewerControls.spec.jsx b/react/Viewer/components/ViewerControls.spec.jsx index 30dc4727d1..1a362cc585 100644 --- a/react/Viewer/components/ViewerControls.spec.jsx +++ b/react/Viewer/components/ViewerControls.spec.jsx @@ -1,8 +1,8 @@ -import React from 'react' import { render, screen } from '@testing-library/react' +import React from 'react' -import ViewerControls from './ViewerControls' import ViewerByFile from './ViewerByFile' +import ViewerControls from './ViewerControls' jest.mock('../ViewersByFile/AudioViewer', () => () =>
    AudioViewer
    ) jest.mock('../providers/EncryptedProvider', () => ({ diff --git a/react/Viewer/components/ViewerSpinner.jsx b/react/Viewer/components/ViewerSpinner.jsx index a82d696c27..586efa9355 100644 --- a/react/Viewer/components/ViewerSpinner.jsx +++ b/react/Viewer/components/ViewerSpinner.jsx @@ -1,7 +1,7 @@ import React from 'react' -import withBreakpoints from '../../helpers/withBreakpoints' import Spinner from '../../Spinner' +import withBreakpoints from '../../helpers/withBreakpoints' const ViewerSpinner = ({ breakpoints: { isDesktop } }) => { return ( diff --git a/react/Viewer/docs/DemoProvider.jsx b/react/Viewer/docs/DemoProvider.jsx index ef936768e1..0afceee784 100644 --- a/react/Viewer/docs/DemoProvider.jsx +++ b/react/Viewer/docs/DemoProvider.jsx @@ -1,19 +1,18 @@ import React from 'react' import { CozyProvider } from 'cozy-client' -import { BreakpointsProvider } from '../../providers/Breakpoints' +import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg' +import { BreakpointsProvider } from '../../providers/Breakpoints' import I18n from '../../providers/I18n' import { locales } from '../locales/index' -import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg' const demoTextFileResponse = { text: () => new Promise(resolve => resolve('Hello World !')) } const demoFilesByClass = { - pdf: - 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf', + pdf: 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf', audio: 'https://viewerdemo.cozycloud.cc/Z.mp3', video: 'https://viewerdemo.cozycloud.cc/Nextcloud.mp4', text: 'https://viewerdemo.cozycloud.cc/notes.md' diff --git a/react/Viewer/helpers.js b/react/Viewer/helpers.js index fa71e668c9..ddc46450da 100644 --- a/react/Viewer/helpers.js +++ b/react/Viewer/helpers.js @@ -1,5 +1,4 @@ import { generateWebLink } from 'cozy-client' - import { isEncrypted, isFromKonnector, @@ -7,7 +6,6 @@ import { hasCertifications, normalize } from 'cozy-client/dist/models/file' - import { KNOWN_DATE_METADATA_NAMES, KNOWN_INFORMATION_METADATA_NAMES, diff --git a/react/Viewer/hoc/withFileUrl.jsx b/react/Viewer/hoc/withFileUrl.jsx index 53d1f85736..1aea842b63 100644 --- a/react/Viewer/hoc/withFileUrl.jsx +++ b/react/Viewer/hoc/withFileUrl.jsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react' import PropTypes from 'prop-types' +import React, { Component } from 'react' -import ViewerSpinner from '../components/ViewerSpinner' import NoNetworkViewer from '../ViewersByFile/NoNetworkViewer' +import ViewerSpinner from '../components/ViewerSpinner' import { isFileEncrypted } from '../helpers' const TTL = 6000 diff --git a/react/Viewer/hoc/withViewerLocales.jsx b/react/Viewer/hoc/withViewerLocales.jsx index 759b004b3b..4a827f848a 100644 --- a/react/Viewer/hoc/withViewerLocales.jsx +++ b/react/Viewer/hoc/withViewerLocales.jsx @@ -1,5 +1,4 @@ import withLocales from '../../providers/I18n/withLocales' - import { locales } from '../locales' export const withViewerLocales = withLocales(locales) diff --git a/react/Viewer/index.jsx b/react/Viewer/index.jsx index 8f35826117..464e8b4f7b 100644 --- a/react/Viewer/index.jsx +++ b/react/Viewer/index.jsx @@ -3,14 +3,10 @@ import ViewerContainer from './ViewerContainer' export { default as Viewer } from './Viewer' export { default as ViewerContainer } from './ViewerContainer' export * as toolbarPropsPropType from './proptypes' -export { - default as ViewerWithCustomPanelAndFooter -} from './ViewerWithCustomPanelAndFooter' +export { default as ViewerWithCustomPanelAndFooter } from './ViewerWithCustomPanelAndFooter' export { default as ToolbarButtons } from './components/ToolbarButtons' export { default as FooterActionButtons } from './Footer/FooterActionButtons' export { default as ForwardButton } from './Footer/ForwardButton' -export { - default as ForwardOrDownloadButton -} from './Footer/ForwardOrDownloadButton' +export { default as ForwardOrDownloadButton } from './Footer/ForwardOrDownloadButton' export default ViewerContainer diff --git a/react/deprecated/ActionMenu/ActionMenuEffects.ts b/react/deprecated/ActionMenu/ActionMenuEffects.ts index e753008b5c..08635bcdc4 100644 --- a/react/deprecated/ActionMenu/ActionMenuEffects.ts +++ b/react/deprecated/ActionMenu/ActionMenuEffects.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 { isRsg } from '../../hooks/useSetFlagshipUi/helpers' +import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI' import { useCozyTheme } from '../../providers/CozyTheme' const getBottomBackground = (theme: Theme): string => { @@ -26,11 +26,11 @@ const useHook = (): void => { useSetFlagshipUI( { bottomBackground: theme.palette.background.paper, - // @ts-ignore + // @ts-expect-error bottomTheme: isLight ? 'dark' : 'light', topOverlay: 'rgba(0, 0, 0, 0.5)', topBackground: theme.palette.background.paper, - // @ts-ignore + // @ts-expect-error topTheme: 'light' }, { diff --git a/react/deprecated/ActionMenu/ActionMenuHeader.jsx b/react/deprecated/ActionMenu/ActionMenuHeader.jsx index 1ef7ee066e..ffa1124891 100644 --- a/react/deprecated/ActionMenu/ActionMenuHeader.jsx +++ b/react/deprecated/ActionMenu/ActionMenuHeader.jsx @@ -1,6 +1,6 @@ -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' diff --git a/react/deprecated/ActionMenu/ActionMenuItem.jsx b/react/deprecated/ActionMenu/ActionMenuItem.jsx index ea4b0ad0c4..82d45142ea 100644 --- a/react/deprecated/ActionMenu/ActionMenuItem.jsx +++ b/react/deprecated/ActionMenu/ActionMenuItem.jsx @@ -1,11 +1,10 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' - -import { Media, Bd, Img } from '../Media' -import { spacingProp } from '../../Stack' +import PropTypes from 'prop-types' +import React from 'react' import styles from './styles.styl' +import { spacingProp } from '../../Stack' +import { Media, Bd, Img } from '../Media' export const ActionMenuItem = ({ left, diff --git a/react/deprecated/ActionMenu/ActionMenuItemWrapper.jsx b/react/deprecated/ActionMenu/ActionMenuItemWrapper.jsx index 060e1c756d..ea535a3f0f 100644 --- a/react/deprecated/ActionMenu/ActionMenuItemWrapper.jsx +++ b/react/deprecated/ActionMenu/ActionMenuItemWrapper.jsx @@ -1,11 +1,11 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' -import { makeStyles } from '../../styles' -import Typography from '../../Typography' -import Icon, { iconPropType } from '../../Icon' import { ActionMenuItem } from '.' +import Icon, { iconPropType } from '../../Icon' +import Typography from '../../Typography' +import { makeStyles } from '../../styles' const useStyles = makeStyles(theme => ({ disabledItem: { diff --git a/react/deprecated/ActionMenu/ActionMenuRadio.jsx b/react/deprecated/ActionMenu/ActionMenuRadio.jsx index 5f34b04c79..d9ffe3a377 100644 --- a/react/deprecated/ActionMenu/ActionMenuRadio.jsx +++ b/react/deprecated/ActionMenu/ActionMenuRadio.jsx @@ -1,8 +1,7 @@ import React from 'react' -import Radio from '../Radio' - import styles from './styles.styl' +import Radio from '../Radio' export const ActionMenuRadio = props => { return diff --git a/react/deprecated/ActionMenu/ActionMenuWrapper.jsx b/react/deprecated/ActionMenu/ActionMenuWrapper.jsx index d5b312433c..8664ee73fd 100644 --- a/react/deprecated/ActionMenu/ActionMenuWrapper.jsx +++ b/react/deprecated/ActionMenu/ActionMenuWrapper.jsx @@ -1,10 +1,9 @@ import React from 'react' -import useBreakpoints from '../../providers/Breakpoints' -import isTesting from '../../helpers/isTesting' -import BottomSheet from '../../BottomSheet' - import NotInlineWrapper from './NotInlineWrapper' +import BottomSheet from '../../BottomSheet' +import isTesting from '../../helpers/isTesting' +import useBreakpoints from '../../providers/Breakpoints' /** * @deprecated This component is depreacated, please use [ActionsMenu](#/ActionsMenu) instead. diff --git a/react/deprecated/ActionMenu/Actions/ActionsItems.jsx b/react/deprecated/ActionMenu/Actions/ActionsItems.jsx index 27b7ca54e6..7de5044a3f 100644 --- a/react/deprecated/ActionMenu/Actions/ActionsItems.jsx +++ b/react/deprecated/ActionMenu/Actions/ActionsItems.jsx @@ -1,15 +1,15 @@ -import React, { useMemo } from 'react' import PropTypes from 'prop-types' +import React, { useMemo } from 'react' -import { useI18n } from '../../../providers/I18n' import { getActionName, getOnlyNeededActions } from './helpers' +import { useI18n } from '../../../providers/I18n' const ActionsItems = ({ doc, actions, isLast, setIsRenaming, onClose }) => { const { t } = useI18n() - const cleanedActions = useMemo(() => getOnlyNeededActions(actions, doc), [ - actions, - doc - ]) + const cleanedActions = useMemo( + () => getOnlyNeededActions(actions, doc), + [actions, doc] + ) return cleanedActions.map((actionObject, idx) => { const actionName = getActionName(actionObject) diff --git a/react/deprecated/ActionMenu/Actions/call.js b/react/deprecated/ActionMenu/Actions/call.js index a5b2b3da9c..d9ae9ad33c 100644 --- a/react/deprecated/ActionMenu/Actions/call.js +++ b/react/deprecated/ActionMenu/Actions/call.js @@ -1,9 +1,9 @@ import React from 'react' -import { useI18n } from '../../../providers/I18n' +import withActionsLocales from './locales/withActionsLocales' import TelephoneIcon from '../../../Icons/Telephone' +import { useI18n } from '../../../providers/I18n' import ActionMenuItemWrapper from '../ActionMenuItemWrapper' -import withActionsLocales from './locales/withActionsLocales' export const call = () => { return { diff --git a/react/deprecated/ActionMenu/Actions/emailTo.js b/react/deprecated/ActionMenu/Actions/emailTo.js index b2649ab125..096a955c23 100644 --- a/react/deprecated/ActionMenu/Actions/emailTo.js +++ b/react/deprecated/ActionMenu/Actions/emailTo.js @@ -1,9 +1,9 @@ import React from 'react' -import { useI18n } from '../../../providers/I18n' +import withActionsLocales from './locales/withActionsLocales' import EmailIcon from '../../../Icons/Email' +import { useI18n } from '../../../providers/I18n' import ActionMenuItemWrapper from '../ActionMenuItemWrapper' -import withActionsLocales from './locales/withActionsLocales' export const emailTo = () => { return { diff --git a/react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx b/react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx index 3baf43667d..a3ea16412a 100644 --- a/react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx +++ b/react/deprecated/ActionMenu/Actions/locales/withActionsLocales.jsx @@ -1,7 +1,6 @@ -import withLocales from '../../../../providers/I18n/withLocales' - import en from './en.json' import fr from './fr.json' +import withLocales from '../../../../providers/I18n/withLocales' export const locales = { en, diff --git a/react/deprecated/ActionMenu/Actions/modify.js b/react/deprecated/ActionMenu/Actions/modify.js index 573e4ec819..a9c95744b8 100644 --- a/react/deprecated/ActionMenu/Actions/modify.js +++ b/react/deprecated/ActionMenu/Actions/modify.js @@ -2,11 +2,11 @@ import React from 'react' import { generateWebLink, useClient } from 'cozy-client' +import withActionsLocales from './locales/withActionsLocales' +import PenIcon from '../../../Icons/Pen' import Link from '../../../Link' import { useI18n } from '../../../providers/I18n' -import PenIcon from '../../../Icons/Pen' import ActionMenuItemWrapper from '../ActionMenuItemWrapper' -import withActionsLocales from './locales/withActionsLocales' export const modify = () => { return { diff --git a/react/deprecated/ActionMenu/Actions/smsTo.js b/react/deprecated/ActionMenu/Actions/smsTo.js index 31013d7e2a..41e90a2c56 100644 --- a/react/deprecated/ActionMenu/Actions/smsTo.js +++ b/react/deprecated/ActionMenu/Actions/smsTo.js @@ -1,9 +1,9 @@ import React from 'react' -import { useI18n } from '../../../providers/I18n' +import withActionsLocales from './locales/withActionsLocales' import CommentIcon from '../../../Icons/Comment' +import { useI18n } from '../../../providers/I18n' import ActionMenuItemWrapper from '../ActionMenuItemWrapper' -import withActionsLocales from './locales/withActionsLocales' export const smsTo = () => { return { diff --git a/react/deprecated/ActionMenu/Actions/viewInContacts.js b/react/deprecated/ActionMenu/Actions/viewInContacts.js index 43c701b878..1466daf7ba 100644 --- a/react/deprecated/ActionMenu/Actions/viewInContacts.js +++ b/react/deprecated/ActionMenu/Actions/viewInContacts.js @@ -2,11 +2,11 @@ import React from 'react' import { generateWebLink, useClient } from 'cozy-client' +import withActionsLocales from './locales/withActionsLocales' +import OpenappIcon from '../../../Icons/Openapp' import Link from '../../../Link' import { useI18n } from '../../../providers/I18n' -import OpenappIcon from '../../../Icons/Openapp' import ActionMenuItemWrapper from '../ActionMenuItemWrapper' -import withActionsLocales from './locales/withActionsLocales' export const viewInContacts = () => { return { diff --git a/react/deprecated/ActionMenu/NotInlineWrapper.jsx b/react/deprecated/ActionMenu/NotInlineWrapper.jsx index cdc70886f2..f157c9ffdd 100644 --- a/react/deprecated/ActionMenu/NotInlineWrapper.jsx +++ b/react/deprecated/ActionMenu/NotInlineWrapper.jsx @@ -1,6 +1,6 @@ +import ClickAwayListener from '@material-ui/core/ClickAwayListener' import React, { useState } from 'react' import { usePopper } from 'react-popper' -import ClickAwayListener from '@material-ui/core/ClickAwayListener' const NotInlineWrapper = ({ anchorElRef, diff --git a/react/deprecated/ActionMenu/index.jsx b/react/deprecated/ActionMenu/index.jsx index d1ed5aac6a..329bafd75e 100644 --- a/react/deprecated/ActionMenu/index.jsx +++ b/react/deprecated/ActionMenu/index.jsx @@ -1,20 +1,18 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' +import PropTypes from 'prop-types' +import React from 'react' -import createDepreciationLogger from '../../helpers/createDepreciationLogger' -import useBreakpoints from '../../providers/Breakpoints' - -import ActionMenuWrapper from './ActionMenuWrapper' +import { useActionMenuEffects } from './ActionMenuEffects' import { ActionMenuHeader } from './ActionMenuHeader' import { ActionMenuItem } from './ActionMenuItem' -import { ActionMenuRadio } from './ActionMenuRadio' -import { useActionMenuEffects } from './ActionMenuEffects' import ActionMenuItemWrapper from './ActionMenuItemWrapper' +import { ActionMenuRadio } from './ActionMenuRadio' import ActionMenuWithClose from './ActionMenuWithClose' +import ActionMenuWrapper from './ActionMenuWrapper' import ActionsItems from './Actions/ActionsItems' - import styles from './styles.styl' +import createDepreciationLogger from '../../helpers/createDepreciationLogger' +import useBreakpoints from '../../providers/Breakpoints' const logDepecratedMenu = createDepreciationLogger() const logDepecratedPlacement = createDepreciationLogger() diff --git a/react/deprecated/ActionMenu/index.spec.jsx b/react/deprecated/ActionMenu/index.spec.jsx index 382a2c0be6..814c9aaa28 100644 --- a/react/deprecated/ActionMenu/index.spec.jsx +++ b/react/deprecated/ActionMenu/index.spec.jsx @@ -1,16 +1,15 @@ -import React from 'react' -import { mount } from 'enzyme' import { render } from '@testing-library/react' +import { mount } from 'enzyme' +import React from 'react' import { act } from 'react-dom/test-utils' -import { fixPopperTesting } from '../../Popper/testing' -import { BreakpointsProvider } from '../../providers/Breakpoints' -import Typography from '../../Typography' +import ActionMenu, { ActionMenuItem, ActionMenuRadio } from '.' import Icon from '../../Icon' import FileIcon from '../../Icons/File' import WarningIcon from '../../Icons/Warning' - -import ActionMenu, { ActionMenuItem, ActionMenuRadio } from '.' +import { fixPopperTesting } from '../../Popper/testing' +import Typography from '../../Typography' +import { BreakpointsProvider } from '../../providers/Breakpoints' xdescribe('ActionMenu', () => { fixPopperTesting() @@ -22,7 +21,7 @@ xdescribe('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' @@ -50,12 +49,7 @@ xdescribe('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 () => { @@ -79,19 +73,13 @@ xdescribe('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() diff --git a/react/deprecated/Alerter/Alert.jsx b/react/deprecated/Alerter/Alert.jsx index 1e35bd78e1..afbbd1000b 100644 --- a/react/deprecated/Alerter/Alert.jsx +++ b/react/deprecated/Alerter/Alert.jsx @@ -1,10 +1,9 @@ -import React, { Component } from 'react' +import cx from 'classnames' import PropTypes from 'prop-types' - -import Button from '../Button' +import React, { Component } from 'react' import styles from './styles.styl' -import cx from 'classnames' +import Button from '../Button' export class Alert extends Component { state = { diff --git a/react/deprecated/Alerter/alerter.spec.js b/react/deprecated/Alerter/alerter.spec.js index ac7611bc19..33c6f6e3e6 100644 --- a/react/deprecated/Alerter/alerter.spec.js +++ b/react/deprecated/Alerter/alerter.spec.js @@ -1,8 +1,8 @@ 'use strict' /* eslint-env jest */ -import React from 'react' import { shallow } from 'enzyme' +import React from 'react' import Alerter from '.' import Alert from './Alert' @@ -17,12 +17,7 @@ describe('Alerter component', () => { it(`renders correctly an ${type} alert`, () => { const wrapper = shallow() Alerter[type](`Test ${type} alert`) - expect( - wrapper - .find(Alert) - .dive() - .getElement() - ).toMatchSnapshot() + expect(wrapper.find(Alert).dive().getElement()).toMatchSnapshot() }) }) @@ -39,12 +34,7 @@ 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', () => { @@ -64,10 +54,7 @@ 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) }) diff --git a/react/deprecated/Alerter/index.jsx b/react/deprecated/Alerter/index.jsx index 3994409a18..a8bdfcefbe 100644 --- a/react/deprecated/Alerter/index.jsx +++ b/react/deprecated/Alerter/index.jsx @@ -1,7 +1,8 @@ -import React, { Component } from 'react' import PropTypes from 'prop-types' -import Portal from '../../Portal' +import React, { Component } from 'react' + import Alert from './Alert' +import Portal from '../../Portal' const MINIMUM_ALERT_DURATION = 2000 diff --git a/react/deprecated/BottomDrawer/index.jsx b/react/deprecated/BottomDrawer/index.jsx index fbb4e22988..aa1d6bfc2a 100644 --- a/react/deprecated/BottomDrawer/index.jsx +++ b/react/deprecated/BottomDrawer/index.jsx @@ -1,7 +1,7 @@ -import React, { Component, createRef } from 'react' -import PropTypes from 'prop-types' import Hammer from 'hammerjs' import once from 'lodash/once' +import PropTypes from 'prop-types' +import React, { Component, createRef } from 'react' import { RemoveScroll } from 'react-remove-scroll' import styles from './styles.styl' @@ -51,8 +51,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.menuRef.current.getBoundingClientRect() - .height + const maximumGestureDistance = + this.menuRef.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 diff --git a/react/deprecated/Button/index.jsx b/react/deprecated/Button/index.jsx index 0d52956166..3ae1923579 100644 --- a/react/deprecated/Button/index.jsx +++ b/react/deprecated/Button/index.jsx @@ -1,12 +1,12 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' import Icon, { iconPropType } from '../../Icon' - import SpinnerIcon from '../../Icons/Spinner' -const btnClass = function(options) { +const btnClass = function (options) { const { className, extension, size, theme, variant, round, align } = options return cx( styles['c-btn'], diff --git a/react/deprecated/ButtonAction/index.jsx b/react/deprecated/ButtonAction/index.jsx index 79b0010cb8..5c2a7737f1 100644 --- a/react/deprecated/ButtonAction/index.jsx +++ b/react/deprecated/ButtonAction/index.jsx @@ -1,6 +1,7 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' import Icon from '../../Icon' diff --git a/react/deprecated/Chip/index.jsx b/react/deprecated/Chip/index.jsx index dc0b6967bb..79051c1693 100644 --- a/react/deprecated/Chip/index.jsx +++ b/react/deprecated/Chip/index.jsx @@ -1,5 +1,6 @@ import cx from 'classnames' import React from 'react' + import styles from './styles.styl' class Chip extends React.PureComponent { diff --git a/react/deprecated/CompositeRow/index.jsx b/react/deprecated/CompositeRow/index.jsx index 6b87fbff12..33f523ef7d 100644 --- a/react/deprecated/CompositeRow/index.jsx +++ b/react/deprecated/CompositeRow/index.jsx @@ -1,11 +1,10 @@ -import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' - -import { Media, Bd, Img } from '../Media' -import Typography from '../../Typography' +import React from 'react' import styles from './styles.styl' +import Typography from '../../Typography' +import { Media, Bd, Img } from '../Media' const denseStyle = { height: '48px' } diff --git a/react/deprecated/GridItem/index.jsx b/react/deprecated/GridItem/index.jsx index c7556526aa..ea008155cb 100644 --- a/react/deprecated/GridItem/index.jsx +++ b/react/deprecated/GridItem/index.jsx @@ -1,8 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' -import Grid from '../../Grid' +import PropTypes from 'prop-types' +import React from 'react' + import styles from './styles.styl' +import Grid from '../../Grid' const GridItem = ({ onClick, children }) => { return ( diff --git a/react/deprecated/Infos/index.jsx b/react/deprecated/Infos/index.jsx index 663fdce53e..d7a801b504 100644 --- a/react/deprecated/Infos/index.jsx +++ b/react/deprecated/Infos/index.jsx @@ -1,7 +1,8 @@ -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 IconButton from '../../IconButton' import CrossIcon from '../../Icons/Cross' @@ -9,8 +10,6 @@ import Stack from '../../Stack' import Typography from '../../Typography' import createDepreciationLogger from '../../helpers/createDepreciationLogger' -import styles from './styles.styl' - export const Infos = ({ description, action, @@ -70,14 +69,8 @@ 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' ) diff --git a/react/deprecated/InfosCarrousel/index.jsx b/react/deprecated/InfosCarrousel/index.jsx index 095a441527..3943ed5318 100644 --- a/react/deprecated/InfosCarrousel/index.jsx +++ b/react/deprecated/InfosCarrousel/index.jsx @@ -1,14 +1,12 @@ -import React, { useState, useCallback, useEffect } from 'react' -import PropTypes from 'prop-types' import cx from 'classnames' import clamp from 'lodash/clamp' +import PropTypes from 'prop-types' +import React, { useState, useCallback, useEffect } from 'react' import SwipeableViews from 'react-swipeable-views' +import styles from './styles.styl' import Icon from '../../Icon' import IconButton from '../../IconButton' - -import styles from './styles.styl' - import LeftIcon from '../../Icons/Left' import RightIcon from '../../Icons/Right' @@ -42,7 +40,7 @@ const InfosCarrousel = ({ const hasNextInfos = index === count - 1 const onChangeIndex = useCallback( - function(index) { + function (index) { const { onChangeIndex: onChangeIndexProp } = swipeableProps if (onChangeIndexProp) { onChangeIndexProp(index) diff --git a/react/deprecated/InfosCarrousel/index.spec.jsx b/react/deprecated/InfosCarrousel/index.spec.jsx index ecdc78cf8e..484aac83c7 100644 --- a/react/deprecated/InfosCarrousel/index.spec.jsx +++ b/react/deprecated/InfosCarrousel/index.spec.jsx @@ -2,12 +2,11 @@ import React from 'react' import { act } from 'react-dom/test-utils' import SwipeableViews from 'react-swipeable-views' -import Button from '../Button' +import InfosCarrousel from '.' import IconButton from '../../IconButton' -import Infos from '../Infos' import Typography from '../../Typography' - -import InfosCarrousel from '.' +import Button from '../Button' +import Infos from '../Infos' // This is necessary for tests to be predictable const swipeableProps = { disableLazyLoading: true } @@ -39,10 +38,7 @@ const getArrowsDisabledProps = root => const simulateSwipeToSlideIndex = (root, slideIndex) => { act(() => { - root - .find(SwipeableViews) - .props() - .onChangeIndex(slideIndex) + root.find(SwipeableViews).props().onChangeIndex(slideIndex) }) root.update() } diff --git a/react/deprecated/InlineCard/index.jsx b/react/deprecated/InlineCard/index.jsx index a7aeec9e7a..dbceeea8d9 100644 --- a/react/deprecated/InlineCard/index.jsx +++ b/react/deprecated/InlineCard/index.jsx @@ -1,6 +1,6 @@ -import React, { PureComponent } from 'react' import cx from 'classnames' import PropTypes from 'prop-types' +import React, { PureComponent } from 'react' import styles from './styles.styl' diff --git a/react/deprecated/IntentModal/IntentModal.jsx b/react/deprecated/IntentModal/IntentModal.jsx index e3311b7311..359b516ea3 100644 --- a/react/deprecated/IntentModal/IntentModal.jsx +++ b/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() diff --git a/react/deprecated/IntentOpener/IntentOpener.jsx b/react/deprecated/IntentOpener/IntentOpener.jsx index 2c1d2fbe65..75faf320bd 100644 --- a/react/deprecated/IntentOpener/IntentOpener.jsx +++ b/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() diff --git a/react/deprecated/Media/Media.jsx b/react/deprecated/Media/Media.jsx index 49cda7e784..2f22420e8d 100644 --- a/react/deprecated/Media/Media.jsx +++ b/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. diff --git a/react/deprecated/Menus/index.js b/react/deprecated/Menus/index.js index de8d440d46..1165abde3e 100644 --- a/react/deprecated/Menus/index.js +++ b/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' diff --git a/react/deprecated/Modal/ModalBackButton.jsx b/react/deprecated/Modal/ModalBackButton.jsx index 35817f44de..7e4fc248f3 100644 --- a/react/deprecated/Modal/ModalBackButton.jsx +++ b/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() diff --git a/react/deprecated/Modal/ModalButtons.jsx b/react/deprecated/Modal/ModalButtons.jsx index e3947dfc97..6ef4418f55 100644 --- a/react/deprecated/Modal/ModalButtons.jsx +++ b/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 = ({ diff --git a/react/deprecated/Modal/ModalContent.jsx b/react/deprecated/Modal/ModalContent.jsx index d142386855..d4edb6ef3d 100644 --- a/react/deprecated/Modal/ModalContent.jsx +++ b/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 => diff --git a/react/deprecated/Modal/ModalCross.jsx b/react/deprecated/Modal/ModalCross.jsx index c766db84c2..fdefb6f480 100644 --- a/react/deprecated/Modal/ModalCross.jsx +++ b/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() diff --git a/react/deprecated/Modal/ModalEffects.ts b/react/deprecated/Modal/ModalEffects.ts index 4f46ed1159..ada443629c 100644 --- a/react/deprecated/Modal/ModalEffects.ts +++ b/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' }, { diff --git a/react/deprecated/Modal/ModalFooter.jsx b/react/deprecated/Modal/ModalFooter.jsx index c8f1216945..fad4ff6369 100644 --- a/react/deprecated/Modal/ModalFooter.jsx +++ b/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 }) => (
    {children}
    diff --git a/react/deprecated/Modal/ModalHeader.jsx b/react/deprecated/Modal/ModalHeader.jsx index 50a44db951..992868dba6 100644 --- a/react/deprecated/Modal/ModalHeader.jsx +++ b/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, diff --git a/react/deprecated/Modal/ModalSection.jsx b/react/deprecated/Modal/ModalSection.jsx index d845742440..64c6660656 100644 --- a/react/deprecated/Modal/ModalSection.jsx +++ b/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 }) => (
    { } 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) diff --git a/react/deprecated/NarrowContent/index.jsx b/react/deprecated/NarrowContent/index.jsx index 6032599831..d60f00e49a 100644 --- a/react/deprecated/NarrowContent/index.jsx +++ b/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 => { diff --git a/react/deprecated/Overlay/index.jsx b/react/deprecated/Overlay/index.jsx index 4e7cc3110b..7f33eb3649 100644 --- a/react/deprecated/Overlay/index.jsx +++ b/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'] diff --git a/react/deprecated/PercentageBar/index.jsx b/react/deprecated/PercentageBar/index.jsx index 08dff75bb1..9da34ecb99 100644 --- a/react/deprecated/PercentageBar/index.jsx +++ b/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 diff --git a/react/deprecated/PercentageLine/index.jsx b/react/deprecated/PercentageLine/index.jsx index 7d02e6c0fe..b60899302e 100644 --- a/react/deprecated/PercentageLine/index.jsx +++ b/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) diff --git a/react/deprecated/PushClientButton/index.jsx b/react/deprecated/PushClientButton/index.jsx index 735c4971cc..67d31c8793 100644 --- a/react/deprecated/PushClientButton/index.jsx +++ b/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 diff --git a/react/deprecated/PushClientButton/index.spec.jsx b/react/deprecated/PushClientButton/index.spec.jsx index 0c53bd0fd1..f1a45af92b 100644 --- a/react/deprecated/PushClientButton/index.spec.jsx +++ b/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 '.' diff --git a/react/deprecated/QuotaAlert/index.jsx b/react/deprecated/QuotaAlert/index.jsx index cc3a1ed2b3..b250931489 100644 --- a/react/deprecated/QuotaAlert/index.jsx +++ b/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() diff --git a/react/deprecated/Radio/index.jsx b/react/deprecated/Radio/index.jsx index e10764d465..6534848c0f 100644 --- a/react/deprecated/Radio/index.jsx +++ b/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() diff --git a/react/deprecated/Radio/index.spec.jsx b/react/deprecated/Radio/index.spec.jsx index b820386d61..e81223d1d7 100644 --- a/react/deprecated/Radio/index.spec.jsx +++ b/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() + const { container } = render() const input = container.querySelector('input[type=radio]') diff --git a/react/deprecated/RaisedList/index.js b/react/deprecated/RaisedList/index.js index f8f5f37f48..b950f08e74 100644 --- a/react/deprecated/RaisedList/index.js +++ b/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' diff --git a/react/deprecated/Table/index.jsx b/react/deprecated/Table/index.jsx index 9fe43c6004..dbe026eaaa 100644 --- a/react/deprecated/Table/index.jsx +++ b/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' diff --git a/react/deprecated/ViewStack/ModalStack.jsx b/react/deprecated/ViewStack/ModalStack.jsx index b2fdb38f27..bb85f148b0 100644 --- a/react/deprecated/ViewStack/ModalStack.jsx +++ b/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. diff --git a/react/deprecated/ViewStack/ViewStack.jsx b/react/deprecated/ViewStack/ViewStack.jsx index 02b0a6d75e..1adef8e74a 100644 --- a/react/deprecated/ViewStack/ViewStack.jsx +++ b/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 diff --git a/react/deprecated/ViewStack/example.jsx b/react/deprecated/ViewStack/example.jsx index a807586711..88fef78390 100644 --- a/react/deprecated/ViewStack/example.jsx +++ b/react/deprecated/ViewStack/example.jsx @@ -1,4 +1,5 @@ import React from 'react' + import { useViewStack } from '.' import Button from '../Button' diff --git a/react/deprecated/ViewStack/index.spec.jsx b/react/deprecated/ViewStack/index.spec.jsx index 4c8a7d156d..325e3ed32b 100644 --- a/react/deprecated/ViewStack/index.spec.jsx +++ b/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() diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx index c50a2ca432..136193d10c 100644 --- a/react/examples.spec.jsx +++ b/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 diff --git a/react/helpers/appDataset.spec.js b/react/helpers/appDataset.spec.js index 73e550f28a..93e6f12ab5 100644 --- a/react/helpers/appDataset.spec.js +++ b/react/helpers/appDataset.spec.js @@ -1,4 +1,5 @@ import memoize from 'lodash/memoize' + import { readCozyDataFromDOM, readApplicationDataset, diff --git a/react/helpers/tracker.jsx b/react/helpers/tracker.jsx index 040c9baddb..5b67465a07 100644 --- a/react/helpers/tracker.jsx +++ b/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. diff --git a/react/helpers/tracker.spec.js b/react/helpers/tracker.spec.js index 5ea4f3ec45..8e6d53ab6f 100644 --- a/react/helpers/tracker.spec.js +++ b/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 diff --git a/react/helpers/withBreakpoints.jsx b/react/helpers/withBreakpoints.jsx index 8be5820f01..5f2f49be49 100644 --- a/react/helpers/withBreakpoints.jsx +++ b/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 + render() { + const props = this.props + const { breakpoints } = this.state + return + } } - } - 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 diff --git a/react/hooks/useBrowserOffline.js b/react/hooks/useBrowserOffline.js index e786f8e91b..0c8e7eff6a 100644 --- a/react/hooks/useBrowserOffline.js +++ b/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) diff --git a/react/hooks/useBrowserOffline.spec.js b/react/hooks/useBrowserOffline.spec.js index 854e6c0946..e0347db38c 100644 --- a/react/hooks/useBrowserOffline.spec.js +++ b/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) diff --git a/react/hooks/useConfirmExit/index.jsx b/react/hooks/useConfirmExit/index.jsx index 98cd65bc6f..c0de6439f4 100644 --- a/react/hooks/useConfirmExit/index.jsx +++ b/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 diff --git a/react/hooks/useConfirmExit/index.spec.js b/react/hooks/useConfirmExit/index.spec.js index ba2b0efd94..5347ea21eb 100644 --- a/react/hooks/useConfirmExit/index.spec.js +++ b/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}` } } } diff --git a/react/hooks/useCycle.spec.jsx b/react/hooks/useCycle.spec.jsx index 3990f9ca59..9688ecb04b 100644 --- a/react/hooks/useCycle.spec.jsx +++ b/react/hooks/useCycle.spec.jsx @@ -1,4 +1,5 @@ import { renderHook, act } from '@testing-library/react-hooks' + import useCycle from './useCycle' describe('useCycle', () => { diff --git a/react/hooks/useEventListener.js b/react/hooks/useEventListener.js index 7c98a01c7a..bd7ec21f73 100644 --- a/react/hooks/useEventListener.js +++ b/react/hooks/useEventListener.js @@ -1,4 +1,5 @@ import { useEffect } from 'react' + import { unRef } from '../helpers/ref' const useEventListener = (element, event, cb) => { diff --git a/react/hooks/useEventListener.spec.js b/react/hooks/useEventListener.spec.js index 71158a3dc3..828d6fb4a4 100644 --- a/react/hooks/useEventListener.spec.js +++ b/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) diff --git a/react/hooks/usePeriodicRender.spec.js b/react/hooks/usePeriodicRender.spec.js index be82c1e583..c9bcc7d208 100644 --- a/react/hooks/usePeriodicRender.spec.js +++ b/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(() => { diff --git a/react/hooks/useRealtime.spec.js b/react/hooks/useRealtime.spec.js index 69a50bb456..029b364d8d 100644 --- a/react/hooks/useRealtime.spec.js +++ b/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() diff --git a/react/hooks/useScroll.jsx b/react/hooks/useScroll.jsx index 1f779c057c..c62a585630 100644 --- a/react/hooks/useScroll.jsx +++ b/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' diff --git a/react/hooks/useScroll.spec.jsx b/react/hooks/useScroll.spec.jsx index 2e02cb856e..acb0cba9f6 100644 --- a/react/hooks/useScroll.spec.jsx +++ b/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) diff --git a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts index f5e7d7ad1d..21a2edccc0 100644 --- a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts +++ b/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() diff --git a/react/legacy/Breadcrumbs/index.jsx b/react/legacy/Breadcrumbs/index.jsx index 9190d4ed9c..1da3c050b2 100644 --- a/react/legacy/Breadcrumbs/index.jsx +++ b/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 = () => ( / diff --git a/react/providers/Alert/index.jsx b/react/providers/Alert/index.jsx index 9c8272e605..894c57c297 100644 --- a/react/providers/Alert/index.jsx +++ b/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 diff --git a/react/providers/Breakpoints/index.jsx b/react/providers/Breakpoints/index.jsx index 1cc8dd07a3..05619af490 100644 --- a/react/providers/Breakpoints/index.jsx +++ b/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 diff --git a/react/providers/CozyTheme/CozyThemeWithQuery.jsx b/react/providers/CozyTheme/CozyThemeWithQuery.jsx index d34e44768c..7fec4f0334 100644 --- a/react/providers/CozyTheme/CozyThemeWithQuery.jsx +++ b/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() diff --git a/react/providers/CozyTheme/DumbCozyTheme.jsx b/react/providers/CozyTheme/DumbCozyTheme.jsx index a2b06c02d3..088ceb4d1d 100644 --- a/react/providers/CozyTheme/DumbCozyTheme.jsx +++ b/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 = ({
    diff --git a/react/providers/CozyTheme/index.jsx b/react/providers/CozyTheme/index.jsx index 7d395dcfe8..2e95406786 100644 --- a/react/providers/CozyTheme/index.jsx +++ b/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() diff --git a/react/providers/I18n/createUseI18n.jsx b/react/providers/I18n/createUseI18n.jsx index 3df5ec6159..3d6fcec151 100644 --- a/react/providers/I18n/createUseI18n.jsx +++ b/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 } diff --git a/react/providers/I18n/format.jsx b/react/providers/I18n/format.jsx index a4a47cf59f..c6b3ba9a03 100644 --- a/react/providers/I18n/format.jsx +++ b/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] }) diff --git a/react/providers/I18n/helpers.js b/react/providers/I18n/helpers.js index a1f494e215..369ed76648 100644 --- a/react/providers/I18n/helpers.js +++ b/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]') diff --git a/react/providers/I18n/index.jsx b/react/providers/I18n/index.jsx index 1ab439c9bd..e87496d511 100644 --- a/react/providers/I18n/index.jsx +++ b/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' diff --git a/react/providers/I18n/index.spec.jsx b/react/providers/I18n/index.spec.jsx index 4a2a7d2bbf..742bedeea0 100644 --- a/react/providers/I18n/index.spec.jsx +++ b/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 !' } diff --git a/react/providers/I18n/translate.jsx b/react/providers/I18n/translate.jsx index d7fceec1b8..c70645a36d 100644 --- a/react/providers/I18n/translate.jsx +++ b/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 } diff --git a/react/providers/I18n/withLocales.jsx b/react/providers/I18n/withLocales.jsx index 2a0eed8cd6..519e4971f6 100644 --- a/react/providers/I18n/withLocales.jsx +++ b/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) diff --git a/react/providers/I18n/withLocales.spec.jsx b/react/providers/I18n/withLocales.spec.jsx index 5f385cf55e..83b3c8dda9 100644 --- a/react/providers/I18n/withLocales.spec.jsx +++ b/react/providers/I18n/withLocales.spec.jsx @@ -1,4 +1,5 @@ import React from 'react' + import { I18n } from '.' import withLocales from './withLocales' diff --git a/react/providers/I18n/withOnlyLocales.jsx b/react/providers/I18n/withOnlyLocales.jsx index 6126e1322c..ffffae9dea 100644 --- a/react/providers/I18n/withOnlyLocales.jsx +++ b/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 } diff --git a/react/providers/Intent/index.jsx b/react/providers/Intent/index.jsx index 9bb559f1f6..d78c5c9445 100644 --- a/react/providers/Intent/index.jsx +++ b/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() diff --git a/react/utils.jsx b/react/utils.jsx index d475a97d48..ade36bbad9 100644 --- a/react/utils.jsx +++ b/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 ( - - {children} - - ) -} + return ( + + {children} + + ) + } export { mkComponent } diff --git a/react/utils/color.js b/react/utils/color.js index 48db0a7389..017f9e2698 100644 --- a/react/utils/color.js +++ b/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) =>