From 14067734c17f57b5b1317463aab6fd1604eda484 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Mon, 12 May 2025 14:47:59 +1000 Subject: [PATCH] feat!: create data dictionary chip (#451) --- src/common/entities.ts | 15 ++++++++++----- .../Table/components/BasicCell/basicCell.tsx | 12 ++++++++---- .../Table/components/BasicCell/types.ts | 7 ------- .../Table/columnDef/accessorFn/typeGuards.ts | 15 +++++++++++++++ .../TableCell/components/ChipCell/chipCell.tsx | 11 +++++++++++ src/theme/common/components.ts | 15 ++++++++++++++- 6 files changed, 58 insertions(+), 17 deletions(-) delete mode 100644 src/components/DataDictionary/components/Table/components/BasicCell/types.ts create mode 100644 src/components/Table/columnDef/accessorFn/typeGuards.ts create mode 100644 src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx diff --git a/src/common/entities.ts b/src/common/entities.ts index 6eabd45a..91238384 100644 --- a/src/common/entities.ts +++ b/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; /** * 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 + | { + max: string; + min: string; + }; } /** diff --git a/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx b/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx index 93eefa74..a20b2471 100644 --- a/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx +++ b/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 = ({ + getValue, +}: CellContext): JSX.Element | null => { + const value = getValue(); + if (value === undefined || value === null) return null; return ( - {getValue()} + {value as ReactNode} ); }; diff --git a/src/components/DataDictionary/components/Table/components/BasicCell/types.ts b/src/components/DataDictionary/components/Table/components/BasicCell/types.ts deleted file mode 100644 index 973c9983..00000000 --- a/src/components/DataDictionary/components/Table/components/BasicCell/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { CellContext } from "@tanstack/react-table"; -import { - Attribute, - AttributeValueTypes, -} from "../../../../../../common/entities"; - -export type BasicCellProps = CellContext; diff --git a/src/components/Table/columnDef/accessorFn/typeGuards.ts b/src/components/Table/columnDef/accessorFn/typeGuards.ts new file mode 100644 index 00000000..edfaf95d --- /dev/null +++ b/src/components/Table/columnDef/accessorFn/typeGuards.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( + row: T, + key: K +): row is T & Record { + return row != null && typeof row === "object" && key in row; +} diff --git a/src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx b/src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx new file mode 100644 index 00000000..f5943bde --- /dev/null +++ b/src/components/Table/components/TableCell/components/ChipCell/chipCell.tsx @@ -0,0 +1,11 @@ +import { Chip } from "@mui/material"; +import { CellContext, RowData } from "@tanstack/react-table"; +import React from "react"; + +export const ChipCell = ({ + getValue, +}: CellContext): JSX.Element | null => { + const props = getValue(); + if (!props) return null; + return ; +}; diff --git a/src/theme/common/components.ts b/src/theme/common/components.ts index 63f2401f..4b105152 100644 --- a/src/theme/common/components.ts +++ b/src/theme/common/components.ts @@ -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, + }, + }, ], }; };