@onewelcome/react-lib-components 0.1.7-alpha → 0.1.10-alpha

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);
+  }
+}

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 });
+  });
+});