@databiosphere/findable-ui 5.0.0 → 7.0.0

package/src/components/TableCreator/tableCreator.tsx

@@ -1,7 +1,12 @@
-import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
-import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core";
+import {
+  CellContext,
+  ColumnDef,
+  ColumnSort,
+  CoreOptions,
+  HeaderContext,
+  RowData,
+} from "@tanstack/react-table";
 import React, { useMemo } from "react";
-import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
@@ -25,19 +30,17 @@ export interface TableCreatorProps<T> {
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
-  pageCount?: number;
-  pages: number;
-  pageSize: number;
-  pagination?: Pagination;
-  total?: number;
 }
 
-const createCell = <T extends RowData>(config: ColumnConfig<T>) =>
-  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
+const createCell = <T extends RowData = RowData, TData = unknown>(
+  config: ColumnConfig<T>
+) =>
+  function CellCreator(cellContext: CellContext<T, TData>): JSX.Element {
     return (
       <ComponentCreator
         components={[config.componentConfig]}
-        response={row.original}
+        response={cellContext.row.original}
+        viewContext={{ cellContext }}
       />
     );
   };
@@ -52,18 +55,13 @@ const createRowSelectionCell = <T extends RowData>() =>
     return <RowSelectionCell row={row} />;
   };
 
-export const TableCreator = <T extends object>({
+export const TableCreator = <T extends RowData>({
   columns,
   defaultSort,
   getRowId,
   items,
   listView,
   loading,
-  pageCount,
-  pages,
-  pageSize,
-  pagination,
-  total,
 }: TableCreatorProps<T>): JSX.Element => {
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
@@ -98,16 +96,11 @@ export const TableCreator = <T extends object>({
       />
       <Table<T>
         columns={columnDefs}
-        count={pageCount}
         getRowId={getRowId}
         initialState={initialState}
         items={items}
         listView={listView}
         loading={loading}
-        pages={pages}
-        pageSize={pageSize}
-        pagination={pagination}
-        total={total}
       />
     </TableCreatorContainer>
   );

package/src/components/common/Button/button.tsx

@@ -1,5 +1,4 @@
-import { Button as MButton } from "@mui/material";
-import { ButtonProps as MButtonProps } from "@mui/material/Button/Button";
+import { Button as MButton, ButtonProps as MButtonProps } from "@mui/material";
 import React, { ElementType, forwardRef } from "react";
 
 /**

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const DrawerTitle = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 14px 24px;
+
+  .MuiIconButton-root {
+    margin-right: -12px;
+  }
+`;

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, Table } 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,15 +300,6 @@ 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[];
   sorting?: ColumnSort[];
@@ -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,10 +428,12 @@ 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;
   systemStatus: SystemStatus;
+  tableInstance?: Table<T>;
 }

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";
@@ -165,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.
  */
@@ -96,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 };
     },