@databiosphere/findable-ui 30.0.0 → 32.0.0

package/src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.tsx

@@ -0,0 +1,37 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+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: Meta<typeof MarkdownCell> = {
+  component: MarkdownCell,
+  decorators: [
+    (Story): JSX.Element => (
+      <Box
+        sx={{
+          backgroundColor: PALETTE.COMMON_WHITE,
+          fontSize: "14px",
+          lineHeight: "20px",
+          padding: 3,
+          width: 480,
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};
+
+export const WithHtml: Story = {
+  args: WITH_HTML_ARGS,
+};

package/src/components/Table/components/TableCell/components/MarkdownCell/stories/types.ts

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

package/src/components/Table/components/TableCell/components/MarkdownCell/types.ts

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

package/src/components/common/Progress/components/CircularProgress/circularProgress.tsx

@@ -13,8 +13,8 @@ export interface CircularProgressProps extends MCircularProgressProps {
 
 export const CircularProgress = ({
   className,
-  value,
   Track = CircularProgressTrack,
+  value,
   ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
 }: CircularProgressProps): JSX.Element => {
   return (

package/src/components/common/Stack/stack.tsx

@@ -19,13 +19,13 @@ export interface StackProps {
 }
 
 export const Stack = ({
+  alignItems,
   children,
   className,
   direction = "column",
   divider = undefined,
-  justifyContent,
-  alignItems,
   gap = 0,
+  justifyContent,
   spacing = 0,
 }: StackProps): JSX.Element => {
   return (

package/src/styles/common/mui/typography.ts

@@ -6,6 +6,7 @@ type TypographyPropsOptions = {
 };
 
 const COLOR: Record<string, TypographyOwnProps["color"]> = {
+  ERROR: "error",
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",

package/tests/markdownCell.test.tsx

@@ -0,0 +1,53 @@
+import { matchers } from "@emotion/jest";
+import { composeStories } from "@storybook/react";
+import { Column } from "@tanstack/react-table";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import {
+  ANCHOR_TARGET,
+  REL_ATTRIBUTE,
+} from "../src/components/Links/common/entities";
+import { STYLED_ANCHOR } from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/constants";
+import * as stories from "../src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories";
+import { MarkdownCellProps } from "../src/components/Table/components/TableCell/components/MarkdownCell/types";
+
+expect.extend(matchers);
+
+const { Default, WithHtml } = composeStories(stories);
+
+describe("MarkdownCell", () => {
+  it("renders the markdown content", async () => {
+    render(<Default />);
+    expect(await screen.findByText("UBERON:0000955")).toBeInTheDocument();
+  });
+
+  it("renders HTML and anchor elements", async () => {
+    render(<WithHtml />);
+    const anchorEl = await screen.findByText("example link");
+    expect(anchorEl).toBeInTheDocument();
+    expect(anchorEl.getAttribute("href")).toBe("https://www.example.com");
+    expect(anchorEl.getAttribute("target")).toBe(ANCHOR_TARGET.BLANK);
+    expect(anchorEl.getAttribute("rel")).toBe(
+      REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+    );
+    expect(anchorEl).toHaveClass("MuiLink-root");
+  });
+
+  it("applies the correct className and component", async () => {
+    render(
+      <WithHtml
+        className="css-pygqsj"
+        column={
+          {
+            columnDef: { meta: { components: { a: STYLED_ANCHOR } } },
+          } as unknown as Column<unknown, MarkdownCellProps>
+        }
+      />
+    );
+    const anchorEl = await screen.findByText("example link");
+    expect(anchorEl).toHaveStyleRule("background-color", "green");
+    expect(anchorEl).toHaveStyleRule("color", "white");
+    expect(anchorEl.closest(".css-pygqsj")).toBeInTheDocument();
+  });
+});

package/tests/useRequestManifest.test.ts

@@ -172,9 +172,9 @@ describe("useRequestManifest", () => {
  * @param testObject.formFacet - Form facet.
  */
 function testRequestManifest({
+  expectedMethod = METHOD.PUT,
   expectedParams = undefined,
   expectedUrl = undefined,
-  expectedMethod = METHOD.PUT,
   fileManifestFormat,
   formFacet = FORM_FACET.COMPLETE_SET,
 }: {

package/types/data-explorer-ui.d.ts

@@ -19,6 +19,7 @@ import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import type {} from "@tanstack/react-table";
 import { RowData } from "@tanstack/react-table";
+import { Components } from "rehype-react";
 import { DataLayer } from "../src/common/analytics/entities";
 import { DataDictionaryAnnotation } from "../src/common/entities";
 import {
@@ -230,6 +231,7 @@ declare module "@tanstack/react-table" {
     align?: TableCellProps["align"];
     annotation?: DataDictionaryAnnotation;
     columnPinned?: boolean;
+    components?: Partial<Components>; // For `MarkdownRendererCell` component.
     header?: string;
     width?: GridTrackSize;
   }