@databiosphere/findable-ui 22.0.0 → 24.0.0

package/lib/utils/tests.d.ts

@@ -10,3 +10,15 @@ export declare function getAnchorEl(id: string): HTMLAnchorElement;
  * @returns HTML button element.
  */
 export declare function getButtonById(id: string): HTMLButtonElement;
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export declare function getClassNames(element?: Element | null): string | null;
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export declare function getTagName(element?: Element | null): string | null;

package/lib/utils/tests.js

@@ -15,3 +15,23 @@ export function getAnchorEl(id) {
 export function getButtonById(id) {
     return screen.getByTestId(id);
 }
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element) {
+    if (!element)
+        return null;
+    return element.getAttribute("class");
+}
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export function getTagName(element) {
+    if (!element)
+        return null;
+    return element.tagName.toLowerCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "22.0.0",
+  "version": "24.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/selectors.ts

@@ -1,3 +1,6 @@
-export const BODY = "body";
-
-export const SIDEBAR_POSITIONER = "sidebar-positioner";
+export enum SELECTOR {
+  BODY = "body",
+  FOOTER = "footer",
+  HEADER = "header",
+  SIDEBAR_POSITIONER = "sidebar-positioner",
+}

package/src/components/DataDictionary/components/Entities/constants.ts

@@ -1,8 +1,10 @@
 import { Grid2Props } from "@mui/material";
 
+export const ENTITIES_ROW_GAP = 8;
+
 export const GRID2_PROPS: Grid2Props = {
   container: true,
   direction: "column",
   flexWrap: "nowrap",
-  rowGap: 8,
+  rowGap: ENTITIES_ROW_GAP,
 };

package/src/components/DataDictionary/components/Entities/entities.tsx

@@ -4,11 +4,11 @@ import { Entity } from "../Entity/entity";
 import { GRID2_PROPS } from "./constants";
 import { ClassesProps } from "./types";
 
-export const Entities = ({ classes }: ClassesProps): JSX.Element => {
+export const Entities = ({ classes, spacing }: ClassesProps): JSX.Element => {
   return (
     <Grid2 {...GRID2_PROPS}>
       {classes.map((classData) => (
-        <Entity key={classData.key} class={classData} />
+        <Entity key={classData.key} class={classData} spacing={spacing} />
       ))}
     </Grid2>
   );

package/src/components/DataDictionary/components/Entities/types.ts

@@ -1,5 +1,7 @@
 import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
 export interface ClassesProps {
   classes: Class[];
+  spacing?: LayoutSpacing;
 }

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { ENTITIES_ROW_GAP } from "../Entities/constants";
+
+export const StyledTypography = styled(Typography)<Partial<LayoutSpacing>>`
+  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+
+  &:hover a {
+    opacity: 1;
+  }
+` as typeof Typography;

package/src/components/DataDictionary/components/Entity/entity.tsx

@@ -1,23 +1,33 @@
 import { Grid2, Typography } from "@mui/material";
 import React from "react";
-import { COLOR, VARIANT } from "../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
+import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID2_PROPS } from "./constants";
+import { StyledTypography } from "./entity.styles";
 import { EntityProps } from "./types";
 
-export const Entity = ({ class: classData }: EntityProps): JSX.Element => {
+export const Entity = ({
+  class: classData,
+  spacing,
+}: EntityProps): JSX.Element => {
   const table = useTable(classData.attributes);
   return (
     <Grid2 {...GRID2_PROPS} rowGap={4}>
       <Grid2 {...GRID2_PROPS} rowGap={1}>
-        <Typography component="h3" variant={VARIANT.TEXT_HEADING_SMALL}>
-          {classData.label}
-        </Typography>
+        <StyledTypography
+          component="h3"
+          id={classData.key}
+          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL}
+          {...spacing}
+        >
+          {classData.label} <AnchorLink anchorLink={classData.key} />
+        </StyledTypography>
         <Typography
-          color={COLOR.INK_LIGHT}
+          color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
           component="div"
-          variant={VARIANT.TEXT_BODY_400_2_LINES}
+          variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES}
         >
           {classData.description}
         </Typography>

package/src/components/DataDictionary/components/Entity/types.ts

@@ -1,5 +1,7 @@
 import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 
 export interface EntityProps {
   class: Class;
+  spacing?: LayoutSpacing;
 }

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LAYOUT_SPACING } from "../../constants";
+
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+
+export const Layout = styled("div")<LayoutSpacing>`
+  grid-column: 2;
+  grid-row: 1;
+  padding-bottom: ${PB}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  z-index: 1; /* not required, but helpful in that the entities are always on top */
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: ${PT}px;
+  }
+`;

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Layout } from "./entitiesLayout.styles";
+import { EntitiesLayoutProps } from "./types";
+
+export const EntitiesLayout = ({
+  children,
+  ...props
+}: EntitiesLayoutProps): JSX.Element => {
+  return <Layout {...props}>{children}</Layout>;
+};

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export interface EntitiesLayoutProps extends LayoutSpacing {
+  children: ReactNode;
+}

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+import { LAYOUT_SPACING } from "../../constants";
+
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+
+export const Layout = styled("div")<LayoutSpacing>`
+  grid-column: 1;
+  grid-row: 1;
+  margin-bottom: ${({ bottom }) =>
+    -bottom}px; /* required; prevents sticky element from scrolling when footer scrolls into viewport */
+  max-height: 100vh;
+  overflow: hidden;
+  padding-bottom: ${({ bottom }) => bottom}px; /* footer height */
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;
+
+export const LayoutScroller = styled("div")`
+  height: 100%;
+  overflow: auto;
+  padding-bottom: ${PB}px;
+`;

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Layout, LayoutScroller } from "./outlineLayout.styles";
+import { OutlineLayoutProps } from "./types";
+
+export const OutlineLayout = ({
+  children,
+  ...props
+}: OutlineLayoutProps): JSX.Element => {
+  return (
+    <Layout {...props}>
+      <LayoutScroller>{children}</LayoutScroller>
+    </Layout>
+  );
+};

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export interface OutlineLayoutProps extends LayoutSpacing {
+  children: ReactNode;
+}

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export const Layout = styled("div")<LayoutSpacing>`
+  grid-column: 1 / -1;
+  grid-row: 1;
+  height: fit-content;
+  padding-top: ${({ top }) => top}px; /* header height */
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    position: relative;
+  }
+`;

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Layout } from "./titleLayout.styles";
+import { TitleLayoutProps } from "./types";
+
+export const TitleLayout = ({
+  children,
+  ...props
+}: TitleLayoutProps): JSX.Element => {
+  return <Layout {...props}>{children}</Layout>;
+};

package/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+
+export interface TitleLayoutProps extends LayoutSpacing {
+  children: ReactNode;
+}

package/src/components/DataDictionary/components/Layout/constants.ts

@@ -0,0 +1,5 @@
+export const LAYOUT_SPACING = {
+  CONTENT_PADDING_BOTTOM: 24,
+  CONTENT_PADDING_TOP: 16,
+  TITLE_HEIGHT: 74,
+};

package/src/components/DataDictionary/components/Outline/components/ContentsTab/constants.ts

@@ -0,0 +1,7 @@
+import { ContentsTabProps } from "../../../../../Layout/components/Outline/components/ContentsTab/types";
+
+export const TAB_PROPS: ContentsTabProps = {
+  icon: undefined,
+  label: "Entity Type",
+  value: "",
+};

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

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { ContentsTab } from "../../../../../Layout/components/Outline/components/ContentsTab/contentsTab";
+
+export const StyledContentsTab = styled(ContentsTab)`
+  & {
+    padding: 8px 24px;
+  }
+`;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TAB_PROPS } from "./constants";
+import { StyledContentsTab } from "./contentsTab.styles";
+
+export const ContentsTab = (): JSX.Element => {
+  return <StyledContentsTab {...TAB_PROPS} />;
+};

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

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import {
+  inkLight,
+  inkMain,
+  smokeDark,
+} from "../../../../styles/common/mixins/colors";
+import { Outline } from "../../../Layout/components/Outline/outline";
+
+export const StyledOutline = styled(Outline)`
+  &.MuiTabs-root {
+    .MuiTab-root {
+      color: ${inkLight};
+
+      &.Mui-selected {
+        color: ${inkMain};
+      }
+
+      &.Mui-disabled {
+        color: ${smokeDark};
+        opacity: 1;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { ContentsTab } from "./components/ContentsTab/contentsTab";
+import { StyledOutline } from "./outline.styles";
+import { OutlineProps } from "./types";
+
+export const Outline = ({
+  outline,
+  ...props /* MuiTabsProps */
+}: OutlineProps): JSX.Element => {
+  return <StyledOutline Contents={ContentsTab} outline={outline} {...props} />;
+};

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

@@ -0,0 +1,6 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+
+export interface OutlineProps extends TabsProps {
+  outline: OutlineItem[];
+}

package/src/components/DataDictionary/components/Outline/utils.ts

@@ -0,0 +1,18 @@
+import { Class } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+
+/**
+ * Returns outline items from classes.
+ * @param classes - Class entities.
+ * @returns Outline items.
+ */
+export function buildClassesOutline(classes: Class[]): OutlineItem[] {
+  return classes.map(({ key, name }) => {
+    return {
+      depth: 2,
+      disabled: false,
+      hash: key,
+      value: name,
+    };
+  });
+}

package/src/components/DataDictionary/components/Table/components/BasicCell/basicCell.tsx

@@ -1,8 +1,12 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 import { BasicCellProps } from "./types";
 
 export const BasicCell = ({ getValue }: BasicCellProps): JSX.Element => {
-  return <Typography variant={VARIANT.INHERIT}>{getValue()}</Typography>;
+  return (
+    <Typography variant={TYPOGRAPHY_PROPS.VARIANT.INHERIT}>
+      {getValue()}
+    </Typography>
+  );
 };

package/src/components/DataDictionary/components/Title/title.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { Title } from "../../../common/Title/title";
+
+export const StyledTitle = styled(Title)`
+  & {
+    font-size: 34px;
+    grid-column: 1 / -1;
+    letter-spacing: normal;
+    line-height: 42px;
+    margin: 24px 0 8px;
+
+    ${mediaTabletDown} {
+      font-size: 26px;
+      line-height: 34px;
+    }
+  }
+`;

package/src/components/DataDictionary/components/Title/title.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { TitleProps } from "../../../common/Title/title";
+import { StyledTitle } from "./title.styles";
+
+export const Title = ({
+  title = "Data Dictionary",
+  ...props
+}: TitleProps): JSX.Element => <StyledTitle title={title} {...props} />;

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -1,8 +1,22 @@
-import { styled } from "@mui/material";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+
+export const grid = css`
+  column-gap: 24px;
+  display: grid;
+  grid-template-columns: 242px 1fr;
+`;
 
 export const View = styled("div")`
+  ${grid};
   flex: 1;
   margin: 0 auto;
-  max-width: calc(100vw - 48px);
-  padding: 24px 0;
+  max-width: min(calc(100vw - 48px), 1392px);
+  position: relative;
+
+  ${mediaTabletDown} {
+    grid-template-columns: 1fr;
+    max-width: calc(100vw - 32px);
+  }
 `;

package/src/components/DataDictionary/dataDictionary.tsx

@@ -1,16 +1,38 @@
-import React from "react";
-import { BaseComponentProps } from "../types";
+import React, { useMemo } from "react";
 import { Entities } from "./components/Entities/entities";
+import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
+import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
+import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
+import { Outline as DefaultOutline } from "./components/Outline/outline";
+import { buildClassesOutline } from "./components/Outline/utils";
+import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
 import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
+import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
+import { DataDictionaryProps } from "./types";
 
 export const DataDictionary = ({
   className,
-}: BaseComponentProps): JSX.Element => {
+  EntitiesLayout = DefaultEntitiesLayout,
+  Outline = DefaultOutline,
+  OutlineLayout = DefaultOutlineLayout,
+  Title = DefaultTitle,
+  TitleLayout = DefaultTitleLayout,
+}: DataDictionaryProps): JSX.Element => {
   const { classes } = useDataDictionary();
+  const { spacing } = useLayoutSpacing();
+  const outline = useMemo(() => buildClassesOutline(classes), [classes]);
   return (
     <View className={className}>
-      <Entities classes={classes} />
+      <TitleLayout {...spacing}>
+        <Title />
+      </TitleLayout>
+      <OutlineLayout {...spacing}>
+        <Outline outline={outline} />
+      </OutlineLayout>
+      <EntitiesLayout {...spacing}>
+        <Entities classes={classes} spacing={spacing} />
+      </EntitiesLayout>
     </View>
   );
 };

package/src/components/DataDictionary/hooks/UseDataDictionary/hook.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useConfig } from "../../../../hooks/useConfig";
 import { UseDataDictionary } from "./types";
 
@@ -5,5 +6,5 @@ export const useDataDictionary = (): UseDataDictionary => {
   const {
     config: { dataDictionary: { classes = [] } = {} },
   } = useConfig();
-  return { classes };
+  return useMemo(() => ({ classes }), [classes]);
 };

package/src/components/DataDictionary/hooks/UseLayoutSpacing/hook.ts

@@ -0,0 +1,12 @@
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { UseLayoutSpacing } from "./types";
+
+export const useLayoutSpacing = (): UseLayoutSpacing => {
+  const { dimensions } = useLayoutDimensions();
+  return {
+    spacing: {
+      bottom: dimensions.footer.height,
+      top: dimensions.header.height,
+    },
+  };
+};

package/src/components/DataDictionary/hooks/UseLayoutSpacing/types.ts

@@ -0,0 +1,8 @@
+export interface LayoutSpacing {
+  bottom: number;
+  top: number;
+}
+
+export interface UseLayoutSpacing {
+  spacing: LayoutSpacing;
+}

package/src/components/DataDictionary/types.ts

@@ -0,0 +1,10 @@
+import { ElementType } from "react";
+import { BaseComponentProps } from "../types";
+
+export interface DataDictionaryProps extends BaseComponentProps {
+  EntitiesLayout?: ElementType;
+  Outline?: ElementType;
+  OutlineLayout?: ElementType;
+  Title?: ElementType;
+  TitleLayout?: ElementType;
+}

package/src/components/Error/error.tsx

@@ -2,8 +2,8 @@ import { Divider, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useLayoutState } from "../../hooks/useLayoutState";
 import { ExploreActionKind } from "../../providers/exploreState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
@@ -54,9 +54,7 @@ export const Error = ({
   rootPath,
 }: ErrorProps): JSX.Element => {
   const { exploreDispatch } = useExploreState();
-  const {
-    layoutState: { headerHeight },
-  } = useLayoutState();
+  const { dimensions } = useLayoutDimensions();
 
   const handleToHomePageClicked = (): void => {
     onReset?.();
@@ -67,7 +65,7 @@ export const Error = ({
   };
 
   return (
-    <ErrorLayout offset={headerHeight}>
+    <ErrorLayout offset={dimensions.header.height}>
       <CustomError>
         <ErrorSection>
           <StatusIcon priority={PRIORITY.HIGH} StatusIcon={AlertIcon} />

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -11,7 +11,7 @@ import React, {
   useState,
 } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
-import { BODY, SIDEBAR_POSITIONER } from "../../../../common/selectors";
+import { SELECTOR } from "../../../../common/selectors";
 import {
   BREAKPOINT_FN_NAME,
   useBreakpointHelper,
@@ -89,8 +89,8 @@ export const SearchAllFilters = ({
     if (desktopSmUp) {
       setElementsOverflowStyle(
         [
-          document.querySelector(BODY),
-          document.getElementById(SIDEBAR_POSITIONER),
+          document.querySelector(SELECTOR.BODY),
+          document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
         ],
         overflowStyle
       );

package/src/components/Index/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { useLayoutState } from "../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { HeroTitle } from "../common/Title/title";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
@@ -25,10 +25,9 @@ export const Index = ({
   Tabs,
   title,
 }: IndexProps): JSX.Element => {
-  const { layoutState } = useLayoutState();
-  const { headerHeight } = layoutState;
+  const { dimensions } = useLayoutDimensions();
   return (
-    <IndexLayout className={className} marginTop={headerHeight}>
+    <IndexLayout className={className} marginTop={dimensions.header.height}>
       <Hero SideBarButton={SideBarButton} Summaries={Summaries} title={title} />
       {SubTitleHero}
       {Tabs}