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

package/src/DataGrid/DataGrid.tsx

@@ -0,0 +1,101 @@
+import React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from 'react';
+import { Props as ButtonProps } from '../Button/Button';
+import classes from './DataGrid.module.scss';
+import { DataGridHeader } from './DataGridHeader/DataGridHeader';
+import { DataGridActions } from './DataGridActions/DataGridActions';
+import { DataGridBody } from './DataGridBody/DataGridBody';
+import { ColumnName, HeaderCell, OnSortFunction, Sort } from './datagrid.interfaces';
+import { Pagination, Props as PaginationProps } from '../Pagination/Pagination';
+
+export interface Props<T> extends ComponentPropsWithRef<'div'> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  headers: HeaderCell[];
+  actions?: {
+    enableAddBtn?: boolean;
+    enableColumnsBtn?: boolean;
+    enableSearchBtn?: boolean;
+    addBtnProps?: ButtonProps;
+    columnsBtnProps?: ButtonProps;
+    searchBtnProps?: ButtonProps;
+  };
+  emptyLabel?: string;
+  paginationProps?: PaginationProps;
+  disableContextMenuColumn?: boolean;
+  isLoading?: boolean;
+  enableMultiSorting?: boolean;
+}
+
+const DataGridInner = <T extends {}>(
+  {
+    children,
+    data,
+    initialSort,
+    onSort,
+    headers,
+    actions = {},
+    paginationProps,
+    disableContextMenuColumn,
+    isLoading,
+    enableMultiSorting,
+    emptyLabel,
+    ...rest
+  }: Props<T>,
+  ref: Ref<HTMLDivElement>
+) => {
+  if (!headers) {
+    throw new Error('Headers definition has to be provided');
+  }
+  if (!children) {
+    throw new Error('DataGridBody should be provieded with a template how to render rows');
+  }
+
+  const [internalHeaders, setInternalHeaders] = useState(headers);
+
+  useEffect(() => setInternalHeaders(headers), [headers]);
+
+  const onColumnToggled = (colName: ColumnName) => {
+    setInternalHeaders(
+      internalHeaders.map((item) =>
+        item.name !== colName ? item : { ...item, hidden: !item.hidden }
+      )
+    );
+  };
+
+  return (
+    <div {...rest} ref={ref}>
+      <DataGridActions {...actions} headers={internalHeaders} onColumnToggled={onColumnToggled} />
+      <div className={classes['table-wrapper']}>
+        <table className={classes['table']}>
+          <DataGridHeader
+            headers={internalHeaders}
+            initialSort={initialSort}
+            onSort={onSort}
+            disableContextMenuColumn={disableContextMenuColumn}
+            enableMultiSorting={enableMultiSorting}
+          />
+          <DataGridBody
+            children={children}
+            data={data}
+            headers={internalHeaders}
+            isLoading={isLoading}
+            disableContextMenuColumn={disableContextMenuColumn}
+            emptyLabel={emptyLabel}
+          />
+        </table>
+      </div>
+      {paginationProps && !isLoading && (
+        <Pagination
+          {...paginationProps}
+          className={`${classes['pagination']} ${paginationProps.className ?? ''}`}
+        />
+      )}
+    </div>
+  );
+};
+
+export const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLDivElement> }
+) => ReactElement;

package/src/DataGrid/DataGridActions/DataGridActions.module.scss

@@ -0,0 +1,35 @@
+.actions {
+  margin-bottom: 1rem;
+  padding: 0 1rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.left-actions {
+  flex: 1;
+}
+
+.right-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.desktop {
+  display: none;
+}
+
+@media only screen and (min-width: 50em) {
+  .actions {
+    padding: 0 1.25rem;
+  }
+}
+
+@media only screen and (min-width: 30em) {
+  .desktop {
+    display: block;
+  }
+
+  .mobile {
+    display: none;
+  }
+}

package/src/DataGrid/DataGridActions/DataGridActions.test.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridActions, Props } from './DataGridActions';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  headers: [],
+  onColumnToggled: jest.fn(),
+};
+
+const createDataGridActions = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DataGridActions {...parameters} data-testid="dataGridActions" />);
+  const dataGridActions = queries.getByTestId('dataGridActions');
+
+  return {
+    ...queries,
+    dataGridActions,
+  };
+};
+
+describe('DataGridActions should render', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<DataGridActions {...defaultParams} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders all buttons', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+      enableColumnsBtn: true,
+      enableSearchBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(5);
+    expect(buttons[0]).toHaveTextContent('Add item');
+    expect(buttons[1]).toHaveTextContent('Columns');
+    expect(buttons[2]).toHaveTextContent('Show/hide columns');
+    expect(buttons[3]).toHaveTextContent('Search');
+    expect(buttons[4]).toHaveTextContent('Search');
+  });
+
+  it('renders only add button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveTextContent('Add item');
+  });
+
+  it('renders only columns button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableColumnsBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveTextContent('Columns');
+    expect(buttons[1]).toHaveTextContent('Show/hide columns');
+  });
+
+  it('renders only search button', () => {
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableSearchBtn: true,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const buttons = getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveTextContent('Search');
+    expect(buttons[1]).toHaveTextContent('Search');
+  });
+
+  it('renders buttons with overwritten props', () => {
+    const addBtnProps = { children: 'button1', title: 'title1' };
+    const columnsBtnProps = { children: 'button2', title: 'title2' };
+    const searchBtnProps = { children: 'button3', title: 'title3' };
+    const { dataGridActions, getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+      enableColumnsBtn: true,
+      enableSearchBtn: true,
+      addBtnProps,
+      columnsBtnProps,
+      searchBtnProps,
+    }));
+
+    expect(dataGridActions).toBeDefined();
+    const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
+      getAllByRole('button');
+    expect(addBtn).toHaveTextContent(addBtnProps.children);
+    expect(addBtn).toHaveAttribute('title', addBtnProps.title);
+    expect(desktopColumnsBtn).toHaveTextContent(columnsBtnProps.children);
+    expect(desktopColumnsBtn).toHaveAttribute('title', columnsBtnProps.title);
+    expect(mobileColumnsBtn).toHaveTextContent(columnsBtnProps.title);
+    expect(desktopSearchBtn).toHaveTextContent(searchBtnProps.children);
+    expect(desktopSearchBtn).toHaveAttribute('title', searchBtnProps.title);
+    expect(mobileSearchBtn).toHaveTextContent(searchBtnProps.title);
+  });
+});
+
+describe('DataGridActions should be interactive', () => {
+  it('clicking on columns button opens show/hide columns popover', async () => {
+    const toggleHeader = { name: 'test', headline: 'Label' };
+    const { getAllByRole, findByLabelText } = createDataGridActions((params) => ({
+      ...params,
+      enableColumnsBtn: true,
+      headers: [toggleHeader],
+    }));
+
+    userEvent.click(getAllByRole('button')[0]);
+
+    const toggle = await findByLabelText(toggleHeader.headline);
+    expect(toggle).toBeDefined();
+    expect(toggle).toBeChecked();
+
+    userEvent.click(toggle);
+    expect(defaultParams.onColumnToggled).toBeCalledWith(toggleHeader.name);
+  });
+
+  it('clicking on add button runs callback', () => {
+    const onClick = jest.fn();
+    const { getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableAddBtn: true,
+      addBtnProps: { onClick },
+    }));
+
+    userEvent.click(getAllByRole('button')[0]);
+
+    expect(onClick).toBeCalledTimes(1);
+  });
+
+  it('clicking on search button runs callback', () => {
+    const onClick = jest.fn();
+    const { getAllByRole } = createDataGridActions((params) => ({
+      ...params,
+      enableSearchBtn: true,
+      searchBtnProps: { onClick },
+    }));
+
+    userEvent.click(getAllByRole('button')[0]);
+
+    expect(onClick).toBeCalledTimes(1);
+  });
+});
+
+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 <DataGridActions {...defaultParams} data-ref="testing" enableAddBtn ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -0,0 +1,109 @@
+import React, { ComponentPropsWithRef, Fragment, useRef, useState } from 'react';
+import { Button, Props as ButtonProps } from '../../Button/Button';
+import { IconButton } from '../../Button/IconButton';
+import { Icon, Icons } from '../../Icon/Icon';
+import { HeaderCell, ColumnName } from '../datagrid.interfaces';
+import classes from './DataGridActions.module.scss';
+import { DataGridColumnsToggle } from './DataGridColumnsToggle';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  enableAddBtn?: boolean;
+  enableColumnsBtn?: boolean;
+  enableSearchBtn?: boolean;
+  addBtnProps?: ButtonProps;
+  columnsBtnProps?: ButtonProps;
+  searchBtnProps?: ButtonProps;
+  headers: HeaderCell[];
+  onColumnToggled: (colName: ColumnName) => void;
+}
+
+export const DataGridActions = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      className,
+      enableAddBtn,
+      enableColumnsBtn,
+      enableSearchBtn,
+      addBtnProps = {},
+      columnsBtnProps = {},
+      searchBtnProps = {},
+      headers,
+      onColumnToggled,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
+    const [showColsPopover, setShowColsPopover] = useState(false);
+    const showColumnBtn = useRef<HTMLButtonElement>(null);
+
+    return isHidden ? null : (
+      <div {...rest} ref={ref} className={`${classes['actions']} ${className ?? ''}`}>
+        <div className={classes['left-actions']}>
+          {enableAddBtn && (
+            <Button
+              color="primary"
+              startIcon={<Icon icon={Icons.Plus} />}
+              title="Add item"
+              type="button"
+              variant="outline"
+              children="Add item"
+              {...addBtnProps}
+            />
+          )}
+        </div>
+        <div className={classes['right-actions']}>
+          {enableColumnsBtn && (
+            <Fragment>
+              <Button
+                startIcon={<Icon icon={Icons.Change} />}
+                title="Show/hide columns"
+                variant="text"
+                children="Columns"
+                {...columnsBtnProps}
+                className={`${classes['desktop']} ${columnsBtnProps?.className ?? ''}`}
+                ref={showColumnBtn}
+                onClick={() => setShowColsPopover(true)}
+              />
+              <IconButton
+                title="Show/hide columns"
+                {...columnsBtnProps}
+                onClick={() => setShowColsPopover(true)}
+                className={`${classes['mobile']} ${columnsBtnProps?.className ?? ''}`}
+              >
+                <Icon icon={Icons.Change} />
+              </IconButton>
+              <DataGridColumnsToggle
+                aria-hidden={!showColsPopover}
+                open={showColsPopover}
+                headers={headers}
+                onClose={() => setShowColsPopover(false)}
+                onToggleClicked={onColumnToggled}
+                anchorEl={showColumnBtn}
+              />
+            </Fragment>
+          )}
+          {enableSearchBtn && (
+            <Fragment>
+              <Button
+                startIcon={<Icon icon={Icons.TableSearch} />}
+                title="Search"
+                variant="text"
+                children="Search"
+                {...searchBtnProps}
+                className={`${classes['desktop']} ${searchBtnProps?.className ?? ''}`}
+              />
+              <IconButton
+                title="Search"
+                {...searchBtnProps}
+                className={`${classes['mobile']} ${columnsBtnProps?.className ?? ''}`}
+              >
+                <Icon icon={Icons.TableSearch} />
+              </IconButton>
+            </Fragment>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss

@@ -0,0 +1,41 @@
+.popover {
+  background-color: var(--modal-background-color);
+  z-index: 1;
+  min-width: 17.5rem;
+}
+
+.backdrop {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: transparent;
+}
+
+.header {
+  min-width: 5rem;
+  padding: 1rem 0.5rem 1rem 1.5rem;
+  background-color: var(--modal-header-background-color);
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  flex: 1;
+  margin: 0;
+}
+
+.close-btn {
+  margin-left: 0.5rem;
+}
+
+.content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.test.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridColumnsToggle, Props } from './DataGridColumnsToggle';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  open: true,
+  headers: [
+    { headline: 'Name', name: 'name' },
+    { headline: 'Date', name: 'date', hidden: true },
+  ],
+  onClose: jest.fn(),
+  onToggleClicked: jest.fn(),
+};
+
+const createDataGridColumnsToggle = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <DataGridColumnsToggle {...parameters} data-testid="dataGridColumnsToggle" />
+  );
+  const dataGridColumnsToggle = queries.getByTestId('dataGridColumnsToggle');
+
+  return {
+    ...queries,
+    dataGridColumnsToggle,
+  };
+};
+
+describe('DataGridColumnsToggle should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridColumnsToggle, getByLabelText, getByText } = createDataGridColumnsToggle();
+
+    expect(dataGridColumnsToggle).toBeDefined();
+    expect(getByText('Show columns')).toBeDefined();
+    expect(getByLabelText(defaultParams.headers[0].headline)).toBeChecked();
+    expect(getByLabelText(defaultParams.headers[1].headline)).not.toBeChecked();
+  });
+});
+
+describe('DataGridColumnsToggle should be interactive', () => {
+  it('clicking on close calls onClose callback', () => {
+    const { getByRole } = createDataGridColumnsToggle();
+
+    userEvent.click(getByRole('button'));
+
+    expect(defaultParams.onClose).toBeCalledTimes(1);
+  });
+
+  it('clicking outside of container (on backdrop layer) calls onClose callback', () => {
+    createDataGridColumnsToggle();
+
+    userEvent.click(document.querySelector('.backdrop')!);
+
+    expect(defaultParams.onClose).toBeCalledTimes(1);
+  });
+});
+
+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 <DataGridColumnsToggle {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -0,0 +1,88 @@
+import React, { Fragment, useState } from 'react';
+import { IconButton } from '../../Button/IconButton';
+import { Toggle } from '../../Form/Toggle/Toggle';
+import { Icon, Icons } from '../../Icon/Icon';
+import { Popover, Props as PopoverProps } from '../../Popover/Popover';
+import { Typography } from '../../Typography/Typography';
+import { generateID } from '../../util/helper';
+import { ColumnName, HeaderCell } from '../datagrid.interfaces';
+import classes from './DataGridColumnsToggle.module.scss';
+import { createPortal } from 'react-dom';
+
+export interface Props extends PopoverProps {
+  open: boolean;
+  headers: HeaderCell[];
+  titleLabel?: string;
+  closeButtonTitle?: string;
+  onClose: () => void;
+  onToggleClicked: (colName: ColumnName) => void;
+  domRoot?: HTMLElement;
+}
+
+export const DataGridColumnsToggle = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      open,
+      headers,
+      titleLabel = 'Show columns',
+      closeButtonTitle = 'Close show columns dialog',
+      onClose,
+      onToggleClicked,
+      className,
+      domRoot = document.body,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [id] = useState(generateID());
+    const labelledId = id + '_header';
+
+    const toggles = headers.map((item) => (
+      <Toggle
+        key={item.name}
+        name={item.name}
+        checked={!item.hidden}
+        onChange={() => onToggleClicked(item.name)}
+      >
+        {item.headline}
+      </Toggle>
+    ));
+
+    const handleBackdropClick = () => onClose();
+
+    return (
+      <Popover
+        {...rest}
+        ref={ref}
+        className={`${classes['popover']} ${className}`}
+        show={open}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledId}
+      >
+        {open &&
+          createPortal(
+            <div className={classes['backdrop']} onClick={handleBackdropClick}></div>,
+            domRoot
+          )}
+        {open && (
+          <Fragment>
+            <div className={classes['header']}>
+              <Typography id={labelledId} className={classes['title']} tag="span" variant="h4">
+                {titleLabel}
+              </Typography>
+              <IconButton
+                onClick={onClose}
+                className={`${classes['close-btn']}`}
+                title={closeButtonTitle}
+              >
+                <Icon icon={Icons.Times} />
+              </IconButton>
+            </div>
+            <div className={classes['content']}>{toggles}</div>
+          </Fragment>
+        )}
+      </Popover>
+    );
+  }
+);

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

@@ -0,0 +1,10 @@
+.empty {
+  text-align: center;
+  height: 6rem;
+  padding: 2rem;
+  vertical-align: top;
+
+  p {
+    color: var(--greyed-out);
+  }
+}