@kosmeo-ui/react 0.1.1 → 1.0.0

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

@@ -0,0 +1,147 @@
+"use client";
+
+import * as pendingChangesUtil from "../infiniteScroll/utils/hasPendingChanges.js";
+import { filterParams } from "../infiniteScroll/utils/generateQueryString.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Filters from "../infiniteScroll/filters/index.js";
+import Button from "../../buttons/button/index.js";
+import Tags from "../infiniteScroll/tags/index.js";
+import Col from "../../layout/col/index.js";
+import {
+  InfiniteScrollMenuFilter,
+  InfiniteScrollMenuGeneratedFilter,
+} from "../infiniteScroll/types.js";
+
+const TYPING_DEBOUNCE_MS = 400;
+
+export interface TableFiltersProps {
+  /**
+   * The filters to offer, as in InfiniteScroll's `menu.filters`. They're
+   * compared by contents, so an inline array is fine; changing them resets
+   * every filter to the new definitions.
+   */
+  filters: InfiniteScrollMenuFilter[];
+  /**
+   * Called with the applied filters as query params (`filter[status]`,
+   * `filter[mrr_gte]`, …), ready to spread into `usePaginated`'s `params`.
+   * It fires once on mount, with `{}` unless a filter starts with a value.
+   */
+  onChange: (params: Record<string, string>) => void;
+  /**
+   * `"immediate"` (default) applies each change as it's made: searches wait
+   * for a pause in typing, and a range (two bounds in one menu) applies from
+   * the menu's own Apply button. `"manual"` collects changes until Apply is
+   * clicked. Enter in a filter's text box applies in both.
+   */
+  applyMode?: "immediate" | "manual";
+}
+
+const generate = (filters: InfiniteScrollMenuFilter[]) =>
+  filters.map((f, i): InfiniteScrollMenuGeneratedFilter => ({
+    ...f,
+    filterId: `${f.dataKey}-${i}`,
+  }));
+
+/**
+ * InfiniteScroll's filter bar on its own, for tables that page or load some
+ * other way: search, select, range and list filters with tags and Reset. It
+ * reports the applied filters as query params.
+ */
+const TableFilters = ({
+  filters: definitions,
+  onChange,
+  applyMode = "immediate",
+}: TableFiltersProps) => {
+  const [filters, setFilters] = useState(() => generate(definitions));
+  const [pendingFilters, setPendingFilters] = useState(filters);
+
+  // The definitions are plain data, as InfiniteScroll's menu: start over when
+  // their contents change, not each time they're a new array.
+  const definitionsKey = JSON.stringify(definitions);
+  const [prevDefinitionsKey, setPrevDefinitionsKey] = useState(definitionsKey);
+  if (definitionsKey !== prevDefinitionsKey) {
+    const next = generate(definitions);
+    setPrevDefinitionsKey(definitionsKey);
+    setFilters(next);
+    setPendingFilters(next);
+  }
+
+  // Report only when the params actually change, not on every new array.
+  const params = useMemo(() => filterParams(filters), [filters]);
+  const paramsKey = JSON.stringify(params);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    onChangeRef.current(params);
+  }, [paramsKey]);
+
+  const hasPendingChanges = useMemo(
+    () => pendingChangesUtil.hasFilterChanges(filters, pendingFilters),
+    [filters, pendingFilters]
+  );
+  const hasActiveFilters =
+    pendingChangesUtil.hasActiveFilters(pendingFilters) ||
+    pendingChangesUtil.hasActiveFilters(filters);
+
+  const handleApply = useCallback(
+    () => setFilters(pendingFilters),
+    [pendingFilters]
+  );
+
+  useEffect(() => {
+    if (applyMode !== "immediate" || !hasPendingChanges) return;
+    const delay = pendingChangesUtil.hasTypedFilterChanges(
+      filters,
+      pendingFilters
+    )
+      ? TYPING_DEBOUNCE_MS
+      : 0;
+    const timer = setTimeout(handleApply, delay);
+    return () => clearTimeout(timer);
+  }, [applyMode, hasPendingChanges, handleApply, filters, pendingFilters]);
+
+  // Removing a tag applies at once; the pending copy of that filter follows.
+  const handleTagChange = useCallback(
+    (next: InfiniteScrollMenuGeneratedFilter[]) => {
+      setPendingFilters((pending) =>
+        pending.map((p, i) => (next[i] !== filters[i] ? next[i] : p))
+      );
+      setFilters(next);
+    },
+    [filters]
+  );
+
+  const handleReset = useCallback(() => {
+    const cleared = pendingChangesUtil.clearFilters(pendingFilters);
+    setPendingFilters(cleared);
+    setFilters(cleared);
+  }, [pendingFilters]);
+
+  return (
+    <Col size="sm">
+      <Filters
+        pendingFilters={pendingFilters}
+        handleNewPendingFilters={setPendingFilters}
+        onApply={hasPendingChanges ? handleApply : undefined}
+        rangeApplyInMenu={applyMode === "immediate"}
+      >
+        <Button
+          size="sm"
+          variant="danger"
+          disabled={!hasActiveFilters}
+          onClick={handleReset}
+        >
+          Reset
+        </Button>
+        {applyMode === "manual" && (
+          <Button size="sm" disabled={!hasPendingChanges} onClick={handleApply}>
+            Apply
+          </Button>
+        )}
+      </Filters>
+      <Tags filters={filters} handleNewFilters={handleTagChange} />
+    </Col>
+  );
+};
+
+export default TableFilters;

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

@@ -20,10 +20,13 @@ const TagCard = (props: TagCardProps) => {
         <h3>{props.title}</h3>
         {props.tags.length ? (
           <ul className="k-tag-card-list">
-            {props.tags.map((t) => (
-              <Badge key={t} variant={color} size="md" pill>
-                {t}
-              </Badge>
+            {/* Tags can repeat and hold no state, so position is part of the key. */}
+            {props.tags.map((t, i) => (
+              <li key={`${i}-${t}`}>
+                <Badge variant={color} size="md" pill>
+                  {t}
+                </Badge>
+              </li>
             ))}
           </ul>
         ) : (

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

@@ -8,7 +8,7 @@
 }
 
 .k-tag-card-empty-text {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   margin: 0;
 }

package/src/components/feedback/alert/styles.css

@@ -43,46 +43,46 @@
 }
 
 .k-alert-primary {
-  background-color: var(--primary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-secondary {
-  background-color: var(--secondary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-danger {
-  background-color: var(--danger-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-warning {
-  background-color: var(--warning-color-background);
-  color: var(--text-color);
+  background-color: var(--k-warning-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-success {
-  background-color: var(--success-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-alert-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-alert-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }

package/src/components/feedback/badge/index.tsx

@@ -55,30 +55,49 @@ const Badge = ({
           backgroundColor: color,
           color:
             getContrastTextColor(color) === "light"
-              ? "var(--text-color-light)"
-              : "var(--text-color)",
+              ? "var(--k-text-color-light)"
+              : "var(--k-text-color)",
         }
       : undefined;
 
-  const content = (
+  const label = (
     <>
       {startIcon && <span className="k-badge-start-icon">{startIcon}</span>}
       <span className="k-badge-content">{children}</span>
-      {onRemove && (
+    </>
+  );
+
+  const removeButton = onRemove && (
+    <button
+      type="button"
+      aria-label="Remove"
+      className="k-badge-remove"
+      onClick={(e) => {
+        e.stopPropagation();
+        onRemove();
+      }}
+    >
+      <FontAwesomeIcon icon={faXmark} />
+    </button>
+  );
+
+  // Clickable and removable: two sibling buttons in a span, since a button
+  // can't contain another.
+  if (onClick && onRemove) {
+    return (
+      <span className={classes} style={inlineStyle}>
         <button
           type="button"
-          aria-label="Remove"
-          className="k-badge-remove"
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove();
-          }}
+          aria-label={ariaLabel}
+          className="k-badge-action"
+          onClick={onClick}
         >
-          <FontAwesomeIcon icon={faXmark} />
+          {label}
         </button>
-      )}
-    </>
-  );
+        {removeButton}
+      </span>
+    );
+  }
 
   if (onClick) {
     return (
@@ -89,14 +108,15 @@ const Badge = ({
         style={inlineStyle}
         onClick={onClick}
       >
-        {content}
+        {label}
       </button>
     );
   }
 
   return (
     <span className={classes} style={inlineStyle}>
-      {content}
+      {label}
+      {removeButton}
     </span>
   );
 };

package/src/components/feedback/badge/styles.css

@@ -21,6 +21,18 @@ button.k-badge {
   opacity: 0.85;
 }
 
+.k-badge-action {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
 .k-badge-start-icon {
   display: inline-flex;
   align-items: center;
@@ -67,33 +79,33 @@ button.k-badge {
 
 /* Variants */
 .k-badge-primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-secondary {
-  background-color: var(--secondary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-badge-danger {
-  background-color: var(--danger-color);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-warning {
-  background-color: var(--warning-color);
-  color: var(--text-color);
+  background-color: var(--k-warning-color);
+  color: var(--k-warning-color-contrast);
 }
 
 .k-badge-success {
-  background-color: var(--success-color);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 /* Pill shape */
@@ -107,56 +119,44 @@ button.k-badge {
 }
 
 /* Subtle variants - transparent background with colored text */
+/* Subtle text blends the variant color 60/40 with --k-text-color: the full
+   variant color on its own 15% tint falls under 4.5:1 for most variants. */
 .k-badge-subtle.k-badge-primary {
-  background-color: color-mix(
-    in srgb,
-    var(--primary-color) 15%,
-    var(--background-color)
-  );
-  color: var(--primary-color);
+  background-color: color-mix(in srgb, var(--k-primary-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-primary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-secondary {
   background-color: color-mix(
     in srgb,
-    var(--secondary-color) 15%,
-    var(--background-color)
+    var(--k-secondary-color) 15%,
+    transparent
   );
-  color: var(--secondary-color);
+  color: color-mix(in srgb, var(--k-secondary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-light {
-  background-color: color-mix(
-    in srgb,
-    var(--light-color) 30%,
-    var(--background-color)
-  );
-  color: var(--text-color);
+  background-color: color-mix(in srgb, var(--k-light-color) 30%, transparent);
+  color: var(--k-text-color);
 }
 
 .k-badge-subtle.k-badge-danger {
-  background-color: color-mix(
-    in srgb,
-    var(--danger-color) 15%,
-    var(--background-color)
-  );
-  color: var(--danger-color);
+  background-color: color-mix(in srgb, var(--k-danger-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-danger-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-warning {
-  background-color: color-mix(
-    in srgb,
-    var(--warning-color) 20%,
-    var(--background-color)
-  );
-  color: var(--warning-color);
+  background-color: color-mix(in srgb, var(--k-warning-color) 20%, transparent);
+  color: var(--k-warning-color-text);
 }
 
 .k-badge-subtle.k-badge-success {
-  background-color: color-mix(
-    in srgb,
-    var(--success-color) 15%,
-    var(--background-color)
-  );
-  color: var(--success-color);
+  background-color: color-mix(in srgb, var(--k-success-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-success-color) 60%, var(--k-text-color));
+}
+
+/* The tint is translucent so it reads on any surface (striped rows, cards);
+   the inset outline keeps the edge visible where the tint alone is too faint. */
+.k-badge-subtle {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }

package/src/components/feedback/emptyState/styles.css

@@ -1,7 +1,6 @@
 .k-empty-state-inline {
   font-size: 0.875rem;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 0.5rem 0;
 }
@@ -14,8 +13,7 @@
   gap: 0.75rem;
   padding: 2rem 1rem;
   text-align: center;
-  color: var(--text-color);
-  opacity: 0.75;
+  color: var(--k-text-color-secondary);
 }
 
 .k-empty-state-icon {

package/src/components/feedback/loadingOverlay/styles.css

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   z-index: 300;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
 }
 
 .k-loading-container-fixed {

package/src/components/feedback/progressBar/index.tsx

@@ -17,16 +17,22 @@ const ProgressBar = (props: ProgressBarProps) => {
   const fillBorderRadius =
     clampedProgress === 100 ? "0.25rem" : "0.25rem 0 0 0.25rem";
 
+  // The percentage sits beside the bar, not on the fill: no single text color
+  // reaches 4.5:1 on every variant's fill in both themes.
   return (
-    <div className={`k-progress-bar-container`}>
-      <div
-        className={`k-progress-bar-fill k-progress-bar-fill-${variant}`}
-        style={{ width: `${clampedProgress}%`, borderRadius: fillBorderRadius }}
-      >
-        {showPercentage && clampedProgress > 0 && (
-          <span className="k-progress-bar-text">{clampedProgress}%</span>
-        )}
+    <div className="k-progress-bar">
+      <div className="k-progress-bar-container">
+        <div
+          className={`k-progress-bar-fill k-progress-bar-fill-${variant}`}
+          style={{
+            width: `${clampedProgress}%`,
+            borderRadius: fillBorderRadius,
+          }}
+        />
       </div>
+      {showPercentage && (
+        <span className="k-progress-bar-text">{clampedProgress}%</span>
+      )}
     </div>
   );
 };

package/src/components/feedback/progressBar/styles.css

@@ -1,42 +1,51 @@
-.k-progress-bar-container {
+.k-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
+}
+
+.k-progress-bar-container {
+  flex: 1;
+  min-width: 0;
   height: 1.5625rem;
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   border-radius: 0.25rem;
   overflow: hidden;
-  box-shadow: inset 0 0.0625rem 0.1875rem var(--shadow-color);
+  box-shadow: inset 0 0.0625rem 0.1875rem var(--k-shadow-color);
 }
 
 .k-progress-bar-fill {
   height: 100%;
-  background-color: var(--success-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color-light);
-  font-weight: 600;
+  background-color: var(--k-success-color);
   transition: width 0.5s ease-in-out;
 }
 
 .k-progress-bar-text {
-  font-size: var(--text-size-sm);
+  flex-shrink: 0;
+  min-width: 2.75rem;
+  text-align: right;
+  font-size: var(--k-text-size-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--k-text-color);
 }
 
 .k-progress-bar-fill-primary {
-  background-color: var(--primary-color);
+  background-color: var(--k-primary-color);
 }
 .k-progress-bar-fill-secondary {
-  background-color: var(--secondary-color);
+  background-color: var(--k-secondary-color);
 }
 .k-progress-bar-fill-light {
-  background-color: var(--light-color);
+  background-color: var(--k-light-color);
 }
 .k-progress-bar-fill-warning {
-  background-color: var(--warning-color);
+  background-color: var(--k-warning-color);
 }
 .k-progress-bar-fill-danger {
-  background-color: var(--danger-color);
+  background-color: var(--k-danger-color);
 }
 .k-progress-bar-fill-success {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }

package/src/components/feedback/spinner/styles.css

@@ -1,10 +1,13 @@
+/* An empty box, so as a flex item it would shrink to fit a short or narrow
+   container (an oval while a page is still laying out). */
 .k-spinner {
   border-radius: 50%;
   display: inline-block;
-  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+  animation: k-spin 0.8s linear infinite;
 }
 
-@keyframes spin {
+@keyframes k-spin {
   0% {
     transform: rotate(0deg);
   }
@@ -16,49 +19,36 @@
 .k-spinner-lg {
   height: 3.75rem;
   width: 3.75rem;
-  border: 0.375rem solid var(--shadow-color);
+  border: 0.375rem solid var(--k-shadow-color);
 }
 
 .k-spinner-md {
   height: 2.5rem;
   width: 2.5rem;
-  border: 0.25rem solid var(--shadow-color);
+  border: 0.25rem solid var(--k-shadow-color);
 }
 
 .k-spinner-sm {
   height: 1.25rem;
   width: 1.25rem;
-  border: 0.125rem solid var(--shadow-color);
+  border: 0.125rem solid var(--k-shadow-color);
 }
 
 .k-spinner-primary {
-  border-left-color: var(--primary-color);
+  border-left-color: var(--k-primary-color);
 }
 .k-spinner-secondary {
-  border-left-color: var(--secondary-color);
+  border-left-color: var(--k-secondary-color);
 }
 .k-spinner-light {
-  border-left-color: var(--light-color);
+  border-left-color: var(--k-light-color);
 }
 .k-spinner-success {
-  border-left-color: var(--success-color);
+  border-left-color: var(--k-success-color);
 }
 .k-spinner-danger {
-  border-left-color: var(--danger-color);
+  border-left-color: var(--k-danger-color);
 }
 .k-spinner-warning {
-  border-left-color: var(--warning-color);
-}
-
-/* Visually hidden class for accessibility text */
-.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;
+  border-left-color: var(--k-warning-color);
 }