@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/Index/table/hook.ts

@@ -1,252 +0,0 @@
-import {
-  ColumnDef,
-  ColumnSort,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  RowData,
-  RowSelectionState,
-  TableState,
-  Updater,
-  useReactTable,
-} from "@tanstack/react-table";
-import { useCallback, useEffect, useMemo } from "react";
-import { track } from "../../../common/analytics/analytics";
-import {
-  EVENT_NAME,
-  EVENT_PARAM,
-  SORT_DIRECTION,
-} from "../../../common/analytics/entities";
-import { useConfig } from "../../../hooks/useConfig";
-import { useExploreMode } from "../../../hooks/useExploreMode/useExploreMode";
-import { useExploreState } from "../../../hooks/useExploreState";
-import { ExploreActionKind } from "../../../providers/exploreState";
-import { DEFAULT_PAGINATION_STATE } from "../../../providers/exploreState/initializer/constants";
-import { arrIncludesSome } from "../../Table/columnDef/columnFilters/filterFn";
-import { COLUMN_DEF } from "../../Table/common/columnDef";
-import {
-  buildCategoryViews,
-  getFacetedUniqueValuesWithArrayValues,
-  getTableStatePagination,
-  isClientFilteringEnabled,
-  sortingFn,
-} from "../../Table/common/utils";
-import { getFacetedMinMaxValues } from "../../Table/featureOptions/facetedColumn/getFacetedMinMaxValues";
-import { TABLE_DOWNLOAD_OPTIONS } from "../../Table/featureOptions/tableDownload/constants";
-import { ROW_POSITION } from "../../Table/features/RowPosition/constants";
-import { ROW_PREVIEW } from "../../Table/features/RowPreview/constants";
-import { RowPreviewState } from "../../Table/features/RowPreview/entities";
-import { ROW_SELECTION_VALIDATION } from "../../Table/features/RowSelectionValidation/constants";
-import { TABLE_DOWNLOAD } from "../../Table/features/TableDownload/constants";
-import { buildBaseColumnDef } from "../../TableCreator/common/utils";
-import { useTableOptions } from "../../TableCreator/options/hook";
-import { createCell } from "./coreOptions/columns/cellFactory";
-import { UseTable, UseTableProps } from "./types";
-
-export const useTable = <T extends RowData>({
-  entityListType,
-}: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix complexity
-UseTableProps): UseTable<T> => {
-  const { entityConfig } = useConfig();
-  const exploreMode = useExploreMode();
-  const { exploreDispatch, exploreState } = useExploreState();
-  const tableOptions = useTableOptions<T>();
-  const {
-    entityPageState,
-    filterState,
-    listItems,
-    paginationState,
-    rowPreview,
-    tabValue,
-  } = exploreState;
-  const { getId: getRowId, list } = entityConfig;
-  const { columns: columnsConfig } = list;
-  const { columnVisibility, grouping, rowSelection, sorting } =
-    entityPageState[tabValue];
-  const { currentPage, pageSize, rows: pageCount } = paginationState;
-  const clientFiltering = isClientFilteringEnabled(exploreMode);
-  const pagination = useMemo(
-    () => getTableStatePagination(currentPage - 1, pageSize),
-    [currentPage, pageSize],
-  );
-
-  const columnDefs: ColumnDef<T>[] = useMemo(
-    () =>
-      columnsConfig.reduce(
-        (
-          acc,
-          {
-            /**
-             * Applies the custom `arrIncludesSome` filter function as the default for multi-value filtering.
-             * Although `ColumnFilter["value"]` is typed as `unknown`, in practice it's consistently an array (`unknown[]`) in entity lists.
-             * This custom filter function supports multi-select filtering, even when individual cell values are single strings.
-             * This override of TanStack's default `arrIncludesSome` resolves a limitation where the base implementation
-             * does not support matching an array of filter values against a single string cell value.
-             * For range filtering, specify TanStack's `inNumberRange` filter function on the column definition.
-             */
-            filterFn = "arrIncludesSome",
-            ...columnConfig
-          },
-        ) => {
-          acc.push({
-            ...buildBaseColumnDef<T>(columnConfig),
-            cell: createCell(columnConfig),
-            filterFn,
-            sortingFn,
-          });
-          return acc;
-        },
-        [
-          /* Initialize column definitions with the "row position" column */
-          COLUMN_DEF.ROW_POSITION,
-          /* Initialize column definitions with the "row selection" column */
-          COLUMN_DEF.ROW_SELECTION,
-        ] as ColumnDef<T>[],
-      ),
-    [columnsConfig],
-  );
-
-  const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
-    // TODO(cc) memoize `onSortingChange` with `useCallback`.
-    // TODO(cc) copy `onSortingChange` to ../options/sorting/hook.ts see src/components/Table/options/grouping/hook.ts for example.
-    exploreDispatch({
-      payload: typeof updater === "function" ? updater(sorting) : updater,
-      type: ExploreActionKind.UpdateSorting,
-    });
-    // Execute GTM tracking.
-    // TODO(cc) update tracking to handle sorting of multiple columns.
-    // TODO(cc) GTM tracking when `onSortingChange` is triggered only tracks the first column sorted, and takes the value from explore state which is not updated yet.
-    track(EVENT_NAME.ENTITY_TABLE_SORTED, {
-      [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
-      [EVENT_PARAM.COLUMN_NAME]: sorting?.[0]?.id, // TODO(cc) sorting should always be at least `[]` and never `undefined`.
-      [EVENT_PARAM.SORT_DIRECTION]: sorting?.[0]?.desc // TODO(cc) sorting should always be at least `[]` and never `undefined`.
-        ? SORT_DIRECTION.DESC
-        : SORT_DIRECTION.ASC,
-    });
-  };
-
-  const onRowPreviewChange = useCallback(
-    (updater: Updater<RowPreviewState>): void => {
-      exploreDispatch({
-        payload: typeof updater === "function" ? updater(rowPreview) : updater,
-        type: ExploreActionKind.UpdateRowPreview,
-      });
-    },
-    [exploreDispatch, rowPreview],
-  );
-
-  const onRowSelectionChange = useCallback(
-    (updater: Updater<RowSelectionState>): void => {
-      // TODO(cc) refactor `onRowSelectionChange` to /options/rowSelection/hook.ts see onGroupingChange.
-      exploreDispatch({
-        payload:
-          typeof updater === "function" ? updater(rowSelection) : updater,
-        type: ExploreActionKind.UpdateRowSelection,
-      });
-    },
-    [exploreDispatch, rowSelection],
-  );
-
-  const state: Partial<TableState> = {
-    columnVisibility,
-    grouping,
-    pagination,
-    rowPreview,
-    rowSelection,
-    sorting,
-  };
-
-  /**
-   * TODO: Update `ColumnConfig` to follow the `ColumnDef` API of TanStack Table.
-   * - Standardize column definitions to leverage the full power of TanStack Table's feature set and improve compatibility.
-   * TODO: Define `sorting` directly within `ListConfig` via the `tableOptions.initialState` property.
-   * - This will simplify the configuration structure and centralize table state definitions, reducing redundancy and improving clarity.
-   */
-  const table = useReactTable<T>({
-    _features: [
-      ROW_POSITION,
-      ROW_PREVIEW,
-      ROW_SELECTION_VALIDATION,
-      TABLE_DOWNLOAD,
-    ],
-    columns: columnDefs,
-    data: listItems || [],
-    enableColumnFilters: true, // client-side filtering.
-    enableFilters: true, // client-side filtering.
-    enableMultiSort: clientFiltering, // TODO(cc) move to sorting options; default to false and let the table options in config flag this value.
-    filterFns: { arrIncludesSome },
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedMinMaxValues: clientFiltering
-      ? getFacetedMinMaxValues()
-      : undefined,
-    getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
-    getFacetedUniqueValues: clientFiltering
-      ? getFacetedUniqueValuesWithArrayValues()
-      : undefined,
-    getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
-    getPaginationRowModel: getPaginationRowModel(),
-    getRowId,
-    getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
-    manualPagination: true,
-    manualSorting: !clientFiltering,
-    onRowPreviewChange,
-    onRowSelectionChange,
-    onSortingChange,
-    pageCount,
-    ...TABLE_DOWNLOAD_OPTIONS,
-    state,
-    ...tableOptions,
-  });
-
-  const { getAllColumns, getRowModel, getState } = table;
-
-  const allColumns = getAllColumns();
-  const { columnFilters } = getState();
-  const { rows } = getRowModel();
-
-  // Sets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
-  useEffect(() => {
-    if (clientFiltering) {
-      table.setColumnFilters(
-        filterState.map(({ categoryKey, value }) => ({
-          id: categoryKey,
-          value,
-        })),
-      );
-    }
-  }, [clientFiltering, filterState, table]);
-
-  // Process explore response - client-side filtering only.
-  useEffect(() => {
-    if (entityListType !== tabValue) return;
-    if (!listItems || listItems.length === 0) return;
-    if (clientFiltering) {
-      exploreDispatch({
-        payload: {
-          listItems,
-          loading: false,
-          paginationResponse: {
-            ...DEFAULT_PAGINATION_STATE,
-            pageSize: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
-            rows: rows.filter(({ getIsGrouped }) => !getIsGrouped()).length,
-          },
-          selectCategories: buildCategoryViews(allColumns, columnFilters),
-        },
-        type: ExploreActionKind.ProcessExploreResponse,
-      });
-    }
-  }, [
-    allColumns,
-    clientFiltering,
-    columnFilters,
-    entityListType,
-    exploreDispatch,
-    listItems,
-    rows,
-    tabValue,
-  ]);
-
-  return { table };
-};

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

@@ -1,9 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-
-export interface UseTable<T extends RowData> {
-  table: Table<T>;
-}
-
-export interface UseTableProps {
-  entityListType: string;
-}

package/src/components/Index/types.ts

@@ -1,10 +0,0 @@
-import { BaseComponentProps } from "components/types";
-import { EntityConfig } from "config/entities";
-import { CategoryFilter } from "../../components/Filter/components/Filters/filters";
-
-export interface IndexProps extends BaseComponentProps {
-  categoryFilters: CategoryFilter[];
-  entityListType: string;
-  entityName: EntityConfig["label"];
-  loading: boolean;
-}

package/src/components/Layout/components/AppLayout/appLayout.styles.ts

@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-
-export const AppLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  min-height: 100vh;
-`;

package/src/components/Layout/components/BackPage/backPageView.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
-import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
-import { Contacts } from "../../../Project/components/Contacts/contacts";
-import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
-import { Contributors } from "../../../Project/components/Contributors/contributors";
-import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
-import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
-import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
-import { Description } from "../../../Project/components/Description/description";
-import { DescriptionStory } from "../../../Project/components/Description/description.stories";
-import { Details } from "../../../Project/components/Details/details";
-import { DetailsStory } from "../../../Project/components/Details/details.stories";
-import { Publications } from "../../../Project/components/Publications/publications";
-import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
-import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
-import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
-import { BackPageView } from "./backPageView";
-
-const meta = {
-  argTypes: {
-    isDetailOverview: { control: "boolean" },
-    mainColumn: { table: { disable: true } },
-    sideColumn: { table: { disable: true } },
-    top: { table: { disable: true } },
-  },
-  component: BackPageView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Views/BackPage",
-} satisfies Meta<typeof BackPageView>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const BackPageViewStory: Story = {
-  args: {
-    isDetailOverview: true,
-    mainColumn: (
-      <>
-        <Description
-          projectDescription={
-            DescriptionStory.args?.projectDescription || "None"
-          }
-        />
-        <Contacts {...ContactsStory.args} />
-        <Publications {...PublicationsStory.args} />
-        <Contributors {...ContributorsStory.args} />
-        <CollaboratingOrganizations {...CollaboratingOrganizationsStory.args} />
-        <DataCurators {...DataCuratorsStory.args} />
-        {/*<Citation {...CitationStory.args} />*/}
-        <SupplementaryLinks {...SupplementaryLinksStory.args} />
-        <DataReleasePolicy />
-      </>
-    ),
-    sideColumn: (
-      <>
-        <Details {...DetailsStory.args} />
-      </>
-    ),
-    top: <></>,
-  },
-};

package/src/components/Layout/components/BackPage/backPageView.styles.ts

@@ -1,151 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-import { bpDownSm, bpUpSm } from "../../../../styles/common/mixins/breakpoints";
-import { Sections } from "../../../common/Sections/sections";
-
-export const BackPageView = styled.div`
-  display: grid;
-  flex: 1;
-  gap: 16px;
-  grid-template-columns: repeat(2, 1fr);
-  margin: 0 16px;
-  padding: 24px 0;
-
-  ${bpUpSm} {
-    grid-template-columns: repeat(12, 1fr);
-    margin: 0 auto;
-    max-width: min(calc(100% - 32px), 1232px);
-  }
-`;
-
-export const BackPageHero = styled.div`
-  display: contents;
-
-  > * {
-    grid-column: 1 / -1;
-  }
-`;
-
-export const BackPageTabs = styled.div`
-  grid-column: 1 / -1;
-
-  ${bpDownSm} {
-    margin-left: -16px;
-    margin-right: -16px;
-  }
-`;
-
-// Back page content (main and side column wrapper).
-export const BackPageContent = styled.div`
-  align-items: flex-start;
-  display: grid;
-  gap: 16px 0;
-  grid-column: 1 / -1;
-  grid-template-columns: 1fr;
-  margin-left: -16px;
-  margin-right: -16px;
-
-  ${bpUpSm} {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: inherit;
-    margin: 0;
-  }
-`;
-
-// EntityDetailView back page "overview" content (main and side column wrapper).
-// Typically used by back page "project" or "datasets" tab.
-// Used with DetailPageOverviewContentMainColumn and DetailPageOverviewContentSideColumn, the "sections"
-// appear to be contained within a combination of "fluid" and "gridded" paper elements.
-// These styles render:
-// - mobile - a gridded, flat paper environment, each section stacked with a 1px gap, and
-// - tablet - a main and side column arrangement, and within each column, a gridded, rounded paper environment, each section stacked with a 1px gap.
-export const DetailPageOverviewContent = styled(BackPageContent)`
-  background-color: ${PALETTE.SMOKE_MAIN};
-  gap: 1px;
-  padding: 1px 0;
-
-  ${bpUpSm} {
-    background-color: transparent;
-    padding: 0;
-  }
-`;
-
-// Back page content column.
-const BackPageContentColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px 0;
-`;
-
-const mainColumn = css`
-  grid-column: 1 / 9;
-`;
-
-const sideColumn = css`
-  grid-column: 9 / -1;
-`;
-
-// Single column.
-export const BackPageContentSingleColumn = styled(BackPageContentColumn)`
-  grid-column: 1 / -1;
-`;
-
-// Main column.
-export const BackPageContentMainColumn = styled(BackPageContentColumn)`
-  ${bpUpSm} {
-    ${mainColumn};
-  }
-`;
-
-// Side column.
-export const BackPageContentSideColumn = styled(BackPageContentColumn)`
-  ${bpUpSm} {
-    ${sideColumn};
-  }
-`;
-
-// EntityDetailView back page "overview" main column.
-// Typically used by back page "project" or "datasets" tab.
-export const DetailPageOverviewContentMainColumn = styled(Sections)`
-  display: contents;
-
-  // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
-  && > *:not(style) {
-    display: contents; // required to override nested GridPaper.
-  }
-
-  ${bpUpSm} {
-    align-self: flex-start;
-    display: grid;
-    ${mainColumn};
-
-    // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
-    && > *:not(style) {
-      display: grid; // required to restore nested GridPaper display property.
-    }
-  }
-`;
-
-// EntityDetailView back page "overview" side column.
-// Typically used by back page "project" or "datasets" tab.
-export const DetailPageOverviewContentSideColumn = styled(Sections)`
-  display: contents;
-
-  // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
-  && > *:not(style) {
-    display: contents; // required to override nested GridPaper.
-  }
-
-  ${bpUpSm} {
-    align-self: flex-start;
-    display: grid;
-    ${sideColumn};
-
-    // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
-    && > *:not(style) {
-      display: grid; // required to restore nested GridPaper display property.
-    }
-  }
-`;

package/src/components/Layout/components/BackPage/backPageView.tsx

@@ -1,50 +0,0 @@
-import { JSX, Fragment, ReactNode } from "react";
-import {
-  BackPageContent,
-  BackPageContentMainColumn,
-  BackPageContentSideColumn,
-  BackPageHero,
-  BackPageView as BackPageLayout,
-  BackPageTabs,
-  DetailPageOverviewContent,
-  DetailPageOverviewContentMainColumn,
-  DetailPageOverviewContentSideColumn,
-} from "./backPageView.styles";
-
-export interface BackPageViewProps {
-  isDetailOverview?: boolean;
-  mainColumn: ReactNode;
-  sideColumn?: ReactNode;
-  Tabs?: ReactNode;
-  top: ReactNode;
-}
-
-export const BackPageView = ({
-  isDetailOverview = false,
-  mainColumn,
-  sideColumn,
-  Tabs,
-  top,
-}: BackPageViewProps): JSX.Element => {
-  const Content = isDetailOverview
-    ? DetailPageOverviewContent
-    : BackPageContent;
-  const MainColumn = isDetailOverview
-    ? DetailPageOverviewContentMainColumn
-    : sideColumn
-      ? BackPageContentMainColumn
-      : Fragment;
-  const SideColumn = isDetailOverview
-    ? DetailPageOverviewContentSideColumn
-    : BackPageContentSideColumn;
-  return (
-    <BackPageLayout>
-      <BackPageHero>{top}</BackPageHero>
-      {Tabs && <BackPageTabs>{Tabs}</BackPageTabs>}
-      <Content>
-        <MainColumn>{mainColumn}</MainColumn>
-        {sideColumn && <SideColumn>{sideColumn}</SideColumn>}
-      </Content>
-    </BackPageLayout>
-  );
-};

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.ts

@@ -1,35 +0,0 @@
-import styled from "@emotion/styled";
-import { Stack } from "@mui/material";
-import { bpUpSm } from "../../../../../../styles/common/mixins/breakpoints";
-import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
-
-export const BackPageHeroHeadline = styled.div`
-  display: contents;
-
-  > * {
-    grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
-  }
-
-  ${bpUpSm} {
-    display: flex;
-    flex: 1;
-    gap: 88px;
-
-    > * {
-      grid-column: unset;
-    }
-  }
-`;
-
-export const HeroHeader = styled(Stack)`
-  flex: 1;
-`;
-
-export const CallToActionButton = styled(CTAButton)`
-  align-self: center;
-  justify-self: flex-start;
-
-  ${bpUpSm} {
-    justify-self: flex-end;
-  }
-`;

package/src/components/Layout/components/BackPage/components/BackPageHero/backPageHero.tsx

@@ -1,59 +0,0 @@
-import { JSX, Fragment, ReactNode } from "react";
-import {
-  Breadcrumb,
-  Breadcrumbs,
-} from "../../../../../common/Breadcrumbs/breadcrumbs";
-import { isBreadcrumbArray } from "../../../../../common/Breadcrumbs/typeGuard";
-import { CallToAction } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
-import { Title } from "../../../../../common/Title/title";
-import {
-  BackPageHeroHeadline,
-  CallToActionButton,
-  HeroHeader,
-} from "./backPageHero.styles";
-import { SubTitle } from "./components/SubTitle/subTitle";
-
-/**
- * Back page hero component comprising breadcrumbs, title, status and tabs.
- */
-
-export interface BackPageHeroProps {
-  actions?: ReactNode;
-  breadcrumbs?: Breadcrumb[] | ReactNode;
-  callToAction?: CallToAction;
-  children?: ReactNode;
-  subTitle?: ReactNode;
-  title?: ReactNode;
-}
-
-export const BackPageHero = ({
-  actions,
-  breadcrumbs,
-  callToAction,
-  children,
-  subTitle,
-  title,
-}: BackPageHeroProps): JSX.Element => {
-  const HeroHeadline =
-    actions || callToAction ? BackPageHeroHeadline : Fragment;
-  return (
-    <Fragment>
-      <HeroHeadline>
-        <HeroHeader gap={1}>
-          {breadcrumbs ? (
-            isBreadcrumbArray(breadcrumbs) ? (
-              <Breadcrumbs breadcrumbs={breadcrumbs} />
-            ) : (
-              breadcrumbs
-            )
-          ) : null}
-          <Title>{title}</Title>
-          <SubTitle subTitle={subTitle} />
-        </HeroHeader>
-        {actions}
-        {callToAction && <CallToActionButton callToAction={callToAction} />}
-      </HeroHeadline>
-      {children}
-    </Fragment>
-  );
-};

package/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.ts

@@ -1,14 +0,0 @@
-import styled from "@emotion/styled";
-import { bpUpSm } from "../../../../../../../../styles/common/mixins/breakpoints";
-
-export const BackPageHeroActions = styled.div`
-  align-items: center;
-  align-self: center;
-  display: flex;
-  gap: 16px;
-  justify-self: flex-start;
-
-  ${bpUpSm} {
-    justify-self: flex-end;
-  }
-`;

package/src/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.tsx

@@ -1,13 +0,0 @@
-import { JSX, ReactNode } from "react";
-import { BackPageHeroActions } from "./actions.styles";
-
-export interface ActionsProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const Actions = ({ children, className }: ActionsProps): JSX.Element => {
-  return (
-    <BackPageHeroActions className={className}>{children}</BackPageHeroActions>
-  );
-};