@databiosphere/findable-ui 7.0.0 → 8.0.0

package/src/common/entities.ts

@@ -17,17 +17,6 @@ export interface CategoryTag {
  */
 export type CategoryValueKey = string;
 
-/**
- * Element alignment.
- */
-export enum ELEMENT_ALIGNMENT {
-  CENTER = "CENTER",
-  LEFT = "LEFT",
-  RIGHT = "RIGHT",
-}
-
-export type ElementAlignment = ELEMENT_ALIGNMENT;
-
 /**
  * Set of selected category values.
  */

package/src/components/Index/components/Tabs/common/utils.ts

@@ -0,0 +1,33 @@
+import { EntityConfig } from "../../../../../config/entities";
+import { Tab } from "../../../../common/Tabs/tabs";
+
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
+  return entities.reduce(
+    (
+      acc: Tab[],
+      {
+        label,
+        listView: { enableTab = true } = {},
+        route,
+        tabIcon: icon,
+        tabIconPosition: iconPosition,
+      }
+    ) => {
+      if (enableTab) {
+        acc.push({
+          icon,
+          iconPosition,
+          label,
+          value: route,
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}

package/src/components/Index/components/Tabs/tabs.tsx

@@ -0,0 +1,23 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { Tabs as DXTabs, TabValue } from "../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+
+export const Tabs = (): JSX.Element | null => {
+  const { config } = useConfig();
+  const { exploreState } = useExploreState();
+  const { entities } = config;
+  const { tabValue } = exploreState;
+  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+
+  // Callback fired when selected tab value changes.
+  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
+    await Router.push(`/${tabValue}`);
+  }, []);
+
+  if (tabs.length <= 1) return null;
+
+  return <DXTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
+};

package/src/components/Layout/components/Header/common/constants.ts

@@ -1,17 +1,21 @@
-export const HEADER_HEIGHT = 56;
-export const HEADER_FADE_TIMEOUT = 0;
+import {
+  AppBarProps as MAppBarProps,
+  ToolbarProps as MToolbarProps,
+} from "@mui/material";
 
-export const FADE_TRANSITION_PROPS = {
-  timeout: HEADER_FADE_TIMEOUT,
-  unmountOnExit: true,
-};
+export const HEADER_HEIGHT = 56;
 
-export const HEADER_NAVIGATION_LABEL = {
-  MORE: "More",
-  SOCIALS: "Follow Us",
+export const APP_BAR_PROPS: Partial<MAppBarProps> = {
+  elevation: 1,
+  position: "fixed",
 };
 
-export const SWITCH_TRANSITION_PROPS = {
+export const FADE_TRANSITION_PROPS = {
+  appear: false,
   timeout: 0,
   unmountOnExit: true,
 };
+
+export const TOOLBAR_PROPS: Partial<MToolbarProps> = {
+  variant: "dense",
+};

package/src/components/Layout/components/Header/common/entities.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from "react";
 import { Social } from "../../../../common/Socials/socials";
+import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
+
+export type Navigation = [
+  NavLinkItem[] | undefined,
+  NavLinkItem[] | undefined,
+  NavLinkItem[] | undefined
+]; // [LEFT, CENTER, RIGHT]
 
 export interface SocialMedia {
   label: ReactNode;

package/src/components/Layout/components/Header/common/utils.ts

@@ -1,84 +1,107 @@
-import { Social } from "../../../../common/Socials/socials";
-import { RenderComponent } from "../../../../ComponentCreator/components/RenderComponent/renderComponent";
-import { ANCHOR_TARGET } from "../../../../Links/common/entities";
-import { MenuItem } from "../components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems";
+import { Breakpoint } from "@mui/material";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { HEADER_NAVIGATION_LABEL } from "./constants";
-import { SocialMedia } from "./entities";
+import { Navigation } from "./entities";
 
 /**
- * Returns the navigation links as configured, where the "More" menu is flattened.
- * @param links - Header navigation links.
- * @returns header navigation links, without links grouped under the "More" menu.
+ * Returns the configured menu navigation links, for the current breakpoint.
+ * @param navigation - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
  */
-export function flattenMoreLink(links: NavLinkItem[]): NavLinkItem[] {
-  return links.flatMap((link: NavLinkItem) => {
-    if (link.label === HEADER_NAVIGATION_LABEL.MORE) {
-      if (link.flatten === false) {
-        return link;
+export function getMenuNavigationLinks(
+  navigation?: Navigation,
+  breakpoint?: Breakpoint
+): NavLinkItem[] {
+  if (!navigation) return [];
+  const navLinkItems = navigation.reduce((acc: NavLinkItem[], navLinkItems) => {
+    if (!navLinkItems) return acc;
+    acc.push(...navLinkItems);
+    return acc;
+  }, []);
+  return getNavigationLinks(navLinkItems, breakpoint);
+}
+
+/**
+ * Returns configured navigation links, for the current breakpoint.
+ * @param navigationLinks - Navigation links.
+ * @param breakpoint - Current breakpoint.
+ * @returns navigation links.
+ */
+export function getNavigationLinks(
+  navigationLinks?: NavLinkItem[],
+  breakpoint?: Breakpoint
+): NavLinkItem[] {
+  if (!navigationLinks) return [];
+  return navigationLinks.reduce(
+    (acc: NavLinkItem[], navLinkItem: NavLinkItem) => {
+      const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
+      if (processedNavLink) {
+        acc.push(...processedNavLink);
       }
-      return link.menuItems as NavLinkItem[];
-    }
-    return link;
-  });
+      return acc;
+    },
+    []
+  );
 }
 
 /**
- * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
- * @param links - Header navigation links.
- * @returns header navigation links.
+ * Returns true if the link is flattened at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is flattened.
  */
-export function flattenNavigationLinks(links: NavLinkItem[]): NavLinkItem[] {
-  return links.flatMap((link: NavLinkItem) => {
-    if (link.flatten || link.label === HEADER_NAVIGATION_LABEL.MORE) {
-      return link.menuItems as NavLinkItem[];
-    }
-    return link;
-  });
+function isLinkFlattened(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): boolean {
+  if (!breakpoint) return false; // Default is not flattened.
+  if (!navLinkItem.flatten) return false; // Default is not flattened.
+  return navLinkItem.flatten[breakpoint] === true;
 }
 
 /**
- * Returns header navigation links with socials appended with the corresponding label "Follow Us".
- * @param links - Header navigation links.
- * @param socialMedia - Header social media.
- * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
- * @returns header navigation links.
+ * Returns true if the link is visible at the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns true if the link is visible.
  */
-export function getHeaderNavigationLinks(
-  links: NavLinkItem[],
-  socialMedia: SocialMedia | undefined,
-  onlySmDesktop: boolean
-): NavLinkItem[] {
-  if (onlySmDesktop) {
-    const navLinks = [...links];
-    if (socialMedia) {
-      navLinks.push({
-        label: socialMedia.label,
-        menuItems: getFollowUsMenuItems(socialMedia.socials),
-        url: "",
-      });
-    }
-    return navLinks;
-  }
-  // Return the links without the "More" or "Follow Us" menu.
-  return flattenMoreLink(links);
+function isLinkVisible(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): boolean {
+  if (!breakpoint) return true; // Default is visible.
+  if (!navLinkItem.visible) return true; // Default is visible.
+  return navLinkItem.visible[breakpoint] !== false;
 }
 
 /**
- * Returns menu items for the "Follow Us" menu.
- * @param socials - Social configuration.
- * @returns a list of social menu items for the "Follow Us" menu.
+ * Returns the processed navigation link item.
+ * Flattens menu items, and removes items that are not visible for the current breakpoint.
+ * @param navLinkItem - Navigation link.
+ * @param breakpoint - Current breakpoint.
+ * @returns processed navigation link item.
  */
-function getFollowUsMenuItems(socials: Social[]): MenuItem[] {
-  return socials.map(({ Icon, label, url }) => {
-    return {
-      icon: RenderComponent({
-        Component: Icon,
-        ...{ fontSize: "small" },
-      }),
-      label,
-      target: ANCHOR_TARGET.BLANK,
-      url,
-    };
-  });
+function processNavLinkItem(
+  navLinkItem: NavLinkItem,
+  breakpoint?: Breakpoint
+): NavLinkItem[] | undefined {
+  if (isLinkVisible(navLinkItem, breakpoint)) {
+    const cloneLink = { ...navLinkItem };
+    // Recursively process menu items.
+    if (cloneLink.menuItems) {
+      const menuItems = getNavigationLinks(navLinkItem.menuItems, breakpoint);
+      // Remove menu items if empty.
+      if (menuItems.length === 0) {
+        delete cloneLink.menuItems;
+      } else {
+        // Flatten the menu items if the navigation is flattened.
+        if (isLinkFlattened(cloneLink, breakpoint)) {
+          return menuItems;
+        } else {
+          cloneLink.menuItems = menuItems;
+        }
+      }
+    }
+    return [cloneLink];
+  }
 }

package/src/components/Layout/components/Header/components/Announcements/announcements.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ComponentsConfig } from "../../../../../../config/entities";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+
+export interface AnnouncementsProps {
+  announcements?: ComponentsConfig;
+}
+
+export const Announcements = ({
+  announcements,
+}: AnnouncementsProps): JSX.Element | null => {
+  if (!announcements) return null;
+  return <ComponentCreator components={announcements} response={{}} />;
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/actions.tsx

@@ -3,12 +3,8 @@ import { HeaderActions } from "./actions.styles";
 
 export interface ActionsProps {
   children: ReactNode | ReactNode[];
-  showActions?: boolean;
 }
 
-export const Actions = ({
-  children,
-  showActions = true,
-}: ActionsProps): JSX.Element => {
-  return <>{showActions && <HeaderActions>{children}</HeaderActions>}</>;
+export const Actions = ({ children }: ActionsProps): JSX.Element => {
+  return <HeaderActions>{children}</HeaderActions>;
 };

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx

@@ -1,12 +1,7 @@
 import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { Fade, IconButton } from "@mui/material";
+import { IconButton as MIconButton } from "@mui/material";
 import React from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { Button } from "./requestAuthentication.styles";
 
 export interface RequestAuthenticationProps {
@@ -18,30 +13,24 @@ export const RequestAuthentication = ({
   closeMenu,
   requestAuthorization,
 }: RequestAuthenticationProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-  const switchProps = SWITCH_TRANSITION_PROPS;
-  return (
-    <>
-      <Fade in={smDesktop} {...switchProps}>
-        <Button
-          onClick={requestAuthorization}
-          startIcon={<LoginRoundedIcon />}
-          variant="nav"
-        >
-          Sign in
-        </Button>
-      </Fade>
-      <Fade in={!smDesktop} {...switchProps}>
-        <IconButton
-          color="ink"
-          onClick={(): void => {
-            closeMenu();
-            requestAuthorization();
-          }}
-        >
-          <LoginRoundedIcon />
-        </IconButton>
-      </Fade>
-    </>
+  const { mdUp } = useBreakpoint();
+  return mdUp ? (
+    <Button
+      onClick={requestAuthorization}
+      startIcon={<LoginRoundedIcon />}
+      variant="nav"
+    >
+      Sign in
+    </Button>
+  ) : (
+    <MIconButton
+      color="ink"
+      onClick={(): void => {
+        closeMenu();
+        requestAuthorization();
+      }}
+    >
+      <LoginRoundedIcon />
+    </MIconButton>
   );
 };

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

@@ -1,15 +1,17 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment, ReactNode } from "react";
+import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
+import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
 import { Search } from "../../../Search/search";
 
 export interface DialogTitleProps {
   actions?: ReactNode;
-  Announcements?: ReactNode;
+  announcements?: ComponentsConfig;
   authenticationEnabled?: boolean;
-  Logo?: ReactNode;
+  logo?: ReactNode;
   onClose: () => void;
   searchEnabled?: boolean;
   searchURL?: string;
@@ -17,18 +19,18 @@ export interface DialogTitleProps {
 
 export const Toolbar = ({
   actions,
-  Announcements,
+  announcements,
   authenticationEnabled,
-  Logo,
+  logo,
   onClose,
   searchEnabled,
   searchURL,
 }: DialogTitleProps): JSX.Element => {
   return (
     <Fragment>
-      {Announcements}
+      <Announcements announcements={announcements} />
       <MToolbar>
-        {Logo}
+        {logo}
         <Actions>
           {/* Search */}
           <Search

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

@@ -1,13 +1,8 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
-import React, { CSSProperties, forwardRef, useEffect } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../common/constants";
-import { flattenNavigationLinks } from "../../../../../../common/utils";
+import React, { CSSProperties, forwardRef, Fragment, useEffect } from "react";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { HeaderProps } from "../../../../../../header";
 import { AppBar } from "../../../../../../header.styles";
 import { Content } from "../../../../content.styles";
@@ -28,25 +23,23 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
   function HeaderMenu(
     { closeMenu, headerProps, open, openMenu, style }: MenuProps,
     ref
-  ): JSX.Element {
-    const { navLinks, slogan, socialMedia } = headerProps;
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const switchProps = SWITCH_TRANSITION_PROPS;
+  ): JSX.Element | null {
+    const { navigation, slogan, socialMedia } = headerProps;
+    const { breakpoint, smDown } = useBreakpoint();
 
-    // Set drawer open state to false on change of media breakpoint from mobile to "small desktop".
+    // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-      if (smDesktop) {
-        closeMenu();
-      }
-    }, [closeMenu, smDesktop]);
+      if (smDown) return;
+      closeMenu();
+    }, [closeMenu, smDown]);
+
+    if (!smDown) return null;
 
     return (
-      <>
-        <Fade in={!smDesktop} {...switchProps}>
-          <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
-            <MenuRoundedIcon />
-          </IconButton>
-        </Fade>
+      <Fragment>
+        <IconButton color="ink" onClick={openMenu} ref={ref} style={style}>
+          <MenuRoundedIcon />
+        </IconButton>
         <MDialog
           disableScrollLock
           fullScreen
@@ -56,7 +49,7 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
           open={open}
           PaperProps={{ elevation: 0 }}
           TransitionComponent={Fade}
-          transitionDuration={smDesktop ? 0 : 600}
+          transitionDuration={smDown ? 600 : 0}
           TransitionProps={{ easing: "ease-out" }}
         >
           <AppBar component="div" elevation={0}>
@@ -67,14 +60,14 @@ export const Menu = forwardRef<HTMLButtonElement, MenuProps>(
             <Navigation
               closeAncestor={closeMenu}
               headerProps={headerProps}
-              links={flattenNavigationLinks(navLinks)}
+              links={getMenuNavigationLinks(navigation, breakpoint)}
             />
             {socialMedia && (
               <Socials buttonSize="xlarge" socials={socialMedia.socials} />
             )}
           </Content>
         </MDialog>
-      </>
+      </Fragment>
     );
   }
 );

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.tsx

@@ -1,12 +1,7 @@
-import { Fade, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import React from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
 import { Button } from "./searchButton.styles";
 
 export interface SearchProps {
@@ -14,20 +9,14 @@ export interface SearchProps {
 }
 
 export const SearchButton = ({ openSearch }: SearchProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-  const switchProps = SWITCH_TRANSITION_PROPS;
-  return (
-    <>
-      <Fade in={smDesktop} {...switchProps}>
-        <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
-          Search
-        </Button>
-      </Fade>
-      <Fade in={!smDesktop} {...switchProps}>
-        <IconButton color="ink" onClick={openSearch}>
-          <SearchIcon fontSize="medium" />
-        </IconButton>
-      </Fade>
-    </>
+  const { mdUp } = useBreakpoint();
+  return mdUp ? (
+    <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
+      Search
+    </Button>
+  ) : (
+    <IconButton color="ink" onClick={openSearch}>
+      <SearchIcon fontSize="medium" />
+    </IconButton>
   );
 };

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

@@ -1,11 +1,7 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import { MenuProps as MMenuProps } from "@mui/material";
 import React, { MouseEvent, ReactNode, useState } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
 import {
   MenuItem,
   NavigationMenuItems,
@@ -25,7 +21,7 @@ export const NavigationMenu = ({
   menuItems,
   menuLabel,
 }: NavLinkMenuProps): JSX.Element => {
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+  const { mdUp } = useBreakpoint();
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
   const open = Boolean(anchorEl);
   const openMenu = (event: MouseEvent<HTMLButtonElement>): void => {
@@ -49,7 +45,7 @@ export const NavigationMenu = ({
         anchorEl={anchorEl}
         anchorOrigin={anchorOrigin}
         onClose={closeMenu}
-        open={smDesktop && open}
+        open={mdUp && open}
         slotProps={{ paper: { variant: "menu" } }}
         transformOrigin={{
           horizontal: "left",

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.ts

@@ -1,43 +1,18 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import {
-  ElementAlignment,
-  ELEMENT_ALIGNMENT,
-} from "../../../../../../../../common/entities";
 import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
 
-interface Props {
-  alignment: ElementAlignment;
-}
-
-export const Navigation = styled("div")<Props>`
+export const Navigation = styled("div")`
   display: flex;
   flex: 1;
   flex-direction: row;
   gap: 8px;
   justify-content: flex-start;
 
-  // Left alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.LEFT &&
-    css`
-      margin-left: 24px;
-    `};
-
-  // Center alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.CENTER &&
-    css`
-      justify-content: center;
-    `};
-
-  // Right alignment.
-  ${({ alignment }) =>
-    alignment === ELEMENT_ALIGNMENT.RIGHT &&
-    css`
-      justify-content: flex-end;
-    `};
+  ${mediaDesktopSmallUp} {
+    flex: unset;
+    justify-content: inherit;
+  }
 
   .MuiButton-nav {
     ${textBody500};