@veeqo/ui 0.0.1 → 0.0.4

package/src/components/DataTable/styled.ts

@@ -0,0 +1,291 @@
+import styled from 'styled-components';
+import { theme } from '../../theme';
+import { NoWrapType, StripedType } from './utils/types';
+import { ScrollPosition } from './utils/constants';
+
+const { text, sizes } = theme;
+const { blue } = theme.colors.secondary;
+const { grey } = theme.colors.neutral;
+const { scrollbar } = theme.colors.system;
+
+const fixedColumnShadow = `
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  width: 30px;
+  content: "";
+  pointer-events: none;
+  box-sizing: border-box;
+  transition: box-shadow .3s;
+`;
+
+const startFixedColumnShadow = `
+  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
+`;
+
+const endFixedColumnShadow = `
+  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
+`;
+
+type WrapperPropTypes = {
+  scrollDisabled: boolean;
+  scrollPosition?: ScrollPosition;
+  lastStartFixedColumnsIndex?: number;
+  firstEndFixedColumnsIndex?: number;
+  showScrollbar?: boolean;
+};
+
+export const TooltipContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const Wrapper = styled.div<WrapperPropTypes>`
+  width: 100%;
+  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};
+  overflow-y: hidden;
+  position: relative;
+  border-top: 1px solid ${grey.dark};
+  border-bottom: 1px solid ${grey.dark};
+
+  ${({ showScrollbar }) =>
+    showScrollbar
+      ? `
+    scrollbar-width: auto;
+
+    &::-webkit-scrollbar {
+      margin-top: 10px;
+      width: 6px;
+      height: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: ${scrollbar.background}; 
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: ${scrollbar.thumb};
+      border-radius: 4px; 
+    }
+    `
+      : ''}
+
+  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>
+    scrollDisabled
+      ? ''
+      : `
+    td:nth-child(${lastStartFixedColumnsIndex}):after,
+    th:nth-child(${lastStartFixedColumnsIndex}):after {
+      right: 0;
+      transform: translate(100%);
+      ${fixedColumnShadow};
+
+      ${
+        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end
+          ? startFixedColumnShadow
+          : ''
+      };
+    };
+
+    td:nth-last-child(${firstEndFixedColumnsIndex}):after,
+    th:nth-last-child(${firstEndFixedColumnsIndex}):after {
+      left: 0;
+      transform: translate(-100%);
+      ${fixedColumnShadow};
+
+      ${
+        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle
+          ? endFixedColumnShadow
+          : ''
+      };
+    };
+  `}
+`;
+
+export const WrapperBordered = styled(Wrapper)`
+  border: 1px solid ${grey.dark};
+  border-radius: 4px;
+`;
+
+export const Head = styled.thead`
+  background-color: white;
+`;
+
+export const Body = styled.tbody<{ fixedColumnsStyle?: string }>`
+  tr {
+    ${({ fixedColumnsStyle }) => fixedColumnsStyle};
+  }
+
+  & + & > tr:first-child > td {
+    border-top: 1px solid ${grey.base};
+  }
+
+  tr:not(:first-child) > td {
+    border-top: 1px solid transparent;
+  }
+
+  &&& tr:hover td {
+    background-color: #ebf4fb; /* TODO: Remove magic hex value */
+  }
+`;
+
+export const Foot = styled.tfoot`
+  & td {
+    background-color: ${grey.lightest};
+    padding: 1.5rem 1rem;
+    border-top: 1px solid ${blue.base};
+  }
+`;
+
+export interface RowProps {
+  accentColor?: string;
+}
+
+export const Row = styled.tr<RowProps>`
+  &.hidden {
+    visibility: collapse;
+  }
+
+  ${({ accentColor }) =>
+    accentColor &&
+    `
+    & > td:first-child::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: ${accentColor};  
+    }
+  `}
+`;
+
+export interface CellProps {
+  align?: 'left' | 'center' | 'right';
+  grow?: boolean;
+}
+
+export const Cell = styled.td<CellProps>`
+  position: relative;
+  padding: 1.25rem 1rem;
+  text-align: ${({ align }) => align || 'left'};
+  background-color: white;
+
+  font-family: ${text.bodySmall.fontFamily};
+  font-size: ${text.bodySmall.fontSize};
+  font-weight: ${text.bodySmall.fontWeight};
+  color: ${text.bodySmall.color};
+  line-height: ${sizes.base};
+
+  width: ${({ grow }) => (grow ? '100%' : 'auto')};
+
+  & > * {
+    vertical-align: middle;
+  }
+`;
+
+export const HeaderCell = styled(Cell).attrs({
+  as: 'th',
+})`
+  user-select: none;
+  border-bottom: 1px solid ${grey.dark};
+
+  font-family: ${text.bodySmallBold.fontFamily};
+  font-size: ${text.bodySmallBold.fontSize};
+  font-weight: ${text.bodySmallBold.fontWeight};
+  color: ${text.bodySmallBold.color};
+
+  & span {
+    white-space: pre-line;
+  }
+
+  &.sortable:hover {
+    cursor: pointer;
+    background-color: ${grey.light};
+  }
+`;
+
+const alignmentMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export interface HeaderCellLayoutProps {
+  align?: 'left' | 'center' | 'right';
+}
+
+export const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`
+  display: flex;
+  align-items: center;
+  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};
+
+  & > * + * {
+    margin-left: 0.25rem;
+  }
+`;
+
+type TablePropTypes = {
+  striped?: StripedType;
+  noWrap?: NoWrapType;
+  tableLoading?: boolean;
+  isFixedLayout?: boolean;
+};
+
+export const Table = styled.table<TablePropTypes>`
+  width: 100%;
+  border-spacing: 0;
+  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};
+
+  ${({ striped }) =>
+    striped &&
+    `
+    & ${Body}:nth-child(even) td {
+      background-color: ${grey.lightest};
+    }
+  `}
+
+  & * {
+    box-sizing: border-box;
+
+    ${({ tableLoading }) =>
+      tableLoading &&
+      `
+      user-select: none;
+      pointer-events: none;
+    `}
+  }
+
+  ${({ noWrap }) =>
+    noWrap &&
+    `
+    & ${HeaderCell}, & ${HeaderCell} span {
+      white-space: nowrap;
+    }
+  `}
+`;
+
+export const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`
+  tr {
+    ${({ fixedColumnsStyle }) => fixedColumnsStyle};
+  }
+
+  & ${Cell} {
+    border-top: 1px solid ${grey.dark};
+    background-color: ${grey.lightest};
+    padding-top: ${sizes.base};
+    padding-bottom: ${sizes.base};
+    line-height: 2rem;
+  }
+`;
+
+export const StickyHeaderWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  z-index: 2;
+  overflow-x: hidden;
+`;
+
+export const FakeHeaderTable = styled(Table)``;

package/src/components/DataTable/utils/constants.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CalanderIcon } from '../../../tempIcons/CalendarIcon';
+import { SpecificStateType } from './types';
+import { FailIcon } from '../../../tempIcons/FailIcon';
+
+const iconSize = { width: 64, height: 64 };
+
+export const defaultEmptyState: SpecificStateType = {
+  icon: <CalanderIcon {...iconSize} />,
+  title: 'No data found',
+};
+
+export const defaultErrorState: SpecificStateType = {
+  icon: <FailIcon {...iconSize} />,
+  title: 'An error occurred when creating the table',
+  subTitle:
+    "Please, try reloading the page once. If this doesn't solve the problem, contact support",
+};
+
+export enum ScrollPosition {
+  start = 'start',
+  middle = 'middle',
+  end = 'End',
+  none = 'none',
+}

package/src/components/DataTable/utils/hooks.ts

@@ -0,0 +1,38 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+export const useStickyHeader = (
+  tableRef: React.RefObject<HTMLTableElement | null>,
+  topOffset?: number,
+) => {
+  const [isSticky, setIsSticky] = useState<boolean>(false);
+
+  const handleScrollChange = useCallback(
+    ({ top, bottom }: ClientRect) => {
+      let sticky = isSticky;
+
+      if (top <= (topOffset || 0) && bottom > 0) {
+        sticky = !isSticky ? true : sticky;
+      } else {
+        sticky = isSticky ? false : sticky;
+      }
+
+      if (sticky !== isSticky) setIsSticky(sticky);
+    },
+    [isSticky, topOffset],
+  );
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (tableRef.current) {
+        handleScrollChange(tableRef.current?.getBoundingClientRect());
+      }
+    };
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, [handleScrollChange, tableRef]);
+
+  return { isSticky };
+};

package/src/components/DataTable/utils/index.ts

@@ -0,0 +1,23 @@
+import { FixedColumnInlineStyle } from './types';
+
+export const convertFixedColumnInlineStyleToStyled = (
+  fixedColumnsStyle: FixedColumnInlineStyle[],
+): string => {
+  const styles: string[] = [];
+
+  fixedColumnsStyle.forEach(({ index, style }) =>
+    styles.push(
+      `
+      > td:${style.left !== undefined ? 'nth-child' : 'nth-last-child'}(${Math.abs(index)}) {
+        position: sticky;
+        ${style.left !== undefined ? 'left' : 'right'}: ${
+          style.left !== undefined ? style.left : style.right
+        }px;
+        z-index: ${style.zIndex};
+      }
+    `,
+    ),
+  );
+
+  return styles.join('\n\n');
+};

package/src/components/DataTable/utils/types.ts

@@ -0,0 +1,117 @@
+import { ReactNode, CSSProperties } from 'react';
+
+export type DataTableId = string | number;
+export type RowData = any;
+
+export type DataTableHeader = {
+  id: DataTableId;
+  title?: string;
+  icon?: ReactNode; // Provide Icons in size base.
+  tooltip?: string;
+  align?: 'left' | 'center' | 'right';
+  sortable?: boolean;
+  grow?: boolean;
+  width?: number | string;
+  skeleton?: string;
+  skeletonStyle?: CSSProperties;
+};
+
+export type DataTableRow = {
+  id: DataTableId;
+  data: RowData;
+  nestedRows?: DataTableNestedRow[];
+  accentColor?: string;
+};
+
+export type DataTableNestedRow = {
+  id: DataTableId;
+  data: RowData;
+};
+
+export type DataTableSortDirection = 'ascending' | 'descending';
+
+export type DataTableSelectionMode = 'multiple' | 'single';
+
+export type SpecificStates = '' | 'empty' | 'emptyWithSearch' | 'error';
+
+export type SpecificStateType = {
+  icon: ReactNode;
+  title: string;
+  subTitle?: string;
+};
+
+export type StripedType = boolean;
+export type NoWrapType = boolean;
+export type ShowScrollbarType = boolean;
+
+/**
+ * DataTable properties.
+ */
+export interface DataTableProps {
+  /** Removes the outer border */
+  borderless?: boolean;
+  /** Enables row zebra striping */
+  striped?: StripedType;
+  /** Disables text wrapping in header cells */
+  noWrap?: NoWrapType;
+  /** Forces OSX to render scrollbars */
+  showScrollbar?: ShowScrollbarType;
+  /** Configure column headers */
+  headers?: DataTableHeader[];
+  /** Configure content rows */
+  rows: DataTableRow[];
+  /** Render a content row */
+  renderRow: (row: DataTableRow) => ReactNode;
+  /** Render a nested content row */
+  renderNestedRow?: (nestedRow: DataTableNestedRow) => ReactNode;
+  /** List of row IDs that are expanded - their nested rows will be rendered */
+  expandedRowIds?: DataTableId[];
+  /** Render a content row when in the LOADING state */
+  renderLoadingRow?: () => ReactNode;
+  /** Render a footer row */
+  renderFooterRow?: (rows: DataTableRow[]) => ReactNode;
+  /** Render a footer row when in the LOADING state */
+  renderFooterLoadingRow?: () => ReactNode;
+  /** Hides the extra first cell added to the footer when row selection is enabled */
+  omitFooterSelectionCell?: boolean;
+  /** List of selected row IDs */
+  selectedRowIds?: Array<DataTableId>;
+  /** Sets the mode of row selection */
+  selectionMode?: DataTableSelectionMode;
+  /** Disable ability to select specified rows */
+  disabledSelectionInputRowIds?: DataTableId[];
+  /** Event triggered when rows are selected/deselected */
+  onChangeSelectedRowIds?: (selectedRowIds: Array<DataTableId>) => void;
+  /** Current sorted column ID (see headers config) */
+  sortColumnId?: DataTableId;
+  /** Current sort direction */
+  sortDirection?: DataTableSortDirection;
+  /** Event triggered when sortable column headers are clicked */
+  onChangeSort?: (columnId: DataTableId, direction: DataTableSortDirection) => void;
+  /** Shows the ERROR state */
+  isError: boolean;
+  /** Shows the LOADING state */
+  isLoading: boolean;
+  /** Default number of rows shown in LOADING state */
+  skeletonRowsNumber?: number;
+  /** Enables sticky headers row */
+  isHeaderSticky?: boolean;
+  /** Custom styles for stick header container - e.g. adding `top` offset */
+  stickyHeaderStyle?: CSSProperties;
+  /**
+   * Config object to show custom content when in ERROR or EMPTY states.
+   * Accepts `title`, `subTitle` and `icon`.
+   * */
+  customSpecificState?: SpecificStateType;
+  /** Override the table content height when using customSpecificState */
+  bodyHeightInSpecificStates?: number;
+  /** Number of fixed columns at the start of the table */
+  startFixedColumnsNumber?: number;
+  /** Number of fixed columns at the end of the table */
+  endFixedColumnsNumber?: number;
+}
+
+export type FixedColumnInlineStyle = {
+  index: number;
+  style: CSSProperties;
+};

package/src/components/DataTableExp/DataTable.test.tsx

@@ -0,0 +1,214 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { getAllByRole, queryByRole, render, screen } from '@testing-library/react';
+import { setupIntersectionObserverMock } from '../../utils/setupIntersectionObserverMock';
+import { DataTableExp } from './DataTable';
+import { ColumnConfigs, SortDirection } from './types';
+
+const rows = [
+  {
+    id: '1',
+    data: {
+      name: 'T-Shirt',
+      skuCode: 'TS-1',
+      quantity: 10,
+    },
+    nestedRows: [{ id: 'a', data: true }],
+    e2eClassName: 't-shirt-e2e-classname',
+  },
+  {
+    id: '2',
+    data: {
+      name: 'Jeans',
+      skuCode: 'JN-1',
+      quantity: 0,
+    },
+    nestedRows: [{ id: 'b', data: true }],
+  },
+  {
+    id: '3',
+    data: {
+      name: 'Skirt',
+      skuCode: 'SK-1',
+      quantity: 99999,
+    },
+    nestedRows: [{ id: 'c', data: true }],
+  },
+];
+
+const totalQuantity = rows.reduce((total, row) => total + row.data.quantity, 0);
+
+const footerContents = ['Total', '-', totalQuantity.toString()];
+
+const columns: ColumnConfigs = [
+  {
+    id: 'name',
+    title: 'Product name',
+    renderCell: (row, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{row.data.name}</DataTableExp.Cell>
+    ),
+    renderNestedCell: (nestedRow, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{nestedRow.id}</DataTableExp.Cell>
+    ),
+    renderFooter: (column, footerProps) => (
+      <DataTableExp.Cell {...footerProps}>{footerContents[0]}</DataTableExp.Cell>
+    ),
+  },
+  {
+    id: 'skuCode',
+    title: 'SKU',
+    renderCell: (row, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{row.data.skuCode}</DataTableExp.Cell>
+    ),
+    renderNestedCell: (nestedRow, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{nestedRow.id}</DataTableExp.Cell>
+    ),
+    renderFooter: (column, footerProps) => (
+      <DataTableExp.Cell {...footerProps}>{footerContents[1]}</DataTableExp.Cell>
+    ),
+  },
+  {
+    id: 'quantity',
+    title: 'Quantity',
+    sortable: true,
+    renderCell: (row, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{row.data.quantity}</DataTableExp.Cell>
+    ),
+    renderNestedCell: (nestedRow, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>{nestedRow.id}</DataTableExp.Cell>
+    ),
+    renderFooter: (column, footerProps) => (
+      <DataTableExp.Cell {...footerProps}>{footerContents[2]}</DataTableExp.Cell>
+    ),
+  },
+];
+
+describe('DataTable', () => {
+  const sortableProps = {
+    sortState: { columnId: '', direction: SortDirection.ascending },
+    onChangeSort: () => {},
+  };
+
+  beforeEach(() => {
+    setupIntersectionObserverMock();
+  });
+
+  it('renders content', () => {
+    render(<DataTableExp columns={columns} rows={rows} {...sortableProps} />);
+
+    const rowElements = screen.getAllByRole('row');
+    const [headerRow] = rowElements.splice(0, 1); // Removes header row from rowElements
+    const [footerRow] = rowElements.splice(-1, 1); // Removes footer row from rowElements
+
+    // Correct number of column headers
+    const headerElements = getAllByRole(headerRow, 'columnheader');
+    expect(headerElements).toHaveLength(columns.length);
+
+    // Headers have titles
+    headerElements.forEach((headerElement, index) => {
+      const content = columns[index].title || '';
+      const id = columns[index].id || '';
+      expect(headerElement).toHaveTextContent(content);
+      expect(headerElement).toHaveAttribute('id', `datatable-header-${id}`);
+    });
+
+    // Correct number of footer cells
+    const footerElements = getAllByRole(footerRow, 'cell');
+    expect(footerElements).toHaveLength(columns.length);
+
+    // Footers have correct content
+    footerElements.forEach((footerElement, index) => {
+      const content = footerContents[index];
+      expect(footerElement).toHaveTextContent(content);
+    });
+
+    // Correct number of rows
+    expect(rowElements).toHaveLength(rows.length);
+
+    rowElements.forEach((rowElement, rowIndex) => {
+      // Correct number of cells in each row
+      const cellElements = getAllByRole(rowElement, 'cell');
+      expect(cellElements).toHaveLength(columns.length);
+
+      // Correct content in each cell
+      columns.forEach((column) => {
+        const content = (rows[rowIndex].data as any)[column.id];
+        const cellElement = queryByRole(rowElement, 'cell', { name: content });
+        expect(cellElement).not.toBeNull();
+      });
+    });
+  });
+
+  test('sortable column header should have sortable classname', () => {
+    render(<DataTableExp columns={columns} rows={rows} {...sortableProps} />);
+
+    expect(screen.getByRole('columnheader', { name: 'Product name' })).not.toHaveClass('sortable');
+    expect(screen.getByRole('columnheader', { name: 'SKU' })).not.toHaveClass('sortable');
+    expect(screen.getByRole('columnheader', { name: 'Quantity' })).toHaveClass('sortable');
+  });
+
+  it('should have row with e2e classname', () => {
+    render(<DataTableExp columns={columns} rows={rows} {...sortableProps} />);
+    const [, firstBodyRow] = screen.getAllByRole('row');
+    expect(firstBodyRow).toHaveClass('t-shirt-e2e-classname');
+  });
+
+  test('only sortable column headers are rendered as buttons', () => {
+    render(<DataTableExp columns={columns} rows={rows} {...sortableProps} />);
+
+    const [headerRow] = screen.getAllByRole('row');
+    const [nonSortableColumn, nonSortableColumn2, sortableColumn] = getAllByRole(
+      headerRow,
+      'columnheader',
+    );
+
+    expect(nonSortableColumn.querySelector('button')).not.toBeTruthy();
+    expect(nonSortableColumn2.querySelector('button')).not.toBeTruthy();
+
+    expect(sortableColumn.querySelector('button')).toBeTruthy();
+  });
+
+  describe('when using row striping mode', () => {
+    const stripingMode = 'row';
+
+    it('renders nested rows', () => {
+      const [firstRow] = rows;
+      const expandedRowIds = [firstRow.id];
+      render(
+        <DataTableExp
+          columns={columns}
+          rows={rows}
+          expandedRowIds={expandedRowIds}
+          stripingMode={stripingMode}
+          {...sortableProps}
+        />,
+      );
+      const rowElements = screen.getAllByRole('row');
+      rowElements.splice(0, 1); // Removes header row from rowElements
+      rowElements.splice(-1, 1); // Removes footer row from rowElements
+      expect(rowElements).toHaveLength(rows.length + 1);
+    });
+  });
+
+  describe('when using nested striping mode', () => {
+    const stripingMode = 'nested';
+
+    it('renders nested rows', () => {
+      const [firstRow] = rows;
+      const expandedRowIds = [firstRow.id];
+      render(
+        <DataTableExp
+          columns={columns}
+          rows={rows}
+          expandedRowIds={expandedRowIds}
+          stripingMode={stripingMode}
+          {...sortableProps}
+        />,
+      );
+      const rowElements = screen.getAllByRole('row');
+      rowElements.splice(0, 1); // Removes header row from rowElements
+      rowElements.splice(-1, 1); // Removes footer row from rowElements
+      expect(rowElements).toHaveLength(rows.length + 1);
+    });
+  });
+});