@databiosphere/findable-ui 7.0.0 → 8.0.1

package/src/components/Layout/components/Header/header.tsx

@@ -1,50 +1,36 @@
 import { Fade, Toolbar } from "@mui/material";
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { usePathname } from "next/navigation";
+import React, { ReactNode } from "react";
+import { ComponentsConfig } from "../../../../config/entities";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
+import { useMenu } from "../../../../hooks/useMenu";
 import {
-  ElementAlignment,
-  ELEMENT_ALIGNMENT,
-} from "../../../../common/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
-import {
-  getBorderBoxSizeHeight,
-  useResizeObserver,
-} from "../../../../hooks/useResizeObserver";
-import { LayoutActionKind } from "../../../../providers/layoutState";
-import { DESKTOP, DESKTOP_SM } from "../../../../theme/common/breakpoints";
-import { FADE_TRANSITION_PROPS } from "./common/constants";
-import { SocialMedia } from "./common/entities";
-import { getHeaderNavigationLinks } from "./common/utils";
+  APP_BAR_PROPS,
+  FADE_TRANSITION_PROPS,
+  TOOLBAR_PROPS,
+} from "./common/constants";
+import { Navigation, SocialMedia } from "./common/entities";
+import { getNavigationLinks } from "./common/utils";
+import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { Search } from "./components/Content/components/Actions/components/Search/search";
-import {
-  Navigation,
-  NavLinkItem,
-} from "./components/Content/components/Navigation/navigation";
+import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
-import { AppBar as HeaderAppBar, HeaderSmAppBar } from "./header.styles";
+import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
+import { useMeasureHeader } from "./hooks/useMeasureHeader";
 
 export interface HeaderProps {
   actions?: ReactNode;
-  Announcements?: ReactNode;
+  announcements?: ComponentsConfig;
   authenticationEnabled?: boolean;
   className?: string;
-  Logo: ReactNode;
-  navAlignment?: ElementAlignment;
-  navLinks: NavLinkItem[];
+  logo: ReactNode;
+  navigation?: Navigation;
   searchEnabled?: boolean;
   searchURL?: string;
   slogan?: ReactNode;
@@ -52,126 +38,105 @@ export interface HeaderProps {
 }
 
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
+  const { breakpoint } = useBreakpoint();
+  const { isIn } = useHeaderVisibility(headerProps);
+  const { headerRef } = useMeasureHeader();
+  const { onClose, onOpen, open } = useMenu();
+  const pathname = usePathname();
   const {
-    Announcements,
-    authenticationEnabled,
     actions,
+    announcements,
+    authenticationEnabled,
     className,
-    Logo,
-    navAlignment = ELEMENT_ALIGNMENT.LEFT,
-    navLinks,
+    logo,
+    navigation: [navItemsL, navItemsC, navItemsR] = [],
     searchEnabled,
     searchURL,
     slogan,
     socialMedia,
   } = headerProps;
-  const { layoutDispatch } = useLayoutState();
-  const headerRef = useRef<HTMLElement>(null);
-  const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
-  const [menuOpen, setMenuOpen] = useState<boolean>(false);
-  const onlySmDesktop = useBreakpointHelper(
-    BREAKPOINT_FN_NAME.ONLY,
-    DESKTOP_SM
-  );
-  const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-  const desktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP);
-  const AppBar =
-    navAlignment === ELEMENT_ALIGNMENT.RIGHT ? HeaderSmAppBar : HeaderAppBar;
-  const showActions = searchEnabled || authenticationEnabled || !smDesktop;
-  const isNavigationIn = smDesktop;
-  const isSloganIn = Boolean(slogan) && smDesktop;
-  const isSocialsIn = Boolean(socialMedia) && desktop;
-  const fadeProps = FADE_TRANSITION_PROPS;
-
-  // Closes header menu.
-  const closeMenu = useCallback((): void => {
-    setMenuOpen(false);
-  }, []);
-
-  // Opens header menu.
-  const openMenu = useCallback((): void => {
-    setMenuOpen(true);
-  }, []);
-
-  // Updates layout state header height.
-  useEffect(() => {
-    if (!height) return;
-    layoutDispatch({
-      payload: height,
-      type: LayoutActionKind.UpdateHeaderHeight,
-    });
-  }, [height, layoutDispatch]);
+  const navigationProps = { headerProps, pathname };
 
   return (
-    <AppBar
-      ref={headerRef}
-      className={className}
-      elevation={1}
-      position="fixed"
-    >
+    <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
       {/* Announcements */}
-      {Announcements}
+      <Announcements announcements={announcements} />
       {/* Toolbar */}
-      <Toolbar variant="dense">
-        {/* Logo */}
-        {Logo}
-        {/* Divider */}
-        <Fade
-          in={isSloganIn}
-          style={{ transitionDelay: isSloganIn ? "50ms" : "0ms" }}
-          {...fadeProps}
-        >
-          <Divider orientation="vertical" />
+      <Toolbar {...TOOLBAR_PROPS}>
+        {/* Left group */}
+        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isLeftGroupIn}>
+          <Left>
+            {/* Logo */}
+            {logo}
+            {/* Divider */}
+            {isIn.isSloganIn && <Divider flexItem orientation="vertical" />}
+            {/* Slogan */}
+            {isIn.isSloganIn && <Slogan slogan={slogan} />}
+            {/* Left navigation */}
+            {isIn.isLeftNavigationIn && (
+              <DXNavigation
+                {...navigationProps}
+                links={getNavigationLinks(navItemsL, breakpoint)}
+              />
+            )}
+          </Left>
         </Fade>
-        {/* Slogan */}
-        <Fade
-          in={isSloganIn}
-          style={{ transitionDelay: isSloganIn ? "50ms" : "0ms" }}
-          {...fadeProps}
-        >
-          <Slogan slogan={slogan} />
+        {/* Center group */}
+        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isCenterGroupIn}>
+          <Center>
+            {/* Center navigation */}
+            {isIn.isCenterNavigationIn && (
+              <DXNavigation
+                {...navigationProps}
+                links={getNavigationLinks(navItemsC, breakpoint)}
+              />
+            )}
+          </Center>
         </Fade>
-        {/* Navigation */}
-        <Fade in={isNavigationIn} {...fadeProps}>
-          <Navigation
-            alignment={navAlignment}
-            headerProps={headerProps}
-            links={getHeaderNavigationLinks(
-              navLinks,
-              socialMedia,
-              onlySmDesktop
+        {/* Right group */}
+        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isRightGroupIn}>
+          <Right>
+            {/* Navigation */}
+            {isIn.isRightNavigationIn && (
+              <DXNavigation
+                {...navigationProps}
+                links={getNavigationLinks(navItemsR)}
+              />
+            )}
+            {/* Socials */}
+            {isIn.isSocialsIn && (
+              <Socials
+                buttonSize="small"
+                socials={socialMedia?.socials || []}
+              />
+            )}
+            {/* Actions */}
+            {isIn.isActionsIn && (
+              <Actions>
+                {/* Search */}
+                <Search
+                  closeMenu={onClose}
+                  searchEnabled={searchEnabled}
+                  searchURL={searchURL}
+                />
+                {/* Authentication */}
+                <Authentication
+                  authenticationEnabled={authenticationEnabled}
+                  closeMenu={onClose}
+                />
+                {/* Additional actions i.e. call-to-action button */}
+                {actions}
+                {/* Menu */}
+                <Menu
+                  {...navigationProps}
+                  closeMenu={onClose}
+                  open={open}
+                  openMenu={onOpen}
+                />
+              </Actions>
             )}
-          />
+          </Right>
         </Fade>
-        {/* Socials */}
-        {socialMedia && (
-          <Fade in={isSocialsIn} {...fadeProps}>
-            <Socials buttonSize="small" socials={socialMedia.socials} />
-          </Fade>
-        )}
-        {/* Actions */}
-        <Actions showActions={showActions}>
-          {/* Search */}
-          <Search
-            closeMenu={closeMenu}
-            searchEnabled={searchEnabled}
-            searchURL={searchURL}
-          />
-          {/* Authentication */}
-          <Authentication
-            authenticationEnabled={authenticationEnabled}
-            closeMenu={closeMenu}
-          />
-          {/* Additional actions i.e. call-to-action button */}
-          {actions}
-          {/* Menu */}
-          <Menu
-            closeMenu={closeMenu}
-            headerProps={headerProps}
-            open={menuOpen}
-            openMenu={openMenu}
-          />
-        </Actions>
       </Toolbar>
     </AppBar>
   );

package/src/components/Layout/components/Header/hooks/useHeaderVisibility.ts

@@ -0,0 +1,74 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { HeaderProps } from "../header";
+
+export interface UseHeaderVisibility {
+  isIn: {
+    isActionsIn: boolean;
+    isCenterGroupIn: boolean;
+    isCenterNavigationIn: boolean;
+    isLeftGroupIn: boolean;
+    isLeftNavigationIn: boolean;
+    isRightGroupIn: boolean;
+    isRightNavigationIn: boolean;
+    isSloganIn: boolean;
+    isSocialsIn: boolean;
+  };
+}
+
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export const useHeaderVisibility = (
+  headerProps: HeaderProps
+): UseHeaderVisibility => {
+  const { lgUp, mdUp } = useBreakpoint();
+  // Header configuration.
+  const {
+    actions,
+    authenticationEnabled,
+    logo,
+    navigation: [navItemsL, navItemsC, navItemsR] = [],
+    searchEnabled,
+    slogan,
+    socialMedia,
+  } = headerProps;
+  // Header content.
+  const hasActions = Boolean(actions);
+  const hasLogo = Boolean(logo);
+  const hasMenu = !mdUp;
+  const hasNavItemsC = Boolean(navItemsC);
+  const hasNavItemsL = Boolean(navItemsL);
+  const hasNavItemsR = Boolean(navItemsR);
+  const hasSlogan = Boolean(slogan);
+  const hasSocials = Boolean(socialMedia);
+  // Determines header content visibility.
+  const isActionsIn =
+    hasActions || searchEnabled || authenticationEnabled || hasMenu;
+  const isNavigationIn = mdUp;
+  const isSloganIn = hasSlogan && mdUp;
+  const isSocialsIn = hasSocials && lgUp;
+  // Determines navigation visibility.
+  const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
+  const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
+  const isRightNavigationIn = isNavigationIn && hasNavItemsR;
+  // Determines group visibility.
+  const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+  const isCenterGroupIn = isCenterNavigationIn;
+  const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
+
+  return {
+    isIn: {
+      isActionsIn,
+      isCenterGroupIn,
+      isCenterNavigationIn,
+      isLeftGroupIn,
+      isLeftNavigationIn,
+      isRightGroupIn,
+      isRightNavigationIn,
+      isSloganIn,
+      isSocialsIn,
+    },
+  };
+};

package/src/components/Layout/components/Header/hooks/useMeasureHeader.ts

@@ -0,0 +1,28 @@
+import { RefObject, useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+
+export interface UseMeasureHeader {
+  headerRef: RefObject<HTMLElement>;
+}
+
+export const useMeasureHeader = (): UseMeasureHeader => {
+  const { layoutDispatch } = useLayoutState();
+  const headerRef = useRef<HTMLElement>(null);
+  const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+
+  // Updates layout state header height.
+  useEffect(() => {
+    if (!height) return;
+    layoutDispatch({
+      payload: height,
+      type: LayoutActionKind.UpdateHeaderHeight,
+    });
+  }, [height, layoutDispatch]);
+
+  return { headerRef };
+};

package/src/config/entities.ts

@@ -159,6 +159,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
   detail: BackPageConfig;
   entityMapper?: EntityMapper<T, I>;
   exploreMode: ExploreMode;
+  explorerTitle?: SiteConfig["explorerTitle"];
   getId?: GetIdFunction<T>;
   getTitle?: GetTitleFunction<T>;
   list: ListConfig;
@@ -262,6 +263,7 @@ export interface ListViewConfig {
   enableDownload?: boolean;
   enableRowPreview?: boolean;
   enableRowSelection?: boolean;
+  enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
   rowSelectionView?: ComponentsConfig;

package/src/config/utils.ts

@@ -23,8 +23,7 @@ export function getDefaultConfig(): SiteConfig {
         socials: [],
       },
       header: {
-        Logo: null,
-        navLinks: [],
+        logo: null,
       },
     },
     redirectRootToPath: "",

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,54 @@
+import {
+  UseCurrentBreakpoint,
+  useCurrentBreakpoint,
+} from "./useCurrentBreakpoint";
+
+export type UseBreakpoint = {
+  breakpoint?: UseCurrentBreakpoint; // current breakpoint.
+  lg: boolean; // desktop.
+  lgDown: boolean;
+  lgUp: boolean;
+  md: boolean; // small desktop.
+  mdDown: boolean;
+  mdUp: boolean;
+  sm: boolean; // tablet.
+  smDown: boolean;
+  smUp: boolean;
+  xs: boolean; // mobile.
+  xsDown: boolean;
+  xsUp: boolean;
+};
+
+export const useBreakpoint = (): UseBreakpoint => {
+  const breakpoint = useCurrentBreakpoint();
+  // Current breakpoint.
+  const xs = breakpoint === "xs";
+  const sm = breakpoint === "sm";
+  const md = breakpoint === "md";
+  const lg = breakpoint === "lg";
+  // Current breakpoint, down.
+  const xsDown = xs;
+  const smDown = xs || sm;
+  const mdDown = xs || sm || md;
+  const lgDown = xs || sm || md || lg;
+  // Current breakpoint, up.
+  const xsUp = xs || sm || md || lg;
+  const smUp = sm || md || lg;
+  const mdUp = md || lg;
+  const lgUp = lg;
+  return {
+    breakpoint,
+    lg,
+    lgDown,
+    lgUp,
+    md,
+    mdDown,
+    mdUp,
+    sm,
+    smDown,
+    smUp,
+    xs,
+    xsDown,
+    xsUp,
+  };
+};

package/src/hooks/useBreakpointHelper.ts

@@ -12,7 +12,7 @@ export enum BREAKPOINT_FN_NAME {
 }
 
 type BreakpointFnName = BREAKPOINT_FN_NAME;
-type BreakpointKey = Breakpoint;
+export type BreakpointKey = Breakpoint;
 
 export const useBreakpointHelper = (
   fnName: BreakpointFnName,

package/src/hooks/useCurrentBreakpoint.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from "@mui/material";
+import { useMemo } from "react";
+import {
+  BreakpointKey,
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "./useBreakpointHelper";
+
+export type UseCurrentBreakpoint = BreakpointKey | undefined;
+
+const breakpointKeys: BreakpointKey[] = ["xs", "sm", "md", "lg"];
+
+export const useCurrentBreakpoint = (): UseCurrentBreakpoint => {
+  const xs = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "xs");
+  const sm = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "sm");
+  const md = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "md");
+  const lg = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "lg");
+  const breakpoints: Record<Breakpoint, boolean> = useMemo(
+    () => ({ lg, md, sm, xs }),
+    [lg, md, sm, xs]
+  );
+  return breakpointKeys.find((key) => breakpoints[key]);
+};

package/src/hooks/useMenu.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from "react";
+
+export interface UseMenu {
+  onClose: () => void;
+  onOpen: () => void;
+  open: boolean;
+}
+
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = (): UseMenu => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Closes header menu.
+  const onClose = useCallback((): void => {
+    setOpen(false);
+  }, []);
+
+  // Opens header menu.
+  const onOpen = useCallback((): void => {
+    setOpen(true);
+  }, []);
+
+  return { onClose, onOpen, open };
+};

package/src/theme/common/components.ts

@@ -410,6 +410,23 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
       },
     },
     variants: [
+      {
+        props: {
+          variant: "activeNav", // associated with "nav" variant.
+        },
+        style: {
+          ...theme.typography[TEXT_BODY_500],
+          backgroundColor: theme.palette.smoke.light,
+          color: theme.palette.ink.main,
+          minWidth: 0,
+          textTransform: "capitalize",
+          whiteSpace: "nowrap",
+          // eslint-disable-next-line sort-keys -- disabling key order for readability
+          "&:hover": {
+            backgroundColor: theme.palette.smoke.light,
+          },
+        },
+      },
       {
         props: {
           variant: "nav",

package/src/views/ExploreView/exploreView.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import {
   AzulEntitiesStaticResponse,
@@ -11,7 +10,6 @@ import {
   CategoryValueKey,
   SelectCategoryView,
 } from "../../common/entities";
-import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import {
@@ -19,6 +17,7 @@ import {
   Filters,
 } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
@@ -47,33 +46,15 @@ export interface ExploreViewProps extends AzulEntitiesStaticResponse {
   className?: string;
 }
 
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-function getTabs(entities: EntityConfig[]): Tab[] {
-  return entities.map(
-    ({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-      icon,
-      iconPosition,
-      label,
-      value: route,
-    })
-  );
-}
-
 export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-  const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
+  const { explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-  const { push } = useRouter();
-  const tabs = getTabs(entities);
+  const { categoryGroups, categoryViews, filterCount } = exploreState;
   const { response: summaryResponse } = useSummary(); // Fetch summary.
   useEntityList(props); // Fetch entities.
   const { entityListType } = props;
@@ -145,16 +126,6 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     setIsDrawerOpen(true);
   };
 
-  /**
-   * Callback fired when selected tab value changes.
-   * - Sets state tabsValue to selected tab value.
-   * - Executes a pushState and resets pagination.
-   * @param tabValue - Selected tab value.
-   */
-  const onTabChange = (tabValue: TabValue): void => {
-    push(`/${tabValue}`);
-  };
-
   /**
    * Dispatch a SelectedEntityType action when entityListType changes.
    */
@@ -206,8 +177,8 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         }
         SubTitleHero={renderComponent(subTitleHero)}
         Summaries={renderSummary(summaryConfig, summaryResponse)}
-        Tabs={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />}
-        title={explorerTitle}
+        Tabs={<Tabs />}
+        title={entityConfig.explorerTitle || explorerTitle}
       />
     </>
   );

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

@@ -59,6 +59,7 @@ declare module "@mui/material/styles" {
  */
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
+    activeNav: true;
     nav: true;
   }
 }