chore(ARCH-482): remove reakit from design-system (#4751)

Let's remove it and assume we can support accessibility if we own the code.
add tests to enforce some check around accessibility

.changeset/bright-dodos-deny.md

@@ -0,0 +1,26 @@
+---
+'@talend/scripts-core': major
+'@talend/scripts-config-jest': major
+---
+
+- fix: enforce timer at the end of all tests.
+- feat: mock ally.js has it uses unsupported dom method from jsdom.
+- feat: add jest-axe configuration
+
+
+To support floating-ui/react following issue we have decided to add an afterAll to let floating-ui finish stuff
+https://github.com/floating-ui/floating-ui/issues/1908
+
+
+Breaking changes:
+
+you may have tests where you ask for jest.useFakeTimer without go back to real at some point. This is a side effect and it is not compatible with our change to support floating-ui.
+
+```diff
+jest.useFakeTimers()
+render(<Tooltip><button></Tooltip>)
++jest.useRealTimers()
+```
+
+This will fix an error said your test is still pending after 5000 ms.
+

.changeset/bright-zoos-hug.md

@@ -0,0 +1,6 @@
+---
+'@talend/scripts-config-storybook-lib': patch
+---
+
+fix: add keys on all items in the decorators
+fix: improve build performance copy/pasted from #4931

.changeset/chatty-apes-speak.md

@@ -0,0 +1,98 @@
+---
+'@talend/design-system': major
+---
+
+chore: remove reakit
+
+* Rewrite components without reakit
+* use `@floating-ui/react` for tooltip, popover
+* export all types and components from the root
+
+Breaking changes:
+* HTML structure output may have changed
+* Some passed props from our component to reakit and not documented as a usage as been removed. If you need a different usage let us knwow, now we own the code
+* Tabs props API has been completly changed
+
+Components changed:
+* Accordion (useId)
+* Clickable (rewrite)
+* Combobox (add as primitive)
+* Disclosure (add as primitive)
+* Divider (rewrite)
+* Drawer (rewrite using `react-transition-group`)
+* Dropdown (rewrite using `@floating-ui/react`)
+* Form/Affix/Button (typings)
+* Form/Affix/Select (useId)
+* Form/Field/Datalist (useId)
+* Form/Field/InputFile (useId)
+* Form/Field/InputToggleSwitch (rewrite)
+* Form/Primitives/Checkbox (rewrite)
+* Form/Primitives/Field (useId)
+* Form/Primitives/Radio (useId)
+* Modal (rewrite Dialog as primitive)
+* Popover (rewrite using `@floating-ui/react`)
+* Switch (rewrite)
+* Tabs (rewrite + props changed)
+* Tooltip (rewrite using `@floating-ui/react` + API Change)
+* VisuallyHidden (rewrite)
+
+
+**Migration Guide**
+
+* Checkbox component
+
+    Checkbox has two versions now : controlled one and uncontrolled one.
+    To use controlled version, import Checkbox component and provide `checked` and `onChange` props.
+    To use uncontrolled version, import UncontrolledCheckbox component and optionally provide `defaultChecked` prop.
+
+    We also change way to import it to be less verbose.
+
+    Old use
+    ```
+    import { Form } from '@talend/design-system';
+    (...)
+    <Form.Checkbox (...) />
+    ```
+
+    New use
+    ```
+    import { Checkbox, UncontrolledCheckbox } from '@talend/design-system';
+    (...)
+    <Checkbox checked={isChecked} onChange={changeHandler} (...) />
+    <UncontrolledCheckbox defaultChecked={isChecked} (...) />
+    ```
+
+* ToggleSwitch component
+
+    ToggleSwitch has two versions now : controlled one and uncontrolled one.
+    To use controlled version, import ToggleSwitch component and provide `checked` and `onChange` props.
+    To use uncontrolled version, import UncontrolledToggleSwitch component and optionally provide `defaultChecked` prop.
+
+    We also change way to import it to be less verbose.
+
+    Old use
+    ```
+    import { Form } from '@talend/design-system';
+    (...)
+    <Form.ToggleSwitch (...) />
+    ```
+
+    New use
+    ```
+    import { ToggleSwitch, UncontrolledToggleSwitch } from '@talend/design-system';
+    (...)
+    <ToggleSwitch checked={isChecked} onChange={changeHandler} (...) />
+    <UncontrolledToggleSwitch defaultChecked={isChecked} (...) />
+    ```
+
+* Switch component
+
+    `onChange` prop's signature change from
+    ```
+    (event: React.MouseEvent<HTMLButtonElement>, value: string) => void
+    ```
+    to
+    ```
+    (value: string) => void
+    ```
+

.changeset/famous-hotels-retire.md

@@ -0,0 +1,6 @@
+---
+'@talend/react-components': minor
+'@talend/design-system': minor
+---
+
+feat: upgrade react-is

.changeset/selfish-hairs-tie.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: some lint errors

.changeset/strange-coats-poke.md

@@ -0,0 +1,6 @@
+---
+'@talend/scripts-config-jest': minor
+---
+
+feat: add api to set a fetch MockResponse
+feat: add jest-axe integration

.github/workflows/design-system-component-testing.yml

@@ -37,6 +37,7 @@ jobs:
           yarn --frozen-lock --ignore-scripts
           yarn cypress install
           yarn workspace @talend/assets-api run build:lib
+          yarn workspace @talend/utils run build:lib
           yarn workspace @talend/icons run build:lib
           yarn workspace @talend/design-tokens run build:lib
 

.vscode/settings.json

@@ -9,5 +9,7 @@
     {
       "pattern": "fork/**"
     }
-  ]
+  ],
+  "typescript.validate.enable": true,
+  "javascript.validate.enable": true
 }

fork/react-bootstrap/src/Carousel.test.js

@@ -140,6 +140,7 @@ describe('<Carousel>', () => {
 
     // then
     expect(screen.getByText('Item 2 content')).toHaveClass('active');
+    jest.useRealTimers();
   });
 
   it('Should show next button control on the last image if wrap is true', () => {
@@ -158,6 +159,7 @@ describe('<Carousel>', () => {
 
     // then
     expect(screen.getByText('Item 1 content')).toHaveClass('active');
+    jest.useRealTimers();
   });
 
   it('Should not show the prev button on the first image if wrap is false', () => {

package.json

@@ -39,7 +39,8 @@
     "**/vinyl-fs/glob-parent": "^5.1.2",
     "**/fast-glob/glob-parent": "^5.1.2",
     "**/trim": "^1.0.1",
-    "**/x-default-browser": "^0.5.2"
+    "**/x-default-browser": "^0.5.2",
+    "**/reactour/prop-types": "^15.7.2"
   },
   "repository": {
     "type": "git",

packages/cmf-cqrs/src/middleware/smartWebsocket.test.js

@@ -215,6 +215,7 @@ describe('smart websocket tests', () => {
 
 			// then
 			expect(options.onPingTimeout).toBeCalled();
+			jest.useRealTimers();
 		});
 	});
 });

packages/components/package.json

@@ -56,7 +56,7 @@
     "react-draggable": "^4.4.5",
     "react-grid-layout": "^1.4.1",
     "react-immutable-proptypes": "^2.2.0",
-    "react-is": "^16.13.1",
+    "react-is": "^17.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^2.9.0",
     "react-use": "^17.4.0",

packages/components/src/ActionIntercom/Intercom.service.test.js

@@ -160,6 +160,7 @@ describe('Intercom service', () => {
 			expect(styleElement.textContent.trim().replace(/\s/g, ' ')).toBe(
 				'.intercom-namespace .intercom-app div.intercom-messenger-frame {     top: 39px;     left: 427px;     right: 221px;     margin-top: 2rem;    }',
 			);
+			jest.useRealTimers();
 		});
 
 		it('should remove custom style with cleanup return function', () => {
@@ -182,6 +183,7 @@ describe('Intercom service', () => {
 
 			// then
 			expect(intercomContainer.querySelector('style')).toBeFalsy();
+			jest.useRealTimers();
 		});
 	});
 });

packages/components/src/Datalist/Datalist.component.test.js

@@ -171,6 +171,7 @@ describe('Datalist component', () => {
 
 		// then
 		expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+		jest.useRealTimers();
 	});
 
 	it('should close suggestions on enter', () => {
@@ -218,6 +219,7 @@ describe('Datalist component', () => {
 
 		// then
 		expect(onChange).toBeCalledWith(expect.anything(), { value: '' });
+		jest.useRealTimers();
 	});
 
 	it('should reset previous value on ESC keydown', () => {
@@ -368,6 +370,7 @@ describe('Datalist component', () => {
 
 			// then
 			expect(onChange).toBeCalledWith(expect.anything(), { value: 'foo' });
+			jest.useRealTimers();
 		});
 
 		it('should persist unknown value on blur', () => {
@@ -384,6 +387,7 @@ describe('Datalist component', () => {
 
 			// then
 			expect(onChange).toBeCalledWith(expect.anything(), { value: 'not a known value' });
+			jest.useRealTimers();
 		});
 
 		it('should persist known value on enter', () => {
@@ -431,6 +435,7 @@ describe('Datalist component', () => {
 
 			// // then
 			expect(onChange).toBeCalledWith(expect.anything(), { value: 'not there' });
+			jest.useRealTimers();
 		});
 	});
 
@@ -450,6 +455,7 @@ describe('Datalist component', () => {
 
 			// then
 			expect(onChange).toBeCalledWith(expect.anything(), { value: 'foo' });
+			jest.useRealTimers();
 		});
 
 		it('should reset unknown value on blur', () => {
@@ -467,6 +473,7 @@ describe('Datalist component', () => {
 			// then
 			expect(onChange).not.toBeCalled();
 			expect(input).toHaveValue('My foo');
+			jest.useRealTimers();
 		});
 
 		it('should persist known value on enter', () => {
@@ -527,6 +534,7 @@ describe('Datalist component', () => {
 
 			// then
 			expect(onChange).toBeCalledWith(expect.anything(), { value: '' });
+			jest.useRealTimers();
 		});
 	});
 });

packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.test.js

@@ -36,6 +36,7 @@ describe('InputDateTimePicker', () => {
 
 			// then
 			expect(getPopup()).not.toBeInTheDocument();
+			jest.useRealTimers();
 		});
 
 		it('should trigger props.onBlur', async () => {
@@ -52,6 +53,7 @@ describe('InputDateTimePicker', () => {
 
 			// then
 			expect(onBlur).toBeCalled();
+			jest.useRealTimers();
 		});
 	});
 
@@ -93,6 +95,7 @@ describe('InputDateTimePicker', () => {
 
 			// then
 			expect(document.activeElement).toHaveClass('tc-date-picker-day');
+			jest.useRealTimers();
 		});
 	});
 

packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.test.js

@@ -83,6 +83,7 @@ describe('TimePicker', () => {
 
 		// then
 		expect(onChange).toBeCalledWith(expect.anything(), { hours: '17', minutes: '38' }, FIELD_HOURS);
+		jest.useRealTimers();
 	});
 
 	it('should trigger onChange on minutes change', () => {
@@ -109,6 +110,7 @@ describe('TimePicker', () => {
 			{ hours: '15', minutes: '17' },
 			FIELD_MINUTES,
 		);
+		jest.useRealTimers();
 	});
 
 	it('should manage tabIndex', () => {

packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx

@@ -1,7 +1,6 @@
 import { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
-
-import Icon from '../../Icon';
+import { Icon, SVG_TRANSFORMS } from '@talend/design-system';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
 import getDefaultT from '../../translate';
 
@@ -16,7 +15,7 @@ function SkipTo({ href, label }: SkipToProps) {
 	return (
 		<a href={href}>
 			<span className={theme.icon}>
-				<Icon transform="rotate-270" name="talend-arrow-left" />
+				<Icon transform={SVG_TRANSFORMS.Rotate270} name="talend-arrow-left" />
 			</span>
 			<span className={theme.text}>{label}</span>
 		</a>

packages/components/src/Layout/SkipLinks/__snapshots__/SkipLinks.test.js.snap

@@ -16,7 +16,6 @@ exports[`Skip links should render 1`] = `
           <span
             class="CoralIcon"
             name="talend-arrow-left"
-            transform="rotate-270"
           />
         </span>
         <span
@@ -36,7 +35,6 @@ exports[`Skip links should render 1`] = `
           <span
             class="CoralIcon"
             name="talend-arrow-left"
-            transform="rotate-270"
           />
         </span>
         <span

packages/components/src/List/ListComposition/DisplayMode/__snapshots__/ListDisplayMode.component.test.js.snap

@@ -6,6 +6,7 @@ exports[`List DisplayMode should render 1`] = `
 >
   <button
     aria-describedby="id-42"
+    aria-label="Set Table as current display mode."
     aria-pressed="true"
     class="theme-clickable theme-buttonIcon theme-toggle theme-size_S"
     id="myDisplayMode-table"
@@ -28,6 +29,7 @@ exports[`List DisplayMode should render 1`] = `
   </button>
   <button
     aria-describedby="id-42"
+    aria-label="Set Expanded as current display mode."
     aria-pressed="false"
     class="theme-clickable theme-buttonIcon theme-toggle theme-size_S"
     id="myDisplayMode-large"