@databiosphere/findable-ui 50.6.1 → 50.7.1

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

@@ -1,60 +0,0 @@
-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,40 +0,0 @@
-import { ToggleButtonGroupProps } from "@mui/material";
-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"];
-  value: RANGE_OPERATOR;
-}

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

@@ -1,32 +0,0 @@
-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

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

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

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

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

@@ -1,15 +0,0 @@
-import { RangeCategoryView } from "../../../../common/categories/views/range/types";
-import { CategoryKey } from "../../../../common/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { BaseComponentProps } from "../../../types";
-import { SURFACE_TYPE } from "../surfaces/types";
-
-export interface FilterRangeProps
-  extends Omit<RangeCategoryView, "key" | "label">, BaseComponentProps {
-  categoryKey: CategoryKey;
-  categoryLabel: string;
-  categorySection?: string;
-  onCloseFilter: () => void;
-  onFilter: OnFilterFn;
-  surfaceType: SURFACE_TYPE;
-}

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

@@ -1,16 +0,0 @@
-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/filterTag.styles.ts

@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-import { Chip } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const SupersededTag = styled(Chip)`
-  background-color: ${PALETTE.SMOKE_DARK};
-`;

package/src/components/Filter/components/FilterTag/filterTag.tsx

@@ -1,59 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { Chip, Tooltip } from "@mui/material";
-import { JSX, useRef } from "react";
-import { SupersededTag } from "./filterTag.styles";
-
-export interface FilterTagProps {
-  label: string;
-  onRemove: () => void;
-  superseded: boolean;
-}
-
-const DEFAULT_SLOT_PROPS = {
-  popper: {
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [0, -6],
-        },
-      },
-      {
-        name: "preventOverflow",
-        options: { padding: 8 },
-      },
-    ],
-  },
-};
-
-export const FilterTag = ({
-  label,
-  onRemove,
-  superseded,
-}: FilterTagProps): JSX.Element => {
-  const Tag = superseded ? SupersededTag : Chip;
-  const tagRef = useRef<HTMLDivElement>(null);
-  const tagLabelElement =
-    tagRef.current?.querySelector<HTMLElement>(".MuiChip-label");
-  const isOverflowed =
-    (tagLabelElement?.offsetWidth ?? 0) < (tagLabelElement?.scrollWidth ?? 0);
-  return (
-    <Tooltip
-      arrow
-      disableInteractive
-      slotProps={DEFAULT_SLOT_PROPS}
-      title={isOverflowed ? label : null}
-    >
-      <Tag
-        clickable={false} // removes unwanted active and hover ui; "pointer" cursor added to "filterTag" variant in theme.
-        color="primary"
-        deleteIcon={<CloseRounded color="inherit" />}
-        label={label}
-        onClick={onRemove}
-        onDelete={onRemove}
-        ref={tagRef}
-        variant="filterTag"
-      />
-    </Tooltip>
-  );
-};

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

@@ -1,22 +0,0 @@
-import { ComponentProps } from "react";
-import { fn } from "storybook/test";
-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,
-};

package/src/components/Filter/components/FilterTag/stories/filterTag.stories.tsx

@@ -1,32 +0,0 @@
-import { Box } from "@mui/material";
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { FilterTag } from "../filterTag";
-import { DEFAULT_ARGS, WITH_ELLIPSIS_ARGS, WITH_RANGE_ARGS } from "./args";
-
-const meta: Meta<typeof FilterTag> = {
-  component: FilterTag,
-  decorators: [
-    (Story): JSX.Element => (
-      <Box sx={{ width: 232 }}>
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: DEFAULT_ARGS,
-};
-
-export const WithEllipsis: Story = {
-  args: WITH_ELLIPSIS_ARGS,
-};
-
-export const WithRange: Story = {
-  args: WITH_RANGE_ARGS,
-};

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

@@ -1,57 +0,0 @@
-import { RangeCategoryView } from "../../../../common/categories/views/range/types";
-import { VIEW_KIND } from "../../../../common/categories/views/types";
-import { CategoryTag } from "../../../../common/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { RANGE_OPERATOR } from "../FilterRange/hooks/UseFilterRange/types";
-import { getRangeOperator } from "../FilterRange/utils";
-
-/**
- * Returns set of filter tags with tag label (the selected range values) and corresponding Tag onRemove function.
- * @param categoryView - View model of range category.
- * @param onFilter - Function to execute on selection or removal of category value.
- * @returns Array of selected filter tags.
- */
-export function buildRangeTag(
-  categoryView: RangeCategoryView,
-  onFilter: OnFilterFn,
-): CategoryTag[] {
-  const rangeOperator = getRangeOperator(categoryView);
-  if (!rangeOperator) return [];
-  return [
-    {
-      label: buildRangeTagLabel(categoryView, rangeOperator),
-      onRemove: () =>
-        onFilter(
-          categoryView.key,
-          undefined,
-          false,
-          undefined,
-          VIEW_KIND.RANGE,
-        ),
-      superseded: false,
-    },
-  ];
-}
-
-/**
- * Returns the label for the range tag based on the selected values.
- * @param categoryView - View model of range category.
- * @param rangeOperator - The range operator.
- * @returns The label for the range tag.
- */
-function buildRangeTagLabel(
-  categoryView: RangeCategoryView,
-  rangeOperator: RANGE_OPERATOR,
-): string {
-  const { selectedMax, selectedMin } = categoryView;
-  switch (rangeOperator) {
-    case RANGE_OPERATOR.BETWEEN:
-      return `${selectedMin} - ${selectedMax}`;
-    case RANGE_OPERATOR.GREATER_THAN:
-      return `> ${selectedMin}`;
-    case RANGE_OPERATOR.LESS_THAN:
-      return `< ${selectedMax}`;
-    default:
-      return "";
-  }
-}

package/src/components/Filter/components/FilterTags/filterTags.stories.tsx

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { FilterTags } from "./filterTags";
-
-const onRemove = (): void => {
-  // onRemove function
-};
-
-const meta = {
-  argTypes: {
-    tags: { control: { disable: true } },
-  },
-  component: FilterTags,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ padding: "8px 12px 8px 16px", width: 264 }}>
-        <Story />
-      </div>
-    ),
-  ],
-  title: "Components/Filter/FilterTags",
-} satisfies Meta<typeof FilterTags>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const FilterTagsStory: Story = {
-  args: {
-    tags: [
-      {
-        label: "Normal",
-        onRemove: onRemove,
-        superseded: false,
-      },
-      {
-        label: "abscess",
-        onRemove: onRemove,
-        superseded: true,
-      },
-      {
-        label: "acoustic neuroma",
-        onRemove: onRemove,
-        superseded: false,
-      },
-      {
-        label: "acute kidney failure",
-        onRemove: onRemove,
-        superseded: false,
-      },
-      {
-        label: "acute kidney tubular necrosis",
-        onRemove: onRemove,
-        superseded: false,
-      },
-      {
-        label: "alcohol abuse",
-        onRemove: onRemove,
-        superseded: false,
-      },
-    ],
-  },
-};

package/src/components/Filter/components/FilterTags/filterTags.styles.ts

@@ -1,13 +0,0 @@
-import styled from "@emotion/styled";
-
-export const FilterTags = styled.span`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 4px 0 8px;
-  padding: 0 8px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;

package/src/components/Filter/components/FilterTags/filterTags.tsx

@@ -1,23 +0,0 @@
-import { JSX } from "react";
-import { CategoryTag } from "../../../../common/entities";
-import { FilterTag as Tag } from "../FilterTag/filterTag";
-import { FilterTags as Tags } from "./filterTags.styles";
-
-export interface FilterTagsProps {
-  tags?: CategoryTag[];
-}
-
-export const FilterTags = ({ tags }: FilterTagsProps): JSX.Element | null => {
-  return tags && tags.length ? (
-    <Tags>
-      {tags.map(({ label, onRemove, superseded }, t) => (
-        <Tag
-          key={`${label}${t}`}
-          label={label}
-          onRemove={onRemove}
-          superseded={superseded}
-        />
-      ))}
-    </Tags>
-  ) : null;
-};

package/src/components/Filter/components/Filters/filters.styles.ts

@@ -1,45 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Typography } from "@mui/material";
-import { FONT } from "../../../../styles/common/constants/font";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { FiltersProps } from "./filters";
-
-interface Props {
-  height: number;
-}
-
-export const Filters = styled("div")<
-  Props & Pick<FiltersProps, "disabled" | "surfaceType">
->`
-  color: ${PALETTE.INK_MAIN};
-  font: ${FONT.BODY_500};
-  height: ${({ height }) => height}px;
-  margin: 8px 0;
-  overflow: auto;
-  padding: 0 8px 8px;
-
-  // Filters are globally "disabled".
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      pointer-events: none;
-    `};
-
-  .MuiDivider-root {
-    margin: 8px;
-  }
-
-  ${({ surfaceType }) =>
-    surfaceType === SURFACE_TYPE.MENU &&
-    css`
-      height: unset;
-      overflow: unset;
-      padding: 0 8px;
-    `}
-`;
-
-export const StyledTypography = styled(Typography)`
-  padding: 8px;
-` as typeof Typography;

package/src/components/Filter/components/Filters/filters.tsx

@@ -1,141 +0,0 @@
-import { Divider } from "@mui/material";
-import { JSX, Fragment, useEffect, useRef, useState } from "react";
-import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
-import { CategoryView } from "../../../../common/categories/views/types";
-import { CategoryTag } from "../../../../common/entities";
-import { TrackFilterOpenedFunction } from "../../../../config/entities";
-import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
-import { useWindowResize } from "../../../../hooks/useWindowResize";
-import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { useDrawer } from "../../../common/Drawer/provider/hook";
-import { BaseComponentProps } from "../../../types";
-import { Filter } from "../Filter/filter";
-import { buildRangeTag } from "../FilterTag/utils";
-import { FilterTags } from "../FilterTags/filterTags";
-import { SURFACE_TYPE } from "../surfaces/types";
-import { Filters as FilterList, StyledTypography } from "./filters.styles";
-
-export interface CategoryFilter {
-  categoryViews: CategoryView[];
-  label?: string;
-}
-
-export interface FiltersProps extends BaseComponentProps {
-  categoryFilters: CategoryFilter[];
-  disabled?: boolean; // Global disabling of filters.
-  onFilter: OnFilterFn;
-  surfaceType?: SURFACE_TYPE;
-  trackFilterOpened?: TrackFilterOpenedFunction;
-}
-
-/**
- * Returns filter tags for the given category view.
- * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on selection or removal of category value.
- * @returns Array of filter tags.
- */
-function buildFilterTags(
-  categoryView: CategoryView,
-  onFilter: OnFilterFn,
-): CategoryTag[] {
-  // Handle range category views
-  if (isRangeCategoryView(categoryView)) {
-    return buildRangeTag(categoryView, onFilter);
-  }
-
-  // Handle select category views.
-  const { key: categoryKey, values } = categoryView;
-  return values
-    .filter(({ selected }) => selected)
-    .map(({ key: categoryValueKey, label, selected }) => {
-      return {
-        label: label,
-        onRemove: () => onFilter(categoryKey, categoryValueKey, !selected),
-        superseded: false,
-      };
-    });
-}
-
-/**
- * Returns filter tags element for the given category view.
- * @param categoryView - View model of category to display.
- * @param onFilter - Function to execute on selection or removal of category value.
- * @returns Filter tags element.
- */
-function renderFilterTags(
-  categoryView: CategoryView,
-  onFilter: OnFilterFn,
-): JSX.Element {
-  const tags = buildFilterTags(categoryView, onFilter);
-  return <FilterTags tags={tags} />;
-}
-
-export const Filters = ({
-  categoryFilters,
-  className,
-  disabled = false,
-  onFilter,
-  surfaceType = SURFACE_TYPE.MENU,
-  trackFilterOpened,
-}: FiltersProps): JSX.Element => {
-  const { onClose } = useDrawer();
-  const { height: windowHeight } = useWindowResize();
-  const filterListRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState<number>(0);
-
-  useEffect(() => {
-    setHeight(calculateListHeight(windowHeight, filterListRef.current));
-  }, [windowHeight]);
-
-  return (
-    <FilterList
-      className={className}
-      data-testid={TEST_IDS.FILTERS}
-      disabled={disabled}
-      height={height}
-      ref={filterListRef}
-      surfaceType={surfaceType}
-    >
-      {categoryFilters.map(({ categoryViews, label }, i) => (
-        <Fragment key={i}>
-          {i !== 0 && <Divider />}
-          {label && (
-            <StyledTypography
-              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              component="div"
-              variant={TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500}
-            >
-              {label}
-            </StyledTypography>
-          )}
-          {categoryViews.map((categoryView) => (
-            <Filter
-              key={categoryView.key}
-              categorySection={label}
-              categoryView={categoryView}
-              closeAncestor={onClose}
-              onFilter={onFilter}
-              surfaceType={surfaceType}
-              trackFilterOpened={trackFilterOpened}
-              tags={renderFilterTags(categoryView, onFilter)}
-            />
-          ))}
-        </Fragment>
-      ))}
-    </FilterList>
-  );
-};
-
-/**
- * Returns given height of filter list.
- * @param windowHeight - Window height.
- * @param filterListEl - Filter list element.
- * @returns calculated height.
- */
-function calculateListHeight(
-  windowHeight: number,
-  filterListEl: HTMLDivElement | null,
-): number {
-  return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
-}