@kosmeo-ui/react 0.1.0

package/src/components/data-display/infiniteScroll/header/sortDirection.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { faCheckSquare } from "@fortawesome/free-solid-svg-icons";
+import { SortDirection as SortDirectionType } from "../types.js";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import IconButton from "../../../buttons/iconButton/index.js";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import { useState } from "react";
+import "./styles.css";
+
+interface DirectionSortProps {
+  sortDirection?: SortDirectionType;
+  handleSortDirectionChange: (sortDirection: SortDirectionType) => void;
+}
+
+const SortDirection = (props: DirectionSortProps) => {
+  const { sortDirection, handleSortDirectionChange } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (direction: SortDirectionType) => {
+    handleSortDirectionChange(direction);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      variant="secondary"
+      align="right"
+      size="sm"
+      label={props.sortDirection === "asc" ? "Ascending" : "Descending"}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className="k-infinite-scroll-dropdown-menu ">
+        <IconButton
+          variant="light"
+          size="sm"
+          align="left"
+          shadow={false}
+          icon={sortDirection === "asc" ? faCheckSquare : faSquare}
+          onClick={() => handleSelect("asc")}
+        >
+          Ascending
+        </IconButton>
+        <IconButton
+          variant="light"
+          size="sm"
+          align="left"
+          shadow={false}
+          icon={sortDirection === "desc" ? faCheckSquare : faSquare}
+          onClick={() => handleSelect("desc")}
+        >
+          Descending
+        </IconButton>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default SortDirection;

package/src/components/data-display/infiniteScroll/header/styles.css

@@ -0,0 +1,64 @@
+.k-infinite-scroll-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.k-infinite-scroll-header-buttons-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-infinite-scroll-header-title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.k-infinite-scroll-header-limit-sort-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.k-infinite-scroll-header-sort-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-infinite-scroll-header-sort-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-infinite-scroll-header-sort-title {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.k-infinite-scroll-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.k-limit-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-limit-container p {
+  margin: 0;
+  font-size: 1rem;
+}

package/src/components/data-display/infiniteScroll/index.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import LoadingOverlay from "../../feedback/loadingOverlay/index.js";
+import * as pendingChangesUtil from "./utils/hasPendingChanges.js";
+import generateQueryString from "./utils/generateQueryString.js";
+import Button from "../../buttons/button/index.js";
+import Col from "../../layout/col/index.js";
+import Filters from "./filters/index.js";
+import Header from "./header/index.js";
+import Table from "./table/index.js";
+import Tags from "./tags/index.js";
+import "./styles.css";
+import {
+  TableColumn,
+  InfiniteScrollMenu,
+  InfiniteScrollMenuGeneratedFilter,
+  InfiniteScrollMenuLimitOption,
+  TableRow,
+} from "./types.js";
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const DEFAULT_LIMIT_OPTIONS: InfiniteScrollMenuLimitOption[] = [
+  { value: 25, selected: true },
+  { value: 50, selected: false },
+  { value: 100, selected: false },
+];
+
+const SCROLL_THRESHOLD = 50;
+
+interface InfiniteScrollProps<TData> {
+  menu: InfiniteScrollMenu;
+  /** The data array to be rendered in the infinite scroll */
+  data: TData[];
+  /** Indicates if there are more items to load */
+  hasMore: boolean;
+  /** Indicates if data is currently being loaded */
+  isLoading: boolean;
+  /**
+   * Callback function that returns a query string to be attached to the URL when fetching data.
+   * Called whenever filters, sort, or limit options change.
+   */
+  onQueryChange: (queryString: string) => void;
+  /** Function that is called to reload the data */
+  onReload: () => void;
+  /** NOTE: Only columns OR dataComponent is allowed */
+  columns?: TableColumn<TData>[];
+  /** NOTE: Only dataComponent OR columns is allowed */
+  dataComponent?: (data: TableRow<TData>[]) => ReactNode[];
+  /** A toggle to tell the Infinite Scroll to fetch more data. Any change will trigger it*/
+  reloadData?: boolean;
+  /** Returns the data for the rows that are selected */
+  onRowSelect?: (data: TableRow<TData>[]) => void;
+  /** Function that is called when the "+" button is clicked */
+  onAddNew?: () => void;
+  /**
+   * Function that is called when the delete button is clicked
+   *
+   * All the rows that are selected will be passed to this function.
+   */
+  onDelete?: (data: TableRow<TData>[]) => void;
+  /**
+   * An optional element to render in the options menu.
+   *
+   * This can be used to add custom actions or buttons to the menu.
+   */
+  optionsDropdown?: ReactNode;
+  /** Callback for a download/export button in the header */
+  onDownload?: () => void;
+  loadingDataMessage?: string;
+  emptyMessage?: string;
+  /** Function called when a row is clicked. Receives the row data. */
+  onRowClick?: (data: TData) => void;
+  /** When true, hides the header, filters, and tags while keeping infinite scroll functionality */
+  hideFilters?: boolean;
+  /** When true, hides the select/checkbox column */
+  hideSelectColumn?: boolean;
+  /** When true, hides the "Fetch Next Page" button */
+  hideNextPageButton?: boolean;
+}
+
+const InfiniteScroll = <TData extends object>(
+  props: InfiniteScrollProps<TData>
+) => {
+  if (props.columns && props.dataComponent) {
+    throw new Error(
+      "You cannot use both columns and dataComponent in the same infinite scroll component"
+    );
+  }
+
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const [filters, setFilters] = useState<InfiniteScrollMenuGeneratedFilter[]>(
+    []
+  );
+  const [pendingFilters, setPendingFilters] = useState<
+    InfiniteScrollMenuGeneratedFilter[]
+  >([]);
+  const [sortBy, setSortBy] = useState(props.menu.sort?.sortDataKeys || []);
+  const [pendingSortBy, setPendingSortBy] = useState(
+    props.menu.sort?.sortDataKeys || []
+  );
+  const [sortDirection, setSortDirection] = useState(
+    props.menu.sort?.sortDirection || "desc"
+  );
+  const [pendingSortDirection, setPendingSortDirection] = useState(
+    props.menu.sort?.sortDirection || "desc"
+  );
+  const [limitOptions, setLimitOptions] = useState(
+    props.menu.limitOptions || DEFAULT_LIMIT_OPTIONS
+  );
+  const [pendingLimitOptions, setPendingLimitOptions] = useState(
+    props.menu.limitOptions || DEFAULT_LIMIT_OPTIONS
+  );
+
+  const infiniteScrollTableRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const rows = useMemo((): TableRow<TData>[] => {
+    if (!props.data || props.data.length === 0) return [];
+    return props.data.map((each, index) => ({ index, data: each }));
+  }, [props.data]);
+
+  const allSelected = useMemo(() => {
+    if (rows.length === 0) return false;
+    return rows.length === selectedRows.size;
+  }, [rows, selectedRows]);
+
+  const getQueryString = useCallback(
+    (isNextPage: boolean = false): string => {
+      return generateQueryString({
+        filters,
+        limitOptions,
+        sortBy,
+        sortDirection,
+        dataLength: props.data.length,
+        isNextPage,
+      });
+    },
+    [filters, limitOptions, sortBy, sortDirection, props.data.length]
+  );
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+      if (!infiniteScrollTableRef.current || !props.hasMore || props.isLoading)
+        return;
+      const { scrollHeight, clientHeight } = infiniteScrollTableRef.current;
+      const hasVerticalScrollbar = scrollHeight > clientHeight;
+      if (!hasVerticalScrollbar) return;
+      if (e.target instanceof Element === false) return;
+      const scrollPosition = e.target.scrollHeight - e.target.scrollTop;
+      if (scrollPosition > SCROLL_THRESHOLD + e.target.clientHeight) return;
+      props.onQueryChange(getQueryString(true));
+    },
+    [props.hasMore, props.isLoading, props.onQueryChange, getQueryString]
+  );
+
+  const handleNextPageClick = useCallback(
+    () => props.onQueryChange(getQueryString(true)),
+    [props.onQueryChange, getQueryString]
+  );
+
+  const handleRowSelect = useCallback((index: number) => {
+    setSelectedRows((prev) => {
+      const newSelectedRows = new Set(prev);
+      if (newSelectedRows.has(index)) newSelectedRows.delete(index);
+      else newSelectedRows.add(index);
+      return newSelectedRows;
+    });
+  }, []);
+
+  const handleSelectAll = useCallback(() => {
+    if (!allSelected) setSelectedRows(new Set(rows.map((row) => row.index)));
+    else setSelectedRows(new Set());
+  }, [allSelected, rows]);
+
+  useEffect(() => {
+    setSelectedRows(new Set());
+  }, [props.data]);
+
+  useEffect(() => {
+    if (!props.onRowSelect) return;
+    const selectedData = rows.filter((r) => selectedRows.has(r.index));
+    props.onRowSelect(selectedData);
+  }, [selectedRows, rows, props.onRowSelect]);
+
+  useEffect(() => {
+    if (!props.menu.filters) return;
+    const generatedFilters = props.menu.filters.map((f, i) => {
+      return { ...f, filterId: `${f.dataKey}-${i}` };
+    });
+    setFilters(generatedFilters);
+    setPendingFilters(generatedFilters);
+    const sortDataKeys = props.menu.sort?.sortDataKeys || [];
+    const sortDir = props.menu.sort?.sortDirection || "desc";
+    setSortBy(sortDataKeys);
+    setPendingSortBy(sortDataKeys);
+    setSortDirection(sortDir);
+    setPendingSortDirection(sortDir);
+    const limits = props.menu.limitOptions || DEFAULT_LIMIT_OPTIONS;
+    setLimitOptions(limits);
+    setPendingLimitOptions(limits);
+    props.onReload();
+  }, [props.menu, props.onReload]);
+
+  useEffect(() => {
+    const queryString = generateQueryString({
+      filters,
+      limitOptions,
+      sortBy,
+      sortDirection,
+      dataLength: 0,
+      isNextPage: false,
+    });
+    props.onQueryChange(queryString);
+  }, [
+    sortBy,
+    sortDirection,
+    limitOptions,
+    filters,
+    props.reloadData,
+    props.onQueryChange,
+  ]);
+
+  const hasPendingChanges = useMemo(
+    () =>
+      pendingChangesUtil.hasPendingChanges({
+        filters,
+        pendingFilters,
+        sortBy,
+        pendingSortBy,
+        sortDirection,
+        pendingSortDirection,
+        limitOptions,
+        pendingLimitOptions,
+      }),
+    [
+      filters,
+      pendingFilters,
+      sortBy,
+      pendingSortBy,
+      sortDirection,
+      pendingSortDirection,
+      limitOptions,
+      pendingLimitOptions,
+    ]
+  );
+
+  const hasActiveFilters = useMemo(
+    () => pendingChangesUtil.hasActiveFilters(pendingFilters),
+    [pendingFilters]
+  );
+
+  const handleApply = useCallback(() => {
+    setFilters(pendingFilters);
+    setSortBy(pendingSortBy);
+    setSortDirection(pendingSortDirection);
+    setLimitOptions(pendingLimitOptions);
+  }, [
+    pendingFilters,
+    pendingSortBy,
+    pendingSortDirection,
+    pendingLimitOptions,
+  ]);
+
+  const handleReset = useCallback(() => {
+    const clearedFilters = pendingFilters.map((filter) => {
+      if (filter.type === "SELECT") {
+        return {
+          ...filter,
+          options: filter.options?.map((o) => ({ ...o, selected: false })),
+        };
+      } else if (filter.type === "RANGE") {
+        return { ...filter, startValue: undefined, endValue: undefined };
+      } else if (filter.type === "SEARCH") {
+        return { ...filter, value: undefined };
+      } else return { ...filter, list: "" };
+    });
+    setPendingFilters(clearedFilters);
+    setFilters(clearedFilters);
+  }, [pendingFilters]);
+
+  return (
+    <div ref={containerRef} className="k-infinite-scroll-container">
+      {!props.hideFilters && (
+        <>
+          <Col size="sm">
+            <Header<TData>
+              title={props.menu.title}
+              limitOptions={pendingLimitOptions}
+              sortBy={pendingSortBy}
+              sortDirection={pendingSortDirection}
+              rows={rows}
+              selectedRows={selectedRows}
+              allSelected={allSelected}
+              optionsDropdown={props.optionsDropdown}
+              onDownload={props.onDownload}
+              onAddNew={props.onAddNew}
+              onDelete={props.onDelete}
+              onRefetch={props.onReload}
+              onLimitChange={setPendingLimitOptions}
+              onSortByChange={setPendingSortBy}
+              onSortDirectionChange={setPendingSortDirection}
+            />
+            <Filters
+              pendingFilters={pendingFilters}
+              handleNewPendingFilters={setPendingFilters}
+            >
+              <Button
+                size="sm"
+                variant="danger"
+                disabled={!hasActiveFilters}
+                onClick={handleReset}
+              >
+                Reset
+              </Button>
+              <Button
+                size="sm"
+                disabled={!hasPendingChanges}
+                onClick={handleApply}
+              >
+                Apply
+              </Button>
+            </Filters>
+            <Tags
+              filters={pendingFilters}
+              handleNewFilters={setPendingFilters}
+            />
+          </Col>
+          <div className="k-infinite-scroll-menu-table-divider" />
+        </>
+      )}
+      <div
+        ref={infiniteScrollTableRef}
+        className="k-infinite-scroll-table-container"
+        onScroll={handleScroll}
+      >
+        {props.columns && (
+          <Table<TData>
+            columns={props.columns}
+            rows={rows}
+            selectedRows={selectedRows}
+            allSelected={allSelected}
+            onRowSelect={handleRowSelect}
+            onSelectAll={handleSelectAll}
+            onRowClick={props.onRowClick}
+            hideSelectColumn={props.hideSelectColumn}
+            scrollParentRef={infiniteScrollTableRef}
+          />
+        )}
+        {props.dataComponent && props.dataComponent(rows)}
+        {!props.isLoading && props.data.length === 0 && (
+          <div className="k-infinite-scroll-empty-state">
+            {props.emptyMessage || "No results found"}
+          </div>
+        )}
+        {!props.hideNextPageButton && props.data.length > 0 && (
+          <div className="k-infinite-scroll-next-page-container">
+            <Button
+              disabled={!props.hasMore || props.isLoading}
+              onClick={handleNextPageClick}
+            >
+              {props.hasMore
+                ? props.isLoading
+                  ? "Loading..."
+                  : "Fetch Next Page"
+                : "No More Pages"}
+            </Button>
+          </div>
+        )}
+        <LoadingOverlay
+          fullPage={false}
+          show={props.isLoading && props.data.length === 0}
+          message={props.loadingDataMessage || "Loading Data..."}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default InfiniteScroll;
+
+export type {
+  InfiniteScrollMenu,
+  InfiniteScrollMenuFilter,
+  InfiniteScrollMenuSort,
+  InfiniteScrollMenuSortDataKey,
+  InfiniteScrollMenuLimitOption,
+} from "./types.js";

package/src/components/data-display/infiniteScroll/styles.css

@@ -0,0 +1,37 @@
+.k-infinite-scroll-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+  border-radius: 1rem;
+  overflow-y: hidden;
+  height: 100%;
+}
+
+.k-infinite-scroll-table-container {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  position: relative;
+}
+
+.k-infinite-scroll-menu-table-divider {
+  margin: 1rem;
+  border-top: 2px solid var(--border-color);
+}
+
+.k-infinite-scroll-next-page-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+
+.k-infinite-scroll-empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem 1rem;
+  color: var(--text-muted);
+  font-size: 1rem;
+}

package/src/components/data-display/infiniteScroll/table/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import DataTable from "../../../data-display/dataTable/index.js";
+import Checkbox from "../../../inputs/checkbox/index.js";
+import { type RefObject } from "react";
+import {
+  TableColumn,
+  TableLeadingColumn,
+  TableRow,
+} from "../../dataTable/types.js";
+
+interface InfiniteScrollTableProps<TData> {
+  columns: TableColumn<TData>[];
+  rows: TableRow<TData>[];
+  selectedRows: Set<number>;
+  allSelected: boolean;
+  onRowSelect: (data: number) => void;
+  onSelectAll: () => void;
+  onRowClick?: (data: TData) => void;
+  hideSelectColumn?: boolean;
+  scrollParentRef?: RefObject<HTMLElement | null>;
+}
+
+const InfiniteScrollTable = <TData extends object>(
+  props: InfiniteScrollTableProps<TData>
+) => {
+  const leadingColumn: TableLeadingColumn<TData> | undefined =
+    props.hideSelectColumn
+      ? undefined
+      : {
+          header: (
+            <Checkbox
+              checked={props.allSelected}
+              onChange={props.onSelectAll}
+            />
+          ),
+          cell: (row) => (
+            <Checkbox
+              checked={props.selectedRows.has(row.index) || props.allSelected}
+              onChange={() => props.onRowSelect(row.index)}
+            />
+          ),
+        };
+
+  return (
+    <DataTable<TData>
+      columns={props.columns}
+      rows={props.rows}
+      leadingColumn={leadingColumn}
+      onRowClick={props.onRowClick}
+      scrollParentRef={props.scrollParentRef}
+    />
+  );
+};
+
+export default InfiniteScrollTable;

package/src/components/data-display/infiniteScroll/tags/index.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { InfiniteScrollMenuGeneratedFilter } from "../types.js";
+import SearchFilterTag from "./searchFilterTag.js";
+import SelectFilterTag from "./selectFilterTag.js";
+import RangeFilterTag from "./rangeFilterTag.js";
+import ListFilterTag from "./listFilterTag.js";
+import "./styles.css";
+
+interface InfiniteScrollMenuTagsProps {
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
+}
+
+const Tags = (props: InfiniteScrollMenuTagsProps) => {
+  const filterTags = props.filters.reduce((tags, f) => {
+    if (f.type === "SELECT") {
+      const selectedFilters = f.options?.filter((o) => o.selected);
+      if (!selectedFilters) return tags;
+      for (const selectedFilter of selectedFilters) {
+        tags.push(
+          <SelectFilterTag
+            key={f.filterId}
+            filter={f}
+            filterOption={selectedFilter}
+            filters={props.filters}
+            handleNewFilters={props.handleNewFilters}
+          />
+        );
+      }
+    } else if (f.type === "RANGE") {
+      if (f.startValue) {
+        tags.push(
+          <RangeFilterTag
+            key={f.filterId}
+            filter={f}
+            filters={props.filters}
+            filterValue="startValue"
+            handleNewFilters={props.handleNewFilters}
+          />
+        );
+      }
+      if (f.endValue) {
+        tags.push(
+          <RangeFilterTag
+            key={f.filterId}
+            filter={f}
+            filters={props.filters}
+            filterValue="endValue"
+            handleNewFilters={props.handleNewFilters}
+          />
+        );
+      }
+    } else if (f.type === "SEARCH") {
+      if (!f.value) return tags;
+      tags.push(
+        <SearchFilterTag
+          key={f.filterId}
+          filter={f}
+          filters={props.filters}
+          handleNewFilters={props.handleNewFilters}
+        />
+      );
+    } else if (f.type === "LIST") {
+      if (!f.list) return tags;
+      tags.push(
+        <ListFilterTag
+          key={f.filterId}
+          filter={f}
+          filters={props.filters}
+          handleNewFilters={props.handleNewFilters}
+        />
+      );
+    }
+    return tags;
+  }, [] as React.ReactNode[]);
+
+  if (!filterTags.length) return null;
+  return <div className="k-tags-container">{filterTags}</div>;
+};
+
+export default Tags;