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

package/src/components/DataGrid/DataGridFilters/DateTimePicker/SideMenu.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 from "react";
+import classes from "./DateTimePicker.module.scss";
+import contextMenuItemClasses from "../../../ContextMenu/ContextMenuItem.module.scss";
+import { SideMenuItem } from "./DateTimePicker";
+import { DateTimeFilterType } from "../DataGridFilters.interfaces";
+
+type Props = {
+  sideMenuItems: SideMenuItem[];
+  selectedItemId: string;
+  onItemSelect: (id: DateTimeFilterType) => void;
+};
+
+export const SideMenu = ({ sideMenuItems, selectedItemId, onItemSelect }: Props) => {
+  return (
+    <ul className={classes["aside-menu"]}>
+      {sideMenuItems.map(item => (
+        <li
+          key={item.id}
+          role="none"
+          className={`${contextMenuItemClasses["context-menu-item"]} ${classes["aside-menu-item"]}`}
+        >
+          <button
+            role="menuitem"
+            style={{ height: "2rem" }}
+            className={selectedItemId === item.id ? contextMenuItemClasses["active"] : undefined}
+            onClick={() => onItemSelect(item.id)}
+          >
+            {item.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/src/components/DataGrid/DataGridFilters/FilterKeyMapper.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 { KeyValuePair } from "./DataGridFilters.interfaces";
+
+export class FilterKeyMapper {
+  columnKvPairs = new Map<string, { key: string; value: string }[]>();
+
+  setColumnKvPairs(columnName: string, kvPairs: { key: string; value: string }[]) {
+    this.columnKvPairs.set(columnName, kvPairs);
+  }
+
+  getValues(columnName: string): string[] {
+    return this.getKvPairs(columnName).map(kv => kv.value);
+  }
+
+  getKeysForValues(columnName: string, values: string[]): string[] {
+    const kvPairs = this.getKvPairs(columnName);
+    return values.map(v => {
+      const kv = kvPairs?.find(kv => kv.value === v);
+      if (kv == undefined) {
+        throw new Error(`Column '${columnName}' in FilterKeyMapper does not contain value '${v}'`);
+      }
+      return kv.key;
+    });
+  }
+
+  getKvPairs(columnName: string): KeyValuePair[] {
+    const kvPairs = this.columnKvPairs.get(columnName);
+    if (kvPairs == undefined) {
+      throw new Error(`Column '${columnName}' not found in ${FilterKeyMapper.name}`);
+    }
+    return kvPairs;
+  }
+}

package/src/components/DataGrid/DataGridFilters/useFiltersReducer.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 { useReducer } from "react";
+import { Filter, FiltersAction, FiltersState } from "./DataGridFilters.interfaces";
+
+export const useFiltersReducer = (filterValues: Filter[] | undefined) => {
+  const filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {
+    switch (action.type) {
+      case "add":
+        return { ...state, filters: [...state.filters, { ...action.payload }] };
+      case "edit":
+        return {
+          ...state,
+          filters: [
+            ...state.filters.map(value => {
+              if (value.id === action.payload.id) {
+                return action.payload;
+              }
+              return value;
+            })
+          ]
+        };
+      case "remove":
+        return {
+          ...state,
+          filters: [...state.filters.filter(value => value.id !== action.payload.id)]
+        };
+      case "reset":
+        return {
+          ...state,
+          filters: action.payload
+        };
+      case "clear":
+        return { ...state, filters: [] };
+    }
+  };
+
+  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
+
+  const addFilter = (filter: Filter) =>
+    dispatch({
+      type: "add",
+      payload: filter
+    });
+
+  const editFilter = (filter: Filter) =>
+    dispatch({
+      type: "edit",
+      payload: filter
+    });
+
+  const deleteFilter = (id: string) => dispatch({ type: "remove", payload: { id } });
+
+  const resetFilters = (filters: Filter[]) => dispatch({ type: "reset", payload: filters });
+
+  const clearFilters = () => dispatch({ type: "clear" });
+
+  return { state, addFilter, deleteFilter, editFilter, resetFilters, clearFilters };
+};

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

@@ -0,0 +1,32 @@
+/*!
+ * 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";
+
+.row {
+  height: 3.25rem;
+  background-color: var(--color-blue-grey25);
+  position: relative;
+  border-top: 2px solid var(--light-grey-border);
+
+  &::after {
+    @include dataGridMixins.borderAfter(0, true);
+  }
+}
+
+.context-menu {
+  width: 4.125rem;
+  box-sizing: border-box;
+}

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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, useEffect, useState } from "react";
+import { Direction, HeaderCell, OnSortFunction, Sort } from "../datagrid.interfaces";
+import { DataGridHeaderCell } from "./DataGridHeaderCell";
+import classes from "./DataGridHeader.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"thead"> {
+  headers: HeaderCell[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  enableExpandableRow?: boolean;
+  enableNestedRows?: boolean;
+  disableContextMenuColumn?: boolean;
+  enableMultiSorting?: boolean;
+  spacing?: React.CSSProperties;
+}
+
+const sortingStates = [undefined, "ASC", "DESC"] as (Direction | undefined)[];
+
+const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (
+  {
+    initialSort,
+    onSort,
+    headers,
+    disableContextMenuColumn,
+    enableExpandableRow,
+    enableNestedRows,
+    enableMultiSorting,
+    spacing,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [sortList, setSortList] = useState(initialSort ?? []);
+
+  useEffect(() => {
+    setSortList(initialSort ?? []);
+  }, [initialSort]);
+
+  const calculateNextSortState = (direction?: Direction) => {
+    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
+    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
+  };
+
+  /**
+   * The sortList contains sorting columns objects. The order of those objects determines priorities of sorting.
+   * Last modified sorting column has the highest priority.
+   */
+  const updateSortList = (name: string): Sort => {
+    const current = sortList.find(item => item.name === name);
+    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
+    const newSortDirection = calculateNextSortState(current?.direction);
+    return newSortDirection
+      ? [{ name, direction: newSortDirection }, ...restSortList]
+      : restSortList;
+  };
+
+  const wrapOnSort = (name: string) => {
+    const newSort = updateSortList(name);
+    onSort?.(newSort);
+    setSortList(newSort);
+  };
+
+  const headerCells = headers.map((header, index) => {
+    if (header.hidden) {
+      return null;
+    }
+
+    const headerStyle: React.CSSProperties = {
+      textAlign: header.align ?? "left"
+    };
+
+    if (index === 0) {
+      headerStyle.paddingLeft = spacing?.paddingLeft;
+    }
+    if (index === headers.length - 1 && disableContextMenuColumn) {
+      headerStyle.paddingRight = spacing?.paddingRight;
+    }
+
+    const sort = sortList.find(item => item.name === header.name);
+    return (
+      <DataGridHeaderCell
+        key={header.name}
+        name={header.name}
+        headline={header.headline}
+        disableSorting={header.disableSorting ?? !onSort}
+        onSort={wrapOnSort}
+        activeSortDirection={sort?.direction}
+        style={headerStyle}
+      />
+    );
+  });
+
+  return (
+    <thead {...rest} ref={ref}>
+      <tr className={classes["row"]}>
+        {enableExpandableRow && (
+          <td style={{ paddingRight: spacing?.paddingRight }} aria-label="expandable row"></td>
+        )}
+        {headerCells}
+        {!disableContextMenuColumn && (
+          <td
+            style={{ paddingRight: spacing?.paddingRight }}
+            aria-label="context menu"
+            className={classes["context-menu"]}
+          ></td>
+        )}
+      </tr>
+    </thead>
+  );
+};
+
+export const DataGridHeader = React.forwardRef(DataGridHeaderComponent);

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

@@ -0,0 +1,93 @@
+/*!
+ * 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.
+ */
+
+.header-cell {
+  font-weight: normal;
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  & > * {
+    display: inline-flex;
+  }
+
+  & > button {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.headline {
+  font-family: var(--font-family);
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  font-weight: 700;
+  color: var(--default);
+}
+
+.sorting-indicator-container {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  justify-content: center;
+
+  & > * {
+    font-size: var(--font-size-small);
+  }
+
+  .indicator {
+    color: var(--greyed-out);
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(0deg);
+
+    &.ascending {
+      color: var(--color-primary);
+    }
+
+    &.descending {
+      color: var(--color-primary);
+      transform: rotate(180deg);
+    }
+
+    &.hidden {
+      visibility: hidden;
+    }
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .header-cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

package/src/components/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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, Fragment } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Direction } from "../datagrid.interfaces";
+import classes from "./DataGridHeaderCell.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"th"> {
+  headline: string;
+  name: string;
+  disableSorting?: boolean;
+  activeSortDirection?: Direction;
+  onSort?: (name: string) => void;
+}
+
+const ariaSortMapping = {
+  ASC: "ascending",
+  DESC: "descending"
+} as const;
+
+const DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
+  { headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props,
+  ref
+) => {
+  const onCellClick = () => {
+    onSort?.(name);
+  };
+
+  const sortingIndicator = () => {
+    const getSortingIndicatorClasses = () => {
+      const sortingIndicatorClasses = [classes["indicator"]];
+      activeSortDirection &&
+        sortingIndicatorClasses.push(
+          activeSortDirection === "ASC" ? classes["ascending"] : classes["descending"]
+        );
+      return sortingIndicatorClasses;
+    };
+
+    return <Icon className={getSortingIndicatorClasses().join(" ")} icon={Icons.ArrowUp} />;
+  };
+
+  const innerContent = (
+    <Fragment>
+      <span className={classes["headline"]}>{headline}</span>
+      {!disableSorting && (
+        <div className={classes["sorting-indicator-container"]}>{sortingIndicator()}</div>
+      )}
+    </Fragment>
+  );
+
+  return (
+    <th
+      {...rest}
+      ref={ref}
+      className={classes["header-cell"]}
+      aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
+    >
+      {disableSorting ? (
+        <div key={name}>{innerContent}</div>
+      ) : (
+        <button key={name} onClick={onCellClick}>
+          {innerContent}
+        </button>
+      )}
+    </th>
+  );
+};
+
+export const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);

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

@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+@mixin borderAfter($i, $no-offset: false) {
+  content: "";
+  position: absolute;
+
+  @if $no-offset {
+    width: 100%;
+    left: 0;
+  } @else if $i > 0 {
+    width: calc(100% - calc(3.0625rem + $i * 4.125rem));
+    left: calc(3.0625rem + $i * 4.125rem);
+  } @else {
+    width: calc(100% - 3.0625rem);
+    left: 3.0625rem;
+  }
+  bottom: 0;
+  border-bottom: 2px solid var(--light-grey-border);
+}

package/src/components/DataGrid/datagrid.interfaces.ts

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+export type Direction = "ASC" | "DESC";
+export type Sort = {
+  name: string;
+  direction: Direction;
+}[];
+export type OnSortFunction = (sort: Sort) => void;
+
+export interface HeaderCell {
+  name: string;
+  headline: string;
+  disableSorting?: boolean;
+  hidden?: boolean;
+  align?: "left" | "right" | "center";
+}

package/src/components/DataGrid/testUtils.ts

@@ -0,0 +1,117 @@
+/*
+ * 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 { useEffect, useState } from "react";
+import { DateTimeFilter, Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+import { useFiltersReducer } from "./DataGridFilters/useFiltersReducer";
+import { isWithinInterval } from "date-fns";
+
+type OperatorPredicateMap<TOperator extends string> = {
+  [op in TOperator]: (v1: string, v2: string) => boolean;
+};
+
+const operatorPredicateMap: OperatorPredicateMap<string> = {
+  is: (v1, v2) => v1 === v2,
+  "is not": (v1, v2) => v1 !== v2
+};
+
+function reduceConjunction<T>(arr: T[], fn: (v: T) => boolean) {
+  return arr.reduce((acc, val) => fn(val) && acc, true);
+}
+function reduceDisjunction<T>(arr: T[], fn: (v: T) => boolean) {
+  return arr.reduce((acc, val) => fn(val) || acc, false);
+}
+
+/**
+ * @scope .
+ * @scopeException stories/DataGrid/DataGrid.stories.tsx
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useMockFilteringLogic = <T extends { [k: string]: any }>(
+  data: T[],
+  filterValues: Filter[] | undefined
+) => {
+  const { state, addFilter, editFilter, deleteFilter, clearFilters } =
+    useFiltersReducer(filterValues);
+
+  const [gridData, setGridData] = useState(data);
+
+  const filterRow = (row: T) => {
+    let shouldBeDiscarded: boolean[] = [];
+    state.filters.forEach(filter => {
+      const reduce = filter.operator?.name == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator?.name || ""];
+      shouldBeDiscarded = [
+        ...shouldBeDiscarded,
+        !reduce(filter.value, val => operatorPredicate(row[filter.column], val))
+      ];
+    });
+
+    return shouldBeDiscarded.length > 0 && shouldBeDiscarded.reduce((acc, val) => acc || val, false)
+      ? undefined
+      : row;
+  };
+
+  useEffect(() => {
+    const filteredData = data.map(filterRow).filter(val => {
+      return val !== undefined;
+    }) as T[];
+    setGridData(filteredData);
+  }, [state.filters]);
+
+  return {
+    onFilterAdd: addFilter,
+    onFilterEdit: editFilter,
+    onFilterDelete: deleteFilter,
+    onFiltersClear: clearFilters,
+    gridData,
+    setGridData,
+    filters: state.filters
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useMockFilteringByDateLogic = <T extends { [k: string]: any }>(
+  data: T[],
+  dateFieldKey: string,
+  filterValue: DateTimeFilter | undefined
+) => {
+  const [gridData, setGridData] = useState(data);
+
+  const filterRowByDateRange = (date: string | Date, fromDate: string, toDate: string): boolean => {
+    return isWithinInterval(new Date(date), {
+      start: new Date(fromDate),
+      end: new Date(toDate)
+    });
+  };
+
+  useEffect(() => {
+    if (filterValue) {
+      const fromDate = filterValue.fromDate;
+      const toDate = filterValue.toDate;
+
+      const filteredData = data.filter(item =>
+        filterRowByDateRange(item[dateFieldKey] as string, fromDate, toDate)
+      );
+      setGridData(filteredData);
+    }
+  }, [filterValue, data]);
+
+  return {
+    gridData,
+    setGridData
+  };
+};