@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/DataGrid/DataGrid.module.scss

@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.grid-wrapper {
+  padding: 0.875rem 0;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden; // hides additional vertical scroll which can be seen when using nested rows
+}
+
+.table {
+  border-collapse: collapse;
+  padding-top: 0.5rem;
+  width: 100%;
+  position: relative;
+}
+
+.pagination {
+  margin-top: 0.875rem;
+  padding: 0 1rem;
+}
+
+.action-button {
+  display: flex;
+  margin-top: 2rem;
+
+  & button {
+    margin-right: 1rem;
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .pagination {
+    padding: 0 1.25rem;
+  }
+}

package/src/components/DataGrid/DataGrid.tsx

@@ -0,0 +1,225 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ComponentPropsWithRef,
+  Fragment,
+  ReactElement,
+  Ref,
+  useEffect,
+  useState
+} from "react";
+import { Button, 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 { HeaderCell, OnSortFunction, Sort } from "./datagrid.interfaces";
+import { Pagination, Props as PaginationProps } from "../Pagination/Pagination";
+import { Spacing, useSpacing } from "../../hooks/useSpacing";
+import { DataGridToolbar, DataGridToolbarProps } from "./DataGridFilters/DataGridToolbar";
+import { DataGridToolbarWrapper } from "./DataGridFilters/DataGridToolbarWrapper";
+import { DataGridSearchbar, DataGridSearchbarProps } from "./DataGridFilters/DataGridSearchbar";
+
+export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  headers: HeaderCell[];
+  /**
+   * @deprecated use the `toolbarButtons` prop instead
+   */
+  actions?: {
+    enableAddBtn?: boolean;
+    enableColumnsBtn?: boolean;
+    enableSearchBtn?: boolean;
+    addBtnProps?: ButtonProps;
+    columnsBtnProps?: ButtonProps;
+    searchBtnProps?: ButtonProps;
+    searchIconBtnProps?: ButtonProps;
+  };
+  nestedRowConfig?: {
+    nestedItemsKey?: keyof T;
+  };
+  emptyLabel?: string;
+  paginationProps?: PaginationProps;
+  disableContextMenuColumn?: boolean;
+  enableExpandableRow?: boolean;
+  filters?: DataGridToolbarProps;
+  search?: DataGridSearchbarProps;
+  toolbarButtons?:
+    | ReactElement<ButtonProps, typeof Button>
+    | ReactElement<ButtonProps, typeof Button>[];
+  isLoading?: boolean;
+  enableMultiSorting?: boolean;
+  spacing?: Spacing;
+  inlineEditingActionButtons?: ReactElement | ReactElement[];
+}
+
+const DataGridInner = <T extends object>(
+  {
+    children,
+    data,
+    initialSort,
+    onSort,
+    headers,
+    actions = {},
+    paginationProps,
+    nestedRowConfig,
+    disableContextMenuColumn,
+    enableExpandableRow,
+    filters,
+    search,
+    toolbarButtons,
+    isLoading,
+    enableMultiSorting,
+    emptyLabel,
+    spacing,
+    style,
+    inlineEditingActionButtons,
+    ...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 provided with a template how to render rows");
+  }
+
+  const [internalHeaders, setInternalHeaders] = useState(headers);
+  const styleWithSpacing = useSpacing(spacing, style);
+
+  useEffect(() => setInternalHeaders(headers), [headers]);
+
+  const onColumnToggled = (colName: string) => {
+    setInternalHeaders(
+      internalHeaders.map(item =>
+        item.name !== colName ? item : { ...item, hidden: !item.hidden }
+      )
+    );
+  };
+
+  if (styleWithSpacing?.padding) {
+    const splitPaddings = styleWithSpacing.padding.toString().split(" ");
+
+    let paddingLeftIndex: number = 0;
+
+    if (splitPaddings.length >= 2) {
+      paddingLeftIndex = 1;
+    }
+    if (splitPaddings.length === 4) {
+      paddingLeftIndex = 3;
+    }
+
+    Object.defineProperties(styleWithSpacing, {
+      paddingTop: {
+        value: splitPaddings[0]
+      },
+      paddingRight: {
+        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]
+      },
+      paddingBottom: {
+        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]
+      },
+      paddingLeft: {
+        value: splitPaddings[paddingLeftIndex]
+      }
+    });
+  }
+
+  return (
+    <div
+      {...rest}
+      className={classes["grid-wrapper"]}
+      ref={ref}
+      style={{
+        paddingTop: styleWithSpacing?.paddingTop,
+        paddingBottom: styleWithSpacing?.paddingBottom
+      }}
+    >
+      {filters || search || toolbarButtons ? (
+        <DataGridToolbarWrapper
+          filters={
+            <Fragment>
+              {search && <DataGridSearchbar {...search} />}
+              {filters && <DataGridToolbar {...filters} />}
+            </Fragment>
+          }
+          buttons={toolbarButtons}
+        />
+      ) : (
+        <DataGridActions
+          {...actions}
+          style={{
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight
+          }}
+          headers={internalHeaders}
+          onColumnToggled={onColumnToggled}
+        />
+      )}
+
+      <div className={classes["table-wrapper"]}>
+        <table className={classes["table"]}>
+          <DataGridHeader
+            headers={internalHeaders}
+            initialSort={initialSort}
+            onSort={onSort}
+            disableContextMenuColumn={disableContextMenuColumn}
+            enableExpandableRow={enableExpandableRow}
+            enableNestedRows={!!nestedRowConfig}
+            enableMultiSorting={enableMultiSorting}
+            spacing={styleWithSpacing}
+          />
+          <DataGridBody
+            data={data}
+            headers={internalHeaders}
+            isLoading={isLoading}
+            disableContextMenuColumn={disableContextMenuColumn}
+            nestedRowConfig={nestedRowConfig}
+            emptyLabel={emptyLabel}
+            spacing={styleWithSpacing}
+            searchValue={search?.initialSearchValue}
+          >
+            {children}
+          </DataGridBody>
+        </table>
+      </div>
+      {paginationProps && !isLoading && (
+        <Pagination
+          {...paginationProps}
+          style={{
+            ...paginationProps.style,
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight
+          }}
+          className={`${classes["pagination"]} ${paginationProps.className ?? ""}`}
+        />
+      )}
+
+      {inlineEditingActionButtons && (
+        <div className={`${classes["action-button"]}`}>{inlineEditingActionButtons}</div>
+      )}
+    </div>
+  );
+};
+
+export const DataGrid = React.forwardRef(DataGridInner) as <T extends object>(
+  p: Props<T> & { ref?: Ref<HTMLDivElement> }
+) => ReactElement;

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

@@ -0,0 +1,51 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.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: flex;
+  }
+
+  .mobile {
+    display: none;
+  }
+}

package/src/components/DataGrid/DataGridActions/DataGridActions.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ComponentPropsWithRef,
+  ForwardRefRenderFunction,
+  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 } 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;
+  searchIconBtnProps?: ButtonProps;
+  headers: HeaderCell[];
+  onColumnToggled: (colName: string) => void;
+}
+
+const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    className,
+    enableAddBtn,
+    enableColumnsBtn,
+    enableSearchBtn,
+    addBtnProps = {},
+    columnsBtnProps = {},
+    searchBtnProps = {},
+    searchIconBtnProps = {},
+    headers,
+    onColumnToggled,
+    children,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
+  const [showColsPopover, setShowColsPopover] = useState(false);
+  const showColumnBtn = useRef<HTMLButtonElement>(null);
+  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
+  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
+  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
+
+  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"
+            {...restAddBtnProps}
+          >
+            {addBtnChildren ?? "Add item"}
+          </Button>
+        )}
+      </div>
+      <div className={classes["right-actions"]}>
+        {enableColumnsBtn && (
+          <Fragment>
+            <Button
+              startIcon={<Icon icon={Icons.Change} />}
+              title="Show/hide columns"
+              variant="text"
+              {...restColumnsBtnProps}
+              className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
+              ref={showColumnBtn}
+              onClick={() => setShowColsPopover(true)}
+            >
+              {columnsBtnChildren ?? "Columns"}
+            </Button>
+            <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"
+              {...restSearchBtnProps}
+              className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
+            >
+              {searchBtnChildren ?? "Search"}
+            </Button>
+            <IconButton
+              title="Search"
+              {...searchIconBtnProps}
+              className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
+            >
+              <Icon icon={Icons.TableSearch} />
+            </IconButton>
+          </Fragment>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const DataGridActions = React.forwardRef(DataGridActionsComponent);

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

@@ -0,0 +1,58 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.popover {
+  background-color: var(--modal-background-color);
+  z-index: 1;
+  min-width: 17.5rem;
+  font-family: var(--font-family);
+}
+
+.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/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, 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 { 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: string) => void;
+  domRoot?: HTMLElement;
+}
+
+const DataGridColumnsToggleComponent: ForwardRefRenderFunction<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)}
+      label={item.headline}
+    />
+  ));
+
+  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
+            aria-hidden="true"
+            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>
+  );
+};
+
+export const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);

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

@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.empty {
+  text-align: center;
+  height: 6rem;
+  padding: 2rem;
+  vertical-align: top;
+
+  p {
+    color: var(--greyed-out);
+  }
+}