@databiosphere/findable-ui 29.0.2 → 30.0.0

package/src/components/Filter/components/FilterMenu/filterMenu.styles.ts

@@ -20,7 +20,7 @@ export const FilterViewTools = styled.div`
 }
 `;
 
-export const Button = styled(ButtonBase)`
+export const StyledButtonBase = styled(ButtonBase)`
   ${textBodyLarge500};
   align-items: center;
   display: flex;

package/src/components/Filter/components/FilterMenu/filterMenu.tsx

@@ -12,7 +12,11 @@ import { List } from "../FilterList/filterList.styles";
 import { FilterMenuSearch } from "../FilterMenuSearch/filterMenuSearch";
 import { FilterNoResultsFound } from "../FilterNoResultsFound/filterNoResultsFound";
 import { VariableSizeList } from "../VariableSizeList/VariableSizeList";
-import { Button, FilterView, FilterViewTools } from "./filterMenu.styles";
+import {
+  FilterView,
+  FilterViewTools,
+  StyledButtonBase,
+} from "./filterMenu.styles";
 
 export interface FilterMenuProps {
   categoryKey: CategoryKey;
@@ -43,10 +47,10 @@ export const FilterMenu = ({
     <FilterView menuWidth={menuWidth}>
       <FilterViewTools>
         {isFilterDrawer && (
-          <Button onClick={onCloseFilter}>
+          <StyledButtonBase onClick={onCloseFilter}>
             <SouthIcon fontSize="small" />
             {categoryLabel}
-          </Button>
+          </StyledButtonBase>
         )}
         {isSearchable && (
           <FilterMenuSearch

package/src/components/Filter/components/FilterRange/constants.ts

@@ -6,7 +6,6 @@ import {
   ToggleButtonGroupProps,
 } from "@mui/material";
 import { BUTTON_PROPS as DX_BUTTON_PROPS } from "../../../common/Button/constants";
-import { RANGE_OPERATOR } from "./types";
 
 export const BUTTON_PROPS: ButtonProps = {
   ...DX_BUTTON_PROPS.PRIMARY_MEDIUM_CONTAINED,
@@ -29,12 +28,6 @@ export const INPUT_LABEL_PROPS: InputLabelProps = {
   shrink: true,
 };
 
-export const RANGE_OPERATOR_DISPLAY: Record<RANGE_OPERATOR, string> = {
-  between: "From",
-  greaterThan: "Greater Than",
-  lessThan: "Less Than",
-};
-
 export const TOGGLE_BUTTON_GROUP_PROPS: ToggleButtonGroupProps = {
   exclusive: true,
   fullWidth: true,

package/src/components/Filter/components/FilterRange/filterRange.styles.ts

@@ -1,9 +1,6 @@
 import styled from "@emotion/styled";
-import {
-  inkLight,
-  inkMain,
-  smokeDark,
-} from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
 import { textBody400 } from "../../../../styles/common/mixins/fonts";
 
 export const StyledForm = styled("form")`
@@ -15,16 +12,16 @@ export const StyledForm = styled("form")`
     width: 100%;
 
     .MuiToggleButton-root {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
       text-transform: capitalize;
 
       &.Mui-selected {
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
       }
     }
 
     .MuiDivider-root {
-      border-color: ${smokeDark};
+      border-color: ${PALETTE.SMOKE_DARK};
       border-radius: 4px;
       margin: 6px 0;
     }
@@ -34,31 +31,58 @@ export const StyledForm = styled("form")`
     display: grid;
     gap: 4px 0;
     grid-auto-flow: column;
-    grid-template-rows: auto auto;
+    grid-template-rows: auto auto auto;
     margin: 12px 0 16px 0;
 
     .MuiFormControl-root {
       display: grid;
-      gap: inherit;
+      gap: 4px 0;
       grid-row: 1 / -1;
       grid-template-rows: subgrid;
 
       .MuiInputLabel-root {
         ${textBody400};
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
         max-width: unset;
         position: relative;
         transform: unset;
       }
 
-      .MuiOutlinedInput-input {
-        padding-right: 10px;
+      .MuiOutlinedInput-root {
+        .MuiOutlinedInput-input {
+          padding-right: 10px;
+        }
+
+        input::placeholder {
+          color: ${PALETTE.INK_LIGHT};
+          opacity: 0.8;
+        }
+
+        &.Mui-focused {
+          input::placeholder {
+            opacity: 0;
+          }
+        }
+      }
+
+      .MuiFormLabel-filled + .MuiOutlinedInput-root {
+        .MuiOutlinedInput-input {
+          color: ${PALETTE.INK_MAIN};
+        }
+      }
+
+      .MuiFormHelperText-root {
+        color: ${PALETTE.INK_LIGHT};
+
+        &.Mui-error {
+          color: ${PALETTE.ALERT_MAIN};
+        }
       }
     }
 
     .MuiDivider-root {
       align-self: center;
-      border-color: ${inkLight};
+      border-color: ${PALETTE.INK_LIGHT};
       grid-row: 2;
       margin: 0 4px;
       width: 8px;
@@ -68,4 +92,24 @@ export const StyledForm = styled("form")`
   .MuiButton-root {
     grid-column: 1 / -1;
   }
+
+  ${mediaDesktopSmallDown} {
+    padding: 0 16px;
+    width: 312px;
+
+    .MuiGrid-root {
+      gap: 16px 0;
+      grid-template-rows: auto auto;
+      margin: 16px 0;
+
+      .MuiFormControl-root {
+        grid-row: unset;
+        grid-template-rows: unset;
+      }
+
+      .MuiDivider-root {
+        display: none;
+      }
+    }
+  }
 `;

package/src/components/Filter/components/FilterRange/filterRange.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Divider,
   FormControl,
+  FormHelperText,
   Grid,
   InputLabel,
   OutlinedInput,
@@ -10,62 +11,133 @@ import {
 } from "@mui/material";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
+import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
+import {
+  FilterViewTools,
+  StyledButtonBase,
+} from "../FilterMenu/filterMenu.styles";
 import {
   BUTTON_PROPS,
   DIVIDER_PROPS,
   INPUT_LABEL_PROPS,
   INPUT_PROPS,
-  RANGE_OPERATOR_DISPLAY,
   TOGGLE_BUTTON_GROUP_PROPS,
 } from "./constants";
 import { StyledForm } from "./filterRange.styles";
+import { FIELD_NAME } from "./hooks/UseFilterRange/constants";
 import { useFilterRange } from "./hooks/UseFilterRange/hook";
-import { FilterRangeProps, RANGE_OPERATOR } from "./types";
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+import { FilterRangeProps } from "./types";
+import { getRangeOperator } from "./utils";
 
-export const FilterRange = ({ className }: FilterRangeProps): JSX.Element => {
-  const { onChange, onSubmit, value } = useFilterRange();
+export const FilterRange = ({
+  categoryKey,
+  categoryLabel,
+  categorySection,
+  className,
+  isFilterDrawer,
+  max,
+  min,
+  onCloseFilter,
+  onFilter,
+  selectedMax,
+  selectedMin,
+  unit,
+}: FilterRangeProps): JSX.Element => {
+  const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
+  const {
+    clearErrors,
+    formState: { errors },
+    handleSubmit,
+    onChange,
+    value,
+  } = useFilterRange(rangeOperator);
   return (
-    <StyledForm
-      className={className}
-      data-testid={TEST_IDS.FILTER_RANGE}
-      onSubmit={onSubmit}
-    >
-      <ToggleButtonGroup
-        {...TOGGLE_BUTTON_GROUP_PROPS}
-        onChange={onChange}
-        value={value}
+    <Fragment>
+      {isFilterDrawer && (
+        <FilterViewTools>
+          <StyledButtonBase onClick={onCloseFilter}>
+            <SouthIcon fontSize="small" />
+            {categoryLabel}
+          </StyledButtonBase>
+        </FilterViewTools>
+      )}
+      <StyledForm
+        className={className}
+        data-testid={TEST_IDS.FILTER_RANGE}
+        onSubmit={handleSubmit(onFilter, {
+          categoryKey,
+          categorySection,
+        })}
       >
-        <ToggleButton value={RANGE_OPERATOR.BETWEEN}>Between</ToggleButton>
-        <ToggleButton value={RANGE_OPERATOR.LESS_THAN}>Less Than</ToggleButton>
-        <Divider {...DIVIDER_PROPS} />
-        <ToggleButton value={RANGE_OPERATOR.GREATER_THAN}>
-          Greater Than
-        </ToggleButton>
-      </ToggleButtonGroup>
-      <Grid>
-        <FormControl>
-          <InputLabel {...INPUT_LABEL_PROPS} htmlFor={value}>
-            {RANGE_OPERATOR_DISPLAY[value]}
-          </InputLabel>
-          <OutlinedInput {...INPUT_PROPS} name={value} placeholder="eg. 1" />
-        </FormControl>
-        {value === RANGE_OPERATOR.BETWEEN && (
-          <Fragment>
-            <Divider />
-            <FormControl>
-              <InputLabel {...INPUT_LABEL_PROPS} htmlFor="between-to">
-                To
+        <ToggleButtonGroup
+          {...TOGGLE_BUTTON_GROUP_PROPS}
+          onChange={(e, value) => {
+            clearErrors();
+            onChange?.(e, value);
+          }}
+          value={value}
+        >
+          <ToggleButton value={RANGE_OPERATOR.BETWEEN}>Between</ToggleButton>
+          <ToggleButton value={RANGE_OPERATOR.LESS_THAN}>
+            Less Than
+          </ToggleButton>
+          <Divider {...DIVIDER_PROPS} />
+          <ToggleButton value={RANGE_OPERATOR.GREATER_THAN}>
+            Greater Than
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <Grid>
+          {value !== RANGE_OPERATOR.LESS_THAN && (
+            <FormControl error={!!errors[FIELD_NAME.MIN]}>
+              <InputLabel {...INPUT_LABEL_PROPS} htmlFor={FIELD_NAME.MIN}>
+                {value === RANGE_OPERATOR.BETWEEN ? "Min" : "Greater Than"}
+                {unit && ` (${unit})`}
+              </InputLabel>
+              <OutlinedInput
+                {...INPUT_PROPS}
+                defaultValue={selectedMin}
+                id={FIELD_NAME.MIN}
+                name={FIELD_NAME.MIN}
+                onFocus={clearErrors}
+                placeholder="eg. 1"
+              />
+              <FormHelperText>
+                {errors[FIELD_NAME.MIN]
+                  ? errors[FIELD_NAME.MIN]
+                  : value === RANGE_OPERATOR.BETWEEN
+                  ? `Min allowed: ${min}`
+                  : `Allowed values: \u2265 ${min} and \u2264 ${max}`}
+              </FormHelperText>
+            </FormControl>
+          )}
+          {value === RANGE_OPERATOR.BETWEEN && <Divider />}
+          {value !== RANGE_OPERATOR.GREATER_THAN && (
+            <FormControl error={!!errors[FIELD_NAME.MAX]}>
+              <InputLabel {...INPUT_LABEL_PROPS} htmlFor={FIELD_NAME.MAX}>
+                {value === RANGE_OPERATOR.BETWEEN ? "Max" : "Less Than"}
+                {unit && ` (${unit})`}
               </InputLabel>
               <OutlinedInput
                 {...INPUT_PROPS}
-                name="between-to"
-                placeholder="eg. 2"
+                defaultValue={selectedMax}
+                id={FIELD_NAME.MAX}
+                name={FIELD_NAME.MAX}
+                onFocus={clearErrors}
+                placeholder="eg. 20"
               />
+              <FormHelperText color="inkLight">
+                {errors[FIELD_NAME.MAX]
+                  ? errors[FIELD_NAME.MAX]
+                  : value === RANGE_OPERATOR.BETWEEN
+                  ? `Max allowed: ${max}`
+                  : `Allowed values: \u2265 ${min} and \u2264 ${max}`}
+              </FormHelperText>
             </FormControl>
-          </Fragment>
-        )}
-      </Grid>
-      <Button {...BUTTON_PROPS}>Filter</Button>
-    </StyledForm>
+          )}
+        </Grid>
+        <Button {...BUTTON_PROPS}>Filter</Button>
+      </StyledForm>
+    </Fragment>
   );
 };

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/constants.ts

@@ -0,0 +1,5 @@
+export const FIELD_NAME = {
+  MAX: "max",
+  MIN: "min",
+  RANGE_OPERATOR: "rangeOperator",
+};

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.ts

@@ -1,20 +1,61 @@
-import { FormEvent, useCallback } from "react";
+import { FormEvent, useCallback, useState } from "react";
+import { ValidationError } from "yup";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
-import { RANGE_OPERATOR } from "../../types";
-import { UseFilterRange } from "./types";
+import { SCHEMA } from "./schema";
+import {
+  FieldErrors,
+  OnSubmitFn,
+  RANGE_OPERATOR,
+  SubmitParams,
+  UseFilterRange,
+} from "./types";
+import { getFormValues } from "./utils";
 
-export const useFilterRange = (): UseFilterRange => {
-  const { onChange, value } = useToggleButtonGroup<RANGE_OPERATOR>(
-    RANGE_OPERATOR.BETWEEN
-  );
+export const useFilterRange = (
+  initialValue: RANGE_OPERATOR = RANGE_OPERATOR.BETWEEN
+): UseFilterRange => {
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const { onChange, value } =
+    useToggleButtonGroup<RANGE_OPERATOR>(initialValue);
 
-  const onSubmit = useCallback((e: FormEvent) => {
-    e.preventDefault();
+  const clearErrors = useCallback(() => {
+    setErrors({});
   }, []);
 
+  const handleSubmit = useCallback(
+    (onSubmit: OnSubmitFn, parameters: SubmitParams) => {
+      return (e: FormEvent<HTMLFormElement>): void => {
+        e.preventDefault();
+        const fieldValues = getFormValues(e.currentTarget, value); // `value` is current range operator.
+        SCHEMA.validate(fieldValues, { abortEarly: false })
+          .then((result) => {
+            setErrors({});
+            onSubmit(
+              parameters.categoryKey,
+              [result.min, result.max],
+              true,
+              parameters.categorySection,
+              VIEW_KIND.RANGE
+            );
+          })
+          .catch((validationError: ValidationError) => {
+            const fieldErrors: FieldErrors = {};
+            for (const error of validationError.inner) {
+              if (error.path) fieldErrors[error.path] = error.message;
+            }
+            setErrors(fieldErrors);
+          });
+      };
+    },
+    [value]
+  );
+
   return {
+    clearErrors,
+    formState: { errors },
+    handleSubmit,
     onChange,
-    onSubmit,
     value,
   };
 };

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/schema.ts

@@ -0,0 +1,60 @@
+import { mixed, number, object } from "yup";
+import { FIELD_NAME } from "./constants";
+import { RANGE_OPERATOR } from "./types";
+
+export const SCHEMA = object({
+  [FIELD_NAME.MAX]: number()
+    .typeError("Value must be a number")
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.BETWEEN,
+      then: (schema) => schema.notRequired(),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.LESS_THAN,
+      then: (schema) => schema.required("Value is required"),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.GREATER_THAN,
+      then: (schema) => schema.notRequired(),
+    }),
+  [FIELD_NAME.MIN]: number()
+    .typeError("Value must be a number")
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.BETWEEN,
+      then: (schema) =>
+        schema
+          .notRequired()
+          .test(
+            "min-less-than-max",
+            "Min must be less than max",
+            function (min) {
+              const max = this.parent[FIELD_NAME.MAX];
+              // If either value is not a number, skip validation.
+              if (!min || !max) return true;
+              if (Number.isNaN(min) || Number.isNaN(max)) return true;
+              return min < max;
+            }
+          )
+          .test(
+            "at-least-min-or-max",
+            "Min or Max is required",
+            function (min) {
+              const max = this.parent[FIELD_NAME.MAX];
+              // If both values are null, validation fails.
+              return !(min === null && max === null);
+            }
+          ),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.LESS_THAN,
+      then: (schema) => schema.notRequired(),
+    })
+    .when(FIELD_NAME.RANGE_OPERATOR, {
+      is: RANGE_OPERATOR.GREATER_THAN,
+      otherwise: (schema) => schema.notRequired(),
+      then: (schema) => schema.required("Value is required"),
+    }),
+  [FIELD_NAME.RANGE_OPERATOR]: mixed<RANGE_OPERATOR>().default(
+    RANGE_OPERATOR.BETWEEN
+  ),
+});

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/types.ts

@@ -1,9 +1,40 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { FormEvent } from "react";
-import { RANGE_OPERATOR } from "../../types";
+import { OnFilterFn } from "hooks/useCategoryFilter";
+import { FormEventHandler } from "react";
+import { FIELD_NAME } from "./constants";
+
+export type FieldErrors = Partial<Record<FieldName, string>>;
+
+export type FieldName = (typeof FIELD_NAME)[keyof typeof FIELD_NAME];
+
+export interface FieldValues {
+  max: FormDataEntryValue | null;
+  min: FormDataEntryValue | null;
+  rangeOperator: RANGE_OPERATOR;
+}
+
+export type OnSubmitFn = OnFilterFn;
+
+export type OnSubmitParams = Parameters<OnSubmitFn>;
+
+export enum RANGE_OPERATOR {
+  BETWEEN = "between",
+  GREATER_THAN = "greaterThan",
+  LESS_THAN = "lessThan",
+}
+
+export type SubmitParams = {
+  categoryKey: OnSubmitParams[0];
+  categorySection?: OnSubmitParams[3];
+};
 
 export interface UseFilterRange {
+  clearErrors: () => void;
+  formState: { errors: FieldErrors };
+  handleSubmit: (
+    onSubmit: OnSubmitFn,
+    parameters: SubmitParams
+  ) => FormEventHandler;
   onChange: ToggleButtonGroupProps["onChange"];
-  onSubmit: (e: FormEvent) => void;
   value: RANGE_OPERATOR;
 }

package/src/components/Filter/components/FilterRange/hooks/UseFilterRange/utils.ts

@@ -0,0 +1,32 @@
+import { FieldValues, RANGE_OPERATOR } from "./types";
+
+/**
+ * Retrieves the min and max field values from a form.
+ * @param e - The form element to retrieve values from.
+ * @param rangeOperator - The range operator value in use.
+ * @returns The values from the form.
+ */
+export function getFormValues(
+  e: HTMLFormElement,
+  rangeOperator: RANGE_OPERATOR
+): FieldValues {
+  const formData = new FormData(e);
+  const fieldValues = {} as FieldValues;
+  fieldValues.max = parseMinMaxValue(formData.get("max"));
+  fieldValues.min = parseMinMaxValue(formData.get("min"));
+  fieldValues.rangeOperator = rangeOperator;
+  return fieldValues;
+}
+
+/**
+ * Parses a form data value null or empty string to null.
+ * Schema validation will handle the rest.
+ * @param value - The value to parse.
+ * @returns The parsed value, or null if the value is null or empty string.
+ */
+export function parseMinMaxValue(
+  value: FormDataEntryValue | null
+): FormDataEntryValue | null {
+  if (value === null || value === "") return null;
+  return value;
+}

package/src/components/Filter/components/FilterRange/stories/args.ts

@@ -0,0 +1,16 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { FilterRange } from "../filterRange";
+
+export const DEFAULT_ARGS: ComponentProps<typeof FilterRange> = {
+  categoryKey: "Weight",
+  categoryLabel: "Weight",
+  isFilterDrawer: false,
+  max: 2100,
+  min: 100,
+  onCloseFilter: fn(),
+  onFilter: fn(),
+  selectedMax: null,
+  selectedMin: null,
+  unit: "kg",
+};

package/src/components/Filter/components/FilterRange/stories/filterRange.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { FilterRange } from "../filterRange";
+import { DEFAULT_ARGS } from "./args";
 
 const meta: Meta<typeof FilterRange> = {
-  args: {},
   component: FilterRange,
 };
 
@@ -11,5 +11,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: DEFAULT_ARGS,
 };

package/src/components/Filter/components/FilterRange/types.ts

@@ -1,9 +1,15 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { CategoryKey } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { BaseComponentProps } from "../../../types";
 
-export interface FilterRangeProps extends BaseComponentProps {}
-
-export enum RANGE_OPERATOR {
-  BETWEEN = "between",
-  GREATER_THAN = "greaterThan",
-  LESS_THAN = "lessThan",
+export interface FilterRangeProps
+  extends Omit<RangeCategoryView, "key" | "label">,
+    BaseComponentProps {
+  categoryKey: CategoryKey;
+  categoryLabel: string;
+  categorySection?: string;
+  isFilterDrawer: boolean;
+  onCloseFilter: () => void;
+  onFilter: OnFilterFn;
 }

package/src/components/Filter/components/FilterRange/utils.ts

@@ -0,0 +1,16 @@
+import { RangeCategoryView } from "../../../../common/categories/views/range/types";
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+
+/**
+ * Returns the range operator based on the selected values.
+ * @param categoryView - View model of range category.
+ * @returns The range operator or undefined if no valid range is selected.
+ */
+export function getRangeOperator(
+  categoryView: Pick<RangeCategoryView, "selectedMax" | "selectedMin">
+): RANGE_OPERATOR | undefined {
+  const { selectedMax, selectedMin } = categoryView;
+  if (selectedMin && selectedMax) return RANGE_OPERATOR.BETWEEN;
+  if (selectedMin) return RANGE_OPERATOR.GREATER_THAN;
+  if (selectedMax) return RANGE_OPERATOR.LESS_THAN;
+}

package/src/components/Filter/components/FilterTag/stories/args.ts

@@ -0,0 +1,22 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { LOREM_IPSUM } from "storybook/loremIpsum";
+import { FilterTag } from "../filterTag";
+
+export const DEFAULT_ARGS: ComponentProps<typeof FilterTag> = {
+  label: "male",
+  onRemove: fn(),
+  superseded: false,
+};
+
+export const WITH_ELLIPSIS_ARGS: ComponentProps<typeof FilterTag> = {
+  label: LOREM_IPSUM.LONG,
+  onRemove: fn(),
+  superseded: false,
+};
+
+export const WITH_RANGE_ARGS: ComponentProps<typeof FilterTag> = {
+  label: "10 - 34",
+  onRemove: fn(),
+  superseded: false,
+};