@veeqo/ui 0.0.3 → 0.0.6

package/src/components/DataTable/styled.ts

@@ -1,291 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,214 +0,0 @@
-/* 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);
-    });
-  });
-});