@databiosphere/findable-ui 23.0.0 → 25.0.0

package/src/components/Index/components/EntitiesView/entitiesView.tsx

@@ -0,0 +1,30 @@
+import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
+import React from "react";
+import { GridPaper } from "../../../common/Paper/paper.styles";
+import { StyledFluidPaper } from "./entitiesView.styles";
+import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
+import { EntitiesViewProps } from "./types";
+
+export const EntitiesView = ({
+  children,
+  onChange,
+  testId,
+  viewMode,
+  viewStatus,
+}: EntitiesViewProps): JSX.Element => {
+  return (
+    <StyledFluidPaper testId={testId}>
+      <GridPaper>
+        {viewStatus.disabled ? null : (
+          <Toolbar>
+            <ToggleButtonGroup exclusive value={viewMode} onChange={onChange}>
+              <ToggleButton value={VIEW_MODE.TABLE}>Table View</ToggleButton>
+              <ToggleButton value={VIEW_MODE.CHART}>Chart View</ToggleButton>
+            </ToggleButtonGroup>
+          </Toolbar>
+        )}
+        {children}
+      </GridPaper>
+    </StyledFluidPaper>
+  );
+};

package/src/components/Index/components/EntitiesView/hooks/UseEntitiesView/hook.ts

@@ -0,0 +1,15 @@
+import { useConfig } from "../../../../../../hooks/useConfig";
+import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
+import { UseEntitiesViewProps, VIEW_MODE } from "./types";
+
+export const useEntitiesView = (): UseEntitiesViewProps => {
+  const { onChange, value } = useToggleButtonGroup<VIEW_MODE>(VIEW_MODE.TABLE);
+  const { config } = useConfig();
+  const { enableEntitiesView = false } = config;
+  const disabled = !enableEntitiesView;
+  return {
+    onChange,
+    viewMode: value,
+    viewStatus: { disabled },
+  };
+};

package/src/components/Index/components/EntitiesView/hooks/UseEntitiesView/types.ts

@@ -0,0 +1,16 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+
+export enum VIEW_MODE {
+  CHART = "chart",
+  TABLE = "table",
+}
+
+export interface ViewStatus {
+  disabled: boolean;
+}
+
+export interface UseEntitiesViewProps {
+  onChange: ToggleButtonGroupProps["onChange"];
+  viewMode: VIEW_MODE;
+  viewStatus: ViewStatus;
+}

package/src/components/Index/components/EntitiesView/stories/entitiesView.stories.tsx

@@ -0,0 +1,76 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import React from "react";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
+import { EntitiesView } from "../entitiesView";
+import { VIEW_MODE } from "../hooks/UseEntitiesView/types";
+
+const meta: Meta<typeof EntitiesView> = {
+  args: {
+    onChange: fn(),
+    viewMode: VIEW_MODE.TABLE,
+    viewStatus: { disabled: true },
+  },
+  component: EntitiesView,
+  title: "Components/Entities/EntitiesView",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <Box
+        sx={{
+          backgroundColor: "white",
+          maxWidth: "800px",
+          padding: 5,
+          width: "100%",
+        }}
+      >
+        {LOREM_IPSUM.LONG}
+      </Box>
+    ),
+  },
+};
+
+export const ChartView: Story = {
+  args: {
+    children: (
+      <Box
+        sx={{
+          backgroundColor: "white",
+          maxWidth: "800px",
+          padding: 5,
+          width: "100%",
+        }}
+      >
+        {LOREM_IPSUM.SHORT}
+      </Box>
+    ),
+    viewMode: VIEW_MODE.CHART,
+    viewStatus: { disabled: false },
+  },
+};
+
+export const TableView: Story = {
+  args: {
+    children: (
+      <Box
+        sx={{
+          backgroundColor: "white",
+          maxWidth: "800px",
+          padding: 5,
+          width: "100%",
+        }}
+      >
+        {LOREM_IPSUM.SHORT}
+      </Box>
+    ),
+    viewMode: VIEW_MODE.TABLE,
+    viewStatus: { disabled: false },
+  },
+};

package/src/components/Index/components/EntitiesView/types.ts

@@ -0,0 +1,9 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ChildrenProps, TestIdProps } from "../../../types";
+import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
+
+export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+  onChange: ToggleButtonGroupProps["onChange"];
+  viewMode: VIEW_MODE;
+  viewStatus: ViewStatus;
+}

package/src/components/Index/index.stories.tsx

@@ -6,9 +6,9 @@ import { Index } from "./index";
 
 export default {
   argTypes: {
-    List: { table: { disable: true } },
     Summaries: { table: { disable: true } },
     Tabs: { table: { disable: true } },
+    list: { table: { disable: true } },
     title: { table: { disable: true } },
   },
   component: Index,
@@ -22,9 +22,10 @@ type Story = StoryObj<typeof Index>;
 
 export const IndexStory: Story = {
   args: {
-    List: undefined,
     Summaries: <Summaries {...SummariesStory.args} />,
     Tabs: undefined,
+    chart: undefined,
+    list: undefined,
     title: "Explore Data",
   },
 };

package/src/components/Index/index.tsx

@@ -1,23 +1,16 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
-import { HeroTitle } from "../common/Title/title";
+import { EntitiesView } from "./components/EntitiesView/entitiesView";
+import { useEntitiesView } from "./components/EntitiesView/hooks/UseEntitiesView/hook";
+import { VIEW_MODE } from "./components/EntitiesView/hooks/UseEntitiesView/types";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
-
-export interface IndexProps {
-  className?: string;
-  List?: ReactNode;
-  ListHero?: ReactNode | ReactNode[];
-  SideBarButton?: ReactNode;
-  SubTitleHero?: ReactNode | ReactNode[];
-  Summaries?: ReactNode;
-  Tabs?: ReactNode;
-  title: HeroTitle;
-}
+import { IndexProps } from "./types";
 
 export const Index = ({
+  chart,
   className,
-  List,
+  list,
   ListHero,
   SideBarButton,
   SubTitleHero,
@@ -25,6 +18,7 @@ export const Index = ({
   Tabs,
   title,
 }: IndexProps): JSX.Element => {
+  const { onChange, viewMode, viewStatus } = useEntitiesView();
   const { dimensions } = useLayoutDimensions();
   return (
     <IndexLayout className={className} marginTop={dimensions.header.height}>
@@ -32,7 +26,13 @@ export const Index = ({
       {SubTitleHero}
       {Tabs}
       {ListHero}
-      {List}
+      <EntitiesView
+        onChange={onChange}
+        viewMode={viewMode}
+        viewStatus={viewStatus}
+      >
+        {viewMode === VIEW_MODE.TABLE ? list : chart}
+      </EntitiesView>
     </IndexLayout>
   );
 };

package/src/components/Index/types.ts

@@ -0,0 +1,13 @@
+import { BaseComponentProps } from "components/types";
+import { ReactNode } from "react";
+
+export interface IndexProps extends BaseComponentProps {
+  chart?: ReactNode;
+  list?: ReactNode;
+  ListHero?: ReactNode | ReactNode[];
+  SideBarButton?: ReactNode;
+  SubTitleHero?: ReactNode | ReactNode[];
+  Summaries?: ReactNode;
+  Tabs?: ReactNode;
+  title: ReactNode;
+}

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

@@ -3,6 +3,7 @@ import {
   Breadcrumb,
   Breadcrumbs,
 } from "../../../../../common/Breadcrumbs/breadcrumbs";
+import { isBreadcrumbArray } from "../../../../../common/Breadcrumbs/typeGuard";
 import { CallToAction } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 import { Title } from "../../../../../common/Title/title";
 import {
@@ -18,7 +19,7 @@ import { SubTitle } from "./components/SubTitle/subTitle";
 
 export interface BackPageHeroProps {
   actions?: ReactNode;
-  breadcrumbs?: Breadcrumb[];
+  breadcrumbs?: Breadcrumb[] | ReactNode;
   callToAction?: CallToAction;
   children?: ReactNode;
   subTitle?: ReactNode;
@@ -36,19 +37,23 @@ export const BackPageHero = ({
   const HeroHeadline =
     actions || callToAction ? BackPageHeroHeadline : Fragment;
   return (
-    <>
-      {(breadcrumbs || title) && (
-        <HeroHeadline>
-          <HeroHeader gap={1}>
-            {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
-            {title && <Title title={title} />}
-            <SubTitle subTitle={subTitle} />
-          </HeroHeader>
-          {actions}
-          {callToAction && <CallToActionButton callToAction={callToAction} />}
-        </HeroHeadline>
-      )}
+    <Fragment>
+      <HeroHeadline>
+        <HeroHeader gap={1}>
+          {breadcrumbs ? (
+            isBreadcrumbArray(breadcrumbs) ? (
+              <Breadcrumbs breadcrumbs={breadcrumbs} />
+            ) : (
+              breadcrumbs
+            )
+          ) : null}
+          {title && <Title title={title} />}
+          <SubTitle subTitle={subTitle} />
+        </HeroHeader>
+        {actions}
+        {callToAction && <CallToActionButton callToAction={callToAction} />}
+      </HeroHeadline>
       {children}
-    </>
+    </Fragment>
   );
 };

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

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BackPageHero } from "../backPageHero";
+
+const meta: Meta<typeof BackPageHero> = {
+  component: BackPageHero,
+  title: "Components/EntityView/BackPageHero",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BackPageHero>;
+
+export const Default: Story = {
+  args: {
+    breadcrumbs: [
+      { path: "/", text: "Explore" },
+      {
+        path: "",
+        text: "Spatial multi-omic map of human myocardial infarction",
+      },
+    ],
+    title: "Spatial multi-omic map of human myocardial infarction",
+  },
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx

@@ -1,4 +1,4 @@
-import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { LoginRounded } from "@mui/icons-material";
 import {
   ButtonProps as MButtonProps,
   IconButton as MIconButton,
@@ -50,7 +50,7 @@ export function renderButton(
 ): JSX.Element {
   return (
     <StyledButton
-      startIcon={<LoginRoundedIcon />}
+      startIcon={<LoginRounded />}
       variant={
         isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav"
       }
@@ -69,7 +69,7 @@ export function renderButton(
 export function renderIconButton(props: MIconButtonProps): JSX.Element {
   return (
     <MIconButton color="ink" {...props}>
-      <LoginRoundedIcon />
+      <LoginRounded />
     </MIconButton>
   );
 }

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
 import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
@@ -57,7 +57,7 @@ export const Toolbar = ({
             {actions}
             {/* Close menu */}
             <IconButton color="ink" onClick={onClose}>
-              <CloseRoundedIcon />
+              <CloseRounded />
             </IconButton>
           </Actions>
         </Right>

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.tsx

@@ -1,4 +1,4 @@
-import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import { MenuRounded } from "@mui/icons-material";
 import { Fade, IconButton, Dialog as MDialog } from "@mui/material";
 import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
@@ -47,7 +47,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
     return (
       <Fragment>
         <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
-          <MenuRoundedIcon />
+          <MenuRounded />
         </IconButton>
         <MDialog
           {...DIALOG_PROPS}

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.ts

@@ -5,14 +5,19 @@ import {
   smokeMain,
 } from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
-import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
 
-export const SearchBar = styled(Dialog)`
+interface Props {
+  yOffset: number;
+}
+
+export const SearchBar = styled(Dialog, {
+  shouldForwardProp: (prop) => prop !== "yOffset",
+})<Props>`
   .MuiDialog-container {
     width: 100%;
 
     .MuiDialog-paper {
-      margin-top: ${HEADER_HEIGHT}px;
+      margin-top: ${(props) => props.yOffset}px;
     }
   }
 `;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.tsx

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { useSearchParams } from "next/navigation";
 import Router from "next/router";
 import React, {
@@ -9,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import { isValidUrl } from "../../../../../../../../../../../../common/utils";
+import { useLayoutDimensions } from "../../../../../../../../../../../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
 import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
@@ -33,6 +34,7 @@ export default function SearchBar({
   searchOpen,
   searchURL,
 }: Props): JSX.Element {
+  const { dimensions } = useLayoutDimensions();
   const inputRef = useRef<HTMLInputElement>(null);
   const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -108,6 +110,7 @@ export default function SearchBar({
       open={searchOpen}
       PaperProps={{ variant: "searchbar" }}
       TransitionProps={{ onExited: handleExited }}
+      yOffset={dimensions.header.height - 1} // 1px border.
     >
       <SearchForm
         onSubmit={(e: FormEvent<HTMLFormElement>): void =>
@@ -122,7 +125,7 @@ export default function SearchBar({
             searchTerm ? (
               <ClearButton
                 edge="end"
-                Icon={CloseRoundedIcon}
+                Icon={CloseRounded}
                 onClick={handleClear}
                 size="small"
               />

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React, { ReactNode, useCallback } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -43,7 +43,7 @@ export const NavigationDrawer = ({
   return (
     <>
       <Button
-        EndIcon={ArrowDropDownRoundedIcon}
+        EndIcon={ArrowDropDownRounded}
         onClick={onOpen}
         variant={isSelected ? "activeNav" : "nav"}
       >

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -1,4 +1,4 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import {
   Grow,
   ClickAwayListener as MClickAwayListener,
@@ -55,7 +55,7 @@ export const NavigationMenu = ({
   return (
     <MenuItem>
       <Button
-        EndIcon={ArrowDropDownRoundedIcon}
+        EndIcon={ArrowDropDownRounded}
         isActive={open}
         onClick={onOpen}
         variant={isSelected ? "activeNav" : "nav"}

package/src/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.tsx

@@ -1,4 +1,4 @@
-import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import { FilterListRounded } from "@mui/icons-material";
 import React, { ReactNode } from "react";
 import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
 
@@ -18,7 +18,7 @@ export const SidebarButton = ({
 }: SidebarButtonProps): JSX.Element => {
   return (
     <Button className={className} onClick={onClick} {...props}>
-      <FilterListRoundedIcon fontSize="small" />
+      <FilterListRounded fontSize="small" />
       {label}
       {count > 0 && <Badge>{count}</Badge>}
     </Button>

package/src/components/Loading/loading.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { Loading } from "./loading";
 
-const meta = {
+const meta: Meta<typeof Loading> = {
   argTypes: {
     appear: { control: "boolean" },
     iconSize: { control: "select", options: ["small", "medium", "large"] },
@@ -30,7 +30,7 @@ const meta = {
     ),
   ],
   title: "Components/Communication/Loading",
-} satisfies Meta<typeof Loading>;
+};
 
 export default meta;
 

package/src/components/Loading/loading.tsx

@@ -21,7 +21,14 @@ export enum LOADING_PANEL_STYLE {
 }
 
 export interface LoadingProps {
-  appear?: boolean; // Note, if false, the component will not transition on the initial render and onEnter callbacks will not be called. In this instance, ensure the parent container is styled correctly with position relative.
+  /* `appear`, if false, the component will not transition on the initial render and onEnter callbacks will not be called.
+   * In this instance, ensure the parent container is styled correctly with position relative.
+   */
+  appear?: boolean;
+  /* `autoPosition`, if true, the loading component will automatically apply `position: relative` to its parent on enter and remove it on exit.
+   * False will disable this behavior, and the parent will need to be styled with `position: relative` manually.
+   */
+  autoPosition?: boolean;
   iconSize?: SvgIconProps["fontSize"];
   loading: boolean;
   panelStyle?: LoadingPanelStyle; // Enables loading to mirror parent container styles.
@@ -30,6 +37,7 @@ export interface LoadingProps {
 
 export const Loading = ({
   appear = true,
+  autoPosition = true,
   iconSize = "large",
   loading,
   panelStyle = PAPER_PANEL_STYLE.ROUNDED,
@@ -40,8 +48,8 @@ export const Loading = ({
       appear={appear}
       in={loading}
       mountOnEnter
-      onEnter={(node: HTMLElement): void => onFadeEnter(node)}
-      onExited={(node: HTMLElement): void => onFadeExited(node)}
+      onEnter={autoPosition ? onFadeEnter : undefined}
+      onExited={autoPosition ? onFadeExited : undefined}
       timeout={300}
       unmountOnExit
     >

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 
-export const StyledGrid2 = styled(Grid2)`
+export const StyledGrid = styled(Grid)`
   align-items: center;
   align-self: flex-start;
   display: flex;

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -5,7 +5,7 @@ import { CheckedIcon } from "../../../../../common/CustomIcon/components/Checked
 import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { BaseComponentProps } from "../../../../../types";
-import { StyledGrid2 } from "./consent.styles";
+import { StyledGrid } from "./consent.styles";
 import { ConsentProps } from "./types";
 
 export const Consent = ({
@@ -14,17 +14,17 @@ export const Consent = ({
   handleConsent,
   isDisabled,
   isError,
-  ...props /* Mui Grid2Props */
+  ...props /* Mui GridProps */
 }: BaseComponentProps & ConsentProps): JSX.Element | null => {
   if (isDisabled) return null;
   return (
-    <StyledGrid2 className={className} {...props}>
+    <StyledGrid className={className} {...props}>
       <Checkbox
         checkedIcon={<CheckedIcon />}
         icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
         onChange={handleConsent}
       />
       <Typography variant={TEXT_BODY_400}>{children}</Typography>
-    </StyledGrid2>
+    </StyledGrid>
   );
 };

package/src/components/Login/components/Section/components/Consent/types.ts

@@ -1,9 +1,9 @@
-import { Grid2Props } from "@mui/material";
+import { GridProps } from "@mui/material";
 import { ReactNode } from "react";
 import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
 
 export interface ConsentProps
-  extends Grid2Props,
+  extends GridProps,
     Pick<UseUserConsent, "handleConsent">,
     Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
   children: ReactNode;

package/src/components/NoResults/noResults.styles.ts

@@ -1,12 +1,14 @@
 import styled from "@emotion/styled";
+import { white } from "../../styles/common/mixins/colors";
 import { Section, SectionContent } from "../common/Section/section.styles";
 
-export const NoResultsSection = styled(Section)`
+export const StyledSection = styled(Section)`
   align-items: center;
+  background-color: ${white};
   padding: 40px !important; /* Overrides section padding. */
 `;
 
-export const NoResultsSectionContent = styled(SectionContent)`
+export const StyledSectionContent = styled(SectionContent)`
   max-width: 456px;
   text-align: center;
 `;