@databiosphere/findable-ui 4.0.0 → 6.0.0

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.tsx

@@ -0,0 +1,27 @@
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { IconButton } from "@mui/material";
+import React, { ReactNode } from "react";
+import { DrawerTitle as Title } from "./drawerTitle.styles";
+
+export interface DrawerTitleProps {
+  className?: string;
+  onClose?: () => void;
+  title?: ReactNode;
+}
+
+export const DrawerTitle = ({
+  className,
+  onClose,
+  title,
+}: DrawerTitleProps): JSX.Element => {
+  return (
+    <Title className={className}>
+      {title}
+      {onClose && (
+        <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
+          <CloseRoundedIcon color="inkLight" fontSize="small" />
+        </IconButton>
+      )}
+    </Title>
+  );
+};

package/src/components/common/Drawer/components/drawer.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const DrawerContent = styled.div`
+  overflow-y: auto;
+  overscroll-behavior: none;
+`;

package/src/components/common/Drawer/drawer.tsx

@@ -0,0 +1,21 @@
+import { Drawer as MDrawer, DrawerProps as MDrawerProps } from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface DrawerProps extends MDrawerProps {
+  children?: ReactNode | ReactNode[];
+  className?: string;
+}
+
+export const Drawer = ({
+  children,
+  className,
+  onClose,
+  open,
+  ...props /* Spread props to allow for Mui Drawer specific prop overrides e.g. "hideBackdrop". */
+}: DrawerProps): JSX.Element => {
+  return (
+    <MDrawer className={className} onClose={onClose} open={open} {...props}>
+      {children}
+    </MDrawer>
+  );
+};

package/src/components/common/Grid/grid.tsx

@@ -1,10 +1,8 @@
 import { Box, SxProps } from "@mui/material";
 import React, { ReactNode } from "react";
 
-// TODO the prop "children" should not necessarily be optional, but it is for now to avoid typescript errors with the use of this component within site configuration files.
-
 export interface GridProps {
-  children?: ReactNode | ReactNode[];
+  children: ReactNode | ReactNode[];
   gridSx?: SxProps;
 }
 

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -1,7 +1,6 @@
 import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
-import { Collapse } from "@mui/material";
-import { CollapseProps } from "@mui/material/Collapse/Collapse";
+import { Collapse, CollapseProps } from "@mui/material";
 import React, { ReactNode, useEffect, useState } from "react";
 import {
   BREAKPOINT_FN_NAME,

package/src/components/common/Typography/common/entities.ts

@@ -0,0 +1,5 @@
+import { TypographyProps as MTypographyProps } from "@mui/material";
+
+export type TypographyProps =
+  | Omit<MTypographyProps, "children" | "component" | "ref">
+  | undefined;

package/src/config/entities.ts

@@ -1,12 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { ColumnSort } from "@tanstack/react-table";
+import { CellContext, ColumnSort, RowData } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import {
-  CategoryKey,
-  SelectCategoryValueView,
-  SelectedFilter,
-  SelectedFilterValue,
-} from "../common/entities";
+import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -119,7 +114,7 @@ export interface ComponentConfig<
   props?: React.ComponentProps<T>;
   viewBuilder?: (
     model: D,
-    viewContext?: ViewContext
+    viewContext?: ViewContext<D>
   ) => React.ComponentProps<T>;
 }
 
@@ -265,9 +260,10 @@ export interface ListConfig<T = any> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
+  enableRowPreview?: boolean;
   enableRowSelection?: boolean;
   listHero?: ComponentsConfig;
-  relatedView?: RelatedViewConfig;
+  rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
   rowSelectionView?: ComponentsConfig;
   subTitleHero?: ComponentsConfig;
 }
@@ -304,18 +300,9 @@ export interface Override {
   withdrawn?: boolean;
 }
 
-/**
- * Related search function.
- */
-type RelatedSearchFunction = (
-  searchKey: CategoryKey | undefined,
-  resultKey: CategoryKey | undefined,
-  selectedCategoryValues: SelectedFilterValue | undefined
-) => Promise<RelatedSearchResult | undefined>;
-
 export interface SavedFilter {
   filters: SelectedFilter[];
-  sort?: ColumnSort;
+  sorting?: ColumnSort[];
   title: string;
 }
 /**
@@ -356,24 +343,6 @@ interface TrackingConfig {
   trackFilterOpened?: TrackFilterOpenedFunction;
 }
 
-/**
- * Product of the related search function.
- */
-export interface RelatedSearchResult {
-  resultKey: CategoryKey; // The related search function resultant search values' category key.
-  searchKey: CategoryKey; // The related search function search parameters' category key.
-  values: string[]; // Resultant search values.
-}
-
-/**
- * Related view configuration.
- */
-export interface RelatedViewConfig {
-  relatedSearchFn: RelatedSearchFunction;
-  resultKey: CategoryKey; // The related search function resultant search values' category key.
-  searchKey: CategoryKey; // The related search function search parameters' category key.
-}
-
 /**
  * Interface that will hold the whole configuration for a given site.
  */
@@ -459,8 +428,9 @@ export type ThemeOptionsFn = (theme: Theme) => ThemeOptions;
 /**
  * View context.
  */
-export interface ViewContext {
+export interface ViewContext<T extends RowData, TData = unknown> {
   authState: Pick<AuthContextProps, "authenticationStatus" | "isAuthenticated">;
+  cellContext?: CellContext<T, TData>;
   entityConfig: EntityConfig;
   exploreState: ExploreState;
   fileManifestState: FileManifestState;

package/src/providers/exploreState/entities.ts

@@ -1,11 +1,15 @@
-import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import {
+  ColumnSort,
+  RowSelectionState,
+  VisibilityState,
+} from "@tanstack/react-table";
 import {
   CategoryValueKey,
   SelectCategory,
   SelectCategoryView,
   SelectedFilter,
 } from "../../common/entities";
+import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import {
   CategoryConfig,
   CategoryGroup,
@@ -18,6 +22,7 @@ export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
   columnsVisibility: VisibilityState;
   enableRowSelection: boolean;
+  rowPreview: RowPreviewState;
   rowSelection: RowSelectionState;
   sorting: ColumnSort[];
 }

package/src/providers/exploreState/initializer/constants.ts

@@ -34,11 +34,9 @@ export const INITIAL_STATE: ExploreState = {
   featureFlagState: undefined,
   filterCount: 0,
   filterState: [],
-  isRelatedView: false,
   listItems: [],
-  listView: undefined,
   loading: true,
   paginationState: DEFAULT_PAGINATION_STATE,
-  relatedListItems: undefined,
+  rowPreview: undefined,
   tabValue: "",
 };

package/src/providers/exploreState/initializer/utils.ts

@@ -1,4 +1,4 @@
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import { VisibilityState } from "@tanstack/react-table";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
 import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
@@ -73,8 +73,7 @@ function buildSavedFilterByCategoryValueKey(
   if (!savedFilters) return;
   const savedFilterByCategoryValueKey: SavedFilterByCategoryValueKey =
     new Map();
-  for (const { filters, sort, title } of savedFilters) {
-    const sorting = sort ? [sort] : undefined;
+  for (const { filters, sorting, title } of savedFilters) {
     savedFilterByCategoryValueKey.set(title, { filters, sorting, title });
   }
   return savedFilterByCategoryValueKey;
@@ -166,6 +165,7 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
         columnsVisibility: initColumnVisibility(entity),
         enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+        rowPreview: undefined,
         rowSelection: {},
         sorting: getDefaultSorting(entity),
       },

package/src/providers/exploreState/payloads/entities.ts

@@ -10,12 +10,8 @@ import {
   SelectCategory,
   SelectedFilter,
 } from "../../../common/entities";
-import {
-  ENTITY_VIEW,
-  ListItems,
-  PaginationResponse,
-  RelatedListItems,
-} from "../../exploreState";
+import { RowPreviewState } from "../../../components/Table/features/RowPreview/entities";
+import { ListItems, PaginationResponse } from "../../exploreState";
 import { ListItem } from "../entities";
 
 /**
@@ -50,23 +46,11 @@ export interface ProcessExploreResponsePayload {
   selectCategories?: SelectCategory[];
 }
 
-/**
- * Process related response payload
- */
-export interface ProcessRelatedResponsePayload {
-  relatedListItems: RelatedListItems;
-}
-
 /**
  * Reset explore response payload.
  */
 export type ResetExploreResponsePayload = undefined;
 
-/**
- * Toggle entity view payload.
- */
-export type ToggleEntityViewPayload = ENTITY_VIEW;
-
 /**
  * Update column visibility payload.
  */
@@ -78,6 +62,7 @@ export type UpdateColumnVisibilityPayload = VisibilityState;
 export interface UpdateEntityFiltersPayload {
   entityListType: string;
   filters: SelectedFilter[];
+  sorting?: ColumnSort[];
 }
 /**
  * Update entity view access payload.
@@ -95,6 +80,11 @@ export interface UpdateFilterPayload {
   selectedValue: CategoryValueKey;
 }
 
+/**
+ * Update row preview payload.
+ */
+export type UpdateRowPreviewPayload = RowPreviewState;
+
 /**
  * Update row selection payload.
  */

package/src/providers/exploreState/utils.ts

@@ -4,6 +4,7 @@ import {
   CategoryValueKey,
   SelectedFilter,
 } from "../../common/entities";
+import { RowPreviewState } from "../../components/Table/features/RowPreview/entities";
 import { ACCESSOR_KEYS } from "../../components/TableCreator/common/constants";
 import { ExploreState, ListItems, PaginationState } from "../exploreState";
 import {
@@ -49,6 +50,18 @@ export function buildNextSavedFilterState(
   return savedFilter?.filters || [];
 }
 
+/**
+ * Closes row preview, if row preview is enabled.
+ * If row preview is enabled, the row preview state value is set to false.
+ * @param rowPreview - Row preview state.
+ * @returns row preview state with row preview value set to false.
+ */
+export function closeRowPreview(rowPreview: RowPreviewState): RowPreviewState {
+  if (!rowPreview) return rowPreview;
+  const [[key]] = Object.entries(rowPreview);
+  return { [key]: false };
+}
+
 /**
  * Returns the category group config key for the current entity.
  * @param entityPath - Entity path.
@@ -155,33 +168,6 @@ export function resetPage(paginationState: PaginationState): PaginationState {
   return nextPaginationState;
 }
 
-/**
- * Resets row selection for the current entity and entities that share the same category group config key.
- * @param state - Explore state.
- * @param categoryGroupConfigKey - Category group config key.
- * @returns entity page state mapper with row selection reset.
- */
-export function resetRowSelection(
-  state: ExploreState,
-  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
-    state.tabValue,
-    state.entityPageState
-  )
-): EntityPageStateMapper {
-  return Object.entries(state.entityPageState).reduce(
-    (acc, [entityPath, entityPageState]) => {
-      if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-        return {
-          ...acc,
-          [entityPath]: { ...entityPageState, rowSelection: {} },
-        };
-      }
-      return { ...acc, [entityPath]: entityPageState };
-    },
-    {} as EntityPageStateMapper
-  );
-}
-
 /**
  * Sets entity state for the given category group config key.
  * @param categoryGroupConfigKey - Category group config key.
@@ -221,24 +207,27 @@ export function updateEntityPageState(
 }
 
 /**
- * Updates entity page state sorting for all entities with the same category group config key.
+ * Updates entity page state for the current entity and entities that share the same category group config key.
  * @param state - Explore state.
- * @param sorting - Sorting.
+ * @param nextEntityPageState - Partial next entity page state.
+ * @param categoryGroupConfigKey - Category group config key.
  * @returns entity page state.
  */
-export function updateEntityPageStateSorting(
+export function updateEntityPageStateWithCommonCategoryGroupConfigKey(
   state: ExploreState,
-  sorting?: EntityPageState["sorting"]
-): EntityPageStateMapper {
-  if (!sorting) return state.entityPageState;
-  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+  nextEntityPageState: Partial<EntityPageState>,
+  categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
     state.tabValue,
     state.entityPageState
-  );
+  )
+): EntityPageStateMapper {
   return Object.entries(state.entityPageState).reduce(
     (acc, [entityPath, entityPageState]) => {
       if (entityPageState.categoryGroupConfigKey === categoryGroupConfigKey) {
-        return { ...acc, [entityPath]: { ...entityPageState, sorting } };
+        return {
+          ...acc,
+          [entityPath]: { ...entityPageState, ...nextEntityPageState },
+        };
       }
       return { ...acc, [entityPath]: entityPageState };
     },