@databiosphere/findable-ui 37.1.0 → 38.0.0

package/src/components/Index/components/EntitiesView/stories/entitiesView.stories.tsx

@@ -1,76 +0,0 @@
-import { Box } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import React from "react";
-import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
-import { EntitiesView } from "../entitiesView";
-import { VIEW_MODE } from "../hooks/UseEntitiesView/types";
-
-const meta: Meta<typeof EntitiesView> = {
-  args: {
-    onChange: fn(),
-    viewMode: VIEW_MODE.TABLE,
-    viewStatus: { disabled: true },
-  },
-  component: EntitiesView,
-  title: "Components/Entities/EntitiesView",
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <Box
-        sx={{
-          backgroundColor: "white",
-          maxWidth: "800px",
-          padding: 5,
-          width: "100%",
-        }}
-      >
-        {LOREM_IPSUM.LONG}
-      </Box>
-    ),
-  },
-};
-
-export const ChartView: Story = {
-  args: {
-    children: (
-      <Box
-        sx={{
-          backgroundColor: "white",
-          maxWidth: "800px",
-          padding: 5,
-          width: "100%",
-        }}
-      >
-        {LOREM_IPSUM.SHORT}
-      </Box>
-    ),
-    viewMode: VIEW_MODE.CHART,
-    viewStatus: { disabled: false },
-  },
-};
-
-export const TableView: Story = {
-  args: {
-    children: (
-      <Box
-        sx={{
-          backgroundColor: "white",
-          maxWidth: "800px",
-          padding: 5,
-          width: "100%",
-        }}
-      >
-        {LOREM_IPSUM.SHORT}
-      </Box>
-    ),
-    viewMode: VIEW_MODE.TABLE,
-    viewStatus: { disabled: false },
-  },
-};

package/src/components/Index/components/EntitiesView/types.ts

@@ -1,9 +0,0 @@
-import { ToggleButtonGroupProps } from "@mui/material";
-import { ChildrenProps } from "../../../types";
-import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
-
-export interface EntitiesViewProps extends ChildrenProps {
-  onChange: ToggleButtonGroupProps["onChange"];
-  viewMode: VIEW_MODE;
-  viewStatus: ViewStatus;
-}

package/src/components/Index/components/Hero/components/ExportButton/exportButton.styles.ts

@@ -1,14 +0,0 @@
-import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
-import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-
-export const Button = styled(ButtonPrimary)`
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  display: none;
-  margin-left: -1px;
-
-  ${mediaTabletUp} {
-    display: block;
-  }
-`;

package/src/components/Index/components/Hero/components/ExportButton/exportButton.tsx

@@ -1,26 +0,0 @@
-import { Tooltip } from "@mui/material";
-import Link from "next/link";
-import React from "react";
-import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
-import { TEST_IDS } from "../../../../../../tests/testIds";
-import { Button } from "./exportButton.styles";
-
-export const ExportButton = (): JSX.Element => {
-  const { disabled, isLoading, message } = useDownloadStatus();
-  return (
-    <Tooltip arrow title={message}>
-      <span>
-        <Link href="/export" legacyBehavior passHref>
-          <Button
-            data-testid={TEST_IDS.EXPORT_BUTTON}
-            disabled={disabled || isLoading}
-            href="passHref"
-            id="button-cohort-export"
-          >
-            Export
-          </Button>
-        </Link>
-      </span>
-    </Tooltip>
-  );
-};

package/src/components/Index/components/Hero/components/Summaries/stories/summaries.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Summaries } from "../summaries";
-
-const meta: Meta<typeof Summaries> = {
-  component: Summaries,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    summaries: [
-      { count: "1", label: "Species" },
-      { count: "1.1k", label: "Donors" },
-      { count: "508.5k", label: "Files" },
-    ],
-  },
-};

package/src/components/Index/components/Hero/components/Summaries/summaries.styles.ts

@@ -1,31 +0,0 @@
-import styled from "@emotion/styled";
-import {
-  mediaTabletDown,
-  mediaTabletUp,
-} from "../../../../../../styles/common/mixins/breakpoints";
-import { Dot as DXDot } from "../../../../../common/Dot/dot";
-
-export const Summary = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4px;
-
-  .MuiTypography-text-body-small-400 {
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
-  }
-
-  ${mediaTabletUp} {
-    flex: none;
-    flex-direction: row;
-  }
-`;
-
-export const Dot = styled(DXDot)`
-  ${mediaTabletDown} {
-    display: none;
-  }
-`;

package/src/components/Index/components/Hero/components/Summaries/summaries.tsx

@@ -1,35 +0,0 @@
-import { Typography } from "@mui/material";
-import React, { Fragment, ReactNode } from "react";
-import {
-  TEXT_BODY_SMALL_400,
-  TEXT_BODY_SMALL_500,
-} from "../../../../../../theme/common/typography";
-import { Dot, Summary } from "./summaries.styles";
-
-export interface Summary {
-  count: string;
-  label: ReactNode;
-}
-
-export interface SummariesProps {
-  summaries?: Summary[];
-}
-
-export const Summaries = ({ summaries }: SummariesProps): JSX.Element => {
-  return (
-    <>
-      {summaries &&
-        summaries.map(({ count, label }, c) => (
-          <Fragment key={`${label}${c}`}>
-            {c !== 0 && <Dot />}
-            <Summary>
-              <Typography variant={TEXT_BODY_SMALL_500}>{count}</Typography>
-              <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
-                {label}
-              </Typography>
-            </Summary>
-          </Fragment>
-        ))}
-    </>
-  );
-};

package/src/components/Index/components/Hero/hero.styles.ts

@@ -1,55 +0,0 @@
-import styled from "@emotion/styled";
-import {
-  mediaDesktopSmallUp,
-  mediaTabletUp,
-} from "../../../../styles/common/mixins/breakpoints";
-
-interface Props {
-  buttonWidget: boolean;
-}
-
-export const HeroLayout = styled.div`
-  align-items: center;
-  display: grid;
-  gap: 16px;
-  grid-template-columns: 1fr;
-  padding: 0 16px;
-
-  ${mediaTabletUp} {
-    grid-template-columns: 1fr auto;
-    padding: 0;
-  }
-`;
-
-export const Widgets = styled.div`
-  align-items: center;
-  display: flex;
-  height: 60px;
-
-  ${mediaTabletUp} {
-    height: 40px;
-    justify-self: flex-start;
-  }
-
-  ${mediaDesktopSmallUp} {
-    grid-column: 2;
-    justify-self: flex-end;
-  }
-`;
-
-export const SummaryWidget = styled.div<Props>`
-  align-items: center;
-  border: 1px solid ${({ theme }) => theme.palette.smoke.main};
-  border-radius: 4px;
-  display: flex;
-  gap: 0 8px;
-  flex: 1;
-  height: inherit;
-  padding: 12px 16px;
-
-  ${mediaTabletUp} {
-    border-radius: ${({ buttonWidget }) =>
-      buttonWidget ? "4px 0 0 4px" : "4px"};
-    flex: none;
-  }
-`;

package/src/components/Index/components/Hero/hero.tsx

@@ -1,40 +0,0 @@
-import React, { ReactNode } from "react";
-import { HeroTitle, Title } from "../../../common/Title/title";
-import { ExportButton } from "./components/ExportButton/exportButton";
-import { HeroLayout, SummaryWidget, Widgets } from "./hero.styles";
-
-/**
- * ExploreView page hero component comprising title, summary counts, and export button.
- */
-
-export interface HeroProps {
-  SideBarButton?: ReactNode;
-  Summaries?: ReactNode;
-  title: HeroTitle;
-}
-
-export const Hero = ({
-  SideBarButton,
-  Summaries,
-  title,
-}: HeroProps): JSX.Element => {
-  return (
-    <>
-      {(title || SideBarButton || Summaries) && (
-        <HeroLayout>
-          <Title title={title} />
-          {SideBarButton}
-          {Summaries && (
-            <Widgets>
-              <SummaryWidget buttonWidget={true}>
-                {/* TODO +n link widget, and accompanying Dot separator */}
-                {Summaries}
-              </SummaryWidget>
-              <ExportButton />
-            </Widgets>
-          )}
-        </HeroLayout>
-      )}
-    </>
-  );
-};

package/src/components/Index/components/Hero/stories/hero.stories.tsx

@@ -1,22 +0,0 @@
-import { composeStories, Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import * as summaryStories from "../components/Summaries/stories/summaries.stories";
-import { Hero } from "../hero";
-
-const { Default: Summaries } = composeStories(summaryStories);
-
-const meta: Meta<typeof Hero> = {
-  component: Hero,
-  parameters: { layout: "fullscreen" },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    Summaries: <Summaries />,
-    title: "Data Explorer",
-  },
-};

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

@@ -1,35 +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.reduce(
-    (
-      acc: Tab[],
-      {
-        annotation,
-        label,
-        listView: { enableTab = true } = {},
-        route,
-        tabIcon: icon,
-        tabIconPosition: iconPosition,
-      }
-    ) => {
-      if (enableTab) {
-        acc.push({
-          annotation,
-          icon,
-          iconPosition,
-          label,
-          value: route,
-        });
-      }
-      return acc;
-    },
-    []
-  );
-}

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

@@ -1,23 +0,0 @@
-import Router from "next/router";
-import React, { useCallback, useMemo } from "react";
-import { useConfig } from "../../../../hooks/useConfig";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { Tabs as DXTabs, TabValue } from "../../../common/Tabs/tabs";
-import { getEntityListTabs } from "./common/utils";
-
-export const Tabs = (): JSX.Element | null => {
-  const { config } = useConfig();
-  const { exploreState } = useExploreState();
-  const { entities } = config;
-  const { tabValue } = exploreState;
-  const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
-
-  // Callback fired when selected tab value changes.
-  const onTabChange = useCallback(async (tabValue: TabValue): Promise<void> => {
-    await Router.push(`/${tabValue}`);
-  }, []);
-
-  if (tabs.length <= 1) return null;
-
-  return <DXTabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />;
-};

package/src/components/Index/stories/index.stories.tsx

@@ -1,23 +0,0 @@
-import { composeStories, Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import * as summaryStories from "../components/Hero/components/Summaries/stories/summaries.stories";
-import { Index } from "../index";
-
-const { Default: Summaries } = composeStories(summaryStories);
-
-const meta: Meta<typeof Index> = {
-  component: Index,
-  parameters: { layout: "fullscreen" },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    Summaries: <Summaries />,
-    Tabs: undefined,
-    title: "Explore Data",
-  },
-};

package/src/components/Table/components/Pagination/pagination.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Pagination } from "./pagination";
-
-const meta = {
-  argTypes: {
-    canNextPage: { control: "boolean" },
-    canPreviousPage: { control: "boolean" },
-    currentPage: { control: "number" },
-    onNextPage: { action: "nextPage" },
-    onPreviousPage: { action: "previousPage" },
-    totalPage: { control: "number" },
-  },
-  component: Pagination,
-  title: "Components/Table",
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const PaginationStory: Story = {
-  args: {
-    canNextPage: true,
-    canPreviousPage: false,
-    currentPage: 1,
-    onNextPage: () => {},
-    onPreviousPage: () => {},
-    totalPage: 25,
-  },
-};

package/src/components/Table/components/Pagination/pagination.styles.ts

@@ -1,16 +0,0 @@
-import styled from "@emotion/styled";
-import { TABLET } from "../../../../theme/common/breakpoints";
-
-export const Pagination = styled.div`
-  align-items: center;
-  background-color: ${({ theme }) => theme.palette.common.white};
-  color: ${({ theme }) => theme.palette.ink.main};
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  padding: 20px;
-
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
-    justify-content: flex-start;
-  }
-`;

package/src/components/Table/components/Pagination/pagination.tsx

@@ -1,50 +0,0 @@
-import { EastRounded, WestRounded } from "@mui/icons-material";
-import { Typography } from "@mui/material";
-import React from "react";
-import { TEST_IDS } from "../../../../tests/testIds";
-import { IconButton } from "../../../common/IconButton/iconButton";
-import { Stack } from "../../../common/Stack/stack";
-import { Pagination as TablePagination } from "./pagination.styles";
-
-export interface PaginationProps {
-  canNextPage?: boolean;
-  canPreviousPage?: boolean;
-  currentPage: number;
-  onNextPage: () => void;
-  onPreviousPage: () => void;
-  totalPage: number;
-}
-
-export const Pagination = ({
-  canNextPage = true,
-  canPreviousPage = true,
-  currentPage,
-  onNextPage,
-  onPreviousPage,
-  totalPage,
-}: PaginationProps): JSX.Element => {
-  return (
-    <TablePagination data-testid={TEST_IDS.TABLE_PAGINATION}>
-      <div data-testid={TEST_IDS.TABLE_PAGINATION_PAGE}>
-        <Typography variant="text-body-400">Page </Typography>
-        <Typography variant="text-body-500">
-          {currentPage} of {totalPage}
-        </Typography>
-      </div>
-      <Stack direction="row" gap={2}>
-        <IconButton
-          color="secondary"
-          disabled={!canPreviousPage}
-          Icon={WestRounded}
-          onClick={onPreviousPage}
-        />
-        <IconButton
-          color="secondary"
-          disabled={!canNextPage}
-          Icon={EastRounded}
-          onClick={onNextPage}
-        />
-      </Stack>
-    </TablePagination>
-  );
-};

package/src/components/Table/components/TableBody/hooks/virtualizer/constants.ts

@@ -1,3 +0,0 @@
-export const VIRTUALIZER_OPTIONS = {
-  overscan: 20,
-};

package/src/components/Table/components/TableBody/hooks/virtualizer/hook.ts

@@ -1,23 +0,0 @@
-import { Row, RowData } from "@tanstack/react-table";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
-import { useCallback } from "react";
-import { VIRTUALIZER_OPTIONS } from "./constants";
-import { UseVirtualizer } from "./types";
-
-/**
- * A hook to create and manage TanStack window virtualizer for table rows.
- * @param rows - Rows.
- * @returns An object containing the virtualizer instance, which manages the visible rows.
- */
-export function useVirtualizer<T extends RowData>(
-  rows: Row<T>[]
-): UseVirtualizer {
-  const estimateSize = useCallback(() => 100, []);
-  const count = rows.length;
-  const virtualizer = useWindowVirtualizer({
-    ...VIRTUALIZER_OPTIONS,
-    count,
-    estimateSize,
-  });
-  return { virtualizer };
-}

package/src/components/Table/components/TableBody/hooks/virtualizer/types.ts

@@ -1,5 +0,0 @@
-import { Virtualizer } from "@tanstack/react-virtual";
-
-export interface UseVirtualizer {
-  virtualizer: Virtualizer<Window, Element>;
-}

package/tests/entitiesView.test.tsx

@@ -1,32 +0,0 @@
-import { composeStories } from "@storybook/react";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import { VIEW_MODE } from "../src/components/Index/components/EntitiesView/hooks/UseEntitiesView/types";
-import * as stories from "../src/components/Index/components/EntitiesView/stories/entitiesView.stories";
-import { TEST_IDS } from "../src/tests/testIds";
-
-const { Default } = composeStories(stories);
-
-describe("EntitiesView", () => {
-  it("renders correctly", () => {
-    render(<Default />);
-    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
-    expect(viewEl).not.toBeNull();
-  });
-
-  it("does not render toggle buttons when disabled", () => {
-    render(<Default />);
-    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
-    const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
-    expect(buttonsEl.length).toEqual(0);
-  });
-
-  it("renders toggle buttons when enabled", () => {
-    render(
-      <Default viewMode={VIEW_MODE.TABLE} viewStatus={{ disabled: false }} />
-    );
-    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
-    const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
-    expect(buttonsEl.length).toEqual(2);
-  });
-});