@databiosphere/findable-ui 23.0.0 → 25.0.0

package/tests/stepIcon.test.tsx

@@ -0,0 +1,42 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { STEP_ICON_TEST_ID } from "../src/components/Stepper/components/Step/components/StepIcon/constants";
+import * as stories from "../src/components/Stepper/components/Step/components/StepIcon/stories/stepIcon.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import { getClassNames, getTagName } from "../src/utils/tests";
+
+const { Active, Completed, Default } = composeStories(stories);
+
+describe("StepIcon", () => {
+  it("renders correctly", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl).not.toBeNull();
+  });
+
+  it("renders inactive step icon", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders active step icon", () => {
+    render(<Active testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders completed step icon", () => {
+    render(<Completed testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).not.toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.COMPLETED);
+    expect(getTagName(stepIconEl.firstElementChild)).toBe("path");
+  });
+});

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

@@ -1,4 +1,8 @@
-import { Theme as MTheme } from "@mui/material";
+import {
+  Theme as MTheme,
+  PaletteColorOptions,
+  TypographyStyleOptions,
+} from "@mui/material";
 import type {} from "@mui/material/Alert";
 import type {} from "@mui/material/Button";
 import type {} from "@mui/material/Checkbox";
@@ -7,12 +11,10 @@ import type {} from "@mui/material/CircularProgress";
 import type {} from "@mui/material/IconButton";
 import type {} from "@mui/material/Paper";
 import type {} from "@mui/material/styles";
-import type {} from "@mui/material/styles/createPalette";
-import { PaletteColorOptions } from "@mui/material/styles/createPalette";
-import { TypographyStyleOptions } from "@mui/material/styles/createTypography";
 import type {} from "@mui/material/SvgIcon";
 import type {} from "@mui/material/TableCell";
 import type {} from "@mui/material/Tabs";
+import type {} from "@mui/material/themeCssVarsAugmentation";
 import type {} from "@mui/material/Toolbar";
 import type {} from "@mui/material/Typography";
 import type {} from "@tanstack/react-table";
@@ -29,9 +31,6 @@ import {
 import { GridTrackSize } from "../src/config/entities";
 import { SIZE } from "../src/styles/common/constants/size";
 
-/**
- * Alert prop options.
- */
 declare module "@mui/material/Alert" {
   interface AlertProps {
     size?: SIZE.MEDIUM | SIZE.LARGE;
@@ -44,22 +43,6 @@ declare module "@mui/material/Alert" {
   }
 }
 
-/**
- * Breakpoint definitions.
- */
-declare module "@mui/material/styles" {
-  interface BreakpointOverrides {
-    lg: true;
-    md: true;
-    sm: true;
-    xl: false;
-    xs: true;
-  }
-}
-
-/**
- * Button prop options.
- */
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     activeNav: true;
@@ -68,27 +51,18 @@ declare module "@mui/material/Button" {
   }
 }
 
-/**
- * CircularProgress prop options.
- */
 declare module "@mui/material/CircularProgress" {
   interface CircularProgressPropsColorOverrides {
     alert: true;
   }
 }
 
-/**
- * Checkbox prop options.
- */
 declare module "@mui/material/Checkbox" {
   interface CheckboxPropsSizeOverrides {
     xsmall: true;
   }
 }
 
-/**
- * Chip prop options.
- */
 declare module "@mui/material/Chip" {
   interface ChipPropsColorOverrides {
     default: true;
@@ -103,9 +77,6 @@ declare module "@mui/material/Chip" {
   }
 }
 
-/**
- * IconButton prop options.
- */
 declare module "@mui/material/IconButton" {
   interface IconButtonPropsColorOverrides {
     ink: true;
@@ -119,34 +90,6 @@ declare module "@mui/material/IconButton" {
   }
 }
 
-/**
- * Palette definitions.
- */
-declare module "@mui/material/styles/createPalette" {
-  interface Palette {
-    alert: PaletteColor;
-    ink: PaletteColor;
-    smoke: PaletteColor;
-  }
-
-  interface PaletteColor {
-    lightest?: string;
-  }
-
-  interface PaletteOptions {
-    alert?: PaletteColorOptions;
-    ink?: PaletteColorOptions;
-    smoke?: PaletteColorOptions;
-  }
-
-  interface SimplePaletteColorOptions {
-    lightest?: string;
-  }
-}
-
-/**
- * Paper prop options.
- */
 declare module "@mui/material/Paper" {
   interface PaperPropsVariantOverrides {
     footer: true;
@@ -157,9 +100,6 @@ declare module "@mui/material/Paper" {
   }
 }
 
-/**
- * SvgIcon prop options.
- */
 declare module "@mui/material/SvgIcon" {
   interface SvgIconPropsColorOverrides {
     inkLight: true;
@@ -173,9 +113,6 @@ declare module "@mui/material/SvgIcon" {
   }
 }
 
-/**
- * Tabs prop options.
- */
 declare module "@mui/material/Tabs" {
   interface TabsPropsIndicatorColorOverrides {
     transparent: true;
@@ -184,10 +121,35 @@ declare module "@mui/material/Tabs" {
 
 /* eslint-disable sonarjs/no-duplicate-string  -- ignoring duplicate strings here */
 
-/**
- * Typography definitions.
- */
 declare module "@mui/material/styles" {
+  interface BreakpointOverrides {
+    lg: true;
+    md: true;
+    sm: true;
+    xl: false;
+    xs: true;
+  }
+
+  interface Palette {
+    alert: PaletteColor;
+    ink: PaletteColor;
+    smoke: PaletteColor;
+  }
+
+  interface PaletteColor {
+    lightest?: string;
+  }
+
+  interface PaletteOptions {
+    alert?: PaletteColorOptions;
+    ink?: PaletteColorOptions;
+    smoke?: PaletteColorOptions;
+  }
+
+  interface SimplePaletteColorOptions {
+    lightest?: string;
+  }
+
   interface TypographyVariants {
     "text-body-400": TypographyStyleOptions;
     "text-body-400-2lines": TypographyStyleOptions;
@@ -203,6 +165,7 @@ declare module "@mui/material/styles" {
     "text-heading-large": TypographyStyleOptions;
     "text-heading-small": TypographyStyleOptions;
     "text-heading-xlarge": TypographyStyleOptions;
+    "text-heading-xsmall": TypographyStyleOptions;
     "text-uppercase-500": TypographyStyleOptions;
   }
 
@@ -221,22 +184,19 @@ declare module "@mui/material/styles" {
     "text-heading-large"?: TypographyStyleOptions;
     "text-heading-small"?: TypographyStyleOptions;
     "text-heading-xlarge"?: TypographyStyleOptions;
+    "text-heading-xsmall"?: TypographyStyleOptions;
     "text-uppercase-500"?: TypographyStyleOptions;
   }
 }
 
-/**
- * Toolbar prop options.
- */
+/* eslint-enable sonarjs/no-duplicate-string  -- watching duplicate strings here */
+
 declare module "@mui/material/Toolbar" {
   interface ToolbarPropsVariantOverrides {
     table: true;
   }
 }
 
-/**
- * Typography variant overrides.
- */
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
     "text-body-400": true;
@@ -253,12 +213,11 @@ declare module "@mui/material/Typography" {
     "text-heading-large": true;
     "text-heading-small": true;
     "text-heading-xlarge": true;
+    "text-heading-xsmall": true;
     "text-uppercase-500": true;
   }
 }
 
-/* eslint-enable sonarjs/no-duplicate-string  -- watching duplicate strings here */
-
 declare module "@emotion/react" {
   export interface Theme extends MTheme {
     name: "EmotionTheme";

package/src/components/Index/components/Cell/cell.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-export interface CellProps {
-  value?: number | string | string[];
-}
-
-/**
- * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
- */
-
-export const Cell = ({ value = "Unspecified" }: CellProps): JSX.Element => {
-  if (typeof value === "string" || typeof value === "number") {
-    return <div>{value}</div>;
-  }
-  return (
-    <>
-      {value.map((v: string) => (
-        <div key={v}>{v}</div>
-      ))}
-    </>
-  );
-};

package/src/components/Index/components/NTag/components/Tooltip/tooltip.styles.ts

@@ -1,11 +0,0 @@
-import styled from "@emotion/styled";
-
-export const TooltipContent = styled.span`
-  overflow: scroll;
-  overscroll-behavior: none;
-  padding: 8px 12px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;

package/src/components/Index/components/NTag/components/Tooltip/tooltip.tsx

@@ -1,90 +0,0 @@
-import {
-  Tooltip as MTooltip,
-  TooltipProps as MTooltipProps,
-  PopperProps,
-} from "@mui/material";
-import { detectOverflow } from "@popperjs/core";
-import { State } from "@popperjs/core/lib/types";
-import React, { useMemo, useState } from "react";
-import { TooltipContent } from "./tooltip.styles";
-
-const DEFAULT_FLIP_MODIFIER = {
-  enabled: true,
-  name: "flip",
-  options: {
-    fallbackPlacements: ["bottom", "right", "left"],
-  },
-};
-
-const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
-  enabled: true,
-  name: "preventOverflow",
-  options: {
-    padding: 16,
-  },
-};
-
-export interface TooltipProps extends MTooltipProps {
-  className?: string;
-}
-
-/**
- * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
- */
-
-export const Tooltip = ({
-  children,
-  className,
-  title,
-  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
-}: TooltipProps): JSX.Element => {
-  const [maxHeight, setMaxHeight] = useState<number>();
-  const modifiers: PopperProps["modifiers"] = useMemo(
-    () => [
-      {
-        enabled: true,
-        fn: ({ state }): void => setMaxHeight(calculateMaxHeight(state)),
-        name: "maxHeight",
-        phase: "main",
-        requiresIfExists: ["offset"],
-      },
-      DEFAULT_FLIP_MODIFIER,
-      DEFAULT_PREVENT_OVERFLOW_MODIFIER,
-    ],
-    []
-  );
-  return (
-    <MTooltip
-      arrow
-      className={className}
-      onClose={(): void => setMaxHeight(undefined)}
-      slotProps={{
-        popper: { modifiers },
-        tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
-      }}
-      title={<TooltipContent>{title}</TooltipContent>}
-      {...props}
-    >
-      {children}
-    </MTooltip>
-  );
-};
-
-/**
- * Calculate the max height of the tooltip based on the current popper modifier state.
- * @param state - Popper modifier state.
- * @returns tooltip maximum height.
- */
-function calculateMaxHeight(state: State): number | undefined {
-  const overflow = detectOverflow(state);
-  const { placement } = state;
-  if (placement === "left" || placement === "right") {
-    return window.innerHeight - 32;
-  }
-  if (placement === "top") {
-    return state.rects.popper.height - overflow.top - 24;
-  }
-  if (placement === "bottom") {
-    return state.rects.popper.height - overflow.bottom - 24;
-  }
-}

package/src/components/Index/components/NTag/nTag.tsx

@@ -1,25 +0,0 @@
-import React, { ReactElement } from "react";
-import { Tooltip } from "./components/Tooltip/tooltip";
-
-export interface NTagProps {
-  className?: string;
-  Tag: ReactElement;
-  TooltipTitle: ReactElement;
-}
-
-/**
- * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
- */
-
-export const NTag = ({
-  className,
-  Tag,
-  TooltipTitle,
-  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
-}: NTagProps): JSX.Element => {
-  return (
-    <Tooltip className={className} title={TooltipTitle} {...props}>
-      {Tag}
-    </Tooltip>
-  );
-};

package/src/components/Index/components/NTagCell/nTagCell.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { NTagCell } from "./nTagCell";
-
-const meta = {
-  argTypes: {
-    label: { control: "text" },
-    values: { control: "object" },
-  },
-  component: NTagCell,
-  title: "Components/Table/Cell/NTagCell",
-} satisfies Meta<typeof NTagCell>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const NTagCellStory: Story = {
-  args: {
-    label: "species",
-    values: ["Homo sapiens", "Mus musculus"],
-  },
-};

package/src/components/Index/components/NTagCell/nTagCell.tsx

@@ -1,74 +0,0 @@
-import {
-  Chip as MChip,
-  ChipProps as MChipProps,
-  Typography,
-} from "@mui/material";
-import React, { forwardRef } from "react";
-import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
-import { TypographyProps } from "../../../common/Typography/common/entities";
-import { NTag } from "../NTag/nTag";
-
-// Template constants
-const MAX_DISPLAYABLE_VALUES = 1;
-
-export type MetadataValue = string;
-
-export interface NTagCellProps {
-  label: string;
-  TypographyProps?: TypographyProps;
-  values: MetadataValue[];
-}
-
-/**
- * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
- * @param metadataValues - List of metadata values.
- * @returns the metadata values in a string, each value joined by a comma.
- */
-function stringifyMetadataValues(metadataValues: MetadataValue[]): string {
-  return metadataValues.join(", ");
-}
-
-/**
- * Renders tag for NTag component.
- * Tooltip children require forward ref.
- */
-const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
-  return <MChip ref={ref} {...props} />;
-});
-
-/**
- * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
- */
-
-export const NTagCell = ({
-  label,
-  TypographyProps,
-  values,
-}: NTagCellProps): JSX.Element => {
-  const metadataCount = values.length;
-  const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-  return (
-    <>
-      {showNTag ? (
-        <NTag
-          Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
-          TooltipTitle={
-            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
-              {stringifyMetadataValues(values)}
-            </Typography>
-          }
-        />
-      ) : (
-        values.map((value, v) => (
-          <Typography
-            key={`${value}${v}`}
-            variant="inherit"
-            {...TypographyProps}
-          >
-            {value}
-          </Typography>
-        ))
-      )}
-    </>
-  );
-};

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.stories.tsx

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { BackPageHero } from "./backPageHero";
-
-export default {
-  component: BackPageHero,
-  title: "Components/Hero",
-} as Meta<typeof BackPageHero>;
-
-type Story = StoryObj<typeof BackPageHero>;
-
-export const BackPageHeroStory: Story = {
-  args: {
-    title:
-      "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
-  },
-};

package/src/components/TableCreator/tableCreator.styles.ts

@@ -1,5 +0,0 @@
-import styled from "@emotion/styled";
-
-export const TableCreator = styled.div`
-  position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
-`;