@scality/core-ui 0.115.0

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

@@ -0,0 +1,136 @@
+import { Table } from './Tablev2.component';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+jest.mock('./TableUtils', () => ({
+  ...jest.requireActual('./TableUtils'),
+  // since convertRemToPixels rely on getComputedStyle(document.documentElement) which is not available in jest
+  // we mock it
+  convertRemToPixels: () => 12,
+}));
+
+jest.mock('react-virtualized-auto-sizer', () => ({ children }) => {
+  return children({
+    height: 600,
+    width: 600,
+  });
+});
+
+const data = [
+  {
+    firstName: 'Sotiria',
+    lastName: 'Agathangelou',
+    age: 90,
+    health: 'healthy',
+  },
+  {
+    firstName: 'Stefania',
+    lastName: 'Evgenios',
+    age: 27,
+    health: 'warning',
+  },
+  {
+    firstName: 'Yohann',
+    lastName: 'Rodolph',
+    age: 27,
+    health: 'critical',
+  },
+  {
+    firstName: 'Ninette',
+    lastName: 'Caroline',
+    age: 31,
+    health: 'healthy',
+  },
+];
+const columns = [
+  {
+    Header: 'First Name',
+    accessor: 'firstName',
+  },
+  {
+    Header: 'Last Name',
+    accessor: 'lastName',
+  },
+  {
+    Header: 'Age',
+    accessor: 'age',
+  },
+  {
+    Header: 'Health',
+    accessor: 'health',
+    sortType: 'health',
+  },
+];
+
+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"
+              backgroundVariant="backgroundLevel1"
+            />
+          </Table>
+        </div>
+      </QueryClientProvider>,
+    );
+    // we check that the table is displaying all the data
+    const rows = getAllByRole('row');
+    expect(rows[4]).toHaveTextContent(/Ninette/i);
+    expect(rows[1]).toHaveTextContent(/yohann/i);
+    expect(rows.length).toBe(5);
+  });
+  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"
+              backgroundVariant="backgroundLevel1"
+            />
+          </Table>
+        </div>
+      </QueryClientProvider>,
+    );
+    // we check that the table is displaying all the data
+    const rows = getAllByRole('row');
+    expect(rows[1]).toHaveTextContent(/ninette/i);
+    expect(rows[4]).toHaveTextContent(/Yohann/i);
+    expect(rows.length).toBe(5);
+  });
+  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"
+              backgroundVariant="backgroundLevel1"
+            />
+          </Table>
+        </div>
+      </QueryClientProvider>,
+    );
+    // 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
+
+    expect(rows[2]).toHaveTextContent(/an/i); //last name agath-an-gelou
+
+    expect(rows[3]).toHaveTextContent(/an/i); //first name stef-an-ia
+
+    expect(rows.length).toBe(4);
+  });
+});

package/src/lib/components/tablev2/react-table-config.ts

@@ -0,0 +1,90 @@
+import { CSSProperties } from 'react';
+
+// From: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table
+declare module 'react-table' {
+  export interface Hooks<D extends object = {}>
+    extends UseExpandedHooks<D>,
+      UseGroupByHooks<D>,
+      UseRowSelectHooks<D>,
+      UseTableHooks<D>,
+      UseSortByHooks<D> {}
+
+  export interface TableInstance<D extends object = {}>
+    extends UseColumnOrderInstanceProps<D>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export function useTable<D extends object = {}>(
+    options: TableOptions<D>,
+    ...plugins: Array<PluginHook<D>>
+  ): TableInstance<D>;
+
+  export interface TableState<D extends object = {}>
+    extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  export interface Cell<D extends object = {}, V = any>
+    extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
+
+  export interface Row<D extends object = {}>
+    extends UseExpandedRowProps<D>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+
+  export interface ColumnInterface<D extends object = {}>
+    extends UseFiltersColumnOptions<D>,
+      UseGlobalFiltersColumnOptions<D>,
+      UseGroupByColumnOptions<D>,
+      UseResizeColumnsColumnOptions<D>,
+      UseSortByColumnOptions<D>,
+      UseTableColumnOptions<D> {}
+  // CoreUIColumn
+
+  export type CoreUIColumn<D extends object = {}> = Column<D> & {
+    cellStyle?: CSSProperties;
+  };
+  export interface ColumnInstance<D extends object = {}>
+    extends UseFiltersColumnProps<D>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<D> {
+    cellStyle?: CSSProperties;
+  }
+
+  export interface CoreUIUseTableOptions<D extends object>
+    extends UseTableOptions<D> {
+    columns: ReadonlyArray<CoreUIColumn<D>>;
+  }
+
+  export interface TableOptions<D extends object>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      CoreUIUseTableOptions<D>,
+      // note that having Record here allows you to add anything to the options, this matches the spirit of the
+      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+      // feature set, this is a safe default.
+      Record<string, any> {}
+}

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

@@ -0,0 +1,62 @@
+import { forwardRef, MutableRefObject, useEffect, useRef } from 'react';
+import { Hooks, TableToggleAllRowsSelectedProps } from 'react-table';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox/Checkbox.component';
+
+const CheckBoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 50px;
+`;
+
+const IndeterminateCheckbox = forwardRef<
+  HTMLInputElement,
+  TableToggleAllRowsSelectedProps
+>(({ indeterminate, ...rest }, ref) => {
+  const defaultRef = useRef<HTMLInputElement | null>(null);
+  const resolvedRef = ref || defaultRef;
+
+  useEffect(() => {
+    (resolvedRef as MutableRefObject<HTMLInputElement>).current.indeterminate =
+      !!indeterminate;
+  }, [resolvedRef, indeterminate]);
+
+  return (
+    <>
+      <Checkbox ref={resolvedRef} {...rest} />
+    </>
+  );
+});
+
+export const useCheckbox = (hooks: Hooks<object>) => {
+  hooks.visibleColumns.push((columns) => {
+    const test = [
+      {
+        id: 'selection',
+        Header: ({ getToggleAllRowsSelectedProps }) => {
+          return (
+            <CheckBoxContainer>
+              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+            </CheckBoxContainer>
+          );
+        },
+        Cell: ({ row }) => {
+          return (
+            <CheckBoxContainer>
+              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+            </CheckBoxContainer>
+          );
+        },
+        cellStyle: { width: '50px' },
+        disableSortBy: true,
+      },
+      ...columns,
+    ];
+
+    return test;
+  });
+};
+
+useCheckbox.pluginName = 'useCheckbox';

package/src/lib/components/tablev2/useSyncedScroll.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Row } from 'react-table';
+import { FixedSizeList } from 'react-window';
+
+export default function useSyncedScroll<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>(): {
+  headerRef: (element: HTMLDivElement) => void;
+  bodyRef: (tableBody: FixedSizeList<Row<DATA_ROW>[]>) => void;
+} {
+  const [listener, setListener] =
+    useState<((event: Event) => void) | null>(null);
+  const [tableBody, setTableBody] =
+    useState<FixedSizeList<Row<DATA_ROW>[]> | null>(null);
+
+  const headerRef = useCallback(
+    (element: HTMLDivElement) => {
+      if (element) {
+        const callback = (event: Event) => {
+          if (element && event) {
+            element.scrollTo({
+              left: (event.target as HTMLDivElement).scrollLeft,
+              top: 0,
+            });
+          }
+        };
+        if (!listener) {
+          setListener(() => {
+            return callback;
+          });
+        }
+      }
+    },
+    [listener],
+  );
+
+  const bodyRef = useCallback((tableBody: FixedSizeList<Row<DATA_ROW>[]>) => {
+    setTableBody(tableBody);
+  }, []);
+
+  useEffect(() => {
+    if (tableBody && listener) {
+      /*
+      We intentionally use _outerRef prop here despite the fact that it is 
+      internal use only and not typed, as it is the only way for us to access to the scrollable element
+      */
+      //@ts-expect-error
+      (tableBody._outerRef as HTMLDivElement).addEventListener(
+        'scroll',
+        listener,
+      );
+
+      return () => {
+        //@ts-expect-error
+        if (tableBody && tableBody._outerRef) {
+          //@ts-expect-error
+          tableBody._outerRef.removeEventListener('scroll', listener);
+        }
+      };
+    }
+  }, [tableBody, listener]);
+
+  return { headerRef, bodyRef };
+}

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

@@ -0,0 +1,39 @@
+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';
+
+const StyledScrollButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${spacing.r24};
+  z-index: ${zIndex.scrollbarButton};
+  color: ${getThemePropSelector('textSecondary')};
+  background-color: ${getThemePropSelector('backgroundLevel3')};
+  box-shadow: 0px 0px ${spacing.r2} rgba(0, 0, 0, 0.75);
+  box-sizing: border-box;
+  border: ${spacing.r1} solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    border-radius: ${spacing.r2};
+    box-shadow: none;
+    border: ${spacing.r1} solid ${getThemePropSelector('infoPrimary')};
+  }
+`;
+type Props = {
+  direction: 'left' | 'right';
+  onClick: (arg0: React.SyntheticEvent<HTMLDivElement>) => void;
+};
+const ScrollButton = React.forwardRef(({ direction, onClick }: Props, ref) => {
+  return (
+    // @ts-ignore
+    <StyledScrollButton direction={direction} onClick={onClick} ref={ref}>
+      <Icon name={`Chevron-${direction}`} />
+    </StyledScrollButton>
+  );
+});
+export { ScrollButton };

package/src/lib/components/tabsv2/StyledTabs.ts

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+import { spacing } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const TabBar = styled.div`
+  display: flex;
+  height: ${spacing.sp40};
+`;
+export const TabItem = styled.div<{
+  selected?: boolean;
+  activeTabColor?: string;
+  activeTabSeparator?: string;
+  inactiveTabColor?: string;
+  tabHoverColor?: string;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 0 ${spacing.sp24} 0 ${spacing.sp24};
+  border-radius: ${spacing.sp4} ${spacing.sp4} 0 0;
+  border: ${spacing.sp1} solid transparent;
+  min-width: 5rem;
+
+  &:focus-visible {
+    outline: 0;
+    position: relative;
+    border: ${spacing.sp1} dashed ${getThemePropSelector('selectedActive')};
+  }
+
+  &:focus-within {
+    outline: 0;
+  }
+
+  ${(props) => {
+    const { highlight, backgroundLevel3, backgroundLevel4, selectedActive } =
+      props.theme;
+    return props.selected
+      ? `
+        background-color: ${props.activeTabColor || backgroundLevel4};
+        &:after {
+          content: "";
+          background: ${props.activeTabSeparator || selectedActive};
+          position: absolute;
+          border-radius: ${spacing.sp2} ${spacing.sp2} 0 0;
+          bottom: 0;
+          right: 0;
+          left: calc(50% - ${spacing.sp16});
+          height: ${spacing.sp2};
+          width: ${spacing.sp32};
+        }
+      `
+      : `
+        background-color: ${props.inactiveTabColor || backgroundLevel3};
+        &:hover {
+          cursor: pointer;
+          border: ${spacing.sp1} solid ${props.tabHoverColor || highlight};
+        }
+      `;
+  }}
+`;
+export const TabsContainer = styled.div<{
+  tabLineColor?: string;
+  separatorColor: string;
+}>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) =>
+    props.tabLineColor || props.theme.backgroundLevel3};
+
+  & ${TabItem} {
+    display: flex;
+    justify-content: center;
+    position: relative;
+  }
+
+  & ${TabItem}::before {
+    content: "";
+    background: ${(props) => props.separatorColor || props.theme.infoSecondary};
+    position: absolute;
+    bottom: 25%;
+    right: 0;
+    height: ${spacing.sp16};
+    width: 1px;
+    margin-right: -1px;
+  }
+}`;
+export const TabContent = styled.div<{ tabContentColor?: string }>`
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  background-color: ${(props) =>
+    props.tabContentColor || props.theme.backgroundLevel4};
+`;
+export const ScrollableContainer = styled.div`
+  display: flex;
+`;
+export const TabsScroller = styled.div`
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  width: 100%;
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none; // Safari + Chrome
+  }
+  overflow-x: auto;
+  overflow-y: hidden;
+`;

package/src/lib/components/tabsv2/Tab.ts

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+import { TabsContext } from './Tabsv2.component';
+export type Query = Record<string, string>;
+export type TabProps = {
+  path: string;
+  query?: Query;
+  label: JSX.Element | string;
+  icon?: JSX.Element;
+  textBadge?: JSX.Element;
+  children: JSX.Element;
+  className?: string;
+  exact?: boolean;
+  strict?: boolean;
+  sensitive?: boolean;
+};
+
+function Tab(_: TabProps) {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error('Tab cannot be rendered outside the Tabs component');
+  }
+
+  return null;
+}
+
+export { Tab };