@kosmeo-ui/react 0.1.0

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

@@ -0,0 +1,165 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../../buttons/iconButton/index.js";
+import type { TableColumn } from "../../dataTable/types.js";
+import Table from "../../../data-display/table/index.js";
+import { useCallback, useMemo, useState } from "react";
+import Modal from "../../../overlays/modal/index.js";
+import Input from "../../../inputs/input/index.js";
+import Row from "../../../layout/row/index.js";
+import "./styles.css";
+import {
+  faList,
+  faPenToSquare,
+  faPlus,
+  faXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  GeneratedListFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollListFilterTagProps {
+  filter: GeneratedListFilter;
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
+}
+
+const ListFilterTag = (props: InfiniteScrollListFilterTagProps) => {
+  const [show, setShow] = useState(false);
+  const [modalFilter, setModalFilter] = useState<string>("");
+  const [modalAddValues, setModalAddValues] = useState<string>("");
+
+  const handleRemove = useCallback(() => {
+    const newFilters = props.filters?.map((f) => {
+      if (f.type !== "LIST") return f;
+      if (f.filterId !== props.filter.filterId) return f;
+      if (!modalAddValues) return { ...f, list: "" };
+      const newValues = f.list.split(",").filter((v) => v !== modalAddValues);
+      return { ...f, list: newValues.join(",") };
+    });
+    props.handleNewFilters(newFilters);
+  }, [props.filters, props.filter.filterId, modalAddValues]);
+
+  const handleAddValues = () => {
+    const newFilters = props.filters?.map((f) => {
+      if (f.type !== "LIST") return f;
+      if (f.filterId !== props.filter.filterId) return f;
+      const newValues = f.list.split(",");
+      for (const value of modalAddValues.split(",")) {
+        if (!newValues.includes(value)) newValues.push(value);
+      }
+      return { ...f, list: newValues.join(",") };
+    });
+    props.handleNewFilters(newFilters);
+  };
+
+  const handleClose = () => setShow(false);
+
+  const tagValue = useMemo(() => {
+    const allValues = props.filter.list.split(",");
+    if (allValues.length > 1) {
+      return `${allValues[0]} (+${allValues.length - 1} more)`;
+    } else return `${allValues[0]}`;
+  }, [props.filter.list]);
+
+  const allowAdd = useMemo(() => {
+    if (modalAddValues === "") return false;
+    const allValues = props.filter.list.split(",");
+    if (allValues.includes(modalAddValues)) return false;
+    return true;
+  }, [modalAddValues, props.filter.list]);
+
+  const tableRows = useMemo(
+    () =>
+      props.filter.list.split(",").filter((l) => {
+        if (!modalFilter) return true;
+        return l.includes(modalFilter);
+      }),
+    [props.filter.list, modalFilter]
+  );
+
+  const tableColumns = useMemo<TableColumn<string>[]>(
+    () => [
+      {
+        title: "#",
+        headerElement: (t) => (
+          <span className="k-lft-modal-table-header">{t}</span>
+        ),
+        cellElement: (_, i) => i + 1,
+      },
+      { title: "Value", cellElement: (value) => value },
+      {
+        title: "Remove",
+        headerElement: (t) => (
+          <span className="k-lft-modal-table-header">{t}</span>
+        ),
+        cellElement: () => (
+          <div className="k-lft-modal-table-remove-button">
+            <IconButton
+              icon={faXmark}
+              size="sm"
+              variant="danger"
+              onClick={handleRemove}
+            />
+          </div>
+        ),
+      },
+    ],
+    [handleRemove]
+  );
+
+  return (
+    <div className="k-tag-container">
+      <p className="k-tag-title">{props.filter.title}</p>
+      <div className="k-tag-actions">
+        <FontAwesomeIcon icon={faList} />
+        <p className="k-tag-value">{tagValue}</p>
+        <div className="k-lft-buttons">
+          <IconButton
+            icon={faPenToSquare}
+            onClick={() => setShow(!show)}
+            size="sm"
+          />
+          <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
+        </div>
+      </div>
+      <Modal show={show} onClose={handleClose} title={props.filter.title}>
+        <div className="k-lft-modal-body">
+          <Input
+            size="sm"
+            placeholder="Search"
+            value={modalFilter}
+            onChange={(e) => setModalFilter(e.target.value)}
+          />
+          <Row size="sm">
+            <Input
+              size="sm"
+              placeholder="Add new values"
+              value={modalAddValues}
+              onChange={(e) => setModalAddValues(e.target.value)}
+            />
+            <IconButton
+              size="sm"
+              icon={faPlus}
+              disabled={!allowAdd}
+              onClick={handleAddValues}
+            />
+          </Row>
+          <div className="k-lft-modal-table-container">
+            <Table<string>
+              striped
+              bordered
+              hover
+              columns={tableColumns}
+              rows={tableRows}
+            />
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default ListFilterTag;

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { useCallback, useMemo } from "react";
+import { DateTime } from "luxon";
+import "./styles.css";
+import {
+  faCalendarDays,
+  faFont,
+  faHashtag,
+  faXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  GeneratedRangeFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollRangeFilterTagProps {
+  filter: GeneratedRangeFilter;
+  filterValue: "startValue" | "endValue";
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
+}
+
+const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
+  const { filter, filterValue } = props;
+
+  const isDate = useMemo(() => {
+    return filter.rangeType === "DATE" || filter.rangeType === "DATETIME";
+  }, [filter.rangeType]);
+
+  const tagTitle = useMemo(() => {
+    const startSuffix = isDate ? "After" : "Start";
+    const endSuffix = isDate ? "Before" : "End";
+    const suffix = filterValue === "startValue" ? startSuffix : endSuffix;
+    return `${filter.title} ${suffix}`;
+  }, [filter.rangeType, filterValue]);
+
+  const tagValue = useMemo(() => {
+    const value = filter[filterValue];
+    if (!value) return "";
+    if (filter.rangeType === "DATE") {
+      return DateTime.fromISO(String(value)).toFormat("D");
+    } else if (filter.rangeType === "DATETIME") {
+      return DateTime.fromISO(String(value)).toFormat("D ttt");
+    } else if (filter.rangeType === "NUMBER") return value;
+    else if (filter.rangeType === "STRING") return value;
+  }, [filter, filterValue, filter.rangeType]);
+
+  const iconToUse = useMemo(() => {
+    if (isDate) return faCalendarDays;
+    else if (filter.rangeType === "NUMBER") return faHashtag;
+    else if (filter.rangeType === "STRING") return faFont;
+  }, [filter.rangeType]);
+
+  const handleRemove = useCallback(() => {
+    const newFilters = props.filters.map((f) => {
+      if (f.filterId !== props.filter.filterId) return f;
+      return { ...f, [filterValue]: undefined };
+    });
+    props.handleNewFilters(newFilters);
+  }, [props.filters, filterValue]);
+
+  return (
+    <div className="k-tag-container">
+      <p className="k-tag-title">{tagTitle}</p>
+      <div className="k-tag-actions">
+        {iconToUse && <FontAwesomeIcon icon={iconToUse} />}
+        <p className="k-tag-value">{tagValue}</p>
+        <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
+      </div>
+    </div>
+  );
+};
+
+export default RangeFilterTag;

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { faMagnifyingGlass, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { useCallback } from "react";
+import "./styles.css";
+import {
+  GeneratedSearchFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollSearchFilterTagProps {
+  filter: GeneratedSearchFilter;
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
+}
+
+const SearchFilterTag = (props: InfiniteScrollSearchFilterTagProps) => {
+  const handleRemove = useCallback(() => {
+    const newFilters = props.filters?.map((f) => {
+      if (f.filterId !== props.filter.filterId) return f;
+      if (f.type !== "SEARCH") return f;
+      return { ...f, value: "" };
+    });
+    props.handleNewFilters(newFilters);
+  }, [props.filters, props.filter]);
+
+  return (
+    <div className="k-tag-container">
+      <p className="k-tag-title">{props.filter.title}</p>
+      <div className="k-tag-actions">
+        <FontAwesomeIcon icon={faMagnifyingGlass} />
+        <p className="k-tag-value">{props.filter.value}</p>
+        <IconButton icon={faXmark} onClick={handleRemove} size="sm" />
+      </div>
+    </div>
+  );
+};
+
+export default SearchFilterTag;

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

@@ -0,0 +1,46 @@
+"use client";
+
+import { faCheckSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../../buttons/iconButton/index.js";
+import { useCallback } from "react";
+import "../styles.css";
+import {
+  GeneratedSelectFilter,
+  InfiniteScrollMenuFilterOption,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../types.js";
+
+interface InfiniteScrollSelectFilterTagProps {
+  filter: GeneratedSelectFilter;
+  filterOption: InfiniteScrollMenuFilterOption;
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
+}
+
+const SelectFilterTag = (props: InfiniteScrollSelectFilterTagProps) => {
+  const handleRemove = useCallback(() => {
+    const newFilters = props.filters.map((f) => {
+      if (props.filter.filterId !== f.filterId || f.type !== "SELECT") return f;
+      const newOptions = f.options?.map((o) => {
+        if (o.id === props.filterOption.id) return { ...o, selected: false };
+        else return o;
+      });
+      return { ...f, options: newOptions };
+    });
+    props.handleNewFilters(newFilters);
+  }, [props]);
+
+  return (
+    <div className="k-tag-container">
+      <p className="k-tag-title">{props.filter.title}</p>
+      <div className="k-tag-actions">
+        <FontAwesomeIcon icon={faCheckSquare} />
+        <p className="k-tag-value">{props.filterOption.name}</p>
+        <IconButton onClick={handleRemove} size="sm" icon={faXmark} />
+      </div>
+    </div>
+  );
+};
+
+export default SelectFilterTag;

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

@@ -0,0 +1,65 @@
+.k-tags-container {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.k-tag-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--primary-color);
+  border-radius: 0.375rem;
+  color: var(--text-color-light);
+  padding-left: 0.5rem;
+}
+
+.k-tag-title {
+  margin: 0;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.k-tag-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  margin-top: -0.25rem;
+}
+
+.k-tag-value {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.k-lft-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.k-lft-modal-body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+
+.k-lft-modal-table-container {
+  max-height: 30rem;
+  overflow-y: auto;
+}
+
+.k-lft-modal-table-header {
+  width: 5rem;
+}
+
+.k-lft-modal-table-remove-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}

package/src/components/data-display/infiniteScroll/types.ts

@@ -0,0 +1,125 @@
+import type { DataKey } from "../dataTable/types.js";
+
+export type {
+  DataKey,
+  TableColumn,
+  TableRow,
+  TableLeadingColumn,
+} from "../dataTable/types.js";
+
+export type RangeType = "DATE" | "DATETIME" | "NUMBER" | "STRING";
+export type RangeValue = string | number;
+export type SortDirection = "asc" | "desc";
+
+export interface InfiniteScrollMenu {
+  title: string;
+  limitOptions?: InfiniteScrollMenuLimitOption[];
+  filters?: InfiniteScrollMenuFilter[];
+  sort?: InfiniteScrollMenuSort;
+}
+
+export type InfiniteScrollMenuFilter =
+  RangeFilter | SearchFilter | SelectFilter | ListFilter;
+
+export type InfiniteScrollMenuGeneratedFilter =
+  | GeneratedRangeFilter
+  | GeneratedSearchFilter
+  | GeneratedSelectFilter
+  | GeneratedListFilter;
+
+interface BaseFilter {
+  title: string;
+  dataKey: DataKey;
+  searchType?: SearchType[];
+}
+
+interface GeneratedBaseFilter extends BaseFilter {
+  filterId: string;
+}
+
+export interface RangeFilter extends BaseFilter {
+  type: "RANGE";
+  startValue?: RangeValue;
+  endValue?: RangeValue;
+  rangeType?: RangeType;
+}
+
+export interface GeneratedRangeFilter
+  extends RangeFilter, GeneratedBaseFilter {}
+
+export interface SearchFilter extends BaseFilter {
+  type: "SEARCH";
+  value?: string;
+}
+
+export interface GeneratedSearchFilter
+  extends SearchFilter, GeneratedBaseFilter {}
+
+export interface SelectFilter extends BaseFilter {
+  type: "SELECT";
+  options: InfiniteScrollMenuFilterOption[];
+  multiSelect?: boolean;
+}
+
+export interface GeneratedSelectFilter
+  extends SelectFilter, GeneratedBaseFilter {}
+
+export interface ListFilter extends BaseFilter {
+  type: "LIST";
+  list: string;
+}
+
+export interface GeneratedListFilter extends ListFilter, GeneratedBaseFilter {}
+
+/**
+ * SearchType allows a more complex search to be performed on the data.
+ *
+ * For example, if you want to search for a string that starts with a value, you would use the "startsWith" type.
+ *
+ * @example
+ * const dataKey = "tasks.assignee.email"
+ * const searchType = {
+ *  type: "startsWith",
+ *  key: "email"
+ * }
+ * // This will search for the email that starts with the value provided
+ */
+export interface SearchType {
+  /** The Prisma search type to use */
+  type:
+    | "some"
+    | "every"
+    | "none"
+    | "in"
+    | "gte"
+    | "lte"
+    | "contains"
+    | "startsWith"
+    | "endsWith"
+    | "not";
+  /** The dataKey segment to use the type with */
+  key: string;
+}
+
+export interface InfiniteScrollMenuFilterOption {
+  id: number | string;
+  name: string;
+  selected: boolean;
+}
+
+export interface InfiniteScrollMenuLimitOption {
+  value: number;
+  selected: boolean;
+}
+
+export interface InfiniteScrollMenuSort {
+  sortDataKeys: InfiniteScrollMenuSortDataKey[];
+  /** Sort direction to use on load. Defaults to desc */
+  sortDirection?: SortDirection;
+}
+
+export interface InfiniteScrollMenuSortDataKey {
+  dataKey: DataKey;
+  displayName: string;
+  selected: boolean;
+}

package/src/components/data-display/infiniteScroll/utils/generateQueryString.ts

@@ -0,0 +1,75 @@
+import {
+  InfiniteScrollMenuGeneratedFilter,
+  InfiniteScrollMenuLimitOption,
+  InfiniteScrollMenuSortDataKey,
+  SortDirection,
+} from "../types.js";
+
+interface GenerateQueryStringParams {
+  filters: InfiniteScrollMenuGeneratedFilter[];
+  limitOptions: InfiniteScrollMenuLimitOption[];
+  sortBy: InfiniteScrollMenuSortDataKey[];
+  sortDirection: SortDirection;
+  dataLength: number;
+  isNextPage?: boolean;
+}
+
+const generateQueryString = (params: GenerateQueryStringParams): string => {
+  const {
+    filters,
+    limitOptions,
+    sortBy,
+    sortDirection,
+    dataLength,
+    isNextPage = false,
+  } = params;
+
+  const defaultLimit = 10;
+  const limit = limitOptions.find((opt) => opt.selected)?.value || defaultLimit;
+  const offset = isNextPage ? dataLength : 0;
+
+  const queryParams = new URLSearchParams();
+  queryParams.set("limit", String(limit));
+  queryParams.set("offset", String(offset));
+
+  // Sort params
+  const selectedSort = sortBy.find((s) => s.selected);
+  if (selectedSort) {
+    queryParams.set("sort", selectedSort.dataKey);
+    queryParams.set("sortDir", sortDirection);
+  }
+
+  // Filter params - simple key-value format for server-side validation
+  for (const filter of filters) {
+    const key = filter.dataKey;
+
+    if (filter.type === "SEARCH" && filter.value) {
+      queryParams.set(`filter[${key}]`, filter.value);
+      queryParams.set(`filter[${key}_op]`, "contains");
+    } else if (filter.type === "RANGE") {
+      if (filter.startValue !== undefined) {
+        queryParams.set(`filter[${key}_gte]`, String(filter.startValue));
+      }
+      if (filter.endValue !== undefined) {
+        queryParams.set(`filter[${key}_lte]`, String(filter.endValue));
+      }
+    } else if (filter.type === "SELECT") {
+      const selectedOptions = filter.options
+        .filter((opt) => opt.selected)
+        .map((opt) => opt.id);
+      if (selectedOptions.length > 0) {
+        queryParams.set(`filter[${key}]`, selectedOptions.join(","));
+        if (filter.multiSelect) {
+          queryParams.set(`filter[${key}_op]`, "in");
+        }
+      }
+    } else if (filter.type === "LIST" && filter.list) {
+      queryParams.set(`filter[${key}]`, filter.list);
+      queryParams.set(`filter[${key}_op]`, "in");
+    }
+  }
+
+  return queryParams.toString();
+};
+
+export default generateQueryString;