@databiosphere/findable-ui 22.0.0 → 24.0.0

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
@@ -29,9 +29,7 @@ export const ContentLayout = ({
   outline,
 }: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
     <Layout
       className={className}
@@ -40,16 +38,16 @@ export const ContentLayout = ({
     >
       {navigation && (
         <NavigationGrid
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.navigation}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Navigation>{navigation}</Navigation>
           </Positioner>
         </NavigationGrid>
       )}
       <ContentGrid
-        headerHeight={headerHeight}
+        headerHeight={dimensions.header.height}
         panelColor={layoutStyle?.content}
       >
         <Content>{content}</Content>
@@ -57,10 +55,10 @@ export const ContentLayout = ({
       {outline && (
         <OutlineGrid
           key={getOutlineKey(asPath)}
-          headerHeight={headerHeight}
+          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.outline}
         >
-          <Positioner headerHeight={headerHeight}>
+          <Positioner headerHeight={dimensions.header.height}>
             <Outline>{outline}</Outline>
           </Positioner>
         </OutlineGrid>

package/src/components/Layout/components/Footer/footer.styles.ts

@@ -8,6 +8,7 @@ import { Link as DXLink } from "../../../Links/components/Link/link";
 
 export const AppBar = styled(MAppBar)`
   padding: 16px 0;
+  z-index: 1; /* required for outline or navigation overflow */
 
   .MuiToolbar-root {
     align-items: flex-start;

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

@@ -1,5 +1,7 @@
 import { Toolbar } from "@mui/material";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { Social } from "../../../common/Socials/socials";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
@@ -22,11 +24,14 @@ export const Footer = ({
   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">

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

@@ -1,7 +1,9 @@
 import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React, { ReactNode } from "react";
+import { SELECTOR } from "../../../../common/selectors";
 import { ComponentsConfig } from "../../../../config/entities";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
@@ -29,7 +31,6 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { AppBar, Center, Left, Right } from "./header.styles";
 import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
-import { useMeasureHeader } from "./hooks/useMeasureHeader";
 import { useMenu } from "./hooks/useMenu";
 
 export interface HeaderProps {
@@ -48,7 +49,7 @@ export interface HeaderProps {
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { navigation } = useHeaderNavigation(headerProps);
   const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-  const { headerRef } = useMeasureHeader();
+  const { headerRef } = useLayoutDimensions();
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
   const {
@@ -68,7 +69,12 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
     pathname,
   };
   return (
-    <AppBar {...APP_BAR_PROPS} ref={headerRef} className={className}>
+    <AppBar
+      {...APP_BAR_PROPS}
+      className={className}
+      id={SELECTOR.HEADER}
+      ref={headerRef}
+    >
       {/* Announcements */}
       <Announcements announcements={announcements} />
       {/* Toolbar */}

package/src/components/Layout/components/Main/main.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { MainWithOffset } from "./main.styles";
 
 export interface MainProps {
@@ -8,10 +8,9 @@ export interface MainProps {
 }
 
 export const Main = ({ children, className }: MainProps): JSX.Element => {
-  const { layoutState } = useLayoutState();
-  const { headerHeight } = layoutState;
+  const { dimensions } = useLayoutDimensions();
   return (
-    <MainWithOffset className={className} offset={headerHeight}>
+    <MainWithOffset className={className} offset={dimensions.header.height}>
       {children}
     </MainWithOffset>
   );

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.ts

@@ -1,10 +1,10 @@
 import styled from "@emotion/styled";
-import { Tab as MTab } from "@mui/material";
+import { Tab } from "@mui/material";
 import { inkLight } from "../../../../../../styles/common/mixins/colors";
 import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
 import { tab } from "../../outline.styles";
 
-export const Tab = styled(MTab)`
+export const StyledTab = styled(Tab)`
   ${tab};
 
   && {

package/src/components/Layout/components/Outline/components/ContentsTab/contentsTab.tsx

@@ -1,24 +1,21 @@
-import { TabProps as MTabProps } from "@mui/material";
 import React from "react";
+import { FONT_SIZE } from "../../../../../../styles/common/mui/icon";
+import { TAB_PROPS } from "../../../../../../styles/common/mui/tab";
 import { Segment } from "../../../../../common/CustomIcon/components/Segment/segment";
-import { Tab } from "./contentsTab.styles";
-
-export interface ContentsTabProps extends Omit<MTabProps, "value"> {
-  className?: string;
-  value: string;
-}
+import { StyledTab } from "./contentsTab.styles";
+import { ContentsTabProps } from "./types";
 
 export const ContentsTab = ({
   className,
   value,
-  ...props /* Spread props to allow for Mui Tab specific prop overrides. */
+  ...props /* MuiTabProps. */
 }: ContentsTabProps): JSX.Element => {
   return (
-    <Tab
+    <StyledTab
       className={className}
       label="Contents"
-      icon={<Segment fontSize="small" />}
-      iconPosition="start"
+      icon={<Segment fontSize={FONT_SIZE.SMALL} />}
+      iconPosition={TAB_PROPS.ICON_POSITION.START}
       value={value}
       {...props}
     />

package/src/components/Layout/components/Outline/components/ContentsTab/types.ts

@@ -0,0 +1,8 @@
+import { TabProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+
+export interface ContentsTabProps
+  extends BaseComponentProps,
+    Omit<TabProps, "value"> {
+  value: string;
+}

package/src/components/Layout/components/Outline/hooks/UseHash/hook.ts

@@ -0,0 +1,17 @@
+import { isSSR } from "../../../../../../utils/ssr";
+import { UseHash } from "./types";
+
+/**
+ * Hook to get the current URL hash without the leading '#' character.
+ *
+ * @description
+ * Extracts the hash from window.location.hash and removes the leading '#'.
+ * Returns empty string when running in SSR environment.
+ *
+ * @returns Object containing the hash without leading '#', or empty string if SSR.
+ */
+export function useHash(): UseHash {
+  if (isSSR()) return { hash: "" };
+  const { hash } = window.location;
+  return { hash: hash.replace(/^#/, "") };
+}

package/src/components/Layout/components/Outline/hooks/UseHash/types.ts

@@ -0,0 +1,3 @@
+export interface UseHash {
+  hash: string;
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/constants.ts

@@ -0,0 +1,3 @@
+import { TabProps } from "@mui/material";
+
+export const DEFAULT_TAB_VALUE: TabProps["value"] = "";

package/src/components/Layout/components/Outline/hooks/UseTabs/hook.ts

@@ -0,0 +1,32 @@
+import { TabsProps } from "@mui/material";
+import Router from "next/router";
+import { SyntheticEvent, useCallback, useEffect, useState } from "react";
+import { TABS_PROPS } from "../../../../../../styles/common/mui/tabs";
+import { OutlineItem } from "../../types";
+import { useHash } from "../UseHash/hook";
+import { DEFAULT_TAB_VALUE } from "./constants";
+import { getNextValue } from "./utils";
+
+export function useTabs(
+  outline: OutlineItem[]
+): Pick<TabsProps, "indicatorColor" | "onChange" | "orientation" | "value"> {
+  const [value, setValue] = useState<TabsProps["value"]>(DEFAULT_TAB_VALUE);
+  const { hash } = useHash();
+
+  const onChange = useCallback((_event: SyntheticEvent, hash: string): void => {
+    Router.push({ hash });
+  }, []);
+
+  useEffect(() => {
+    setValue(getNextValue(hash, outline));
+  }, [hash, outline]);
+
+  return {
+    indicatorColor: value
+      ? TABS_PROPS.INDICATOR_COLOR.PRIMARY
+      : TABS_PROPS.INDICATOR_COLOR.TRANSPARENT,
+    onChange,
+    orientation: TABS_PROPS.ORIENTATION.VERTICAL,
+    value,
+  };
+}

package/src/components/Layout/components/Outline/hooks/UseTabs/utils.ts

@@ -0,0 +1,18 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../types";
+import { DEFAULT_TAB_VALUE } from "./constants";
+
+/**
+ * Returns the tab value for navigation.
+ * @param hash - The current hash from the URL.
+ * @param outlineItems - Outline items.
+ * @returns The item's hash if found and enabled, otherwise returns the default tab value.
+ */
+export function getNextValue(
+  hash: string,
+  outlineItems: OutlineItem[]
+): TabsProps["value"] {
+  const item = outlineItems.find((item) => item.hash === hash);
+  if (!item || item.disabled) return DEFAULT_TAB_VALUE;
+  return item.hash;
+}

package/src/components/Layout/components/Outline/outline.styles.ts

@@ -24,7 +24,7 @@ export const tab = css`
   }
 `;
 
-export const Tabs = styled(MTabs)`
+export const StyledTabs = styled(MTabs)`
   align-self: flex-start;
   box-shadow: inset 1px 0 ${smokeMain};
   margin: 0;
@@ -46,7 +46,7 @@ export const Tabs = styled(MTabs)`
   }
 `;
 
-export const Tab = styled(MTab, {
+export const StyledTab = styled(MTab, {
   shouldForwardProp: (prop) => prop !== "depth",
 })<Props>`
   ${tab};

package/src/components/Layout/components/Outline/outline.tsx

@@ -1,72 +1,35 @@
-import { useRouter } from "next/router";
-import React, { ElementType, SyntheticEvent, useEffect, useState } from "react";
-import { DEFAULT_TAB_VALUE } from "./common/constants";
-import { ContentsTabProps } from "./components/ContentsTab/contentsTab";
-import { Tab, Tabs } from "./outline.styles";
-
-export interface OutlineItem {
-  depth: number;
-  hash: string;
-  value: string;
-}
-
-export interface OutlineProps {
-  className?: string;
-  Contents: ElementType<ContentsTabProps>;
-  outline: OutlineItem[];
-}
+import React from "react";
+import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
+import { useTabs } from "./hooks/UseTabs/hook";
+import { StyledTab, StyledTabs } from "./outline.styles";
+import { OutlineProps } from "./types";
 
 export const Outline = ({
   className,
   Contents,
   outline,
-  ...props /* Spread props to allow for Mui Tabs specific prop overrides. */
-}: OutlineProps): JSX.Element => {
-  const { asPath, push } = useRouter();
-  const [activeTab, setActiveTab] = useState<string>("");
-
-  // Callback fired when selected tab value changes.
-  const handleChange = (
-    _event: SyntheticEvent<Element, Event>,
-    tabValue: string
-  ): void => {
-    push(`#${tabValue}`);
-  };
-
-  // Update active tab when path changes.
-  useEffect(() => {
-    setActiveTab(getActiveTab(outline, asPath));
-  }, [asPath, outline]);
-
+  ...props /* MuiTabsProps */
+}: OutlineProps): JSX.Element | null => {
+  const { indicatorColor, onChange, orientation, value } = useTabs(outline);
   return (
-    <Tabs
+    <StyledTabs
       className={className}
-      indicatorColor={activeTab ? "primary" : "transparent"}
-      onChange={handleChange}
-      orientation="vertical"
-      value={activeTab}
+      indicatorColor={indicatorColor}
+      onChange={onChange}
+      orientation={orientation}
+      value={value}
       {...props}
     >
       <Contents value={DEFAULT_TAB_VALUE} />
-      {outline.map(({ depth, hash, value }) => (
-        <Tab key={hash} depth={depth} label={value} value={hash} />
+      {outline.map(({ depth, disabled, hash, value }) => (
+        <StyledTab
+          depth={depth}
+          disabled={disabled}
+          key={hash}
+          label={value}
+          value={hash}
+        />
       ))}
-    </Tabs>
+    </StyledTabs>
   );
 };
-
-/**
- * Initializes active tab.
- * @param outline - Outline items.
- * @param asPath - Current path.
- * @returns active tab.
- */
-function getActiveTab(outline: OutlineItem[], asPath: string): string {
-  if (asPath.includes("#")) {
-    const hashLink = asPath.split("#")[1];
-    if (outline.some(({ hash }) => hash === hashLink)) {
-      return hashLink;
-    }
-  }
-  return DEFAULT_TAB_VALUE;
-}

package/src/components/Layout/components/Outline/types.ts

@@ -0,0 +1,16 @@
+import { TabsProps } from "@mui/material";
+import { ElementType } from "react";
+import { BaseComponentProps } from "../../../types";
+import { ContentsTabProps } from "./components/ContentsTab/types";
+
+export interface OutlineItem {
+  depth: number;
+  disabled?: boolean;
+  hash: string;
+  value: string;
+}
+
+export interface OutlineProps extends BaseComponentProps, TabsProps {
+  Contents: ElementType<ContentsTabProps>;
+  outline: OutlineItem[];
+}

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
-import { SIDEBAR_POSITIONER } from "../../../../../../common/selectors";
-import { useLayoutState } from "../../../../../../hooks/useLayoutState";
+import { SELECTOR } from "../../../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
 import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
 
 export interface SidebarPositionerProps {
@@ -10,11 +10,12 @@ export interface SidebarPositionerProps {
 export const SidebarPositioner = ({
   children,
 }: SidebarPositionerProps): JSX.Element => {
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
   return (
-    <Positioner headerHeight={headerHeight} id={SIDEBAR_POSITIONER}>
+    <Positioner
+      headerHeight={dimensions.header.height}
+      id={SELECTOR.SIDEBAR_POSITIONER}
+    >
       {children}
     </Positioner>
   );

package/src/components/Loading/loading.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { Loading } from "./loading";
 
-const meta = {
+const meta: Meta<typeof Loading> = {
   argTypes: {
     appear: { control: "boolean" },
     iconSize: { control: "select", options: ["small", "medium", "large"] },
@@ -30,7 +30,7 @@ const meta = {
     ),
   ],
   title: "Components/Communication/Loading",
-} satisfies Meta<typeof Loading>;
+};
 
 export default meta;
 

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -1,7 +1,6 @@
 import { Typography, TypographyProps } from "@mui/material";
 import React from "react";
-import { COLOR } from "../../../../../../styles/common/mui/typography";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { BaseComponentProps } from "../../../../../types";
 
 export const Warning = ({
@@ -13,9 +12,9 @@ export const Warning = ({
   return (
     <Typography
       className={className}
-      color={COLOR.INK_LIGHT}
+      color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
       mt={6}
-      variant={TEXT_BODY_SMALL_400}
+      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
       {...props}
     >
       {children}

package/src/components/Stepper/components/Step/components/StepContent/stepContent.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { StepContent } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { sectionPadding } from "../../../../../common/Section/section.styles";
+
+export const StyledStepContent = styled(StepContent)`
+  &.MuiStepContent-root {
+    .MuiCollapse-wrapperInner.MuiCollapse-vertical {
+      > .MuiGrid2-root {
+        ${sectionPadding};
+        border-top: 1px solid ${smokeMain};
+        display: grid;
+        gap: 24px;
+        justify-items: flex-start;
+      }
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepContent/stepContent.tsx

@@ -0,0 +1,16 @@
+import { Grid2, StepContentProps } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledStepContent } from "./stepContent.styles";
+
+export const StepContent = ({
+  children,
+  className,
+  ...props /* MuiStepContentProps */
+}: BaseComponentProps & StepContentProps): JSX.Element => {
+  return (
+    <StyledStepContent className={className} {...props}>
+      <Grid2>{children}</Grid2>
+    </StyledStepContent>
+  );
+};

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { SvgIcon } from "@mui/material";
+import {
+  inkLight,
+  smokeDark,
+} from "../../../../../../../../styles/common/mixins/colors";
+
+export const StyledSvgIcon = styled(SvgIcon)`
+  &.MuiSvgIcon-root {
+    border-radius: 50%;
+    box-sizing: content-box;
+    padding: 4px;
+
+    &.Mui-completed {
+      border: 2px solid ${smokeDark};
+      color: ${inkLight};
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.tsx

@@ -0,0 +1,20 @@
+import { stepIconClasses } from "@mui/material";
+import React from "react";
+import { TestIdProps } from "../../../../../../../types";
+import { StyledSvgIcon } from "./completedIcon.styles";
+import { SVG_ICON_PROPS } from "./contants";
+
+export const CompletedIcon = ({ testId }: TestIdProps): JSX.Element => {
+  return (
+    <StyledSvgIcon
+      {...SVG_ICON_PROPS}
+      className={stepIconClasses.completed}
+      data-testid={testId}
+    >
+      <path
+        d="M7.18129 13.1814C7.08109 13.1814 6.98419 13.1625 6.89059 13.1247C6.79699 13.0875 6.7064 13.0251 6.61879 12.9375L3.44989 9.7686C3.2999 9.61857 3.22819 9.42813 3.23479 9.1971C3.24079 8.96551 3.3188 8.77471 3.46879 8.6247C3.61879 8.47471 3.80629 8.3997 4.03129 8.3997C4.25629 8.3997 4.4438 8.47471 4.59379 8.6247L7.21909 11.25L13.4255 5.0436C13.5755 4.89361 13.7597 4.8186 13.9781 4.8186C14.1971 4.8186 14.3816 4.89361 14.5316 5.0436C14.6816 5.19361 14.7566 5.37811 14.7566 5.5971C14.7566 5.81551 14.6816 5.99971 14.5316 6.1497L7.74379 12.9375C7.65619 13.0251 7.56559 13.0875 7.47199 13.1247C7.37839 13.1625 7.2815 13.1814 7.18129 13.1814Z"
+        fill="currentColor"
+      />
+    </StyledSvgIcon>
+  );
+};

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/contants.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  fontSize: "small",
+  viewBox: "0 0 18 18",
+};

package/src/components/Stepper/components/Step/components/StepIcon/constants.ts

@@ -0,0 +1 @@
+export const STEP_ICON_TEST_ID = "step-icon";

package/src/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.ts

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+import { StepIcon } from "@mui/material";
+import {
+  inkLight,
+  primaryMain,
+  smokeDark,
+} from "../../../../../../styles/common/mixins/colors";
+
+export const StyledStepIcon = styled(StepIcon)`
+  &.MuiSvgIcon-root {
+    border: 2px solid ${smokeDark};
+    border-radius: 50%;
+    color: transparent;
+    height: 32px;
+    width: 32px;
+
+    .MuiStepIcon-text {
+      fill: ${inkLight};
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+
+    &.Mui-active {
+      border-color: ${primaryMain};
+
+      .MuiStepIcon-text {
+        fill: ${primaryMain};
+      }
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepIcon/stepIcon.tsx

@@ -0,0 +1,21 @@
+import { StepIconProps } from "@mui/material";
+import React from "react";
+import { TestIdProps } from "../../../../../types";
+import { CompletedIcon } from "./components/CompletedIcon/completedIcon";
+import { StyledStepIcon } from "./stepIcon.styles";
+
+export const StepIcon = ({
+  completed,
+  icon,
+  testId,
+  ...props
+}: StepIconProps & TestIdProps): JSX.Element => {
+  return (
+    <StyledStepIcon
+      completed={completed}
+      data-testid={testId}
+      icon={completed ? <CompletedIcon testId={testId} /> : icon}
+      {...props}
+    />
+  );
+};