@databiosphere/findable-ui 29.0.2 → 31.0.0

package/src/components/DataDictionary/components/Table/components/BasicCell/utils.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+/**
+ * Returns a parsed value based on the original value.
+ * If the value is a boolean, it is converted to its string representation ("true" or "false").
+ * For all other types of ReactNode, the value is returned unchanged.
+ * @param value - The original value.
+ * @returns Parsed value or original value.
+ */
+export function parseValue(value: ReactNode): ReactNode {
+  if (typeof value === "boolean") return value.toString();
+  return value;
+}

package/src/components/DataDictionary/components/Table/hook.ts

@@ -1,13 +1,21 @@
-import { ColumnDef, Table, useReactTable } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes } from "../../../../common/entities";
+import {
+  ColumnDef,
+  RowData,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { useTableOptions } from "./options/hook";
 
-export const useTable = (
-  data: Attribute[],
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]
-): Table<Attribute> => {
-  const tableOptions = useTableOptions();
-  return useReactTable<Attribute>({
+export const useTable = <T extends RowData = Attribute>(
+  data: T[],
+  columnDefs: ColumnDef<T, T[keyof T]>[]
+): Table<T> => {
+  // Table options.
+  const tableOptions = useTableOptions<T>();
+
+  // Table instance.
+  return useReactTable<T>({
     ...tableOptions,
     columns: columnDefs,
     data,

package/src/components/DataDictionary/components/Table/options/core/constants.ts

@@ -1,10 +1,9 @@
-import { CoreOptions, getCoreRowModel } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
+import { CoreOptions, getCoreRowModel, RowData } from "@tanstack/react-table";
 import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
 
 export const CORE_OPTIONS: Pick<
-  CoreOptions<Attribute>,
+  CoreOptions<RowData>,
   "_features" | "getCoreRowModel"
 > = {
   _features: [ROW_POSITION, ROW_PREVIEW],

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -1,10 +1,10 @@
-import { TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
 import { CORE_OPTIONS } from "./core/constants";
 import { SORTING_OPTIONS } from "./sorting/constants";
 
-export const useTableOptions = (): Omit<
-  TableOptions<Attribute>,
+export const useTableOptions = <T extends RowData = Attribute>(): Omit<
+  TableOptions<T>,
   "columns" | "data"
 > => {
   return {

package/src/components/DataDictionary/components/Table/options/sorting/constants.ts

@@ -1,9 +1,5 @@
-import { SortingOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
+import { RowData, SortingOptions } from "@tanstack/react-table";
 
-export const SORTING_OPTIONS: Pick<
-  SortingOptions<Attribute>,
-  "enableSorting"
-> = {
+export const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting"> = {
   enableSorting: false,
 };

package/src/components/DataDictionary/components/Table/table.tsx

@@ -1,4 +1,5 @@
 import { TableContainer } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
@@ -9,7 +10,9 @@ import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
-export const Table = ({ table }: TableProps): JSX.Element => {
+export const Table = <T extends RowData>({
+  table,
+}: TableProps<T>): JSX.Element => {
   return (
     <StyledRoundedPaper variant="table">
       <GridPaper>

package/src/components/DataDictionary/components/Table/types.ts

@@ -1,6 +1,5 @@
-import { Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
 
-export interface TableProps {
-  table: Table<Attribute>;
+export interface TableProps<T extends RowData> {
+  table: Table<T>;
 }

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -11,12 +11,11 @@ export const grid = css`
 export const View = styled("div")`
   ${grid};
   flex: 1;
-  margin: 0 auto;
-  max-width: min(calc(100vw - 48px), 1392px);
+  margin: 0 24px;
   position: relative;
 
   ${mediaTabletDown} {
     grid-template-columns: 1fr;
-    max-width: calc(100vw - 32px);
+    margin: 0 16px;
   }
 `;

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,4 +1,6 @@
+import { RowData } from "@tanstack/react-table";
 import React, { useMemo } from "react";
+import { Attribute } from "../../common/entities";
 import { Entities } from "./components/Entities/entities";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
 import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
@@ -11,7 +13,7 @@ import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
 import { DataDictionaryProps } from "./types";
 
-export const DataDictionary = ({
+export const DataDictionary = <T extends RowData = Attribute>({
   className,
   EntitiesLayout = DefaultEntitiesLayout,
   Outline = DefaultOutline,
@@ -19,7 +21,7 @@ export const DataDictionary = ({
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { classes, columnDefs } = useDataDictionary();
+  const { classes, columnDefs } = useDataDictionary<T>();
   const { spacing } = useLayoutSpacing();
   const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -1,13 +1,20 @@
+import { RowData } from "@tanstack/react-table";
 import { useMemo } from "react";
+import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
 import { useConfig } from "../../../../hooks/useConfig";
 import { UseDataDictionary } from "./types";
 
-export const useDataDictionary = (): UseDataDictionary => {
+export const useDataDictionary = <
+  T extends RowData = Attribute
+>(): UseDataDictionary<T> => {
   const {
     config: { dataDictionaries: dataDictionaryConfigs },
   } = useConfig();
 
-  const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+  const dataDictionaryConfig = dataDictionaryConfigs?.[0] as
+    | DataDictionaryConfig<T>
+    | undefined; // TODO: Handle multiple data dictionaries
+
   return useMemo(() => {
     const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
     const columnDefs = dataDictionaryConfig?.columnDefs || [];

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -1,11 +1,7 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Attribute,
-  AttributeValueTypes,
-  Class,
-} from "../../../../common/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 
-export interface UseDataDictionary {
-  classes: Class[];
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+export interface UseDataDictionary<T extends RowData = Attribute> {
+  classes: Class<T>[];
+  columnDefs: ColumnDef<T, T[keyof T]>[];
 }

package/src/components/Filter/components/Filter/filter.tsx

@@ -1,15 +1,23 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow, PopoverPosition, PopoverProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
-import { SelectCategoryView } from "../../../../common/entities";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
+import { FilterRange } from "../FilterRange/filterRange";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
 import { FilterPopover, IconButton } from "./filter.styles";
 
+/**
+ * Filter component.
+ * TODO(cc) refactor: build tags from categoryView for selected values.
+ * TODO(cc) tests: add tests for selected values (rending of tags) for select and range categories.
+ */
+
 const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS: PopoverProps["slotProps"] = {
   paper: { variant: "menu" },
@@ -20,7 +28,7 @@ const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
 
 export interface FilterProps {
   categorySection?: string;
-  categoryView: SelectCategoryView;
+  categoryView: CategoryView;
   closeAncestor?: () => void;
   isFilterDrawer: boolean;
   onFilter: OnFilterFn;
@@ -44,6 +52,7 @@ export const Filter = ({
   const TransitionComponent = isFilterDrawer ? DrawerTransition : Grow;
   const transitionDuration = isOpen ? 250 : 300;
   const TransitionDuration = isFilterDrawer ? transitionDuration : undefined;
+  const isRangeView = isRangeCategoryView(categoryView);
 
   /**
    * Closes filter popover.
@@ -79,7 +88,7 @@ export const Filter = ({
     <>
       <FilterLabel
         annotation={categoryView.annotation}
-        count={categoryView.values.length}
+        count={isRangeView ? undefined : categoryView.values.length}
         disabled={categoryView.isDisabled}
         isOpen={isOpen}
         label={categoryView.label}
@@ -93,7 +102,7 @@ export const Filter = ({
         onClose={onCloseFilters}
         open={isOpen}
         slotProps={slotProps}
-        TransitionComponent={TransitionComponent}
+        slots={{ transition: TransitionComponent }}
         transitionDuration={TransitionDuration}
       >
         {isOpen && isFilterDrawer && (
@@ -103,15 +112,31 @@ export const Filter = ({
             size="medium"
           />
         )}
-        <FilterMenu
-          categorySection={categorySection}
-          categoryKey={categoryView.key}
-          categoryLabel={categoryView.label}
-          isFilterDrawer={isFilterDrawer}
-          onFilter={onFilter}
-          onCloseFilter={onCloseFilter}
-          values={categoryView.values}
-        />
+        {isRangeView ? (
+          <FilterRange
+            categoryKey={categoryView.key}
+            categoryLabel={categoryView.label}
+            categorySection={categorySection}
+            isFilterDrawer={isFilterDrawer}
+            max={categoryView.max}
+            min={categoryView.min}
+            selectedMax={categoryView.selectedMax}
+            selectedMin={categoryView.selectedMin}
+            onCloseFilter={onCloseFilter}
+            onFilter={onFilter}
+            unit={categoryView.unit}
+          />
+        ) : (
+          <FilterMenu
+            categoryKey={categoryView.key}
+            categoryLabel={categoryView.label}
+            categorySection={categorySection}
+            isFilterDrawer={isFilterDrawer}
+            onCloseFilter={onCloseFilter}
+            onFilter={onFilter}
+            values={categoryView.values}
+          />
+        )}
       </FilterPopover>
       {tags}
     </>

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

@@ -0,0 +1,24 @@
+import { fn } from "@storybook/test";
+import { ComponentProps } from "react";
+import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
+import { Filter } from "../filter";
+
+export const SELECT_ARGS: ComponentProps<typeof Filter> = {
+  categoryView: GENUS_SPECIES,
+  isFilterDrawer: false,
+  onFilter: fn(),
+};
+
+export const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter> = {
+  ...SELECT_ARGS,
+  categoryView: {
+    ...SELECT_ARGS.categoryView,
+    isDisabled: true,
+  },
+};
+
+export const RANGE_ARGS: ComponentProps<typeof Filter> = {
+  categoryView: DONOR_COUNT,
+  isFilterDrawer: false,
+  onFilter: fn(),
+};

package/src/components/Filter/components/Filter/stories/filter.stories.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Filter } from "../filter";
+import { DISABLED_SELECT_ARGS, RANGE_ARGS, SELECT_ARGS } from "./args";
+
+const meta: Meta<typeof Filter> = {
+  component: Filter,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box sx={{ width: 248 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectCategory: Story = {
+  args: SELECT_ARGS,
+};
+
+export const DisabledSelectCategory: Story = {
+  args: DISABLED_SELECT_ARGS,
+};
+
+export const RangeCategory: Story = {
+  args: RANGE_ARGS,
+};

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;
+      }
+    }
+  }
 `;