@kosmeo-ui/react 0.1.0 → 0.2.0

package/src/hooks/usePaginated.ts

@@ -0,0 +1,123 @@
+"use client";
+
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { AxiosInstance } from "axios";
+
+interface OffsetPageResponse<T> {
+  data: T[];
+  total: number;
+}
+
+type QueryParams = Record<string, string | number | boolean | undefined>;
+
+interface UsePaginatedOptions {
+  axiosInstance: AxiosInstance;
+  /** API endpoint to fetch from (e.g., "/v1/projects"). It takes `limit` and `offset` and returns `{ data, total }`. */
+  endpoint: string;
+  /** Query key for React Query caching. */
+  queryKey: string;
+  /** Organization ID to scope cache keys (prevents stale cross-org data). */
+  orgId?: string | null;
+  /** Initial page size (default: 10). */
+  initialPageSize?: number;
+  /** Extra query params such as filters and sort. Changing them returns to page 1. */
+  params?: QueryParams;
+  enabled?: boolean;
+}
+
+export interface UsePaginatedReturn<T> {
+  /** The current page's rows. */
+  data: T[];
+  /** Total matching rows across all pages. */
+  total: number;
+  /** Current page, starting at 1. */
+  page: number;
+  pageSize: number;
+  pageCount: number;
+  setPage: (page: number) => void;
+  /** Changes the page size and returns to page 1. */
+  setPageSize: (pageSize: number) => void;
+  /** True until the first page arrives. */
+  isLoading: boolean;
+  /** True whenever a page is loading, including after the first. */
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+/**
+ * One page at a time from an offset endpoint (`limit` + `offset` in,
+ * `{ data, total }` out), for `Pagination`. The previous page stays on screen
+ * while the next one loads. Use `useInfiniteCursor` for `InfiniteScroll`.
+ */
+const usePaginated = <T>(
+  options: UsePaginatedOptions
+): UsePaginatedReturn<T> => {
+  const {
+    axiosInstance,
+    endpoint,
+    queryKey,
+    orgId,
+    initialPageSize = 10,
+    params,
+    enabled = true,
+  } = options;
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSizeState] = useState(initialPageSize);
+
+  // New filters or sort make the old page number meaningless.
+  const paramsKey = JSON.stringify(params ?? {});
+  const [prevParamsKey, setPrevParamsKey] = useState(paramsKey);
+  if (paramsKey !== prevParamsKey) {
+    setPrevParamsKey(paramsKey);
+    setPage(1);
+  }
+
+  const query = useQuery<OffsetPageResponse<T>, Error>({
+    queryKey: [`${queryKey}-paged`, orgId ?? null, paramsKey, page, pageSize],
+    enabled,
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const res = await axiosInstance.get<OffsetPageResponse<T>>(endpoint, {
+        params: { ...params, limit: pageSize, offset: (page - 1) * pageSize },
+      });
+      return res.data;
+    },
+  });
+
+  const total = query.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+
+  // Rows deleted from the last page can leave it empty; step back.
+  useEffect(() => {
+    if (query.data && !query.isPlaceholderData && page > pageCount) {
+      setPage(pageCount);
+    }
+  }, [query.data, query.isPlaceholderData, page, pageCount]);
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setPage(1);
+  }, []);
+
+  const { refetch } = query;
+  const refetchPage = useCallback(() => void refetch(), [refetch]);
+
+  return {
+    data: query.data?.data ?? [],
+    total,
+    page,
+    pageSize,
+    pageCount,
+    setPage,
+    setPageSize,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch: refetchPage,
+  };
+};
+
+export default usePaginated;

package/src/styles.css

@@ -81,12 +81,14 @@ h6 {
   --primary-color-active: #141f6c;
   --primary-color-background: #3d52db;
   --primary-color-background-light: #f0f2ff;
+  /* Primary as text (links, active tabs) on page and card surfaces. */
+  --primary-color-text: #17257d;
 
-  /* Secondary Colors */
-  --secondary-color: #858585;
-  --secondary-color-hover: #8c8c8c;
-  --secondary-color-active: #808080;
-  --secondary-color-background: #a6a6a6;
+  /* Secondary Colors — dark enough for white text (4.5:1) */
+  --secondary-color: #6b6b6b;
+  --secondary-color-hover: #757575;
+  --secondary-color-active: #616161;
+  --secondary-color-background: #6b6b6b;
 
   /* Light Colors */
   --light-color: #fafafa;
@@ -101,18 +103,22 @@ h6 {
   --warning-color-background: #ffd24d;
   --warning-color-background-light: #fff8e1;
   --warning-color-text: #92400e;
+  /* Text on a warning fill. */
+  --warning-color-contrast: #333;
 
   /* Danger Colors */
   --danger-color: #dc3545;
   --danger-color-hover: #e23243;
   --danger-color-active: #d92638;
-  --danger-color-background: #e46774;
+  --danger-color-background: #c42b3b;
+  /* Danger as text (field errors) on page and card surfaces. */
+  --danger-color-text: #b92535;
 
   /* Success Colors */
   --success-color: #198754;
   --success-color-hover: #1c975d;
   --success-color-active: #188150;
-  --success-color-background: #24c278;
+  --success-color-background: #157347;
   --success-color-background-light: #e8f5e8;
 
   /* Background Colors */
@@ -136,7 +142,7 @@ h6 {
   --text-color: #333;
   --text-color-secondary: #666;
   --text-color-light: white;
-  --text-color-link: #007bff;
+  --text-color-link: #0062cc;
   --text-size-sm: 0.875rem;
   --text-size-md: 1rem;
   --text-size-lg: 1.125rem;
@@ -161,11 +167,12 @@ h6 {
   --primary-color-active: #3d4f99;
   --primary-color-background: #4a5fb5;
   --primary-color-background-light: #1c2240;
+  --primary-color-text: #9aabf2;
 
   /* Secondary Colors */
-  --secondary-color: #8a8f99;
-  --secondary-color-hover: #9aa0aa;
-  --secondary-color-active: #7a7f88;
+  --secondary-color: #646a75;
+  --secondary-color-hover: #6e7480;
+  --secondary-color-active: #5a606a;
   --secondary-color-background: #4a4f5a;
 
   /* Light Colors — surface-toned (used for "light" variant buttons/pills) */
@@ -181,17 +188,19 @@ h6 {
   --warning-color-background: #4d3a00;
   --warning-color-background-light: #2e2200;
   --warning-color-text: #f5c542;
+  --warning-color-contrast: #15181f;
 
   /* Danger Colors */
   --danger-color: #c94250;
   --danger-color-hover: #d35261;
   --danger-color-active: #b53847;
   --danger-color-background: #4a1820;
+  --danger-color-text: #ff8f9a;
 
   /* Success Colors */
-  --success-color: #2a9560;
-  --success-color-hover: #32a66c;
-  --success-color-active: #248355;
+  --success-color: #1f7a4e;
+  --success-color-hover: #238556;
+  --success-color-active: #1b6d45;
   --success-color-background: #133e2c;
   --success-color-background-light: #0d2419;
 
@@ -384,3 +393,17 @@ code {
 .k-flex-wrap {
   flex-wrap: wrap;
 }
+
+/* Visually hidden, still read by screen readers. Global so any component can
+   use it without depending on another component's stylesheet. */
+.k-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.d.ts

@@ -1,10 +0,0 @@
-import "./styles.css";
-import { GeneratedSearchFilter, InfiniteScrollMenuGeneratedFilter } from "../types.js";
-interface InfiniteScrollSearchFilterTagProps {
-    filter: GeneratedSearchFilter;
-    filters: InfiniteScrollMenuGeneratedFilter[];
-    handleNewFilters: (filters: InfiniteScrollMenuGeneratedFilter[]) => void;
-}
-declare const SearchFilterTag: (props: InfiniteScrollSearchFilterTagProps) => import("react").JSX.Element;
-export default SearchFilterTag;
-//# sourceMappingURL=searchFilterTag.d.ts.map

package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchFilterTag.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/tags/searchFilterTag.tsx"],"names":[],"mappings":"AAMA,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,qBAAqB,EACrB,iCAAiC,EAClC,MAAM,aAAa,CAAC;AAErB,UAAU,kCAAkC;IAC1C,MAAM,EAAE,qBAAqB,CAAC;IAC9B,OAAO,EAAE,iCAAiC,EAAE,CAAC;IAC7C,gBAAgB,EAAE,CAAC,OAAO,EAAE,iCAAiC,EAAE,KAAK,IAAI,CAAC;CAC1E;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,kCAAkC,gCAoBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.js

@@ -1,22 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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";
-const SearchFilterTag = (props) => {
-    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 (_jsxs("div", { className: "k-tag-container", children: [_jsx("p", { className: "k-tag-title", children: props.filter.title }), _jsxs("div", { className: "k-tag-actions", children: [_jsx(FontAwesomeIcon, { icon: faMagnifyingGlass }), _jsx("p", { className: "k-tag-value", children: props.filter.value }), _jsx(IconButton, { icon: faXmark, onClick: handleRemove, size: "sm" })] })] }));
-};
-export default SearchFilterTag;
-//# sourceMappingURL=searchFilterTag.js.map

package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchFilterTag.js","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/tags/searchFilterTag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,UAAU,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,cAAc,CAAC;AAYtB,MAAM,eAAe,GAAG,CAAC,KAAyC,EAAE,EAAE;IACpE,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO,CAAC,CAAC;YACnD,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO,CAAC,CAAC;YAClC,OAAO,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,eAAK,SAAS,EAAC,iBAAiB,aAC9B,YAAG,SAAS,EAAC,aAAa,YAAE,KAAK,CAAC,MAAM,CAAC,KAAK,GAAK,EACnD,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAC,eAAe,IAAC,IAAI,EAAE,iBAAiB,GAAI,EAC5C,YAAG,SAAS,EAAC,aAAa,YAAE,KAAK,CAAC,MAAM,CAAC,KAAK,GAAK,EACnD,KAAC,UAAU,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAC,IAAI,GAAG,IAC1D,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,41 +0,0 @@
-"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;