Merge pull request #1338 from habx/feature/APP-29181

habxtech · web-flow · commit 3de1d14f9f20 · 2022-04-19T13:14:22.000+02:00
APP-29181: feat: React 18
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@habx/ui-core": "^5.64.0",
+    "@habx/ui-core": "^7.0.0",
     "lodash": ">=4.17.21",
-    "react": ">= 17.0.2",
+    "react": ">= 18.0.0",
     "styled-components": ">= 5.3.5"
   },
   "dependencies": {
@@ -57,22 +57,22 @@
     "react-window-infinite-loader": "^1.0.7"
   },
   "devDependencies": {
-    "@habx/config-ci-front": "^0.19.0",
+    "@habx/config-ci-front": "^2.0.0",
     "@habx/eslint-config-client": "^6.6.0",
-    "@habx/ui-core": "5.64.0",
+    "@habx/ui-core": "^6.0.0",
     "@storybook/addon-docs": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/storybook-deployer": "^2.8.11",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.181",
     "@types/papaparse": "^5.3.2",
-    "@types/react": "^17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "@types/react-table": "^7.7.10",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
@@ -85,9 +85,9 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "lint-staged": "^12.3.8",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "storybook-dark-mode": "^1.0.9",
diff --git a/src/Table/LoadingOverlay.tsx b/src/Table/LoadingOverlay.tsx
@@ -19,7 +19,7 @@ export const LoadingContainer = styled.div`
   opacity: 0.8;
 `
 
-export const LoadingOverlay: React.VoidFunctionComponent = () => (
+export const LoadingOverlay: React.FunctionComponent = () => (
   <LoadingContainer>
     <Loader size="large" outline />
   </LoadingContainer>
diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx
@@ -132,7 +132,7 @@ export const Table = <D extends {}>({
             headerGroups.map((headerGroup, headerGroupIndex) => (
               <TableHeadRow {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((col, headerCellIndex) => {
-                  const column = (col as unknown) as ColumnInstance<D>
+                  const column = col as unknown as ColumnInstance<D>
 
                   const headerProps = column.getHeaderProps(
                     ...(column.getSortByToggleProps
diff --git a/src/Table/TableFooter.tsx b/src/Table/TableFooter.tsx
@@ -12,7 +12,7 @@ export const TableFooter = <D extends {}>({
       {footerGroups.map((group) => {
         if (
           group.headers.every((column) => {
-            const Footer = ((column as unknown) as { Footer: Function }).Footer
+            const Footer = (column as unknown as { Footer: Function }).Footer
             return !Footer || Footer === emptyRenderer
           })
         ) {
diff --git a/src/Table/TableOptions/TablePagination.tsx b/src/Table/TableOptions/TablePagination.tsx
@@ -86,4 +86,5 @@ export const TablePagination: React.FunctionComponent<PaginationProps> = ({
 
 interface PaginationProps {
   instance: TableInstance<any>
+  children?: React.ReactNode
 }
diff --git a/src/Table/hooks/useVirtualize.ts b/src/Table/hooks/useVirtualize.ts
@@ -26,14 +26,16 @@ export const useVirtualize = <D extends object>(
 
   React.useEffect(() => {
     if (!skip && isEmpty(dimensions)) {
-      setDimensions({
-        height: scrollContainerRef.current?.clientHeight,
-        width: scrollContainerRef.current?.clientWidth,
-        itemSize: config.rowsHeight,
-      })
+      React.startTransition(() =>
+        setDimensions({
+          height: scrollContainerRef.current?.clientHeight,
+          width: scrollContainerRef.current?.clientWidth,
+          itemSize: config.rowsHeight,
+        })
+      )
     }
 
-    const handleResize = () => setDimensions({})
+    const handleResize = () => React.startTransition(() => setDimensions({}))
 
     window.addEventListener('resize', handleResize)
 
diff --git a/src/_fakeData/storyFakeData.tsx b/src/_fakeData/storyFakeData.tsx
@@ -66,7 +66,7 @@ export const RICH_COLUMNS = [
   },
 ] as Column<typeof FAKE_DATA[0]>[]
 
-export const IMEX_COLUMNS: IMEXColumn<Faker.Card & { id: number }>[] = [
+export const IMEX_COLUMNS: IMEXColumn[] = [
   {
     Header: 'Username',
     accessor: 'username',
diff --git a/src/cell/ImageCell/ImageCell.hooks.ts b/src/cell/ImageCell/ImageCell.hooks.ts
@@ -3,9 +3,8 @@ import * as React from 'react'
 import { IMAGE_ZOOM_SIZE } from './ImageCell.style'
 
 export const useZoomStyle = (imageRef: React.RefObject<HTMLImageElement>) => {
-  const [zoomStyle, setZoomStyle] = React.useState<
-    React.CSSProperties | undefined
-  >(undefined)
+  const [zoomStyle, setZoomStyle] =
+    React.useState<React.CSSProperties | undefined>(undefined)
 
   React.useLayoutEffect(() => {
     if (imageRef.current) {
diff --git a/src/components/LoadingOverlay/LoadingOverlay.tsx b/src/components/LoadingOverlay/LoadingOverlay.tsx
@@ -8,33 +8,32 @@ import { OverlayContainer } from './LoadingOverlay.style'
 
 const pad = (n: number) => (n < 10 ? `0${n}` : n)
 
-export const LoadingOverlay: React.FunctionComponent<LoadingOverlayInterface> = ({
-  total,
-  done,
-  remainingTime,
-}) => {
-  const remainingTimeDate = remainingTime ? new Date(remainingTime) : new Date()
-  return (
-    <OverlayContainer>
-      <Card spacing="regular">
-        <Title type="regular">
-          {done}/{total}
-        </Title>
-        <br />
-        <LoadingBar total={total} loaded={done} />
-        <br />
-        <Text>
-          Temps restant:{' '}
-          {remainingTime
-            ? `${pad(remainingTimeDate.getMinutes())}:${pad(
-                remainingTimeDate.getSeconds()
-              )}`
-            : '--:--'}
-        </Text>
-      </Card>
-    </OverlayContainer>
-  )
-}
+export const LoadingOverlay: React.FunctionComponent<LoadingOverlayInterface> =
+  ({ total, done, remainingTime }) => {
+    const remainingTimeDate = remainingTime
+      ? new Date(remainingTime)
+      : new Date()
+    return (
+      <OverlayContainer>
+        <Card spacing="regular">
+          <Title type="regular">
+            {done}/{total}
+          </Title>
+          <br />
+          <LoadingBar total={total} loaded={done} />
+          <br />
+          <Text>
+            Temps restant:{' '}
+            {remainingTime
+              ? `${pad(remainingTimeDate.getMinutes())}:${pad(
+                  remainingTimeDate.getSeconds()
+                )}`
+              : '--:--'}
+          </Text>
+        </Card>
+      </OverlayContainer>
+    )
+  }
 
 interface LoadingOverlayInterface {
   total: number
diff --git a/src/filter/TextFilter/TextFilter.tsx b/src/filter/TextFilter/TextFilter.tsx
@@ -1,4 +1,3 @@
-import { debounce } from 'lodash'
 import * as React from 'react'
 
 import { Icon, TextInput } from '@habx/ui-core'
@@ -12,12 +11,10 @@ export const TextFilter: React.FunctionComponent<{
     column.filterValue
   )
 
-  const handleSetFilter = React.useMemo(() => {
-    if (!column.setFilter) {
-      return null
-    }
-    return debounce(column.setFilter, 500)
-  }, [column.setFilter])
+  const deferredValue = React.useDeferredValue(liveValue)
+  React.useEffect(() => {
+    column.setFilter?.(deferredValue)
+  }, [column.setFilter, deferredValue])
 
   if (!column.setFilter) {
     return null
@@ -26,7 +23,6 @@ export const TextFilter: React.FunctionComponent<{
   const handleSetValue = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value || undefined
     setLiveValue(value)
-    handleSetFilter!(value)
   }
 
   return (
diff --git a/src/filterFactory/selectFilterFactory.tsx b/src/filterFactory/selectFilterFactory.tsx
@@ -9,17 +9,16 @@ export const selectFilterFactory = (
   options: any[],
   otherProps: Partial<SelectFilterProps> = {}
 ) => {
-  const Component: React.FunctionComponent<
-    Omit<SelectFilterProps, 'options'>
-  > = (props) => (
-    <SelectFilter
-      {...props}
-      options={options}
-      canSelectAll
-      selectAllLabel="Tout sélectionner"
-      {...otherProps}
-    />
-  )
+  const Component: React.FunctionComponent<Omit<SelectFilterProps, 'options'>> =
+    (props) => (
+      <SelectFilter
+        {...props}
+        options={options}
+        canSelectAll
+        selectAllLabel="Tout sélectionner"
+        {...otherProps}
+      />
+    )
 
   return Component
 }
diff --git a/src/imex/imex.interface.ts b/src/imex/imex.interface.ts
@@ -121,8 +121,8 @@ const a: IMEXColumn = { // eslint-disable-line
   imex: {},
 }
 
-// @ts-expect-error
 const b: IMEXColumn = { // eslint-disable-line
+  // @ts-expect-error
   Header: () => '',
   accessor: '',
   imex: {},
diff --git a/src/imex/imex.spec.ts b/src/imex/imex.spec.ts
@@ -32,7 +32,6 @@ describe('Import/Export (imex)', () => {
     })
     it('should allow download data in XLS', async () => {
       const { result } = renderHook(() => useExportTable())
-
       await act(() => {
         const [downloadFile] = result.current
         return downloadFile('test', {
diff --git a/src/imex/import/DataIndicators.tsx b/src/imex/import/DataIndicators.tsx
@@ -9,6 +9,7 @@ import { DataInfo, DataInfoContainer } from './useImportTable.style'
 export const IconIndicator: React.FunctionComponent<{
   type: 'addition' | 'edition' | 'ignored'
   label?: string
+  children?: React.ReactNode
 }> = ({ type, label, children }) => {
   const icon = React.useMemo(() => {
     switch (type) {
@@ -30,7 +31,7 @@ export const IconIndicator: React.FunctionComponent<{
   )
 }
 
-export const DataIndicators: React.VoidFunctionComponent<DataInfoProps> = ({
+export const DataIndicators: React.FunctionComponent<DataInfoProps> = ({
   data,
 }) => {
   const dataInfos = React.useMemo(() => {
diff --git a/src/imex/import/ImportTableDropzone.tsx b/src/imex/import/ImportTableDropzone.tsx
@@ -8,7 +8,7 @@ import { useImportTable } from './useImportTable'
 import { DropzoneContainer, StyledIMEXDropzone } from './useImportTable.style'
 
 export const ImportTableDropzone: React.FunctionComponent<
-  UseImportTableParams<any>
+  React.PropsWithChildren<UseImportTableParams<any>>
 > = ({ children, ...props }) => {
   const importTable = useImportTable(props)
 
diff --git a/src/imex/import/useImportTable.columns.tsx b/src/imex/import/useImportTable.columns.tsx
@@ -85,7 +85,9 @@ export const getCompareColumnsFromImexColumns = <D extends ImportedRow<{}>>(
 
         const cellPrevVal = get(rowMeta?.prevVal, getPath(column))
 
-        const CellContainer: React.FunctionComponent = ({ children }) => {
+        const CellContainer: React.FunctionComponent<
+          React.PropsWithChildren<{}>
+        > = ({ children }) => {
           if (!Object.values(rowMeta?.errors ?? {}).length) {
             return <React.Fragment>{children}</React.Fragment>
           }
diff --git a/src/imex/import/useImportTable.utils.ts b/src/imex/import/useImportTable.utils.ts
@@ -207,10 +207,7 @@ export const parseRawData = async <D extends { id?: string | number }>(
         if (options.findPrevValPredicate) {
           return options.findPrevValPredicate(originalRow, importedRowValue)
         }
-        return (
-          get(originalRow, getPath(identifierColumn)) ===
-          prevValIdentifier
-        )
+        return get(originalRow, getPath(identifierColumn)) === prevValIdentifier
       })
 
       importedRowMeta.prevVal = originalData[prevValIndex]
diff --git a/src/plugin/useRowSelect/useRowSelect.tsx b/src/plugin/useRowSelect/useRowSelect.tsx
@@ -1,13 +1,20 @@
 import * as React from 'react'
+import * as ReactTable from 'react-table'
 
 import { Checkbox, Tooltip } from '@habx/ui-core'
 
-import { CellProps, HeaderProps, Hooks, TableInstance } from '../../types/Table'
+import {
+  CellProps,
+  Column,
+  HeaderProps,
+  Hooks,
+  TableInstance,
+} from '../../types/Table'
 
 import { CheckboxContainer } from './useRowSelect.style'
 
 export const useRowSelect = <D extends object>(hooks: Hooks<D>) => {
-  hooks.visibleColumns.push((columns, { instance: _instance }) => {
+  hooks.visibleColumns.push(((columns, { instance: _instance }) => {
     const instance = _instance as TableInstance<D>
     return [
       {
@@ -36,5 +43,5 @@ export const useRowSelect = <D extends object>(hooks: Hooks<D>) => {
       },
       ...columns,
     ]
-  })
+  }) as (allColumns: Array<Column<D>>, meta: ReactTable.Meta<D>) => Array<Column<D>>)
 }
diff --git a/src/useTable/useTable.tsx b/src/useTable/useTable.tsx
@@ -79,30 +79,28 @@ export const useTable = <D extends object = {}>(
   )
 
   if (plugins.find((plugin) => plugin.pluginName === 'useRowSelect')) {
-    plugins.push((useRowSelect as unknown) as ReactTable.PluginHook<D>)
+    plugins.push(useRowSelect as unknown as ReactTable.PluginHook<D>)
   }
 
   if (options.manualPagination) {
-    plugins.push(
-      (useControlledPagination as unknown) as ReactTable.PluginHook<D>
-    )
+    plugins.push(useControlledPagination as unknown as ReactTable.PluginHook<D>)
   }
 
   if (options.manualFilters) {
-    plugins.push((useControlledFilters as unknown) as ReactTable.PluginHook<D>)
+    plugins.push(useControlledFilters as unknown as ReactTable.PluginHook<D>)
   }
 
   if (options.manualSortBy) {
-    plugins.push((useControlledSortBy as unknown) as ReactTable.PluginHook<D>)
+    plugins.push(useControlledSortBy as unknown as ReactTable.PluginHook<D>)
   }
 
-  return (ReactTable.useTable<D>(
+  return ReactTable.useTable<D>(
     {
       ...restOptions,
       data,
       columns,
       defaultColumn: defaultColumn as Partial<ReactTable.Column<D>>,
     },
     ...plugins
-  ) as any) as TableInstance<D>
+  ) as any as TableInstance<D>
 }

Original file line number	Diff line number	Diff line change
@@ -19,7 +19,7 @@ export const LoadingContainer = styled.div`
`19`	`19`	`opacity: 0.8;`
`20`	`20`	`
`21`	`21`
`22`		`-export const LoadingOverlay: React.VoidFunctionComponent = () => (`
	`22`	`+export const LoadingOverlay: React.FunctionComponent = () => (`
`23`	`23`	`<LoadingContainer>`
`24`	`24`	`<Loader size="large" outline />`
`25`	`25`	`</LoadingContainer>`
Original file line number	Diff line number	Diff line change
`@@ -86,4 +86,5 @@ export const TablePagination: React.FunctionComponent<PaginationProps> = ({`
`86`	`86`
`87`	`87`	`interface PaginationProps {`
`88`	`88`	`instance: TableInstance<any>`
	`89`	`+ children?: React.ReactNode`
`89`	`90`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ export const RICH_COLUMNS = [`
`66`	`66`	`},`
`67`	`67`	`] as Column<typeof FAKE_DATA[0]>[]`
`68`	`68`
`69`		`-export const IMEX_COLUMNS: IMEXColumn<Faker.Card & { id: number }>[] = [`
	`69`	`+export const IMEX_COLUMNS: IMEXColumn[] = [`
`70`	`70`	`{`
`71`	`71`	`Header: 'Username',`
`72`	`72`	`accessor: 'username',`