@onewelcome/react-lib-components 9.8.0 → 10.0.0

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

@@ -1,110 +0,0 @@
-/*
- * 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

@@ -1,61 +0,0 @@
-/*!
- * 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

@@ -1,131 +0,0 @@
-/*
- * 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

@@ -1,60 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-/*
- * 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

@@ -1,21 +0,0 @@
-.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

@@ -1,47 +0,0 @@
-/*
- * 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

@@ -1,127 +0,0 @@
-/*!
- * 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 "src/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);
-    }
-  }
-}