@databiosphere/findable-ui 30.0.0 → 31.0.0

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MarkdownCell } from "../markdownCell";
+declare const meta: Meta<typeof MarkdownCell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHtml: Story;

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.js

@@ -0,0 +1,25 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+import { MarkdownCell } from "../markdownCell";
+import { DEFAULT_ARGS, WITH_HTML_ARGS } from "./args";
+const meta = {
+    component: MarkdownCell,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                fontSize: "14px",
+                lineHeight: "20px",
+                padding: 3,
+                width: 480,
+            } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: DEFAULT_ARGS,
+};
+export const WithHtml = {
+    args: WITH_HTML_ARGS,
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { MarkdownCellProps } from "../types";
+export type GetValue = CellContext<RowData, MarkdownCellProps>["getValue"];

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.d.ts

@@ -0,0 +1,3 @@
+export type MarkdownCellProps = {
+    values: string;
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.js

@@ -0,0 +1 @@
+export {};

package/lib/styles/common/mui/typography.js

@@ -1,4 +1,5 @@
 const COLOR = {
+    ERROR: "error",
     INHERIT: "inherit",
     INK_LIGHT: "ink.light",
     INK_MAIN: "ink.main",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -62,6 +62,11 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.8.3",
     "prettier-plugin-organize-imports": "^3.2.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-rehype": "^11.1.2",
     "storybook": "^8.6.4",
     "ts-jest": "^29.2.5",
     "typescript": "^5.5.4"

package/src/common/entities.ts

@@ -1,5 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { GridTrackSize } from "../config/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 
 /**
  * Model of a value of a metadata class.
@@ -19,11 +18,6 @@ export interface Attribute {
   values?: string; // Free text description of attribute values
 }
 
-/**
- * Model of attribute key types; used mostly when building data dictionary column definitions.
- */
-export type AttributeValueTypes<TValue = unknown> = TValue;
-
 /**
  * Filterable metadata keys.
  */
@@ -41,8 +35,8 @@ export interface CategoryTag {
 /**
  * Model of a metadata class, to be specified manually or built from LinkML schema.
  */
-export interface Class {
-  attributes: Attribute[];
+export interface Class<T extends RowData = Attribute> {
+  attributes: T[];
   description: string;
   name: string; // Programmatic name or key (e.g. cell, sample)
   title: string; // Display name
@@ -62,41 +56,24 @@ export type DataDictionaryPrefix = Record<string, string>;
 /**
  * Model of a metadata dictionary containing a set of classes and their definitions.
  */
-export interface DataDictionary {
+export interface DataDictionary<T extends RowData = Attribute> {
   annotations?: {
     [key in keyof DataDictionaryPrefix]: string; // Prefix to title e.g. "cxg": "CELLxGENE"
   };
-  classes: Class[];
+  classes: Class<T>[];
   description?: string; // Free text description of data dictionary
   name: string; // Programmatic name or key (e.g. tier1, hca)
   prefixes?: DataDictionaryPrefix;
   title: string; // Display name
 }
 
-/**
- * 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:
-    | Omit<GridTrackSize, "GridTrackMinMax">
-    | {
-        max: string;
-        min: string;
-      };
-}
-
 /**
  * Configuration of data dictionary; contains schema definition (that is, the actual data
  * dictionary) as well as column def for displaying the data dictionary.
  */
-export interface DataDictionaryConfig {
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
-  dataDictionary: DataDictionary;
+export interface DataDictionaryConfig<T extends RowData = Attribute> {
+  columnDefs: ColumnDef<T, T[keyof T]>[];
+  dataDictionary: DataDictionary<T>;
 }
 
 /**

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -1,20 +1,22 @@
 import { Grid } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
 import React from "react";
+import { Attribute } from "../../../../common/entities";
 import { Entity } from "../Entity/entity";
 import { GRID_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
-export const Entities = ({
+export const Entities = <T extends RowData = Attribute>({
   classes,
   columnDefs,
   spacing,
-}: ClassesProps): JSX.Element => {
+}: ClassesProps<T>): JSX.Element => {
   return (
     <Grid {...GRID_PROPS}>
-      {classes.map((classData) => (
+      {classes.map((cls) => (
         <Entity
-          key={classData.name}
-          class={classData}
+          key={cls.name}
+          class={cls}
           columnDefs={columnDefs}
           spacing={spacing}
         />

package/src/components/DataDictionary/components/Entities/types.ts

@@ -1,13 +1,9 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Attribute,
-  AttributeValueTypes,
-  Class,
-} from "../../../../common/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
-export interface ClassesProps {
-  classes: Class[];
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+export interface ClassesProps<T extends RowData = Attribute> {
+  classes: Class<T>[];
+  columnDefs: ColumnDef<T, T[keyof T]>[];
   spacing?: LayoutSpacing;
 }

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -1,5 +1,7 @@
 import { Grid, Typography } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
 import React from "react";
+import { Attribute } from "../../../../common/entities";
 import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
 import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { useTable } from "../Table/hook";
@@ -8,29 +10,29 @@ import { GRID_PROPS } from "./constants";
 import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
 
-export const Entity = ({
-  class: classData,
+export const Entity = <T extends RowData = Attribute>({
+  class: cls,
   columnDefs,
   spacing,
-}: EntityProps): JSX.Element => {
-  const table = useTable(classData.attributes, columnDefs);
+}: EntityProps<T>): JSX.Element => {
+  const table = useTable<T>(cls.attributes, columnDefs);
   return (
     <Grid {...GRID_PROPS} rowGap={4}>
       <Grid {...GRID_PROPS} rowGap={1}>
         <StyledTypography
           component="h3"
-          id={classData.name}
+          id={cls.name}
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
           {...spacing}
         >
-          {classData.title} <AnchorLink anchorLink={classData.name} />
+          {cls.title} <AnchorLink anchorLink={cls.name} />
         </StyledTypography>
         <Typography
           color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
           component="div"
           variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
         >
-          {classData.description}
+          {cls.description}
         </Typography>
       </Grid>
       <Table table={table} />

package/src/components/DataDictionary/components/Entity/types.ts

@@ -1,13 +1,9 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Attribute,
-  AttributeValueTypes,
-  Class,
-} from "../../../../common/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
-export interface EntityProps {
-  class: Class;
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+export interface EntityProps<T extends RowData = Attribute> {
+  class: Class<T>;
+  columnDefs: ColumnDef<T, T[keyof T]>[];
   spacing?: LayoutSpacing;
 }

package/src/components/DataDictionary/components/Outline/utils.ts

@@ -1,4 +1,5 @@
-import { Class } from "../../../../common/entities";
+import { RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 import { OutlineItem } from "../../../Layout/components/Outline/types";
 
 /**
@@ -6,7 +7,9 @@ import { OutlineItem } from "../../../Layout/components/Outline/types";
  * @param classes - Class entities.
  * @returns Outline items.
  */
-export function buildClassesOutline(classes: Class[]): OutlineItem[] {
+export function buildClassesOutline<T extends RowData = Attribute>(
+  classes: Class<T>[]
+): OutlineItem[] {
   return classes.map(({ name, title }) => {
     return {
       depth: 2,

package/src/components/DataDictionary/components/Table/hook.ts

@@ -1,13 +1,21 @@
-import { ColumnDef, Table, useReactTable } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes } from "../../../../common/entities";
+import {
+  ColumnDef,
+  RowData,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { useTableOptions } from "./options/hook";
 
-export const useTable = (
-  data: Attribute[],
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]
-): Table<Attribute> => {
-  const tableOptions = useTableOptions();
-  return useReactTable<Attribute>({
+export const useTable = <T extends RowData = Attribute>(
+  data: T[],
+  columnDefs: ColumnDef<T, T[keyof T]>[]
+): Table<T> => {
+  // Table options.
+  const tableOptions = useTableOptions<T>();
+
+  // Table instance.
+  return useReactTable<T>({
     ...tableOptions,
     columns: columnDefs,
     data,

package/src/components/DataDictionary/components/Table/options/core/constants.ts

@@ -1,10 +1,9 @@
-import { CoreOptions, getCoreRowModel } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
+import { CoreOptions, getCoreRowModel, RowData } from "@tanstack/react-table";
 import { ROW_POSITION } from "../../../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../../../Table/features/RowPreview/constants";
 
 export const CORE_OPTIONS: Pick<
-  CoreOptions<Attribute>,
+  CoreOptions<RowData>,
   "_features" | "getCoreRowModel"
 > = {
   _features: [ROW_POSITION, ROW_PREVIEW],

package/src/components/DataDictionary/components/Table/options/hook.ts

@@ -1,10 +1,10 @@
-import { TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
 import { CORE_OPTIONS } from "./core/constants";
 import { SORTING_OPTIONS } from "./sorting/constants";
 
-export const useTableOptions = (): Omit<
-  TableOptions<Attribute>,
+export const useTableOptions = <T extends RowData = Attribute>(): Omit<
+  TableOptions<T>,
   "columns" | "data"
 > => {
   return {

package/src/components/DataDictionary/components/Table/options/sorting/constants.ts

@@ -1,9 +1,5 @@
-import { SortingOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
+import { RowData, SortingOptions } from "@tanstack/react-table";
 
-export const SORTING_OPTIONS: Pick<
-  SortingOptions<Attribute>,
-  "enableSorting"
-> = {
+export const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting"> = {
   enableSorting: false,
 };

package/src/components/DataDictionary/components/Table/table.tsx

@@ -1,4 +1,5 @@
 import { TableContainer } from "@mui/material";
+import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
@@ -9,7 +10,9 @@ import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledRoundedPaper } from "./table.styles";
 import { TableProps } from "./types";
 
-export const Table = ({ table }: TableProps): JSX.Element => {
+export const Table = <T extends RowData>({
+  table,
+}: TableProps<T>): JSX.Element => {
   return (
     <StyledRoundedPaper variant="table">
       <GridPaper>

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

@@ -1,6 +1,5 @@
-import { Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
+import { RowData, Table } from "@tanstack/react-table";
 
-export interface TableProps {
-  table: Table<Attribute>;
+export interface TableProps<T extends RowData> {
+  table: Table<T>;
 }

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,4 +1,6 @@
+import { RowData } from "@tanstack/react-table";
 import React, { useMemo } from "react";
+import { Attribute } from "../../common/entities";
 import { Entities } from "./components/Entities/entities";
 import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
 import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
@@ -11,7 +13,7 @@ import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
 import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
 import { DataDictionaryProps } from "./types";
 
-export const DataDictionary = ({
+export const DataDictionary = <T extends RowData = Attribute>({
   className,
   EntitiesLayout = DefaultEntitiesLayout,
   Outline = DefaultOutline,
@@ -19,7 +21,7 @@ export const DataDictionary = ({
   Title = DefaultTitle,
   TitleLayout = DefaultTitleLayout,
 }: DataDictionaryProps): JSX.Element => {
-  const { classes, columnDefs } = useDataDictionary();
+  const { classes, columnDefs } = useDataDictionary<T>();
   const { spacing } = useLayoutSpacing();
   const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -1,13 +1,20 @@
+import { RowData } from "@tanstack/react-table";
 import { useMemo } from "react";
+import { Attribute, DataDictionaryConfig } from "../../../../common/entities";
 import { useConfig } from "../../../../hooks/useConfig";
 import { UseDataDictionary } from "./types";
 
-export const useDataDictionary = (): UseDataDictionary => {
+export const useDataDictionary = <
+  T extends RowData = Attribute
+>(): UseDataDictionary<T> => {
   const {
     config: { dataDictionaries: dataDictionaryConfigs },
   } = useConfig();
 
-  const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+  const dataDictionaryConfig = dataDictionaryConfigs?.[0] as
+    | DataDictionaryConfig<T>
+    | undefined; // TODO: Handle multiple data dictionaries
+
   return useMemo(() => {
     const classes = dataDictionaryConfig?.dataDictionary?.classes || [];
     const columnDefs = dataDictionaryConfig?.columnDefs || [];

package/src/components/DataDictionary/hooks/UseDataDictionary/types.ts

@@ -1,11 +1,7 @@
-import { ColumnDef } from "@tanstack/react-table";
-import {
-  Attribute,
-  AttributeValueTypes,
-  Class,
-} from "../../../../common/entities";
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
 
-export interface UseDataDictionary {
-  classes: Class[];
-  columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+export interface UseDataDictionary<T extends RowData = Attribute> {
+  classes: Class<T>[];
+  columnDefs: ColumnDef<T, T[keyof T]>[];
 }

package/src/components/MarkdownRenderer/components/Anchor/anchor.tsx

@@ -0,0 +1,34 @@
+import React, { AnchorHTMLAttributes, ClassAttributes } from "react";
+import { Link } from "../../../Links/components/Link/link";
+import { BaseComponentProps } from "../../../types";
+
+/**
+ * rehype-sanitize's default schema allows only a limited set of attributes on <a> elements:
+ * - aria-*
+ * - className
+ * - data-footnote-backref
+ * - data-footnote-ref
+ * - href
+ *
+ * By default, attributes such as:
+ * - download
+ * - rel
+ * - target
+ * are not permitted and will be stripped from anchor tags during sanitization.
+ *
+ * Note: This component currently does not support these excluded attributes.
+ */
+
+export const Anchor = (
+  props: BaseComponentProps &
+    ClassAttributes<HTMLAnchorElement> &
+    AnchorHTMLAttributes<HTMLAnchorElement>
+): JSX.Element => {
+  return (
+    <Link
+      className={props.className}
+      label={props.children}
+      url={props.href || ""}
+    />
+  );
+};

package/src/components/MarkdownRenderer/components/Table/table.styles.ts

@@ -0,0 +1,41 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { textBody500 } from "../../../../styles/common/mixins/fonts";
+
+export const StyledTable = styled("table")`
+  border-collapse: collapse;
+  margin: 16px 0;
+  table-layout: fixed;
+  width: 100%;
+
+  thead {
+    all: unset;
+    display: table-header-group;
+  }
+
+  tbody {
+    all: unset;
+    display: table-row-group;
+  }
+
+  tr {
+    all: unset;
+    display: table-row;
+  }
+
+  td,
+  th {
+    display: table-cell;
+    padding: 2px 4px;
+  }
+
+  th {
+    ${textBody500}
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+  }
+
+  td {
+    font: inherit;
+    overflow-wrap: break-word;
+  }
+`;

package/src/components/MarkdownRenderer/components/Table/table.tsx

@@ -0,0 +1,13 @@
+import { BaseComponentProps } from "components/types";
+import React, { ClassAttributes, TableHTMLAttributes } from "react";
+import { StyledTable } from "./table.styles";
+
+export const Table = (
+  props: BaseComponentProps &
+    ClassAttributes<HTMLTableElement> &
+    TableHTMLAttributes<HTMLTableElement>
+): JSX.Element => {
+  return (
+    <StyledTable className={props.className}>{props.children}</StyledTable>
+  );
+};

package/src/components/MarkdownRenderer/constants.ts

@@ -0,0 +1,8 @@
+import { Components } from "rehype-react";
+import { Anchor } from "./components/Anchor/anchor";
+import { Table } from "./components/Table/table";
+
+export const COMPONENTS: Partial<Components> = {
+  a: Anchor,
+  table: Table,
+};

package/src/components/MarkdownRenderer/markdownRenderer.styles.ts

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+
+// See https://github.com/emotion-js/emotion/issues/1105.
+// See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
+const ignoreSsrWarning =
+  "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
+
+export const StyledContainer = styled("div")`
+  > *:first-child:not(style)${ignoreSsrWarning} {
+    margin-top: 0;
+  }
+
+  > *:last-child:not(style)${ignoreSsrWarning} {
+    margin-bottom: 0;
+  }
+`;

package/src/components/MarkdownRenderer/markdownRenderer.tsx

@@ -0,0 +1,62 @@
+import { Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import * as production from "react/jsx-runtime";
+import rehypeRaw from "rehype-raw";
+import rehypeReact, { Components } from "rehype-react";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
+import { COMPONENTS } from "./constants";
+import { StyledContainer } from "./markdownRenderer.styles";
+import { MarkdownRendererProps } from "./types";
+
+export const MarkdownRenderer = ({
+  className,
+  components = COMPONENTS,
+  value,
+}: MarkdownRendererProps): JSX.Element => {
+  const [element, setElement] = useState<JSX.Element | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [componentOptions] = useState<Partial<Components>>(components);
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+
+    const processor = unified()
+      .use(remarkParse)
+      .use(remarkGfm)
+      .use(remarkRehype, { allowDangerousHtml: true })
+      .use(rehypeRaw)
+      .use(rehypeSanitize, defaultSchema)
+      .use(rehypeReact, { ...production, components: componentOptions });
+
+    processor
+      .process(value)
+      .then((file) => {
+        if (!cancelled) setElement(file?.result);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err.message);
+      });
+
+    return (): void => {
+      cancelled = true;
+    };
+  }, [componentOptions, value]);
+
+  if (error)
+    return (
+      <Typography
+        color={TYPOGRAPHY_PROPS.COLOR.ERROR}
+        variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+      >
+        {error}
+      </Typography>
+    );
+
+  return <StyledContainer className={className}>{element}</StyledContainer>;
+};

package/src/components/MarkdownRenderer/types.ts

@@ -0,0 +1,7 @@
+import { Components } from "rehype-react";
+import { BaseComponentProps } from "../types";
+
+export interface MarkdownRendererProps extends BaseComponentProps {
+  components?: Partial<Components>;
+  value: string;
+}