@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/Layout/components/Nav/nav.tsx

@@ -1,39 +0,0 @@
-import { ListItem, ListItemButton, ListItemText } from "@mui/material";
-import Link from "next/link";
-import { JSX, ReactNode } from "react";
-import { List, NavBar } from "./nav.styles";
-
-export interface NavItem {
-  active?: boolean;
-  label: string;
-  url?: string;
-}
-
-export interface NavProps {
-  Hero?: ReactNode;
-  navigation: NavItem[];
-}
-
-export const Nav = ({ Hero, navigation }: NavProps): JSX.Element => {
-  return (
-    <NavBar>
-      {Hero}
-      <List>
-        {navigation.map(({ active, label, url }, i) => {
-          return (
-            <ListItem key={`${label}${i}`}>
-              <ListItemButton
-                component={Link}
-                disabled={!url}
-                href={url ?? ""}
-                selected={active}
-              >
-                <ListItemText disableTypography primary={label} />
-              </ListItemButton>
-            </ListItem>
-          );
-        })}
-      </List>
-    </NavBar>
-  );
-};

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

@@ -1,18 +0,0 @@
-import styled from "@emotion/styled";
-import { Tab } from "@mui/material";
-import { FONT } from "../../../../../../styles/common/constants/font";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { tab } from "../../outline.styles";
-
-export const StyledTab = styled(Tab)`
-  ${tab};
-
-  && {
-    align-items: center;
-    align-self: flex-start;
-    color: ${PALETTE.INK_LIGHT};
-    font: ${FONT.UPPERCASE_500};
-    pointer-events: none;
-    text-transform: uppercase;
-  }
-`;

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

@@ -1,23 +0,0 @@
-import { JSX } 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 { StyledTab } from "./contentsTab.styles";
-import { ContentsTabProps } from "./types";
-
-export const ContentsTab = ({
-  className,
-  value,
-  ...props /* MuiTabProps. */
-}: ContentsTabProps): JSX.Element => {
-  return (
-    <StyledTab
-      className={className}
-      label="Contents"
-      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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,64 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Tab as MTab, Tabs as MTabs, TabProps } from "@mui/material";
-import { FONT } from "../../../../styles/common/constants/font";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-interface Props extends TabProps {
-  depth: number;
-}
-
-export const tab = css`
-  align-items: flex-start;
-  margin: 0;
-  max-width: unset;
-  padding: 6px 24px;
-  text-align: left;
-
-  &:hover {
-    text-decoration: none;
-  }
-`;
-
-export const StyledTabs = styled(MTabs)`
-  align-self: flex-start;
-  box-shadow: inset 1px 0 ${PALETTE.SMOKE_MAIN};
-  margin: 0;
-  max-width: 242px;
-  padding: 0;
-
-  .MuiTabs-scroller {
-    margin: 0;
-  }
-
-  .MuiTabs-flexContainer {
-    gap: 0;
-  }
-
-  .MuiTabs-indicator {
-    border-radius: 0 6px 6px 0;
-    left: 0;
-    width: 3px;
-  }
-`;
-
-export const StyledTab = styled(MTab, {
-  shouldForwardProp: (prop) => prop !== "depth",
-})<Props>`
-  ${tab};
-  color: ${PALETTE.INK_MAIN};
-
-  ${({ depth }) =>
-    depth === 2 &&
-    css`
-      font: ${FONT.BODY_500};
-    `};
-
-  ${({ depth }) =>
-    depth === 3 &&
-    css`
-      font: ${FONT.BODY_SMALL_400};
-      margin-left: 16px;
-      padding: 8px 24px;
-    `};
-`;

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

@@ -1,40 +0,0 @@
-import { JSX } 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 /* MuiTabsProps */
-}: OutlineProps): JSX.Element | null => {
-  const { indicatorColor, onChange, orientation, value } = useTabs(
-    outline ?? [],
-  );
-
-  if (!outline?.length) return null;
-
-  return (
-    <StyledTabs
-      className={className}
-      indicatorColor={indicatorColor}
-      onChange={onChange}
-      orientation={orientation}
-      value={value}
-      {...props}
-    >
-      <Contents value={DEFAULT_TAB_VALUE} />
-      {outline.map(({ depth, disabled, hash, value }) => (
-        <StyledTab
-          depth={depth}
-          disabled={disabled}
-          key={hash}
-          label={value}
-          value={hash}
-        />
-      ))}
-    </StyledTabs>
-  );
-};

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

@@ -1,16 +0,0 @@
-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[] | null;
-}

package/src/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.styles.ts

@@ -1,37 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import {
-  bpUpMd,
-  bpUpSm,
-} from "../../../../../../styles/common/mixins/breakpoints";
-import { ButtonSecondary } from "../../../../../common/Button/components/ButtonSecondary/buttonSecondary";
-
-export const SidebarButton = styled(ButtonSecondary)`
-  grid-column: 1 / -1;
-  padding: 10px;
-
-  ${bpUpSm} {
-    grid-column: 2;
-    justify-self: flex-end;
-  }
-
-  ${bpUpMd} {
-    display: none;
-  }
-`;
-
-export const Badge = styled.div`
-  align-items: center;
-  background-color: ${PALETTE.PRIMARY_MAIN};
-  border-radius: 10px;
-  color: ${PALETTE.COMMON_WHITE};
-  display: flex;
-  flex: none;
-  font-size: 12px;
-  font-weight: 600;
-  height: 18px;
-  justify-content: center;
-  line-height: 16px;
-  min-width: 20px;
-  padding: 0 6px;
-`;

package/src/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.tsx

@@ -1,26 +0,0 @@
-import { FilterListRounded } from "@mui/icons-material";
-import { JSX, ReactNode } from "react";
-import { Badge, SidebarButton as Button } from "./sidebarButton.styles";
-
-export interface SidebarButtonProps {
-  className?: string;
-  count: number;
-  label: ReactNode;
-  onClick: () => void;
-}
-
-export const SidebarButton = ({
-  className,
-  count,
-  label,
-  onClick,
-  ...props
-}: SidebarButtonProps): JSX.Element => {
-  return (
-    <Button className={className} onClick={onClick} {...props}>
-      <FilterListRounded fontSize="small" />
-      {label}
-      {count > 0 && <Badge>{count}</Badge>}
-    </Button>
-  );
-};

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.ts

@@ -1,27 +0,0 @@
-import styled from "@emotion/styled";
-import { Popover as MPopover } from "@mui/material";
-import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { bpDownMd } from "../../../../../../styles/common/mixins/breakpoints";
-import { IconButton as DXIconButton } from "../../../../../common/IconButton/iconButton";
-
-export const TemporarySidebar = styled(MPopover)`
-  &.MuiPopover-root {
-    ${bpDownMd} {
-      & .MuiPaper-root {
-        background-color: ${PALETTE.SMOKE_LIGHT};
-        box-shadow: 0 1px 4px 0 transparent; // required; possible bug - box shadow "none" affects rendering of main content.
-        height: 100%;
-        max-height: 100%;
-        overflow: visible; // required; allows backdrop button to render outside of drawer container.
-        width: 312px;
-      }
-    }
-  }
-`;
-
-export const IconButton = styled(DXIconButton)`
-  color: ${PALETTE.COMMON_WHITE};
-  left: calc(100% + 4px);
-  position: absolute;
-  top: 4px;
-`;

package/src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx

@@ -1,42 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { PopoverPosition, PopoverProps } from "@mui/material";
-import { JSX, ReactNode } from "react";
-import { TEST_IDS } from "../../../../../../tests/testIds";
-import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
-import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
-
-const DEFAULT_POSITION: PopoverPosition = { left: 0, top: 0 };
-const DRAWER_SLOT_PROPS: PopoverProps["slotProps"] = {
-  paper: { square: true },
-  root: { slotProps: { backdrop: { invisible: false } } },
-};
-
-export interface SidebarDrawerProps {
-  children: ReactNode | ReactNode[];
-  onClose?: () => void;
-  open?: boolean;
-}
-
-export const SidebarDrawer = ({
-  children,
-  onClose,
-  open = false,
-}: SidebarDrawerProps): JSX.Element => {
-  return (
-    <TemporarySidebar
-      anchorPosition={DEFAULT_POSITION}
-      anchorReference="anchorPosition"
-      data-testid={TEST_IDS.SIDEBAR_DRAWER}
-      hideBackdrop={false}
-      marginThreshold={0}
-      onClose={onClose}
-      open={open}
-      slotProps={DRAWER_SLOT_PROPS}
-      TransitionComponent={DrawerTransition}
-      transitionDuration={open ? 250 : 300}
-    >
-      <IconButton Icon={CloseRounded} onClick={onClose} size="medium" />
-      {children}
-    </TemporarySidebar>
-  );
-};

package/src/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { SidebarLabel } from "./sidebarLabel";
-
-const meta = {
-  argTypes: {
-    label: { control: "text" },
-  },
-  component: SidebarLabel,
-  title: "Components/Label",
-} satisfies Meta<typeof SidebarLabel>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SidebarLabelStory: Story = {
-  args: {
-    label: "Filter",
-  },
-};

package/src/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.tsx

@@ -1,18 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-
-export interface SidebarLabelProps {
-  label: string;
-}
-
-export const SidebarLabel = ({ label }: SidebarLabelProps): JSX.Element => {
-  return (
-    <Typography
-      component="div"
-      variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}
-    >
-      {label}
-    </Typography>
-  );
-};

package/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts

@@ -1,21 +0,0 @@
-import styled from "@emotion/styled";
-import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
-
-interface Props {
-  headerHeight: number;
-}
-
-export const SidebarPositioner = styled("div")<Props>`
-  box-sizing: border-box;
-  height: 100%;
-  overflow: visible;
-  padding: 16px 0;
-
-  ${bpUpMd} {
-    max-height: 100vh;
-    overflow: auto;
-    padding: ${({ headerHeight }) => headerHeight}px 0 0;
-    position: sticky;
-    top: 0;
-  }
-`;

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

@@ -1,22 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { SELECTOR } from "../../../../../../common/selectors";
-import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
-import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
-
-export interface SidebarPositionerProps {
-  children: ReactNode | ReactNode[];
-}
-
-export const SidebarPositioner = ({
-  children,
-}: SidebarPositionerProps): JSX.Element => {
-  const { dimensions } = useLayoutDimensions();
-  return (
-    <Positioner
-      headerHeight={dimensions.header.height}
-      id={SELECTOR.SIDEBAR_POSITIONER}
-    >
-      {children}
-    </Positioner>
-  );
-};

package/src/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts

@@ -1,22 +0,0 @@
-import styled from "@emotion/styled";
-import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
-
-/**
- * Container for sidebar tools, including the mode toggle and filter controls.
- * @deprecated - This styled component is deprecated and will be removed in a future release.
- */
-export const SidebarTools = styled.div`
-  display: grid;
-  gap: 8px 0;
-  grid-template-columns: 1fr auto;
-  margin: 8px 0;
-  padding: 0 16px;
-
-  .MuiAutocomplete-root {
-    grid-column: 1 / -1; // SearchAllFilters component to utilize full width of the grid.
-  }
-
-  ${bpUpMd} {
-    padding: 8px 16px;
-  }
-`;

package/src/components/Layout/components/Sidebar/sidebar.stories.tsx

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { JSX } from "react";
-import { Sidebar } from "./sidebar";
-
-export default {
-  argTypes: {
-    children: { control: { disable: true } },
-    drawerOpen: { control: { disable: true } },
-    onDrawerClose: { control: { disable: true } },
-  },
-  component: Sidebar,
-  decorators: [
-    (Story): JSX.Element => (
-      <div
-        style={{
-          display: "flex",
-          minHeight: "100vh",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Layout/Sidebar",
-} as Meta<typeof Sidebar>;
-
-type Story = StoryObj<typeof Sidebar>;
-
-export const PermanentSidebarStory: Story = {
-  args: {
-    children: <div />,
-  },
-};
-
-export const TemporaryClosedSidebarStory: Story = {
-  args: {
-    children: <div />,
-  },
-};
-
-export const TemporaryOpenSidebarStory: Story = {
-  args: {
-    children: <div />,
-  },
-};

package/src/components/Layout/components/Sidebar/sidebar.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const Sidebar = styled.div`
-  align-self: stretch;
-  border-right: 1px solid ${PALETTE.SMOKE_MAIN};
-  box-sizing: content-box;
-  width: 264px;
-`;

package/src/components/Layout/components/Sidebar/sidebar.tsx

@@ -1,34 +0,0 @@
-import { ChildrenProps } from "components/types";
-import { JSX, useEffect } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../hooks/useBreakpointHelper";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { useDrawer } from "../../../common/Drawer/provider/hook";
-import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
-import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
-import { Sidebar as PermanentSidebar } from "./sidebar.styles";
-
-export const Sidebar = ({ children }: ChildrenProps): JSX.Element => {
-  const { onClose, open } = useDrawer();
-  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
-  const drawerSidebar = bpDownMd;
-  const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
-  const barProps = drawerSidebar
-    ? { onClose, open }
-    : { "data-testid": TEST_IDS.SIDEBAR };
-
-  // Closes an open, controlled drawer sidebar with a change of breakpoint.
-  useEffect(() => {
-    if (open && !bpDownMd) {
-      onClose();
-    }
-  }, [bpDownMd, onClose, open]);
-
-  return (
-    <Bar {...barProps}>
-      <SidebarPositioner>{children}</SidebarPositioner>
-    </Bar>
-  );
-};

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

@@ -1 +0,0 @@
-export const URL_OBJECT_KEYS = ["href", "query"];

package/src/components/Links/common/entities.ts

@@ -1,20 +0,0 @@
-import { UrlObject } from "url";
-
-export enum ANCHOR_TARGET {
-  BLANK = "_blank",
-  SELF = "_self",
-}
-
-export enum REL_ATTRIBUTE {
-  NO_OPENER = "noopener",
-  NO_OPENER_NO_REFERRER = "noopener noreferrer",
-}
-
-export type StrictUrlObject = Omit<UrlObject, "href" | "query"> & {
-  href: string;
-  query: string;
-};
-
-export type Url = string | UrlObjectWithHrefAndQuery;
-
-export type UrlObjectWithHrefAndQuery = Pick<StrictUrlObject, "href" | "query">;