@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/components/TableCreator/common/utils.ts

@@ -1,37 +0,0 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { ColumnConfig } from "../../../config/entities";
-
-/**
- * Builds a base column definition.
- * The following properties are set by default:
- * - Grouping is not enabled `enableGrouping: false`.
- * - Sorting is enabled - `enableSorting: true`.
- * @param baseColumnConfig - Base column configuration.
- * @returns column definition.
- */
-export function buildBaseColumnDef<T>(
-  baseColumnConfig: ColumnConfig<T>,
-): ColumnDef<T> {
-  const {
-    columnPinned,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Destructure to avoid passing it to the columnDef.
-    componentConfig,
-    header,
-    id,
-    meta,
-    width,
-    ...columnDef
-  } = baseColumnConfig;
-  return {
-    ...columnDef,
-    accessorKey: id,
-    header,
-    id,
-    meta: {
-      columnPinned,
-      header: typeof header === "string" ? header : undefined,
-      width,
-      ...meta,
-    },
-  };
-}

package/src/components/TableCreator/options/columnTrackSizing/typeGuards.ts

@@ -1,12 +0,0 @@
-import { GridTrackMinMax, GridTrackSize } from "../../../../config/entities";
-
-/**
- * Type guard to determine if the given track size represents a size range (min-max).
- * @param width - Grid table track size.
- * @returns `true` if the given grid track size is a `GridTrackMinMax`, otherwise `false`.
- */
-export function isGridTrackMinMax(
-  width?: GridTrackSize,
-): width is GridTrackMinMax {
-  return (width as GridTrackMinMax)?.min !== undefined;
-}

package/src/components/TableCreator/options/columnTrackSizing/utils.ts

@@ -1,99 +0,0 @@
-import { Column, RowData } from "@tanstack/react-table";
-import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
-import { isGridTrackMinMax } from "./typeGuards";
-
-/**
- * Generates the grid track sizing for a table using a grid layout.
- * Creates a string value for the `grid-template-columns` CSS property based on the visible columns.
- * It ensures proper sizing for grouped, system, and non-system columns.
- * - Grouped columns are excluded from grid sizing as they flex across the table.
- * - System columns (e.g., "rowPosition" and "rowSelection") have pre-defined sizing.
- * - Non-system columns collectively fill the table's width. If their total fractional sizing is less than `1fr`, the first non-system column is assigned `1fr` to ensure the table is filled.
- * @param visibleColumns - Visible columns.
- * @returns string defining the CSS `grid-template-columns` value for the table.
- */
-export function getColumnTrackSizing<T extends RowData>(
-  visibleColumns: Column<T>[],
-): string {
-  // Precompute track sizing.
-  const trackSizing: string[] = [];
-
-  let columnCount = 0; // Non-system column count.
-  let firstNonSystemColumnIndex = -1;
-  let totalFractionalSize = 0;
-
-  for (const [i, column] of visibleColumns.entries()) {
-    if (column.getIsGrouped()) continue;
-
-    // Get the column's track size.
-    const columnTrackSize = getColumnTrackSize(column);
-    trackSizing.push(columnTrackSize);
-
-    // Extract the fractional value (if it exists), and accumulate the total.
-    const frSize = extractFractionalValue(columnTrackSize);
-    if (frSize) totalFractionalSize += frSize;
-
-    // Skip system columns; track the first non-system column index.
-    if (isSystemColumn(column)) continue;
-    if (firstNonSystemColumnIndex < 0) firstNonSystemColumnIndex = i;
-
-    columnCount++;
-  }
-
-  // Adjust track sizing for the first non-system column when:
-  // - the table is a single-column table, or
-  // - the total `fr` value is less than 1.
-  if (
-    firstNonSystemColumnIndex >= 0 &&
-    (columnCount === 1 || totalFractionalSize < 1)
-  ) {
-    trackSizing[firstNonSystemColumnIndex] = "1fr";
-  }
-
-  return trackSizing.join(" ");
-}
-
-/**
- * Determines the CSS grid track size for a given column.
- * Calculates the track size for a column based on its width configuration.
- * If the column's width is defined as a min-max range, it returns a `minmax()` CSS function.
- * Otherwise, it defaults to the column's width or `1fr` if no width is specified.
- * @param column - Column.
- * @returns A string representing the CSS track size for the column. This can be a `minmax()` function or a fixed/flexible value (e.g., `auto`, `1fr`, `200px`).
- */
-export function getColumnTrackSize<T extends RowData>(
-  column: Column<T>,
-): string {
-  const width = column.columnDef.meta?.width || "1fr";
-  if (isGridTrackMinMax(width)) {
-    return `minmax(${width.min}, ${width.max})`;
-  }
-  return width;
-}
-
-/**
- * Returns true if the column is a system column "rowPosition" or "rowSelection".
- * @param column - Column.
- * @returns true if the column is a system column.
- */
-function isSystemColumn<T extends RowData>(column: Column<T>): boolean {
-  return (
-    column.id === COLUMN_IDENTIFIER.ROW_POSITION ||
-    column.id === COLUMN_IDENTIFIER.ROW_SELECTION
-  );
-}
-
-/**
- * Extracts the fractional value (`fr`) from a CSS track size string.
- * This function parses a CSS track size (e.g., `1fr`, `minmax(168px, 0.5fr)`)
- * and extracts the numeric fractional value that appears before `fr`.
- * If the input does not contain a valid fractional value, the function returns `0`.
- * @param columnTrackSize - The CSS track size string e.g. `1fr`, `minmax(100px, 0.5fr)`, `200px`, or `auto`.
- * @returns The fractional value as a number, or `0` if no fractional value is found.
- */
-export function extractFractionalValue(columnTrackSize: string): number {
-  const match = columnTrackSize.match(/([\d.]+)fr/);
-  if (!match) return 0;
-  const value = parseFloat(match[1]);
-  return Number.isNaN(value) ? 0 : value;
-}

package/src/components/TableCreator/options/expanded/constants.ts

@@ -1,14 +0,0 @@
-import {
-  ExpandedOptions,
-  getExpandedRowModel,
-  RowData,
-} from "@tanstack/react-table";
-
-export const EXPANDED_OPTIONS: Pick<
-  ExpandedOptions<RowData>,
-  "autoResetExpanded" | "enableExpanding" | "getExpandedRowModel"
-> = {
-  autoResetExpanded: false,
-  enableExpanding: false,
-  getExpandedRowModel: getExpandedRowModel(),
-};

package/src/components/TableCreator/options/expanded/hook.ts

@@ -1,6 +0,0 @@
-import { ExpandedOptions, RowData } from "@tanstack/react-table";
-import { EXPANDED_OPTIONS } from "./constants";
-
-export function useExpandedOptions<T extends RowData>(): ExpandedOptions<T> {
-  return { ...EXPANDED_OPTIONS };
-}

package/src/components/TableCreator/options/grouping/constants.ts

@@ -1,6 +0,0 @@
-import { getGroupedRowModel, GroupingOptions } from "@tanstack/react-table";
-
-export const GROUPING_OPTIONS: GroupingOptions = {
-  enableGrouping: false,
-  getGroupedRowModel: getGroupedRowModel(),
-};

package/src/components/TableCreator/options/grouping/hook.ts

@@ -1,17 +0,0 @@
-import { GroupingOptions, GroupingState, Updater } from "@tanstack/react-table";
-import { useCallback } from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { updateGrouping } from "../../../../providers/exploreState/actions/updateGrouping/dispatch";
-import { GROUPING_OPTIONS } from "./constants";
-
-export function useGroupingOptions(): GroupingOptions {
-  const { exploreDispatch } = useExploreState();
-
-  const onGroupingChange = useCallback(
-    (updaterOrValue: Updater<GroupingState>): void =>
-      exploreDispatch(updateGrouping({ updaterOrValue })),
-    [exploreDispatch],
-  );
-
-  return { ...GROUPING_OPTIONS, onGroupingChange };
-}

package/src/components/TableCreator/options/hook.ts

@@ -1,25 +0,0 @@
-import { RowData, TableOptions } from "@tanstack/react-table";
-import { useConfig } from "../../../hooks/useConfig";
-import { useExpandedOptions } from "./expanded/hook";
-import { useGroupingOptions } from "./grouping/hook";
-import { useInitialState } from "./initialState/hook";
-import { useSortingOptions } from "./sorting/hook";
-import { useVisibilityOptions } from "./visibility/hook";
-
-export function useTableOptions<T extends RowData>(): Partial<TableOptions<T>> {
-  const { entityConfig } = useConfig();
-  const tableOptions = entityConfig.list.tableOptions;
-  const expandedOptions = useExpandedOptions<T>();
-  const groupingOptions = useGroupingOptions();
-  const sortingOptions = useSortingOptions<T>();
-  const visibilityOptions = useVisibilityOptions();
-  const initialState = useInitialState<T>(tableOptions);
-  return {
-    ...expandedOptions,
-    ...groupingOptions,
-    ...sortingOptions, // TODO(cc) merge of all sorting options.
-    ...visibilityOptions,
-    ...tableOptions,
-    initialState,
-  };
-}

package/src/components/TableCreator/options/initialState/columnVisibility.ts

@@ -1,22 +0,0 @@
-import { RowData, TableOptions, VisibilityState } from "@tanstack/react-table";
-import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
-
-/**
- * Returns initial column visibility state.
- * @param tableOptions - Table options.
- * @returns column visibility state.
- */
-export function getInitialColumnVisibilityState<T extends RowData>(
-  tableOptions?:
-    | Partial<TableOptions<T>>
-    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>,
-): VisibilityState {
-  const { initialState } = tableOptions || {};
-  const enableRowPosition = Boolean(tableOptions?.enableRowPosition);
-  const enableRowSelection = Boolean(tableOptions?.enableRowSelection);
-  return {
-    [COLUMN_IDENTIFIER.ROW_POSITION]: enableRowPosition,
-    [COLUMN_IDENTIFIER.ROW_SELECTION]: enableRowSelection,
-    ...initialState?.columnVisibility,
-  };
-}

package/src/components/TableCreator/options/initialState/hook.ts

@@ -1,24 +0,0 @@
-import {
-  InitialTableState,
-  RowData,
-  TableOptions,
-} from "@tanstack/react-table";
-import { useMemo } from "react";
-import { getInitialColumnVisibilityState } from "./columnVisibility";
-
-export function useInitialState<T extends RowData>(
-  tableOptions?:
-    | Partial<TableOptions<T>>
-    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>,
-): InitialTableState {
-  const { initialState } = tableOptions || {};
-  const columnVisibility = getInitialColumnVisibilityState(tableOptions);
-
-  return useMemo(
-    () => ({
-      ...initialState,
-      columnVisibility,
-    }),
-    [initialState, columnVisibility],
-  );
-}

package/src/components/TableCreator/options/rowSelection/constants.ts

@@ -1,10 +0,0 @@
-import { RowData, RowSelectionOptions } from "@tanstack/react-table";
-
-export const ROW_SELECTION_OPTIONS: Pick<
-  RowSelectionOptions<RowData>,
-  "enableRowSelection" | "enableSubRowSelection" | "enableMultiRowSelection"
-> = {
-  enableMultiRowSelection: false,
-  enableRowSelection: false,
-  enableSubRowSelection: false,
-};

package/src/components/TableCreator/options/rowSelection/hook.ts

@@ -1,8 +0,0 @@
-import { RowData, RowSelectionOptions } from "@tanstack/react-table";
-import { ROW_SELECTION_OPTIONS } from "./constants";
-
-export function useRowSelectionOptions<
-  T extends RowData,
->(): RowSelectionOptions<T> {
-  return { ...(ROW_SELECTION_OPTIONS as RowSelectionOptions<T>) };
-}

package/src/components/TableCreator/options/sorting/constants.ts

@@ -1,10 +0,0 @@
-import { RowData, SortingOptions } from "@tanstack/react-table";
-
-export const SORTING_OPTIONS: Pick<
-  SortingOptions<RowData>,
-  "enableSorting" | "enableSortingInteraction" | "enableSortingRemoval"
-> = {
-  enableSorting: true,
-  enableSortingInteraction: true,
-  enableSortingRemoval: false, // false i.e. toggling the sorting on a column will not remove sorting on the column.
-};

package/src/components/TableCreator/options/sorting/hook.ts

@@ -1,6 +0,0 @@
-import { RowData, SortingOptions } from "@tanstack/react-table";
-import { SORTING_OPTIONS } from "./constants";
-
-export function useSortingOptions<T extends RowData>(): SortingOptions<T> {
-  return { ...SORTING_OPTIONS };
-}

package/src/components/TableCreator/options/visibility/constants.ts

@@ -1,5 +0,0 @@
-import { VisibilityOptions } from "@tanstack/react-table";
-
-export const VISIBILITY_OPTIONS: VisibilityOptions = {
-  enableHiding: true,
-};

package/src/components/TableCreator/options/visibility/hook.ts

@@ -1,22 +0,0 @@
-import {
-  Updater,
-  VisibilityOptions,
-  VisibilityState,
-} from "@tanstack/react-table";
-import { useCallback } from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { updateVisibility } from "../../../../providers/exploreState/actions/updateVisibility/dispatch";
-import { VISIBILITY_OPTIONS } from "./constants";
-
-export function useVisibilityOptions(): VisibilityOptions {
-  const { exploreDispatch } = useExploreState();
-
-  const onColumnVisibilityChange = useCallback(
-    (updaterOrValue: Updater<VisibilityState>): void => {
-      exploreDispatch(updateVisibility({ updaterOrValue }));
-    },
-    [exploreDispatch],
-  );
-
-  return { ...VISIBILITY_OPTIONS, onColumnVisibilityChange };
-}

package/src/components/TableCreator/tableCreator.tsx

@@ -1,18 +0,0 @@
-import { RowData, Table as TanStackTable } from "@tanstack/react-table";
-import { JSX } from "react";
-import { ListViewConfig } from "../../config/entities";
-import { Table } from "../Table/table";
-
-export interface TableCreatorProps<T> {
-  listView?: ListViewConfig;
-  loading: boolean;
-  table: TanStackTable<T>;
-}
-
-export const TableCreator = <T extends RowData>({
-  listView,
-  loading,
-  table,
-}: TableCreatorProps<T>): JSX.Element => {
-  return <Table listView={listView} loading={loading} table={table} />;
-};

package/src/components/TempError/components/errorBox.tsx

@@ -1,15 +0,0 @@
-import { JSX } from "react";
-
-interface ErrorBoxProps {
-  message: string;
-  title: string;
-}
-
-export const ErrorBox = ({ message, title }: ErrorBoxProps): JSX.Element => {
-  return (
-    <div>
-      <p>{title}</p>
-      <div>{message}</div>
-    </div>
-  );
-};

package/src/components/TempError/index.ts

@@ -1 +0,0 @@
-export { TempError } from "./tempError";

package/src/components/TempError/tempError.tsx

@@ -1,26 +0,0 @@
-import { HTTPError } from "ky";
-import { JSX } from "react";
-import { ErrorBox } from "./components/errorBox";
-
-interface TempErrorProps {
-  error: Error | HTTPError;
-}
-
-export const TempError = ({ error }: TempErrorProps): JSX.Element => {
-  const { code, request } =
-    error instanceof HTTPError
-      ? {
-          ...error,
-          code: error.response.status,
-          request: error.response.url,
-        }
-      : { ...error, code: null, request: null };
-
-  return (
-    <div>
-      {code && <ErrorBox title="Error Code" message={`${code}`} />}
-      {request && <ErrorBox title="Request URL" message={request} />}
-      <ErrorBox title="Error Message" message={error.message} />
-    </div>
-  );
-};

package/src/components/common/Accordion/accordion.stories.tsx

@@ -1,36 +0,0 @@
-import { Box } from "@mui/material";
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import { Accordion } from "./accordion";
-
-const meta = {
-  component: Accordion,
-  title: "Components/Common/Accordion",
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof Accordion>;
-
-export const AccordionStory: Story = {
-  args: {
-    children:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
-    title: "CSER Phase II Harmonized Measures",
-  },
-};
-
-export const AccordionsStory: Story = {
-  render: () => (
-    <Box bgcolor="white">
-      <Accordion title={AccordionStory.args?.title || ""}>
-        {AccordionStory.args?.children || ""}
-      </Accordion>
-      <Accordion title={"Information about the CSER1 Consortium"}>
-        {AccordionStory.args?.children || ""}
-      </Accordion>
-      <Accordion title={"Genetic and genomic online CME courses"}>
-        {AccordionStory.args?.children || ""}
-      </Accordion>
-    </Box>
-  ),
-};

package/src/components/common/Accordion/accordion.tsx

@@ -1,43 +0,0 @@
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion as MAccordion,
-  AccordionProps as MAccordionProps,
-  Typography,
-} from "@mui/material";
-import { JSX, ReactNode, useState } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
-import { AddIcon } from "../CustomIcon/components/AddIcon/addIcon";
-import { RemoveIcon } from "../CustomIcon/components/RemoveIcon/removeIcon";
-
-export interface AccordionProps extends MAccordionProps {
-  collapseIcon?: ReactNode;
-  expandIcon?: ReactNode;
-  title: string;
-}
-
-export const Accordion = ({
-  children,
-  collapseIcon = <RemoveIcon color="primary" fontSize="medium" />,
-  expanded,
-  expandIcon = <AddIcon color="primary" fontSize="medium" />,
-  title,
-  ...props /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */
-}: AccordionProps): JSX.Element => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(expanded || false);
-
-  const onToggleExpanded = (): void => {
-    setIsExpanded((expanded) => !expanded);
-  };
-
-  return (
-    <MAccordion expanded={isExpanded} onChange={onToggleExpanded} {...props}>
-      <AccordionSummary expandIcon={isExpanded ? collapseIcon : expandIcon}>
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
-          {title}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails>{children}</AccordionDetails>
-    </MAccordion>
-  );
-};

package/src/components/common/Alert/alert.styles.ts

@@ -1,22 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { Alert } from "@mui/material";
-import { FONT } from "../../../styles/common/constants/font";
-import { SIZE } from "../../../styles/common/constants/size";
-
-export const StyledAlert = styled(Alert)`
-  ${(props) =>
-    props.size === SIZE.LARGE &&
-    css`
-      padding: 20px;
-      .MuiAlert-icon {
-        padding: 2px 0;
-      }
-      .MuiAlert-message {
-        font: ${FONT.BODY_400_2_LINES};
-        .MuiAlertTitle-root {
-          font: ${FONT.BODY_LARGE_500};
-        }
-      }
-    `}
-`;

package/src/components/common/Alert/alert.tsx

@@ -1,18 +0,0 @@
-import { AlertProps } from "@mui/material";
-import { forwardRef, JSX } from "react";
-import { BaseComponentProps } from "../../types";
-import { StyledAlert } from "./alert.styles";
-
-export const Alert = forwardRef<
-  HTMLDivElement,
-  AlertProps & BaseComponentProps
->(function Alert(
-  { children, className, ...props }: AlertProps & BaseComponentProps,
-  ref,
-): JSX.Element {
-  return (
-    <StyledAlert className={className} ref={ref} {...props}>
-      {children}
-    </StyledAlert>
-  );
-});

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

@@ -1,29 +0,0 @@
-import { AlertProps } from "@mui/material";
-import { COLOR, SEVERITY, VARIANT } from "../../../styles/common/mui/alert";
-
-export const ALERT_PROPS: Record<string, Partial<AlertProps>> = {
-  FILLED_INK: {
-    color: COLOR.INK,
-    variant: VARIANT.FILLED,
-  },
-  FILLED_PRIMARY: {
-    color: COLOR.PRIMARY,
-    variant: VARIANT.FILLED,
-  },
-  FILLED_SMOKE: {
-    color: COLOR.SMOKE,
-    variant: VARIANT.FILLED,
-  },
-  STANDARD_ERROR: {
-    severity: SEVERITY.ERROR,
-  },
-  STANDARD_INFO: {
-    severity: SEVERITY.INFO,
-  },
-  STANDARD_SUCCESS: {
-    severity: SEVERITY.SUCCESS,
-  },
-  STANDARD_WARNING: {
-    severity: SEVERITY.WARNING,
-  },
-};

package/src/components/common/Alert/hooks/useTransition/types.ts

@@ -1,5 +0,0 @@
-export interface UseTransition {
-  isIn: boolean;
-  onEnter: () => void;
-  onExit: () => void;
-}

package/src/components/common/Alert/hooks/useTransition/useTransition.ts

@@ -1,25 +0,0 @@
-import { useCallback, useState } from "react";
-import { UseTransition } from "./types";
-
-/**
- * Hook to manage transition state for alert component wrapped in a transition component.
- * @param initialState - Initial state of the transition.
- * @returns transition state and handlers.
- */
-export const useTransition = (initialState?: boolean): UseTransition => {
-  const [isIn, setIsIn] = useState<boolean>(initialState || false);
-
-  const onEnter = useCallback((): void => {
-    setIsIn(true);
-  }, []);
-
-  const onExit = useCallback((): void => {
-    setIsIn(false);
-  }, []);
-
-  return {
-    isIn,
-    onEnter,
-    onExit,
-  };
-};

package/src/components/common/AnchorLink/anchorLink.styles.ts

@@ -1,15 +0,0 @@
-import styled from "@emotion/styled";
-import Link from "next/link";
-import { PALETTE } from "../../../styles/common/constants/palette";
-
-export const StyledNextLink = styled(Link)`
-  color: ${PALETTE.INK_LIGHT};
-  margin-left: 4px;
-  opacity: 0;
-  position: absolute;
-  transition: opacity 0.2s ease-in-out;
-
-  svg {
-    vertical-align: middle;
-  }
-`;

package/src/components/common/AnchorLink/anchorLink.tsx

@@ -1,35 +0,0 @@
-import { LinkRounded } from "@mui/icons-material";
-import { useRouter } from "next/router";
-import { JSX, MouseEvent } from "react";
-import { StyledNextLink } from "./anchorLink.styles";
-
-/**
- * An anchor link component that provides deep linking functionality.
- * @important The parent element must have `position: relative` CSS property
- * to ensure proper positioning of the anchor link icon, and hover pseudo-class
- * to change opacity of the icon.
- */
-
-interface AnchorLinkProps {
-  anchorLink: string;
-  className?: string;
-  onClick?: (e: MouseEvent) => void;
-}
-
-export const AnchorLink = ({
-  anchorLink,
-  className,
-  onClick,
-}: AnchorLinkProps): JSX.Element => {
-  const { query } = useRouter();
-  return (
-    <StyledNextLink
-      aria-label={anchorLink}
-      className={className}
-      href={{ hash: anchorLink, query }}
-      onClick={onClick}
-    >
-      <LinkRounded fontSize="xsmall" />
-    </StyledNextLink>
-  );
-};