@scality/core-ui 0.161.0 → 0.163.0

package/src/lib/components/tablev2/Tablev2.component.tsx

@@ -1,6 +1,6 @@
 /// <reference path="react-table-config.ts" />
-import * as React from 'react';
-import { useEffect } from 'react';
+
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import {
   Column as TableColumn,
   CellProps as TableCellProps,
@@ -33,6 +33,7 @@ import { TableWrapper, TooltipContent } from './Tablestyle';
 import { compareHealth, TableHeightKeyType } from './TableUtils';
 import { useCheckbox } from './useCheckbox';
 import { Icon } from '../icon/Icon.component';
+import { TableSync } from './TableSync';
 
 type UpdateTableData<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
@@ -110,12 +111,12 @@ type TableContextType<
   setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   hasScrollbar?: boolean;
 };
-const TableContext = React.createContext<TableContextType | null>(null);
+const TableContext = createContext<TableContextType | null>(null);
 
 export const useTableContext = <
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 >() => {
-  const tableProps = React.useContext(TableContext);
+  const tableProps = useContext(TableContext);
 
   if (!tableProps) {
     throw new Error(
@@ -192,7 +193,7 @@ function Table<
     ...sortTypes,
   };
 
-  const stringifyFilter = React.useMemo(() => {
+  const stringifyFilter = useMemo(() => {
     return (rows: Row<object>[], columnIds: string[], value) => {
       const filteredRows = rows.filter((row) => {
         // we stringify the object to make sure we can match the value
@@ -204,7 +205,7 @@ function Table<
     };
   }, []);
 
-  const formattedInitiallySelectedRows = React.useMemo(() => {
+  const formattedInitiallySelectedRows = useMemo(() => {
     if (initiallySelectedRowsIds) {
       return Array.from(initiallySelectedRowsIds).reduce(
         (accumulatedValue, currentValue) => ({
@@ -217,13 +218,13 @@ function Table<
     return {};
   }, []) as Record<IdType<DATA_ROW>, boolean>;
 
-  const [rowHeight, setRowHeight] = React.useState<TableHeightKeyType>('h40');
+  const [rowHeight, setRowHeight] = useState<TableHeightKeyType>('h40');
 
-  const [syncScrollListener, setSyncScrollListener] = React.useState<
+  const [syncScrollListener, setSyncScrollListener] = useState<
     ((event: Event) => void) | null
   >(null);
 
-  const [hasScrollbar, setHasScrollbar] = React.useState<boolean>(false);
+  const [hasScrollbar, setHasScrollbar] = useState<boolean>(false);
 
   const {
     headerGroups,
@@ -341,4 +342,5 @@ Table.SingleSelectableContent = SingleSelectableContent;
 Table.MultiSelectableContent = MultiSelectableContent;
 Table.Search = Search;
 Table.SearchWithQueryParams = SearchWithQueryParams;
+Table.Sync = TableSync;
 export { Table };

package/src/lib/components/tablev2/Tablev2.test.tsx

@@ -1,7 +1,6 @@
 import { Table } from './Tablev2.component';
 import React from 'react';
-import { render } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { render, screen, waitFor } from '@testing-library/react';
 
 jest.mock('./TableUtils', () => ({
   ...jest.requireActual('./TableUtils'),
@@ -66,17 +65,17 @@ const columns = [
 describe('TableV2', () => {
   test('it should display all the data', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table columns={columns} data={data} defaultSortingKey={'health'}>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table columns={columns} data={data} defaultSortingKey={'health'}>
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[4]).toHaveTextContent(/Ninette/i);
@@ -85,17 +84,17 @@ describe('TableV2', () => {
   });
   test('it should sort by defaultSortingKey', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[1]).toHaveTextContent(/ninette/i);
@@ -104,22 +103,22 @@ describe('TableV2', () => {
   });
   test('it should filterGlobally', async () => {
     const { getAllByRole } = render(
-      <QueryClientProvider client={new QueryClient()}>
-        <div>
-          <Table
-            columns={columns}
-            data={data}
-            defaultSortingKey={'firstName'}
-            globalFilter="an"
-          >
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-            />
-          </Table>
-        </div>
-      </QueryClientProvider>,
+      <div>
+        <Table
+          columns={columns}
+          data={data}
+          defaultSortingKey={'firstName'}
+          globalFilter="an"
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel3"
+          />
+        </Table>
+      </div>
     );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
     // we check that the table is displaying all the data
     const rows = getAllByRole('row');
     expect(rows[1]).toHaveTextContent(/an/i); //first name yoh-an-n

package/src/lib/components/tabsv2/ScrollButton.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import styled from 'styled-components';
 import { zIndex } from '../../style/theme';
 import { spacing } from '../../spacing';
 import { getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
+import { forwardRef } from 'react';
 
 const StyledScrollButton = styled.div`
   display: flex;
@@ -28,7 +28,7 @@ type Props = {
   direction: 'left' | 'right';
   onClick: (arg0: React.SyntheticEvent<HTMLDivElement>) => void;
 };
-const ScrollButton = React.forwardRef(({ direction, onClick }: Props, ref) => {
+const ScrollButton = forwardRef(({ direction, onClick }: Props, ref) => {
   return (
     // @ts-ignore
     <StyledScrollButton direction={direction} onClick={onClick} ref={ref}>

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -1,9 +1,11 @@
-import React, {
+import {
   createContext,
   ReactElement,
   useCallback,
   useEffect,
   useState,
+  Children,
+  isValidElement,
 } from 'react';
 import {
   matchPath,
@@ -65,10 +67,10 @@ function Tabs({
     number | null | undefined
   >(null);
   const queryURL = new URLSearchParams(location.search);
-  const filteredTabsChildren: ReactElement<TabProps>[] = React.Children.toArray(
+  const filteredTabsChildren: ReactElement<TabProps>[] = Children.toArray(
     children,
   ).filter(
-    (child) => React.isValidElement(child) && child.type === Tab,
+    (child) => isValidElement(child) && child.type === Tab,
   ) as ReactElement<TabProps>[];
 
   const matchQuery = useCallback(
@@ -234,9 +236,7 @@ function Tabs({
             return (
               <Route
                 key={index}
-                path={
-                  tab.props.path.startsWith('/') ? '/' + path : path
-                }
+                path={tab.props.path.startsWith('/') ? '/' + path : path}
                 element={
                   <>
                     <TabContent

package/src/lib/components/text/Text.component.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { CoreUITheme } from '../../style/theme';
@@ -142,17 +141,17 @@ export const Text = styled.span<{
   line-height: 1.5;
       `
       : props.variant === 'Large'
-      ? `
+        ? `
   font-size: 1.14rem;
   line-height: 1.5;
       `
-      : props.variant === 'Smaller'
-      ? `
+        : props.variant === 'Smaller'
+          ? `
   font-size: 0.71rem;
   line-height: 1.4;
   letter-spacing: 2%;// to be defined, percentage value is not valid
       `
-      : `
+          : `
   font-size: 1rem;
   line-height: ${spacing.r24};
       `}

package/src/lib/components/textarea/TextArea.component.tsx

@@ -1,7 +1,8 @@
-import React, {
+import {
   CSSProperties,
   forwardRef,
   TextareaHTMLAttributes,
+  ForwardedRef,
 } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
@@ -77,7 +78,7 @@ const TextAreaContainer = styled.textarea<{
 
 function TextAreaElement(
   { rows = 3, cols = 20, width, height, variant = 'code', ...rest }: Props,
-  ref: React.ForwardedRef<RefType>,
+  ref: ForwardedRef<RefType>,
 ) {
   if (width || height) {
     return (

package/src/lib/components/textbadge/TextBadge.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontWeight } from '../../style/theme';

package/src/lib/components/toast/Toast.component.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import React, { ReactNode, useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
 import { Button } from '../buttonv2/Buttonv2.component';

package/src/lib/components/toast/ToastProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext, useState } from 'react';
+import { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Toast, ToastProps } from './Toast.component';
 
 export type ToastContextState = Omit<ToastProps, 'onClose'>;
@@ -14,18 +14,27 @@ export const ToastContext = createContext<ToastContextType | undefined>(
 interface ToastProviderProps {
   children: ReactNode;
 }
-export const ToastProvider: React.FC<React.PropsWithChildren<ToastProviderProps>> = ({ children }) => {
+
+export const ToastProvider: React.FC<
+  React.PropsWithChildren<ToastProviderProps>
+> = ({ children }) => {
   const [toastProps, setToastProps] = useState<ToastContextState | null>(null);
 
-  const showToast = (toastProps: ToastContextState) => {
-    setToastProps(toastProps);
-  };
+  const toastCtxValue = useMemo(
+    () => ({ showToast: setToastProps }),
+    [],
+  );
+
+  const closeToast = useCallback(
+    () => setToastProps(null),
+    []
+  );
 
   return (
-    <ToastContext.Provider value={{ showToast }}>
+    <ToastContext.Provider value={toastCtxValue}>
       {children}
       {toastProps && (
-        <Toast {...toastProps} onClose={() => setToastProps(null)} />
+        <Toast {...toastProps} onClose={closeToast} />
       )}
     </ToastContext.Provider>
   );
@@ -36,5 +45,6 @@ export const useToast = () => {
   if (!context) {
     throw new Error('useToast must be used within a ToastProvider');
   }
+
   return context;
 };

package/src/lib/components/vegachartv2/SyncedCursorCharts.tsx

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useContext } from 'react';
+import { useState, createContext, useContext, useMemo, useCallback } from 'react';
 export const SyncedCursorChartsContext = createContext<{
   cursorX: number;
   setCursorX: (cursorX: number) => void;
@@ -17,13 +17,11 @@ export const useCursorX = (): {
 };
 export function SyncedCursorCharts({ children }: { children: JSX.Element }) {
   const [cursorX, setCursorX] = useState(0);
+
+  const contextValue = useMemo(() => ({cursorX, setCursorX}), [cursorX]);
+
   return (
-    <SyncedCursorChartsContext.Provider
-      value={{
-        cursorX,
-        setCursorX,
-      }}
-    >
+    <SyncedCursorChartsContext.Provider value={contextValue}>
       {children}
     </SyncedCursorChartsContext.Provider>
   );

package/src/lib/components/vegachartv2/VegaChartV2.component.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import { useEffect, useRef, useLayoutEffect, useMemo, forwardRef } from 'react';
 import * as vega from 'vega';
 import vegaEmbed, { Result } from 'vega-embed';
 import { createGlobalStyle, css, useTheme } from 'styled-components';
@@ -273,4 +273,4 @@ function VegaChartInternal(
   );
 } // @ts-expect-error
 
-export const VegaChart = React.forwardRef(VegaChartInternal);
+export const VegaChart = forwardRef(VegaChartInternal);

package/src/lib/icons/branding.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Logo = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/lib/icons/scality-loading.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const LoaderIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/lib/index.ts

@@ -82,3 +82,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
+export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/src/lib/next.ts

@@ -16,3 +16,9 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export {
+  Barchart,
+  BarchartSortFn,
+  BarchartTooltipFn,
+} from './components/barchartv2/Barchart.component';
+export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';

package/src/lib/style/theme.ts

@@ -1,3 +1,4 @@
+import { lighten, darken } from 'polished';
 //== Colors
 export const hotPink = '#E40046';
 export const pink = '#EB4962';
@@ -149,10 +150,19 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
  */
 export const defaultTheme = coreUIAvailableThemes;
 
-// Why use this and not directly coreUIAvailableThemes.darkRebrand ?
+/**
+ * @deprecated
+ * Instead should use useTheme()
+ * import { useTheme } from 'styled-components';
+ * const theme = useTheme();
+ * e.g: color={theme.statusHealthy}
+ *
+ */
+
 export const brand = coreUIAvailableThemes.darkRebrand;
 
 export type ThemeColors = keyof CoreUITheme;
+
 // LineChart colors
 export const lineColor1 = '#A14FBF';
 export const lineColor2 = '#BE9A40';
@@ -162,6 +172,20 @@ export const lineColor5 = '#E3FF73';
 export const lineColor6 = '#BE2543';
 export const lineColor7 = '#FD8144';
 export const lineColor8 = '#F6B187';
+
+export type ChartColors = keyof typeof chartColors;
+
+export const chartColors = {
+  lineColor1,
+  lineColor2,
+  lineColor3,
+  lineColor4,
+  lineColor5,
+  lineColor6,
+  lineColor7,
+  lineColor8,
+};
+
 export const fontSize = {
   smaller: '0.71rem',
   small: '0.85rem',
@@ -268,3 +292,31 @@ export const navbarItemWidth = '4.286rem';
 //sidebar
 export const sidebarItemHeight = spacing.sp40;
 export const sidebarWidth = spacing.sp40;
+
+// We use 8 main color from the palette and decline them (lighter/ darker) when we have more than 8 datasets
+export const lineTimeSeriesColorRange = [
+  lineColor1,
+  lineColor2,
+  lineColor3,
+  lineColor4,
+  lineColor5,
+  lineColor6,
+  lineColor7,
+  lineColor8,
+  lighten(0.3, lineColor1),
+  lighten(0.3, lineColor2),
+  lighten(0.3, lineColor3),
+  lighten(0.3, lineColor4),
+  lighten(0.3, lineColor5),
+  lighten(0.3, lineColor6),
+  lighten(0.3, lineColor7),
+  lighten(0.3, lineColor8),
+  darken(0.2, lineColor1),
+  darken(0.2, lineColor2),
+  darken(0.2, lineColor3),
+  darken(0.2, lineColor4),
+  darken(0.3, lineColor5),
+  darken(0.3, lineColor6),
+  darken(0.3, lineColor7),
+  darken(0.3, lineColor8),
+];