@databiosphere/findable-ui 0.0.0

package/src/components/Table/table.tsx

@@ -0,0 +1,321 @@
+import { TableContainer } from "@mui/material";
+import {
+  ColumnDef,
+  ColumnSort,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  InitialTableState,
+  TableState,
+  Updater,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import React, { useEffect } from "react";
+import { track } from "../../common/analytics/analytics";
+import {
+  EVENT_NAME,
+  EVENT_PARAM,
+  PAGINATION_DIRECTION,
+  SORT_DIRECTION,
+} from "../../common/analytics/entities";
+import { Pagination } from "../../common/entities";
+import { ListViewConfig } from "../../config/entities";
+import {
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "../../hooks/useBreakpointHelper";
+import { useExploreMode } from "../../hooks/useExploreMode";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useScroll } from "../../hooks/useScroll";
+import { ENTITY_VIEW, ExploreActionKind } from "../../providers/exploreState";
+import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/constants";
+import { TABLET } from "../../theme/common/breakpoints";
+import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { NoResults } from "../NoResults/noResults";
+import { ROW_DIRECTION } from "./common/entities";
+import {
+  buildCategoryViews,
+  getFacetedUniqueValuesWithArrayValues,
+  getGridTemplateColumns,
+  isClientFilteringEnabled,
+} from "./common/utils";
+import { Pagination as DXPagination } from "./components/Pagination/pagination";
+import { TableBody } from "./components/TableBody/tableBody";
+import { TableHead } from "./components/TableHead/tableHead";
+import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { GridTable } from "./table.styles";
+
+export interface TableProps<T extends object> {
+  columns: ColumnDef<T>[];
+  count?: number;
+  initialState: InitialTableState;
+  items: T[];
+  listView?: ListViewConfig;
+  loading?: boolean;
+  pages?: number;
+  pageSize: number;
+  pagination?: Pagination;
+  total?: number;
+}
+
+/**
+ * This table can be Controlled or Uncontrolled based on the set of props passed to it.
+ * Controlled table will receive the navigation functions, and it will be used for dynamic loads.
+ * Uncontrolled table will take advantage of React Table's state and will be used for static loads.
+ * @param tableProps - Set of props required for displaying the table.
+ * @param tableProps.columns - Set of columns to display.
+ * @param tableProps.initialState - Initial table state.
+ * @param tableProps.items - Row data to display.
+ * @param tableProps.listView - List view configuration.
+ * @param tableProps.total - Total number of rows in the result set.
+ * @returns Configured table element for display.
+ */
+export const TableComponent = <T extends object>({
+  columns,
+  initialState,
+  items,
+  listView,
+  total,
+}: // eslint-disable-next-line sonarjs/cognitive-complexity -- TODO fix component length / complexity
+TableProps<T>): JSX.Element => {
+  const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+  const exploreMode = useExploreMode();
+  const { exploreDispatch, exploreState } = useExploreState();
+  const {
+    entityPageState,
+    filterState,
+    isRelatedView,
+    listItems,
+    loading,
+    paginationState,
+    tabValue,
+  } = exploreState;
+  const { columnsVisibility, sorting } = entityPageState[tabValue];
+  const { currentPage, pages, pageSize } = paginationState;
+  const { disablePagination = false } = listView || {};
+  const clientFiltering = isClientFilteringEnabled(exploreMode);
+  const rowDirection = tabletDown
+    ? ROW_DIRECTION.VERTICAL
+    : ROW_DIRECTION.DEFAULT;
+
+  const onSortingChange = (updater: Updater<ColumnSort[]>): void => {
+    exploreDispatch({
+      payload: typeof updater === "function" ? updater(sorting) : updater,
+      type: ExploreActionKind.UpdateSorting,
+    });
+    // Execute GTM tracking.
+    track(EVENT_NAME.ENTITY_TABLE_SORTED, {
+      [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+      [EVENT_PARAM.COLUMN_NAME]: sorting[0].id,
+      [EVENT_PARAM.SORT_DIRECTION]: sorting[0].desc
+        ? SORT_DIRECTION.DESC
+        : SORT_DIRECTION.ASC,
+    });
+  };
+
+  const onColumnVisibilityChange = (
+    updater: Updater<VisibilityState>
+  ): void => {
+    exploreDispatch({
+      payload:
+        typeof updater === "function" ? updater(columnsVisibility) : updater,
+      type: ExploreActionKind.UpdateColumnVisibility,
+    });
+  };
+
+  const state: Partial<TableState> = {
+    columnVisibility: columnsVisibility,
+    pagination: {
+      pageIndex: 0,
+      pageSize: disablePagination ? Number.MAX_SAFE_INTEGER : pageSize,
+    },
+    sorting,
+  };
+  const tableInstance = useReactTable({
+    columns,
+    data: items,
+    enableColumnFilters: true, // client-side filtering.
+    enableFilters: true, // client-side filtering.
+    enableMultiSort: false,
+    enableSorting: true, // client-side filtering.
+    enableSortingRemoval: false, // client-side filtering.
+    getCoreRowModel: getCoreRowModel(),
+    getFacetedRowModel: clientFiltering ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: clientFiltering
+      ? getFacetedUniqueValuesWithArrayValues()
+      : undefined,
+    getFilteredRowModel: clientFiltering ? getFilteredRowModel() : undefined,
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
+    initialState,
+    manualPagination: clientFiltering,
+    manualSorting: !clientFiltering,
+    onColumnVisibilityChange,
+    onSortingChange,
+    pageCount: total,
+    state,
+  });
+  const {
+    getAllColumns,
+    getRowModel,
+    getState,
+    getVisibleFlatColumns,
+    nextPage: tableNextPage,
+    previousPage: tablePreviousPage,
+  } = tableInstance;
+  const allColumns = getAllColumns();
+  const { columnFilters } = getState();
+  const { rows: results } = getRowModel();
+  const noResults = !loading && (!results || results.length === 0);
+  const scrollTop = useScroll();
+  const visibleColumns = getVisibleFlatColumns();
+  const gridTemplateColumns = getGridTemplateColumns(visibleColumns);
+
+  const handleTableNextPage = (): void => {
+    let nextPage = tableNextPage;
+    if (!clientFiltering) {
+      nextPage = (): void => {
+        exploreDispatch({
+          payload: "next",
+          type: ExploreActionKind.PaginateTable,
+        });
+      };
+      // Execute GTM tracking.
+      track(EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+        [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+        [EVENT_PARAM.PAGINATION_DIRECTION]: PAGINATION_DIRECTION.NEXT,
+      });
+    }
+    // const nextPage = pagination?.nextPage ?? tableNextPage;
+    nextPage();
+    scrollTop();
+  };
+
+  const handleTablePreviousPage = (): void => {
+    let previousPage = tablePreviousPage;
+    if (!clientFiltering) {
+      previousPage = (): void => {
+        exploreDispatch({
+          payload: "prev",
+          type: ExploreActionKind.PaginateTable,
+        });
+      };
+      track(EVENT_NAME.ENTITY_TABLE_PAGINATED, {
+        [EVENT_PARAM.ENTITY_NAME]: exploreState.tabValue,
+        [EVENT_PARAM.PAGINATION_DIRECTION]: PAGINATION_DIRECTION.PREV,
+      });
+    }
+    previousPage();
+    scrollTop();
+  };
+
+  // Sets or resets react table column filters `columnFilters` state - for client-side filtering only - with update of filterState.
+  // - `columnFilters` state is "cleared" for related view, and
+  // - `columnFilters` state is "set" for all other views.
+  useEffect(() => {
+    if (clientFiltering) {
+      if (isRelatedView) {
+        tableInstance.resetColumnFilters();
+      } else {
+        tableInstance.setColumnFilters(
+          filterState.map(({ categoryKey, value }) => ({
+            id: categoryKey,
+            value,
+          }))
+        );
+      }
+    }
+  }, [clientFiltering, filterState, isRelatedView, tableInstance]);
+
+  // Process explore response - client-side filtering only.
+  useEffect(() => {
+    if (isRelatedView) return;
+    if (!listItems || listItems.length === 0) return;
+    if (clientFiltering) {
+      exploreDispatch({
+        payload: {
+          listItems,
+          loading: false,
+          paginationResponse: {
+            ...DEFAULT_PAGINATION_STATE,
+            pageSize: results.length,
+            rows: results.length,
+          },
+          selectCategories: buildCategoryViews(allColumns, columnFilters),
+        },
+        type: ExploreActionKind.ProcessExploreResponse,
+      });
+    }
+  }, [
+    allColumns,
+    clientFiltering,
+    columnFilters,
+    exploreDispatch,
+    isRelatedView,
+    listItems,
+    results,
+  ]);
+
+  // Unmount - reset entity view to "exact".
+  useEffect(() => {
+    return () => {
+      exploreDispatch({
+        payload: ENTITY_VIEW.EXACT,
+        type: ExploreActionKind.ToggleEntityView,
+      });
+    };
+  }, [exploreDispatch]);
+
+  function canNextPage(): boolean {
+    return currentPage < pages;
+  }
+
+  function canPreviousPage(): boolean {
+    return currentPage > 1;
+  }
+
+  return noResults ? (
+    <NoResults Paper={FluidPaper} title={"No Results found"} />
+  ) : (
+    <FluidPaper>
+      <GridPaper>
+        <TableToolbar
+          listView={listView}
+          rowDirection={rowDirection}
+          tableInstance={tableInstance}
+        />
+        <TableContainer>
+          <GridTable
+            collapsable={true}
+            gridTemplateColumns={gridTemplateColumns}
+          >
+            <TableHead
+              rowDirection={rowDirection}
+              tableInstance={tableInstance}
+            />
+            <TableBody
+              rowDirection={rowDirection}
+              tableInstance={tableInstance}
+            />
+          </GridTable>
+        </TableContainer>
+        {!disablePagination && (
+          <DXPagination
+            canNextPage={canNextPage()}
+            canPreviousPage={canPreviousPage()}
+            currentPage={currentPage}
+            onNextPage={handleTableNextPage}
+            onPreviousPage={handleTablePreviousPage}
+            totalPage={pages ?? 0}
+          />
+        )}
+      </GridPaper>
+    </FluidPaper>
+  );
+};
+
+// TODO(Dave) review whether memo is necessary - flash between tabs / loading state.
+export const Table = React.memo(TableComponent) as typeof TableComponent;

package/src/components/TableCreator/tableCreator.tsx

@@ -0,0 +1,91 @@
+import { CellContext, ColumnDef, ColumnSort } from "@tanstack/react-table";
+import React, { useMemo } from "react";
+import { Pagination } from "../../common/entities";
+import { ColumnConfig, ListViewConfig } from "../../config/entities";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
+import { Loading } from "../Loading/loading";
+import {
+  arrIncludesSome,
+  getInitialState,
+  sortingFn,
+} from "../Table/common/utils";
+import { Table } from "../Table/table";
+
+export interface TableCreatorProps<T> {
+  columns: ColumnConfig<T>[];
+  defaultSort: ColumnSort | undefined;
+  items: T[];
+  listView?: ListViewConfig;
+  loading?: boolean;
+  pageCount?: number;
+  pages: number;
+  pageSize: number;
+  pagination?: Pagination;
+  total?: number;
+}
+
+const createCell = <T extends object>(config: ColumnConfig<T>) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We can't determine the cell type
+  function CellCreator({ row }: CellContext<T, any>): JSX.Element {
+    return (
+      <ComponentCreator
+        components={[config.componentConfig]}
+        response={row.original}
+      />
+    );
+  };
+
+export const TableCreator = <T extends object>({
+  columns,
+  defaultSort,
+  items,
+  listView,
+  loading,
+  pageCount,
+  pages,
+  pageSize,
+  pagination,
+  total,
+}: TableCreatorProps<T>): JSX.Element => {
+  const columnDefs: ColumnDef<T>[] = useMemo(
+    () =>
+      columns.map(({ disableHiding, disableSorting, ...columnConfig }) => ({
+        accessorKey: columnConfig.id,
+        cell: createCell(columnConfig),
+        enableHiding: !disableHiding,
+        enableSorting: !disableSorting,
+        filterFn: arrIncludesSome,
+        header: columnConfig.header,
+        id: columnConfig.id,
+        meta: {
+          columnPinned: columnConfig.columnPinned,
+          header: columnConfig.header,
+          width: columnConfig.width,
+        },
+        sortingFn: sortingFn,
+      })),
+    [columns]
+  );
+  const initialState = getInitialState(columns, defaultSort);
+  return (
+    <div>
+      <Loading
+        loading={loading || false}
+        panelStyle={PAPER_PANEL_STYLE.FLUID}
+      />
+      <Table<T>
+        columns={columnDefs}
+        count={pageCount}
+        initialState={initialState}
+        items={items}
+        listView={listView}
+        loading={loading}
+        pages={pages}
+        pageSize={pageSize}
+        pagination={pagination}
+        total={total}
+      />
+    </div>
+  );
+};

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

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

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

package/src/components/TempError/tempError.tsx

@@ -0,0 +1,25 @@
+import { AxiosError, isAxiosError } from "axios";
+import React from "react";
+import { ErrorBox } from "./components/errorBox";
+
+interface TempErrorProps {
+  error: Error | AxiosError;
+}
+
+export const TempError = ({ error }: TempErrorProps): JSX.Element => {
+  const { code, request } = isAxiosError(error)
+    ? {
+        ...error,
+        code: error.response?.status,
+        request: error.request.responseURL,
+      }
+    : { ...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

@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Accordion } from "./accordion";
+
+export default {
+  component: Accordion,
+  title: "Components/Common/Accordion",
+} as Meta<typeof Accordion>;
+
+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

@@ -0,0 +1,41 @@
+import {
+  Accordion as MAccordion,
+  AccordionDetails,
+  AccordionProps as MAccordionProps,
+  AccordionSummary,
+  Typography,
+} from "@mui/material";
+import React, { ReactNode, useState } from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../theme/common/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={TEXT_BODY_LARGE_500}>{title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>{children}</AccordionDetails>
+    </MAccordion>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./alert";
+
+export default {
+  argTypes: {
+    children: {
+      control: "text",
+      description: "Inner text",
+    },
+    color: {
+      description: "Color of alert",
+    },
+    icon: {
+      control: "text",
+      description: "Top left icon. If provided will replace severity.",
+    },
+    severity: {
+      description: "Top left predefined icon. Combine with color.",
+    },
+    title: {
+      control: "text",
+      description: "Highlighted text",
+    },
+    variant: {
+      description: "Type of the alert",
+    },
+  },
+  component: Alert,
+  title: "Components/Common/Alert",
+} as Meta<typeof Alert>;
+
+type Story = StoryObj<typeof Alert>;
+
+export const AlertStory: Story = {
+  args: {
+    children: "Something certainly happened",
+    color: "warning",
+    severity: "warning",
+    title: "Ouch!",
+  },
+};

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

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { Alert } from "./alert";
+
+/**
+ * Flat alert - typically used when in full stretch or full "bleed" across a container.
+ * e.g. the entire width of mobile viewports.
+ */
+export const FlatAlert = styled(Alert)`
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+  box-shadow: none;
+`;
+
+/* eslint-disable valid-jsdoc -- disable require param */
+/**
+ * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
+ */
+/* eslint-enable valid-jsdoc -- disable require param */
+export const FluidAlert = styled(Alert)`
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
+    border-left: none;
+    border-radius: 0;
+    border-right: none;
+    box-shadow: none;
+  }
+`;

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

@@ -0,0 +1,39 @@
+import {
+  Alert as MAlert,
+  AlertProps as MAlertProps,
+  AlertTitle,
+} from "@mui/material";
+import React, { ReactNode } from "react";
+
+export interface AlertProps {
+  children?: ReactNode;
+  className?: string;
+  color?: MAlertProps["color"];
+  icon?: MAlertProps["icon"];
+  severity: MAlertProps["severity"];
+  title?: ReactNode;
+  variant?: MAlertProps["variant"];
+}
+
+export const Alert = ({
+  children,
+  className,
+  color,
+  icon,
+  severity,
+  title,
+  variant = "standard",
+}: AlertProps): JSX.Element => {
+  return (
+    <MAlert
+      className={className}
+      color={color}
+      icon={icon}
+      severity={severity}
+      variant={variant}
+    >
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {children}
+    </MAlert>
+  );
+};

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

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import Link from "next/link";
+import { inkLight } from "../../../styles/common/mixins/colors";
+
+export const AnchorLink = styled(Link)`
+  color: ${inkLight};
+  margin-left: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  svg {
+    vertical-align: middle;
+  }
+`;

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

@@ -0,0 +1,19 @@
+import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import React from "react";
+import { AnchorLink as Link } from "./anchorLink.styles";
+
+interface AnchorLinkProps {
+  anchorLink: string;
+  className?: string;
+}
+
+export const AnchorLink = ({
+  anchorLink,
+  className,
+}: AnchorLinkProps): JSX.Element => {
+  return (
+    <Link aria-label={anchorLink} className={className} href={`#${anchorLink}`}>
+      <LinkRoundedIcon fontSize="xsmall" />
+    </Link>
+  );
+};