@databiosphere/findable-ui 6.0.0 → 8.0.0

package/src/components/Table/components/TableToolbar/components/RowPreview/rowPreview.tsx

@@ -13,7 +13,14 @@ export const RowPreview = <T extends RowData>({
   tableInstance,
 }: RowPreviewProps<T>): JSX.Element | null => {
   if (!rowPreviewView) return null;
+  const { getRowPreviewRow } = tableInstance;
+  const { original: response } = getRowPreviewRow() || {};
+  if (!response) return null;
   return (
-    <ComponentCreator components={rowPreviewView} response={tableInstance} />
+    <ComponentCreator
+      components={rowPreviewView}
+      response={response}
+      viewContext={{ tableInstance }}
+    />
   );
 };

package/src/config/entities.ts

@@ -1,5 +1,5 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnSort, RowData } from "@tanstack/react-table";
+import { CellContext, ColumnSort, RowData, Table } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -159,6 +159,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
   detail: BackPageConfig;
   entityMapper?: EntityMapper<T, I>;
   exploreMode: ExploreMode;
+  explorerTitle?: SiteConfig["explorerTitle"];
   getId?: GetIdFunction<T>;
   getTitle?: GetTitleFunction<T>;
   list: ListConfig;
@@ -262,6 +263,7 @@ export interface ListViewConfig {
   enableDownload?: boolean;
   enableRowPreview?: boolean;
   enableRowSelection?: boolean;
+  enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
   rowSelectionView?: ComponentsConfig;
@@ -435,4 +437,5 @@ export interface ViewContext<T extends RowData, TData = unknown> {
   exploreState: ExploreState;
   fileManifestState: FileManifestState;
   systemStatus: SystemStatus;
+  tableInstance?: Table<T>;
 }

package/src/config/utils.ts

@@ -23,8 +23,7 @@ export function getDefaultConfig(): SiteConfig {
         socials: [],
       },
       header: {
-        Logo: null,
-        navLinks: [],
+        logo: null,
       },
     },
     redirectRootToPath: "",

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,54 @@
+import {
+  UseCurrentBreakpoint,
+  useCurrentBreakpoint,
+} from "./useCurrentBreakpoint";
+
+export type UseBreakpoint = {
+  breakpoint?: UseCurrentBreakpoint; // current breakpoint.
+  lg: boolean; // desktop.
+  lgDown: boolean;
+  lgUp: boolean;
+  md: boolean; // small desktop.
+  mdDown: boolean;
+  mdUp: boolean;
+  sm: boolean; // tablet.
+  smDown: boolean;
+  smUp: boolean;
+  xs: boolean; // mobile.
+  xsDown: boolean;
+  xsUp: boolean;
+};
+
+export const useBreakpoint = (): UseBreakpoint => {
+  const breakpoint = useCurrentBreakpoint();
+  // Current breakpoint.
+  const xs = breakpoint === "xs";
+  const sm = breakpoint === "sm";
+  const md = breakpoint === "md";
+  const lg = breakpoint === "lg";
+  // Current breakpoint, down.
+  const xsDown = xs;
+  const smDown = xs || sm;
+  const mdDown = xs || sm || md;
+  const lgDown = xs || sm || md || lg;
+  // Current breakpoint, up.
+  const xsUp = xs || sm || md || lg;
+  const smUp = sm || md || lg;
+  const mdUp = md || lg;
+  const lgUp = lg;
+  return {
+    breakpoint,
+    lg,
+    lgDown,
+    lgUp,
+    md,
+    mdDown,
+    mdUp,
+    sm,
+    smDown,
+    smUp,
+    xs,
+    xsDown,
+    xsUp,
+  };
+};

package/src/hooks/useBreakpointHelper.ts

@@ -12,7 +12,7 @@ export enum BREAKPOINT_FN_NAME {
 }
 
 type BreakpointFnName = BREAKPOINT_FN_NAME;
-type BreakpointKey = Breakpoint;
+export type BreakpointKey = Breakpoint;
 
 export const useBreakpointHelper = (
   fnName: BreakpointFnName,

package/src/hooks/useCurrentBreakpoint.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from "@mui/material";
+import { useMemo } from "react";
+import {
+  BreakpointKey,
+  BREAKPOINT_FN_NAME,
+  useBreakpointHelper,
+} from "./useBreakpointHelper";
+
+export type UseCurrentBreakpoint = BreakpointKey | undefined;
+
+const breakpointKeys: BreakpointKey[] = ["xs", "sm", "md", "lg"];
+
+export const useCurrentBreakpoint = (): UseCurrentBreakpoint => {
+  const xs = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "xs");
+  const sm = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "sm");
+  const md = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "md");
+  const lg = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "lg");
+  const breakpoints: Record<Breakpoint, boolean> = useMemo(
+    () => ({ lg, md, sm, xs }),
+    [lg, md, sm, xs]
+  );
+  return breakpointKeys.find((key) => breakpoints[key]);
+};

package/src/hooks/useMenu.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from "react";
+
+export interface UseMenu {
+  onClose: () => void;
+  onOpen: () => void;
+  open: boolean;
+}
+
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = (): UseMenu => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Closes header menu.
+  const onClose = useCallback((): void => {
+    setOpen(false);
+  }, []);
+
+  // Opens header menu.
+  const onOpen = useCallback((): void => {
+    setOpen(true);
+  }, []);
+
+  return { onClose, onOpen, open };
+};

package/src/views/ExploreView/exploreView.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import {
   AzulEntitiesStaticResponse,
@@ -11,7 +10,6 @@ import {
   CategoryValueKey,
   SelectCategoryView,
 } from "../../common/entities";
-import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import {
@@ -19,6 +17,7 @@ import {
   Filters,
 } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
@@ -47,33 +46,15 @@ export interface ExploreViewProps extends AzulEntitiesStaticResponse {
   className?: string;
 }
 
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-function getTabs(entities: EntityConfig[]): Tab[] {
-  return entities.map(
-    ({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-      icon,
-      iconPosition,
-      label,
-      value: route,
-    })
-  );
-}
-
 export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-  const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
+  const { explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-  const { push } = useRouter();
-  const tabs = getTabs(entities);
+  const { categoryGroups, categoryViews, filterCount } = exploreState;
   const { response: summaryResponse } = useSummary(); // Fetch summary.
   useEntityList(props); // Fetch entities.
   const { entityListType } = props;
@@ -145,16 +126,6 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     setIsDrawerOpen(true);
   };
 
-  /**
-   * Callback fired when selected tab value changes.
-   * - Sets state tabsValue to selected tab value.
-   * - Executes a pushState and resets pagination.
-   * @param tabValue - Selected tab value.
-   */
-  const onTabChange = (tabValue: TabValue): void => {
-    push(`/${tabValue}`);
-  };
-
   /**
    * Dispatch a SelectedEntityType action when entityListType changes.
    */
@@ -206,8 +177,8 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         }
         SubTitleHero={renderComponent(subTitleHero)}
         Summaries={renderSummary(summaryConfig, summaryResponse)}
-        Tabs={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />}
-        title={explorerTitle}
+        Tabs={<Tabs />}
+        title={entityConfig.explorerTitle || explorerTitle}
       />
     </>
   );

package/tsconfig.json

@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
+    "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,