@onewelcome/react-lib-components 0.1.5-alpha → 0.1.8-alpha

package/src/DataGrid/DataGridBody/DataGridBody.test.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridBody, Props } from './DataGridBody';
+import { render, getAllByRole } from '@testing-library/react';
+import { DataGridRow } from './DataGridRow';
+import { DataGridCell } from './DataGridCell';
+import { ContextMenu } from '../../ContextMenu/ContextMenu';
+import { IconButton } from '../../Button/IconButton';
+import { Icon, Icons } from '../../Icon/Icon';
+import { ContextMenuItem } from '../../ContextMenu/ContextMenuItem';
+
+type DataType = { firstName: string; lastName: string; date: string };
+
+const defaultParams: Props<DataType> = {
+  children: ({ item }) => (
+    <DataGridRow key={item.firstName}>
+      <DataGridCell>{item.firstName}</DataGridCell>
+      <DataGridCell>{item.lastName}</DataGridCell>
+      <DataGridCell>{item.date}</DataGridCell>
+      <DataGridCell>
+        <ContextMenu
+          id={`consent_menu_${item.firstName}`}
+          trigger={
+            <IconButton title={`Actions for ${item.firstName}`} color="default">
+              <Icon icon={Icons.EllipsisAlt} />
+            </IconButton>
+          }
+        >
+          <ContextMenuItem>Item 1</ContextMenuItem>
+        </ContextMenu>
+      </DataGridCell>
+    </DataGridRow>
+  ),
+  headers: [
+    { name: 'firstName', headline: 'First name' },
+    { name: 'lastName', headline: 'Last name' },
+    { name: 'date', headline: 'Date' },
+  ],
+  data: [
+    { firstName: 'Paweł', lastName: 'Napieracz', date: '12.12.1990' },
+    { firstName: 'Michał', lastName: 'Górski', date: '12.12.1994' },
+    { firstName: 'Daniel', lastName: 'Velden', date: '12.12.199x' },
+    { firstName: 'Jasha', lastName: 'Joachimsthal', date: '12.12.198x' },
+  ],
+};
+
+const createDataGridBody = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
+  let parameters = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('table');
+  const queries = render(<DataGridBody {...parameters} data-testid="dataGridBody" />, {
+    container,
+  });
+  const dataGridBody = queries.getByTestId('dataGridBody');
+
+  return {
+    ...queries,
+    dataGridBody,
+  };
+};
+
+describe('DataGridBody should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridBody } = createDataGridBody();
+
+    expect(dataGridBody).toBeDefined();
+    const rows = getAllByRole(dataGridBody, 'row');
+    expect(rows).toMatchSnapshot();
+  });
+
+  it('renders loading state with only visible columns', () => {
+    const headers = [...defaultParams.headers];
+    headers[0] = { ...headers[0], hidden: true };
+    const { dataGridBody } = createDataGridBody((params) => ({ ...params, headers }));
+
+    expect(dataGridBody).toBeDefined();
+    const rows = getAllByRole(dataGridBody, 'row');
+    const firstRowCells = getAllByRole(rows[0], 'cell');
+    expect(firstRowCells).toHaveLength(3);
+    expect(firstRowCells[0]).toHaveTextContent(defaultParams.data?.[0].lastName!);
+  });
+
+  it('renders empty state', () => {
+    const emptyLabel = 'emptyLabel';
+    const { dataGridBody } = createDataGridBody((params) => ({
+      ...params,
+      emptyLabel,
+      data: undefined,
+    }));
+
+    const rows = getAllByRole(dataGridBody, 'row');
+    const firstRowCells = getAllByRole(rows[0], 'cell');
+    expect(firstRowCells).toHaveLength(1);
+    expect(firstRowCells[0]).toHaveAttribute('colspan', `${defaultParams.headers.length + 1}`);
+    expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridBody {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('table');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridBody/DataGridBody.tsx

@@ -0,0 +1,64 @@
+import React, { ComponentPropsWithRef, ReactElement, Ref } from 'react';
+import { HeaderCell } from '../datagrid.interfaces';
+import { DataGridCell } from './DataGridCell';
+import { DataGridRow } from './DataGridRow';
+import classes from './DataGridBody.module.scss';
+import { Typography } from '../../Typography/Typography';
+
+export interface Props<T> extends ComponentPropsWithRef<'tbody'> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  headers: HeaderCell[];
+  isLoading?: boolean;
+  disableContextMenuColumn?: boolean;
+  emptyLabel?: string;
+}
+
+const skeletonLoadingRows = 9;
+
+const DataGridBodyInner = <T extends {}>(
+  { children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, ...rest }: Props<T>,
+  ref: Ref<HTMLTableSectionElement>
+) => {
+  const renderContent = () => {
+    const visibleColumns = headers.filter((header) => !header.hidden).length;
+    if (isLoading) {
+      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (
+        <DataGridRow key={rowIdx} isLoading>
+          {Array.from(Array(visibleColumns)).map((__, colIdx) => (
+            <DataGridCell key={colIdx} isLoading></DataGridCell>
+          ))}
+          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}
+        </DataGridRow>
+      ));
+    }
+
+    const emptyData = !data || data.length === 0;
+    if (emptyData) {
+      return (
+        <tr>
+          <td
+            className={classes['empty']}
+            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}
+          >
+            <Typography variant="body" spacing={{ margin: 0 }}>
+              {emptyLabel}
+            </Typography>
+          </td>
+        </tr>
+      );
+    }
+
+    return data?.map((item, index) => React.cloneElement(children({ item, index }), { headers }));
+  };
+
+  return (
+    <tbody {...rest} ref={ref}>
+      {renderContent()}
+    </tbody>
+  );
+};
+
+export const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }
+) => ReactElement;

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -0,0 +1,33 @@
+@import '../../mixins.module.scss';
+
+.cell {
+  min-height: 3.5rem;
+  padding: 0.5rem 0.625rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  .loading {
+    @include skeletonLoading();
+    border-radius: 0.5rem;
+    height: 1.25rem;
+    margin: 0.625rem 0;
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

package/src/DataGrid/DataGridBody/DataGridCell.test.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridCell, Props } from './DataGridCell';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  children: 'cell',
+};
+
+const createDataGridCell = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tr');
+  const queries = render(<DataGridCell {...parameters} data-testid="dataGridCell" />, {
+    container,
+  });
+  const dataGridCell = queries.getByTestId('dataGridCell');
+
+  return {
+    ...queries,
+    dataGridCell,
+  };
+};
+
+describe('DataGridCell should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridCell } = createDataGridCell();
+
+    expect(dataGridCell).toBeDefined();
+    expect(dataGridCell).toHaveClass('cell');
+    expect(dataGridCell).toHaveTextContent(defaultParams.children as string);
+  });
+
+  it('renders with additional class', () => {
+    const { dataGridCell } = createDataGridCell((params) => ({ ...params, className: 'test' }));
+
+    expect(dataGridCell).toHaveClass('cell', 'test');
+  });
+
+  it('renders loading state', () => {
+    const { dataGridCell } = createDataGridCell((params) => ({ ...params, isLoading: true }));
+
+    const skeletonLoadingEl = dataGridCell.querySelector('div');
+    expect(skeletonLoadingEl).toHaveClass('loading');
+    expect(skeletonLoadingEl).toHaveAttribute('aria-busy', 'true');
+    expect(skeletonLoadingEl).toHaveAttribute('aria-live', 'polite');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridCell {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tr');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridBody/DataGridCell.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentPropsWithRef, ReactChild } from 'react';
+import { Typography } from '../../Typography/Typography';
+import classes from './DataGridCell.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'td'> {
+  children?: ReactChild;
+  isLoading?: boolean;
+}
+
+export const DataGridCell = React.forwardRef<HTMLTableCellElement, Props>(
+  ({ children, className, isLoading, ...rest }: Props, ref) => {
+    return (
+      <td {...rest} ref={ref} className={`${classes['cell']} ${className ?? ''}`}>
+        {isLoading && (
+          <div className={classes['loading']} aria-busy="true" aria-live="polite"></div>
+        )}
+        {!isLoading && (
+          <Typography variant="body" tag="span">
+            {children}
+          </Typography>
+        )}
+      </td>
+    );
+  }
+);

package/src/DataGrid/DataGridBody/DataGridRow.module.scss

@@ -0,0 +1,7 @@
+.row {
+  background-color: var(--data-grid-row-background-color);
+
+  &:not(.loading):hover {
+    background-color: var(--data-grid-row-hover-background-color);
+  }
+}

package/src/DataGrid/DataGridBody/DataGridRow.test.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridRow, Props } from './DataGridRow';
+import { render } from '@testing-library/react';
+import { DataGridCell } from './DataGridCell';
+
+const defaultParams: Props = {
+  children: [<DataGridCell>1</DataGridCell>, <DataGridCell>2</DataGridCell>],
+  headers: [
+    { name: 'firstName', headline: 'first name' },
+    { name: 'lastName', headline: 'last name' },
+  ],
+};
+
+const createDataGridRow = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tbody');
+  const queries = render(<DataGridRow {...parameters} data-testid="dataGridRow" />, { container });
+  const dataGridRow = queries.getByTestId('dataGridRow');
+
+  return {
+    ...queries,
+    dataGridRow,
+  };
+};
+
+describe('DataGridRow should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridRow, getAllByRole } = createDataGridRow();
+
+    expect(dataGridRow).toBeDefined();
+    expect(dataGridRow).toHaveClass('row', { exact: true });
+    const cells = getAllByRole('cell');
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent('1');
+    expect(cells[1]).toHaveTextContent('2');
+  });
+
+  it('renders with additional class', () => {
+    const { dataGridRow } = createDataGridRow((params) => ({ ...params, className: 'test' }));
+
+    expect(dataGridRow).toHaveClass('row test', { exact: true });
+  });
+
+  it('renders loading state', () => {
+    const { dataGridRow } = createDataGridRow((params) => ({ ...params, isLoading: true }));
+
+    expect(dataGridRow).toHaveClass('row loading', { exact: true });
+  });
+
+  it('renders only visible columns', () => {
+    const { dataGridRow, getAllByRole } = createDataGridRow((params) => ({
+      ...params,
+      headers: [
+        { name: 'firstName', headline: 'first name', hidden: true },
+        { name: 'lastName', headline: 'last name', hidden: true },
+        { name: 'date', headline: 'date' },
+        { name: 'status', headline: 'status' },
+      ],
+      children: [
+        <DataGridCell>1</DataGridCell>,
+        <DataGridCell>2</DataGridCell>,
+        <DataGridCell>3</DataGridCell>,
+        <DataGridCell>4</DataGridCell>,
+      ],
+    }));
+
+    expect(dataGridRow).toBeDefined();
+    const cells = getAllByRole('cell');
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent('3');
+    expect(cells[1]).toHaveTextContent('4');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridRow {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tbody');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { HeaderCell } from '../datagrid.interfaces';
+import classes from './DataGridRow.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'tr'> {
+  headers?: HeaderCell[];
+  isLoading?: boolean;
+}
+
+export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
+  ({ children, className, headers, isLoading, ...rest }: Props, ref) => {
+    const visibleCells = React.Children.map(children, (child, index) => {
+      const visible = headers?.length! > index ? !headers![index].hidden : true;
+      return visible && child;
+    });
+
+    const classNames = [classes['row']];
+    className && classNames.push(className);
+    isLoading && classNames.push(classes['loading']);
+
+    return (
+      <tr {...rest} ref={ref} className={classNames.join(' ')}>
+        {visibleCells}
+      </tr>
+    );
+  }
+);