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

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

@@ -0,0 +1,146 @@
+/*
+ * 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, Fragment } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { RemoveButton } from "../../Tag/RemoveButton";
+import { Typography } from "../../Typography/Typography";
+import classes from "./DataGridFilter.module.scss";
+import {
+  Filter,
+  FilterEditorMode,
+  TagTranslations,
+  DataGridColumnMetadata
+} from "./DataGridFilters.interfaces";
+
+export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
+  customEditTagContent?: React.ReactElement;
+  triggerRef: React.Ref<HTMLButtonElement>;
+  filter?: Filter;
+  mode: FilterEditorMode;
+  onFilterRemove?: () => void;
+  onFilterOpen: () => void;
+  translations?: TagTranslations;
+  dateTagCaption?: string;
+  columnsMetadata?: DataGridColumnMetadata[];
+}
+
+const EditTagContent = ({
+  filter,
+  or,
+  other,
+  columnsMetadata
+}: {
+  filter: Filter;
+  or: string;
+  other: string;
+  columnsMetadata?: DataGridColumnMetadata[];
+}) => {
+  const { column, operator, value } = filter;
+  const columnHeadlineWithFallback =
+    columnsMetadata?.find(meta => meta.name === column)?.headline || column;
+
+  return (
+    <Fragment>
+      {columnHeadlineWithFallback} {operator?.name} {value.length > 0 && <b>{value[0]}</b>}
+      {value.length >= 2 && (
+        <>
+          {" "}
+          {or}{" "}
+          <b>
+            {value.length - 1} {other}
+          </b>
+        </>
+      )}
+    </Fragment>
+  );
+};
+
+export const DataGridFilterTagComponent: ForwardRefRenderFunction<
+  HTMLDivElement,
+  DataGridFilterTagProps
+> = (
+  {
+    triggerRef,
+    filter,
+    mode,
+    onFilterRemove,
+    onFilterOpen,
+    translations,
+    dateTagCaption,
+    customEditTagContent,
+    columnsMetadata,
+    ...rest
+  }: DataGridFilterTagProps,
+  ref
+) => {
+  const {
+    addButtonCaption = "Add filter",
+    or = "or",
+    other = "other",
+    dateIs = "Date is"
+  } = translations || {};
+  const shouldRenderAddTag = mode === "ADD";
+  const shouldRenderEditTag = mode === "EDIT" && filter;
+  const shouldRenderAddDateTag = mode === "ADD_DATE";
+
+  return (
+    <div {...rest} ref={ref} className={classes["filter-wrapper"]}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={classes["filter-button"]}
+        onClick={onFilterOpen}
+      >
+        {shouldRenderAddTag && (
+          <Fragment>
+            <Icon icon={Icons.AddCircle} />
+            <Typography variant="body" className={classes["caption"]}>
+              {addButtonCaption}
+            </Typography>
+          </Fragment>
+        )}
+        {shouldRenderEditTag && (
+          <Typography variant="body" className={classes["caption"]}>
+            {customEditTagContent ? (
+              React.cloneElement(customEditTagContent, { filter })
+            ) : (
+              <EditTagContent
+                filter={filter}
+                or={or}
+                other={other}
+                columnsMetadata={columnsMetadata}
+              />
+            )}
+          </Typography>
+        )}
+        {shouldRenderAddDateTag && (
+          <Fragment>
+            <Icon icon={Icons.Calendar} />
+            <Typography variant="body" className={classes["caption"]}>
+              {dateIs} <b>{dateTagCaption}</b>
+            </Typography>
+          </Fragment>
+        )}
+      </button>
+      {shouldRenderEditTag && (
+        <RemoveButton className={classes["remove-button"]} onRemove={onFilterRemove} />
+      )}
+    </div>
+  );
+};
+
+export const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);

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

@@ -0,0 +1,136 @@
+/*
+ * 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, { useCallback, useState } from "react";
+import { Option } from "../../Form/Select/SingleSelect/Option";
+import { MultiOption } from "../../Form/Select/MultiSelect/MultiOption";
+import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper";
+import {
+  DataGridColumnMetadata,
+  PopoverTranslations,
+  ValueSelectType
+} from "./DataGridFilters.interfaces";
+
+export type Props = {
+  column: string;
+  columnsMetadata: DataGridColumnMetadata[];
+  values: string[];
+  pickedValues: string[];
+  setValues: (values: React.SetStateAction<string[]>) => void;
+  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
+  translations?: PopoverTranslations;
+  operator?: { allowEmptyValues: boolean } | null;
+};
+
+export const DataGridFilterValueSelect = ({
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  setValues,
+  setPickedValues,
+  translations,
+  operator
+}: Props) => {
+  const [touched, setTouched] = useState(false);
+
+  const {
+    valueSelectLabel = "Value",
+    addNewValueLabel = "Create new",
+    addNewValueButtonTitle = "Add new select value"
+  } = translations || {};
+
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata?.disableAddNew;
+  const valueSelectType = columnMetadata?.valueSelectType;
+
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0 && touched);
+
+  const addNewBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
+    title: addNewValueButtonTitle,
+    type: "button"
+  };
+
+  const onChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const { selectedOptions, value } = e.target;
+
+      let newValues: string[];
+
+      if (valueSelectType === ValueSelectType.single) {
+        newValues = value ? [value] : [];
+      } else {
+        newValues = Array.from(selectedOptions, option => option.value);
+      }
+      setPickedValues(newValues);
+      setTouched(true);
+    },
+    [valueSelectType]
+  );
+
+  const selectProps = {
+    addNew: disableAddNew
+      ? undefined
+      : {
+          label: addNewValueLabel,
+          onAddNew: (value: string) => {
+            if (value) {
+              setValues(prev => [...prev, value]);
+              setPickedValues(prev => [...prev, value]);
+            }
+          },
+          btnProps: addNewBtnProps
+        },
+    search: {
+      enabled: true,
+      renderThreshold: 0
+    }
+  };
+
+  return ValueSelectType.single === valueSelectType ? (
+    <SelectWrapper
+      label={valueSelectLabel}
+      name={"value"}
+      value={pickedValues[0]}
+      onChange={onChangeHandler}
+      selectProps={selectProps}
+      error={hasValidationError}
+    >
+      {values.map(value => (
+        <Option key={value} value={value}>
+          {value}
+        </Option>
+      ))}
+    </SelectWrapper>
+  ) : (
+    <MultiSelectWrapper
+      label={valueSelectLabel}
+      name={"value"}
+      value={pickedValues}
+      onChange={onChangeHandler}
+      selectProps={selectProps}
+      error={hasValidationError}
+    >
+      {values.map(value => (
+        <MultiOption key={value} value={value}>
+          {value}
+        </MultiOption>
+      ))}
+    </MultiSelectWrapper>
+  );
+};

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

@@ -0,0 +1,123 @@
+/*
+ * 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 interface FilterOperator {
+  name: string;
+  allowEmptyValues: boolean;
+}
+
+export interface Filter {
+  id: string;
+  column: string;
+  operator: FilterOperator | null;
+  value: string[];
+}
+
+export type FiltersAction =
+  | {
+      type: "add";
+      payload: Filter;
+    }
+  | {
+      type: "edit";
+      payload: Filter;
+    }
+  | {
+      type: "remove";
+      payload: { id: string };
+    }
+  | {
+      type: "reset";
+      payload: Filter[];
+    }
+  | {
+      type: "clear";
+    };
+
+export type FiltersState = {
+  filters: Filter[];
+};
+
+export type FilterEditorMode = "ADD" | "EDIT" | "ADD_DATE";
+
+export const DefaultOperators: Record<string, FilterOperator> = {
+  is: { name: "is", allowEmptyValues: false },
+  isNot: { name: "is not", allowEmptyValues: false },
+  contains: { name: "contains", allowEmptyValues: false },
+  doesNotContain: { name: "does not contain", allowEmptyValues: false },
+  isEmpty: { name: "is empty", allowEmptyValues: true }
+};
+
+export interface DataGridColumnMetadata {
+  name: string;
+  headline: string;
+  operators?: FilterOperator[];
+  defaultValues?: string[];
+  disableAddNew?: boolean;
+  allowSingleFilterOnly?: boolean;
+  valueSelectType?: ValueSelectType;
+}
+
+export interface PopoverTranslations {
+  columnSelectLabel?: string;
+  operatorSelectLabel?: string;
+  valueSelectLabel?: string;
+  addNewValueLabel?: string;
+  addNewValueButtonTitle?: string;
+  submitButtonTitle?: string;
+  cancelButtonTitle?: string;
+}
+
+export interface TagTranslations {
+  addButtonCaption?: string;
+  or?: string;
+  other?: string;
+  dateIs?: string;
+}
+
+export interface ToolbarTranslations {
+  clearButtonCaption?: string;
+}
+
+export interface FiltersTranslations {
+  toolbar?: ToolbarTranslations;
+  tag?: TagTranslations;
+  popover?: PopoverTranslations;
+}
+
+export interface KeyValuePair<TKey = string, TValue = string> {
+  key: TKey;
+  value: TValue;
+}
+
+export type DateTimeFilterType =
+  | "THIRTY_SECONDS"
+  | "ONE_MINUTE"
+  | "FIVE_MINUTES"
+  | "ONE_HOUR"
+  | "TWENTY_FOUR_HOURS"
+  | "CUSTOM";
+
+export interface DateTimeFilter {
+  fromDate: string;
+  toDate: string;
+  type: DateTimeFilterType;
+}
+
+export enum ValueSelectType {
+  single = "single",
+  multi = "multi"
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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, { useState, useEffect } from "react";
+import {
+  InputWrapper,
+  Props as InputWrapperProps
+} from "../../Form/Wrapper/InputWrapper/InputWrapper";
+import { Icon, Icons } from "../../Icon/Icon";
+import classes from "./DataGridToolbar.module.scss";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
+
+export interface DataGridSearchbarProps {
+  onSearch: (value: string) => void;
+  initialSearchValue?: string;
+  debounceTime?: number;
+  placeholder?: string;
+  inputWrapperProps?: InputWrapperProps;
+}
+
+export const DataGridSearchbar = ({
+  onSearch,
+  initialSearchValue,
+  debounceTime,
+  inputWrapperProps,
+  placeholder
+}: DataGridSearchbarProps) => {
+  const [search, setSearch] = useState(initialSearchValue ?? "");
+  const debouncedCallback = useDebouncedCallback(onSearch, debounceTime ?? 500);
+  const onSearchCallback = debounceTime ? debouncedCallback : onSearch;
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchCallback(event.target.value);
+    setSearch(event.target.value);
+  };
+
+  useEffect(() => {
+    initialSearchValue && setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+
+  return (
+    <InputWrapper
+      {...inputWrapperProps}
+      className={`${classes["searchbar"]} ${inputWrapperProps?.className ?? ""}`}
+      label={inputWrapperProps?.label ?? ""}
+      onChange={onChange}
+      type="search"
+      name={inputWrapperProps?.name ?? "searchbar"}
+      value={search}
+      inputProps={{
+        ...inputWrapperProps?.inputProps,
+        type: "search",
+        prefix: <Icon icon={Icons.Search} />,
+        placeholder: placeholder ?? "Search items"
+      }}
+    ></InputWrapper>
+  );
+};

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss

@@ -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.
+ */
+
+@use "../../../mixins.module.scss";
+
+@include mixins.searchInputPointer("search", ".wrapper");
+
+.wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  padding-bottom: 1rem;
+
+  .filter-section {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    flex-grow: 1;
+
+    .searchbar {
+      min-width: 7rem;
+      flex-basis: 15rem;
+    }
+
+    .actions-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 0.5rem;
+    }
+
+    .clear-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      @include mixins.focusVisibleOutline($outlineOffset: 0);
+
+      .caption {
+        margin: 0;
+        font-size: var(--font-size-data-grid);
+        line-height: var(--data-grid-line-height);
+        text-decoration: underline;
+        color: var(--color-primary500);
+      }
+    }
+  }
+
+  .button-section {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}

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

@@ -0,0 +1,132 @@
+/*
+ * 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, { Fragment, useEffect, useRef } from "react";
+import { DataGridFilter } from "./DataGridFilter";
+import classes from "./DataGridToolbar.module.scss";
+import {
+  DataGridColumnMetadata,
+  DateTimeFilter,
+  Filter,
+  FiltersTranslations
+} from "./DataGridFilters.interfaces";
+import { Typography } from "../../Typography/Typography";
+import { useFiltersReducer } from "./useFiltersReducer";
+import { DataGridDateFilter } from "./DataGridDateFilter";
+
+export interface DataGridToolbarProps {
+  columnsMetadata?: DataGridColumnMetadata[];
+  customEditTagContent?: React.ReactElement;
+  dateFilterValue?: DateTimeFilter;
+  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+  filterValues?: Filter[];
+  translations?: FiltersTranslations;
+  onFilterAdd?: (filter: Filter) => void;
+  onFilterEdit?: (filter: Filter) => void;
+  onFilterDelete?: (id: string) => void;
+  onFiltersClear?: () => void;
+}
+
+export const DataGridToolbar = ({
+  columnsMetadata,
+  filterValues,
+  translations,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  dateFilterValue,
+  onDateFilterValueChange,
+  onFiltersClear,
+  customEditTagContent
+}: DataGridToolbarProps) => {
+  const { state, addFilter, editFilter, deleteFilter, resetFilters, clearFilters } =
+    useFiltersReducer(filterValues);
+
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (!isFirstRenderRef.current && filterValues) {
+      resetFilters(filterValues);
+    }
+  }, [filterValues]);
+
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+
+  const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
+  return (
+    <Fragment>
+      {dateFilterValue && (
+        <DataGridDateFilter
+          dateFilterValue={dateFilterValue}
+          onDateFilterValueChange={onDateFilterValueChange}
+        />
+      )}
+      {columnsMetadata &&
+        state.filters.map(filter => (
+          <DataGridFilter
+            mode="EDIT"
+            key={filter.id}
+            filter={filter}
+            columnsMetadata={columnsMetadata}
+            filterState={state}
+            onFilterEdit={filter => {
+              editFilter(filter);
+              onFilterEdit && onFilterEdit(filter);
+            }}
+            onFilterDelete={id => {
+              deleteFilter(id);
+              onFilterDelete && onFilterDelete(id);
+            }}
+            tagTranslations={translations?.tag}
+            popoverTranslations={translations?.popover}
+            customEditTagContent={customEditTagContent}
+          />
+        ))}
+      <div className={classes["actions-wrapper"]}>
+        {columnsMetadata && (
+          <DataGridFilter
+            mode="ADD"
+            customEditTagContent={customEditTagContent}
+            columnsMetadata={columnsMetadata}
+            filterState={state}
+            onFilterAdd={filter => {
+              addFilter(filter);
+              onFilterAdd && onFilterAdd(filter);
+            }}
+            tagTranslations={translations?.tag}
+            popoverTranslations={translations?.popover}
+          />
+        )}
+        {columnsMetadata && state.filters.length >= 1 && (
+          <button
+            type="button"
+            className={classes["clear-button"]}
+            onClick={() => {
+              clearFilters();
+              onFiltersClear && onFiltersClear();
+            }}
+          >
+            <Typography variant="body" className={classes["caption"]}>
+              {clearButtonCaption}
+            </Typography>
+          </button>
+        )}
+      </div>
+    </Fragment>
+  );
+};