Merge pull request #705 from habx/feature/ui-core-5

APP-16630: Prepare for ui-core@5

package.json

@@ -61,7 +61,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
     "@habx/eslint-config-client": "^5.4.0",
-    "@habx/ui-core": "^4.5.0",
+    "@habx/ui-core": "^5.0.0",
     "@storybook/addon-actions": "^6.1.9",
     "@storybook/addon-centered": "^5.3.21",
     "@storybook/addon-knobs": "^6.1.9",

src/Table/Density.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-import { Tooltip, Icon, palette } from '@habx/ui-core'
+import { Tooltip, Icon, theme } from '@habx/ui-core'
 
 import { TableInstance } from '../types/Table'
 
 const DensityIcon = styled(Icon)`
   margin-left: 18px;
-  color: ${palette.darkBlue[800]};
+  color: ${theme.neutralColor(800)};
 
   &[data-active='false'] {
-    color: ${palette.darkBlue[300]};
+    color: ${theme.neutralColor(300)};
     transition: all ease-in-out 150ms;
   }
 
   &:hover {
-    color: ${palette.darkBlue[500]};
+    color: ${theme.neutralColor(500)};
     cursor: pointer;
   }
 `

src/Table/LoadingRow.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-import { palette } from '@habx/ui-core'
+import { theme } from '@habx/ui-core'
 
 import { TableInstance } from '../types/Table'
 
@@ -22,9 +22,9 @@ const Loader = styled.div`
   max-height: 16px;
   background: linear-gradient(
     to right,
-    ${palette.darkBlue[200]} 20%,
-    ${palette.darkBlue[300]} 50%,
-    ${palette.darkBlue[200]} 80%
+    ${theme.neutralColor(200)} 20%,
+    ${theme.neutralColor(300)} 50%,
+    ${theme.neutralColor(200)} 80%
   );
   animation: fading 2s linear infinite;
   background-size: 500px 100px;

src/Table/Table.style.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import { palette, Text, theme } from '@habx/ui-core'
+import { Text, theme } from '@habx/ui-core'
 
 const alignItems = css`
   &[data-align='center'] {
@@ -54,13 +54,13 @@ export const TableHeadCell = styled.th<{ size: number }>`
   grid-column-end: span ${({ size }) => size};
 
   --table-header-font-size: 12px;
-  --table-header-color: ${palette.darkBlue[400]};
+  --table-header-color: ${theme.neutralColor(400)};
 
   &[data-big='true'] {
     font-size: 16px;
-    border-bottom: solid 1px ${palette.darkBlue[300]};
+    border-bottom: solid 1px ${theme.neutralColor(300)};
     --table-header-font-size: 16px;
-    --table-header-color: ${palette.darkBlue[900]};
+    --table-header-color: ${theme.neutralColor(900)};
   }
 `
 
@@ -84,22 +84,22 @@ export const TableBodyRow = styled.tr`
   transition: background-color 50ms ease-in-out;
 
   &[data-striped='true']:nth-child(2n + 1) {
-    background-color: ${palette.darkBlue[100]};
+    background-color: ${theme.neutralColor(100)};
   }
 
   &[data-active='true'] {
-    background-color: ${palette.blue[100]};
+    background-color: ${theme.neutralColor(100)};
 
     &[data-clickable='true'] {
       &:hover {
-        background-color: ${palette.blue[200]};
+        background-color: ${theme.neutralColor(200)};
       }
     }
   }
 
   &:not([data-active='true'])[data-clickable='true'] {
     &:hover {
-      background-color: ${palette.darkBlue[200]};
+      background-color: ${theme.neutralColor(200)};
     }
   }
 
@@ -133,7 +133,7 @@ export const TableCell = styled.td`
 
   > div {
     font-size: 16px;
-    color: ${palette.darkBlue[700]};
+    color: ${theme.neutralColor(700)};
     width: 100%;
   }
 `

src/Table/Table.tsx

@@ -155,7 +155,10 @@ const Table = <D extends {}>({
                         <TableHeaderCellContainer
                           data-align={column.align ?? 'flex-start'}
                         >
-                          <TableHeadCellContent opacity={0.5} {...headerProps}>
+                          <TableHeadCellContent
+                            variation="lowContrast"
+                            {...headerProps}
+                          >
                             {renderHeader}
                           </TableHeadCellContent>
                           {column.isSorted && (

src/Table/TablePagination.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-import { Text, Icon, Select, palette } from '@habx/ui-core'
+import { Text, Icon, Select, theme } from '@habx/ui-core'
 
 import { TableInstance } from '../types/Table'
 
@@ -24,16 +24,16 @@ export const PagesChevrons = styled.div`
 `
 
 export const PaginationIcon = styled(Icon)`
-  color: ${palette.darkBlue[800]};
+  color: ${theme.neutralColor(800)};
   transition: all ease-in-out 150ms;
   cursor: pointer;
 
   &:hover {
-    color: ${palette.darkBlue[500]};
+    color: ${theme.neutralColor(500)};
   }
 
   &[data-disabled='true'] {
-    color: ${palette.darkBlue[300]};
+    color: ${theme.neutralColor(300)};
     pointer-events: none;
   }
 `

src/cell/BooleanCell/BooleanCell.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react'
 
-import { palette } from '@habx/ui-core'
+import { useThemeVariant } from '@habx/ui-core'
 
 import IconCell, { IconCellProps } from '../IconCell'
 
 const BooleanCell = React.forwardRef<HTMLDivElement, BooleanCellProps>(
   (props, ref) => {
     const { value, ...rest } = props
 
+    const theme = useThemeVariant()
+
     return (
       <IconCell
         ref={ref}
         icon={value ? 'check' : 'close'}
-        color={value ? palette.green[600] : palette.orange[400]}
+        color={value ? theme.colors.success.base : theme.colors.error.base}
         {...rest}
       />
     )

src/cell/IconCell/IconCell.style.ts

@@ -20,7 +20,7 @@ export const IconContainer = styled.div<{ color?: string }>`
           color: ${color};
         `
       : css`
-          color: ${theme.textColor({ opacity: 0.72 })};
+          color: ${theme.textColor()};
         `};
 `
 

src/components/LoadingBar/LoadingBar.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-import { palette, theme } from '@habx/ui-core'
+import { theme } from '@habx/ui-core'
 
 export const LoadingBarStyled = styled.div`
   width: 300px;
   height: 8px;
   --loading-bar-progress: 0%;
   position: relative;
 
-  background: ${palette.darkBlue[300]};
+  background: ${theme.neutralColor(300)};
 
   &:after {
     transition: width ease-in-out 150ms;

src/imex/imex.style.ts

@@ -1,14 +1,14 @@
 import styled from 'styled-components'
 
-import { palette, Text, theme } from '@habx/ui-core'
+import { Text, theme } from '@habx/ui-core'
 
 export const OverlayContainer = styled(Text)`
   position: fixed;
   top: 0;
   height: 100vh;
   width: 100vw;
   left: 0;
-  background-color: ${palette.darkBlue[300]};
+  background-color: ${theme.neutralColor(300)};
   opacity: 0.9;
   display: grid;
   justify-items: center;

src/imex/useImportTable.tsx

@@ -322,10 +322,11 @@ const useImportTable = <D extends { id?: string | number }>(
               <ConfirmContainer data-testid="useImportTable-confirmContainer">
                 <Table style={{ scrollable: true }} instance={tableInstance} />
                 <ActionBar>
-                  <Button warning onClick={() => onResolve(false)}>
+                  <Button ghost onClick={() => onResolve(false)}>
                     Annuler
                   </Button>
                   <Button
+                    error
                     onClick={() => onResolve(true)}
                     data-testid="useImportTable-submit"
                   >

src/types/Table.ts

@@ -8,6 +8,7 @@ import {
 
 import { CheckboxProps } from '@habx/ui-core'
 
+import { IMEXColumn } from '../imex/imex.types'
 import {
   UseControlledFiltersInstanceProps,
   UseControlledFiltersOptions,
@@ -36,8 +37,6 @@ import {
   UseRowSelectOptions,
 } from '../plugin/useRowSelect/useRowSelect.interface'
 
-import { IMEXColumn } from '..'
-
 export interface FilterProps<D extends object>
   extends Omit<ReactTable.FilterType<D>, 'column'> {
   column: ColumnInstance<D>
@@ -140,9 +139,9 @@ export interface TableInstance<D extends object = {}>
   page: Array<Row<D>>
 }
 
-export type ColumnInstance<D extends object = {}> = ReactTable.ColumnInstance<
-  D
-> &
+export type ColumnInstance<
+  D extends object = {}
+> = ReactTable.ColumnInstance<D> &
   ReactTable.UseTableColumnProps<D> &
   ReactTable.UseFiltersColumnProps<D> &
   ReactTable.UseSortByColumnProps<D> &