@databiosphere/findable-ui 30.0.0 → 32.0.0

package/lib/components/MarkdownRenderer/components/Table/table.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { StyledTable } from "./table.styles";
+export const Table = (props) => {
+    return (React.createElement(StyledTable, { className: props.className }, props.children));
+};

package/lib/components/MarkdownRenderer/components/Table/table.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

package/lib/components/MarkdownRenderer/components/Table/table.styles.js

@@ -0,0 +1,40 @@
+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/lib/components/MarkdownRenderer/constants.d.ts

@@ -0,0 +1,2 @@
+import { MarkdownRendererComponents } from "./types";
+export declare const COMPONENTS: MarkdownRendererComponents;

package/lib/components/MarkdownRenderer/constants.js

@@ -0,0 +1,6 @@
+import { Anchor } from "./components/Anchor/anchor";
+import { Table } from "./components/Table/table";
+export const COMPONENTS = {
+    a: Anchor,
+    table: Table,
+};

package/lib/components/MarkdownRenderer/markdownRenderer.d.ts

@@ -0,0 +1,14 @@
+import { MarkdownRendererProps } from "./types";
+/**
+ * Markdown Rendering - Pipeline Version Constraints
+ *
+ * next-mdx-remote and @next/mdx currently embed MDX v3. MDX v3 is compiled
+ * for the "Unified 10" tool-chain and therefore only functions with unified
+ * 10.x, remark-parse 10.x, remark-rehype 10.x and, critically, remark-gfm 3.x.
+ *
+ * Because remark-gfm 3.x is required, migrating to Unified 11 is not yet possible.
+ *
+ * rehype plug-ins are chosen from versions that still target Unified 10:
+ * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
+ */
+export declare const MarkdownRenderer: ({ className, components: componentOptions, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -0,0 +1,56 @@
+import { Typography } from "@mui/material";
+import React, { Fragment, createElement, useEffect, useState } from "react";
+import rehypeRaw from "rehype-raw";
+import rehypeReact from "rehype-react";
+import rehypeSanitize 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";
+/**
+ * Markdown Rendering - Pipeline Version Constraints
+ *
+ * next-mdx-remote and @next/mdx currently embed MDX v3. MDX v3 is compiled
+ * for the "Unified 10" tool-chain and therefore only functions with unified
+ * 10.x, remark-parse 10.x, remark-rehype 10.x and, critically, remark-gfm 3.x.
+ *
+ * Because remark-gfm 3.x is required, migrating to Unified 11 is not yet possible.
+ *
+ * rehype plug-ins are chosen from versions that still target Unified 10:
+ * rehype-raw 7.x, rehype-sanitize 5.x and rehype-react 7.x.
+ */
+export const MarkdownRenderer = ({ className, components: componentOptions = COMPONENTS, value, }) => {
+    const [element, setElement] = useState(null);
+    const [error, setError] = useState(null);
+    const [components] = useState(componentOptions);
+    useEffect(() => {
+        let cancelled = false;
+        setError(null);
+        const processor = unified()
+            .use(remarkParse)
+            .use(remarkGfm)
+            .use(remarkRehype, { allowDangerousHtml: true })
+            .use(rehypeRaw)
+            .use(rehypeSanitize)
+            .use(rehypeReact, { Fragment, components, createElement });
+        processor
+            .process(value)
+            .then(({ result }) => {
+            if (!cancelled)
+                setElement(result);
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err.message);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [components, value]);
+    if (error)
+        return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.ERROR, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, error));
+    return React.createElement(StyledContainer, { className: className }, element);
+};

package/lib/components/MarkdownRenderer/markdownRenderer.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/MarkdownRenderer/markdownRenderer.styles.js

@@ -0,0 +1,13 @@
+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/lib/components/MarkdownRenderer/types.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from "react";
+import { BaseComponentProps } from "../types";
+export type MarkdownRendererComponents = Record<string, ComponentType<any>>;
+export interface MarkdownRendererProps extends BaseComponentProps {
+    components?: MarkdownRendererComponents;
+    value: string;
+}

package/lib/components/MarkdownRenderer/types.js

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

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledSvgIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "fontSize" | "style" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+}, "style" | "fontSize" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Support/components/ViewSupport/viewSupport.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const Fab: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.d.ts

@@ -1,3 +1,4 @@
 import { ChipProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
-export declare const ChipCell: <T extends RowData, TValue extends ChipProps = ChipProps>({ getValue, }: CellContext<T, TValue>) => JSX.Element | null;
+import { BaseComponentProps } from "../../../../../types";
+export declare const ChipCell: <T extends RowData, TValue extends ChipProps = ChipProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/ChipCell/chipCell.js

@@ -1,8 +1,8 @@
 import { Chip } from "@mui/material";
 import React from "react";
-export const ChipCell = ({ getValue, }) => {
+export const ChipCell = ({ className, getValue, }) => {
     const props = getValue();
     if (!props)
         return null;
-    return React.createElement(Chip, { ...props });
+    return React.createElement(Chip, { className: className, ...props });
 };

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.d.ts

@@ -1,4 +1,4 @@
 import { LinkProps } from "@mui/material";
 import { CellContext, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "components/types";
-export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;
+export declare const LinkCell: <T extends RowData, TValue extends LinkProps = LinkProps>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/LinkCell/linkCell.js

@@ -4,11 +4,11 @@ import { isValidUrl } from "../../../../../../common/utils";
 import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { isClientSideNavigation } from "../../../../../Links/common/utils";
 import { getComponent, getRelAttribute, getTargetAttribute } from "./utils";
-export const LinkCell = ({ getValue, }) => {
+export const LinkCell = ({ className, getValue, }) => {
     const props = getValue();
     if (!props)
         return null;
-    const { children, className, color, href = "", rel, target, underline, ...linkProps } = props;
+    const { children, color, href = "", rel, target, underline, ...linkProps } = props;
     // Determine if the href should use client-side navigation.
     const isClientSide = isClientSideNavigation(href);
     // Determine if the href is valid.

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

@@ -0,0 +1,4 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+import { MarkdownCellProps } from "./types";
+export declare const MarkdownCell: <T extends RowData, TValue extends MarkdownCellProps = MarkdownCellProps>({ className, column, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { COMPONENTS } from "../../../../../MarkdownRenderer/constants";
+import { StyledMarkdownRenderer } from "./markdownCell.styles";
+export const MarkdownCell = ({ className, column, getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    const { values } = props;
+    const columnDef = column?.columnDef;
+    const columnMeta = columnDef?.meta;
+    const components = columnMeta?.components;
+    return (React.createElement(StyledMarkdownRenderer, { className: className, components: { ...COMPONENTS, ...components }, value: values }));
+};

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

@@ -0,0 +1,3 @@
+export declare const StyledMarkdownRenderer: import("@emotion/styled").StyledComponent<import("../../../../../MarkdownRenderer/types").MarkdownRendererProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+import { MarkdownRenderer } from "../../../../../MarkdownRenderer/markdownRenderer";
+export const StyledMarkdownRenderer = styled(MarkdownRenderer) `
+  align-self: flex-start;
+
+  code {
+    all: unset;
+    font: inherit;
+    font-family: Roboto Mono, monospace;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  hr {
+    border: none;
+    border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
+    margin: 16px 0;
+  }
+
+  p {
+    font: inherit;
+  }
+`;

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

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+import { MarkdownCell } from "../markdownCell";
+export declare const DEFAULT_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;
+export declare const WITH_HTML_ARGS: Partial<ComponentProps<typeof MarkdownCell>>;

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

@@ -0,0 +1,10 @@
+export const DEFAULT_ARGS = {
+    getValue: (() => ({
+        values: '| Key | Annotator | Value |\n| --- | --- | --- |\n| `tissue_ontology_term_id` | Curator | categorical with `str` categories. This **MUST** be the UBERON or CL term that best describes the tissue the cell was derived from, depending on the sample type. |\n\n**Mapping guidance**\n\n| For | Use |\n| --- | --- |\n| Tissue | STRONGLY RECOMMENDED to be an UBERON term&nbsp;<br />(e.g. [`UBERON:0008930`](http://purl.obolibrary.org/obo/UBERON_0008930) for a *somatosensory cortex* tissue sample) |\n| Cell culture | MUST be a CL term appended with \\" (cell culture)\\"&nbsp;<br />(e.g. [`CL:0000057`](http://purl.obolibrary.org/obo/CL_0000057) **(cell culture)** for the *WTC-11* cell line) |\n| Organoid | MUST be an UBERON term appended with \\" (organoid)\\"&nbsp;<br />(e.g. [`UBERON:0000955`](http://purl.obolibrary.org/obo/UBERON_0000955) **(organoid)** for a *brain organoid*) |\n| Enriched / sorted / isolated cells from a tissue | MUST be an UBERON or CL term and **SHOULD NOT** use terms that do not capture the tissue of origin.<br /><br />• *CD3+ kidney cells* → [`UBERON:0002113`](https://www.ebi.ac.uk/ols/ontologies/uberon/terms?iri=http://purl.obolibrary.org/obo/UBERON_0002113) (*kidney*) instead of [`CL:000084`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000084) (*T cell*).<br />• *EPCAM+ cervical cells* → [`CL:0000066`](https://www.ebi.ac.uk/ols/ontologies/cl/terms?iri=http://purl.obolibrary.org/obo/CL_0000066) (*epithelial cell* of the cervix). |\n\n---\n\nWhen a dataset is uploaded, the **cellxgene Data Portal** MUST automatically add the matching human-readable name for the corresponding ontology term to the `obs` dataframe. Curators **MUST NOT** annotate the following columns.\n\n### `assay`\n\n| Key | Annotator | Value |\n| --- | --- | --- |\n| `assay` | Data Portal | categorical with `str` categories. This **MUST** be the human-readable name assigned to the value of `assay_ontology_term_id`. |',
+    })),
+};
+export const WITH_HTML_ARGS = {
+    getValue: (() => ({
+        values: "Hello <br />World <a href='https://www.example.com'>example link</a>",
+    })),
+};

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

@@ -0,0 +1,5 @@
+import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
+/**
+ * Styled anchor component for testing purposes.
+ */
+export declare const STYLED_ANCHOR: typeof Anchor;

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

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Anchor } from "../../../../../../MarkdownRenderer/components/Anchor/anchor";
+/**
+ * Styled anchor component for testing purposes.
+ */
+export const STYLED_ANCHOR = styled(Anchor) `
+  background-color: green;
+  color: white;
+`;

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/components/common/AnchorLink/anchorLink.styles.d.ts

@@ -8,9 +8,9 @@ export declare const AnchorLink: import("@emotion/styled").StyledComponent<Omit<
     prefetch?: boolean | null;
     locale?: string | false;
     legacyBehavior?: boolean;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLAnchorElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLAnchorElement>;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }> & {
     href: string | import("url").UrlObject;
     as?: string | import("url").UrlObject;
@@ -21,11 +21,11 @@ export declare const AnchorLink: import("@emotion/styled").StyledComponent<Omit<
     prefetch?: boolean | null;
     locale?: string | false;
     legacyBehavior?: boolean;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLAnchorElement>;
-    onTouchStart?: import("react").TouchEventHandler<HTMLAnchorElement>;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 } & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
 } & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const CardSecondaryTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/common/Code/code.styles.d.ts

@@ -3,6 +3,6 @@ interface Props {
 }
 export declare const CodeBlock: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {}>;
 export {};

package/lib/components/common/Dot/dot.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const DotSeparator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/common/EllipsisContent/ellipsisContent.styles.d.ts

@@ -4,7 +4,7 @@ interface Props {
 }
 export declare const Content: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     [x: string]: any;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.d.ts

@@ -4,4 +4,4 @@ export interface CircularProgressProps extends MCircularProgressProps {
     className?: string;
     Track?: ElementType<CircularProgressProps>;
 }
-export declare const CircularProgress: ({ className, value, Track, ...props }: CircularProgressProps) => JSX.Element;
+export declare const CircularProgress: ({ className, Track, value, ...props }: CircularProgressProps) => JSX.Element;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.js

@@ -2,7 +2,7 @@ import { CircularProgress as MCircularProgress, } from "@mui/material";
 import React from "react";
 import { ProgressPositioner } from "./circularProgress.styles";
 import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
-export const CircularProgress = ({ className, value, Track = CircularProgressTrack, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+export const CircularProgress = ({ className, Track = CircularProgressTrack, value, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
     return (React.createElement(ProgressPositioner, { className: className },
         React.createElement(Track, { ...props }),
         React.createElement(MCircularProgress, { value: value, ...props })));

package/lib/components/common/Stack/stack.d.ts

@@ -15,4 +15,4 @@ export interface StackProps {
     justifyContent?: MStackProps["justifyContent"];
     spacing?: number;
 }
-export declare const Stack: ({ children, className, direction, divider, justifyContent, alignItems, gap, spacing, }: StackProps) => JSX.Element;
+export declare const Stack: ({ alignItems, children, className, direction, divider, gap, justifyContent, spacing, }: StackProps) => JSX.Element;

package/lib/components/common/Stack/stack.js

@@ -1,5 +1,5 @@
 import { Stack as MStack } from "@mui/material";
 import React from "react";
-export const Stack = ({ children, className, direction = "column", divider = undefined, justifyContent, alignItems, gap = 0, spacing = 0, }) => {
+export const Stack = ({ alignItems, children, className, direction = "column", divider = undefined, gap = 0, justifyContent, spacing = 0, }) => {
     return (React.createElement(MStack, { className: className, direction: direction, divider: divider, justifyContent: justifyContent, alignItems: alignItems, gap: gap, spacing: spacing }, children));
 };

package/lib/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.d.ts

@@ -1,2 +1,2 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-export declare const useToggleButtonGroup: <TValue extends unknown>(initialValue?: TValue | null) => ToggleButtonGroupProps;
+export declare const useToggleButtonGroup: <TValue extends ToggleButtonGroupProps["value"]>(initialValue?: TValue | null) => ToggleButtonGroupProps;

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": "32.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -85,6 +85,13 @@
     "react-gtm-module": "2.0.11",
     "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^7.2.0",
+    "rehype-sanitize": "^5.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2",
     "uuid": "8.3.2",
     "yup": "^1.6.1"
   },

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>;
 }
 
 /**