@databiosphere/findable-ui 2.2.0 → 3.1.0

package/src/components/TableCreator/common/constants.ts

@@ -0,0 +1,26 @@
+import { RowData } from "@tanstack/react-table";
+import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { BaseColumnConfig } from "./entities";
+
+export const ACCESSOR_KEYS = {
+  SELECT: "select",
+};
+
+export const COLUMN_CONFIGS: Record<
+  string,
+  BaseColumnConfig<RowData, unknown>
+> = {
+  SELECT: {
+    columnPinned: false,
+    columnVisible: false,
+    componentConfig: { component: RowSelectionCell },
+    disableHiding: true,
+    disableSorting: true,
+    header: ACCESSOR_KEYS.SELECT,
+    id: ACCESSOR_KEYS.SELECT,
+    meta: {
+      header: "",
+    },
+    width: "max-content",
+  },
+};

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

@@ -0,0 +1,6 @@
+import { ColumnMeta } from "@tanstack/table-core";
+import { ColumnConfig } from "../../../config/entities";
+
+export interface BaseColumnConfig<T, TValue> extends ColumnConfig<T> {
+  meta?: ColumnMeta<T, TValue>;
+}

package/src/components/TableCreator/common/utils.ts

@@ -0,0 +1,33 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./entities";
+
+/**
+ * Builds a base column definition.
+ * @param baseColumnConfig - Base column configuration.
+ * @returns column definition.
+ */
+export function buildBaseColumnDef<T, TValue>(
+  baseColumnConfig: BaseColumnConfig<T, TValue>
+): ColumnDef<T> {
+  const {
+    columnPinned,
+    disableHiding,
+    disableSorting,
+    header,
+    id,
+    meta,
+    width,
+  } = baseColumnConfig;
+  return {
+    accessorKey: id,
+    enableHiding: !disableHiding,
+    enableSorting: !disableSorting,
+    header,
+    id,
+    meta: {
+      columnPinned,
+      header: meta ? meta.header : header,
+      width,
+    },
+  };
+}

package/src/components/TableCreator/tableCreator.tsx

@@ -1,4 +1,5 @@
 import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
+import { CoreOptions, HeaderContext, RowData } from "@tanstack/table-core";
 import React, { useMemo } from "react";
 import { Pagination } from "../../common/entities";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
@@ -10,12 +11,17 @@ import {
   getInitialState,
   sortingFn,
 } from "../Table/common/utils";
+import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
 import { Table } from "../Table/table";
+import { COLUMN_CONFIGS } from "./common/constants";
+import { buildBaseColumnDef } from "./common/utils";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
   defaultSort: ColumnSort | undefined;
+  getRowId?: CoreOptions<T>["getRowId"];
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
@@ -26,9 +32,8 @@ export interface TableCreatorProps<T> {
   total?: number;
 }
 
-const createCell = <T extends object>(config: ColumnConfig<T>) =>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We can't determine the cell type
-  function CellCreator({ row }: CellContext<T, any>): JSX.Element {
+const createCell = <T extends RowData>(config: ColumnConfig<T>) =>
+  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
     return (
       <ComponentCreator
         components={[config.componentConfig]}
@@ -37,9 +42,20 @@ const createCell = <T extends object>(config: ColumnConfig<T>) =>
     );
   };
 
+const createHeaderSelectionCell = <T extends RowData>() =>
+  function CellCreator({ table }: HeaderContext<T, unknown>): JSX.Element {
+    return <HeadSelectionCell tableInstance={table} />;
+  };
+
+const createRowSelectionCell = <T extends RowData>() =>
+  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
+    return <RowSelectionCell row={row} />;
+  };
+
 export const TableCreator = <T extends object>({
   columns,
   defaultSort,
+  getRowId,
   items,
   listView,
   loading,
@@ -51,21 +67,25 @@ export const TableCreator = <T extends object>({
 }: TableCreatorProps<T>): JSX.Element => {
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
-      columns.map(({ disableHiding, disableSorting, ...columnConfig }) => ({
-        accessorKey: columnConfig.id,
-        cell: createCell(columnConfig),
-        enableHiding: !disableHiding,
-        enableSorting: !disableSorting,
-        filterFn: arrIncludesSome,
-        header: columnConfig.header,
-        id: columnConfig.id,
-        meta: {
-          columnPinned: columnConfig.columnPinned,
-          header: columnConfig.header,
-          width: columnConfig.width,
+      columns.reduce(
+        (acc, columnConfig) => {
+          acc.push({
+            ...buildBaseColumnDef(columnConfig),
+            cell: createCell(columnConfig),
+            filterFn: arrIncludesSome,
+            sortingFn: sortingFn,
+          });
+          return acc;
         },
-        sortingFn: sortingFn,
-      })),
+        [
+          /* Initialize column definitions with the "select" column */
+          {
+            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
+            cell: createRowSelectionCell(),
+            header: createHeaderSelectionCell(),
+          },
+        ] as ColumnDef<T>[]
+      ),
     [columns]
   );
   const initialState = getInitialState(columns, defaultSort);
@@ -79,6 +99,7 @@ export const TableCreator = <T extends object>({
       <Table<T>
         columns={columnDefs}
         count={pageCount}
+        getRowId={getRowId}
         initialState={initialState}
         items={items}
         listView={listView}

package/src/components/common/Alert/components/AlertText/alertText.styles.ts

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+
+export const AlertText = styled.div`
+  ul {
+    padding-left: 24px;
+    margin: 8px 0;
+
+    li {
+      margin: 4px 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+`;

package/src/components/common/Button/components/DropdownButton/dropdownButton.styles.ts

@@ -1,11 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { smokeLightest } from "../../../../../styles/common/mixins/colors";
 import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
 
+interface Props {
+  open: boolean;
+}
+
 // Dropdown button with "secondary" styles.
-export const DropdownButton = styled(ButtonSecondary)`
+export const DropdownButton = styled(ButtonSecondary, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
   padding-right: 8px;
 
   .MuiButton-endIcon {
     margin-left: -6px;
   }
+
+  ${({ open, ...props }) =>
+    open &&
+    css`
+      background-color: ${smokeLightest(props)};
+    `}
 `;

package/src/components/common/Button/components/DropdownButton/dropdownButton.tsx

@@ -3,15 +3,23 @@ import React from "react";
 import { ButtonProps } from "../../button";
 import { DropdownButton as Button } from "./dropdownButton.styles";
 
-export type DropdownButtonProps = Exclude<ButtonProps, "StartIcon">;
+export interface DropdownButtonProps extends Exclude<ButtonProps, "StartIcon"> {
+  open?: boolean;
+}
 
 export const DropdownButton = ({
   children,
   disabled = false,
+  open = false,
   ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */
 }: DropdownButtonProps): JSX.Element => {
   return (
-    <Button disabled={disabled} EndIcon={ArrowDropDownRoundedIcon} {...props}>
+    <Button
+      disabled={disabled}
+      EndIcon={ArrowDropDownRoundedIcon}
+      open={open}
+      {...props}
+    >
       {children}
     </Button>
   );

package/src/components/common/CustomIcon/components/IndeterminateIcon/indeterminateIcon.tsx

@@ -0,0 +1,23 @@
+import { SvgIcon } from "@mui/material";
+import React from "react";
+import { CustomSVGIconProps } from "../../common/entities";
+
+/**
+ * Custom indeterminate icon.
+ */
+
+export const IndeterminateIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: CustomSVGIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M0 4C0 1.79086 1.79086 0 4 0H14C16.2091 0 18 1.79086 18 4V14C18 16.2091 16.2091 18 14 18H4C1.79086 18 0 16.2091 0 14V4Z"
+        fill="currentColor"
+      />
+      <rect x="5" y="8" width="8" height="2" rx="1" fill="white" />
+    </SvgIcon>
+  );
+};

package/src/components/common/Dialog/dialog.tsx

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

package/src/components/common/DropdownMenu/common/constants.ts

@@ -0,0 +1,7 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+
+export const DEFAULT_DROPDOWN_MENU_PROPS: Partial<MMenuProps> = {
+  anchorOrigin: { horizontal: "right", vertical: "bottom" },
+  slotProps: { paper: { variant: "menu" } },
+  transformOrigin: { horizontal: "right", vertical: "top" },
+};

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

@@ -0,0 +1,11 @@
+import {
+  ButtonProps as MButtonProps,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+
+export interface DropdownMenuItemProps {
+  closeMenu: () => void;
+}
+
+export type DropdownMenuButtonProps = MButtonProps & { open?: boolean };
+export type DropdownMenuIconButtonProps = MIconButtonProps & { open?: boolean };

package/src/components/common/DropdownMenu/components/MenuItem/menuItem.tsx

@@ -0,0 +1,24 @@
+import {
+  ListItemText as MListItemText,
+  MenuItem as MMenuItem,
+  MenuItemProps as MMenuItemProps,
+} from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface MenuItemProps extends MMenuItemProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const MenuItem = ({
+  children,
+  className,
+  onClick,
+  ...props /* Spread props to allow for Mui MenuItem specific prop overrides e.g. "disableGutters". */
+}: MenuItemProps): JSX.Element => {
+  return (
+    <MMenuItem className={className} onClick={onClick} {...props}>
+      <MListItemText disableTypography>{children}</MListItemText>
+    </MMenuItem>
+  );
+};

package/src/components/common/DropdownMenu/dropdownMenu.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+
+export const Menu = styled(MMenu)`
+  .MuiPaper-menu {
+    margin: 4px 0;
+  }
+`;

package/src/components/common/DropdownMenu/dropdownMenu.tsx

@@ -0,0 +1,48 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import React, { ElementType, Fragment, MouseEvent, useState } from "react";
+import { DEFAULT_DROPDOWN_MENU_PROPS } from "./common/constants";
+import {
+  DropdownMenuButtonProps,
+  DropdownMenuIconButtonProps,
+  DropdownMenuItemProps,
+} from "./common/entities";
+import { Menu } from "./dropdownMenu.styles";
+
+export interface DropdownMenuProps
+  extends Omit<MMenuProps, "children" | "open"> {
+  Button:
+    | ElementType<DropdownMenuButtonProps>
+    | ElementType<DropdownMenuIconButtonProps>;
+  children?: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
+  className?: string;
+}
+
+export const DropdownMenu = ({
+  Button,
+  children,
+  className,
+  ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
+}: DropdownMenuProps): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const closeMenu = (): void => setAnchorEl(null);
+  return (
+    <Fragment>
+      <Button
+        onClick={(event: MouseEvent<HTMLButtonElement>): void =>
+          setAnchorEl(event.currentTarget)
+        }
+        open={Boolean(anchorEl)}
+      />
+      <Menu
+        {...DEFAULT_DROPDOWN_MENU_PROPS}
+        anchorEl={anchorEl}
+        className={className}
+        onClose={closeMenu}
+        open={Boolean(anchorEl)}
+        {...props}
+      >
+        {children ? children({ closeMenu }) : null}
+      </Menu>
+    </Fragment>
+  );
+};

package/src/components/common/IconButton/iconButton.styles.ts

@@ -1,7 +1,25 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IconButton as MIconButton } from "@mui/material";
+import { smokeLightest } from "../../../styles/common/mixins/colors";
 import { IconButton } from "./iconButton";
 
+interface Props {
+  open: boolean;
+}
+
+export const Button = styled(MIconButton, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<Props>`
+  ${({ open, ...props }) =>
+    open &&
+    css`
+      &.MuiIconButton-root {
+        background-color: ${smokeLightest(props)};
+      }
+    `}
+`;
+
 // Primary icon button.
 export const IconButtonPrimary = styled(IconButton)`
   background-color: ${({ theme }) => theme.palette.primary.main};

package/src/components/common/IconButton/iconButton.tsx

@@ -1,8 +1,9 @@
 import {
-  IconButton as MIconButton,
   IconButtonProps as MIconButtonProps,
+  IconProps as MIconProps,
 } from "@mui/material";
 import React, { ElementType } from "react";
+import { Button } from "./iconButton.styles";
 
 /**
  * Basic icon button component.
@@ -11,24 +12,22 @@ import React, { ElementType } from "react";
 
 export interface IconButtonProps extends MIconButtonProps {
   className?: string;
-  disabled?: boolean;
   Icon: ElementType;
+  iconProps?: MIconProps;
+  open?: boolean;
 }
 
 export const IconButton = ({
   className,
-  disabled = false,
   Icon,
+  iconProps = { fontSize: "small" },
+  open = false,
+  size = "large",
   ...props /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */
 }: IconButtonProps): JSX.Element => {
   return (
-    <MIconButton
-      className={className}
-      disabled={disabled}
-      size="large"
-      {...props}
-    >
-      <Icon fontSize="small" />
-    </MIconButton>
+    <Button className={className} open={open} size={size} {...props}>
+      <Icon {...iconProps} />
+    </Button>
   );
 };

package/src/config/entities.ts

@@ -3,6 +3,7 @@ import { ColumnSort } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import {
   CategoryKey,
+  SelectCategoryValueView,
   SelectedFilter,
   SelectedFilterValue,
 } from "../common/entities";
@@ -77,6 +78,9 @@ export interface CategoryGroup {
 export interface CategoryConfig {
   key: string;
   label: string;
+  mapSelectCategoryValue?: (
+    selectCategoryValue: SelectCategoryValueView
+  ) => SelectCategoryValueView;
 }
 
 /**
@@ -261,8 +265,10 @@ export interface ListConfig<T = any> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
+  enableRowSelection?: boolean;
   listHero?: ComponentsConfig;
   relatedView?: RelatedViewConfig;
+  rowSelectionView?: ComponentsConfig;
   subTitleHero?: ComponentsConfig;
 }
 

package/src/hooks/useCategoryFilter.ts

@@ -73,11 +73,14 @@ function buildCategoryView(
   categoryValueViews: SelectCategoryValueView[],
   categoryConfigs: CategoryConfig[]
 ): SelectCategoryView {
+  const categoryConfig = findCategoryConfig(category.key, categoryConfigs);
+  const mapSelectCategoryValue =
+    categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     isDisabled: false,
     key: category.key,
-    label: getCategoryLabel(category.key, categoryConfigs),
-    values: categoryValueViews,
+    label: getCategoryLabel(category.key, categoryConfig),
+    values: categoryValueViews.map(mapSelectCategoryValue),
   };
 }
 
@@ -192,22 +195,43 @@ function getCategorySelectedFilter(
 /**
  * Get the label for the given category key as per the config.
  * @param key - Key of category to find label of.
- * @param categoryConfigs - Category accept list.
+ * @param categoryConfig - Category.
  * @returns the display value for the given category.
  */
 function getCategoryLabel(
   key: string,
-  categoryConfigs: CategoryConfig[]
+  categoryConfig?: CategoryConfig
 ): string {
-  const categoryConfig = categoryConfigs.find(
-    (categoryConfig) => categoryConfig.key === key
-  );
   if (!categoryConfig) {
     return key;
   }
   return categoryConfig.label;
 }
 
+/**
+ * Default function returning select category value, unmodified.
+ * @param selectCategoryValue - Select category value.
+ * @returns original select category value.
+ */
+export function getSelectCategoryValue(
+  selectCategoryValue: SelectCategoryValue
+): SelectCategoryValue {
+  return selectCategoryValue;
+}
+
+/**
+ * Returns the category config for the given category config key.
+ * @param key - Category config key.
+ * @param categoryConfigs - Category configs.
+ * @returns category config.
+ */
+function findCategoryConfig(
+  key: string,
+  categoryConfigs: CategoryConfig[]
+): CategoryConfig | undefined {
+  return categoryConfigs.find((categoryConfig) => categoryConfig.key === key);
+}
+
 /**
  * Determine if given category value is selected.
  * @param categoryValueKey - The key of the category value to check if selected in the filter state.

package/src/providers/exploreState/entities.ts

@@ -1,4 +1,5 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, RowSelectionState } from "@tanstack/react-table";
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import {
   CategoryValueKey,
   SelectCategory,
@@ -15,7 +16,9 @@ import {
 
 export interface EntityPageState {
   categoryGroupConfigKey: CategoryGroupConfigKey;
-  columnsVisibility: Record<string, boolean>;
+  columnsVisibility: VisibilityState;
+  enableRowSelection: boolean;
+  rowSelection: RowSelectionState;
   sorting: ColumnSort[];
 }
 
@@ -44,6 +47,9 @@ export interface EntityStateSavedFilter extends Omit<SavedFilter, "sort"> {
   sorting?: ColumnSort[];
 }
 
+// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO revisit when adding react query or similar
+export type ListItem = any;
+
 export type SavedFilterByCategoryValueKey = Map<
   CategoryValueKey,
   EntityStateSavedFilter

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

@@ -1,5 +1,7 @@
+import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import { SelectCategory, SelectedFilter } from "../../../common/entities";
 import { getInitialTableColumnVisibility } from "../../../components/Table/common/utils";
+import { ACCESSOR_KEYS } from "../../../components/TableCreator/common/constants";
 import {
   CategoryConfig,
   CategoryGroup,
@@ -138,6 +140,22 @@ function initCategoryGroups(
     ?.categoryGroups;
 }
 
+/**
+ * Initializes column visibility for the given entity.
+ * @param entityConfig - Entity config.
+ * @returns column visibility.
+ */
+function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
+  const {
+    list: { columns },
+    listView: { enableRowSelection = false } = {},
+  } = entityConfig;
+  return {
+    [ACCESSOR_KEYS.SELECT]: enableRowSelection,
+    ...getInitialTableColumnVisibility(columns),
+  };
+}
+
 /**
  * Initializes entity page state.
  * @param config - Site config.
@@ -149,7 +167,9 @@ function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
       ...acc,
       [entity.route]: {
         categoryGroupConfigKey: initCategoryGroupConfigKey(config, entity),
-        columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
+        columnsVisibility: initColumnVisibility(entity),
+        enableRowSelection: Boolean(entity.listView?.enableRowSelection),
+        rowSelection: {},
         sorting: getDefaultSorting(entity),
       },
     };