@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.2

package/src/DataGrid/DataGridBody/DataGridBody.tsx

@@ -1,96 +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";
-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;
-  spacing?: React.CSSProperties;
-}
-
-const skeletonLoadingRows = 9;
-
-const DataGridBodyInner = <T extends {}>(
-  {
-    children,
-    data,
-    headers,
-    isLoading,
-    disableContextMenuColumn,
-    emptyLabel,
-    spacing,
-    ...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 }), {
-        headers,
-        spacing,
-        disableContextMenuColumn
-      });
-    });
-  };
-
-  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

@@ -1,49 +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 {
-  min-height: 3.5rem;
-  padding: 0.5rem 0.625rem;
-
-  &:first-child {
-    padding-left: 1rem;
-  }
-
-  &:last-child {
-    padding-right: 1rem;
-  }
-
-  .loading {
-    @include mixins.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.tsx

@@ -1,72 +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, ReactChild } from "react";
-import { Typography } from "../../Typography/Typography";
-import classes from "./DataGridCell.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"td"> {
-  children?: ReactChild;
-  isLoading?: boolean;
-  spacing?: React.CSSProperties;
-  cellIndex?: number;
-  columnLength?: number;
-  disableContextMenuColumn?: boolean;
-}
-
-const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
-  {
-    children,
-    className,
-    isLoading,
-    spacing,
-    cellIndex,
-    columnLength,
-    disableContextMenuColumn,
-    ...rest
-  }: Props,
-  ref
-) => {
-  let cellStyle: React.CSSProperties = {};
-
-  if (cellIndex === 0) {
-    cellStyle.paddingLeft = spacing?.paddingLeft;
-  }
-  if (
-    (cellIndex === columnLength && !disableContextMenuColumn) ||
-    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
-  ) {
-    cellStyle.paddingRight = spacing?.paddingRight;
-  }
-
-  return (
-    <td
-      {...rest}
-      ref={ref}
-      style={{ ...rest.style, ...cellStyle }}
-      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>
-  );
-};
-
-export const DataGridCell = React.forwardRef(DataGridCellComponent);

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

@@ -1,258 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataGridBody should render renders without crashing 1`] = `
-Array [
-  <tr
-    class="row"
-  >
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Paweł
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Napieracz
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        12.12.1990
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        <div
-          class="context-menu"
-        >
-          <button
-            aria-controls="consent_menu_Paweł-menu"
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="button  icon-button text default button-m"
-            id="consent_menu_Paweł"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="icon icon-ellipsis-alt "
-              data-icon="true"
-            />
-            <span
-              class="sr-only"
-            >
-              Actions for Paweł
-            </span>
-          </button>
-        </div>
-      </span>
-    </td>
-  </tr>,
-  <tr
-    class="row"
-  >
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Michał
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Górski
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        12.12.1994
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        <div
-          class="context-menu"
-        >
-          <button
-            aria-controls="consent_menu_Michał-menu"
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="button  icon-button text default button-m"
-            id="consent_menu_Michał"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="icon icon-ellipsis-alt "
-              data-icon="true"
-            />
-            <span
-              class="sr-only"
-            >
-              Actions for Michał
-            </span>
-          </button>
-        </div>
-      </span>
-    </td>
-  </tr>,
-  <tr
-    class="row"
-  >
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Daniel
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Velden
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        12.12.199x
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        <div
-          class="context-menu"
-        >
-          <button
-            aria-controls="consent_menu_Daniel-menu"
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="button  icon-button text default button-m"
-            id="consent_menu_Daniel"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="icon icon-ellipsis-alt "
-              data-icon="true"
-            />
-            <span
-              class="sr-only"
-            >
-              Actions for Daniel
-            </span>
-          </button>
-        </div>
-      </span>
-    </td>
-  </tr>,
-  <tr
-    class="row"
-  >
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Jasha
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        Joachimsthal
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        12.12.198x
-      </span>
-    </td>
-    <td
-      class="cell "
-    >
-      <span
-        class="typography_style_body "
-      >
-        <div
-          class="context-menu"
-        >
-          <button
-            aria-controls="consent_menu_Jasha-menu"
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="button  icon-button text default button-m"
-            id="consent_menu_Jasha"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="icon icon-ellipsis-alt "
-              data-icon="true"
-            />
-            <span
-              class="sr-only"
-            >
-              Actions for Jasha
-            </span>
-          </button>
-        </div>
-      </span>
-    </td>
-  </tr>,
-]
-`;