@databiosphere/findable-ui 23.0.0 → 25.0.0

package/src/components/Stepper/components/Step/stories/step.stories.tsx

@@ -0,0 +1,87 @@
+import { Stepper } from "@mui/material";
+import { Meta, StoryObj, composeStories } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import { CONTROL_TYPE } from "../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../storybook/controls/utils";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
+import { STEPPER_PROPS } from "../../../../../styles/common/mui/stepper";
+import { StepContent } from "../components/StepContent/stepContent";
+import * as stories from "../components/StepLabel/stories/stepLabel.stories";
+import { Step } from "../step";
+import { BOOLEAN_CONTROLS, DISABLED_CONTROLS } from "./contants";
+
+const {
+  Active: ActiveStepLabel,
+  Completed: CompletedStepLabel,
+  Default: StepLabel,
+} = composeStories(stories);
+
+const meta: Meta<typeof Step> = {
+  argTypes: {
+    ...configureControls<ComponentProps<typeof Step>>(
+      DISABLED_CONTROLS,
+      CONTROL_TYPE.DISABLED
+    ),
+    ...configureControls<ComponentProps<typeof Step>>(
+      BOOLEAN_CONTROLS,
+      CONTROL_TYPE.BOOLEAN
+    ),
+    index: { control: { type: "number" } },
+  },
+  component: Step,
+  decorators: [
+    (Story, context): JSX.Element => (
+      <Stepper
+        connector={null}
+        orientation={STEPPER_PROPS.ORIENTATION.VERTICAL}
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "minmax(auto, 816px)",
+          height: "100vh",
+          placeContent: "center center",
+        }}
+      >
+        <Story {...context} />
+      </Stepper>
+    ),
+  ],
+  parameters: { layout: "fullscreen" },
+  title: "Components/Stepper/Step",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    active: true,
+    children: [
+      <ActiveStepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: false,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    active: false,
+    children: [
+      <CompletedStepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: true,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    active: false,
+    children: [
+      <StepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: false,
+  },
+};

package/src/components/Support/components/SupportRequest/components/Dialog/dialog.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import React, {
   Dispatch,
   MouseEvent,
@@ -32,7 +32,7 @@ export const FormDialog = ({
   return (
     <>
       <Fab color="primary" onClick={toggleOpen} open={open} size="medium">
-        {open ? <CloseRoundedIcon /> : <FeedbackIcon fontSize="medium" />}
+        {open ? <CloseRounded /> : <FeedbackIcon fontSize="medium" />}
       </Fab>
       <Popover
         anchorEl={anchorEl}

package/src/components/Table/components/Pagination/pagination.tsx

@@ -1,5 +1,4 @@
-import EastRoundedIcon from "@mui/icons-material/EastRounded";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -35,13 +34,13 @@ export const Pagination = ({
         <IconButton
           color="secondary"
           disabled={!canPreviousPage}
-          Icon={WestRoundedIcon}
+          Icon={WestRounded}
           onClick={onPreviousPage}
         />
         <IconButton
           color="secondary"
           disabled={!canNextPage}
-          Icon={EastRoundedIcon}
+          Icon={EastRounded}
           onClick={onNextPage}
         />
       </Stack>

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,4 +1,4 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import { SouthRounded } from "@mui/icons-material";
 import {
   TableHead as MTableHead,
   TableRow as MTableRow,
@@ -42,7 +42,7 @@ export const TableHead = <T extends RowData>({
                     >
                       {shouldSortColumn(tableInstance, column) ? (
                         <TableSortLabel
-                          IconComponent={SouthRoundedIcon}
+                          IconComponent={SouthRounded}
                           active={Boolean(getIsSorted())}
                           direction={getIsSorted() || undefined}
                           disabled={isSortDisabled(tableInstance)}

package/src/components/Table/table.tsx

@@ -14,7 +14,7 @@ import {
   Updater,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import {
   EVENT_NAME,
@@ -33,7 +33,7 @@ import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
-import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
 import { ROW_DIRECTION } from "./common/entities";
@@ -88,7 +88,7 @@ TableProps<T>): JSX.Element => {
     entityPageState,
     filterState,
     listItems,
-    loading,
+    loading = false,
     paginationState,
     rowPreview,
     tabValue,
@@ -285,43 +285,47 @@ TableProps<T>): JSX.Element => {
   }
 
   return noResults ? (
-    <NoResults Paper={FluidPaper} title={"No Results found"} />
+    <NoResults Paper={null} title="No Results found" />
   ) : (
-    <FluidPaper variant="table">
-      <GridPaper>
-        <TableToolbar
-          listView={listView}
-          rowDirection={rowDirection}
-          tableInstance={tableInstance}
-        />
-        <TableContainer>
-          <GridTable
-            collapsable={true}
-            gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
-          >
-            <TableHead
-              rowDirection={rowDirection}
-              tableInstance={tableInstance}
-            />
-            <TableBody
-              rows={rows}
-              rowDirection={rowDirection}
-              tableInstance={tableInstance}
-            />
-          </GridTable>
-        </TableContainer>
-        {!disablePagination && (
-          <DXPagination
-            canNextPage={canNextPage()}
-            canPreviousPage={canPreviousPage()}
-            currentPage={currentPage}
-            onNextPage={handleTableNextPage}
-            onPreviousPage={handleTablePreviousPage}
-            totalPage={pages ?? 0}
+    <Fragment>
+      <TableToolbar
+        listView={listView}
+        rowDirection={rowDirection}
+        tableInstance={tableInstance}
+      />
+      <Loading
+        appear={false}
+        autoPosition={false}
+        loading={loading}
+        panelStyle={LOADING_PANEL_STYLE.INHERIT}
+      />
+      <TableContainer>
+        <GridTable
+          collapsable={true}
+          gridTemplateColumns={getColumnTrackSizing(getVisibleFlatColumns())}
+        >
+          <TableHead
+            rowDirection={rowDirection}
+            tableInstance={tableInstance}
+          />
+          <TableBody
+            rows={rows}
+            rowDirection={rowDirection}
+            tableInstance={tableInstance}
           />
-        )}
-      </GridPaper>
-    </FluidPaper>
+        </GridTable>
+      </TableContainer>
+      {!disablePagination && (
+        <DXPagination
+          canNextPage={canNextPage()}
+          canPreviousPage={canPreviousPage()}
+          currentPage={currentPage}
+          onNextPage={handleTableNextPage}
+          onPreviousPage={handleTablePreviousPage}
+          totalPage={pages ?? 0}
+        />
+      )}
+    </Fragment>
   );
 };
 

package/src/components/TableCreator/tableCreator.tsx

@@ -6,15 +6,12 @@ import {
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
 import { ColumnConfig, ListViewConfig } from "../../config/entities";
-import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
 import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
-import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 
 export interface TableCreatorProps<T> {
   columns: ColumnConfig<T>[];
@@ -67,20 +64,13 @@ export const TableCreator = <T extends RowData>({
     [columns]
   );
   return (
-    <TableCreatorContainer>
-      <Loading
-        appear={false}
-        loading={loading || false}
-        panelStyle={PAPER_PANEL_STYLE.FLUID}
-      />
-      <Table<T>
-        columns={columnDefs}
-        getRowId={getRowId}
-        items={items}
-        listView={listView}
-        loading={loading}
-        tableOptions={tableOptions}
-      />
-    </TableCreatorContainer>
+    <Table<T>
+      columns={columnDefs}
+      getRowId={getRowId}
+      items={items}
+      listView={listView}
+      loading={loading}
+      tableOptions={tableOptions}
+    />
   );
 };

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -1,4 +1,4 @@
-import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import { LinkRounded } from "@mui/icons-material";
 import React from "react";
 import { AnchorLink as Link } from "./anchorLink.styles";
 
@@ -20,7 +20,7 @@ export const AnchorLink = ({
 }: AnchorLinkProps): JSX.Element => {
   return (
     <Link aria-label={anchorLink} className={className} href={`#${anchorLink}`}>
-      <LinkRoundedIcon fontSize="xsmall" />
+      <LinkRounded fontSize="xsmall" />
     </Link>
   );
 };

package/src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import { ChevronRightRounded } from "@mui/icons-material";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
@@ -18,7 +18,7 @@ export interface BreadcrumbsProps extends BaseComponentProps {
 export const Breadcrumbs = ({
   breadcrumbs,
   className,
-  Separator = <ChevronRightRoundedIcon fontSize="xxsmall" />,
+  Separator = <ChevronRightRounded fontSize="xxsmall" />,
 }: BreadcrumbsProps): JSX.Element => {
   return (
     <>

package/src/components/common/Breadcrumbs/typeGuard.ts

@@ -0,0 +1,24 @@
+import { Breadcrumb } from "./breadcrumbs";
+
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export function isBreadcrumbArray(value: unknown): value is Breadcrumb[] {
+  return Array.isArray(value) && value.every(isBreadcrumb);
+}
+
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export function isBreadcrumb(value: unknown): value is Breadcrumb {
+  if (value === null) return false;
+  if (typeof value !== "object") return false;
+  if ("path" in value && "text" in value) {
+    return typeof value.path === "string" && typeof value.text === "string";
+  }
+  return false;
+}

package/src/components/common/Button/components/DropdownButton/dropdownButton.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { ButtonProps } from "../../button";
 import { DropdownButton as Button } from "./dropdownButton.styles";
@@ -16,7 +16,7 @@ export const DropdownButton = ({
   return (
     <Button
       disabled={disabled}
-      EndIcon={ArrowDropDownRoundedIcon}
+      EndIcon={ArrowDropDownRounded}
       open={open}
       {...props}
     >

package/src/components/common/Button/components/NavigationButton/navigationButton.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { ButtonProps } from "../../button";
 import { Button } from "./navigationButton.styles";
@@ -15,7 +15,7 @@ export const NavigationButton = ({
 }: NavigationButtonProps): JSX.Element => {
   return (
     <Button
-      EndIcon={ArrowDropDownRoundedIcon}
+      EndIcon={ArrowDropDownRounded}
       isActive={isActive}
       variant="nav"
       {...props}

package/src/components/common/CopyToClipboard/copyToClipboard.tsx

@@ -1,4 +1,4 @@
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { ContentCopyRounded } from "@mui/icons-material";
 import { IconButton, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
 import React, { useEffect } from "react";
@@ -43,7 +43,7 @@ export const CopyToClipboard = ({
         onClick={(): void => onCopyToClipboard(copyStr)}
         size="xxsmall"
       >
-        <ContentCopyRoundedIcon color="primary" fontSize="small" />
+        <ContentCopyRounded color="primary" fontSize="small" />
       </IconButton>
     </Tooltip>
   );

package/src/components/common/Dialog/components/DialogTitle/dialogTitle.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, DialogTitle as MDialogTitle } from "@mui/material";
 import React, { ReactNode } from "react";
 
@@ -18,7 +18,7 @@ export const DialogTitle = ({
       {title}
       {onClose && (
         <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
-          <CloseRoundedIcon />
+          <CloseRounded />
         </IconButton>
       )}
     </MDialogTitle>

package/src/components/common/Drawer/components/DrawerTitle/drawerTitle.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React, { ReactNode } from "react";
 import { DrawerTitle as Title } from "./drawerTitle.styles";
@@ -19,7 +19,7 @@ export const DrawerTitle = ({
       {title}
       {onClose && (
         <IconButton color="ink" edge="end" onClick={onClose} size="xsmall">
-          <CloseRoundedIcon color="inkLight" fontSize="small" />
+          <CloseRounded color="inkLight" fontSize="small" />
         </IconButton>
       )}
     </Title>

package/src/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.tsx

@@ -1,10 +1,9 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
+import { SvgIconProps } from "@mui/material";
 import React from "react";
 
 export const DropDownIcon = ({
-  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
-}): JSX.Element => {
-  return (
-    <ArrowDropDownRoundedIcon color="inkMain" fontSize="small" {...props} />
-  );
+  ...props /* MuiSvgIconProps */
+}: SvgIconProps): JSX.Element => {
+  return <ArrowDropDownRounded color="inkMain" fontSize="small" {...props} />;
 };

package/src/components/common/Form/components/UploadFile/uploadFile.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, Typography } from "@mui/material";
 import React from "react";
 import { DropzoneState } from "react-dropzone";
@@ -59,7 +59,7 @@ export const UploadFile = ({
             </>
           )}
         </Typography>
-        {isAttached && <CloseRoundedIcon fontSize="small" />}
+        {isAttached && <CloseRounded fontSize="small" />}
       </Button>
       {error && (
         <FormHelperText>

package/src/components/common/KeyValuePairs/components/KeyElType/keyElType.tsx

@@ -1,20 +1,25 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
 /**
  * Basic KeyValuePairs "key" wrapper component.
  */
 
-export interface KeyElTypeProps {
-  children: ReactNode;
-}
-
 export const KeyElType = ({
   children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: KeyElTypeProps): JSX.Element => {
+  color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+  component = "div",
+  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
   return (
-    <Typography color="ink.light" variant="text-body-400-2lines" {...props}>
+    <Typography
+      color={color}
+      component={component}
+      variant={variant}
+      {...props}
+    >
       {children}
     </Typography>
   );

package/src/components/common/KeyValuePairs/components/ValueElType/valueElType.tsx

@@ -1,20 +1,19 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
 /**
  * Basic KeyValuePairs "value" wrapper component.
  */
 
-export interface ValueElTypeProps {
-  children: ReactNode;
-}
-
 export const ValueElType = ({
   children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: ValueElTypeProps): JSX.Element => {
+  component = "div",
+  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
   return (
-    <Typography variant="text-body-400-2lines" {...props}>
+    <Typography component={component} variant={variant} {...props}>
       {children}
     </Typography>
   );

package/src/components/common/LoginDialog/loginDialog.styles.ts

@@ -36,7 +36,7 @@ export const StyledDialog = styled(Dialog)`
           margin: 8px 0;
         }
 
-        .MuiGrid2-root {
+        .MuiGrid-root {
           margin: 24px 0;
         }
       }

package/src/components/common/Paper/paper.tsx

@@ -1,5 +1,6 @@
 import { Paper as MPaper, PaperProps as MPaperProps } from "@mui/material";
 import React, { forwardRef, ReactNode } from "react";
+import { TestIdProps } from "../../types";
 
 /**
  * An extension of the basic Mui Paper component with custom variants e.g. "panel".
@@ -20,18 +21,23 @@ export enum PAPER_PANEL_STYLE {
   ROUNDED = "ROUNDED",
 }
 
-export interface PaperProps {
+export interface PaperProps extends TestIdProps {
   children: ReactNode | ReactNode[];
   className?: string;
   variant?: MPaperProps["variant"];
 }
 
 export const Paper = forwardRef<HTMLDivElement, PaperProps>(function Paper(
-  { children, className, variant = "panel" }: PaperProps,
+  { children, className, testId, variant = "panel" }: PaperProps,
   ref
 ): JSX.Element {
   return (
-    <MPaper className={className} ref={ref} variant={variant}>
+    <MPaper
+      className={className}
+      data-testid={testId}
+      ref={ref}
+      variant={variant}
+    >
       {children}
     </MPaper>
   );

package/src/components/common/Section/components/CollapsableSection/collapsableSection.tsx

@@ -1,5 +1,4 @@
-import AddRoundedIcon from "@mui/icons-material/AddRounded";
-import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import { AddRounded, RemoveRounded } from "@mui/icons-material";
 import { Collapse, CollapseProps } from "@mui/material";
 import React, { ReactNode, useEffect, useState } from "react";
 import {
@@ -30,7 +29,7 @@ export const CollapsableSection = ({
   const [transitionDuration, setTransitionDuration] =
     useState<CollapseProps["timeout"]>(0);
   const disabled = !mobile || !collapsable;
-  const ExpandIcon = expanded ? RemoveRoundedIcon : AddRoundedIcon;
+  const ExpandIcon = expanded ? RemoveRounded : AddRounded;
   const SectionContent = (
     <SectionText component="div" variant="text-body-400-2lines">
       {children}

package/src/components/common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook.ts

@@ -0,0 +1,17 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { MouseEvent, useCallback, useState } from "react";
+
+export const useToggleButtonGroup = <
+  TValue extends ToggleButtonGroupProps["value"]
+>(
+  initialValue: TValue | null = null
+): ToggleButtonGroupProps => {
+  const [value, setValue] = useState<TValue | null>(initialValue);
+
+  const onChange = useCallback((_: MouseEvent, value: TValue) => {
+    if (!value) return;
+    setValue(value);
+  }, []);
+
+  return { onChange, value };
+};

package/src/components/types.ts

@@ -4,6 +4,10 @@ export interface BaseComponentProps {
   className?: string;
 }
 
+export interface ChildrenProps {
+  children?: ReactNode;
+}
+
 export interface ContentProps {
   content?: ReactNode;
 }

package/src/config/entities.ts

@@ -93,6 +93,7 @@ export interface CategoryGroup {
  */
 export interface CategoryConfig {
   annotation?: DataDictionaryAnnotation;
+  enableChartView?: boolean;
   key: string;
   label: string;
   mapSelectCategoryValue?: (
@@ -376,6 +377,7 @@ export interface SiteConfig {
   contentThemeOptionsFn?: ThemeOptionsFn;
   dataDictionary?: DataDictionary;
   dataSource: DataSourceConfig;
+  enableEntitiesView?: boolean; // Toggle entities view - list or filter summary
   entities: EntityConfig[];
   explorerTitle: HeroTitle;
   export?: ExportConfig;

package/src/hooks/useCategoryFilter.ts

@@ -78,6 +78,7 @@ function buildCategoryView(
     categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
     annotation: categoryConfig?.annotation,
+    enableChartView: categoryConfig?.enableChartView,
     isDisabled: false,
     key: category.key,
     label: getCategoryLabel(category.key, categoryConfig),