@scality/core-ui 0.161.0 → 0.162.0

package/src/lib/components/selectv2/Selectv2.component.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useContext,
   useState,
@@ -8,6 +8,8 @@ import React, {
   ForwardRefExoticComponent,
   RefAttributes,
   useImperativeHandle,
+  ReactNode,
+  Ref,
 } from 'react';
 import { ScrollbarWrapper, Tooltip } from '../../index';
 import {
@@ -31,10 +33,10 @@ const NOPT_SEARCH = 8;
 export type OptionProps = {
   title?: string;
   disabled?: boolean;
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
+  icon?: ReactNode;
+  children?: ReactNode;
   value: string;
-  disabledReason?: React.ReactNode;
+  disabledReason?: ReactNode;
 };
 const usePreviousValue = (value) => {
   const ref = useRef(null);
@@ -335,7 +337,7 @@ export type SelectProps = {
   id: string;
   placeholder?: string;
   disabled?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   value?: string;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
@@ -349,11 +351,11 @@ export type SelectProps = {
 
 type SelectOptionProps = {
   value: string;
-  label: React.ReactNode;
+  label: ReactNode;
   isDisabled: boolean;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   optionProps: any;
-  disabledReason?: React.ReactNode;
+  disabledReason?: ReactNode;
 };
 
 type SelectComponentType<
@@ -388,7 +390,7 @@ function SelectBox<
   selectRef,
   ...rest
 }: SelectProps & {
-  selectRef?: React.Ref<SelectRef<OptionType, IsMulti, GroupType>>;
+  selectRef?: Ref<SelectRef<OptionType, IsMulti, GroupType>>;
 }) {
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');

package/src/lib/components/sidebar/Sidebar.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import {

package/src/lib/components/statuswrapper/Statuswrapper.component.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled, { css } from 'styled-components';
 
 import {

package/src/lib/components/tablev2/Search.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
+import { useEffect } from 'react';
 import { useTableContext } from './Tablev2.component';
 import { SearchInput } from '../searchinput/SearchInput.component';
 import { Props } from '../searchinput/SearchInput.component';
@@ -74,7 +74,7 @@ export function TableSearch(props: SearchProps) {
     entityName = { en: { singular: 'result', plural: 'results' } },
   } = useTableContext();
   const totalDispayedRows = totalCount ? totalCount : rows.length;
-  React.useEffect(() => {
+  useEffect(() => {
     setGlobalFilter(value);
   }, [value, setGlobalFilter, preGlobalFilteredRows]);
   return (

package/src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { areEqual } from 'react-window';
 import { Row } from 'react-table';
 import { useTableContext } from './Tablev2.component';
@@ -32,7 +32,7 @@ export type SingleSelectableContentProps<
   customItemKey?: (index: number, data: DATA_ROW) => string;
   hasScrollbar?: boolean;
   isLoadingMoreItems?: boolean;
-  children?: (rows: React.JSX.Element) => React.JSX.Element;
+  children?: (rows: JSX.Element) => JSX.Element;
 };
 
 export function SingleSelectableContent<

package/src/lib/components/tablev2/TableCommon.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import { ComponentType, LegacyRef, useCallback, useState } from 'react';
 import { Row } from 'react-table';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {

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

@@ -0,0 +1,31 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { TableSync } from './TableSync';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+describe('TableSync', () => {
+  it('should render correctly', () => {
+    const onSync = jest.fn();
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <TableSync onSync={onSync} />
+      </QueryClientProvider>,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should call onSync when clicked', () => {
+    const onSync = jest.fn();
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <TableSync onSync={onSync} />
+      </QueryClientProvider>,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(onSync).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/components/tablev2/TableSync.tsx

@@ -0,0 +1,36 @@
+import { ButtonHTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+
+export type TableSyncProps = {
+  onSync: () => void;
+  tooltipOverlay?: string;
+  loading?: boolean;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+
+const TableSyncContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export function TableSync({
+  onSync,
+  tooltipOverlay,
+  loading = false,
+  ...rest
+}: TableSyncProps) {
+  return (
+    <TableSyncContainer>
+      <Button
+        icon={<Icon name="Sync" />}
+        tooltip={tooltipOverlay ? { overlay: tooltipOverlay } : undefined}
+        onClick={onSync}
+        aria-label="Synchronize table data"
+        role="button"
+        isLoading={loading}
+        {...rest}
+      />
+    </TableSyncContainer>
+  );
+}

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/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

@@ -14,7 +14,9 @@ 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) => {

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

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useContext } from 'react';
+import { useState, createContext, useContext } from 'react';
 export const SyncedCursorChartsContext = createContext<{
   cursorX: number;
   setCursorX: (cursorX: number) => void;

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/next.ts

@@ -16,3 +16,8 @@ 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';

package/src/lib/style/theme.ts

@@ -149,10 +149,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 +171,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',