@databiosphere/findable-ui 7.0.0 → 8.0.0

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -1,15 +1,8 @@
 import { Button, Divider } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
-import {
-  ElementAlignment,
-  ELEMENT_ALIGNMENT,
-} from "../../../../../../../../common/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
+import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
 import { HeaderProps } from "../../../../header";
@@ -20,15 +13,15 @@ import { Navigation as Links } from "./navigation.styles";
 
 export interface NavLinkItem {
   divider?: boolean;
-  flatten?: boolean;
+  flatten?: Partial<Record<BreakpointKey, boolean>>;
   label: ReactNode;
   menuItems?: MenuItem[];
   target?: ANCHOR_TARGET;
   url: string;
+  visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 
 export interface NavigationProps {
-  alignment?: ElementAlignment;
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
@@ -38,25 +31,13 @@ export interface NavigationProps {
 
 export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
   function Navigation(
-    {
-      alignment = ELEMENT_ALIGNMENT.LEFT,
-      className,
-      closeAncestor,
-      headerProps,
-      links,
-      style,
-    }: NavigationProps,
+    { className, closeAncestor, headerProps, links, style }: NavigationProps,
     ref
   ): JSX.Element {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const { mdUp } = useBreakpoint();
     const router = useRouter();
     return (
-      <Links
-        ref={ref}
-        alignment={alignment}
-        className={className}
-        style={style}
-      >
+      <Links ref={ref} className={className} style={style}>
         {links.map(
           (
             { divider, label, menuItems, target = ANCHOR_TARGET.SELF, url },
@@ -64,7 +45,7 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
           ) =>
             menuItems ? (
               <Fragment key={i}>
-                {smDesktop ? (
+                {mdUp ? (
                   <NavigationMenu
                     closeAncestor={closeAncestor}
                     menuItems={menuItems}

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

@@ -1,23 +1,17 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { ELEMENT_ALIGNMENT } from "../../../../common/entities";
 import logo from "../../../../images/logo.svg";
 import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
 import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
 import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { HEADER_NAVIGATION_LABEL } from "./common/constants";
 import { Logo } from "./components/Content/components/Logo/logo";
 import { Header } from "./header";
 
 export default {
   argTypes: {
-    Logo: { control: { disable: true } },
     authenticationEnabled: { control: "boolean" },
-    navAlignment: {
-      control: "select",
-      options: [ELEMENT_ALIGNMENT.LEFT, ELEMENT_ALIGNMENT.CENTER],
-    },
+    logo: { control: { disable: true } },
     navLinks: { control: "array" },
     searchEnabled: { control: "boolean" },
     slogan: { control: "text" },
@@ -36,45 +30,48 @@ const url = "/";
 
 export const HeaderStory: Story = {
   args: {
-    Logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
     authenticationEnabled: false,
-    navAlignment: ELEMENT_ALIGNMENT.CENTER,
-    navLinks: [
-      {
-        label: "Overview",
-        url,
-      },
-      {
-        label: "Learn",
-        url,
-      },
-      {
-        label: "Datasets",
-        url,
-      },
-      {
-        label: "More",
-        menuItems: [
-          {
-            label: "Team",
-            url,
-          },
-          {
-            label: "FAQ",
-            url,
-          },
-          {
-            label: "Help",
-            url,
-          },
-        ],
-        url: "",
-      },
+    logo: <Logo alt="Logo" height={40} link="/" src={logo} />,
+    navigation: [
+      undefined,
+      [
+        {
+          label: "Overview",
+          url,
+        },
+        {
+          label: "Learn",
+          url,
+        },
+        {
+          label: "Datasets",
+          url,
+        },
+        {
+          label: "More",
+          menuItems: [
+            {
+              label: "Team",
+              url,
+            },
+            {
+              label: "FAQ",
+              url,
+            },
+            {
+              label: "Help",
+              url,
+            },
+          ],
+          url: "",
+        },
+      ],
+      undefined,
     ],
     searchEnabled: true,
     slogan: "Header Slogan",
     socialMedia: {
-      label: HEADER_NAVIGATION_LABEL.SOCIALS,
+      label: "Follow Us",
       socials: [
         {
           Icon: XIcon,

package/src/components/Layout/components/Header/header.styles.ts

@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { HEADER_HEIGHT } from "./common/constants";
@@ -16,8 +17,30 @@ export const AppBar = styled(MAppBar)`
   }
 ` as typeof MAppBar;
 
-export const HeaderSmAppBar = styled(AppBar)`
-  .MuiToolbar-root {
-    gap: 8px;
+const group = css`
+  align-items: center;
+  display: flex;
+  flex: 1;
+`;
+
+export const Left = styled.div`
+  ${group};
+  gap: 16px;
+  justify-content: flex-start;
+
+  .MuiButton-navPrimary {
+    &:first-of-type {
+      margin-left: 24px;
+    }
   }
-` as typeof MAppBar;
+`;
+
+export const Center = styled.div`
+  ${group};
+  justify-content: center;
+`;
+
+export const Right = styled.div`
+  ${group};
+  justify-content: flex-end;
+`;

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

@@ -1,50 +1,35 @@
 import { Fade, Toolbar } from "@mui/material";
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+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 +37,103 @@ 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 {
-    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]);
 
   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
+                headerProps={headerProps}
+                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
+                headerProps={headerProps}
+                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
+                headerProps={headerProps}
+                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
+                  closeMenu={onClose}
+                  headerProps={headerProps}
+                  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,
+  };
+};