feat: Deprecates some component

BREAKING CHANGE: This is the list of deprecated component `ActionMenu`, `Alerter`, `BottomDrawer`, `Button`, `ButtonAction`, `Chip`, `CompositeRow`, `GridItem`, `Infos`, `InfosCarrousel`, `InlineCard`, `IntentModal`, `IntentOpener`, `Media`, `Menus`, `Modal`, `NarrowContent`, `Overlay`, `PercentageBar`, `PercentageLine`, `PushClientButton`, `QuotaAlert`, `Radio`, `RaisedList`, `ViewStack` These components are now in a `deprecated` subfolder. Use this codemods to migrate: ``` $ yarn global add @cozy/codemods $ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-ui-deprecated-imports.js src --parser babel --ignore-pattern=src/targets/ --extensions js,jsx ```
cozy · Jun 28, 2023 · 85404bd · 85404bd
1 parent cf655aa
commit 85404bd
Show file tree

Hide file tree

Showing 178 changed files with 350 additions and 735 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -34,7 +34,7 @@ yarn add cozy-ui
 If you use the transpiled components (from `cozy-ui/transpiled/react`), you need to import the stylesheet (once):
 
 ```
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import 'cozy-ui/transpiled/react/stylesheet.css'
 
 <Button />

diff --git a/docs/components/Wrapper.jsx b/docs/components/Wrapper.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import CozyTheme from '../../react/CozyTheme'
 import Paper from '../../react/Paper'
-import Button from '../../react/Button'
+import Button from '../../react/deprecated/Button'
 import isTesting from '../../react/helpers/isTesting'
 import themes from '../../theme/themes'
 import palette from '../../theme/palette.json'

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -190,7 +190,6 @@ module.exports = {
         '../react/Page',
         '../react/PasswordExample',
         '../react/Labs/PasswordInput',
-        '../react/PercentageBar',
         '../react/Popup',
         '../react/PopupOpener',
         '../react/SelectBox/SelectBox.jsx',
@@ -205,30 +204,31 @@ module.exports = {
     {
       name: 'Deprecated',
       components: () => [
-        '../react/ActionMenu',
-        '../react/Alerter',
-        '../react/Button',
-        '../react/ButtonAction',
-        '../react/BottomDrawer',
-        '../react/Chip',
-        '../react/CompositeRow',
-        '../react/Labs/GridItem',
-        '../react/Infos',
-        '../react/InfosCarrousel',
-        '../react/InlineCard',
-        '../react/IntentModal/IntentModal.jsx',
-        '../react/IntentOpener/IntentOpener.jsx',
-        '../react/MuiCozyTheme/Menus',
-        '../react/Modal',
-        '../react/NarrowContent',
-        '../react/Media/Media.jsx',
-        '../react/Overlay',
-        '../react/PercentageLine',
-        '../react/PushClientButton',
-        '../react/QuotaAlert',
-        '../react/Radio',
-        '../react/MuiCozyTheme/RaisedList',
-        '../react/ViewStack'
+        '../react/deprecated/ActionMenu',
+        '../react/deprecated/Alerter',
+        '../react/deprecated/Button',
+        '../react/deprecated/ButtonAction',
+        '../react/deprecated/BottomDrawer',
+        '../react/deprecated/Chip',
+        '../react/deprecated/CompositeRow',
+        '../react/deprecated/GridItem',
+        '../react/deprecated/Infos',
+        '../react/deprecated/InfosCarrousel',
+        '../react/deprecated/InlineCard',
+        '../react/deprecated/IntentModal/IntentModal.jsx',
+        '../react/deprecated/IntentOpener/IntentOpener.jsx',
+        '../react/deprecated/Media/Media.jsx',
+        '../react/deprecated/Menus',
+        '../react/deprecated/Modal',
+        '../react/deprecated/NarrowContent',
+        '../react/deprecated/Overlay',
+        '../react/deprecated/PercentageBar',
+        '../react/deprecated/PercentageLine',
+        '../react/deprecated/QuotaAlert',
+        '../react/deprecated/PushClientButton',
+        '../react/deprecated/Radio',
+        '../react/deprecated/RaisedList',
+        '../react/deprecated/ViewStack'
       ]
     }
   ],

diff --git a/react/ActionsMenu/Actions/locales/withActionsLocales.jsx b/react/ActionsMenu/Actions/locales/withActionsLocales.jsx
@@ -1,7 +1,7 @@
 import withOnlyLocales from '../../../I18n/withOnlyLocales'
 
-import en from '../../../ActionMenu/Actions/locales/en.json'
-import fr from '../../../ActionMenu/Actions/locales/fr.json'
+import en from '../../../deprecated/ActionMenu/Actions/locales/en.json'
+import fr from '../../../deprecated/ActionMenu/Actions/locales/fr.json'
 
 export const locales = {
   en,

diff --git a/react/ActionsMenu/ActionsMenuWrapper.jsx b/react/ActionsMenu/ActionsMenuWrapper.jsx
@@ -6,7 +6,7 @@ import useBreakpoints from '../hooks/useBreakpoints'
 import BottomSheet from '../BottomSheet'
 import isTesting from '../helpers/isTesting'
 import Paper from '../Paper'
-import { useActionMenuEffects } from '../ActionMenu/ActionMenuEffects'
+import { useActionMenuEffects } from '../deprecated/ActionMenu/ActionMenuEffects'
 
 const ActionsMenuWrapper = ({
   children,

diff --git a/react/Banner/Readme.md b/react/Banner/Readme.md
@@ -5,7 +5,7 @@ import Variants from 'cozy-ui/docs/components/Variants'
 import palette from 'cozy-ui/transpiled/react/palette'
 
 import Banner from 'cozy-ui/transpiled/react/Banner'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'

diff --git a/react/Card/Readme.md b/react/Card/Readme.md
@@ -2,7 +2,7 @@ A card is a small block used to separate some content from the rest of the UI.
 
 ```jsx
 import Card from 'cozy-ui/transpiled/react/Card';
-import Button from 'cozy-ui/transpiled/react/Button';
+import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 import Typography from "cozy-ui/transpiled/react/Typography";
 
 <Card>

diff --git a/react/ContactsListModal/AddContact/AddContactContent.jsx b/react/ContactsListModal/AddContact/AddContactContent.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import Icon from '../../Icon'
 import PeopleIcon from '../../Icons/People'
-import { Media, Img, Bd } from '../../Media'
+import { Media, Img, Bd } from '../../deprecated/Media'
 import TextField from '../../MuiCozyTheme/TextField'
 import Typography from '../../Typography'
 import { withContactsListLocales } from '../withContactsListLocales'

diff --git a/react/CozyDialogs/Readme.md b/react/CozyDialogs/Readme.md
@@ -65,7 +65,7 @@ import {
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Variants from 'cozy-ui/docs/components/Variants'
@@ -238,9 +238,9 @@ const setFlagshipVars = () => {
 ;
 
 <BreakpointsProvider>
-  <Button 
-    onClick={() => setFlagshipVars()}   
-    variant="secondary"        
+  <Button
+    onClick={() => setFlagshipVars()}
+    variant="secondary"
     label={'Simulate Immersive Flagship Mode'} />
   <Variants initialVariants={initialVariants}>
     {variant => (

diff --git a/react/CozyTheme/Readme.md b/react/CozyTheme/Readme.md
@@ -9,7 +9,7 @@ The inverted theme is not supported for several components but the work
 
 ```jsx
 import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons'
 import TextField from 'cozy-ui/transpiled/react/MuiCozyTheme/TextField'
 import BarButton from 'cozy-ui/transpiled/react/BarButton'

diff --git a/react/DateMonthPicker/Readme.md b/react/DateMonthPicker/Readme.md
@@ -2,7 +2,7 @@
 import I18n from 'cozy-ui/transpiled/react/I18n';
 import DateMonthPicker from 'cozy-ui/transpiled/react/DateMonthPicker';
 import Stack from 'cozy-ui/transpiled/react/Stack';
-import Button from 'cozy-ui/transpiled/react/Button';
+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'
@@ -52,7 +52,7 @@ const Static = () => (
     f={x => x}
     onSelect={handleSelect}
     initialValue={state.monthDate}
-  /> 
+  />
 );
 
 <BreakpointsProvider>

diff --git a/react/Dialog/Readme.md b/react/Dialog/Readme.md
@@ -11,17 +11,17 @@ import { DialogBackButton, DialogCloseButton, useCozyDialog } from 'cozy-ui/tran
 import useBreakpoints, {
   BreakpointsProvider
 } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
 import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Menu from 'cozy-ui/transpiled/react/MuiCozyTheme/Menus'
+import Menu from 'cozy-ui/transpiled/react/deprecated/Menus'
 import MenuItem from '@material-ui/core/MenuItem'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'

diff --git a/react/Empty/Readme.md b/react/Empty/Readme.md
@@ -2,7 +2,7 @@ Empty (or error) view in a listing container
 
 ```jsx
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import Variants from 'cozy-ui/docs/components/Variants'
 

diff --git a/react/Field/Readme.md b/react/Field/Readme.md
@@ -66,7 +66,7 @@ It gives access to the underlying `<input />` element, for example to give focus
 
 ```jsx
 import Field from 'cozy-ui/transpiled/react/Field'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 
 class FieldWithFocus extends React.Component {
   constructor() {

diff --git a/react/FilePicker/FilePickerFooter.jsx b/react/FilePicker/FilePickerFooter.jsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../Button'
+import Button from '../deprecated/Button'
 import { createUseI18n } from '../I18n'
 
 import en from './locales/en.json'

diff --git a/react/FilePicker/Readme.md b/react/FilePicker/Readme.md
@@ -2,7 +2,7 @@ FilePicker allows you to select a file or folder in Drive
 
 ```jsx
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import FilePicker from 'cozy-ui/transpiled/react/FilePicker'
 import Variants from 'cozy-ui/docs/components/Variants'
 import DemoProvider from './docs/DemoProvider';

diff --git a/react/Filename/index.jsx b/react/Filename/index.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 
-import { Media, Bd, Img } from '../Media'
+import { Media, Bd, Img } from '../deprecated/Media'
 import Icon from '../Icon'
 import Typography from '../Typography'
 import styles from './styles.styl'

diff --git a/react/Hero/Readme.md b/react/Hero/Readme.md
@@ -11,7 +11,7 @@ import Hero, {
   CTA,
   Icon
 } from 'cozy-ui/transpiled/react/Hero';
-import Button from 'cozy-ui/transpiled/react/Button';
+import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 import { t } from '../../docs/utils';
 
 import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";

diff --git a/react/HistoryRow/index.jsx b/react/HistoryRow/index.jsx
@@ -5,7 +5,7 @@ import Circle from '../Circle'
 import Icon from '../Icon'
 import DownloadIcon from '../Icons/Download'
 import FileIcon from '../Icons/File'
-import { Media, Bd, Img } from '../Media'
+import { Media, Bd, Img } from '../deprecated/Media'
 import Typography from '../Typography'
 
 import styles from './styles.styl'

diff --git a/react/Input/Readme.md b/react/Input/Readme.md
@@ -56,7 +56,7 @@ If you need to programmatically access the underlying `<input />` for example to
 
 ```jsx
 import Input from 'cozy-ui/transpiled/react/Input';
-import Button from 'cozy-ui/transpiled/react/Button';
+import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 class InputComponent extends React.Component {
   constructor() {
     super()

diff --git a/react/IntentWrapper/index.jsx b/react/IntentWrapper/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './styles.styl'
 
 import cx from 'classnames'
-import { ModalHeader, ModalContent } from '../Modal'
+import { ModalHeader, ModalContent } from '../deprecated/Modal'
 
 export const IntentWrapper = ({
   children,

diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
 
-import Button from '../../Button'
+import Button from '../../deprecated/Button'
 import { FieldContainer } from '../../Field'
 import Icon from '../../Icon'
 import Label from '../../Label'

diff --git a/react/LoadMore/index.jsx b/react/LoadMore/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../Button'
+import Button from '../deprecated/Button'
 import Spinner from '../Spinner'
 
 import 'intersection-observer' // polyfill for safari (mobile and desktop)

diff --git a/react/MuiCozyTheme/List/Readme.md b/react/MuiCozyTheme/List/Readme.md
@@ -39,7 +39,7 @@ import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import ActionsMenuWrapper from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuWrapper'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Menu from 'cozy-ui/transpiled/react/MuiCozyTheme/Menus'
+import Menu from 'cozy-ui/transpiled/react/deprecated/Menus'
 import MenuItem from '@material-ui/core/MenuItem'
 import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'

diff --git a/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/helpers.js b/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/helpers.js
@@ -1,4 +1,4 @@
-import Alerter from 'cozy-ui/transpiled/react/Alerter'
+import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 export const renameFile = async (client, file, name) => {
   try {

diff --git a/react/MuiCozyTheme/Switch/Readme.md b/react/MuiCozyTheme/Switch/Readme.md
@@ -4,7 +4,7 @@ Uses [Material UI's Switch](https://material-ui.com/components/switches/).
 
 ```jsx
 import { useState, useCallback } from 'react'
-import { Media, Img } from 'cozy-ui/transpiled/react/Media'
+import { Media, Img } from 'cozy-ui/transpiled/react/deprecated/Media'
 import Switch from 'cozy-ui/transpiled/react/MuiCozyTheme/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"

diff --git a/react/NestedSelect/Modal.jsx b/react/NestedSelect/Modal.jsx
@@ -5,7 +5,7 @@ import Dialog, { DialogTitle, DialogContent } from '../Dialog'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import LeftIcon from '../Icons/Left'
-import { Media, Bd, Img } from '../Media'
+import { Media, Bd, Img } from '../deprecated/Media'
 
 import NestedSelect from './NestedSelect'
 import styles from './styles.styl'

diff --git a/react/NestedSelect/NestedSelect.md b/react/NestedSelect/NestedSelect.md
@@ -1,6 +1,6 @@
 ```jsx
 import { useState } from 'react'
-import Button from '../Button'
+import Button from '../deprecated/Button'
 import Circle from '../Circle'
 import NestedSelectModal from './Modal'
 import ListItem from '../MuiCozyTheme/ListItem'

diff --git a/react/Overlay/styles.styl b/react/Overlay/styles.styl
diff --git a/react/PasswordExample/index.jsx b/react/PasswordExample/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
-import InlineCard from '../InlineCard'
+import InlineCard from '../deprecated/InlineCard'
 import styles from './styles.styl'
 
 const alphaRegexp = /^[a-z]$/i

diff --git a/react/PushClientButton/styles.styl b/react/PushClientButton/styles.styl
diff --git a/react/Radio/styles.styl b/react/Radio/styles.styl
diff --git a/react/SelectBox/Readme.md b/react/SelectBox/Readme.md
@@ -297,7 +297,7 @@ import {
   BreakpointsProvider
 } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
-import Button from 'cozy-ui/transpiled/react/Button'
+import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox'

diff --git a/react/SelectionBar/SelectionBarMore.jsx b/react/SelectionBar/SelectionBarMore.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import DotsIcon from '../Icons/Dots'
-import { ActionMenuWithClose, ActionMenuItem } from '../ActionMenu'
+import { ActionMenuWithClose, ActionMenuItem } from '../deprecated/ActionMenu'
 import { useI18n } from '../I18n'
 
 import styles from './styles.styl'

diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx
@@ -18,8 +18,8 @@ import List from '../MuiCozyTheme/List'
 import ListItem from '../MuiCozyTheme/ListItem'
 import ListItemText from '../ListItemText'
 import ListItemIcon from '../MuiCozyTheme/ListItemIcon'
-import { Img } from '../Media'
-import Button from '../Button'
+import { Img } from '../deprecated/Media'
+import Button from '../deprecated/Button'
 
 import styles from './styles.styl'
 import localeEn from './locales/en.json'

diff --git a/react/Viewer/Footer/DownloadButton.jsx b/react/Viewer/Footer/DownloadButton.jsx
@@ -6,7 +6,7 @@ import { useClient } from 'cozy-client'
 import Icon from '../../Icon'
 import DownloadIcon from '../../Icons/Download'
 import Button from '../../Buttons'
-import Alerter from '../../Alerter'
+import Alerter from '../../deprecated/Alerter'
 import { withViewerLocales } from '../hoc/withViewerLocales'
 
 const DownloadButton = ({ file, t }) => {