@onewelcome/react-lib-components 8.5.0 → 8.7.0

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/testUtils.ts

@@ -15,8 +15,9 @@
  */
 
 import { useEffect, useState } from "react";
-import { Filter } from "./DataGridFilters/DataGridFilters.interfaces";
+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;
@@ -47,10 +48,26 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
 
   const [gridData, setGridData] = useState(data);
 
+  const filterRow = (row: T) => {
+    let shouldBeDiscarded: boolean[] = [];
+    state.filters.forEach(filter => {
+      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator];
+      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]);
 
@@ -63,20 +80,36 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
     setGridData,
     filters: state.filters
   };
+};
 
-  function filterRow(row: T) {
-    let shouldBeDiscarded: boolean[] = [];
-    state.filters.forEach(filter => {
-      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
-      const operatorPredicate = operatorPredicateMap[filter.operator];
-      shouldBeDiscarded = [
-        ...shouldBeDiscarded,
-        !reduce(filter.value, val => operatorPredicate(row[filter.column], val))
-      ];
+export const useMockFilteringByDateLogic = <T extends { [k: string]: string | Date }>(
+  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)
     });
+  };
 
-    return shouldBeDiscarded.length > 0 && shouldBeDiscarded.reduce((acc, val) => acc || val, false)
-      ? undefined
-      : row;
-  }
+  useEffect(() => {
+    if (filterValue) {
+      const fromDate = filterValue.fromDate;
+      const toDate = filterValue.toDate;
+
+      const filteredData = data.filter(item =>
+        filterRowByDateRange(item[dateFieldKey], fromDate, toDate)
+      );
+      setGridData(filteredData);
+    }
+  }, [filterValue, data]);
+
+  return {
+    gridData,
+    setGridData
+  };
 };

package/src/components/DatePicker/DatePicker.module.scss

@@ -38,16 +38,16 @@
   --rdp-nav_button-width: 0.75rem;
   --rdp-nav-height: 2.75rem;
 
-  --rdp-range_middle-background-color: var(--color-primary50);
+  --rdp-range_middle-background-color: var(--color-blue-grey100);
   --rdp-range_middle-color: black;
 
-  --rdp-range_start-color: white;
-  --rdp-range_start-background: var(--color-primary);
-  --rdp-range_start-date-background-color: var(--color-primary);
+  --rdp-range_start-color: var(--color-blue-grey25);
+  --rdp-range_start-background: var(--color-blue-grey500);
+  --rdp-range_start-date-background-color: var(--color-blue-grey500);
 
-  --rdp-range_end-background: var(--color-primary);
-  --rdp-range_end-color: white;
-  --rdp-range_end-date-background-color: var(--color-primary);
+  --rdp-range_end-background: var(--color-blue-grey500);
+  --rdp-range_end-color: var(--color-blue-grey25);
+  --rdp-range_end-date-background-color: var(--color-blue-grey500);
 
   --rdp-week_number-border-radius: var(--button-border-radius);
   --rdp-week_number-border: var(--button-border-radius) solid transparent;
@@ -261,7 +261,30 @@
 }
 
 .rdp-today:not(.rdp-outside) {
-  color: var(--color-primary);
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 67%;
+    left: calc(50% - 0.125rem);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 0.5rem;
+    background-color: var(--color-blue-grey900);
+  }
+
+  &.rdp-range_end {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
+
+  &.rdp-range_start {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
 }
 
 .rdp-selected {
@@ -275,7 +298,7 @@
 }
 
 .rdp-selected .rdp-day_button {
-  border: var(--button-border-radius) solid var(--color-primary);
+  border: var(--button-border-radius) solid var(--color-blue-grey500);
 }
 
 .rdp-outside {

package/src/components/DatePicker/DatePicker.tsx

@@ -15,7 +15,14 @@
  */
 
 import React, { ComponentPropsWithoutRef, Fragment, useEffect, useState } from "react";
-import { ClassNames, DateRange, DayPicker, Locale, PropsBase } from "react-day-picker";
+import {
+  ClassNames,
+  DateRange,
+  DayPicker,
+  Locale,
+  PropsBase,
+  CustomComponents
+} from "react-day-picker";
 import classes from "./DatePicker.module.scss";
 import * as locales from "date-fns/locale";
 
@@ -25,10 +32,15 @@ export interface Props extends ComponentPropsWithoutRef<any> {
   value: Date | DateRange | undefined;
   required?: boolean;
   locale?: keyof typeof locales;
+  numberOfMonths?: number;
+  components?: Partial<CustomComponents>;
+  disabled?: boolean;
 }
 
 export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
   const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
+  //we have to specify the endMonth value. Otherwise the date range picker doesn't let us to navigate between years
+  const endMonth = new Date(3000, 12);
 
   useEffect(() => {
     try {
@@ -66,6 +78,7 @@ export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }:
           {...rest}
           {...commonProps}
           mode={mode}
+          endMonth={endMonth}
           onSelect={onSelect}
           selected={value as Date | undefined}
         ></DayPicker>
@@ -74,6 +87,7 @@ export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }:
           {...rest}
           {...commonProps}
           mode={mode}
+          endMonth={endMonth}
           onSelect={onSelect}
           selected={value as DateRange | undefined}
         />

package/src/components/Form/Checkbox/Checkbox.module.scss

@@ -133,3 +133,73 @@
 .indeterminate {
   color: var(--color-primary);
 }
+
+[data-readonlyview="true"] {
+  & label {
+    border-color: var(--read-only-border-color);
+    color: var(--read-only-text-color);
+    background-color: transparent;
+    user-select: text;
+  }
+
+  & .checkbox-wrapper {
+    & span {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border-radius: 2px;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          border-radius: 2px;
+          outline-offset: -1px;
+        }
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    pointer-events: none;
+  }
+}
+
+input[type="checkbox"] {
+  &[data-readonlyview="true"] {
+    & ~ span {
+      &:before {
+        color: var(--color-blue-grey100);
+      }
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 1px solid var(--read-only-border-color);
+        border-radius: 3px;
+        &:before {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    & ~ span[data-icon="true"] {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 0;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          outline-offset: -1px;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    & ~ label {
+      pointer-events: none;
+      user-select: text;
+    }
+  }
+}

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -30,6 +30,7 @@ import {
   Props as FormSelectorWrapperProps
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
+import { withReadOnly } from "../../withReadOnly";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
@@ -182,4 +183,4 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const Checkbox = React.forwardRef(CheckboxComponent);
+export const Checkbox = withReadOnly(React.forwardRef(CheckboxComponent));

package/src/components/Form/Fieldset/Fieldset.tsx

@@ -32,6 +32,7 @@ import { FormHelperText } from "../FormHelperText/FormHelperText";
 import { InputWrapper } from "../Wrapper/InputWrapper/InputWrapper";
 import { SelectWrapper } from "../Wrapper/SelectWrapper/SelectWrapper";
 import { TextareaWrapper } from "../Wrapper/TextareaWrapper/TextareaWrapper";
+import { withReadOnly } from "../../withReadOnly";
 
 export interface Props extends ComponentPropsWithRef<"fieldset"> {
   children?: ReactElement | ReactElement[];
@@ -123,4 +124,4 @@ const FieldsetComponent: ForwardRefRenderFunction<HTMLFieldSetElement, Props> =
   );
 };
 
-export const Fieldset = React.forwardRef(FieldsetComponent);
+export const Fieldset = withReadOnly(React.forwardRef(FieldsetComponent));

package/src/components/Form/FileUpload/FileItem/FileItem.module.scss

@@ -186,4 +186,20 @@
   .file-subtitle {
     margin-left: 0;
   }
+
+  &[data-readonlyview="true"] {
+    & .file-list-container {
+      & p {
+        & span {
+          &:before {
+            color: var(--font-family);
+          }
+        }
+      }
+
+      & button {
+        visibility: hidden;
+      }
+    }
+  }
 }

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -22,6 +22,7 @@ import { ProgressBar } from "../../../ProgressBar/ProgressBar";
 import { FileType } from "../FileUpload";
 import { Button } from "../../../Button/Button";
 import { Link } from "../../../Link/Link";
+import { withReadOnly } from "../../../withReadOnly";
 export type UploadProgress = "uploading" | "completed" | "error" | "readonly" | "retry";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
@@ -62,7 +63,8 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     progress,
     downloadFileLink,
     totalPercentage,
-    onRequestedFileAction
+    onRequestedFileAction,
+    ...rest
   }: Props,
   ref
 ) => {
@@ -213,8 +215,20 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
   };
 
+  const restPropsWithoutPointerEvents = () => {
+    let props = rest;
+    delete rest?.style?.pointerEvents;
+    return props;
+  };
+
   return (
-    <div ref={ref} className={classes["file-item-wrapper"]} aria-label={`${name}-wrapper`}>
+    <div
+      ref={ref}
+      className={classes["file-item-wrapper"]}
+      aria-label={`${name}-wrapper`}
+      tabIndex={0}
+      {...restPropsWithoutPointerEvents()}
+    >
       <div className={classes["file-list-container"]}>
         {status !== ACTION_STATUS.UPLOADING && getUploadedFileInfo()}
 
@@ -240,4 +254,4 @@ const FileItemComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const FileItem = React.forwardRef(FileItemComponent);
+export const FileItem = withReadOnly(React.forwardRef(FileItemComponent));

package/src/components/Form/FileUpload/FileUpload.module.scss

@@ -80,6 +80,58 @@
   & {
     @include transition(all, 0.2s, ease-in-out);
   }
+
+  &[data-readonlyview="true"]:has(.file-list) {
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+
+    ul {
+      li {
+        p {
+          span[data-icon] {
+            &:before {
+              color: var(--color-blue-grey900);
+            }
+          }
+        }
+
+        button {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .upload-button-wrapper {
+      display: none;
+    }
+  }
+
+  &[data-readonlyview="true"]:not(:has(.file-list)) {
+    .upload-button-wrapper {
+      min-height: 4.5rem;
+
+      & .file-select {
+        border: 0;
+
+        & p {
+          color: var(--read-only-text-color);
+        }
+      }
+
+      & .file-upload-btn {
+        display: none;
+      }
+    }
+
+    .required {
+      &:after {
+        display: none;
+      }
+    }
+  }
 }
 
 .upload-button-wrapper {
@@ -88,7 +140,6 @@
 
   &.drag-active {
     .outline {
-      pointer-events: none;
       position: absolute;
       margin: 0;
       padding: 0;
@@ -134,6 +185,11 @@
   }
 }
 
+.file-selector-helper-text {
+  color: var(--greyed-out);
+  display: block;
+}
+
 .file-select {
   display: flex;
   align-items: center;

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -29,6 +29,7 @@ import { Typography } from "../../Typography/Typography";
 import classes from "./FileUpload.module.scss";
 import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
 import { Label } from "../Label/Label";
+import { withReadOnly } from "../../withReadOnly";
 
 type FileUploadType = Omit<InputProps, "onDrop" | "type" | "onChange" | "suffix" | "prefix">;
 export type FileType = Omit<FileConfig, "onRequestedFileAction"> &
@@ -43,6 +44,9 @@ export interface Props extends FileUploadType {
   maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
+  /**
+   * @deprecated use the `helperText` prop instead
+   */
   subText?: string;
   onDragOver?: DragEventHandler;
   onDragEnter?: DragEventHandler;
@@ -54,6 +58,8 @@ export interface Props extends FileUploadType {
   isRequired?: boolean;
   invalidDropErrorMessage?: string;
   noMultipleFileDropErrorMessage?: string;
+  readOnlyViewMessage?: string;
+  helperText?: string;
 }
 
 const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
@@ -71,11 +77,12 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onChange,
     dragAndDropText = "Drag and drop or",
     selectButtonText = "Browse file",
+    readOnlyViewMessage = "No file uploaded",
     onDragOver,
     onDragLeave,
     wrapperProps,
     onDrop,
-    subText,
+    subText, // @deprecated
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
@@ -83,6 +90,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     noMultipleFileDropErrorMessage = "You can upload only a single file.",
+    helperText = subText,
     ...rest
   }: Props,
   ref
@@ -98,6 +106,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   let errorTextClass = [classes["file-selector-sub-text"]];
   dragActive && dropzoneContainerClassNames.push(classes["drag-active"]);
   const hasError = inputError || error || errorMsg;
+  const readOnlyView = rest["data-readonlyview"];
   if (hasError) {
     const errorClass = classes["error"];
     dropzoneClassNames.push(errorClass);
@@ -231,7 +240,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   return (
     <div className={classes["file-upload-wrapper"]} {...wrapperProps}>
       <div className={classes["dropzone-wrapper"]}>
-        <div className={dropzoneClassNames.join(" ")}>
+        <div className={dropzoneClassNames.join(" ")} data-readonlyview={readOnlyView}>
           <Label ref={labelRef} className={`${labelClasses.join(" ")}`} htmlFor={inputId}>
             {title}
           </Label>
@@ -258,10 +267,11 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             onDragOver={e => !disabled && handleOnDragOver(e)}
             onDragLeave={e => !disabled && handleOnDragLeave(e)}
             onDrop={e => !disabled && handleOnDrop(e)}
+            tabIndex={readOnlyView ? 0 : -1}
           >
             <div className={classes["file-select"]}>
               <Typography variant="body" className={"drag-and-drop-text"}>
-                {dragAndDropText}
+                {readOnlyView ? readOnlyViewMessage : dragAndDropText}
               </Typography>
 
               <div className={classes["file-upload-btn"]}>
@@ -293,9 +303,9 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
             {errorMsg}
           </Typography>
         )}
-        {subText && (
+        {helperText && (
           <Typography variant={"sub-text"} className={subTextClass.join(" ")}>
-            {subText}
+            {helperText}
           </Typography>
         )}
       </div>
@@ -303,4 +313,4 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   );
 };
 
-export const FileUpload = React.forwardRef(FileUploadComponent);
+export const FileUpload = withReadOnly(React.forwardRef(FileUploadComponent));

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -28,6 +28,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   errorMessageIconPosition?: "before" | "after";
   errorMessage?: string;
   errorId?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
   helperText?: string;
   helperId?: string;
   helperProps?: HelperProps;
@@ -43,6 +44,7 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     errorId,
     errorMessageIcon,
     errorMessageIconPosition = "before",
+    errorMessageProps,
     helperText,
     helperId,
     helperProps,
@@ -74,7 +76,10 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             </FormHelperText>
           )}
           {error && errorMessage && (
-            <span className={classes["error-message"]}>
+            <span
+              {...errorMessageProps}
+              className={`${classes["error-message"]} ${errorMessageProps?.className ? errorMessageProps.className : ""}`}
+            >
               <span id={errorId} className={classes.message}>
                 {errorMessageIcon && errorMessageIconPosition === "before" && (
                   <Icon

package/src/components/Form/FormHelperText/FormHelperText.module.scss

@@ -26,3 +26,7 @@ div.disabled {
 div.error {
   color: var(--error);
 }
+
+[data-readonlyview="true"] div.form-helper-text {
+  display: none;
+}

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -64,7 +64,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
       }`}
     >
       <div {...containerProps}>{children}</div>
-      {(helperText || helperProps?.children) && (
+      {(errorMessage || helperText || helperProps?.children) && (
         <FormHelperText
           {...helperProps}
           ref={helperRef}
@@ -73,7 +73,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
             error ? classes["error"] : ""
           }`}
         >
-          {error ? (
+          {error && errorMessage ? (
             <span className={classes["error-message"]} id={errorId}>
               {errorMessage}
             </span>

package/src/components/Form/Input/Input.module.scss

@@ -94,6 +94,32 @@
   [data-icon-status="error"] {
     color: var(--error);
   }
+
+  &[data-readonlyview="true"] {
+    color: var(--read-only-text-color);
+
+    & .Input-module {
+      border-color: var(--read-only-border-color);
+    }
+
+    & span.outline {
+      color: var(--read-only-text-color);
+      border-color: var(--read-only-border-color);
+      background-color: var(--color-white);
+
+      &.focus {
+        border-color: var(--read-only-border-color);
+      }
+    }
+
+    &:hover {
+      & .outline {
+        color: var(--read-only-text-color);
+        background-color: var(--color-white);
+        border-color: var(--read-only-border-color);
+      }
+    }
+  }
 }
 
 .input {