@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/Filter/components/views/select/components/ListItemText/listItemText.tsx

@@ -1,48 +0,0 @@
-import { ListItemTextProps } from "@mui/material";
-import { JSX } from "react";
-import { isValueString } from "../../../../../../../utils/typeGuards";
-import { BaseComponentProps } from "../../../../../../types";
-import { Count } from "./components/Count/count";
-import { Term } from "./components/Term/term";
-import { StyledListItemText } from "./listItemText.styles";
-
-export const ListItemText = ({
-  className,
-  primary,
-  secondary,
-  ...props /* MuiListItemTextProps */
-}: BaseComponentProps & ListItemTextProps): JSX.Element => {
-  return (
-    <StyledListItemText
-      className={className}
-      disableTypography
-      primary={renderPrimary(primary)}
-      secondary={renderSecondary(secondary)}
-      {...props}
-    />
-  );
-};
-
-/**
- * Render the primary prop for the ListItemText component.
- * Default fallback for "string" values is <Term> component.
- * @param primary - Primary prop.
- * @returns primary prop.
- */
-function renderPrimary(
-  primary: ListItemTextProps["primary"],
-): ListItemTextProps["primary"] {
-  return isValueString(primary) ? <Term>{primary}</Term> : primary;
-}
-
-/**
- * Render the secondary prop for the ListItemText component.
- * Default fallback for "string" values is <Count> component.
- * @param secondary - Secondary prop.
- * @returns secondary prop.
- */
-function renderSecondary(
-  secondary: ListItemTextProps["secondary"],
-): ListItemTextProps["secondary"] {
-  return isValueString(secondary) ? <Count>{secondary}</Count> : secondary;
-}

package/src/components/Head/head.tsx

@@ -1,69 +0,0 @@
-import NextHead from "next/head";
-import { useRouter } from "next/router";
-import { JSX } from "react";
-import { useConfig } from "../../hooks/useConfig";
-
-const FAV_ICONS = {
-  "16x16": "/favicons/favicon-16x16.png",
-  "180x180": "/favicons/apple-touch-icon.png",
-  "32x32": "/favicons/favicon-32x32.png",
-  default: "/favicons/favicon.ico",
-  maskIcon: "/favicons/safari-pinned-tab.svg",
-  siteWebManifest: "/favicons/site.webmanifest",
-};
-
-export interface HeadProps {
-  pageTitle?: string;
-}
-
-export const Head = ({ pageTitle }: HeadProps): JSX.Element => {
-  const { config } = useConfig();
-  const router = useRouter();
-  const { appTitle } = config;
-  const title = pageTitle ? `${pageTitle} - ${appTitle}` : appTitle;
-
-  const renderIcons = (): JSX.Element => {
-    return (
-      <>
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href={`${router.basePath}${FAV_ICONS.default}`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href={`${router.basePath}${FAV_ICONS["16x16"]}`}
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href={`${router.basePath}${FAV_ICONS["32x32"]}`}
-        />
-        <link
-          rel="apple-touch-icon"
-          type="image/png"
-          sizes="180x180"
-          href={`${router.basePath}${FAV_ICONS["180x180"]}`}
-        />
-        <link
-          rel="mask-icon"
-          href={`${router.basePath}${FAV_ICONS.maskIcon}`}
-        />
-        <link
-          rel="manifest"
-          href={`${router.basePath}${FAV_ICONS.siteWebManifest}`}
-        />
-      </>
-    );
-  };
-
-  return (
-    <NextHead key="page-head">
-      <title>{title}</title>
-      {renderIcons()}
-    </NextHead>
-  );
-};

package/src/components/Index/components/AzulFileDownload/azulFileDownload.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { AzulFileDownload } from "./azulFileDownload";
-
-const meta = {
-  component: AzulFileDownload,
-  title: "Components/Common/IconButton/Download",
-} satisfies Meta<typeof AzulFileDownload>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const AzulFileDownloadStory: Story = {
-  args: {
-    entityName: "",
-    relatedEntityId: "",
-    relatedEntityName: "",
-    url: "https://service.dev.singlecell.gi.ucsc.edu/repository/files/d496b624-eb67-5e47-999a-848e856c5bcc?catalog=dcp2&version=2021-09-10T16%3A09%3A44.000000Z",
-  },
-};

package/src/components/Index/components/AzulFileDownload/azulFileDownload.styles.ts

@@ -1,6 +0,0 @@
-import styled from "@emotion/styled";
-import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
-
-export const StyledIconButton = styled(DXIconButton)`
-  pointer-events: none;
-`;

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -1,81 +0,0 @@
-import { Box } from "@mui/material";
-import { JSX, Fragment, useEffect, useRef, useState } from "react";
-import { useFileLocation } from "../../../../hooks/useFileLocation";
-import { useLoginGuard } from "../../../../providers/loginGuard/hook";
-import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
-import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
-import { IconButton } from "../../../common/IconButton/iconButton";
-import { trackFileDownloaded } from "../../../Export/common/tracking";
-import { StyledIconButton } from "./azulFileDownload.styles";
-import {
-  AZUL_FILE_DOWNLOAD_TEST_ID,
-  AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID,
-  AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID,
-} from "./common/constants";
-
-export interface AzulFileDownloadProps {
-  entityName: string; // The name of the file downloaded.
-  relatedEntityId: string; // An array of IDs of the file's datasets / projects
-  relatedEntityName: string; // An array of names of the file's datasets / projects
-  url?: string; // Original "file fetch URL" as returned from Azul endpoint.
-}
-
-export const AzulFileDownload = ({
-  entityName,
-  relatedEntityId,
-  relatedEntityName,
-  url,
-}: AzulFileDownloadProps): JSX.Element => {
-  const { fileUrl, isLoading, run } = useFileLocation(url);
-  const downloadRef = useRef<HTMLAnchorElement>(null);
-  const [isRequestPending, setIsRequestPending] = useState(false);
-
-  // Prompt user for login before download, if required.
-  const { requireLogin } = useLoginGuard();
-
-  // Initiates file download when file location request is successful.
-  useEffect(() => {
-    if (!fileUrl) return;
-    if (!downloadRef.current) return;
-    const downloadEl = downloadRef.current;
-    downloadEl.href = fileUrl;
-    downloadEl.click();
-    setIsRequestPending(false);
-  }, [fileUrl]);
-
-  // Initiates file download when download button is clicked.
-  const handleDownloadClick = (): void => {
-    setIsRequestPending(true);
-    trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-    run();
-  };
-
-  return (
-    <Fragment>
-      {isRequestPending ? (
-        <StyledIconButton
-          color="primary"
-          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID}
-          Icon={LoadingIcon}
-          size="medium"
-        />
-      ) : (
-        <IconButton
-          color="primary"
-          data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
-          disabled={!url}
-          Icon={isLoading ? LoadingIcon : DownloadIcon}
-          onClick={() => requireLogin(handleDownloadClick)}
-          size="medium"
-        />
-      )}
-      <Box
-        component="a"
-        data-testid={AZUL_FILE_DOWNLOAD_TEST_ID}
-        download
-        ref={downloadRef}
-        sx={{ display: "none" }}
-      />
-    </Fragment>
-  );
-};

package/src/components/Index/components/AzulFileDownload/common/constants.ts

@@ -1,4 +0,0 @@
-export const AZUL_FILE_DOWNLOAD_TEST_ID = "azul-file-download";
-export const AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID =
-  "azul-file-request-download-pending";
-export const AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID = "azul-file-request-download";

package/src/components/Index/components/EntityView/components/controls/ActionButton/actionButton.tsx

@@ -1,12 +0,0 @@
-import { Fragment, JSX } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-
-export const ActionButton = (): JSX.Element | null => {
-  const { entityConfig } = useConfig();
-  const { ui } = entityConfig;
-  const { actionButton } = ui || {};
-
-  if (!actionButton) return null;
-
-  return <Fragment>{actionButton}</Fragment>;
-};

package/src/components/Index/components/EntityView/components/controls/ExportButton/exportButton.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { Box } from "@mui/material";
-import { bpDownSm } from "../../../../../../../styles/common/mixins/breakpoints";
-
-export const StyledBox = styled(Box)`
-  ${bpDownSm} {
-    display: none;
-  }
-`;

package/src/components/Index/components/EntityView/components/controls/ExportButton/exportButton.tsx

@@ -1,39 +0,0 @@
-import { Button, Tooltip } from "@mui/material";
-import Link from "next/link";
-import { JSX } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-import { useDownloadStatus } from "../../../../../../../hooks/useDownloadStatus";
-import { ROUTE } from "../../../../../../../routes/constants";
-import { TEST_IDS } from "../../../../../../../tests/testIds";
-import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
-import { BaseComponentProps } from "../../../../../../types";
-import { StyledBox } from "./exportButton.styles";
-
-export const ExportButton = ({
-  className,
-}: BaseComponentProps): JSX.Element | null => {
-  const { disabled, isLoading, message } = useDownloadStatus();
-  const { entityConfig } = useConfig();
-  const { ui } = entityConfig;
-  const { enableExportButton } = ui || {};
-
-  if (!enableExportButton) return null;
-
-  return (
-    <Tooltip arrow title={message}>
-      <StyledBox>
-        <Button
-          {...BUTTON_PROPS.PRIMARY_CONTAINED}
-          className={className}
-          component={Link}
-          data-testid={TEST_IDS.EXPORT_BUTTON}
-          disabled={disabled || isLoading}
-          href={ROUTE.EXPORT}
-          id="button-cohort-export"
-        >
-          Export
-        </Button>
-      </StyledBox>
-    </Tooltip>
-  );
-};

package/src/components/Index/components/EntityView/components/controls/FilterButton/filterButton.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { Button } from "@mui/material";
-import { bpUpMd } from "../../../../../../../styles/common/mixins/breakpoints";
-
-export const StyledButton = styled(Button)`
-  ${bpUpMd} {
-    display: none;
-  }
-`;

package/src/components/Index/components/EntityView/components/controls/FilterButton/filterButton.tsx

@@ -1,39 +0,0 @@
-import { FilterListRounded } from "@mui/icons-material";
-import { ButtonProps, NoSsr } from "@mui/material";
-import { JSX } from "react";
-import { useExploreState } from "../../../../../../../hooks/useExploreState";
-import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
-import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
-import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
-import { FilterCountChip } from "../../../../../../Filter/components/FilterCountChip/filterCountChip";
-import { BaseComponentProps } from "../../../../../../types";
-import { StyledButton } from "./filterButton.styles";
-
-export const FilterButton = ({
-  className,
-  ...props
-}: BaseComponentProps & ButtonProps): JSX.Element => {
-  const { onOpen } = useDrawer();
-  const { exploreState } = useExploreState();
-  const { filterCount } = exploreState;
-  return (
-    <NoSsr>
-      <StyledButton
-        {...BUTTON_PROPS.SECONDARY_CONTAINED}
-        className={className}
-        onClick={onOpen}
-        startIcon={
-          <FilterListRounded
-            color={SVG_ICON_PROPS.COLOR.INK_LIGHT}
-            fontSize={SVG_ICON_PROPS.FONT_SIZE.SMALL}
-          />
-        }
-        {...props}
-      >
-        Filter
-        {/* NoSsr prevents server/client hydration mismatch with dynamic chip content */}
-        <FilterCountChip count={filterCount} />
-      </StyledButton>
-    </NoSsr>
-  );
-};

package/src/components/Index/components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/hook.ts

@@ -1,15 +0,0 @@
-import { useConfig } from "../../../../../../../../../hooks/useConfig";
-import { useToggleButtonGroup } from "../../../../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
-import { UseViewToggleProps, VIEW_MODE } from "./types";
-
-export const useViewToggle = (): UseViewToggleProps => {
-  const { onChange, value } = useToggleButtonGroup<VIEW_MODE>(VIEW_MODE.TABLE);
-  const { config } = useConfig();
-  const { enableEntitiesView = false } = config;
-  const disabled = !enableEntitiesView;
-  return {
-    onChange,
-    viewMode: value,
-    viewStatus: { disabled },
-  };
-};

package/src/components/Index/components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/types.ts

@@ -1,16 +0,0 @@
-import { ToggleButtonGroupProps } from "@mui/material";
-
-export enum VIEW_MODE {
-  CHART = "chart",
-  TABLE = "table",
-}
-
-export interface ViewStatus {
-  disabled: boolean;
-}
-
-export interface UseViewToggleProps {
-  onChange: ToggleButtonGroupProps["onChange"];
-  viewMode: VIEW_MODE;
-  viewStatus: ViewStatus;
-}

package/src/components/Index/components/EntityView/components/controls/ViewToggle/stories/viewToggle.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { ViewToggle } from "../viewToggle";
-
-const meta: Meta<typeof ViewToggle> = {
-  component: ViewToggle,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.styles.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-import { ToggleButtonGroup } from "@mui/material";
-
-export const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
-  .MuiToggleButton-root {
-    max-height: 32px;
-    text-transform: none;
-  }
-`;

package/src/components/Index/components/EntityView/components/controls/ViewToggle/viewToggle.tsx

@@ -1,24 +0,0 @@
-import { ToggleButton } from "@mui/material";
-import { JSX } from "react";
-import { TestIdProps } from "../../../../../../types";
-import { useEntityView } from "../../../context/hook";
-import { VIEW_MODE } from "./hooks/UseViewToggle/types";
-import { StyledToggleButtonGroup } from "./viewToggle.styles";
-
-export const ViewToggle = ({ testId }: TestIdProps): JSX.Element | null => {
-  const { onChange, viewMode, viewStatus } = useEntityView();
-
-  if (viewStatus.disabled) return null;
-
-  return (
-    <StyledToggleButtonGroup
-      data-testid={testId}
-      exclusive
-      onChange={onChange}
-      value={viewMode}
-    >
-      <ToggleButton value={VIEW_MODE.TABLE}>Table</ToggleButton>
-      <ToggleButton value={VIEW_MODE.CHART}>Graph</ToggleButton>
-    </StyledToggleButtonGroup>
-  );
-};

package/src/components/Index/components/EntityView/components/layout/Summary/constants.ts

@@ -1,7 +0,0 @@
-import { GridProps } from "@mui/material";
-
-export const GRID_PROPS: GridProps = {
-  container: true,
-  direction: "row",
-  spacing: 1,
-};

package/src/components/Index/components/EntityView/components/layout/Summary/summary.styles.ts

@@ -1,20 +0,0 @@
-import styled from "@emotion/styled";
-import { Grid } from "@mui/material";
-import { bpDown1024 } from "../../../../../../../styles/common/mixins/breakpoints";
-import { Dot } from "../../../../../../common/Dot/dot";
-
-export const StyledGrid = styled(Grid)`
-  display: grid;
-  gap: 4px;
-  grid-auto-flow: column;
-  max-width: fit-content;
-  padding: 12px 16px;
-
-  ${bpDown1024} {
-    display: none;
-  }
-`;
-
-export const StyledDot = styled(Dot)`
-  margin: 0 4px;
-`;

package/src/components/Index/components/EntityView/components/layout/Summary/summary.tsx

@@ -1,41 +0,0 @@
-import { Typography } from "@mui/material";
-import { Fragment, JSX } from "react";
-import { useSummary } from "../../../../../../../hooks/useSummary";
-import { TYPOGRAPHY_PROPS } from "../../../../../../../styles/common/mui/typography";
-import { TEST_IDS } from "../../../../../../../tests/testIds";
-import { BaseComponentProps } from "../../../../../../types";
-import { GRID_PROPS } from "./constants";
-import { StyledDot, StyledGrid } from "./summary.styles";
-
-export const Summary = ({
-  className,
-}: BaseComponentProps): JSX.Element | null => {
-  const { summaries } = useSummary() || {};
-
-  if (!summaries) return null;
-
-  return (
-    <StyledGrid
-      {...GRID_PROPS}
-      className={className}
-      data-testid={TEST_IDS.ENTITY_SUMMARY}
-    >
-      {summaries.map(([count, label], i) => (
-        <Fragment key={i}>
-          {i !== 0 && <StyledDot />}
-          <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_500}>
-            {count}
-          </Typography>
-          {label && (
-            <Typography
-              color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-              variant={TYPOGRAPHY_PROPS.VARIANT.BODY_SMALL_400}
-            >
-              {label}
-            </Typography>
-          )}
-        </Fragment>
-      ))}
-    </StyledGrid>
-  );
-};

package/src/components/Index/components/EntityView/components/layout/Title/title.tsx

@@ -1,16 +0,0 @@
-import { JSX } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-import { Title as CommonTitle } from "../../../../../../common/Title/title";
-import { BaseComponentProps } from "../../../../../../types";
-
-export const Title = ({
-  className,
-}: BaseComponentProps): JSX.Element | null => {
-  const { entityConfig } = useConfig();
-  const { ui } = entityConfig;
-  const { title } = ui || {};
-
-  if (!title) return null;
-
-  return <CommonTitle className={className}>{title}</CommonTitle>;
-};

package/src/components/Index/components/EntityView/components/navigation/Tabs/common/utils.ts

@@ -1,25 +0,0 @@
-import { EntityConfig } from "../../../../../../../../config/entities";
-import { Tab } from "../../../../../../../common/Tabs/tabs";
-
-/**
- * Returns entity list tabs list for the tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
-  return entities.map(
-    ({
-      annotation,
-      label,
-      route,
-      tabIcon: icon,
-      tabIconPosition: iconPosition,
-    }) => ({
-      annotation,
-      icon,
-      iconPosition,
-      label,
-      value: route,
-    }),
-  );
-}

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.styles.ts

@@ -1,20 +0,0 @@
-import styled from "@emotion/styled";
-import { Tabs } from "../../../../../../common/Tabs/tabs";
-
-export const StyledTabs = styled(Tabs)`
-  box-shadow: none;
-  flex: 1;
-
-  .MuiTabs-scroller {
-    padding: 0;
-  }
-
-  .MuiTabs-indicator {
-    z-index: 4; /* required; positions indicator above list view hero box-shadow */
-  }
-
-  .MuiTab-root {
-    line-height: 32px;
-    margin: 0;
-  }
-`;

package/src/components/Index/components/EntityView/components/navigation/Tabs/tabs.tsx

@@ -1,28 +0,0 @@
-import Router from "next/router";
-import { JSX, useCallback, useMemo } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-import { useExploreState } from "../../../../../../../hooks/useExploreState";
-import { TabValue } from "../../../../../../common/Tabs/tabs";
-import { getEntityListTabs } from "./common/utils";
-import { StyledTabs } from "./tabs.styles";
-
-export const Tabs = (): JSX.Element | null => {
-  const { config, entityConfig } = useConfig();
-  const { exploreState } = useExploreState();
-  const { entities } = config;
-  const { tabValue } = exploreState;
-  const { ui } = entityConfig;
-  const { enableTabs } = ui || {};
-
-  // Builds the tabs.
-  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
-
-  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
-    await Router.push(`/${tabValue}`);
-  }, []);
-
-  // Returns null if tabs are disabled.
-  if (!enableTabs) return null;
-
-  return <StyledTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
-};

package/src/components/Index/components/EntityView/components/slots/EntityListSlot/entityListSlot.tsx

@@ -1,14 +0,0 @@
-import { JSX } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
-
-export const EntityListSlot = (): JSX.Element | null => {
-  const { entityConfig } = useConfig();
-  const { ui } = entityConfig;
-  const { slots } = ui || {};
-  const { entityListSlot } = slots || {};
-
-  if (!entityListSlot) return null;
-
-  return <ComponentCreator components={entityListSlot} response={undefined} />;
-};

package/src/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.styles.ts

@@ -1,17 +0,0 @@
-import styled from "@emotion/styled";
-import { Grid } from "@mui/material";
-import { bpDownSm } from "../../../../../../../styles/common/mixins/breakpoints";
-
-export const StyledGrid = styled(Grid)`
-  display: grid;
-  gap: 16px;
-  margin: 16px;
-
-  &:empty {
-    display: none;
-  }
-
-  ${bpDownSm} {
-    margin: 16px 0;
-  }
-`;

package/src/components/Index/components/EntityView/components/slots/EntityViewSlot/entityViewSlot.tsx

@@ -1,19 +0,0 @@
-import { JSX } from "react";
-import { useConfig } from "../../../../../../../hooks/useConfig";
-import { ComponentCreator } from "../../../../../../ComponentCreator/ComponentCreator";
-import { StyledGrid } from "./entityViewSlot.styles";
-
-export const EntityViewSlot = (): JSX.Element | null => {
-  const { entityConfig } = useConfig();
-  const { ui } = entityConfig;
-  const { slots } = ui || {};
-  const { entityViewSlot } = slots || {};
-
-  if (!entityViewSlot) return null;
-
-  return (
-    <StyledGrid>
-      <ComponentCreator components={entityViewSlot} response={undefined} />
-    </StyledGrid>
-  );
-};