@kosmeo-ui/react 0.1.1 → 1.0.0

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

@@ -1,16 +1,10 @@
 "use client";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import IconButton from "../../../buttons/iconButton/index.js";
+import { hasRangeValue } from "../utils/hasPendingChanges.js";
+import Badge from "../../../feedback/badge/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,
@@ -39,21 +33,15 @@ const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
 
   const tagValue = useMemo(() => {
     const value = filter[filterValue];
-    if (!value) return "";
+    if (!hasRangeValue(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;
+    }
+    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;
@@ -63,14 +51,9 @@ const RangeFilterTag = (props: InfiniteScrollRangeFilterTagProps) => {
   }, [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>
+    <Badge onRemove={handleRemove}>
+      {tagTitle}: {tagValue}
+    </Badge>
   );
 };
 

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

@@ -1,8 +1,6 @@
 "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 Badge from "../../../feedback/badge/index.js";
 import { useCallback } from "react";
 import "../styles.css";
 import {
@@ -32,14 +30,9 @@ const SelectFilterTag = (props: InfiniteScrollSelectFilterTagProps) => {
   }, [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>
+    <Badge onRemove={handleRemove}>
+      {props.filter.title}: {props.filterOption.name}
+    </Badge>
   );
 };
 

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

@@ -2,42 +2,14 @@
   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;
+  gap: 0.25rem;
 }
 
 .k-lft-modal-body {

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

@@ -1,3 +1,4 @@
+import { hasRangeValue } from "./hasPendingChanges.js";
 import {
   InfiniteScrollMenuGeneratedFilter,
   InfiniteScrollMenuLimitOption,
@@ -39,37 +40,51 @@ const generateQueryString = (params: GenerateQueryStringParams): string => {
     queryParams.set("sortDir", sortDirection);
   }
 
-  // Filter params - simple key-value format for server-side validation
+  for (const [name, value] of Object.entries(filterParams(filters))) {
+    queryParams.set(name, value);
+  }
+
+  return queryParams.toString();
+};
+
+/**
+ * The `filter[...]` query params for the filters' current values: simple
+ * key-value pairs for server-side validation. Shared by InfiniteScroll and
+ * TableFilters, so both send the same format.
+ */
+export const filterParams = (
+  filters: InfiniteScrollMenuGeneratedFilter[]
+): Record<string, string> => {
+  const params: Record<string, string> = {};
   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");
+      params[`filter[${key}]`] = filter.value;
+      params[`filter[${key}_op]`] = "contains";
     } else if (filter.type === "RANGE") {
-      if (filter.startValue !== undefined) {
-        queryParams.set(`filter[${key}_gte]`, String(filter.startValue));
+      if (hasRangeValue(filter.startValue)) {
+        params[`filter[${key}_gte]`] = String(filter.startValue);
       }
-      if (filter.endValue !== undefined) {
-        queryParams.set(`filter[${key}_lte]`, String(filter.endValue));
+      if (hasRangeValue(filter.endValue)) {
+        params[`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(","));
+        params[`filter[${key}]`] = selectedOptions.join(",");
         if (filter.multiSelect) {
-          queryParams.set(`filter[${key}_op]`, "in");
+          params[`filter[${key}_op]`] = "in";
         }
       }
     } else if (filter.type === "LIST" && filter.list) {
-      queryParams.set(`filter[${key}]`, filter.list);
-      queryParams.set(`filter[${key}_op]`, "in");
+      params[`filter[${key}]`] = filter.list;
+      params[`filter[${key}_op]`] = "in";
     }
   }
-
-  return queryParams.toString();
+  return params;
 };
 
 export default generateQueryString;

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

@@ -2,6 +2,7 @@ import {
   InfiniteScrollMenuGeneratedFilter,
   InfiniteScrollMenuLimitOption,
   InfiniteScrollMenuSortDataKey,
+  RangeValue,
   SortDirection,
 } from "../types.js";
 
@@ -29,12 +30,18 @@ export const hasPendingChanges = (params: PendingChangesParams): boolean => {
   );
 };
 
+/** A range bound is set unless it's missing or empty; `0` is a real bound. */
+export const hasRangeValue = (
+  value: RangeValue | undefined
+): value is RangeValue => value !== undefined && value !== "";
+
 export const hasActiveFilters = (
   pendingFilters: InfiniteScrollMenuGeneratedFilter[]
 ): boolean => {
   for (const filter of pendingFilters) {
     if (filter.type === "RANGE") {
-      if (filter.startValue || filter.endValue) return true;
+      if (hasRangeValue(filter.startValue) || hasRangeValue(filter.endValue))
+        return true;
     } else if (filter.type === "SEARCH") {
       if (filter.value) return true;
     } else if (filter.type === "LIST") {
@@ -46,7 +53,42 @@ export const hasActiveFilters = (
   return false;
 };
 
-const hasFilterChanges = (
+/** The filters with every value cleared, for Reset. */
+export const clearFilters = (
+  filters: InfiniteScrollMenuGeneratedFilter[]
+): InfiniteScrollMenuGeneratedFilter[] =>
+  filters.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: "" };
+  });
+
+/**
+ * Whether a pending change is in a search box: applied immediately, searches
+ * wait for a pause in typing. (Ranges apply from their menu's Apply button.)
+ */
+export const hasTypedFilterChanges = (
+  filters: InfiniteScrollMenuGeneratedFilter[],
+  pendingFilters: InfiniteScrollMenuGeneratedFilter[]
+): boolean =>
+  filters.some(
+    (filter, i) =>
+      filter.type === "SEARCH" &&
+      hasFilterChanges([filter], [pendingFilters[i]])
+  );
+
+// An emptied field is "" and an untouched one undefined; both mean unset.
+const isSameValue = (a: unknown, b: unknown) =>
+  a === b || ((a === "" || a === undefined) && (b === "" || b === undefined));
+
+export const hasFilterChanges = (
   filters: InfiniteScrollMenuGeneratedFilter[],
   pendingFilters: InfiniteScrollMenuGeneratedFilter[]
 ): boolean => {
@@ -63,22 +105,12 @@ const hasFilterChanges = (
       if (!selected.every((o) => pendingSelected.some((p) => p.id === o.id)))
         return true;
     } else if (filter.type === "SEARCH" && pending.type === "SEARCH") {
-      if (filter.value !== pending.value) {
-        if (!(filter.value === "" && pending.value === undefined)) return true;
-      }
+      if (!isSameValue(filter.value, pending.value)) return true;
     } else if (filter.type === "RANGE" && pending.type === "RANGE") {
-      if (filter.startValue !== pending.startValue) {
-        if (!(filter.startValue === "" && pending.startValue === undefined))
-          return true;
-      }
-      if (filter.endValue !== pending.endValue) {
-        if (!(filter.endValue === "" && pending.endValue === undefined))
-          return true;
-      }
+      if (!isSameValue(filter.startValue, pending.startValue)) return true;
+      if (!isSameValue(filter.endValue, pending.endValue)) return true;
     } else if (filter.type === "LIST" && pending.type === "LIST") {
-      if (filter.list !== pending.list) {
-        if (!(filter.list === "" && pending.list === undefined)) return true;
-      }
+      if (!isSameValue(filter.list, pending.list)) return true;
     }
   }
   return false;

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

@@ -24,7 +24,7 @@
   justify-content: space-between;
   gap: 1.5rem;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--k-border-color);
 }
 
 .k-list-card > div:last-child {
@@ -35,7 +35,7 @@
   font-weight: 600;
   text-align: left;
   flex-shrink: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-list-card dd {
@@ -44,5 +44,5 @@
 
 .k-list-card-actions {
   padding-top: 1rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }

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

@@ -4,9 +4,9 @@
   justify-content: space-between;
   gap: 0.75rem;
   padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.25rem;
-  background: var(--background-color);
+  background: var(--k-background-color);
 }
 
 .k-list-row-body {

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

@@ -4,9 +4,9 @@
   padding: 0.75rem;
   display: grid;
   gap: 0.5rem;
-  border: 0.0625rem solid var(--border-color);
+  border: 0.0625rem solid var(--k-border-color);
   border-radius: 0.375rem;
-  background: var(--background-color-light, var(--background-color));
+  background: var(--k-background-color-light, var(--k-background-color));
 }
 
 .k-recovery-code-grid-1col {
@@ -34,8 +34,7 @@
 
 .k-recovery-code-grid-index {
   font-size: 0.75rem;
-  color: var(--text-color);
-  opacity: 0.55;
+  color: var(--k-text-color-secondary);
   min-width: 1.5rem;
   text-align: right;
 }

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

@@ -3,21 +3,21 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 0.375rem;
-  background: var(--background-color-light);
+  background: var(--k-background-color-light);
 }
 
 .k-secret-display-leading {
   flex-shrink: 0;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-secret-display-value {
   flex: 1;
   min-width: 0;
   padding: 0.125rem 0.25rem;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
   border-radius: 0.25rem;
   word-break: break-all;
   user-select: all;

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

@@ -24,7 +24,7 @@
 }
 
 .k-stat-card-compact .k-card {
-  background: var(--background-color-dark);
+  background: var(--k-background-color-dark);
 }
 
 .k-stat-card-icon {
@@ -34,25 +34,25 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-color-light);
+  color: var(--k-text-color-light);
   font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .k-stat-card-icon-primary {
-  background-color: var(--primary-color);
+  background-color: var(--k-primary-color);
 }
 .k-stat-card-icon-secondary {
-  background-color: var(--secondary-color);
+  background-color: var(--k-secondary-color);
 }
 .k-stat-card-icon-success {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }
 .k-stat-card-icon-warning {
-  background-color: var(--warning-color);
+  background-color: var(--k-warning-color);
 }
 .k-stat-card-icon-danger {
-  background-color: var(--danger-color);
+  background-color: var(--k-danger-color);
 }
 
 .k-stat-card-content {
@@ -63,19 +63,19 @@
 .k-stat-card-default .k-stat-card-value {
   font-size: 2rem;
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--k-text-color);
   line-height: 1;
 }
 
 .k-stat-card-default .k-stat-card-label {
   font-size: 0.875rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   margin-top: 0.25rem;
 }
 
 .k-stat-card-compact .k-stat-card-label {
   font-size: 0.75rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -87,10 +87,10 @@
 }
 
 .k-stat-card-trailing {
-  color: var(--border-color);
+  color: var(--k-border-color);
   flex-shrink: 0;
 }
 
 .k-stat-card-interactive:hover .k-stat-card-trailing {
-  color: var(--primary-color);
+  color: var(--k-primary-color-text);
 }

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

@@ -5,8 +5,8 @@
   padding: 0.5rem 0.75rem;
   font-size: 0.85rem;
   font-weight: 600;
-  background-color: var(--background-color-dark);
-  border: 1px solid var(--border-color);
+  background-color: var(--k-background-color-dark);
+  border: 1px solid var(--k-border-color);
   border-radius: 4px;
 }
 
@@ -17,10 +17,10 @@
 }
 
 .k-summary-row-label {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-weight: 500;
 }
 
 .k-summary-row-value {
-  color: var(--text-color);
+  color: var(--k-text-color);
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
+import parseDataKey, { cellText } from "../dataTable/utils/parseDataKey.js";
 import type { TableColumn, TableRow } from "../dataTable/types.js";
-import parseDataKey from "../dataTable/utils/parseDataKey.js";
 import { ReactNode } from "react";
 import "./styles.css";
 
@@ -110,7 +110,7 @@ const Table = <TData,>({
                   const content = c.cellElement
                     ? c.cellElement(row, i)
                     : c.dataKey
-                      ? (parseDataKey(c.dataKey, row) as ReactNode)
+                      ? cellText(parseDataKey(c.dataKey, row))
                       : null;
                   return (
                     <td

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

@@ -2,13 +2,24 @@
   width: 100%;
   border-collapse: collapse;
   text-align: left;
-  color: var(--text-color);
-  background-color: var(--background-color-light);
+  color: var(--k-text-color);
+  background-color: var(--k-background-color-light);
 }
 
 .k-table th,
 .k-table td {
-  padding: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* Keep text clear of the table's outer edges. */
+.k-table th:first-child,
+.k-table td:first-child {
+  padding-left: 1rem;
+}
+
+.k-table th:last-child,
+.k-table td:last-child {
+  padding-right: 1rem;
 }
 
 .k-table th {
@@ -16,25 +27,25 @@
 }
 
 .k-table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
 }
 
 .k-table-hover tbody tr:hover {
-  background-color: var(--background-color-hover);
+  background-color: var(--k-background-color-hover);
 }
 
 .k-table-bordered {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
 }
 
 .k-table-bordered th,
 .k-table-bordered td {
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--k-border-color);
 }
 
 .k-table-bordered th:not(:first-child),
 .k-table-bordered td:not(:first-child) {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--k-border-color);
 }
 
 /* ===== Clickable rows ===== */
@@ -44,18 +55,18 @@
 
 /* ===== Row selection (caller marks rows with data-selected="true") ===== */
 .k-table tbody tr[data-selected="true"] {
-  background-color: var(--primary-color-background-light);
+  background-color: var(--k-primary-color-background-light);
 }
 
 /* ===== Scrollable wrapper with sticky header ===== */
 .k-table-scroll-container {
   overflow-y: auto;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--k-border-color);
   border-radius: 4px;
 }
 
 .k-table-scroll-container .k-table thead tr {
   position: sticky;
   top: 0;
-  background: var(--background-color-light);
+  background: var(--k-background-color-light);
 }