@databiosphere/findable-ui 50.7.0 → 50.8.0

package/src/components/Layout/components/Footer/footer.tsx

@@ -1,62 +0,0 @@
-import { Toolbar } from "@mui/material";
-import { JSX, ReactNode } from "react";
-import { SELECTOR } from "../../../../common/selectors";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
-import { Social } from "../../../common/Socials/socials";
-import { StaticImageProps } from "../../../common/StaticImage/staticImage";
-import { ANCHOR_TARGET } from "../../../Links/common/entities";
-import { isNodeBoolean } from "../../../utils";
-import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
-import { PoweredByCleverCanary } from "./components/PoweredByCleverCanary/poweredByCleverCanary";
-import { VersionInfo } from "./components/VersionInfo/versionInfo";
-import { AppBar, Link, Links, Socials } from "./footer.styles";
-
-export interface FooterProps {
-  Branding?: ReactNode;
-  className?: string;
-  navLinks?: NavLinkItem[];
-  poweredByCC?: Omit<StaticImageProps, "alt"> & { alt?: string };
-  socials?: Social[];
-  versionInfo?: ReactNode;
-}
-
-export const Footer = ({
-  Branding,
-  className,
-  navLinks,
-  poweredByCC,
-  socials,
-  versionInfo,
-}: FooterProps): JSX.Element => {
-  const { footerRef } = useLayoutDimensions();
-  return (
-    <AppBar
-      className={className}
-      color="inherit"
-      component="footer"
-      id={SELECTOR.FOOTER}
-      ref={footerRef}
-      variant="footer"
-    >
-      <Toolbar variant="dense">
-        {Branding}
-        {(navLinks || socials || versionInfo || poweredByCC) && (
-          <Links>
-            {navLinks &&
-              navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (
-                <Link
-                  key={`${url}${i}`}
-                  label={label}
-                  target={target}
-                  url={url}
-                />
-              ))}
-            {socials && <Socials buttonSize="small" socials={socials} />}
-            {isNodeBoolean(versionInfo) ? <VersionInfo /> : versionInfo}
-            <PoweredByCleverCanary {...poweredByCC} />
-          </Links>
-        )}
-      </Toolbar>
-    </AppBar>
-  );
-};

package/src/components/Layout/components/Footer/stories/footer.stories.tsx

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { DiscourseIcon } from "../../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
-import { FacebookIcon } from "../../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
-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 { Logo } from "../../Header/components/Content/components/Logo/logo";
-import { Footer } from "../footer";
-
-const meta: Meta<typeof Footer> = {
-  component: Footer,
-  parameters: { layout: "fullscreen" },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    Branding: (
-      <Logo alt="logo" height={24} link={"/"} src="src/images/logo.svg" />
-    ),
-    navLinks: [
-      {
-        label: "Help",
-        url: "https://support.google.com/",
-      },
-      {
-        label: "Privacy",
-        url: "https://policies.google.com/privacy?hl=en-US",
-      },
-    ],
-    poweredByCC: { src: "src/images/cc.svg" },
-    socials: [
-      {
-        Icon: DiscourseIcon,
-        label: null,
-        url: "https://www.discourse.org/",
-      },
-      {
-        Icon: XIcon,
-        label: null,
-        url: "https://twitter.com",
-      },
-      {
-        Icon: FacebookIcon,
-        label: null,
-        url: "https://facebook.com",
-      },
-      {
-        Icon: YouTubeIcon,
-        label: null,
-        url: "https://www.youtube.com",
-      },
-      {
-        Icon: GitHubIcon,
-        label: null,
-        url: "https://github.com",
-      },
-    ],
-  },
-};

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

@@ -1,21 +0,0 @@
-import {
-  AppBarProps as MAppBarProps,
-  ToolbarProps as MToolbarProps,
-} from "@mui/material";
-
-export const HEADER_HEIGHT = 56;
-
-export const APP_BAR_PROPS: Partial<MAppBarProps> = {
-  elevation: 1,
-  position: "fixed",
-};
-
-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,23 +0,0 @@
-import { BreakpointKey } from "../../../../../hooks/useBreakpointHelper";
-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 type SelectedMatch =
-  | SELECTED_MATCH
-  | Partial<Record<BreakpointKey, boolean | SELECTED_MATCH>>;
-
-export enum SELECTED_MATCH {
-  EQUALS = "EQUALS",
-  STARTS_WITH = "STARTS_WITH", // Default value.
-}
-
-export interface SocialMedia {
-  socials: Social[];
-  visible?: Partial<Record<BreakpointKey, boolean>>;
-}

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

@@ -1,222 +0,0 @@
-import { Breakpoint } from "@mui/material";
-import { UseBreakpoint } from "../../../../../hooks/useBreakpoint";
-import { isClientSideNavigation } from "../../../../Links/common/utils";
-import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import {
-  Navigation,
-  SELECTED_MATCH,
-  SelectedMatch,
-  SocialMedia,
-} from "./entities";
-
-/**
- * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
- * @param setOfPatterns - Set of selected patterns.
- * @param navLinkItem - Navigation link.
- * @param breakpoint - Breakpoint.
- */
-function addSelectedPattern(
-  setOfPatterns: Set<string>,
-  navLinkItem: NavLinkItem,
-  breakpoint?: Breakpoint,
-): void {
-  if (!navLinkItem.url) return;
-  // Exclude external links.
-  if (!isClientSideNavigation(navLinkItem.url)) return;
-  // Get the configured selected match for the current breakpoint.
-  const selectedMatch = getSelectedMatch(navLinkItem.selectedMatch, breakpoint);
-  if (!selectedMatch) return;
-  // Add the selected pattern for the navigation link.
-  if (selectedMatch === SELECTED_MATCH.EQUALS) {
-    setOfPatterns.add(getPatternEquals(navLinkItem.url));
-    return;
-  }
-  setOfPatterns.add(getPatternStartsWith(navLinkItem.url));
-}
-
-/**
- * Returns the configured menu navigation links.
- * @param navigation - Navigation links.
- * @returns navigation links.
- */
-export function getMenuNavigationLinks(navigation?: Navigation): NavLinkItem[] {
-  if (!navigation) return [];
-  return navigation.reduce((acc: NavLinkItem[], navLinkItems) => {
-    if (!navLinkItems) return acc;
-    acc.push(...navLinkItems);
-    return acc;
-  }, []);
-}
-
-/**
- * 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
-    .map((navigationLink) => mapSelectedMatches(navigationLink, breakpoint))
-    .reduce((acc: NavLinkItem[], navLinkItem: NavLinkItem) => {
-      const processedNavLink = processNavLinkItem(navLinkItem, breakpoint);
-      if (processedNavLink) {
-        acc.push(...processedNavLink);
-      }
-      return acc;
-    }, []);
-}
-
-/**
- * Returns the pattern for an exact match, for the given URL e.g. "^/about$".
- * @param url - URL.
- * @returns pattern for an exact match.
- */
-function getPatternEquals(url: string): string {
-  return `^${url}$`;
-}
-
-/**
- * Returns the pattern for a match that starts with the given URL e.g. "^/about".
- * @param url - URL.
- * @returns pattern for a match that starts with the given URL.
- */
-function getPatternStartsWith(url: string): string {
-  return `^${url}`;
-}
-
-/**
- * Returns the configured selected match.
- * @param selectedMatch - Selected match.
- * @param breakpoint - Breakpoint.
- * @returns selected match.
- */
-function getSelectedMatch(
-  selectedMatch?: SelectedMatch,
-  breakpoint?: Breakpoint,
-): SELECTED_MATCH | undefined {
-  if (!selectedMatch) return SELECTED_MATCH.STARTS_WITH;
-  if (typeof selectedMatch === "string") return selectedMatch;
-  if (!breakpoint) return;
-  return getSelectMatchValue(selectedMatch[breakpoint]);
-}
-
-/**
- * Returns the selected match value, for the current breakpoint.
- * @param selectedMatchValue - Selected match value.
- * @returns selected match.
- */
-function getSelectMatchValue(
-  selectedMatchValue?: boolean | SELECTED_MATCH,
-): SELECTED_MATCH | undefined {
-  if (selectedMatchValue === false) return undefined;
-  if (selectedMatchValue === true) return SELECTED_MATCH.STARTS_WITH;
-  return selectedMatchValue || SELECTED_MATCH.STARTS_WITH;
-}
-
-/**
- * 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.
- */
-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 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.
- */
-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 true if the social media is visible at the current breakpoint.
- * @param bp - Breakpoint.
- * @param socialMedia - Social media.
- * @returns true.
- */
-export function isSocialsVisible(
-  bp: Pick<UseBreakpoint, "breakpoint" | "lgUp">,
-  socialMedia?: SocialMedia,
-): boolean {
-  if (!socialMedia) return false;
-  if (!bp.breakpoint) return false;
-  if (!socialMedia.visible) return bp.lgUp;
-  return socialMedia.visible[bp.breakpoint] !== false;
-}
-
-/**
- * Returns the navigation link with the selected matches, for the current breakpoint.
- * @param navLinkItem - Navigation link.
- * @param breakpoint - Breakpoint.
- * @returns navigation link with the selected matches.
- */
-function mapSelectedMatches(
-  navLinkItem: NavLinkItem,
-  breakpoint?: Breakpoint,
-): NavLinkItem {
-  const setOfPatterns = new Set<string>();
-  // Add selected pattern for the current navigation link.
-  addSelectedPattern(setOfPatterns, navLinkItem, breakpoint);
-  const cloneLink = { ...navLinkItem };
-  if (cloneLink.menuItems) {
-    cloneLink.menuItems = [...cloneLink.menuItems].map((menuItem) =>
-      mapSelectedMatches(menuItem, breakpoint),
-    );
-    for (const { selectedPatterns = [] } of cloneLink.menuItems) {
-      selectedPatterns.forEach((pattern) => setOfPatterns.add(pattern));
-    }
-  }
-  cloneLink.selectedPatterns = [...setOfPatterns];
-  return cloneLink;
-}
-
-/**
- * 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 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

@@ -1,14 +0,0 @@
-import { JSX } 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.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-
-export const HeaderActions = styled.div`
-  align-items: center;
-  display: flex;
-  flex: none;
-  gap: 8px;
-  justify-content: inherit;
-`;

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

@@ -1,10 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { HeaderActions } from "./actions.styles";
-
-export interface ActionsProps {
-  children: ReactNode | ReactNode[];
-}
-
-export const Actions = ({ children }: ActionsProps): JSX.Element => {
-  return <HeaderActions>{children}</HeaderActions>;
-};

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

@@ -1,75 +0,0 @@
-import { LoginRounded } from "@mui/icons-material";
-import {
-  ButtonProps as MButtonProps,
-  IconButton as MIconButton,
-  IconButtonProps as MIconButtonProps,
-  Skeleton,
-} from "@mui/material";
-import Router from "next/router";
-import { JSX, ElementType } from "react";
-import { useProfile } from "../../../../../../../../../../hooks/authentication/profile/useProfile";
-import { ROUTE } from "../../../../../../../../../../routes/constants";
-import { isNavigationLinkSelected } from "../../../Navigation/common/utils";
-import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
-import { StyledButton } from "./components/Button/button.styles";
-
-export interface AuthenticationProps {
-  authenticationEnabled?: boolean;
-  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
-  closeMenu: () => void;
-}
-
-export const Authentication = ({
-  authenticationEnabled,
-  Button,
-  closeMenu,
-}: AuthenticationProps): JSX.Element | null => {
-  const { isLoading, profile } = useProfile();
-  if (!authenticationEnabled) return null;
-  if (isLoading) return <Skeleton height={32} variant="circular" width={32} />;
-  if (profile) return <AuthenticationMenu profile={profile} />;
-  return (
-    <Button
-      onClick={async (): Promise<void> => {
-        await Router.push(ROUTE.LOGIN);
-        closeMenu();
-      }}
-    />
-  );
-};
-
-/**
- * Renders authentication button.
- * @param props - Button props.
- * @param pathname - Pathname.
- * @returns button.
- */
-export function renderButton(
-  props: MButtonProps,
-  pathname: string,
-): JSX.Element {
-  return (
-    <StyledButton
-      startIcon={<LoginRounded />}
-      variant={
-        isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav"
-      }
-      {...props}
-    >
-      Sign in
-    </StyledButton>
-  );
-}
-
-/**
- * Renders authentication icon button.
- * @param props - Button props.
- * @returns icon button.
- */
-export function renderIconButton(props: MIconButtonProps): JSX.Element {
-  return (
-    <MIconButton color="ink" {...props}>
-      <LoginRounded />
-    </MIconButton>
-  );
-}

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts

@@ -1,40 +0,0 @@
-import styled from "@emotion/styled";
-import {
-  Avatar,
-  IconButton as MIconButton,
-  Menu as MMenu,
-  MenuItem,
-  Typography,
-} from "@mui/material";
-import { PALETTE } from "../../../../../../../../../../../../styles/common/constants/palette";
-
-export const AuthenticationMenu = styled(MMenu)`
-  margin: 4px 0;
-`;
-
-export const UserIcon = styled(MIconButton)`
-  padding: 0;
-`;
-
-export const UserSummary = styled(MenuItem)`
-  display: block;
-  cursor: inherit;
-  border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-
-  &:hover,
-  &:focus {
-    background: inherit;
-  }
-`;
-
-export const UserNames = styled(Typography)`
-  font-weight: 500;
-  max-width: 200px;
-`;
-
-export const StyledAvatar = styled(Avatar)`
-  height: 32px;
-  width: 32px;
-`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.tsx

@@ -1,45 +0,0 @@
-import { MenuItem } from "@mui/material";
-import { Fragment, JSX } from "react";
-import { useAuth } from "../../../../../../../../../../../../providers/authentication/auth/hook";
-import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
-import { useMenu } from "../../../../../../../../../../../common/Menu/hooks/useMenu";
-import {
-  AuthenticationMenu as Menu,
-  StyledAvatar,
-  UserIcon,
-  UserNames,
-  UserSummary,
-} from "./authenticationMenu.styles";
-import { MENU_PROPS } from "./constants";
-
-export interface AuthenticationMenuProps {
-  profile: UserProfile;
-}
-
-export const AuthenticationMenu = ({
-  profile,
-}: AuthenticationMenuProps): JSX.Element => {
-  const { service: { requestLogout } = {} } = useAuth();
-  const { anchorEl, onClose, onOpen, open } = useMenu<HTMLElement>();
-  return (
-    <Fragment>
-      <UserIcon onClick={onOpen}>
-        <StyledAvatar alt={profile.name} src={profile.image} />
-      </UserIcon>
-      <Menu {...MENU_PROPS} anchorEl={anchorEl} onClose={onClose} open={open}>
-        <UserSummary>
-          You are signed in as:
-          <UserNames noWrap>{profile.name}</UserNames>
-        </UserSummary>
-        <MenuItem
-          onClick={(): void => {
-            requestLogout?.();
-            onClose();
-          }}
-        >
-          Logout
-        </MenuItem>
-      </Menu>
-    </Fragment>
-  );
-};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.ts

@@ -1,19 +0,0 @@
-import { MenuProps } from "@mui/material";
-import { VARIANT } from "../../../../../../../../../../../../styles/common/mui/paper";
-import {
-  POPOVER_ORIGIN_HORIZONTAL,
-  POPOVER_ORIGIN_VERTICAL,
-} from "../../../../../../../../../../../../styles/common/mui/popover";
-
-export const MENU_PROPS: Partial<MenuProps> = {
-  anchorOrigin: {
-    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
-    vertical: POPOVER_ORIGIN_VERTICAL.BOTTOM,
-  },
-  autoFocus: false,
-  slotProps: { paper: { variant: VARIANT.MENU } },
-  transformOrigin: {
-    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
-    vertical: POPOVER_ORIGIN_VERTICAL.TOP,
-  },
-};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { Button } from "@mui/material";
-
-export const StyledButton = styled(Button)`
-  &.MuiButton-activeNav,
-  &.MuiButton-nav {
-    padding: 6px 12px;
-  }
-`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/common/constants.ts

@@ -1,9 +0,0 @@
-import { DialogProps as MDialogProps } from "@mui/material";
-
-export const DIALOG_PROPS: Partial<MDialogProps> = {
-  PaperProps: { elevation: 0 },
-  TransitionProps: { easing: "ease-out" },
-  fullScreen: true,
-  hideBackdrop: true,
-  keepMounted: false,
-};

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

@@ -1,33 +0,0 @@
-import styled from "@emotion/styled";
-import { FONT } from "../../../../../../../../../../../../../../styles/common/constants/font";
-import { Navigation as DXNavigation } from "../../../../../../../Navigation/navigation";
-
-export const Navigation = styled(DXNavigation)`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  justify-content: flex-start;
-
-  .MuiButton-activeNav,
-  .MuiButton-nav {
-    font: ${FONT.BODY_LARGE_500};
-    justify-content: space-between;
-    padding: 12px 24px;
-
-    .MuiButton-endIcon {
-      transform: rotate(-90deg);
-    }
-  }
-`;
-
-export const DrawerNavigation = styled(Navigation)`
-  gap: 0;
-
-  .MuiButton-activeNav,
-  .MuiButton-nav {
-    font: ${FONT.BODY_500};
-    padding: 14px 24px;
-  }
-`;

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Socials/socials.styles.ts

@@ -1,7 +0,0 @@
-import styled from "@emotion/styled";
-import { Socials as DXSocials } from "../../../../../../../../../../../../../common/Socials/socials";
-
-export const Socials = styled(DXSocials)`
-  gap: 16px;
-  padding: 8px 16px;
-`;