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

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

@@ -0,0 +1,110 @@
+/*
+ * 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, ReactElement, Ref } from "react";
+import { HeaderCell } from "../datagrid.interfaces";
+import { DataGridCell } from "./DataGridCell/DataGridCell";
+import { DataGridRow } from "./DataGridRow/DataGridRow";
+import classes from "./DataGridBody.module.scss";
+import { Typography } from "../../Typography/Typography";
+
+export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children"> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  nestedRowConfig?: {
+    nestedItemsKey?: keyof T;
+  };
+  headers: HeaderCell[];
+  isLoading?: boolean;
+  disableContextMenuColumn?: boolean;
+  searchValue?: string;
+  emptyLabel?: string;
+  spacing?: React.CSSProperties;
+}
+
+const skeletonLoadingRows = 9;
+
+const DataGridBodyInner = <T extends object>(
+  {
+    children,
+    data,
+    headers,
+    nestedRowConfig,
+    isLoading,
+    disableContextMenuColumn,
+    emptyLabel,
+    spacing,
+    searchValue,
+    ...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) => {
+      return React.cloneElement(children({ item, index }), {
+        searchValue: searchValue,
+        headers,
+        spacing,
+        item,
+        disableContextMenuColumn,
+        nestedRowProps: {
+          rowTemplate: children,
+          enableNestedRow: !!nestedRowConfig,
+          nestedItemsKey: nestedRowConfig?.nestedItemsKey,
+          isLastChild: index + 1 === data.length
+        }
+      });
+    });
+  };
+
+  return (
+    <tbody {...rest} ref={ref}>
+      {renderContent()}
+    </tbody>
+  );
+};
+
+export const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends object>(
+  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }
+) => ReactElement;

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

@@ -0,0 +1,61 @@
+/*!
+ * 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.
+ */
+
+@use "../../../../mixins.module.scss";
+
+.cell {
+  height: 2.625rem;
+  padding: 0.25rem 1rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  .content-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .text {
+    font-size: var(--font-size-data-grid);
+    line-height: var(--data-grid-line-height);
+  }
+
+  .loading {
+    border-radius: 0.5rem;
+    height: 1.25rem;
+    margin: 0.625rem 0;
+
+    @include mixins.skeletonLoading();
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+/*
+ * 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,
+  ComponentPropsWithRef,
+  ReactElement,
+  Fragment
+} from "react";
+import { Typography } from "../../../Typography/Typography";
+import classes from "./DataGridCell.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"td"> {
+  children?: ReactElement | string | number;
+  prefixElement?: ReactElement;
+  isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  searchValue?: string;
+  cellIndex?: number;
+  columnLength?: number;
+  disableContextMenuColumn?: boolean;
+}
+
+const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
+  {
+    children,
+    className,
+    isLoading,
+    spacing,
+    prefixElement,
+    searchValue,
+    cellIndex,
+    columnLength,
+    disableContextMenuColumn,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const cellStyle: React.CSSProperties = {};
+
+  if (cellIndex === 0) {
+    cellStyle.paddingLeft = spacing?.paddingLeft;
+  }
+  if (
+    (cellIndex === columnLength && !disableContextMenuColumn) ||
+    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
+  ) {
+    cellStyle.paddingRight = spacing?.paddingRight;
+  }
+
+  //NOTE: we might want to migrate to Highlight API once it's supported by Firefox
+  const renderContent = () => {
+    if (typeof children === "string" && searchValue) {
+      if (!children.toLowerCase().includes(searchValue.toLowerCase())) {
+        return children;
+      }
+
+      const matchingSequence = new RegExp(searchValue, "i").exec(children);
+
+      const parts = children.split(matchingSequence?.[0] ?? "");
+      return parts.map((part, i) => {
+        if (i === parts.length - 1) {
+          return <Fragment key={`${part}-${i}`}>{part}</Fragment>;
+        }
+
+        return (
+          <Fragment key={`${part}-${i}`}>
+            {part}
+            <mark data-testid={`${matchingSequence}-mark`}>{matchingSequence}</mark>
+          </Fragment>
+        );
+      });
+    }
+
+    return children;
+  };
+
+  return (
+    <td
+      {...rest}
+      ref={ref}
+      style={{ ...rest.style, ...cellStyle }}
+      className={`${classes["cell"]} ${className ?? ""}`}
+    >
+      {prefixElement ? (
+        <div className={classes["content-wrapper"]}>
+          {prefixElement}
+          {isLoading && (
+            <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
+          )}
+          {!isLoading && (
+            <Typography
+              className={classes["text"]}
+              variant="body"
+              tag="span"
+              spacing={{ marginBottom: 0 }}
+            >
+              {renderContent()}
+            </Typography>
+          )}
+        </div>
+      ) : (
+        <>
+          {isLoading && (
+            <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
+          )}
+          {!isLoading && (
+            <Typography className={classes["text"]} variant="body" tag="span">
+              {renderContent()}
+            </Typography>
+          )}
+        </>
+      )}
+    </td>
+  );
+};
+
+export const DataGridCell = React.forwardRef(DataGridCellComponent);

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/DataGridRow.module.scss

@@ -0,0 +1,127 @@
+/*!
+ * 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.
+ */
+@use "../../dataGridMixins.module";
+@use "../../../../functions" as *;
+
+$nesting-limit: 6;
+
+.row {
+  position: relative;
+  background-color: var(--data-grid-row-background-color);
+
+  &:not(.loading):hover {
+    background-color: var(--data-grid-row-hover-background-color);
+  }
+
+  @mixin border-x {
+    @for $i from 0 through $nesting-limit {
+      &.border-#{$i} {
+        &::after {
+          @include dataGridMixins.borderAfter($i);
+        }
+      }
+    }
+  }
+
+  @include border-x();
+
+  &.border {
+    &::after {
+      @include dataGridMixins.borderAfter(0, true);
+    }
+  }
+
+  &.border-drawer {
+    &:not(:nth-last-child(2))::after {
+      @include dataGridMixins.borderAfter(0, true);
+    }
+  }
+}
+
+.expand-button-cell {
+  padding: 0;
+}
+
+@mixin offset-left {
+  @for $i from 0 through $nesting-limit {
+    &.offset-left-#{$i} {
+      left: $i * 4.125rem;
+    }
+  }
+}
+
+.connector {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.875rem;
+  height: relativeToBaseFontSize(3.25);
+
+  @include offset-left();
+
+  &.vertical {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: 100%;
+      width: 0.0625rem;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+
+  &.t-shape {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: relativeToBaseFontSize(3.25);
+      width: 0.0625rem;
+      background-color: var(--color-blue-grey200);
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      top: 50%;
+      left: 50%;
+      height: 0.0625rem;
+      width: 100%;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+
+  &.line {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: 50%;
+      width: 1px;
+      background-color: var(--color-blue-grey200);
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      top: 50%;
+      left: 50%;
+      height: 1px;
+      width: 100%;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+}