@databiosphere/findable-ui 50.7.0 → 50.7.1

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

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterMenu } from "./filterMenu";
-
-const meta = {
-  argTypes: {
-    categoryKey: { control: { disable: true } },
-    menuWidth: { control: "number" },
-    onFilter: { control: { disable: true } },
-    values: { control: { disable: true } },
-  },
-  component: FilterMenu,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ backgroundColor: "white" }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/FilterMenu",
-} satisfies Meta<typeof FilterMenu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const FilterMenuStory: Story = {
-  args: {
-    categoryKey: "donorDisease",
-    categoryLabel: "Donor Disease",
-    menuWidth: 312,
-    onCloseFilter: () => {},
-    onFilter: () => {},
-    surfaceType: SURFACE_TYPE.MENU,
-    values: [
-      {
-        count: 312,
-        key: "normal",
-        label: "Normal",
-        selected: false,
-      },
-      {
-        count: 0,
-        key: "abscess",
-        label: "abscess",
-        selected: false,
-      },
-      {
-        count: 3,
-        key: "acoustic neuroma",
-        label: "acoustic neuroma",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "acute kidney failure",
-        label: "acute kidney failure",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "acute kidney tubular necrosis",
-        label: "acute kidney tubular necrosis",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "alcohol abuse",
-        label: "alcohol abuse",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "Alzheimer disease",
-        label: "Alzheimer disease",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "amyotrophic lateral sclerosis",
-        label: "amyotrophic lateral sclerosis",
-        selected: true,
-      },
-      {
-        count: 1,
-        key: "anxiety disorder",
-        label: "anxiety disorder",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "aplastic anemia",
-        label: "aplastic anemia",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "arthritis",
-        label: "arthritis",
-        selected: true,
-      },
-      {
-        count: 3,
-        key: "asthma",
-        label: "asthma",
-        selected: true,
-      },
-      {
-        count: 222,
-        key: "atherosclerosis",
-        label: "atherosclerosis",
-        selected: false,
-      },
-      {
-        count: 222,
-        key: "atrial fibrillation",
-        label: "atrial fibrillation",
-        selected: true,
-      },
-      {
-        count: 222,
-        key: "benign prostatic hyperplasia",
-        label: "benign prostatic hyperplasia",
-        selected: true,
-      },
-    ],
-  },
-};

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

@@ -1,22 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { FilterProps } from "../Filter/filter";
-import { SURFACE_TYPE } from "../surfaces/types";
-
-interface Props {
-  menuWidth: number;
-}
-
-export const FilterView = styled.div<Props>`
-  width: ${({ menuWidth }) => `${menuWidth}px`};
-`;
-
-export const FilterViewTools = styled("div")<Pick<FilterProps, "surfaceType">>`
-  margin: 24px 0 8px;
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.MENU &&
-    css`
-      margin: 0;
-    `}
-`;

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

@@ -1,82 +0,0 @@
-import { JSX, useState } from "react";
-import {
-  CategoryKey,
-  SelectCategoryValueView,
-} from "../../../../common/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { MAX_DISPLAYABLE_LIST_ITEMS } from "../../common/constants";
-import { FilterMenuSearchMatch } from "../../common/entities";
-import { getSortMatchesFn } from "../../common/utils";
-import { StyledList } from "../FilterList/filterList.styles";
-import { FilterMenuSearch } from "../FilterMenuSearch/filterMenuSearch";
-import { FilterNoResultsFound } from "../FilterNoResultsFound/filterNoResultsFound";
-import { ButtonBase } from "../surfaces/drawer/components/ButtonBase/buttonBase";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { VariableSizeList } from "../VariableSizeList/VariableSizeList";
-import { FilterView, FilterViewTools } from "./filterMenu.styles";
-
-export interface FilterMenuProps {
-  categoryKey: CategoryKey;
-  categoryLabel: string;
-  categorySection?: string;
-  menuWidth?: number;
-  onCloseFilter: () => void;
-  onFilter: OnFilterFn;
-  surfaceType: SURFACE_TYPE;
-  values: SelectCategoryValueView[];
-}
-
-export const FilterMenu = ({
-  categoryKey,
-  categoryLabel,
-  categorySection,
-  menuWidth = 312,
-  onCloseFilter,
-  onFilter,
-  surfaceType,
-  values,
-}: FilterMenuProps): JSX.Element => {
-  const [searchTerm, setSearchTerm] = useState<string>("");
-  const isSearchable =
-    surfaceType === SURFACE_TYPE.DRAWER ||
-    values.length > MAX_DISPLAYABLE_LIST_ITEMS;
-  const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
-  return (
-    <FilterView menuWidth={menuWidth}>
-      <FilterViewTools surfaceType={surfaceType}>
-        {surfaceType === SURFACE_TYPE.DRAWER && (
-          <ButtonBase onClick={onCloseFilter}>{categoryLabel}</ButtonBase>
-        )}
-        {isSearchable && (
-          <FilterMenuSearch
-            searchTerm={searchTerm}
-            setSearchTerm={setSearchTerm}
-            surfaceType={surfaceType}
-          />
-        )}
-      </FilterViewTools>
-      {matchedItems.length > 0 ? (
-        <VariableSizeList
-          categorySection={categorySection}
-          categoryKey={categoryKey}
-          onFilter={onFilter}
-          matchedItems={matchedItems}
-          surfaceType={surfaceType}
-        />
-      ) : (
-        <StyledList>
-          <FilterNoResultsFound
-            onClearSearchTerm={(): void => setSearchTerm("")}
-          />
-        </StyledList>
-      )}
-    </FilterView>
-  );
-};
-
-export function applyMenuFilter(
-  values: SelectCategoryValueView[],
-  searchTerm: string,
-): FilterMenuSearchMatch[] {
-  return getSortMatchesFn(searchTerm)(values);
-}

package/src/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.ts

@@ -1,22 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { Input } from "../../../common/Input/input";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterMenuSearchProps } from "./filterMenuSearch";
-
-export const StyledInput = styled(Input, {
-  shouldForwardProp: (prop) => prop !== "surfaceType",
-})<Pick<FilterMenuSearchProps, "surfaceType">>`
-  padding: 0 16px;
-
-  .MuiOutlinedInput-input {
-    color: ${PALETTE.INK_LIGHT};
-  }
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.MENU &&
-    css`
-      margin-top: 16px;
-    `}
-`;

package/src/components/Filter/components/FilterMenuSearch/filterMenuSearch.tsx

@@ -1,27 +0,0 @@
-import { JSX } from "react";
-import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { SetSearchTermFn } from "../../common/entities";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { StyledInput as Search } from "./filterMenuSearch.styles";
-
-export interface FilterMenuSearchProps {
-  searchTerm: string;
-  setSearchTerm: SetSearchTermFn;
-  surfaceType: SURFACE_TYPE;
-}
-
-export const FilterMenuSearch = ({
-  searchTerm,
-  setSearchTerm,
-  surfaceType,
-}: FilterMenuSearchProps): JSX.Element => {
-  return (
-    <Search
-      placeholder="Search"
-      searchTerm={searchTerm}
-      setSearchTerm={setSearchTerm}
-      StartAdornment={SearchIcon}
-      surfaceType={surfaceType}
-    />
-  );
-};

package/src/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.styles.ts

@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FilterNoResultsFound = styled.div`
-  display: grid;
-  justify-items: flex-start;
-  padding: 10px 16px;
-`;

package/src/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.tsx

@@ -1,41 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX, forwardRef } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
-import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
-
-type OnClearSearchTermFn = () => void;
-
-export interface FilterNoResultsFoundProps {
-  onClearSearchTerm?: OnClearSearchTermFn;
-}
-
-export const FilterNoResultsFound = forwardRef<
-  HTMLDivElement,
-  FilterNoResultsFoundProps
->(function FilterNoResultsFound(
-  { onClearSearchTerm }: FilterNoResultsFoundProps,
-  ref,
-): JSX.Element {
-  return (
-    <FilterNoResults ref={ref}>
-      <Typography component="div" variant={TYPOGRAPHY_PROPS.VARIANT.BODY_500}>
-        No results found!
-      </Typography>
-      <Typography
-        color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-        component="div"
-        mb={onClearSearchTerm ? 2 : 0}
-        mt={1}
-        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-      >
-        Try adjusting your search or filter to find what you’re looking for.
-      </Typography>
-      {onClearSearchTerm && (
-        <ButtonTextPrimary onClick={onClearSearchTerm}>
-          Clear Search
-        </ButtonTextPrimary>
-      )}
-    </FilterNoResults>
-  );
-});

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

@@ -1,34 +0,0 @@
-import {
-  ButtonProps,
-  DividerProps,
-  InputLabelProps,
-  OutlinedInputProps,
-  ToggleButtonGroupProps,
-} from "@mui/material";
-import { BUTTON_PROPS as DX_BUTTON_PROPS } from "../../../common/Button/constants";
-
-export const BUTTON_PROPS: ButtonProps = {
-  ...DX_BUTTON_PROPS.PRIMARY_MEDIUM_CONTAINED,
-  fullWidth: true,
-  type: "submit",
-};
-
-export const DIVIDER_PROPS: DividerProps = {
-  flexItem: true,
-  orientation: "vertical",
-};
-
-export const INPUT_PROPS: OutlinedInputProps = {
-  autoFocus: false,
-  size: "small",
-};
-
-export const INPUT_LABEL_PROPS: InputLabelProps = {
-  disableAnimation: true,
-  shrink: true,
-};
-
-export const TOGGLE_BUTTON_GROUP_PROPS: ToggleButtonGroupProps = {
-  exclusive: true,
-  fullWidth: true,
-};

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

@@ -1,122 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { FONT } from "../../../../styles/common/constants/font";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterRangeProps } from "./types";
-
-export const StyledForm = styled("form")<Pick<FilterRangeProps, "surfaceType">>`
-  padding: 16px;
-  width: 396px;
-
-  .MuiToggleButtonGroup-root {
-    grid-auto-columns: 1fr 1fr auto 1fr; // buttons + divider
-    width: 100%;
-
-    .MuiToggleButton-root {
-      color: ${PALETTE.INK_LIGHT};
-      padding: 8px 12px;
-      text-transform: capitalize;
-
-      &.Mui-selected {
-        color: ${PALETTE.INK_MAIN};
-      }
-    }
-
-    .MuiDivider-root {
-      border-color: ${PALETTE.SMOKE_DARK};
-      border-radius: 4px;
-      margin: 6px 0;
-    }
-  }
-
-  .MuiGrid-root {
-    display: grid;
-    gap: 4px 0;
-    grid-auto-flow: column;
-    grid-template-rows: auto auto auto;
-    margin: 12px 0 16px 0;
-
-    .MuiFormControl-root {
-      display: grid;
-      gap: 4px 0;
-      grid-row: 1 / -1;
-      grid-template-rows: subgrid;
-
-      .MuiInputLabel-root {
-        color: ${PALETTE.INK_MAIN};
-        font: ${FONT.BODY_400};
-        max-width: unset;
-        position: relative;
-        transform: unset;
-      }
-
-      .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: ${PALETTE.INK_LIGHT};
-      grid-row: 2;
-      margin: 0 4px;
-      width: 8px;
-    }
-  }
-
-  .MuiButton-root {
-    grid-column: 1 / -1;
-  }
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.DRAWER &&
-    css`
-       {
-        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

@@ -1,139 +0,0 @@
-import {
-  Button,
-  Divider,
-  FormControl,
-  FormHelperText,
-  Grid,
-  InputLabel,
-  OutlinedInput,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@mui/material";
-import { Fragment, JSX } from "react";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { FilterViewTools } from "../FilterMenu/filterMenu.styles";
-import { ButtonBase } from "../surfaces/drawer/components/ButtonBase/buttonBase";
-import { SURFACE_TYPE } from "../surfaces/types";
-import {
-  BUTTON_PROPS,
-  DIVIDER_PROPS,
-  INPUT_LABEL_PROPS,
-  INPUT_PROPS,
-  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 { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
-import { FilterRangeProps } from "./types";
-import { getRangeOperator } from "./utils";
-
-export const FilterRange = ({
-  categoryKey,
-  categoryLabel,
-  categorySection,
-  className,
-  max,
-  min,
-  onCloseFilter,
-  onFilter,
-  selectedMax,
-  selectedMin,
-  surfaceType,
-  unit,
-}: FilterRangeProps): JSX.Element => {
-  const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
-  const {
-    clearErrors,
-    formState: { errors },
-    handleSubmit,
-    onChange,
-    value,
-  } = useFilterRange(rangeOperator);
-  return (
-    <Fragment>
-      {surfaceType === SURFACE_TYPE.DRAWER && (
-        <FilterViewTools surfaceType={surfaceType}>
-          <ButtonBase onClick={onCloseFilter}>{categoryLabel}</ButtonBase>
-        </FilterViewTools>
-      )}
-      <StyledForm
-        className={className}
-        data-testid={TEST_IDS.FILTER_RANGE}
-        onSubmit={handleSubmit(onFilter, {
-          categoryKey,
-          categorySection,
-        })}
-        surfaceType={surfaceType}
-      >
-        <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}
-                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>
-          )}
-        </Grid>
-        <Button {...BUTTON_PROPS}>Filter</Button>
-      </StyledForm>
-    </Fragment>
-  );
-};

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

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

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

@@ -1,61 +0,0 @@
-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 { SCHEMA } from "./schema";
-import {
-  FieldErrors,
-  OnSubmitFn,
-  RANGE_OPERATOR,
-  SubmitParams,
-  UseFilterRange,
-} from "./types";
-import { getFormValues } from "./utils";
-
-export const useFilterRange = (
-  initialValue: RANGE_OPERATOR = RANGE_OPERATOR.BETWEEN,
-): UseFilterRange => {
-  const [errors, setErrors] = useState<FieldErrors>({});
-  const { onChange, value } =
-    useToggleButtonGroup<RANGE_OPERATOR>(initialValue);
-
-  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,
-    value,
-  };
-};