feat(useBreakpoints): Move it into providers folder

BREAKING CHANGE: `useBreakpoints` has been moved. Use codemods to deal with the change.

docs/styleguide.config.js

@@ -169,12 +169,14 @@ module.exports = {
     },
     {
       name: 'Providers',
-      components: () => ['../react/providers/CozyTheme']
+      components: () => [
+        '../react/providers/Breakpoints',
+        '../react/providers/CozyTheme'
+      ]
     },
     {
       name: 'Hooks',
       components: () => [
-        '../react/hooks/useBreakpoints/index.jsx',
         '../react/hooks/useBrowserOffline.jsx',
         '../react/hooks/useConfirmExit/index.jsx',
         '../react/hooks/useCycle.jsx',

react/ActionsMenu/ActionsMenuMobileHeader.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import ActionsMenuItem from './ActionsMenuItem'
 import Divider from '../Divider'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 const ActionsMenuMobileHeader = forwardRef(({ children, ...props }, ref) => {
   const { isMobile } = useBreakpoints()

react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Menu from '../Menu'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import BottomSheet from '../BottomSheet'
 import isTesting from '../helpers/isTesting'
 import Paper from '../Paper'

react/AppSections/Readme.md

@@ -2,7 +2,7 @@
 import { useState } from 'react'
 import mockApps from './_mockApps'
 import { I18n } from 'cozy-ui/transpiled/react/I18n'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import Sections from 'cozy-ui/transpiled/react/AppSections'
 import Variants from 'cozy-ui/docs/components/Variants'
 import CozyClient, { CozyProvider } from "cozy-client";

react/AppSections/components/AppsSection.jsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { useI18n } from '../../I18n'
-import useBreakpoints from '../../hooks/useBreakpoints'
+import useBreakpoints from '../../providers/Breakpoints'
 import { getTranslatedManifestProperty } from '../helpers'
 import sortBy from 'lodash/sortBy'
 import AppTile from '../../AppTile'

react/AppSections/components/AppsSection.spec.jsx

@@ -11,7 +11,7 @@ import mockApps from '../../mocks/apps'
 import en from '../locales/en'
 import { I18nContext } from '../../jestLib/I18n'
 import Tile, { TileTitle, TileSubtitle, TileFooter } from '../../Tile'
-import { BreakpointsProvider } from '../../hooks/useBreakpoints'
+import { BreakpointsProvider } from '../../providers/Breakpoints'
 import { I18n } from '../../I18n'
 
 import { AppsSection } from './AppsSection'

react/BarContextProvider/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { I18nContext } from '../I18n'
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import { BreakpointsProvider } from '../providers/Breakpoints'
 
 import { CozyProvider } from 'cozy-client'
 import { Provider } from 'react-redux'

react/BarTitle/Readme.md

@@ -3,7 +3,7 @@ Used to display a title in the Cozy Bar.
 ### Usage
 
 ```jsx static
-import { useBreakpoints } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 const MyPage = () => {
   const { isMobile } = useBreakpoints()

react/ContactsList/ContactRow.jsx

@@ -9,7 +9,7 @@ import ContactPhone from './Contacts/ContactPhone'
 import ContactIdentity from './Contacts/ContactIdentity'
 import ContactCozy from './Contacts/ContactCozy'
 import ContactEmail from './Contacts/ContactEmail'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 const { getPrimaryCozy, getPrimaryPhone, getPrimaryEmail } = models.contact
 

react/ContactsList/ContactRow.spec.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import { BreakpointsProvider } from '../providers/Breakpoints'
 import ContactRow from './ContactRow'
 import renderer from 'react-test-renderer'
 import logger from 'cozy-logger'

react/ContactsList/ContactsList.jsx

@@ -6,7 +6,7 @@ import List from '../List'
 import ListSubheader from '../ListSubheader'
 import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
 import ContactRow from './ContactRow'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 const ContactsList = ({ contacts, onItemClick, ...rest }) => {
   const sortedContacts = sortContacts(contacts)

react/ContactsList/Readme.md

@@ -2,7 +2,7 @@
 
 ```jsx
 import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import contacts from './_mockContacts.json'
 
 ;
@@ -19,7 +19,7 @@ import contacts from './_mockContacts.json'
 ```jsx
 import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
 import contacts from './_mockContacts.json'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 initialState = { contact: null }
 

react/ContactsListModal/Readme.md

@@ -24,7 +24,7 @@ client.registerPlugin(RealtimePlugin)
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import ContactsListModal from 'cozy-ui/transpiled/react/ContactsListModal'
 import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { I18nContext } from 'cozy-ui/transpiled/react/I18n'
 
 initialState = { opened: isTesting() }

react/ContactsListModal/index.jsx

@@ -13,7 +13,7 @@ import {
 } from '../CozyDialogs'
 import useRealtime from '../hooks/useRealtime'
 import useEventListener from '../hooks/useEventListener'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import Button from '../Buttons'
 import PlusIcon from '../Icons/Plus'
 import Icon from '../Icon'

react/CozyDialogs/Readme.md

@@ -393,7 +393,7 @@ const setFlagshipVars = () => {
 
 ```jsx
 import cx from 'classnames'
-import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 
 import { Dialog } from  'cozy-ui/transpiled/react/CozyDialogs'

react/CozyDialogs/testing.spec.jsx

@@ -9,11 +9,11 @@ import {
   getBackButton,
   getBackCloseButton
 } from './testing'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import DemoProvider from '../providers/DemoProvider'
 
-jest.mock('../hooks/useBreakpoints', () => ({
-  ...jest.requireActual('../hooks/useBreakpoints'),
+jest.mock('../providers/Breakpoints', () => ({
+  ...jest.requireActual('../providers/Breakpoints'),
   __esModule: true,
   default: jest.fn(),
   useBreakpoints: jest.fn()

react/CozyDialogs/useCozyDialog.js

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import cx from 'classnames'
 
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import { makeStyles } from '../styles'
 
 import DialogTransition from './DialogTransition'

react/DateMonthPicker/Readme.md

@@ -5,7 +5,7 @@ import Stack from 'cozy-ui/transpiled/react/Stack';
 import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 import Dialog, { DialogContent, DialogTitle } from 'cozy-ui/transpiled/react/Dialog';
 import { useCozyDialog, DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 
 const dictRequire = x => ({})

react/Dialog/Readme.md

@@ -8,7 +8,7 @@ will make sure that even your custom Dialogs will behave as CozyDialogs.
 ```jsx
 import Dialog, { DialogTitle, DialogActions } from 'cozy-ui/transpiled/react/Dialog'
 import { DialogBackButton, DialogCloseButton, useCozyDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 

react/Dialog/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 import { default as MUIDialog } from '@material-ui/core/Dialog'
 
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import { useCozyTheme } from '../providers/CozyTheme'
 import { useDialogEffects } from './DialogEffects'
 

react/Field/Readme.md

@@ -171,7 +171,7 @@ const options = [
 import Field from 'cozy-ui/transpiled/react/Field'
 import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 initialState = { selectedContact: null }
 

react/FilePicker/FilePickerBreadcrumb.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Typography from '../Typography'
 import Icon from '../Icon'
 import RightIcon from '../Icons/Right'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 import styles from './styles.styl'
 

react/FilePicker/FilePickerHeader.jsx

@@ -5,7 +5,7 @@ import get from 'lodash/get'
 
 import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
 
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import IconButton from '../IconButton'
 import Icon from '../Icon'
 import Previous from '../Icons/Previous'

react/FilePicker/docs/DemoProvider.jsx

@@ -4,7 +4,7 @@ import CozyClient, { CozyProvider } from 'cozy-client'
 import { initQuery, receiveQueryResult } from 'cozy-client/dist/store'
 import { normalizeDoc } from 'cozy-stack-client'
 
-import { BreakpointsProvider } from '../../hooks/useBreakpoints'
+import { BreakpointsProvider } from '../../providers/Breakpoints'
 import { I18nContext } from '../../I18n'
 
 /**

react/FilePicker/index.jsx

@@ -6,7 +6,7 @@ import { FixedDialog } from '../CozyDialogs'
 import FilePickerHeader from './FilePickerHeader'
 import FilePickerFooter from './FilePickerFooter'
 import FilePickerBody from './FilePickerBody'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import { getCompliantTypes } from '../helpers/acceptedTypes'
 
 const useStyles = makeStyles(() => ({

react/Icon/Readme.md

@@ -22,7 +22,7 @@ import Album from 'cozy-ui/transpiled/react/Icons/Album'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import cx from 'classnames'
 
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -702,7 +702,7 @@ const availableIcons = ['cozy', 'cloud-broken', 'cozy-logo', 'device-laptop', 'd
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Dialog from 'cozy-ui/transpiled/react/CozyDialogs/Dialog'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import cx from 'classnames'
 
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'

react/IntentDialogOpener/IntentDialogOpener.md

@@ -1,7 +1,7 @@
 ```jsx
 import { withStyles } from 'cozy-ui/transpiled/react/styles'
 import IntentDialogOpener from 'cozy-ui/transpiled/react/IntentDialogOpener'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 const customStyles = () => ({
   paper: {

react/IntentIframe/Readme.md

@@ -33,7 +33,7 @@ import { withStyles } from 'cozy-ui/transpiled/react/styles'
 import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Dialog from 'cozy-ui/transpiled/react/Dialog'
 import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'
-import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 initialState = { modalOpened: false}
 

react/List/Readme.md

@@ -48,7 +48,7 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots"
 import PenIcon from "cozy-ui/transpiled/react/Icons/Pen"
 import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash"
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
 import Typography from 'cozy-ui/transpiled/react/Typography'

react/ListItem/ListItemFile/PrimaryText.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { splitFilename } from 'cozy-client/dist/models/file'
 
 import Filename from '../../Filename'
-import useBreakpoints from '../../hooks/useBreakpoints'
+import useBreakpoints from '../../providers/Breakpoints'
 
 const PrimaryText = ({ primary, file }) => {
   const { isMobile } = useBreakpoints()

react/ListItem/Readme.md

@@ -101,7 +101,7 @@ const initialVariants = [{
 ### Contextualized items
 
 ```jsx
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import List from 'cozy-ui/transpiled/react/List'
 import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'

react/MuiTabs/Readme.md

@@ -4,7 +4,7 @@ Content needs to be separated into sections and accessed via a single content ar
 import { useState } from 'react'
 import { Tabs, Tab } from 'cozy-ui/transpiled/react/MuiTabs'
 import Divider from 'cozy-ui/transpiled/react/Divider';
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 function a11yProps(index) {
   return {

react/MuiTabs/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import MuiTabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 const Tabs = props => {
   const { isMobile } = useBreakpoints()

react/NavigationList/Readme.md

@@ -12,7 +12,7 @@ import Divider from 'cozy-ui/transpiled/react/Divider'
 import ListItemIcon, {smallSize, mediumSize, largeSize} from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
-import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
+import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import NavigationList, {
   NavigationListSection,
   NavigationListHeader

react/NavigationList/index.jsx

@@ -4,7 +4,7 @@ import List from '../List'
 import Stack from '../Stack'
 import Card from '../Card'
 import Typography from '../Typography'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import ListSubheader from '../ListSubheader'
 import styles from './styles.styl'
 

react/NestedSelect/ItemRow.jsx

@@ -7,7 +7,7 @@ import Divider from '../Divider'
 import ListItem from '../ListItem'
 import ListItemIcon from '../ListItemIcon'
 import Radio from '../Radios'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import Typography from '../Typography'
 
 const infoStyle = { color: 'var(--secondaryTextColor)' }

react/NestedSelect/NestedSelect.md

@@ -10,7 +10,7 @@ import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
-import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import palette from 'cozy-ui/transpiled/react/palette'
 

react/NestedSelect/NestedSelect.spec.jsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 
 import NestedSelect, { ItemRow } from './NestedSelect'
 import ListItem from '../ListItem'
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import { BreakpointsProvider } from '../providers/Breakpoints'
 
 describe('NestedSelect', () => {
   const options = {

react/Page/index.jsx

@@ -10,7 +10,7 @@
 import React from 'react'
 import { useKeyboardInfo } from './keyboard'
 import styles from './styles.styl'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 
 const TOP_BAR_HEIGHT = 48
 const BOTTOM_BAR_HEIGHT = 48

react/SelectionBar/Readme.md

@@ -3,7 +3,7 @@
 ```jsx
 import SelectionBar from 'cozy-ui/transpiled/react/SelectionBar';
 import I18n from 'cozy-ui/transpiled/react/I18n';
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'

react/SelectionBar/SelectionBarAction.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 
 import Button from '../Button'
-import useBreakpoints from '../hooks/useBreakpoints'
+import useBreakpoints from '../providers/Breakpoints'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import { useI18n } from '../I18n'