@databiosphere/findable-ui 5.0.0 → 6.0.0

package/src/components/Table/components/TableCell/components/NTagCell/nTagCell.tsx

@@ -0,0 +1,70 @@
+import {
+  Chip as MChip,
+  ChipProps as MChipProps,
+  Typography,
+} from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+import { NTag } from "./components/NTag/nTag";
+
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+
+export type MetadataValue = string;
+
+export interface NTagCellProps {
+  label: string;
+  TypographyProps?: TypographyProps;
+  values: MetadataValue[];
+}
+
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues: MetadataValue[]): string {
+  return metadataValues.join(", ");
+}
+
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
+  return <MChip ref={ref} {...props} />;
+});
+
+export const NTagCell = ({
+  label,
+  TypographyProps,
+  values,
+}: NTagCellProps): JSX.Element => {
+  const metadataCount = values.length;
+  const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+  return (
+    <>
+      {showNTag ? (
+        <NTag
+          Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
+          TooltipTitle={
+            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
+              {stringifyMetadataValues(values)}
+            </Typography>
+          }
+        />
+      ) : (
+        values.map((value, v) => (
+          <Typography
+            key={`${value}${v}`}
+            variant="inherit"
+            {...TypographyProps}
+          >
+            {value}
+          </Typography>
+        ))
+      )}
+    </>
+  );
+};

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -1,11 +1,10 @@
 import { Checkbox as MCheckbox } from "@mui/material";
-import { Row } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface RowSelectionCellProps<T> {
+export interface RowSelectionCellProps<T extends RowData> {
   row: Row<T>;
 }
 

package/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -1,12 +1,11 @@
 import { Checkbox } from "@mui/material";
-import { Table } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface HeadSelectionCellProps<T> {
+export interface HeadSelectionCellProps<T extends RowData> {
   tableInstance: Table<T>;
 }
 

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -4,18 +4,18 @@ import {
   TableRow as MTableRow,
   TableSortLabel,
 } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
 import { getTableCellPadding } from "../TableCell/common/utils";
 
-export interface TableHeadProps<T> {
+export interface TableHeadProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
-export const TableHead = <T extends object>({
+export const TableHead = <T extends RowData>({
   rowDirection,
   tableInstance,
 }: TableHeadProps<T>): JSX.Element => {

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -0,0 +1,22 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TableRow as MTableRow } from "@mui/material";
+import { primaryLightest } from "../../../../styles/common/mixins/colors";
+
+interface Props {
+  isPreview?: boolean;
+}
+
+export const TableRow = styled(MTableRow, {
+  shouldForwardProp: (prop) => prop !== "isPreview",
+})<Props>`
+  && {
+    transition: background-color 300ms ease-in;
+
+    ${(props) =>
+      props.isPreview &&
+      css`
+        background-color: ${primaryLightest(props)};
+      `}
+  }
+`;

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,16 +1,16 @@
-import { TableRow as MTableRow } from "@mui/material";
-import { Row, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../TableRow/tableRow.styles";
 
-export interface CollapsableRowsProps<T> {
+export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   virtualizer: Virtualizer<Window, Element>;
 }
 
-export const CollapsableRows = <T extends object>({
+export const CollapsableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: CollapsableRowsProps<T>): JSX.Element => {
@@ -21,17 +21,19 @@ export const CollapsableRows = <T extends object>({
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
+        const { getIsPreview } = row;
         return (
-          <MTableRow
+          <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
             />
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -1,15 +1,16 @@
-import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Row, Table } from "@tanstack/react-table";
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import { getTableCellPadding } from "../TableCell/common/utils";
+import { TableRow } from "../TableRow/tableRow.styles";
 
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   virtualizer: Virtualizer<Window, Element>;
 }
 
-export const TableRows = <T extends object>({
+export const TableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: TableRowsProps<T>): JSX.Element => {
@@ -20,10 +21,12 @@ export const TableRows = <T extends object>({
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
+        const { getIsPreview } = row;
         return (
-          <MTableRow
+          <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
             {row.getVisibleCells().map((cell) => (
@@ -34,7 +37,7 @@ export const TableRows = <T extends object>({
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </MTableCell>
             ))}
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.ts

@@ -0,0 +1,11 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+
+export const DEFAULT_DRAWER_PROPS: Partial<MDrawerProps> = {
+  PaperProps: {
+    elevation: 2,
+  },
+  anchor: "right",
+  disableEnforceFocus: true,
+  disableScrollLock: true,
+  hideBackdrop: true,
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { smokeMain } from "../../../../../../../../styles/common/mixins/colors";
+import { DrawerTitle as DXDrawerTitle } from "../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle";
+import { Drawer as DXDrawer } from "../../../../../../../common/Drawer/drawer";
+
+export const Drawer = styled(DXDrawer)`
+  &.MuiDrawer-modal {
+    pointer-events: none;
+
+    .MuiDrawer-paper {
+      border-left: 1px solid ${smokeMain};
+      box-shadow: -8px 0 8px -4px #10182808, 0 20px 24px -4px #10182814;
+      pointer-events: all;
+      max-width: min(506px, 84vw);
+      width: 100%;
+    }
+
+    ${mediaTabletUp} {
+      .MuiDrawer-paper {
+        max-width: min(506px, 50vw);
+      }
+    }
+  }
+`;
+
+export const DrawerTitle = styled(DXDrawerTitle)`
+  .MuiTypography-text-heading-small {
+    font-size: 20px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.tsx

@@ -0,0 +1,52 @@
+import {
+  Divider,
+  DrawerProps as MDrawerProps,
+  Typography as MTypography,
+} from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import React, { ReactNode } from "react";
+import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { DrawerContent } from "../../../../../../../common/Drawer/components/drawer.styles";
+import { DEFAULT_DRAWER_PROPS } from "./common/constants";
+import { Drawer, DrawerTitle } from "./rowDrawer.styles";
+
+export interface RowDrawerProps<T extends RowData>
+  extends Omit<MDrawerProps, "content" | "title"> {
+  className?: string;
+  tableInstance: Table<T>;
+  title: ReactNode;
+}
+
+export const RowDrawer = <T extends RowData>({
+  children,
+  className,
+  tableInstance,
+  title,
+  ...props /* Spread props to allow for Mui Drawer specific prop overrides. */
+}: RowDrawerProps<T>): JSX.Element => {
+  const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance;
+  return (
+    <Drawer
+      {...DEFAULT_DRAWER_PROPS}
+      className={className}
+      onTransitionExited={resetRowPreview}
+      open={getIsRowPreview()}
+      {...props}
+    >
+      <DrawerTitle
+        onClose={(): void => toggleRowPreview?.()}
+        title={
+          typeof title === "string" ? (
+            <MTypography component="div" noWrap variant={TEXT_HEADING_SMALL}>
+              {title}
+            </MTypography>
+          ) : (
+            title
+          )
+        }
+      />
+      <Divider />
+      <DrawerContent>{children}</DrawerContent>
+    </Drawer>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.ts

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled";
+import {
+  mediaDesktopSmallUp,
+  mediaTabletUp,
+} from "../../../../../../../../../../styles/common/mixins/breakpoints";
+import { textBody400 } from "../../../../../../../../../../styles/common/mixins/fonts";
+
+export const Section = styled.div`
+  ${textBody400};
+  display: grid;
+  gap: 16px;
+  grid-auto-rows: minmax(40px, auto);
+  grid-template-columns: minmax(0, 1fr);
+  overflow-wrap: break-word;
+  padding: 16px 24px;
+
+  > .MuiGrid-root {
+    display: grid;
+    gap: 4px;
+    grid-column: 1 / -1;
+    grid-template-columns: inherit;
+  }
+
+  > .MuiButton-textPrimary {
+    grid-column: 1 / -1;
+    justify-self: flex-start;
+    text-align: left;
+    text-transform: none;
+  }
+
+  ${mediaTabletUp} {
+    gap: 0 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 8px 24px;
+
+    > .MuiGrid-root {
+      display: contents;
+
+      > * {
+        margin: 10px 0;
+      }
+    }
+  }
+
+  ${mediaDesktopSmallUp} {
+    grid-template-columns: 194px minmax(0, 1fr);
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.tsx

@@ -0,0 +1,53 @@
+import { Grid, Typography } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import React from "react";
+import { ListConfig } from "../../../../../../../../../../config/entities";
+import { TEXT_BODY_400 } from "../../../../../../../../../../theme/common/typography";
+import { ButtonTextPrimary } from "../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { ComponentCreator } from "../../../../../../../../../ComponentCreator/ComponentCreator";
+import { Section } from "./rowDetail.styles";
+
+const MIN_COLUMNS = 6;
+
+interface RowDetailProps<T extends RowData> {
+  className?: string;
+  columns: ListConfig<T>["columns"];
+  expanded?: boolean;
+  minColumns?: number;
+  tableInstance: Table<T>;
+}
+
+export const RowDetail = <T extends RowData>({
+  className,
+  columns,
+  expanded = true,
+  minColumns = MIN_COLUMNS,
+  tableInstance,
+}: RowDetailProps<T>): JSX.Element | null => {
+  const [showMore, setShowMore] = React.useState<boolean>(expanded);
+  const { getRowPreviewRow } = tableInstance;
+  const { original: rowData } = getRowPreviewRow() || {};
+  const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
+  const buttonText = showMore ? "Show less" : "Show more";
+  const onToggleShowMore = (): void => setShowMore(!showMore);
+  if (!rowData) return null;
+  return (
+    <Section className={className}>
+      {visibleColumns.map(({ componentConfig, header }, i) => (
+        <Grid key={i}>
+          <Typography
+            color="ink.light"
+            variant={TEXT_BODY_400}
+            {...componentConfig.props?.TypographyProps}
+          >
+            {header}
+          </Typography>
+          <ComponentCreator components={[componentConfig]} response={rowData} />
+        </Grid>
+      ))}
+      <ButtonTextPrimary onClick={onToggleShowMore}>
+        {buttonText}
+      </ButtonTextPrimary>
+    </Section>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const Section = styled.div`
+  display: grid;
+  gap: 16px;
+  padding: 16px 24px 24px;
+
+  .MuiTypography-text-heading-small {
+    font-size: 18px;
+    line-height: 26px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.tsx

@@ -0,0 +1,25 @@
+import { Typography } from "@mui/material";
+import React, { ReactNode } from "react";
+import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { Section as PreviewSection } from "./section.styles";
+
+export interface SectionProps {
+  children?: ReactNode | ReactNode[];
+  className?: string;
+  title?: ReactNode;
+}
+
+export const Section = ({
+  children,
+  className,
+  title,
+}: SectionProps): JSX.Element => {
+  return (
+    <PreviewSection className={className}>
+      <Typography component="div" variant={TEXT_HEADING_SMALL}>
+        {title}
+      </Typography>
+      {children}
+    </PreviewSection>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/rowPreview.tsx

@@ -0,0 +1,19 @@
+import { RowData, Table } from "@tanstack/react-table";
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+
+export interface RowPreviewProps<T extends RowData> {
+  rowPreviewView?: ComponentsConfig;
+  tableInstance: Table<T>;
+}
+
+export const RowPreview = <T extends RowData>({
+  rowPreviewView,
+  tableInstance,
+}: RowPreviewProps<T>): JSX.Element | null => {
+  if (!rowPreviewView) return null;
+  return (
+    <ComponentCreator components={rowPreviewView} response={tableInstance} />
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -1,18 +1,18 @@
 import { Typography } from "@mui/material";
-import { Row } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { ComponentsConfig } from "../../../../../../config/entities";
 import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
 import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
 import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
 
-export interface RowSelectionProps<T> {
+export interface RowSelectionProps<T extends RowData> {
   className?: string;
   rows: Row<T>[];
   rowSelectionView?: ComponentsConfig;
 }
 
-export const RowSelection = <T extends object>({
+export const RowSelection = <T extends RowData>({
   className,
   rows,
   rowSelectionView,

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ListViewConfig } from "../../../../config/entities";
 import { useExploreState } from "../../../../hooks/useExploreState";
@@ -7,16 +7,17 @@ import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
 import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
 import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
 import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { RowPreview } from "./components/RowPreview/rowPreview";
 import { RowSelection } from "./components/RowSelection/rowSelection";
 import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
 
-export interface TableToolbarProps<T> {
+export interface TableToolbarProps<T extends RowData> {
   listView?: ListViewConfig;
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
-export const TableToolbar = <T extends object>({
+export const TableToolbar = <T extends RowData>({
   listView,
   rowDirection,
   tableInstance,
@@ -25,7 +26,7 @@ export const TableToolbar = <T extends object>({
   const { paginationState } = exploreState;
   const { currentPage, pages, pageSize, rows } = paginationState;
   const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
-  const { enableDownload } = listView || {};
+  const { enableDownload, rowPreviewView } = listView || {};
   const isLastPage = currentPage === pages;
   const editColumnOptions = getEditColumnOptions(tableInstance);
   const showToolbar =
@@ -70,6 +71,10 @@ export const TableToolbar = <T extends object>({
           </ToolbarActions>
         </Toolbar>
       )}
+      <RowPreview
+        rowPreviewView={rowPreviewView}
+        tableInstance={tableInstance}
+      />
     </Fragment>
   );
 };

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

@@ -0,0 +1,65 @@
+import {
+  functionalUpdate,
+  InitialTableState,
+  makeStateUpdater,
+  Row,
+  RowData,
+  Table,
+  TableFeature,
+  TableOptionsResolved,
+  TableState,
+  Updater,
+} from "@tanstack/react-table";
+import { RowPreviewState } from "./entities";
+import {
+  getIsPreview,
+  getIsRowPreview,
+  getRowPreviewRow,
+  togglePreview,
+  toggleRowPreview,
+} from "./utils";
+
+export const ROW_PREVIEW: TableFeature = {
+  createRow: <T extends RowData>(row: Row<T>, table: Table<T>): void => {
+    row.getIsPreview = (): boolean => {
+      return getIsPreview(row, table);
+    };
+    row.togglePreview = (): void => {
+      togglePreview(row, table);
+    };
+  },
+  createTable: <T extends RowData>(table: Table<T>): void => {
+    table.getIsRowPreview = (): boolean => {
+      return getIsRowPreview(table);
+    };
+    table.getRowPreviewRow = (): Row<T> | undefined => {
+      return getRowPreviewRow(table);
+    };
+    table.resetRowPreview = (): void => {
+      table.setRowPreview(undefined);
+    };
+    table.setRowPreview = (updater: Updater<RowPreviewState>): void => {
+      const safeUpdater: Updater<RowPreviewState> = (old: RowPreviewState) => {
+        return functionalUpdate(updater, old);
+      };
+      return table.options.onRowPreviewChange?.(safeUpdater);
+    };
+    table.toggleRowPreview = (): void => {
+      toggleRowPreview(table);
+    };
+  },
+  getDefaultOptions: <T extends RowData>(
+    table: Table<T>
+  ): Partial<TableOptionsResolved<T>> => {
+    return {
+      enableRowPreview: true,
+      onRowPreviewChange: makeStateUpdater("rowPreview", table),
+    };
+  },
+  getInitialState: (initialState?: InitialTableState): Partial<TableState> => {
+    return {
+      ...initialState,
+      rowPreview: undefined,
+    } as Partial<TableState>;
+  },
+};

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

@@ -0,0 +1,25 @@
+import { OnChangeFn, Row, RowData, Updater } from "@tanstack/react-table";
+
+export interface RowPreviewInstance<T extends RowData> {
+  getIsRowPreview: () => boolean /* Is row preview open */;
+  getRowPreviewRow: () => Row<T> | undefined;
+  resetRowPreview: () => void;
+  setRowPreview: (updater: Updater<RowPreviewState>) => void;
+  toggleRowPreview: () => void;
+}
+
+export interface RowPreviewOptions {
+  enableRowPreview?: boolean;
+  onRowPreviewChange?: OnChangeFn<RowPreviewState>;
+}
+
+export interface RowPreviewRow {
+  getIsPreview: () => boolean /* Is row previewed */;
+  togglePreview: () => void;
+}
+
+export type RowPreviewState = { [id: string]: boolean } | undefined;
+
+export interface RowPreviewTableState {
+  rowPreview: RowPreviewState;
+}