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

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

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