@databiosphere/findable-ui 15.0.2 → 16.0.0

package/src/components/Table/features/RowPosition/utils.ts

@@ -0,0 +1,80 @@
+import {
+  InitialTableState,
+  RowData,
+  RowModel,
+  Table,
+  TableState,
+} from "@tanstack/react-table";
+import { ACCESSOR_KEYS } from "../../../TableCreator/common/constants";
+import { DEFAULT_PAGINATION } from "../constants";
+
+/**
+ * Returns row model, with getter for row position.
+ * @param table - Table.
+ * @param getRowModel - Table getRowModel function.
+ * @returns row model.
+ */
+export function getRowModel<T extends RowData>(
+  table: Table<T>,
+  getRowModel: Table<T>[`getRowModel`]
+): RowModel<T> {
+  const rowModel = getRowModel();
+  rowModel.rows.forEach(({ id }, i) => {
+    rowModel.rowsById[id].getRowPosition = (): number =>
+      calculateRowPosition(table, i);
+  });
+  return rowModel;
+}
+
+/**
+ * Returns the position of the row in the table.
+ * @param rowId - Row ID.
+ * @param table - Table.
+ * @returns row position.
+ */
+export function getRowPosition<T extends RowData>(
+  rowId: string,
+  table: Table<T>
+): number {
+  const { getRowModel } = table;
+  const { rowsById } = getRowModel();
+  return rowsById[rowId].getRowPosition();
+}
+
+/**
+ * Calculates the position of the row in the table.
+ * @param table - Table.
+ * @param index - Row index.
+ * @returns row position.
+ */
+function calculateRowPosition<T extends RowData>(
+  table: Table<T>,
+  index: number
+): number {
+  const { getState } = table;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = getState();
+  return pageIndex * pageSize + (index + 1);
+}
+
+/**
+ * Returns the initial table state.
+ * @param initialState - Initial state.
+ * @returns initial state.
+ */
+export function initInitialState(
+  initialState?: InitialTableState
+): Partial<TableState> {
+  return {
+    ...initialState,
+    columnVisibility: {
+      [ACCESSOR_KEYS.ROW_POSITION]: false,
+      ...initialState?.columnVisibility,
+    },
+    pagination: {
+      ...DEFAULT_PAGINATION,
+      ...initialState?.pagination,
+    },
+  };
+}

package/src/components/Table/features/constants.ts

@@ -0,0 +1,10 @@
+import { PaginationState } from "@tanstack/react-table";
+
+/**
+ * Default TanStack pagination state.
+ * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
+ */
+export const DEFAULT_PAGINATION: PaginationState = {
+  pageIndex: 0,
+  pageSize: 10,
+};

package/src/components/Table/features/entities.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { RowPositionRow } from "./RowPosition/types";
 import {
   RowPreviewInstance,
   RowPreviewOptions,
@@ -9,5 +10,5 @@ import {
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
 export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
 export type CustomFeatureOptions = RowPreviewOptions;
-export type CustomFeatureRow = RowPreviewRow;
+export type CustomFeatureRow = RowPositionRow & RowPreviewRow;
 export type CustomFeatureTableState = RowPreviewTableState;

package/src/components/Table/table.tsx

@@ -24,7 +24,7 @@ import {
   PAGINATION_DIRECTION,
   SORT_DIRECTION,
 } from "../../common/analytics/entities";
-import { ListViewConfig } from "../../config/entities";
+import { ListConfig, ListViewConfig } from "../../config/entities";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
@@ -49,6 +49,7 @@ import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { ROW_POSITION } from "./features/RowPosition/constants";
 import { ROW_PREVIEW } from "./features/RowPreview/constants";
 import { RowPreviewState } from "./features/RowPreview/entities";
 import { GridTable } from "./table.styles";
@@ -60,6 +61,7 @@ export interface TableProps<T extends RowData> {
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
+  tableOptions?: ListConfig<T>["tableOptions"];
 }
 
 /**
@@ -72,6 +74,7 @@ export interface TableProps<T extends RowData> {
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
+ * @param tableProps.tableOptions - TanStack table options.
  * @returns Configured table element for display.
  */
 export const TableComponent = <T extends RowData>({
@@ -80,6 +83,7 @@ export const TableComponent = <T extends RowData>({
   initialState,
   items,
   listView,
+  tableOptions,
 }: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
 TableProps<T>): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
@@ -154,8 +158,24 @@ TableProps<T>): JSX.Element => {
     rowSelection,
     sorting,
   };
+  /**
+   * TODO: Refactor `ListConfig` to follow the API patterns of the TanStack Table library.
+   * TODO: Update `ColumnConfig` to follow the `ColumnDef` API of TanStack Table.
+   * - Standardize column definitions to leverage the full power of TanStack Table's feature set and improve compatibility.
+   * TODO: Deprecate the following properties:
+   * - `defaultSort` in `ListConfig`: Replace this with TanStack Table's `tableOptions.initialState.sorting` feature.
+   * - `columnVisible` in `ColumnConfig`: Replace this with TanStack Table's `tableOptions.initialState.columnVisibility` feature.
+   * TODO: Define `columnVisibility` and `sorting` directly within `ListConfig` via the `tableOptions.initialState` property.
+   * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
+   * - It will also allow for direct configuration of other TanStack Table options such as `columnOrder` via `tableOptions.initialState.columnOrder`.
+   *
+   * Current Workaround:
+   * - The `initialState` property from `tableOptions` is destructured to separate it from other options. This allows the remaining properties in `tableOptions` to be passed directly to the TanStack Table configuration without breaking the current ListConfig `defaultSort` and `columnVisible` properties.
+   */
+  const { initialState: _initialState, ...restTableOptions } =
+    tableOptions ?? {};
   const tableInstance = useReactTable({
-    _features: [ROW_PREVIEW],
+    _features: [ROW_POSITION, ROW_PREVIEW],
     columns,
     data: items,
     enableColumnFilters: true, // client-side filtering.
@@ -174,7 +194,7 @@ TableProps<T>): JSX.Element => {
     getPaginationRowModel: getPaginationRowModel(),
     getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
-    initialState,
+    initialState: { ...initialState, ..._initialState }, // `sorting` and `columnVisibility` are managed by the ExploreState.
     manualPagination: true,
     manualSorting: !clientFiltering,
     onColumnVisibilityChange,
@@ -183,6 +203,7 @@ TableProps<T>): JSX.Element => {
     onSortingChange,
     pageCount,
     state,
+    ...restTableOptions,
   });
   const {
     getAllColumns,

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

@@ -3,6 +3,7 @@ import { RowSelectionCell } from "../../Table/components/TableCell/components/Ro
 import { BaseColumnConfig } from "./entities";
 
 export const ACCESSOR_KEYS = {
+  ROW_POSITION: "rowPosition",
   SELECT: "select",
 };
 

package/src/components/TableCreator/tableCreator.tsx

@@ -7,10 +7,15 @@ import {
   RowData,
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
-import { ColumnConfig, ListViewConfig } from "../../config/entities";
+import {
+  ColumnConfig,
+  ListConfig,
+  ListViewConfig,
+} from "../../config/entities";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
+import { COLUMN_DEF } from "../Table/common/columnDef";
 import {
   arrIncludesSome,
   getInitialState,
@@ -30,6 +35,7 @@ export interface TableCreatorProps<T> {
   items: T[];
   listView?: ListViewConfig;
   loading?: boolean;
+  tableOptions?: ListConfig<T>["tableOptions"];
 }
 
 const createCell = <T extends RowData = RowData, TData = unknown>(
@@ -62,6 +68,7 @@ export const TableCreator = <T extends RowData>({
   items,
   listView,
   loading,
+  tableOptions,
 }: TableCreatorProps<T>): JSX.Element => {
   const columnDefs: ColumnDef<T>[] = useMemo(
     () =>
@@ -76,6 +83,8 @@ export const TableCreator = <T extends RowData>({
           return acc;
         },
         [
+          /* Initialize column definitions with the "row position" column */
+          COLUMN_DEF.ROW_POSITION,
           /* Initialize column definitions with the "select" column */
           {
             ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
@@ -101,6 +110,7 @@ export const TableCreator = <T extends RowData>({
         items={items}
         listView={listView}
         loading={loading}
+        tableOptions={tableOptions}
       />
     </TableCreatorContainer>
   );

package/src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -3,6 +3,7 @@ import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { BaseComponentProps } from "../../types";
+import { LINK_PROPS } from "./constants";
 
 export interface Breadcrumb {
   path: string;
@@ -25,7 +26,7 @@ export const Breadcrumbs = ({
         <MBreadcrumbs className={className} separator={Separator}>
           {breadcrumbs.map(({ path, text }, b) =>
             path ? (
-              <Link component={NLink} key={b} href={path}>
+              <Link {...LINK_PROPS} component={NLink} key={b} href={path}>
                 {text}
               </Link>
             ) : (

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

@@ -0,0 +1,6 @@
+import { LinkProps } from "@mui/material";
+import { LINK_PROPS as MUI_LINK_PROPS } from "../../../styles/common/mui/link";
+
+export const LINK_PROPS: Partial<LinkProps> = {
+  underline: MUI_LINK_PROPS.UNDERLINE.HOVER,
+};

package/src/config/entities.ts

@@ -1,5 +1,12 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnSort, RowData, Table } from "@tanstack/react-table";
+import {
+  CellContext,
+  ColumnMeta,
+  ColumnSort,
+  RowData,
+  Table,
+  TableOptions,
+} from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -94,6 +101,7 @@ export interface ColumnConfig<
   disableSorting?: boolean; // Disables sorting for the column.
   header: string;
   id: string; // The unique identifier for the column.
+  meta?: ColumnMeta<T, unknown>;
   tooltip?: string; // TODO review need to define `tooltip` field - it is currently not in use.
   width: GridTrackSize;
 }
@@ -161,7 +169,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
   explorerTitle?: SiteConfig["explorerTitle"];
   getId?: GetIdFunction<T>;
   getTitle?: GetTitleFunction<T>;
-  list: ListConfig;
+  list: ListConfig<T>;
   listView?: ListViewConfig;
   options?: Options;
   overrides?: Override[];
@@ -249,9 +257,10 @@ export type GridTrackSize =
  * List configuration.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model can receive any model as type
-export interface ListConfig<T = any> {
+export interface ListConfig<T extends RowData> {
   columns: ColumnConfig<T>[];
   defaultSort?: ColumnSort; // Establishes initial table state "sorting" state.
+  tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">; // Additional TanStack Table's options.
 }
 
 /**

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

@@ -143,12 +143,17 @@ function initCategoryGroups(
  */
 function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
   const {
-    list: { columns },
+    list: {
+      columns,
+      tableOptions: { initialState: { columnVisibility = {} } = {} } = {},
+    },
     listView: { enableRowSelection = false } = {},
   } = entityConfig;
   return {
+    [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibilty` is initialized from columns configuration.
     [ACCESSOR_KEYS.SELECT]: enableRowSelection,
     ...getInitialTableColumnVisibility(columns),
+    ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
   };
 }
 

package/src/styles/common/mui/link.ts

@@ -0,0 +1,15 @@
+import { LinkProps } from "@mui/material";
+
+type LinkPropsOptions = {
+  UNDERLINE: typeof UNDERLINE;
+};
+
+export const UNDERLINE: Record<string, LinkProps["underline"]> = {
+  ALWAYS: "always",
+  HOVER: "hover",
+  NONE: "none",
+};
+
+export const LINK_PROPS: LinkPropsOptions = {
+  UNDERLINE,
+};

package/src/styles/common/mui/tableCell.ts

@@ -0,0 +1,40 @@
+import { TableCellProps } from "@mui/material";
+
+type TableCellPropsOptions = {
+  ALIGN: typeof ALIGN;
+  PADDING: typeof PADDING;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const ALIGN: Record<string, TableCellProps["align"]> = {
+  CENTER: "center",
+  INHERIT: "inherit",
+  JUSTIFY: "justify",
+  LEFT: "left",
+  RIGHT: "right",
+};
+
+const PADDING: Record<string, TableCellProps["padding"]> = {
+  CHECKBOX: "checkbox",
+  NONE: "none",
+  NORMAL: "normal",
+};
+
+const SIZE: Record<string, TableCellProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const VARIANT: Record<string, TableCellProps["variant"]> = {
+  BODY: "body",
+  FOOTER: "footer",
+  HEAD: "head",
+};
+
+export const TABLE_CELL_PROPS: TableCellPropsOptions = {
+  ALIGN,
+  PADDING,
+  SIZE,
+  VARIANT,
+};

package/src/styles/common/mui/typography.ts

@@ -0,0 +1,5 @@
+import { TypographyOwnProps } from "@mui/material";
+
+export const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
+  INHERIT: "inherit",
+};

package/src/theme/common/components.ts

@@ -1302,38 +1302,6 @@ export const MuiTab = (theme: Theme): Components["MuiTab"] => {
   };
 };
 
-/**
- * MuiTableCell Component
- * @param theme - Theme.
- * @returns MuiTableCell component theme styles.
- */
-export const MuiTableCell = (theme: Theme): Components["MuiTableCell"] => {
-  return {
-    styleOverrides: {
-      body: {
-        ...theme.typography[TEXT_BODY_400],
-      },
-      head: {
-        ...theme.typography[TEXT_BODY_SMALL_500],
-        padding: "20px",
-      },
-      paddingCheckbox: {
-        paddingRight: 0,
-        width: "unset",
-      },
-      root: {
-        padding: "18px 20px",
-      },
-      sizeSmall: {
-        padding: "14px 20px",
-      },
-      stickyHeader: {
-        boxShadow: `0 1px 0 ${theme.palette.smoke.main}`,
-      },
-    },
-  };
-};
-
 /**
  * MuiTableSortLabel Component
  */

package/src/theme/components/index.ts

@@ -1,2 +1,3 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiTableCell } from "./muiTableCell";

package/src/theme/components/muiTableCell.ts

@@ -0,0 +1,50 @@
+import { Components, Theme } from "@mui/material";
+import { TABLE_CELL_PROPS } from "../../styles/common/mui/tableCell";
+import { TEXT_BODY_400, TEXT_BODY_SMALL_500 } from "../common/typography";
+
+export const MuiTableCell = (theme: Theme): Components["MuiTableCell"] => {
+  const paletteSmoke = theme.palette.smoke;
+  const typography = theme.typography;
+  return {
+    defaultProps: {},
+    styleOverrides: {
+      root: {
+        minHeight: 56,
+        stickyHeader: {
+          boxShadow: `0 1px 0 ${paletteSmoke.main}`,
+        },
+        variants: [
+          {
+            props: { size: TABLE_CELL_PROPS.SIZE.MEDIUM },
+            style: { padding: "10px 16px" },
+          },
+          {
+            props: { size: TABLE_CELL_PROPS.SIZE.SMALL },
+            style: { padding: "8px 16px" },
+          },
+          {
+            props: { padding: TABLE_CELL_PROPS.PADDING.CHECKBOX },
+            style: { paddingRight: 0, width: "unset" },
+          },
+          {
+            props: { padding: TABLE_CELL_PROPS.PADDING.NONE },
+            style: { padding: 0 },
+          },
+          {
+            props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
+            style: {
+              ...typography[TEXT_BODY_400],
+            },
+          },
+          {
+            props: { variant: TABLE_CELL_PROPS.VARIANT.HEAD },
+            style: {
+              ...typography[TEXT_BODY_SMALL_500],
+              backgroundColor: paletteSmoke.lightest,
+            },
+          },
+        ],
+      },
+    },
+  };
+};

package/src/theme/theme.ts

@@ -107,7 +107,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiSelect: C.MuiSelect,
     MuiSvgIcon: C.MuiSvgIcon(theme),
     MuiTab: C.MuiTab(theme),
-    MuiTableCell: C.MuiTableCell(theme),
+    MuiTableCell: M.MuiTableCell(theme),
     MuiTableSortLabel: C.MuiTableSortLabel,
     MuiTabs: C.MuiTabs(theme),
     MuiToggleButton: C.MuiToggleButton(theme),

package/src/views/ContentView/contentView.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import { LayoutStyle } from "../../components/Layout/components/ContentLayout/common/entities";
 import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
+import { BaseComponentProps } from "../../components/types";
 
 export interface ContentViewProps {
   content: ReactNode;
@@ -10,13 +11,15 @@ export interface ContentViewProps {
 }
 
 export const ContentView = ({
+  className,
   content,
   layoutStyle,
   navigation,
   outline,
-}: ContentViewProps): JSX.Element => {
+}: BaseComponentProps & ContentViewProps): JSX.Element => {
   return (
     <ContentLayout
+      className={className}
       content={content}
       layoutStyle={layoutStyle}
       navigation={navigation}

package/src/views/ExploreView/exploreView.tsx

@@ -248,7 +248,7 @@ function renderList(
 ): JSX.Element {
   const { listItems, loading, tabValue } = exploreState;
   const { getId: getRowId, list, listView } = entityConfig;
-  const { columns: columnsConfig, defaultSort } = list;
+  const { columns: columnsConfig, defaultSort, tableOptions } = list;
 
   if (!exploreState || !tabValue) {
     return <></>; //TODO: return the loading UI component
@@ -268,6 +268,7 @@ function renderList(
       items={listItems ?? []}
       listView={listView}
       loading={loading}
+      tableOptions={tableOptions}
     />
   );
 }

package/types/data-explorer-ui.d.ts

@@ -11,6 +11,7 @@ import type {} from "@mui/material/styles/createPalette";
 import { PaletteColorOptions } from "@mui/material/styles/createPalette";
 import { TypographyStyleOptions } from "@mui/material/styles/createTypography";
 import type {} from "@mui/material/SvgIcon";
+import type {} from "@mui/material/TableCell";
 import type {} from "@mui/material/Tabs";
 import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
@@ -266,6 +267,7 @@ declare module "@emotion/react" {
 declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
   interface ColumnMeta<TData extends RowData, TValue> {
+    align?: TableCellProps["align"];
     columnPinned?: boolean;
     enableSortingInteraction?: boolean; // Flag to enable sorting interaction UI (e.g. sort icon) button; defaults to true.
     header?: string;