@onewelcome/react-lib-components 6.7.0 → 7.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.7.0",
+  "version": "7.0.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -52,54 +52,54 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^1.6.0",
     "@mdx-js/react": "^3.0.1",
-    "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
-    "@onewelcome/storybook-addon-basestyling": "^1.0.2",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
+    "@onewelcome/storybook-addon-basestyling": "^2.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.17",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-docs": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/components": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
+    "@storybook/theming": "^8.1.11",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/mdx": "^2.0.12",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.23",
+    "@types/mdx": "^2.0.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "babel-loader": "^9.1.3",
-    "chromatic": "^11.2.0",
+    "chromatic": "^11.5.4",
     "css-loader": "^6.10.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-export-scope": "^2.3.0",
+    "eslint-plugin-export-scope": "^2.4.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-license-header": "^0.6.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
@@ -107,29 +107,30 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.2.2",
-    "mini-css-extract-plugin": "^2.8.1",
+    "lint-staged": "^15.2.7",
+    "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "react-router-dom": "^6.22.3",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "react-router-dom": "^6.24.0",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.72.0",
-    "sass-loader": "^14.1.1",
-    "size-limit": "^11.1.2",
-    "storybook": "^7.6.17",
-    "storybook-addon-pseudo-states": "^2.2.1",
-    "style-loader": "^3.3.4",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.3"
+    "sass": "^1.77.6",
+    "sass-loader": "^14.2.1",
+    "size-limit": "^11.1.4",
+    "storybook": "^8.1.11",
+    "storybook-addon-mock": "^5.0.0",
+    "storybook-addon-pseudo-states": "^3.1.1",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.2"
   }
 }

package/src/components/DataGrid/DataGrid.tsx

@@ -23,6 +23,7 @@ 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";
 
 export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
@@ -42,6 +43,11 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
   emptyLabel?: string;
   paginationProps?: PaginationProps;
   disableContextMenuColumn?: boolean;
+  enableExpandableRow?: boolean;
+  filters?: {
+    enable: boolean;
+    filtersProps: DataGridToolbarProps;
+  };
   isLoading?: boolean;
   enableMultiSorting?: boolean;
   spacing?: Spacing;
@@ -57,6 +63,8 @@ const DataGridInner = <T extends {}>(
     actions = {},
     paginationProps,
     disableContextMenuColumn,
+    enableExpandableRow,
+    filters,
     isLoading,
     enableMultiSorting,
     emptyLabel,
@@ -70,7 +78,7 @@ const DataGridInner = <T extends {}>(
     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");
+    throw new Error("DataGridBody should be provided with a template how to render rows");
   }
 
   const [internalHeaders, setInternalHeaders] = useState(headers);
@@ -124,15 +132,20 @@ const DataGridInner = <T extends {}>(
         paddingBottom: styleWithSpacing?.paddingBottom
       }}
     >
-      <DataGridActions
-        {...actions}
-        style={{
-          paddingLeft: styleWithSpacing?.paddingLeft,
-          paddingRight: styleWithSpacing?.paddingRight
-        }}
-        headers={internalHeaders}
-        onColumnToggled={onColumnToggled}
-      />
+      {filters?.enable ? (
+        <DataGridToolbar {...filters.filtersProps} />
+      ) : (
+        <DataGridActions
+          {...actions}
+          style={{
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight
+          }}
+          headers={internalHeaders}
+          onColumnToggled={onColumnToggled}
+        />
+      )}
+
       <div className={classes["table-wrapper"]}>
         <table className={classes["table"]}>
           <DataGridHeader
@@ -140,6 +153,7 @@ const DataGridInner = <T extends {}>(
             initialSort={initialSort}
             onSort={onSort}
             disableContextMenuColumn={disableContextMenuColumn}
+            enableExpandableRow={enableExpandableRow}
             enableMultiSorting={enableMultiSorting}
             spacing={styleWithSpacing}
           />

package/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -16,8 +16,8 @@
 
 import React, { ComponentPropsWithRef, ReactElement, Ref } from "react";
 import { HeaderCell } from "../datagrid.interfaces";
-import { DataGridCell } from "./DataGridCell";
-import { DataGridRow } from "./DataGridRow";
+import { DataGridCell } from "./DataGridCell/DataGridCell";
+import { DataGridRow } from "./DataGridRow/DataGridRow";
 import classes from "./DataGridBody.module.scss";
 import { Typography } from "../../Typography/Typography";
 

package/src/components/DataGrid/DataGridBody/{DataGridCell.module.scss → DataGridCell/DataGridCell.module.scss}

@@ -14,10 +14,10 @@
  *    limitations under the License.
  */
 
-@use "../../../mixins.module.scss";
+@use "../../../../mixins.module.scss";
 
 .cell {
-  min-height: 3rem;
+  height: 2.75rem;
   padding: 0.25rem 1rem;
 
   &:first-child {

package/src/components/DataGrid/DataGridBody/{DataGridCell.tsx → DataGridCell/DataGridCell.tsx}

@@ -15,7 +15,7 @@
  */
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
-import { Typography } from "../../Typography/Typography";
+import { Typography } from "../../../Typography/Typography";
 import classes from "./DataGridCell.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"td"> {

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

@@ -0,0 +1,60 @@
+.drawer {
+  display: grid;
+  grid-template-rows: 0fr;
+  gap: 0.5rem;
+  transition: grid-template-rows 200ms;
+
+  & > div > * {
+    padding-left: 4.75rem;
+    padding-right: 1.5rem;
+  }
+
+  & > div > *:first-child {
+    padding-top: 1rem;
+  }
+
+  & > div > *:last-child {
+    padding-bottom: 1.5rem;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &.expanded {
+    grid-template-rows: 1fr;
+    $maxElements: 100;
+
+    @for $i from 1 to $maxElements {
+      & > div > :nth-child(#{$i}) {
+        opacity: 0;
+        animation-name: item-fade-in;
+        animation-duration: 250ms;
+        animation-fill-mode: forwards;
+        animation-delay: (100ms * ($i - 1));
+      }
+    }
+  }
+
+  @keyframes item-fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-60px);
+    }
+
+    80% {
+      opacity: 0.6;
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+
+  & > * {
+    overflow: hidden;
+  }
+}

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawer.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 } from "react";
+import classes from "./DataGridDrawer.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  isExpanded: boolean;
+}
+
+const DataGridDrawerComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, isExpanded, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={`${classes["drawer"]} ${isExpanded ? classes["expanded"] : ""}`}
+    >
+      <div className={classes["wrapper"]}>{children}</div>
+    </div>
+  );
+};
+
+export const DataGridDrawer = React.forwardRef(DataGridDrawerComponent);

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

@@ -0,0 +1,21 @@
+.item-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.item-title {
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  font-weight: 700;
+  margin: 0;
+}
+
+.item-description {
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  margin: 0;
+}
+
+.children-wrapper {
+  margin-top: 0.5rem;
+}

package/src/components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 } from "react";
+import classes from "./DataGridDrawerItem.module.scss";
+import { Typography } from "../../../Typography/Typography";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  title?: string;
+  description?: string;
+}
+
+const DataGridDrawerItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, title, description, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={classes["item-wrapper"]}>
+      {title && (
+        <Typography className={classes["item-title"]} variant="body" tag="span">
+          {title}
+        </Typography>
+      )}
+      {description && (
+        <Typography className={classes["item-description"]} variant="body" tag="span">
+          {description}
+        </Typography>
+      )}
+      {children && <div className={classes["children-wrapper"]}> {children}</div>}
+    </div>
+  );
+};
+
+export const DataGridDrawerItem = React.forwardRef(DataGridDrawerItemComponent);

package/src/components/DataGrid/DataGridBody/{DataGridRow.module.scss → DataGridRow/DataGridRow.module.scss}

@@ -22,7 +22,7 @@
     background-color: var(--data-grid-row-hover-background-color);
   }
 
-  &:not(:last-child)::after {
+  @mixin borderAfter {
     content: "";
     position: absolute;
     width: 100%;
@@ -30,4 +30,20 @@
     bottom: 0;
     border-bottom: 1px solid var(--light-grey-border);
   }
+
+  &.border {
+    &:not(:last-child)::after {
+      @include borderAfter();
+    }
+  }
+
+  &.border-drawer {
+    &:not(:last-child):not(:nth-last-child(2))::after {
+      @include borderAfter();
+    }
+  }
+}
+
+.expand-button-cell {
+  padding: 0;
 }

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

@@ -0,0 +1,122 @@
+/*
+ * 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, useState, Fragment, ForwardRefRenderFunction } from "react";
+import { HeaderCell } from "../../datagrid.interfaces";
+import classes from "./DataGridRow.module.scss";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { DataGridCell } from "../DataGridCell/DataGridCell";
+import { DataGridDrawer } from "../DataGridDrawer/DataGridDrawer";
+import { generateID } from "../../../../util/helper";
+
+export interface Props extends ComponentPropsWithRef<"tr"> {
+  headers?: HeaderCell[];
+  isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  disableContextMenuColumn?: boolean;
+  expandableRowProps?: {
+    enableExpandableRow: boolean;
+    expandableRowContent: React.ReactNode;
+    expandButtonTitle?: string;
+    expandButtonId?: string;
+    drawerId?: string;
+  };
+}
+
+const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
+  {
+    children,
+    className,
+    headers,
+    isLoading,
+    spacing,
+    expandableRowProps,
+    disableContextMenuColumn,
+    ...rest
+  },
+  ref
+) => {
+  const {
+    enableExpandableRow = false,
+    expandButtonId = `ID-${generateID()}`,
+    expandButtonTitle = "Expand row",
+    drawerId = `ID-${generateID()}`,
+    expandableRowContent
+  } = expandableRowProps || {};
+  const [isRowExpanded, setIsRowExpanded] = useState(false);
+  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+    if (child) {
+      const cellWithSpacing = React.cloneElement(child, {
+        spacing: spacing,
+        cellIndex: index,
+        columnLength: headers?.length,
+        disableContextMenuColumn
+      });
+
+      const visible = headers && headers.length > index ? !headers[index].hidden : true;
+      return visible && cellWithSpacing;
+    }
+    return null;
+  });
+
+  const classNames = [classes["row"]];
+  className && classNames.push(className);
+  enableExpandableRow
+    ? !isRowExpanded && classNames.push(classes["border-drawer"])
+    : classNames.push(classes["border"]);
+  isLoading && classNames.push(classes["loading"]);
+
+  return (
+    <Fragment>
+      <tr {...rest} ref={ref} className={classNames.join(" ")}>
+        {enableExpandableRow && (
+          <DataGridCell
+            className={classes["expand-button-cell"]}
+            onClick={() => setIsRowExpanded(!isRowExpanded)}
+            style={{ width: "1px" }}
+          >
+            <IconButton
+              id={expandButtonId}
+              title={expandButtonTitle}
+              aria-expanded={isRowExpanded}
+              aria-controls={drawerId}
+            >
+              <Icon size="0.75rem" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />
+            </IconButton>
+          </DataGridCell>
+        )}
+        {visibleCells}
+      </tr>
+      {enableExpandableRow && (
+        <tr className={`${classes["row"]} ${isRowExpanded ? classes["border-drawer"] : ""}`}>
+          <td colSpan={visibleCells.length + 1}>
+            <DataGridDrawer
+              id={drawerId}
+              role="region"
+              aria-labelledby={expandButtonId}
+              isExpanded={isRowExpanded}
+            >
+              {expandableRowContent}
+            </DataGridDrawer>
+          </td>
+        </tr>
+      )}
+    </Fragment>
+  );
+};
+
+export const DataGridRow = React.forwardRef(DataGridRowComponent);

package/src/components/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`DataGridBody should render renders without crashing 1`] = `
 [
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -67,7 +67,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -131,7 +131,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "
@@ -195,7 +195,7 @@ exports[`DataGridBody should render renders without crashing 1`] = `
     </td>
   </tr>,
   <tr
-    class="row"
+    class="row border"
   >
     <td
       class="cell "