@databiosphere/findable-ui 12.0.0 → 14.0.0

package/src/components/common/Alert/alert.tsx

@@ -1,39 +1,18 @@
-import {
-  AlertTitle,
-  Alert as MAlert,
-  AlertProps as MAlertProps,
-} from "@mui/material";
-import React, { ReactNode } from "react";
+import { AlertProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps } from "../../types";
+import { StyledAlert } from "./alert.styles";
 
-export interface AlertProps {
-  children?: ReactNode;
-  className?: string;
-  color?: MAlertProps["color"];
-  icon?: MAlertProps["icon"];
-  severity: MAlertProps["severity"];
-  title?: ReactNode;
-  variant?: MAlertProps["variant"];
-}
-
-export const Alert = ({
-  children,
-  className,
-  color,
-  icon,
-  severity,
-  title,
-  variant = "standard",
-}: AlertProps): JSX.Element => {
+export const Alert = forwardRef<
+  HTMLDivElement,
+  AlertProps & BaseComponentProps
+>(function Alert(
+  { children, className, ...props }: AlertProps & BaseComponentProps,
+  ref
+): JSX.Element {
   return (
-    <MAlert
-      className={className}
-      color={color}
-      icon={icon}
-      severity={severity}
-      variant={variant}
-    >
-      {title && <AlertTitle>{title}</AlertTitle>}
+    <StyledAlert className={className} ref={ref} {...props}>
       {children}
-    </MAlert>
+    </StyledAlert>
   );
-};
+});

package/src/components/common/Alert/constants.ts

@@ -0,0 +1,29 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, SEVERITY, VARIANT } from "../../../styles/common/mui/alert";
+
+export const ALERT_PROPS: Record<string, Partial<AlertProps>> = {
+  FILLED_INK: {
+    color: COLOR.INK,
+    variant: VARIANT.FILLED,
+  },
+  FILLED_PRIMARY: {
+    color: COLOR.PRIMARY,
+    variant: VARIANT.FILLED,
+  },
+  FILLED_SMOKE: {
+    color: COLOR.SMOKE,
+    variant: VARIANT.FILLED,
+  },
+  STANDARD_ERROR: {
+    severity: SEVERITY.ERROR,
+  },
+  STANDARD_INFO: {
+    severity: SEVERITY.INFO,
+  },
+  STANDARD_SUCCESS: {
+    severity: SEVERITY.SUCCESS,
+  },
+  STANDARD_WARNING: {
+    severity: SEVERITY.WARNING,
+  },
+};

package/src/components/common/Alert/hooks/useTransition/types.ts

@@ -0,0 +1,5 @@
+export interface UseTransition {
+  isIn: boolean;
+  onEnter: () => void;
+  onExit: () => void;
+}

package/src/components/common/Alert/hooks/useTransition/useTransition.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+import { UseTransition } from "./types";
+
+/**
+ * Hook to manage transition state for alert component wrapped in a transition component.
+ * @param initialState - Initial state of the transition.
+ * @returns transition state and handlers.
+ */
+export const useTransition = (initialState?: boolean): UseTransition => {
+  const [isIn, setIsIn] = useState<boolean>(initialState || false);
+
+  const onEnter = useCallback((): void => {
+    setIsIn(true);
+  }, []);
+
+  const onExit = useCallback((): void => {
+    setIsIn(false);
+  }, []);
+
+  return {
+    isIn,
+    onEnter,
+    onExit,
+  };
+};

package/src/components/common/Banner/banner.styles.ts

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
+import { mediaDesktopUp } from "../../../styles/common/mixins/breakpoints";
+import { textBodySmall400 } from "../../../styles/common/mixins/fonts";
+
+export const StyledAlert = styled(Alert)`
+  justify-content: center;
+  padding: 8px 12px;
+  text-align: center;
+
+  .MuiAlert-message {
+    ${textBodySmall400};
+    align-self: center;
+    flex: 1;
+
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+
+  .MuiAlert-action {
+    margin: -8px;
+    padding: 0;
+  }
+
+  ${mediaDesktopUp} {
+    padding: 8px 16px;
+  }
+`;

package/src/components/common/Banner/banner.tsx

@@ -1,22 +1,15 @@
-import { Alert as MAlert, AlertProps as MAlertProps } from "@mui/material";
-import React, { forwardRef, ReactNode } from "react";
+import { AlertProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps } from "../../types";
+import { StyledAlert } from "./banner.styles";
+import { ALERT_PROPS } from "./constants";
 
-export interface BannerProps extends MAlertProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
-  {
-    children,
-    className,
-    ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */
-  }: BannerProps,
+export const Banner = forwardRef<
+  HTMLDivElement,
+  AlertProps & BaseComponentProps
+>(function Alert(
+  { ...props }: AlertProps & BaseComponentProps,
   ref
 ): JSX.Element {
-  return (
-    <MAlert className={className} ref={ref} {...props}>
-      {children}
-    </MAlert>
-  );
+  return <StyledAlert {...ALERT_PROPS} ref={ref} {...props} />;
 });

package/src/components/common/Banner/components/CookieBanner/constants.ts

@@ -0,0 +1,9 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../../../styles/common/mui/alert";
+
+export const ALERT_PROPS: Partial<AlertProps> = {
+  color: COLOR.INK,
+  elevation: 2,
+  icon: false,
+  variant: VARIANT.FILLED,
+};

package/src/components/common/Banner/components/CookieBanner/cookieBanner.styles.ts

@@ -1,34 +1,20 @@
 import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
 import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints";
-import { white } from "../../../../../styles/common/mixins/colors";
 import { textBody400 } from "../../../../../styles/common/mixins/fonts";
-import { shadows02 } from "../../../../../styles/common/mixins/shadows";
-import { Banner } from "../../banner";
 
-export const CookieBanner = styled(Banner)`
+export const StyledAlert = styled(Alert)`
   bottom: 0;
-  box-shadow: ${shadows02};
-  color: ${white};
   flex-direction: column;
   gap: 16px;
   left: 0;
   margin: 8px;
-  padding: 16px;
   position: fixed;
   width: calc(100vw - 16px);
   z-index: 1100; // Above support fab, below support form.
 
   .MuiAlert-message {
     ${textBody400};
-
-    .MuiLink-root {
-      color: inherit;
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
   }
 
   .MuiAlert-action {

package/src/components/common/Banner/components/CookieBanner/cookieBanner.tsx

@@ -1,14 +1,16 @@
-import { ButtonProps, AlertProps as MAlertProps } from "@mui/material";
-import React, { forwardRef, Fragment, ReactNode } from "react";
+import { AlertProps, Button, Fade } from "@mui/material";
+import React, { Fragment, ReactNode, useEffect } from "react";
 import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
 import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";
 import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage";
-import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
-import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
-import { CookieBanner as Banner } from "./cookieBanner.styles";
+import { BaseComponentProps } from "../../../../types";
+import { useTransition } from "../../../Alert/hooks/useTransition/useTransition";
+import { ALERT_PROPS } from "./constants";
+import { StyledAlert } from "./cookieBanner.styles";
 
-export interface CookieBannerProps extends MAlertProps {
-  className?: string;
+export interface CookieBannerProps
+  extends Omit<AlertProps, "children">,
+    BaseComponentProps {
   localStorageKey: string;
   message?: ReactNode;
   secondaryAction?: ReactNode;
@@ -20,66 +22,36 @@ export const CookieBanner = ({
   message,
   secondaryAction,
 }: CookieBannerProps): JSX.Element => {
+  const { isIn, onEnter, onExit } = useTransition();
   const localStorage = useLocalStorage(localStorageKey);
-  const isCookieAccepted = localStorage === FLAG.TRUE;
 
-  // Callback fired when the banner requests to be closed.
-  const onDismiss = (): void => {
-    setLocalStorage(localStorageKey, FLAG.TRUE);
-  };
+  useEffect(() => {
+    if (localStorage === null) onEnter();
+  }, [localStorage, onEnter]);
 
   return (
-    <DismissibleBanner
-      Alert={Alert}
-      className={className}
-      onDismiss={onDismiss}
-      open={!isCookieAccepted}
-      slots={{
-        closeButton: (props) => renderCloseButton(props, secondaryAction),
-      }}
-    >
-      {message}
-    </DismissibleBanner>
+    <Fade in={isIn} unmountOnExit>
+      <StyledAlert
+        {...ALERT_PROPS}
+        action={
+          <Fragment>
+            <Button
+              color="primary"
+              onClick={(): void => {
+                setLocalStorage(localStorageKey, FLAG.TRUE);
+                onExit();
+              }}
+              variant="contained"
+            >
+              Ok, Got It
+            </Button>
+            {secondaryAction}
+          </Fragment>
+        }
+        className={className}
+      >
+        {message}
+      </StyledAlert>
+    </Fade>
   );
 };
-
-/**
- * Return the cookie banner alert.
- * @param props - Alert props e.g. "onClick" to close banner.
- * @returns alert element.
- */
-const Alert = forwardRef<HTMLDivElement, MAlertProps>(function Alert(
-  { ...props },
-  ref
-): JSX.Element {
-  return (
-    <Banner
-      color="ink"
-      elevation={2}
-      icon={false}
-      ref={ref}
-      variant="filled"
-      {...props}
-    >
-      {props.children}
-    </Banner>
-  );
-});
-
-/**
- * Returns the close action component(s).
- * @param buttonProps - Button props e.g. "onClick" to close banner.
- * @param secondaryAction - Secondary action component.
- * @returns close button element(s).
- */
-function renderCloseButton(
-  buttonProps: ButtonProps,
-  secondaryAction?: ReactNode
-): JSX.Element {
-  return (
-    <Fragment>
-      <ButtonPrimary onClick={buttonProps.onClick}>Ok, Got It</ButtonPrimary>
-      {secondaryAction}
-    </Fragment>
-  );
-}

package/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx

@@ -1,26 +1,21 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
-import { Banner } from "./sessionTimeout.styles";
-
-export interface SessionTimeoutProps extends Omit<MAlertProps, "title"> {
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SessionTimeout = ({
+  children,
   className,
-  title = "For your security, you have been logged out due to 15 minutes of inactivity.",
+  content,
   ...props
-}: SessionTimeoutProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const { clearSessionTimeout, isSessionTimeout } = useSessionTimeout();
   return (
-    <Fragment>
-      {isSessionTimeout && (
-        <Banner className={className} onClose={clearSessionTimeout} {...props}>
-          {title}
-        </Banner>
-      )}
-    </Fragment>
+    <Fade in={isSessionTimeout} unmountOnExit>
+      <Banner className={className} onClose={clearSessionTimeout} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

package/src/components/common/Banner/components/SystemIndexing/systemIndexing.tsx

@@ -1,33 +1,22 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSystemStatus } from "../../../../../hooks/useSystemStatus";
-import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
-
-export interface SystemIndexingProps extends Omit<MAlertProps, "title"> {
-  children?: ReactNode;
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SystemIndexing = ({
   children,
   className,
-  title = "Data indexing in progress. Downloads and exports are disabled as search results may be incomplete.",
+  content,
   ...props
-}: SystemIndexingProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const systemStatus = useSystemStatus();
   const { indexing, loading, ok } = systemStatus;
-  const showAlert = !loading && ok && indexing;
   return (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && ok && indexing} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

package/src/components/common/Banner/components/SystemStatus/systemStatus.tsx

@@ -1,33 +1,22 @@
-import { AlertProps as MAlertProps } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
+import { AlertProps, Fade } from "@mui/material";
+import React from "react";
 import { useSystemStatus } from "../../../../../hooks/useSystemStatus";
-import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
-
-export interface SystemStatusProps extends Omit<MAlertProps, "title"> {
-  children?: ReactNode;
-  className?: string;
-  title?: ReactNode;
-}
+import { BaseComponentProps, ContentProps } from "../../../../types";
+import { Banner } from "../../banner";
 
 export const SystemStatus = ({
   children,
   className,
-  title = "One or more of the system components are currently unavailable. Functionality may be degraded.",
+  content,
   ...props
-}: SystemStatusProps): JSX.Element => {
+}: AlertProps & BaseComponentProps & ContentProps): JSX.Element => {
   const systemStatus = useSystemStatus();
   const { loading, ok } = systemStatus;
-  const showAlert = !loading && !ok;
   return (
-    <Fragment>
-      {showAlert && (
-        <BannerPrimary className={className} {...props}>
-          <Fragment>
-            {title}
-            {children}
-          </Fragment>
-        </BannerPrimary>
-      )}
-    </Fragment>
+    <Fade in={!loading && !ok} unmountOnExit>
+      <Banner className={className} {...props}>
+        {content || children}
+      </Banner>
+    </Fade>
   );
 };

package/src/components/common/Banner/constants.ts

@@ -0,0 +1,11 @@
+import { AlertProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../styles/common/mui/alert";
+import { FlatPaper } from "../Paper/paper.styles";
+
+export const ALERT_PROPS: Partial<AlertProps> = {
+  color: COLOR.PRIMARY,
+  component: FlatPaper,
+  elevation: 0,
+  icon: false,
+  variant: VARIANT.FILLED,
+};

package/src/components/common/Breadcrumbs/breadcrumbs.tsx

@@ -1,20 +1,16 @@
 import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
-import {
-  Link as BreadcrumbLink,
-  Breadcrumbs as MBreadcrumbs,
-  Typography,
-} from "@mui/material";
-import Link from "next/link";
+import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
+import NLink from "next/link";
 import React, { ReactNode } from "react";
+import { BaseComponentProps } from "../../types";
 
 export interface Breadcrumb {
   path: string;
   text: ReactNode;
 }
 
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends BaseComponentProps {
   breadcrumbs: Breadcrumb[];
-  className?: string;
   Separator?: ReactNode;
 }
 
@@ -29,8 +25,8 @@ export const Breadcrumbs = ({
         <MBreadcrumbs className={className} separator={Separator}>
           {breadcrumbs.map(({ path, text }, b) =>
             path ? (
-              <Link key={`${path}${b}`} href={path} legacyBehavior passHref>
-                <BreadcrumbLink>{text}</BreadcrumbLink>
+              <Link component={NLink} key={b} href={path}>
+                {text}
               </Link>
             ) : (
               <Typography key={`${path}${b}`} maxWidth={180} noWrap>

package/src/components/common/Paper/paper.styles.ts

@@ -7,11 +7,13 @@ import { Paper } from "./paper";
  * e.g. the entire width of mobile viewports.
  */
 export const FlatPaper = styled(Paper)`
-  align-self: stretch;
-  border-left: none;
-  border-radius: 0;
-  border-right: none;
-  box-shadow: none;
+  & {
+    align-self: stretch;
+    border-left: none;
+    border-radius: 0;
+    border-right: none;
+    box-shadow: none;
+  }
 `;
 
 /**
@@ -19,8 +21,10 @@ export const FlatPaper = styled(Paper)`
  * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
 export const RoundedPaper = styled(Paper)`
-  align-self: stretch;
-  border-radius: 8px;
+  & {
+    align-self: stretch;
+    border-radius: 8px;
+  }
 `;
 
 /* eslint-disable valid-jsdoc -- disable require param */
@@ -30,11 +34,13 @@ export const RoundedPaper = styled(Paper)`
  */
 /* eslint-enable valid-jsdoc -- disable require param */
 export const FluidPaper = styled(RoundedPaper)`
-  ${({ theme }) => theme.breakpoints.down(TABLET)} {
-    border-left: none;
-    border-radius: 0;
-    border-right: none;
-    box-shadow: none;
+  & {
+    ${({ theme }) => theme.breakpoints.down(TABLET)} {
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      box-shadow: none;
+    }
   }
 `;
 

package/src/components/types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export interface BaseComponentProps {
+  className?: string;
+}
+
+export interface ContentProps {
+  content?: ReactNode;
+}
+
+export interface TestIdProps {
+  testId?: string;
+}

package/src/config/entities.ts

@@ -139,7 +139,6 @@ export interface DataSourceConfig {
   defaultParams?: {
     catalog: string;
   };
-  entityURL?: string;
   url: string;
 }