,
diff --git a/packages/a11y/src/Gesture/withTreeGesture.test.js b/packages/a11y/src/Gesture/withTreeGesture.test.js
index 363f57c593d..aea3e463e26 100644
--- a/packages/a11y/src/Gesture/withTreeGesture.test.js
+++ b/packages/a11y/src/Gesture/withTreeGesture.test.js
@@ -2,8 +2,9 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import cases from 'jest-in-case';
-import { withTreeGesture } from './withTreeGesture';
+
import Tree from '../__mocks__/tree';
+import { withTreeGesture } from './withTreeGesture';
// Legend : the comments indicates 2 numbers, level and index
// Those are used in the following tests
diff --git a/packages/a11y/src/Gesture/withTreeGesture.tsx b/packages/a11y/src/Gesture/withTreeGesture.tsx
index 955689bc389..9c49ca115a7 100644
--- a/packages/a11y/src/Gesture/withTreeGesture.tsx
+++ b/packages/a11y/src/Gesture/withTreeGesture.tsx
@@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import { KeyboardEvent, ComponentType, Component } from 'react';
+import { Component, ComponentType, KeyboardEvent } from 'react';
+
import { focusOn } from './focus';
function getAllItems(ref: HTMLElement) {
diff --git a/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js b/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js
index 0ad7ecaa80a..3a798ec1078 100644
--- a/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js
+++ b/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js
@@ -1,7 +1,8 @@
-import { WebSocket, Server } from 'mock-socket';
+import { Server, WebSocket } from 'mock-socket';
// fixme
import { setTimeout } from 'timers';
-import SmartWebsocket, { wsSend, wsIsClosed } from './smartWebsocket';
+
+import SmartWebsocket, { wsIsClosed, wsSend } from './smartWebsocket';
// Set the websocket mock used by smartWebsocket middleware
global.WebSocket = WebSocket;
diff --git a/packages/cmf/__tests__/App.test.js b/packages/cmf/__tests__/App.test.js
index 1688b0fc326..dd459b91b17 100644
--- a/packages/cmf/__tests__/App.test.js
+++ b/packages/cmf/__tests__/App.test.js
@@ -1,8 +1,10 @@
-import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
-import RegistryProvider from '../src/RegistryProvider';
-import ErrorBoundary from '../src/components/ErrorBoundary/ErrorBoundary.component';
+
+import { render, screen } from '@testing-library/react';
+
import App from '../src/App';
+import ErrorBoundary from '../src/components/ErrorBoundary/ErrorBoundary.component';
+import RegistryProvider from '../src/RegistryProvider';
jest.mock('react-redux', () => ({
esModule: true,
diff --git a/packages/cmf/__tests__/bootstrap.test.js b/packages/cmf/__tests__/bootstrap.test.js
index c143f797d2b..5ca1ca77e86 100644
--- a/packages/cmf/__tests__/bootstrap.test.js
+++ b/packages/cmf/__tests__/bootstrap.test.js
@@ -1,15 +1,16 @@
import ReactDOM from 'react-dom/client';
+
import createSagaMiddleware from 'redux-saga';
import bootstrap, * as internals from '../src/bootstrap';
-import { registerInternals } from '../src/register';
import actionCreator from '../src/actionCreator';
import component from '../src/component';
import expression from '../src/expression';
+import onError from '../src/onError';
+import { registerInternals } from '../src/register';
import registry from '../src/registry';
-import storeAPI from '../src/store';
import sagas from '../src/sagas';
-import onError from '../src/onError';
+import storeAPI from '../src/store';
jest.mock('react-dom/client', () => ({
createRoot: jest.fn().mockImplementation(() => ({
diff --git a/packages/cmf/__tests__/cmfConnect.test.js b/packages/cmf/__tests__/cmfConnect.test.js
index 8b619c5e397..99b910f8731 100644
--- a/packages/cmf/__tests__/cmfConnect.test.js
+++ b/packages/cmf/__tests__/cmfConnect.test.js
@@ -1,24 +1,23 @@
/**
* @jest-environment jsdom
*/
-
import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { fromJS, Map } from 'immutable';
+
import { fireEvent, render, screen } from '@testing-library/react';
+import { fromJS, Map } from 'immutable';
+import PropTypes from 'prop-types';
-import expression from '../src/expression';
import { mock } from '../src';
-import { mapStateToViewProps } from '../src/settings';
-
import cmfConnect, {
- getComponentName,
getComponentId,
- getStateToProps,
+ getComponentName,
getDispatchToProps,
getMergeProps,
+ getStateToProps,
} from '../src/cmfConnect';
import component from '../src/component';
+import expression from '../src/expression';
+import { mapStateToViewProps } from '../src/settings';
describe('cmfConnect', () => {
describe('#getComponentName', () => {
diff --git a/packages/cmf/__tests__/expression.test.js b/packages/cmf/__tests__/expression.test.js
index c86b987ebbc..4ab0671bc31 100644
--- a/packages/cmf/__tests__/expression.test.js
+++ b/packages/cmf/__tests__/expression.test.js
@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react';
+
import cmf, { mock } from '../src';
import expression from '../src/expression';
diff --git a/packages/components/src/ActionIntercom/Intercom.component.test.js b/packages/components/src/ActionIntercom/Intercom.component.test.js
index 2cb87d628e4..6b3cddb41ff 100644
--- a/packages/components/src/ActionIntercom/Intercom.component.test.js
+++ b/packages/components/src/ActionIntercom/Intercom.component.test.js
@@ -1,4 +1,5 @@
import { act } from 'react-dom/test-utils';
+
import { configure, render, screen } from '@testing-library/react';
import Intercom from './Intercom.component';
diff --git a/packages/components/src/ActionList/ActionList.test.js b/packages/components/src/ActionList/ActionList.test.js
index fef0ca1376f..4f7c0074a84 100644
--- a/packages/components/src/ActionList/ActionList.test.js
+++ b/packages/components/src/ActionList/ActionList.test.js
@@ -1,4 +1,5 @@
import { render, screen } from '@testing-library/react';
+
import ActionList from './ActionList.component';
describe('ActionList', () => {
diff --git a/packages/components/src/Actions/ActionButton/ActionButton.test.js b/packages/components/src/Actions/ActionButton/ActionButton.test.js
index c74c40aac8e..3b0687c1516 100644
--- a/packages/components/src/Actions/ActionButton/ActionButton.test.js
+++ b/packages/components/src/Actions/ActionButton/ActionButton.test.js
@@ -1,5 +1,6 @@
-import { render, screen, fireEvent, within } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import ActionButton from './ActionButton.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js
index d83cbe0ae71..0b16d58bb71 100644
--- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js
+++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js
@@ -1,8 +1,10 @@
/* eslint-disable react/prop-types */
+
/* eslint-disable react/display-name */
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import ActionDropdown, { InjectDropdownMenuItem, getMenuItem } from './ActionDropdown.component';
+
+import ActionDropdown, { getMenuItem, InjectDropdownMenuItem } from './ActionDropdown.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js
index 7273d6cbe32..dca2582b573 100644
--- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js
+++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import ActionIconToggle from './ActionIconToggle.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js
index e8f43e279ec..22bbb176759 100644
--- a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js
+++ b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js
@@ -1,6 +1,8 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import ActionSplitDropdown from './ActionSplitDropdown.component';
+
jest.unmock('@talend/design-system');
const items = [
diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js
index 104c4adcc2a..920f5d18ecb 100644
--- a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js
+++ b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import AppGuidedTour, { DEFAULT_LOCAL_STORAGE_KEY } from './AppGuidedTour.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/AppSwitcher/AppSwitcher.component.test.js b/packages/components/src/AppSwitcher/AppSwitcher.component.test.js
index 21cd35ec8bc..1da70bc2dc2 100644
--- a/packages/components/src/AppSwitcher/AppSwitcher.component.test.js
+++ b/packages/components/src/AppSwitcher/AppSwitcher.component.test.js
@@ -1,5 +1,6 @@
-import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
import AppSwitcher from './AppSwitcher.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.test.js b/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.test.js
index 88038f8c1f0..40b6b93fe61 100644
--- a/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.test.js
+++ b/packages/components/src/Badge/BadgeComposition/BadgeDelete/BadgeDelete.component.test.js
@@ -1,7 +1,8 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import BadgeDelete from './BadgeDelete.component';
+
import getDefaultT from '../../../translate';
+import BadgeDelete from './BadgeDelete.component';
describe('BadgeDelete', () => {
it('should render', () => {
diff --git a/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.test.js b/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.test.js
index 6e9b95d0805..e5d17e7404c 100644
--- a/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.test.js
+++ b/packages/components/src/Badge/BadgeComposition/BadgeDropdown/BadgeDropdown.component.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import BadgeDropdown from './BadgeDropdown.component';
describe('BadgeDropdown', () => {
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.test.js b/packages/components/src/Breadcrumbs/Breadcrumbs.test.js
index cea4e621543..ed1bc887c88 100644
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.test.js
+++ b/packages/components/src/Breadcrumbs/Breadcrumbs.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Breadcrumbs from './Breadcrumbs.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js
index 10c58b39025..0a72086dec6 100644
--- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js
+++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import CollapsiblePanel from './CollapsiblePanel.component';
const version1 = {
diff --git a/packages/components/src/ConfirmDialog/ConfirmDialog.test.js b/packages/components/src/ConfirmDialog/ConfirmDialog.test.js
index 966c8989878..405b63335f1 100644
--- a/packages/components/src/ConfirmDialog/ConfirmDialog.test.js
+++ b/packages/components/src/ConfirmDialog/ConfirmDialog.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import ConfirmDialog from './ConfirmDialog.component';
const children =
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js
index 70243a3792f..9fb95976805 100644
--- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js
+++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.test.js
@@ -1,7 +1,8 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import isSameDay from 'date-fns/is_same_day';
import isToday from 'date-fns/is_today';
+
import DatePicker from './DatePicker.component';
jest.mock('date-fns/is_today');
diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.test.js b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.test.js
index ba429f6977f..e52a94b8ca9 100644
--- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.test.js
+++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import MonthPicker from './MonthPicker.component';
describe('MonthPicker', () => {
diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.test.js b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.test.js
index d24fdd45675..9992150ef4b 100644
--- a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.test.js
+++ b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.component.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TimePicker } from './TimePicker.component';
diff --git a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.test.js b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.test.js
index 0d2d5484c02..b8f96485eed 100644
--- a/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.test.js
+++ b/packages/components/src/DateTimePickers/pickers/YearPicker/YearPicker.test.js
@@ -1,7 +1,8 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import YearPicker from './YearPicker.component';
+
import dateMock from '../../../../../../mocks/dateMock';
+import YearPicker from './YearPicker.component';
describe('YearPicker', () => {
afterEach(() => {
diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js
index fe045c2c271..92c9ad8adfa 100644
--- a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js
+++ b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js
@@ -1,6 +1,6 @@
/* eslint-disable react/display-name */
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
import DateView from './DateView.component';
diff --git a/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.test.js b/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.test.js
index 4962088a205..6e41e5e8050 100644
--- a/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.test.js
+++ b/packages/components/src/DateTimePickers/views/MonthYearView/MonthYearView.test.js
@@ -1,8 +1,9 @@
/* eslint-disable react/display-name */
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MonthYearView from './MonthYearView.component';
+
jest.mock('../../pickers/MonthPicker', () => props => (
));
diff --git a/packages/components/src/Dialog/Dialog.test.js b/packages/components/src/Dialog/Dialog.test.js
index 0ae10590b4a..2066539125d 100644
--- a/packages/components/src/Dialog/Dialog.test.js
+++ b/packages/components/src/Dialog/Dialog.test.js
@@ -1,7 +1,9 @@
/* eslint-disable react/prop-types */
+
/* eslint-disable react/display-name */
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Dialog from './Dialog.component';
jest.mock('@talend/react-bootstrap', () => {
diff --git a/packages/components/src/EditableText/InlineForm.component.js b/packages/components/src/EditableText/InlineForm.component.js
index 01b7e1af344..045bfd1959c 100644
--- a/packages/components/src/EditableText/InlineForm.component.js
+++ b/packages/components/src/EditableText/InlineForm.component.js
@@ -1,11 +1,14 @@
import { Component } from 'react';
-import PropTypes from 'prop-types';
+
import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
import { Action } from '../Actions';
import FocusManager from '../FocusManager';
-import theme from './InlineForm.module.scss';
import getDefaultT from '../translate';
+import theme from './InlineForm.module.scss';
+
class InlineForm extends Component {
static propTypes = {
text: PropTypes.string.isRequired,
diff --git a/packages/components/src/EditableText/InlineForm.component.test.js b/packages/components/src/EditableText/InlineForm.component.test.js
index cb2b6d5553a..9c05a001960 100644
--- a/packages/components/src/EditableText/InlineForm.component.test.js
+++ b/packages/components/src/EditableText/InlineForm.component.test.js
@@ -1,7 +1,8 @@
-import InlineForm from './InlineForm.component';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import getDefaultT from '../translate';
+import InlineForm from './InlineForm.component';
describe('InlineForm', () => {
let defaultProps;
diff --git a/packages/components/src/EditableText/PlainTextTitle.component.test.js b/packages/components/src/EditableText/PlainTextTitle.component.test.js
index 4529f49853f..80f89ca3c43 100644
--- a/packages/components/src/EditableText/PlainTextTitle.component.test.js
+++ b/packages/components/src/EditableText/PlainTextTitle.component.test.js
@@ -1,7 +1,8 @@
-import { PlainTextTitle } from './PlainTextTitle.component';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import { PlainTextTitle } from './PlainTextTitle.component';
+
describe('PlainTextTitle', () => {
it('should render', () => {
const props = {
diff --git a/packages/components/src/Enumeration/Header/Header.test.js b/packages/components/src/Enumeration/Header/Header.test.js
index a2e0ff47042..8f841e8bd8f 100644
--- a/packages/components/src/Enumeration/Header/Header.test.js
+++ b/packages/components/src/Enumeration/Header/Header.test.js
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Header from './Header.component';
+
jest.unmock('@talend/design-system');
describe('Header', () => {
it('should trigger callback when clicking on header button', async () => {
diff --git a/packages/components/src/Enumeration/Header/HeaderInput.test.js b/packages/components/src/Enumeration/Header/HeaderInput.test.js
index f01c0d21c82..b248e5608eb 100644
--- a/packages/components/src/Enumeration/Header/HeaderInput.test.js
+++ b/packages/components/src/Enumeration/Header/HeaderInput.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import HeaderInput from './HeaderInput.component';
diff --git a/packages/components/src/Enumeration/Header/headerSelected.test.js b/packages/components/src/Enumeration/Header/headerSelected.test.js
index bc69da109fd..aed68aec939 100644
--- a/packages/components/src/Enumeration/Header/headerSelected.test.js
+++ b/packages/components/src/Enumeration/Header/headerSelected.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import HeaderSelected from './HeaderSelected.component';
diff --git a/packages/components/src/Enumeration/Items/Item/Item.test.js b/packages/components/src/Enumeration/Items/Item/Item.test.js
index b586111e024..7a6928d9316 100644
--- a/packages/components/src/Enumeration/Items/Item/Item.test.js
+++ b/packages/components/src/Enumeration/Items/Item/Item.test.js
@@ -1,9 +1,9 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-
import cloneDeep from 'lodash/cloneDeep';
import Item from './Item.component';
+
jest.unmock('@talend/design-system');
const item = {
diff --git a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js
index 0dc1eb2a607..e26509d05c6 100644
--- a/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js
+++ b/packages/components/src/Enumeration/Items/Item/ItemEdit.component.js
@@ -1,13 +1,15 @@
-import PropTypes from 'prop-types';
import { Component } from 'react';
-import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
import Action from '../../../Actions/Action';
-import theme from './Item.module.scss';
+import I18N_DOMAIN_COMPONENTS from '../../../constants';
import ItemPropTypes from './Item.propTypes';
import ItemEditPropTypes from './ItemEdit.propTypes';
-import I18N_DOMAIN_COMPONENTS from '../../../constants';
+
+import theme from './Item.module.scss';
function itemClasses(error) {
return classNames(theme['tc-enumeration-item'], 'tc-enumeration-item', {
diff --git a/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js b/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js
index 4ee10eb63aa..f981b89ace7 100644
--- a/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js
+++ b/packages/components/src/Enumeration/Items/Item/ItemEdit.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ItemEdit from './ItemEdit.component';
diff --git a/packages/components/src/FilterBar/FilterBar.component.js b/packages/components/src/FilterBar/FilterBar.component.js
index 93f97d860dd..d80cb01fb95 100644
--- a/packages/components/src/FilterBar/FilterBar.component.js
+++ b/packages/components/src/FilterBar/FilterBar.component.js
@@ -1,12 +1,16 @@
-import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
-import classNames from 'classnames';
import DebounceInput from 'react-debounce-input';
-import { FormControl } from '@talend/react-bootstrap';
import { useTranslation } from 'react-i18next';
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { FormControl } from '@talend/react-bootstrap';
+
import { Action } from '../Actions';
-import Icon from '../Icon';
import I18N_DOMAIN_COMPONENTS from '../constants';
+import Icon from '../Icon';
+
import theme from './FilterBar.module.scss';
function forceBlur(event) {
diff --git a/packages/components/src/FilterBar/FilterBar.test.js b/packages/components/src/FilterBar/FilterBar.test.js
index e82eae8dd40..d0b9ea7559f 100644
--- a/packages/components/src/FilterBar/FilterBar.test.js
+++ b/packages/components/src/FilterBar/FilterBar.test.js
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import FilterBar from './FilterBar.component';
diff --git a/packages/components/src/HeaderBar/HeaderBar.test.js b/packages/components/src/HeaderBar/HeaderBar.test.js
index 2bcb37159d1..50b6d6f2b8c 100644
--- a/packages/components/src/HeaderBar/HeaderBar.test.js
+++ b/packages/components/src/HeaderBar/HeaderBar.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import HeaderBarComponent from './HeaderBar.component';
describe('HeaderBar', () => {
diff --git a/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js b/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js
index c34c2a9e1bc..3d315e084e3 100644
--- a/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js
+++ b/packages/components/src/List/ListComposition/ColumnChooser/ColumnChooser.component.test.js
@@ -1,8 +1,9 @@
-import { screen, render, act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import ColumnChooser from './ColumnChooser.component';
-import { ListContext } from '../context';
+
import getDefaultT from '../../../translate';
+import { ListContext } from '../context';
+import ColumnChooser from './ColumnChooser.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/ListComposition/DisplayMode/ListDisplayMode.component.test.js b/packages/components/src/List/ListComposition/DisplayMode/ListDisplayMode.component.test.js
index f8a0464c493..6941ad79ed0 100644
--- a/packages/components/src/List/ListComposition/DisplayMode/ListDisplayMode.component.test.js
+++ b/packages/components/src/List/ListComposition/DisplayMode/ListDisplayMode.component.test.js
@@ -1,10 +1,10 @@
/* eslint-disable react/prop-types */
-import { screen, render, act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import ListDisplayMode from './ListDisplayMode.component';
-import { ListContext } from '../context';
import getDefaultT from '../../../translate';
+import { ListContext } from '../context';
+import ListDisplayMode from './ListDisplayMode.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/ListComposition/Manager/ListManager.component.test.js b/packages/components/src/List/ListComposition/Manager/ListManager.component.test.js
index ef063113dce..3eb3e68e009 100644
--- a/packages/components/src/List/ListComposition/Manager/ListManager.component.test.js
+++ b/packages/components/src/List/ListComposition/Manager/ListManager.component.test.js
@@ -1,10 +1,11 @@
/* eslint-disable react/prop-types */
import { useContext } from 'react';
-import { screen, render } from '@testing-library/react';
+
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import ListManager from './ListManager.component';
import { ListContext } from '../context';
+import ListManager from './ListManager.component';
function TestConsumer(props) {
return (
diff --git a/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSelection.hook.test.js b/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSelection.hook.test.js
index 86cbeb844fa..5e501ea459a 100644
--- a/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSelection.hook.test.js
+++ b/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSelection.hook.test.js
@@ -1,6 +1,7 @@
/* eslint-disable react/prop-types */
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import useCollectionSelection from './useCollectionSelection.hook';
function SelectionComponent({ collection, initialSelectedIds, idKey, isSelected, ...props }) {
diff --git a/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSort.hook.test.js b/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSort.hook.test.js
index ff92d820c8b..7071570cf39 100644
--- a/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSort.hook.test.js
+++ b/packages/components/src/List/ListComposition/Manager/hooks/useCollectionSort.hook.test.js
@@ -1,7 +1,8 @@
/* eslint-disable react/prop-types */
-import PropTypes from 'prop-types';
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import PropTypes from 'prop-types';
+
import { useCollectionSort } from './useCollectionSort.hook';
function SortComponent({ collection, initialSortParams, sortFunctions, ...props }) {
diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.component.test.js b/packages/components/src/List/ListComposition/SortBy/SortBy.component.test.js
index 9095af8934c..c08c443abde 100644
--- a/packages/components/src/List/ListComposition/SortBy/SortBy.component.test.js
+++ b/packages/components/src/List/ListComposition/SortBy/SortBy.component.test.js
@@ -1,9 +1,9 @@
/* eslint-disable react/prop-types */
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import getDefaultT from '../../../translate';
import { ListContext } from '../context';
-
import SortBy from './SortBy.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/ListComposition/TextFilter/TextFilter.component.test.js b/packages/components/src/List/ListComposition/TextFilter/TextFilter.component.test.js
index 0a2a0b899d4..462c3518d3c 100644
--- a/packages/components/src/List/ListComposition/TextFilter/TextFilter.component.test.js
+++ b/packages/components/src/List/ListComposition/TextFilter/TextFilter.component.test.js
@@ -1,9 +1,10 @@
/* eslint-disable react/prop-types */
-import { screen, render, act } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import TextFilter from './TextFilter.component';
-import { ListContext } from '../context';
+
import getDefaultT from '../../../translate';
+import { ListContext } from '../context';
+import TextFilter from './TextFilter.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js b/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js
index 0ed086f8e1c..e3487cfc8f0 100644
--- a/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js
+++ b/packages/components/src/List/ListToVirtualizedList/ListToVirtualizedList.test.js
@@ -1,11 +1,12 @@
/* eslint-disable react/display-name */
+
/* eslint-disable react/prop-types */
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import cloneDeep from 'lodash/cloneDeep';
import VirtualizedList from '../../VirtualizedList';
-import { ListToVirtualizedList, compareOrder } from './ListToVirtualizedList.component';
+import { compareOrder, ListToVirtualizedList } from './ListToVirtualizedList.component';
jest.unmock('@talend/design-system');
jest.mock('../../VirtualizedList', () => {
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js
index b82916a46ff..af829b75556 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.component.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Component from './ColumnChooser.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.test.js
index a59e1932273..a520924fc22 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.test.js
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserBody/ColumnChooserBody.component.test.js
@@ -1,8 +1,8 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { ColumnChooserProvider } from '../columnChooser.context';
-import getDefaultT from '../../../../../translate';
+import getDefaultT from '../../../../../translate';
+import { ColumnChooserProvider } from '../columnChooser.context';
import Component from './ColumnChooserBody.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js
index 9856e9e07d3..164795a2255 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooserRow/RowCheckbox/RowCheckbox.component.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Component from './RowCheckbox.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js
index efb53f2b58f..6f97e07c2b9 100644
--- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js
+++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/SelectAllColumnsCheckbox/SelectAllColumnsCheckbox.component.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import getDefaultT from '../../../../../translate';
import Component from './SelectAllColumnsCheckbox.component';
diff --git a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.test.js b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.test.js
index 088bc62342b..461aefbba2e 100644
--- a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.test.js
+++ b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import DisplayModeToggle from './DisplayModeToggle.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/List/Toolbar/Pagination/Pagination.test.js b/packages/components/src/List/Toolbar/Pagination/Pagination.test.js
index 4b68846979f..ca90219d998 100644
--- a/packages/components/src/List/Toolbar/Pagination/Pagination.test.js
+++ b/packages/components/src/List/Toolbar/Pagination/Pagination.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Pagination from './Pagination.component';
const props = {
diff --git a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.test.js b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.test.js
index d403938c6d3..f2636f7d925 100644
--- a/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.test.js
+++ b/packages/components/src/List/Toolbar/SelectSortBy/SelectSortBy.test.js
@@ -1,6 +1,7 @@
// rewrite tests using react-testing-library
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import SelectSortBy from './SelectSortBy.component';
const id = 'toolbar-sort';
diff --git a/packages/components/src/ListView/Header/Header.test.js b/packages/components/src/ListView/Header/Header.test.js
index 1f872dafa53..840ae2bb9b3 100644
--- a/packages/components/src/ListView/Header/Header.test.js
+++ b/packages/components/src/ListView/Header/Header.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Header from './Header.component';
describe('Header', () => {
diff --git a/packages/components/src/ListView/Header/headerInput.test.js b/packages/components/src/ListView/Header/headerInput.test.js
index c7c72030649..0c188868b8a 100644
--- a/packages/components/src/ListView/Header/headerInput.test.js
+++ b/packages/components/src/ListView/Header/headerInput.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import HeaderInput from './HeaderInput.component';
describe('Header input', () => {
diff --git a/packages/components/src/MultiSelect/MultiSelect.container.js b/packages/components/src/MultiSelect/MultiSelect.container.js
index 02caabb5824..c056988fa0a 100644
--- a/packages/components/src/MultiSelect/MultiSelect.container.js
+++ b/packages/components/src/MultiSelect/MultiSelect.container.js
@@ -1,19 +1,21 @@
/* eslint-disable react/sort-comp */
import { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
import { withTranslation } from 'react-i18next';
+
+import classnames from 'classnames';
import memoizeOne from 'memoize-one';
+import PropTypes from 'prop-types';
-import theme from './MultiSelect.module.scss';
-import VirtualizedList from '../VirtualizedList';
+import { ActionButton } from '../Actions';
import I18N_DOMAIN_COMPONENTS from '../constants';
+import Icon from '../Icon';
+import VirtualizedList from '../VirtualizedList';
+import { CREATE_NEW_VALUE, SELECT_ALL_VALUE } from './constants';
+import Dropdown from './Dropdown.container';
import { ItemOption } from './ItemOption.component';
import { ItemView } from './ItemView.component';
-import Dropdown from './Dropdown.container';
-import { SELECT_ALL_VALUE, CREATE_NEW_VALUE } from './constants';
-import { ActionButton } from '../Actions';
-import Icon from '../Icon';
+
+import theme from './MultiSelect.module.scss';
function initSelectedMap(selected) {
return selected.reduce((acc, current) => {
diff --git a/packages/components/src/Notification/Notification.test.js b/packages/components/src/Notification/Notification.test.js
index 80f692f4bbb..6a3e5d0c84c 100644
--- a/packages/components/src/Notification/Notification.test.js
+++ b/packages/components/src/Notification/Notification.test.js
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Notification from './Notification.component';
diff --git a/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js b/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js
index aec3f7e8b12..5d3cff7167a 100644
--- a/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js
+++ b/packages/components/src/ObjectViewer/JSONLike/JSONLike.test.js
@@ -2,13 +2,13 @@ import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Component, {
- ARRAY_ABSTRACT,
- OBJECT_ABSTRACT,
abstracter,
+ ARRAY_ABSTRACT,
+ ComplexItem,
getDataAbstract,
getDataInfo,
- ComplexItem,
getName,
+ OBJECT_ABSTRACT,
} from './JSONLike.component';
const callbacksProps = {
diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.test.js b/packages/components/src/OverlayTrigger/OverlayTrigger.test.js
index 7c70d62281c..f55b2390d36 100644
--- a/packages/components/src/OverlayTrigger/OverlayTrigger.test.js
+++ b/packages/components/src/OverlayTrigger/OverlayTrigger.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import OverlayTrigger from './OverlayTrigger.component';
jest.mock('./overlay', () => ({
diff --git a/packages/components/src/PieChart/PieChartButton.test.js b/packages/components/src/PieChart/PieChartButton.test.js
index 3783fbd7f1e..a7208b9cc6b 100644
--- a/packages/components/src/PieChart/PieChartButton.test.js
+++ b/packages/components/src/PieChart/PieChartButton.test.js
@@ -1,9 +1,11 @@
/* eslint-disable react/display-name */
+
/* eslint-disable react/prop-types */
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { PIECHART_SIZES } from './PieChartIcon.component';
+
import PieChartButton, { decorateWithOverlay, wrapMouseEvent } from './PieChartButton.component';
+import { PIECHART_SIZES } from './PieChartIcon.component';
jest.mock('../OverlayTrigger/overlay', () => ({
getAdaptedPlacement: () => 'top',
diff --git a/packages/components/src/RadarChart/RadarChart.test.js b/packages/components/src/RadarChart/RadarChart.test.js
index e006db15ac8..8d342ad93db 100644
--- a/packages/components/src/RadarChart/RadarChart.test.js
+++ b/packages/components/src/RadarChart/RadarChart.test.js
@@ -1,5 +1,6 @@
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import { RadarChart } from './RadarChart.component';
describe('RadarChart', () => {
diff --git a/packages/components/src/RatioBar/RatioBar.component.test.js b/packages/components/src/RatioBar/RatioBar.component.test.js
index 8cd70a7b34c..fbf3a42b20e 100644
--- a/packages/components/src/RatioBar/RatioBar.component.test.js
+++ b/packages/components/src/RatioBar/RatioBar.component.test.js
@@ -1,5 +1,6 @@
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import { RatioBar } from './RatioBar.component';
// as this is SVG we need to rely on custom selector
diff --git a/packages/components/src/RatioBar/RatioBarComposition.component.js b/packages/components/src/RatioBar/RatioBarComposition.component.js
index afee152b7ed..9c4168f086a 100644
--- a/packages/components/src/RatioBar/RatioBarComposition.component.js
+++ b/packages/components/src/RatioBar/RatioBarComposition.component.js
@@ -1,6 +1,9 @@
import PropTypes from 'prop-types';
+
import { Tooltip } from '@talend/design-system';
+
import { getTheme } from '../theme';
+
import ratioBarTheme from './RatioBar.module.scss';
const theme = getTheme(ratioBarTheme);
diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.snap.test.js b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.snap.test.js
index 3b06c2a7284..1feac35faf6 100644
--- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.snap.test.js
+++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.snap.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import NameFilter from './NameFilter.component';
describe('NameFilter component snaps', () => {
diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.test.js b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.test.js
index f0e581d31e8..173c304e470 100644
--- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.test.js
+++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.test.js
@@ -1,5 +1,6 @@
-import { screen, render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import NameFilter from './NameFilter.component';
describe('NameFilter', () => {
diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.test.js b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.test.js
index 16a7bb2e27c..dbca7f93110 100644
--- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.test.js
+++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import OrderChooser from './OrderChooser.component';
diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.test.js b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.test.js
index 4b9d312e586..fde906e6deb 100644
--- a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.test.js
+++ b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.test.js
@@ -1,6 +1,7 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import SortOptions, { TYPES, ORDERS } from './SortOptions.component';
+
+import SortOptions, { ORDERS, TYPES } from './SortOptions.component';
describe('SortOptions', () => {
it('should render SortOptions in default mode', () => {
diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.test.js b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.test.js
index 5e9bbf5893e..c4195e495bd 100644
--- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.test.js
+++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import StateFilter, { TYPES } from './StateFilter.component';
describe('StateFilter', () => {
diff --git a/packages/components/src/SidePanel/SidePanel.test.js b/packages/components/src/SidePanel/SidePanel.test.js
index f751c9a4d3f..a25420338d7 100644
--- a/packages/components/src/SidePanel/SidePanel.test.js
+++ b/packages/components/src/SidePanel/SidePanel.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import SidePanel from './SidePanel.component';
const onClick = jest.fn();
diff --git a/packages/components/src/TabBar/TabBar.component.js b/packages/components/src/TabBar/TabBar.component.js
index a3d1f6cfc6e..a68765922a1 100644
--- a/packages/components/src/TabBar/TabBar.component.js
+++ b/packages/components/src/TabBar/TabBar.component.js
@@ -1,19 +1,23 @@
/* eslint-disable react/jsx-no-bind */
+
/* eslint-disable react-hooks/exhaustive-deps */
+
/* eslint-disable react/no-find-dom-node */
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import { Tab, Nav, NavItem } from '@talend/react-bootstrap';
-import debounce from 'lodash/debounce';
+
import classnames from 'classnames';
+import debounce from 'lodash/debounce';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
-import Tag from '../Tag';
+import { Nav, NavItem, Tab } from '@talend/react-bootstrap';
+
+import { ActionDropdown } from '../Actions';
import Icon from '../Icon';
-import TooltipTrigger from '../TooltipTrigger';
import OverlayTrigger from '../OverlayTrigger';
-import { ActionDropdown } from '../Actions';
+import Tag from '../Tag';
+import TooltipTrigger from '../TooltipTrigger';
import getTabBarBadgeLabel from '../utils/getTabBarBadgeLabel';
import theme from './TabBar.module.scss';
diff --git a/packages/components/src/TabBar/TabBar.test.js b/packages/components/src/TabBar/TabBar.test.js
index 1bddff3c464..2ad55745947 100644
--- a/packages/components/src/TabBar/TabBar.test.js
+++ b/packages/components/src/TabBar/TabBar.test.js
@@ -1,7 +1,8 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import TabBar from './TabBar.component';
+
import { ActionButton } from '../Actions';
+import TabBar from './TabBar.component';
const tabProps = {
id: 'my-tabs',
diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggleComponent.test.js b/packages/components/src/Toggle/LabelToggle/LabelToggleComponent.test.js
index ded5a6f5a40..b1cab946b2b 100644
--- a/packages/components/src/Toggle/LabelToggle/LabelToggleComponent.test.js
+++ b/packages/components/src/Toggle/LabelToggle/LabelToggleComponent.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import LabelToggle from './LabelToggle.component';
describe('LabelToggle', () => {
diff --git a/packages/components/src/Toggle/Toggle.test.js b/packages/components/src/Toggle/Toggle.test.js
index 343b20d16ed..e7388e48b5e 100644
--- a/packages/components/src/Toggle/Toggle.test.js
+++ b/packages/components/src/Toggle/Toggle.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import Toggle from './Toggle.component';
const defaultProps = {
diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.test.js b/packages/components/src/TooltipTrigger/TooltipTrigger.test.js
index 3f81e7419b7..d6880f8dd1f 100644
--- a/packages/components/src/TooltipTrigger/TooltipTrigger.test.js
+++ b/packages/components/src/TooltipTrigger/TooltipTrigger.test.js
@@ -1,5 +1,6 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import TooltipTrigger from './TooltipTrigger.component';
describe('ActionTooltip', () => {
diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js
index 2f336de2488..5d07bbae18c 100644
--- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js
+++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import TreeViewItem, { getItemIcon } from './TreeViewItem.component';
jest.unmock('@talend/design-system');
diff --git a/packages/components/src/Typeahead/Typeahead.component.js b/packages/components/src/Typeahead/Typeahead.component.js
index 1b11a179a50..1f14fa570b2 100644
--- a/packages/components/src/Typeahead/Typeahead.component.js
+++ b/packages/components/src/Typeahead/Typeahead.component.js
@@ -1,20 +1,23 @@
-import PropTypes from 'prop-types';
import { useMemo, useState } from 'react';
-import classNames from 'classnames';
import Autowhatever from 'react-autowhatever';
import { useTranslation } from 'react-i18next';
import { usePopper } from 'react-popper';
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
import { randomUUID } from '@talend/utils';
-import theme from './Typeahead.module.scss';
+import { Action } from '../Actions';
+import I18N_DOMAIN_COMPONENTS from '../constants';
import {
- renderItemsContainerFactory,
renderInputComponent,
- renderSectionTitle,
renderItem,
+ renderItemsContainerFactory,
+ renderSectionTitle,
} from './Typeahead.component.renderers';
-import { Action } from '../Actions';
-import I18N_DOMAIN_COMPONENTS from '../constants';
+
+import theme from './Typeahead.module.scss';
function getItems(items, dataFeature) {
if (!items) {
diff --git a/packages/components/src/Typeahead/Typeahead.test.js b/packages/components/src/Typeahead/Typeahead.test.js
index d793b9cbb34..a45c9e2d632 100644
--- a/packages/components/src/Typeahead/Typeahead.test.js
+++ b/packages/components/src/Typeahead/Typeahead.test.js
@@ -1,7 +1,8 @@
-import Typeahead from './Typeahead.component';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import Typeahead from './Typeahead.component';
+
function getHeaders() {
return document.querySelectorAll('.section-header');
}
diff --git a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.test.js b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.test.js
index 95a40fd1d64..ff57d360fd5 100644
--- a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.test.js
+++ b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import CellCheckbox from './CellCheckbox.component';
const columnData = {
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.test.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.test.js
index 81ebe6a5a93..d5e4e83990b 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.test.js
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.test.js
@@ -1,8 +1,9 @@
/* eslint-disable @typescript-eslint/no-shadow */
-import { within, render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { CellTitleActionsComponent } from './CellTitleActions.component';
+
import { cellTitleDisplayModes, listTypes } from '../utils/constants';
+import { CellTitleActionsComponent } from './CellTitleActions.component';
const { LARGE } = listTypes;
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js
index e7bef670a5c..82889e7e033 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.component.js
@@ -1,5 +1,7 @@
-import PropTypes from 'prop-types';
import { Component } from 'react';
+
+import PropTypes from 'prop-types';
+
import theme from './CellTitle.module.scss';
/**
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.test.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.test.js
index 292eb1e95ec..89ecc2bb81c 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.test.js
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleInput.test.js
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
import CellTitleInput from './CellTitleInput.component';
diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleSelector.test.js b/packages/components/src/VirtualizedList/CellTitle/CellTitleSelector.test.js
index a8c6429632e..d4513219d0d 100644
--- a/packages/components/src/VirtualizedList/CellTitle/CellTitleSelector.test.js
+++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleSelector.test.js
@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
import { cellTitleDisplayModes } from '../utils/constants';
import CellTitleSelector from './CellTitleSelector.component';
diff --git a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.test.js b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.test.js
index f8c0d518d41..2e302984695 100644
--- a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.test.js
+++ b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import HeaderCheckbox from './HeaderCheckbox.component';
const items = [
diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js
index d56220a659b..917bf84c985 100644
--- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js
+++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js
@@ -1,13 +1,16 @@
/* eslint-disable react/display-name */
import { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
import Draggable from 'react-draggable';
import { defaultTableHeaderRenderer } from 'react-virtualized';
-import { ConsumerVirtualizedList } from '../virtualizedListContext';
-import headerResizableCssModule from './HeaderResizable.module.scss';
+
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
import { getTheme } from '../../theme';
import getDefaultT from '../../translate';
+import { ConsumerVirtualizedList } from '../virtualizedListContext';
+
+import headerResizableCssModule from './HeaderResizable.module.scss';
const theme = getTheme(headerResizableCssModule);
diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.test.js b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.test.js
index 22a103cae31..9c91c145a14 100644
--- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.test.js
+++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.test.js
@@ -1,7 +1,7 @@
-import { screen, render, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
-import { HeaderResizable } from './HeaderResizable.component';
import { virtualizedListContext } from '../virtualizedListContext';
+import { HeaderResizable } from './HeaderResizable.component';
describe('HeaderResizable', () => {
it('should render with no specific props', () => {
diff --git a/packages/components/src/VirtualizedList/event/rowclick.test.js b/packages/components/src/VirtualizedList/event/rowclick.test.js
index fa4de39cff4..61cc1b7d814 100644
--- a/packages/components/src/VirtualizedList/event/rowclick.test.js
+++ b/packages/components/src/VirtualizedList/event/rowclick.test.js
@@ -1,4 +1,5 @@
import cases from 'jest-in-case';
+
import { decorateRowClick, decorateRowDoubleClick } from './rowclick';
describe('rowclick', () => {
diff --git a/packages/components/src/VirtualizedList/utils/gridrow.test.js b/packages/components/src/VirtualizedList/utils/gridrow.test.js
index 8ea78af4e11..29cf38a5c07 100644
--- a/packages/components/src/VirtualizedList/utils/gridrow.test.js
+++ b/packages/components/src/VirtualizedList/utils/gridrow.test.js
@@ -1,20 +1,21 @@
import { Children } from 'react';
-import CellTitle from '../CellTitle';
+
import VirtualizedList from '..';
+import CellTitle from '../CellTitle';
+import collection from '../collection';
+import { internalIds, listTypes } from './constants';
import {
+ extractSpecialFields,
+ getCellData,
getCellRenderer,
getCellType,
- getId,
getColumnData,
getDataKey,
+ getId,
getLabel,
getRowData,
- getCellData,
- extractSpecialFields,
renderCell,
} from './gridrow';
-import { internalIds, listTypes } from './constants';
-import collection from '../collection';
const { LARGE } = listTypes;
diff --git a/packages/components/src/wrap.test.tsx b/packages/components/src/wrap.test.tsx
index 0f3e1cfc693..2754f99d5cd 100644
--- a/packages/components/src/wrap.test.tsx
+++ b/packages/components/src/wrap.test.tsx
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import wrap from './wrap';
describe('wrap', () => {
diff --git a/packages/containers/src/ActionButton/ActionButton.test.js b/packages/containers/src/ActionButton/ActionButton.test.js
index 89e4ea21bbf..252647f3c63 100644
--- a/packages/containers/src/ActionButton/ActionButton.test.js
+++ b/packages/containers/src/ActionButton/ActionButton.test.js
@@ -1,11 +1,12 @@
-import { screen, render } from '@testing-library/react';
-import cmf, { mock } from '@talend/react-cmf';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import cmf, { mock } from '@talend/react-cmf';
+
import Connected, {
+ ContainerActionButton,
mapStateToProps,
mergeProps,
- ContainerActionButton,
} from './ActionButton.connect';
jest.unmock('@talend/design-system');
diff --git a/packages/containers/src/ActionIconToggle/ActionIconToggle.test.js b/packages/containers/src/ActionIconToggle/ActionIconToggle.test.js
index e8c0b473dcd..234504df3f1 100644
--- a/packages/containers/src/ActionIconToggle/ActionIconToggle.test.js
+++ b/packages/containers/src/ActionIconToggle/ActionIconToggle.test.js
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+
import cmf, { mock } from '@talend/react-cmf';
import { ContainerActionIconToggle, mapStateToProps, mergeProps } from './ActionIconToggle.connect';
diff --git a/packages/containers/src/ComponentForm/ComponentForm.test.js b/packages/containers/src/ComponentForm/ComponentForm.test.js
index 244313f2387..95b278c3b22 100644
--- a/packages/containers/src/ComponentForm/ComponentForm.test.js
+++ b/packages/containers/src/ComponentForm/ComponentForm.test.js
@@ -1,9 +1,10 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { fromJS, Map } from 'immutable';
+
import cmf, { mock } from '@talend/react-cmf';
-import addSchemaMock from './ComponentForm.test.schema.json';
-import { toJS, resolveNameForTitleMap, TCompForm } from './ComponentForm.component';
+import { resolveNameForTitleMap, TCompForm, toJS } from './ComponentForm.component';
+import addSchemaMock from './ComponentForm.test.schema.json';
jest.unmock('@talend/design-system');
diff --git a/packages/containers/src/EditableText/EditableText.test.js b/packages/containers/src/EditableText/EditableText.test.js
index 31d6f6ccf45..464689f8da1 100644
--- a/packages/containers/src/EditableText/EditableText.test.js
+++ b/packages/containers/src/EditableText/EditableText.test.js
@@ -1,9 +1,11 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import cmf, { mock } from '@talend/react-cmf';
import { Map } from 'immutable';
-import Container, { DISPLAY_NAME } from './EditableText.container';
+
+import cmf, { mock } from '@talend/react-cmf';
+
import Connect from './EditableText.connect';
+import Container, { DISPLAY_NAME } from './EditableText.container';
import { getEditMode } from './EditableText.selectors';
jest.unmock('@talend/design-system');
diff --git a/packages/containers/src/Form/Form.test.js b/packages/containers/src/Form/Form.test.js
index 68daabaa78a..0718214dbfc 100644
--- a/packages/containers/src/Form/Form.test.js
+++ b/packages/containers/src/Form/Form.test.js
@@ -1,8 +1,8 @@
import { render } from '@testing-library/react';
import { fromJS } from 'immutable';
-import Container from './Form.container';
import Connected from './Form.connect';
+import Container from './Form.container';
jest.unmock('@talend/design-system');
diff --git a/packages/containers/src/List/List.test.js b/packages/containers/src/List/List.test.js
index 0f105dcc8bf..18c914feba5 100644
--- a/packages/containers/src/List/List.test.js
+++ b/packages/containers/src/List/List.test.js
@@ -1,12 +1,15 @@
/* eslint-disable react/prop-types */
+
/* eslint-disable react/display-name */
-import { screen, render, fireEvent } from '@testing-library/react';
-import { Map, fromJS, List as ImmutableList } from 'immutable';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { fromJS, List as ImmutableList, Map } from 'immutable';
import cloneDeep from 'lodash/cloneDeep';
+
// eslint-disable-next-line @talend/import-depth
import { prepareCMF } from '@talend/react-cmf/lib/mock/rtl';
-import Container, { DEFAULT_STATE } from './List.container';
+
import Connected, { mapStateToProps } from './List.connect';
+import Container, { DEFAULT_STATE } from './List.container';
const cmfModule = {
id: 'test',
diff --git a/packages/containers/src/ShortcutManager/ShortcutManager.container.js b/packages/containers/src/ShortcutManager/ShortcutManager.container.js
index ce2386d2e60..e23b3a80b17 100644
--- a/packages/containers/src/ShortcutManager/ShortcutManager.container.js
+++ b/packages/containers/src/ShortcutManager/ShortcutManager.container.js
@@ -1,5 +1,7 @@
import { Component } from 'react';
+
import keys from 'lodash/keys';
+
import { cmfConnect } from '@talend/react-cmf';
/**
diff --git a/packages/containers/src/ShortcutManager/ShortcutManager.test.js b/packages/containers/src/ShortcutManager/ShortcutManager.test.js
index 9f74c05c0a8..2a9758541b3 100644
--- a/packages/containers/src/ShortcutManager/ShortcutManager.test.js
+++ b/packages/containers/src/ShortcutManager/ShortcutManager.test.js
@@ -1,10 +1,11 @@
-import { Map } from 'immutable';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import { Map } from 'immutable';
+
import { mock } from '@talend/react-cmf';
-import Container from './ShortcutManager.container';
import Connected from './ShortcutManager.connect';
+import Container from './ShortcutManager.container';
describe('Shortcut container', () => {
it('should render', () => {
diff --git a/packages/containers/src/Typeahead/Typeahead.container.js b/packages/containers/src/Typeahead/Typeahead.container.js
index 361e922b3e0..a4428c53407 100644
--- a/packages/containers/src/Typeahead/Typeahead.container.js
+++ b/packages/containers/src/Typeahead/Typeahead.container.js
@@ -1,9 +1,11 @@
import { Component as RComponent } from 'react';
-import PropTypes from 'prop-types';
+
import Immutable from 'immutable';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+
import { cmfConnect, componentState } from '@talend/react-cmf';
import Component from '@talend/react-components/lib/Typeahead';
-import omit from 'lodash/omit';
export const DISPLAY_NAME = 'Container(Typeahead)';
export const DEFAULT_STATE = new Immutable.Map({
diff --git a/packages/containers/src/Typeahead/Typeahead.test.js b/packages/containers/src/Typeahead/Typeahead.test.js
index 54581aa59bf..1a73269b8e5 100644
--- a/packages/containers/src/Typeahead/Typeahead.test.js
+++ b/packages/containers/src/Typeahead/Typeahead.test.js
@@ -1,7 +1,8 @@
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
import { Map } from 'immutable';
-import Container, { DEFAULT_STATE } from './Typeahead.container';
+
import Connect from './Typeahead.connect';
+import Container, { DEFAULT_STATE } from './Typeahead.container';
const defaultProps = {
id: 42,
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 79eb42c01f1..804bad46512 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -38,8 +38,9 @@
"@talend/utils": "^2.8.0",
"classnames": "^2.3.2",
"modern-css-reset": "^1.4.0",
- "react-use": "^17.4.0",
"react-transition-group": "^2.9.0",
+ "react-use": "^17.4.0",
+ "react-virtualized": "^9.22.5",
"typeface-inconsolata": "^1.1.13",
"typeface-source-sans-pro": "^1.1.13"
},
@@ -72,12 +73,14 @@
"@talend/scripts-config-typescript": "^11.2.0",
"@talend/storybook-docs": "^2.2.0",
"@testing-library/cypress": "^10.0.1",
+ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
"@types/classnames": "^2.3.1",
"@types/jest-axe": "^3.5.8",
"@types/react-is": "^18.2.4",
"@types/react": "^18.2.38",
"@types/react-dom": "^18.2.17",
"@types/react-transition-group": "^2.9.2",
+ "@types/react-virtualized": "^9.21.26",
"browser-sync": "^2.29.3",
"browser-sync-webpack-plugin": "^2.3.0",
"concurrently": "^7.6.0",
diff --git a/packages/design-system/src/components/Enumeration/Enumeration.component.tsx b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx
new file mode 100644
index 00000000000..b575bfe704c
--- /dev/null
+++ b/packages/design-system/src/components/Enumeration/Enumeration.component.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AutoSizer, InfiniteLoader, List } from 'react-virtualized';
+
+import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants';
+import { EmptyState } from '../EmptyState';
+import { StackHorizontal } from '../Stack';
+import { EnumerationMode, EnumerationProps, UiEnumerationItem } from './Enumeration.types';
+import { EnumerationHeader } from './EnumerationHeader/EnumerationHeader.component';
+import { EnumerationItem } from './EnumerationItem/EnumerationItem.component';
+
+import styles from './Enumeration.module.scss';
+
+const ENUMERATION_ITEM_HEIGHT = 38;
+
+export const Enumeration = ({
+ id,
+ items,
+ loadMoreRows,
+ onCreate,
+ onChange,
+ onEdit,
+ onImport,
+ onRemove,
+ title,
+}: EnumerationProps) => {
+ const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM);
+
+ const [mode, setMode] = useState(EnumerationMode.VIEW);
+ const [selectedItems, setSelectedItems] = useState
([]);
+ const [filteredItems, setFilteredItems] = useState(items);
+ const [scrollToIndex, setScrollToIndex] = useState();
+ const [uiItems, setUiItems] = useState(
+ filteredItems.map(item => ({
+ value: item,
+ isToAnimate: false,
+ })),
+ );
+
+ const setIsToAnimate = (itemsToAnimate: string[], isToAnimate: boolean) => {
+ const newItems = [...uiItems];
+
+ itemsToAnimate.forEach(itemToAnimate => {
+ const indextToUpdate = newItems.findIndex(item => item.value === itemToAnimate);
+
+ if (indextToUpdate < 0) {
+ newItems.unshift({
+ value: itemToAnimate,
+ isToAnimate,
+ });
+ } else {
+ newItems[indextToUpdate].isToAnimate = isToAnimate;
+ }
+ });
+
+ setUiItems(newItems);
+ };
+
+ const onAnimate = (newItems: string[]) => {
+ setScrollToIndex(0);
+ setIsToAnimate(newItems, true);
+ setTimeout(() => {
+ setIsToAnimate(newItems, false);
+ setScrollToIndex(undefined);
+ }, 2500);
+ };
+
+ const handleOnCreate = async (newItem: string) => {
+ try {
+ if (newItem) {
+ await onCreate?.(newItem);
+ onChange([newItem, ...items]);
+ onAnimate([newItem]);
+ }
+ } catch (e) {
+ //The parent component must do the error handling
+ }
+ };
+
+ const handleOnEdit = async (value: string, index: number) => {
+ try {
+ const indexToReplace = items.indexOf(filteredItems[index]);
+
+ if (indexToReplace !== -1) {
+ const newItems = [...items];
+ newItems[indexToReplace] = value;
+ onChange(newItems);
+ await onEdit?.(value);
+ }
+ } catch (e) {
+ //The parent component must do the error handling
+ }
+ };
+
+ const handleOnRemove = async (itemsToRemove: string[]) => {
+ try {
+ await onRemove?.(itemsToRemove);
+ onChange(items.filter(item => !itemsToRemove.includes(item)));
+ } catch (e) {
+ //The parent component must do the error handling
+ }
+ };
+
+ return (
+
+
{
+ const newItems = data.split('\n').filter(Boolean);
+ onImport?.(newItems);
+ onAnimate(newItems);
+ }}
+ onRemove={handleOnRemove}
+ selectedItems={selectedItems}
+ setFilteredItems={setFilteredItems}
+ setMode={setMode}
+ setSelectedItems={setSelectedItems}
+ title={title}
+ />
+
+ {loadMoreRows && filteredItems.length ? (
+ !!filteredItems[index]}
+ loadMoreRows={loadMoreRows}
+ rowCount={filteredItems.length}
+ >
+ {({ onRowsRendered, registerChild }) => (
+
+ {({ width }) => (
+ (
+
+ handleOnEdit(value, index)}
+ onRemove={handleOnRemove}
+ selectedItems={selectedItems}
+ setSelectedItems={setSelectedItems}
+ value={filteredItems[index]}
+ />
+
+ )}
+ width={width}
+ />
+ )}
+
+ )}
+
+ ) : (
+
+
+
+ )}
+
+
+
{title}
+
+ {selectedItems.length ? (
+ {
+ onRemove(selectedItems);
+ setSelectedItems([]);
+ setMode(EnumerationMode.VIEW);
+ }}
+ >
+ {t('ENUMERATION_REMOVE_BUTTON', {
+ count: selectedItems.length,
+ defaultValue: 'Remove ({{count}})',
+ })}
+
+ ) : (
+
+
+ {
+ setSearchValue(undefined);
+ setFilteredItems(items);
+ setMode(
+ mode === EnumerationMode.CREATE ? EnumerationMode.VIEW : EnumerationMode.CREATE,
+ );
+ }}
+ size="S"
+ >
+ {t('ENUMERATION_ADD_ACTION', 'Add item')}
+
+
+
+ {
+ setMode(
+ mode === EnumerationMode.EDIT ? EnumerationMode.VIEW : EnumerationMode.EDIT,
+ );
+ }}
+ size="S"
+ >
+ {t('ENUMERATION_EDIT_ACTION', 'Edit item')}
+
+
+ {onImport && (
+
+ {
+ const fr = new FileReader();
+ const file = e.target.files?.[0];
+
+ if (file) {
+ try {
+ fr.readAsText(file);
+ fr.onload = () => onImport(fr.result as string);
+ } catch (error) {
+ //The parent component must do the error handling
+ }
+ }
+ }}
+ />
+ importRef.current?.click()}
+ size="S"
+ disabled={![EnumerationMode.VIEW].includes(mode)}
+ >
+ {t('ENUMERATION_IMPORT_ACTION', 'Import items')}
+
+
+ )}
+
+ )}
+
+
+ {mode === EnumerationMode.CREATE ? (
+
+ {
+ if (value) {
+ onCreate(value);
+ setMode(EnumerationMode.VIEW);
+ }
+
+ setHasError(!value);
+ }}
+ onCancel={() => {
+ setMode(EnumerationMode.VIEW);
+ }}
+ hasError={hasError}
+ />
+
+ {hasError && (
+
+ )}
+
+ ) : (
+
setSearchValue(e.target.value)}
+ placeholder="Search"
+ />
+ )}
+
+ {mode === EnumerationMode.EDIT && (
+ onToggleAll(e.target.checked)}
+ checked={isAllChecked()}
+ indeterminate={selectedItems.length > 0}
+ />
+ )}
+
+ {isEdit ? (
+
setIsEdit(false)}
+ onEdit={(_, newValue) => {
+ onEdit(newValue);
+ setIsEdit(false);
+ }}
+ placeholder={value}
+ />
+ ) : value ? (
+ <>
+ {mode === EnumerationMode.EDIT ? (
+ onToggleItem(value, e.target.checked)}
+ />
+ ) : (
+ {value}
+ )}
+ setIsEdit(true),
+ type: 'button',
+ },
+ {
+ label: t('ENUMERATION_DROPDOWN_REMOVE', 'Remove'),
+ icon: 'trash',
+ onClick: () => onRemove?.([value]),
+ type: 'button',
+ },
+ ]}
+ >
+ {}}
+ size="S"
+ disabled={[EnumerationMode.CREATE, EnumerationMode.EDIT].includes(mode)}
+ >
+ {t('ENUMERATION_DROPDOWN_OPTIONS', 'Dropdown options')}
+
+
+
+ ) : (
+
+ )}
+