@databiosphere/findable-ui 29.0.2 → 31.0.0

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -19,7 +20,7 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
     }, [key, onUpdateItemSizeByItemKey]);
     if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, VIEW_KIND.SELECT, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
             React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
     }

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.d.ts

@@ -1,18 +1,19 @@
 import React from "react";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { SelectCategoryView } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface SearchAllFiltersProps {
-    categoryViews: SelectCategoryView[];
+    categoryViews: CategoryView[];
     drawerOpen?: boolean;
     onFilter: OnFilterFn;
 }
 interface ListboxContextValue {
-    categoryViews: SelectCategoryView[];
     onClearSearch: () => void;
     onCloseSearch: () => void;
     onFilter: OnFilterFn;
     open: boolean;
     searchTerm: string;
+    selectCategoryViews: SelectCategoryView[];
 }
 export declare const ListboxContext: React.Context<ListboxContextValue>;
 export declare const SearchAllFilters: ({ categoryViews, drawerOpen, onFilter, }: SearchAllFiltersProps) => JSX.Element;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { isSelectCategoryView } from "../../../../common/categories/views/select/typeGuards";
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
@@ -13,25 +14,26 @@ import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList
 import { Autocomplete } from "./searchAllFilters.styles";
 const renderInput = (params) => (React.createElement(SearchAllFiltersSearch, { ...params }));
 export const ListboxContext = createContext({
-    categoryViews: [],
     onClearSearch: () => undefined,
     onCloseSearch: () => undefined,
     onFilter: () => undefined,
     open: false,
     searchTerm: "",
+    selectCategoryViews: [],
 });
 const Listbox = React.forwardRef(function Listbox(props, ref) {
     props = Object.assign({}, props, {
         children: undefined, // Content is controlled by VariableSizeList
     });
-    const { categoryViews, onFilter, searchTerm } = useContext(ListboxContext);
-    return (React.createElement(VariableSizeList, { autocompleteListProps: props, categoryViews: categoryViews, onFilter: onFilter, ref: ref, searchTerm: searchTerm }));
+    const { onFilter, searchTerm, selectCategoryViews } = useContext(ListboxContext);
+    return (React.createElement(VariableSizeList, { autocompleteListProps: props, onFilter: onFilter, ref: ref, searchTerm: searchTerm, selectCategoryViews: selectCategoryViews }));
 });
 export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
     const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
     const autocompleteRef = useRef(null);
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
+    const selectCategoryViews = categoryViews.filter((view) => isSelectCategoryView(view));
     // Handles background scroll action (desktop only).
     const handleBackgroundScroll = (overflowStyle) => {
         if (desktopSmUp) {
@@ -79,12 +81,12 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
         }
     }, [drawerOpen]);
     return (React.createElement(ListboxContext.Provider, { value: {
-            categoryViews,
             onClearSearch,
             onCloseSearch,
             onFilter,
             open,
             searchTerm,
+            selectCategoryViews,
         } },
         React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { VIEW_KIND } from "../../../../common/categories/views/types";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
@@ -15,7 +16,7 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
         onUpdateItemSizeByItemKey(key, listItemRef.current?.clientHeight || 0);
     }, [key, onUpdateItemSizeByItemKey]);
     const handleItemClicked = () => {
-        onFilter(categoryKey, key, !selected, categorySection);
+        onFilter(categoryKey, key, !selected, categorySection, VIEW_KIND.SELECT);
     };
     return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),

package/lib/components/Index/components/EntitiesView/components/ChartView/utils.js

@@ -1,3 +1,4 @@
+import { isSelectCategoryView } from "../../../../../../common/categories/views/select/typeGuards";
 /**
  * Returns the set of select category views that have chart view enabled.
  * @param categoryFilters - Category filters.
@@ -6,6 +7,7 @@
 export function getSelectCategoryViews(categoryFilters) {
     return categoryFilters
         .flatMap(({ categoryViews }) => categoryViews)
+        .filter(isSelectCategoryView)
         .filter(({ enableChartView = true }) => enableChartView)
         .filter(({ values }) => values.length > 0);
 }

package/lib/components/Index/table/hook.js

@@ -10,6 +10,7 @@ import { DEFAULT_PAGINATION_STATE } from "../../../providers/exploreState/initia
 import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
 import { COLUMN_DEF } from "../../Table/common/columnDef";
 import { buildCategoryViews, getFacetedUniqueValuesWithArrayValues, getTableStatePagination, isClientFilteringEnabled, sortingFn, } from "../../Table/common/utils";
+import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
 import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
 import { buildBaseColumnDef } from "../../TableCreator/common/utils";
@@ -105,6 +106,9 @@ export const useTable = () => {
         enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
         filterFns: { arrIncludesSome },
         getCoreRowModel: getCoreRowModel(),
+        getFacetedMinMaxValues: clientFiltering
+            ? getFacetedMinMaxValues()
+            : undefined,
         getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: clientFiltering
             ? getFacetedUniqueValuesWithArrayValues()

package/lib/components/MarkdownRenderer/components/Anchor/anchor.d.ts

@@ -0,0 +1,19 @@
+import { AnchorHTMLAttributes, ClassAttributes } from "react";
+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 declare const Anchor: (props: BaseComponentProps & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>) => JSX.Element;

package/lib/components/MarkdownRenderer/components/Anchor/anchor.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Link } from "../../../Links/components/Link/link";
+/**
+ * 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) => {
+    return (React.createElement(Link, { className: props.className, label: props.children, url: props.href || "" }));
+};

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

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "components/types";
+import { ClassAttributes, TableHTMLAttributes } from "react";
+export declare const Table: (props: BaseComponentProps & ClassAttributes<HTMLTableElement> & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;

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?: import("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 { Components } from "rehype-react";
+export declare const COMPONENTS: Partial<Components>;

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,2 @@
+import { MarkdownRendererProps } from "./types";
+export declare const MarkdownRenderer: ({ className, components, value, }: MarkdownRendererProps) => JSX.Element;

package/lib/components/MarkdownRenderer/markdownRenderer.js

@@ -0,0 +1,45 @@
+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 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";
+export const MarkdownRenderer = ({ className, components = COMPONENTS, value, }) => {
+    const [element, setElement] = useState(null);
+    const [error, setError] = useState(null);
+    const [componentOptions] = useState(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 () => {
+            cancelled = true;
+        };
+    }, [componentOptions, 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?: import("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,6 @@
+import { Components } from "rehype-react";
+import { BaseComponentProps } from "../types";
+export interface MarkdownRendererProps extends BaseComponentProps {
+    components?: Partial<Components>;
+    value: string;
+}

package/lib/components/MarkdownRenderer/types.js

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

package/lib/components/Table/columnDef/accessorFn/typeGuards.d.ts

@@ -0,0 +1,9 @@
+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 declare function rowHasKey<T extends RowData, K extends PropertyKey, TValue>(row: T, key: K): row is T & Record<K, TValue>;

package/lib/components/Table/columnDef/accessorFn/typeGuards.js

@@ -0,0 +1,10 @@
+/**
+ * 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, key) {
+    return row != null && typeof row === "object" && key in row;
+}

package/lib/components/Table/common/utils.d.ts

@@ -1,5 +1,5 @@
 import { Cell, Column, ColumnFiltersState, PaginationState, Row, RowData, Table } from "@tanstack/react-table";
-import { SelectCategory } from "../../../common/entities";
+import { Category } from "../../../common/categories/models/types";
 import { ExploreMode } from "../../../hooks/useExploreMode/types";
 /**
  * Internal model of a category term count keyed by category term.
@@ -15,7 +15,7 @@ type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
+export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): Category[];
 /**
  * Returns filtered entity results as a blob.
  * @param rows - Table rows.

package/lib/components/Table/common/utils.js

@@ -10,23 +10,38 @@ import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 export function buildCategoryViews(columns, columnFilters) {
     const categoryViews = [];
     for (const column of columns) {
-        const { columnDef, getCanFilter, getFacetedUniqueValues, id } = column;
+        const { columnDef, getCanFilter, getFacetedMinMaxValues, getFacetedUniqueValues, id, } = column;
         const { header: columnHeader } = columnDef;
         if (getCanFilter()) {
-            updateFacetedUniqueValues(getFacetedUniqueValues(), columnFilters, id);
             const key = id;
             const label = columnHeader;
-            const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
-                count,
-                key: value,
-                label: String(value ?? ""),
-                selected: false, // Selected state updated in reducer.
-            }));
-            categoryViews.push({
-                key,
-                label,
-                values: values,
-            });
+            // Handle range categories.
+            if (columnDef.filterFn === "inNumberRange") {
+                const minMax = getFacetedMinMaxValues();
+                categoryViews.push({
+                    key,
+                    label,
+                    max: minMax?.[1] || Infinity,
+                    min: minMax?.[0] || -Infinity,
+                    selectedMax: null, // Selected state updated in reducer.
+                    selectedMin: null, // Selected state updated in reducer.
+                });
+            }
+            // Handle select categories.
+            if (columnDef.filterFn === "arrIncludesSome") {
+                updateFacetedUniqueValues(getFacetedUniqueValues(), columnFilters, id);
+                const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
+                    count,
+                    key: value,
+                    label: String(value ?? ""),
+                    selected: false, // Selected state updated in reducer.
+                }));
+                categoryViews.push({
+                    key,
+                    label,
+                    values: values,
+                });
+            }
         }
     }
     return categoryViews;

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

@@ -0,0 +1,4 @@
+import { ChipProps } from "@mui/material";
+import { CellContext, RowData } from "@tanstack/react-table";
+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

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

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

@@ -0,0 +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>({ className, getValue, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

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

@@ -0,0 +1,21 @@
+import { Link as MLink, Typography } from "@mui/material";
+import React from "react";
+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 = ({ className, getValue, }) => {
+    const props = getValue();
+    if (!props)
+        return null;
+    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.
+    const isValid = isClientSide || isValidUrl(href);
+    // If the href is invalid, return a Typography component.
+    if (!isValid)
+        return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INHERIT, component: "span", variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT, ...linkProps }, children));
+    // If the href is valid, return a Link component.
+    return (React.createElement(MLink, { className: className, color: color, component: getComponent(href, isClientSide), href: href, rel: getRelAttribute(rel, isClientSide), target: getTargetAttribute(target, isClientSide), underline: underline, ...linkProps }, children));
+};

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { LinkCell } from "../linkCell";
+export declare const CLIENT_SIDE_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const EXTERNAL_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const INVALID_ARGS: Partial<ComponentProps<typeof LinkCell>>;
+export declare const WITH_CUSTOM_STYLE_ARGS: Partial<ComponentProps<typeof LinkCell>>;

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

@@ -0,0 +1,27 @@
+import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
+export const CLIENT_SIDE_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        href: "/",
+    })),
+};
+export const EXTERNAL_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        href: "https://www.example.com",
+    })),
+};
+export const INVALID_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+    })),
+};
+export const WITH_CUSTOM_STYLE_ARGS = {
+    getValue: (() => ({
+        children: "Explore",
+        color: "success",
+        href: "/",
+        underline: "none",
+        variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400,
+    })),
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LinkCell } from "../linkCell";
+declare const meta: Meta<typeof LinkCell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ClientSide: Story;
+export declare const External: Story;
+export declare const Invalid: Story;
+export declare const WithCustomStyle: Story;

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

@@ -0,0 +1,18 @@
+import { LinkCell } from "../linkCell";
+import { CLIENT_SIDE_ARGS, EXTERNAL_ARGS, INVALID_ARGS, WITH_CUSTOM_STYLE_ARGS, } from "./args";
+const meta = {
+    component: LinkCell,
+};
+export default meta;
+export const ClientSide = {
+    args: CLIENT_SIDE_ARGS,
+};
+export const External = {
+    args: EXTERNAL_ARGS,
+};
+export const Invalid = {
+    args: INVALID_ARGS,
+};
+export const WithCustomStyle = {
+    args: WITH_CUSTOM_STYLE_ARGS,
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { ElementType } from "react";
+/**
+ * Returns the component to use for a link based on the given href and client-side navigation flag.
+ * @param href - The href attribute to use.
+ * @param isClientSide - Whether the link is a client-side navigation.
+ * @returns The component to use for the link.
+ */
+export declare function getComponent(href: string, isClientSide: boolean): ElementType;
+/**
+ * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
+ * @param rel - The rel attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The rel attribute for the link.
+ */
+export declare function getRelAttribute(rel: string | undefined, isClientSideNavigation: boolean): string;
+/**
+ * Returns the target attribute for a link based on the given target and client-side navigation flag.
+ * @param target - The target attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The target attribute for the link.
+ */
+export declare function getTargetAttribute(target: string | undefined, isClientSideNavigation: boolean): string;

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

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { isValidUrl } from "../../../../../../common/utils";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../Links/common/entities";
+import { assertAnchorRelAttribute, assertAnchorTargetAttribute, } from "../../../../../common/Link/typeGuards";
+/**
+ * Returns the component to use for a link based on the given href and client-side navigation flag.
+ * @param href - The href attribute to use.
+ * @param isClientSide - Whether the link is a client-side navigation.
+ * @returns The component to use for the link.
+ */
+export function getComponent(href, isClientSide) {
+    if (isClientSide)
+        return Link; // Use Next/Link for client-side navigation.
+    if (isValidUrl(href))
+        return "a"; // Use anchor tag for external links.
+    return "span"; // Use span for invalid links.
+}
+/**
+ * Returns the rel attribute for a link based on the given rel and client-side navigation flag.
+ * @param rel - The rel attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The rel attribute for the link.
+ */
+export function getRelAttribute(rel, isClientSideNavigation) {
+    if (rel) {
+        assertAnchorRelAttribute(rel);
+        return rel;
+    }
+    return isClientSideNavigation
+        ? REL_ATTRIBUTE.NO_OPENER
+        : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER;
+}
+/**
+ * Returns the target attribute for a link based on the given target and client-side navigation flag.
+ * @param target - The target attribute to use.
+ * @param isClientSideNavigation - Whether the link is a client-side navigation.
+ * @returns The target attribute for the link.
+ */
+export function getTargetAttribute(target, isClientSideNavigation) {
+    if (target) {
+        assertAnchorTargetAttribute(target);
+        return target;
+    }
+    return isClientSideNavigation ? ANCHOR_TARGET.SELF : ANCHOR_TARGET.BLANK;
+}

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;