@kosmeo-ui/react 0.1.0

package/src/components/data-display/infiniteScroll/filters/rangeFilter.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import Input from "../../../inputs/input/index.js";
+import { DateTime } from "luxon";
+import "./styles.css";
+import {
+  faCalendarDays,
+  faFont,
+  faHashtag,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  GeneratedRangeFilter,
+  InfiniteScrollMenuGeneratedFilter,
+  RangeValue,
+} from "../types.js";
+
+interface InfiniteScrollRangeFilterProps {
+  filter: GeneratedRangeFilter;
+  onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
+}
+
+const RangeFilter = (props: InfiniteScrollRangeFilterProps) => {
+  const [startValue, setStartValue] = useState<RangeValue | undefined>(
+    props.filter.startValue
+  );
+  const [endValue, setEndValue] = useState<RangeValue | undefined>(
+    props.filter.endValue
+  );
+
+  useEffect(() => {
+    if (props.filter.startValue === startValue) return;
+    setStartValue(props.filter.startValue);
+    return;
+  }, [props.filter.startValue, startValue]);
+
+  useEffect(() => {
+    if (props.filter.endValue === endValue) return;
+    setEndValue(props.filter.endValue);
+    return;
+  }, [props.filter.endValue, endValue]);
+
+  const inputType = useMemo(() => {
+    if (props.filter.rangeType === "NUMBER") {
+      return "number";
+    } else if (props.filter.rangeType === "DATE") {
+      return "date";
+    } else if (props.filter.rangeType === "DATETIME") {
+      return "datetime-local";
+    } else return "text";
+  }, [props.filter.rangeType]);
+
+  const iconToUse = useMemo(() => {
+    if (
+      props.filter.rangeType === "DATE" ||
+      props.filter.rangeType === "DATETIME"
+    ) {
+      return faCalendarDays;
+    } else if (props.filter.rangeType === "NUMBER") return faHashtag;
+    else return faFont;
+  }, [props.filter.rangeType]);
+
+  const formattedStartValue = useMemo((): RangeValue => {
+    if (!startValue) return "";
+    if (props.filter.rangeType === "DATE") {
+      return DateTime.fromISO(startValue as string).toFormat("yyyy-MM-dd");
+    } else if (props.filter.rangeType === "DATETIME") {
+      return DateTime.fromISO(startValue as string).toFormat(
+        "yyyy-MM-dd'T'HH:mm"
+      );
+    } else return startValue;
+  }, [props.filter.rangeType, startValue]);
+
+  const formattedEndValue = useMemo((): RangeValue => {
+    if (!endValue) return "";
+    if (props.filter.rangeType === "DATE") {
+      return DateTime.fromISO(endValue as string).toFormat("yyyy-MM-dd");
+    } else if (props.filter.rangeType === "DATETIME") {
+      return DateTime.fromISO(endValue as string).toFormat(
+        "yyyy-MM-dd'T'HH:mm"
+      );
+    } else return endValue;
+  }, [props.filter.rangeType, endValue]);
+
+  const handleStartChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let newValue: RangeValue;
+      if (props.filter.rangeType === "NUMBER") {
+        newValue = parseInt(e.target.value);
+      } else if (props.filter.rangeType === "DATE") {
+        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
+        if (!res) throw new Error("Invalid date");
+        newValue = res;
+      } else if (props.filter.rangeType === "DATETIME") {
+        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
+        if (!res) throw new Error("Invalid date");
+        newValue = res;
+      } else newValue = e.target.value;
+      setStartValue(newValue);
+      props.onFilterChange({
+        ...props.filter,
+        startValue: newValue,
+        endValue,
+      });
+    },
+    [props, endValue]
+  );
+
+  const handleEndChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let newValue: RangeValue;
+      if (props.filter.rangeType === "NUMBER") {
+        newValue = parseInt(e.target.value);
+      } else if (props.filter.rangeType === "DATE") {
+        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
+        if (!res) throw new Error("Invalid date");
+        newValue = res;
+      } else if (props.filter.rangeType === "DATETIME") {
+        const res = DateTime.fromISO(e.target.value).toUTC().toISO();
+        if (!res) throw new Error("Invalid date");
+        newValue = res;
+      } else newValue = e.target.value;
+      setEndValue(newValue);
+      props.onFilterChange({
+        ...props.filter,
+        startValue,
+        endValue: newValue,
+      });
+    },
+    [props, startValue]
+  );
+
+  return (
+    <Dropdown
+      size="sm"
+      variant="secondary"
+      label={props.filter.title}
+      icon={iconToUse}
+      align="left"
+    >
+      <div className="k-filter-menu">
+        <div className="k-range-filter-menu-column">
+          <p className="k-range-filter-menu-label">Start</p>
+          <Input
+            size="sm"
+            type={inputType}
+            value={formattedStartValue}
+            onChange={handleStartChange}
+            max={formattedEndValue}
+          />
+        </div>
+        <div className="k-range-filter-menu-column">
+          <p className="k-range-filter-menu-label">End</p>
+          <Input
+            size="sm"
+            type={inputType}
+            value={formattedEndValue}
+            onChange={handleEndChange}
+            min={formattedStartValue}
+          />
+        </div>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default RangeFilter;

package/src/components/data-display/infiniteScroll/filters/searchFilter.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import Button from "../../../buttons/button/index.js";
+import Input from "../../../inputs/input/index.js";
+import "./styles.css";
+import {
+  GeneratedSearchFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollSearchFilterProps {
+  filter: GeneratedSearchFilter;
+  onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
+}
+
+const SearchFilter = (props: InfiniteScrollSearchFilterProps) => {
+  const [value, setValue] = useState<string>("");
+  const [prevValue, setPrevValue] = useState<string>("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (
+      props.filter.value === prevValue ||
+      (props.filter.value === undefined && prevValue === "")
+    )
+      return;
+    setValue(props.filter.value || "");
+    setPrevValue(props.filter.value || "");
+    return;
+  }, [props.filter.value, value, prevValue]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSubmit = useCallback(() => {
+    setPrevValue(value);
+    props.onFilterChange({ ...props.filter, value: value });
+    setIsOpen(false);
+  }, [value, props]);
+
+  const handleKeydown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      handleSubmit();
+    },
+    [handleSubmit]
+  );
+
+  const allowSubmit = useMemo(() => {
+    return value !== prevValue;
+  }, [value, prevValue]);
+
+  return (
+    <Dropdown
+      label={props.filter.title}
+      icon={faMagnifyingGlass}
+      align="left"
+      size="sm"
+      variant="secondary"
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className="k-filter-menu">
+        <Input
+          size="sm"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeydown}
+        />
+        <Button size="sm" disabled={!allowSubmit} onClick={handleSubmit}>
+          Add Filter
+        </Button>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default SearchFilter;

package/src/components/data-display/infiniteScroll/filters/selectFilter.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import IconButton from "../../../buttons/iconButton/index.js";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import { useEffect, useMemo, useState } from "react";
+import Input from "../../../inputs/input/index.js";
+import "./styles.css";
+import {
+  faCheckSquare,
+  faSquareCheck,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  GeneratedSelectFilter,
+  InfiniteScrollMenuFilterOption,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollSelectFilterProps {
+  filter: GeneratedSelectFilter;
+  onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
+}
+
+const SelectFilter = (props: InfiniteScrollSelectFilterProps) => {
+  const [options, setOptions] = useState<InfiniteScrollMenuFilterOption[]>([]);
+  const [optionSearch, setOptionSearch] = useState<string>("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (
+      props.filter.options === undefined ||
+      props.filter.options === options
+    ) {
+      return;
+    }
+    setOptions(props.filter.options || []);
+    return;
+  }, [props.filter.options, options]);
+
+  const handleSelect = (id: string | number, selected: boolean) => {
+    const newOptions = options.map((item) => {
+      if (item.id === id) return { ...item, selected };
+      else
+        return {
+          ...item,
+          selected: props.filter.multiSelect ? item.selected : false,
+        };
+    });
+    setOptions(newOptions);
+    props.onFilterChange({ ...props.filter, options: newOptions });
+    // Close dropdown for single-select mode
+    if (!props.filter.multiSelect) {
+      setIsOpen(false);
+    }
+  };
+
+  const handleSearchOption = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOptionSearch(e.target.value);
+  };
+
+  const optionComponents = useMemo(() => {
+    const available = options.filter((item) => {
+      if (optionSearch === "") return true;
+      return item.name.toLowerCase().includes(optionSearch.toLowerCase());
+    });
+    return available.map((item, index) => (
+      <IconButton
+        size="sm"
+        variant="light"
+        align="left"
+        shadow={false}
+        key={index}
+        onClick={() => handleSelect(item.id, !item.selected)}
+        icon={item.selected ? faCheckSquare : faSquare}
+      >
+        {item.name}
+      </IconButton>
+    ));
+  }, [options, optionSearch]);
+
+  return (
+    <Dropdown
+      size="sm"
+      variant="secondary"
+      icon={faSquareCheck}
+      align="left"
+      label={props.filter.title}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className="k-filter-menu k-select-filter-menu">
+        <Input
+          size="sm"
+          placeholder="Search"
+          value={optionSearch}
+          onChange={handleSearchOption}
+        />
+        <div className="k-select-filter-menu-options">{optionComponents}</div>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default SelectFilter;

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

@@ -0,0 +1,48 @@
+.k-menu-filters-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.k-menu-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: end;
+}
+
+.k-menu-filters-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.k-filter-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  min-width: 15rem;
+}
+
+.k-range-filter-menu-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.k-range-filter-menu-label {
+  color: var(--text-color-secondary);
+  margin-bottom: 0;
+}
+
+.k-select-filter-menu {
+  max-height: 30rem;
+  min-width: 12rem;
+}
+
+.k-select-filter-menu-options {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import ConfirmationModal from "../../../overlays/confirmationModal/index.js";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { TableRow } from "../types.js";
+import { useState } from "react";
+
+interface DeleteButtonProps<TData> {
+  rows: TableRow<TData>[];
+  selectedRows: Set<number>;
+  allSelected: boolean;
+  onDelete?: (rows: TableRow<TData>[]) => void;
+}
+
+const DeleteButton = <TData extends object>(
+  props: DeleteButtonProps<TData>
+) => {
+  const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);
+
+  const handleShowBulkDeleteModal = () => {
+    if (props.selectedRows.size === 0) return;
+    setShowBulkDeleteModal(true);
+  };
+
+  const handleHideBulkDeleteModal = () => {
+    setShowBulkDeleteModal(false);
+  };
+
+  const handleDelete = () => {
+    if (!props.onDelete) return;
+    const res = props.rows.filter((r) => props.selectedRows.has(r.index));
+    props.onDelete(res);
+    setShowBulkDeleteModal(false);
+  };
+  if (!props.onDelete) return null;
+  return (
+    <>
+      <IconButton
+        size="sm"
+        variant="danger"
+        onClick={handleShowBulkDeleteModal}
+        disabled={!props.selectedRows.size && !props.allSelected}
+        icon={faTrash}
+      />
+      <ConfirmationModal
+        show={showBulkDeleteModal}
+        title="Delete Data"
+        body={`Are you sure you want to delete the selected rows?`}
+        handleHide={handleHideBulkDeleteModal}
+        handleConfirm={handleDelete}
+        confirmButtonText="Delete"
+      />
+    </>
+  );
+};
+
+export default DeleteButton;

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

@@ -0,0 +1,109 @@
+"use client";
+
+import IconButton from "../../../buttons/iconButton/index.js";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import SortDirection from "./sortDirection.js";
+import DeleteButton from "./deleteButton.js";
+import SortBy from "./sortBy.js";
+import Limit from "./limit.js";
+import "./styles.css";
+import {
+  faDownload,
+  faEllipsisVertical,
+  faPlus,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  SortDirection as SortDirectionType,
+  InfiniteScrollMenuLimitOption,
+  InfiniteScrollMenuSortDataKey,
+  TableRow,
+} from "../types.js";
+
+interface HeaderProps<TData> {
+  title: string;
+  optionsDropdown?: React.ReactNode;
+  onDownload?: () => void;
+  limitOptions: InfiniteScrollMenuLimitOption[];
+  sortBy: InfiniteScrollMenuSortDataKey[];
+  sortDirection?: SortDirectionType;
+  rows: TableRow<TData>[];
+  selectedRows: Set<number>;
+  allSelected: boolean;
+  onLimitChange: (limitOptions: InfiniteScrollMenuLimitOption[]) => void;
+  onSortByChange: (sortBy: InfiniteScrollMenuSortDataKey[]) => void;
+  onSortDirectionChange: (sortDirection: SortDirectionType) => void;
+  onAddNew?: () => void;
+  onDelete?: (rows: TableRow<TData>[]) => void;
+  onRefetch: () => void;
+}
+
+const Header = <TData extends object>(props: HeaderProps<TData>) => {
+  return (
+    <div className="k-infinite-scroll-header">
+      <div className="k-infinite-scroll-header-buttons-container">
+        <p className="k-infinite-scroll-header-title">{props.title}</p>
+        <IconButton
+          size="sm"
+          variant="secondary"
+          onClick={props.onRefetch}
+          icon={faRotate}
+        />
+        {props.onDownload && (
+          <IconButton
+            size="sm"
+            variant="secondary"
+            onClick={props.onDownload}
+            icon={faDownload}
+          />
+        )}
+        {props.onAddNew && (
+          <IconButton
+            size="sm"
+            variant="success"
+            onClick={props.onAddNew}
+            icon={faPlus}
+          />
+        )}
+        <DeleteButton<TData>
+          rows={props.rows}
+          selectedRows={props.selectedRows}
+          allSelected={props.allSelected}
+          onDelete={props.onDelete}
+        />
+        {props.optionsDropdown && (
+          <Dropdown
+            icon={faEllipsisVertical}
+            size="sm"
+            variant="secondary"
+            align="left"
+            renderCaret={false}
+          >
+            {props.optionsDropdown}
+          </Dropdown>
+        )}
+      </div>
+      <div className="k-infinite-scroll-header-limit-sort-container">
+        <Limit
+          limitOptions={props.limitOptions}
+          onLimitChange={props.onLimitChange}
+        />
+        {props.sortBy.length > 0 && (
+          <div className="k-infinite-scroll-header-sort-container">
+            <p className="k-infinite-scroll-header-sort-title">Sort By:</p>
+            <SortBy
+              sortBy={props.sortBy}
+              handleSortByChange={props.onSortByChange}
+            />
+            <SortDirection
+              sortDirection={props.sortDirection}
+              handleSortDirectionChange={props.onSortDirectionChange}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { faCheckSquare } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { InfiniteScrollMenuLimitOption } from "../types.js";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import { useEffect, useState } from "react";
+import "./styles.css";
+
+interface LimitProps {
+  limitOptions: InfiniteScrollMenuLimitOption[];
+  onLimitChange: (limitOptions: InfiniteScrollMenuLimitOption[]) => void;
+}
+
+const Limit = (props: LimitProps) => {
+  const [limitOptions, setLimitOptions] = useState(props.limitOptions);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!props.limitOptions || props.limitOptions === limitOptions) return;
+    setLimitOptions(props.limitOptions);
+  }, [props.limitOptions, limitOptions]);
+
+  const handleSelect = (value: number, selected: boolean) => {
+    const newOptions = limitOptions.map((limit) => {
+      if (limit.value === value) return { ...limit, selected };
+      else return { ...limit, selected: false };
+    });
+    const oneSelected = newOptions.some((option) => option.selected);
+    if (!oneSelected) return;
+    setLimitOptions(newOptions);
+    props.onLimitChange(newOptions);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="k-limit-container">
+      <p>Results Per Page:</p>
+      <Dropdown
+        label={limitOptions.find((o) => o.selected)?.value || "None"}
+        align="right"
+        size="sm"
+        variant="secondary"
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+      >
+        <div className="k-infinite-scroll-dropdown-menu ">
+          {limitOptions.map((key, index: number) => (
+            <IconButton
+              variant="light"
+              size="sm"
+              align="left"
+              shadow={false}
+              key={index}
+              icon={key.selected ? faCheckSquare : faSquare}
+              onClick={() => handleSelect(key.value, !key.selected)}
+            >
+              {key.value}
+            </IconButton>
+          ))}
+        </div>
+      </Dropdown>
+    </div>
+  );
+};
+
+export default Limit;

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { faCheckSquare } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { InfiniteScrollMenuSortDataKey } from "../types.js";
+import Dropdown from "../../../inputs/dropdown/index.js";
+import { useState } from "react";
+import "./styles.css";
+
+interface SortbyProps {
+  sortBy: InfiniteScrollMenuSortDataKey[];
+  handleSortByChange: (sortBy: InfiniteScrollMenuSortDataKey[]) => void;
+}
+
+const SortBy = (props: SortbyProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (dataKey: string, selected: boolean) => {
+    const newOptions = props.sortBy.map((item) => {
+      if (item.dataKey === dataKey) return { ...item, selected };
+      else return { ...item, selected: false };
+    });
+    props.handleSortByChange(newOptions);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      align="right"
+      size="sm"
+      variant="secondary"
+      label={props.sortBy.find((key) => key.selected)?.displayName || "None"}
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className="k-infinite-scroll-dropdown-menu ">
+        {props.sortBy.map((key, index: number) => (
+          <IconButton
+            key={index}
+            variant="light"
+            size="sm"
+            align="left"
+            shadow={false}
+            icon={key.selected ? faCheckSquare : faSquare}
+            onClick={() => handleSelect(key.dataKey, !key.selected)}
+          >
+            {key.displayName}
+          </IconButton>
+        ))}
+      </div>
+    </Dropdown>
+  );
+};
+
+export default SortBy;