feat!: create data dictionary chip (#451) (#467)

Author: frano-m

src/common/entities.ts

@@ -1,4 +1,5 @@
 import { ColumnDef } from "@tanstack/react-table";
+import { GridTrackSize } from "../config/entities";
 
 /**
  * Model of a value of a metadata class.
@@ -21,7 +22,7 @@ export interface Attribute {
 /**
  * Model of attribute key types; used mostly when building data dictionary column definitions.
  */
-export type AttributeValueTypes = string | boolean;
+export type AttributeValueTypes<TValue = unknown> = TValue;
 
 /**
  * Filterable metadata keys.
@@ -76,13 +77,17 @@ export interface DataDictionary {
  * Display model of a data dictionary column.
  */
 export interface DataDictionaryColumnDef {
+  attributeAccessorFnName?: string; // Name of accessor function to map to.
+  attributeCellName?: string; // Name of cell renderer component to map to.
   attributeDisplayName: string;
   attributeSlotName: string;
   // Adding width here for now; possibly revisit separating column def and UI.
-  width: {
-    max: string;
-    min: string;
-  };
+  width:
+    | Omit<GridTrackSize, "GridTrackMinMax">
+    | {
+        max: string;
+        min: string;
+      };
 }
 
 /**

src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -1,12 +1,16 @@
 import { Typography } from "@mui/material";
-import React from "react";
+import { CellContext, RowData } from "@tanstack/react-table";
+import React, { ReactNode } from "react";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { BasicCellProps } from "./types";
 
-export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
+export const BasicCell = <T extends RowData, TValue>({
+  getValue,
+}: CellContext<T, TValue>): JSX.Element | null => {
+  const value = getValue();
+  if (value === undefined || value === null) return null;
   return (
     <Typography variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}>
-      {getValue()}
+      {value as ReactNode}
     </Typography>
   );
 };

src/components/DataDictionary/components/Table/components/BasicCell/types.ts

@@ -0,0 +1,15 @@
+import { RowData } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if a row has a specific key.
+ * Useful for generic accessor functions.
+ * @param row - The row to check.
+ * @param key - The key to check.
+ * @returns True if the row has the specified key, false otherwise.
+ */
+export function rowHasKey<T extends RowData, K extends PropertyKey, TValue>(
+  row: T,
+  key: K
+): row is T & Record<K, TValue> {
+  return row != null && typeof row === "object" && key in row;
+}

src/components/Table/columnDef/accessorFn/typeGuards.ts

@@ -0,0 +1,11 @@
+import { Chip } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+
+export const ChipCell = <T extends RowData, TValue>({
+  getValue,
+}: CellContext<T, TValue>): JSX.Element | null => {
+  const props = getValue();
+  if (!props) return null;
+  return <Chip {...props} />;
+};

src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx

@@ -410,6 +410,14 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
       },
       label: {
         ...theme.typography[TEXT_BODY_SMALL_400],
+        variants: [
+          {
+            props: { variant: "status" },
+            style: {
+              ...theme.typography[TEXT_BODY_SMALL_500],
+            },
+          },
+        ],
       },
     },
     variants: [
@@ -489,13 +497,18 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
       {
         props: { variant: "status" },
         style: {
-          ...theme.typography[TEXT_BODY_SMALL_500],
           boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
           height: 20,
           maxWidth: "fit-content",
           minWidth: 0,
         },
       },
+      {
+        props: { color: "default", variant: "status" },
+        style: {
+          color: PALETTE.INK_LIGHT,
+        },
+      },
     ],
   };
 };