jcicl 1.0.59 → 1.0.61

package/DataPage/DataPage.d.ts

@@ -0,0 +1,24 @@
+import { DataPageControls, DataPageResult } from './useDataPage';
+import { WithLoadingProps } from '../WithLoading/WithLoading';
+export interface DataPageProps<T> {
+    /** Async function that fetches data. Throw for fatal error. Return withWarnings() for partial success. */
+    fetchFn: () => Promise<T | DataPageResult<T>>;
+    /** useEffect dependency array. Default: [] (fetch once on mount). */
+    deps?: unknown[];
+    /** Render function for happy path. Receives data + controls. Read-only pages can ignore the 2nd arg. */
+    children: (data: T, controls: DataPageControls<T>) => React.ReactNode;
+    /** Shown on empty data. String → centered <p>. ReactNode → rendered directly. Omit for interactive empty. */
+    emptyState?: React.ReactNode | string;
+    /** Shown on fatal error. String → centered red <p>. Defaults to the caught error message. */
+    errorState?: React.ReactNode | string;
+    /** Data-dependent guards. Each receives data, returns ReactNode to short-circuit or null to continue. */
+    guards?: ((data: T) => React.ReactNode | null)[];
+    /** Determines if data is "empty". Default: array length === 0 or nullish. */
+    isEmpty?: (data: T) => boolean;
+    /** Props forwarded to the internal WithLoading wrapper (e.g. size, style). */
+    loadingProps?: Omit<WithLoadingProps, 'loading' | 'children'>;
+    /** Custom warning banner renderer. Default: orange centered <p> per warning. Pass null to suppress. */
+    renderWarnings?: ((warnings: string[]) => React.ReactNode) | null;
+}
+declare function DataPage<T>({ fetchFn, deps, children, emptyState, errorState, guards, isEmpty, loadingProps, renderWarnings, }: DataPageProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DataPage;

package/DataPage/DataPage.js

@@ -0,0 +1,34 @@
+import { jsx as e, Fragment as i, jsxs as A } from "react/jsx-runtime";
+import B, { defaultIsEmpty as P } from "./useDataPage.js";
+import k from "../WithLoading/WithLoading.js";
+const c = (n, t) => typeof n == "string" ? /* @__PURE__ */ e("p", { style: { textAlign: "center", color: t }, children: n }) : /* @__PURE__ */ e(i, { children: n }), v = (n) => n.map((t, o) => /* @__PURE__ */ e("p", { style: { textAlign: "center", color: "darkorange" }, children: t }, o));
+function L({
+  fetchFn: n,
+  deps: t,
+  children: o,
+  emptyState: s,
+  errorState: d,
+  guards: u,
+  isEmpty: m = P,
+  loadingProps: p,
+  renderWarnings: f
+}) {
+  const { data: r, loading: l, error: g, warnings: a, setData: x, refetch: y } = B({ fetchFn: n, deps: t }), D = { setData: x, refetch: y, warnings: a };
+  if (!l && g)
+    return /* @__PURE__ */ e(i, { children: c(d || g, "red") });
+  if (!l && r !== null && m(r) && s !== void 0)
+    return /* @__PURE__ */ e(i, { children: c(s) });
+  if (!l && r !== null && u)
+    for (const w of u) {
+      const h = w(r);
+      if (h !== null) return /* @__PURE__ */ e(i, { children: h });
+    }
+  const j = a.length > 0 && f !== null ? (f ?? v)(a) : null;
+  return /* @__PURE__ */ A(k, { loading: l, ...p, children: [
+    j,
+    r !== null ? o(r, D) : null
+  ] });
+}
+export {
+  L as default
+};

package/DataPage/index.d.ts

@@ -0,0 +1,2 @@
+export { default, type DataPageProps } from './DataPage';
+export { default as useDataPage, withWarnings, type UseDataPageOptions, type UseDataPageReturn, type DataPageControls, type DataPageResult, } from './useDataPage';

package/DataPage/index.js

@@ -0,0 +1,7 @@
+import { default as t } from "./DataPage.js";
+import { default as f, withWarnings as o } from "./useDataPage.js";
+export {
+  t as default,
+  f as useDataPage,
+  o as withWarnings
+};

package/DataPage/useDataPage.d.ts

@@ -0,0 +1,33 @@
+declare const DATA_PAGE_RESULT: unique symbol;
+export interface DataPageResult<T> {
+    [DATA_PAGE_RESULT]: true;
+    data: T;
+    warnings: string[];
+}
+/** Wrap a fetchFn return value to signal partial success with warnings. */
+export declare function withWarnings<T>(data: T, warnings: string[]): DataPageResult<T>;
+export interface DataPageControls<T> {
+    /** Update local data without re-fetching. For optimistic CRUD (add/edit/delete). */
+    setData: (updater: (prev: T) => T) => void;
+    /** Re-run fetchFn from scratch (resets to loading state). */
+    refetch: () => void;
+    /** Warnings from partial success (empty array if none). */
+    warnings: string[];
+}
+export interface UseDataPageOptions<T> {
+    /** Async function that fetches data. Throw for fatal error. Return withWarnings() for partial success. */
+    fetchFn: () => Promise<T | DataPageResult<T>>;
+    /** useEffect dependency array. Default: [] (fetch once on mount). */
+    deps?: unknown[];
+}
+export interface UseDataPageReturn<T> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+    warnings: string[];
+    setData: (updater: (prev: T) => T) => void;
+    refetch: () => void;
+}
+export declare const defaultIsEmpty: <T>(data: T) => boolean;
+declare function useDataPage<T>({ fetchFn, deps }: UseDataPageOptions<T>): UseDataPageReturn<T>;
+export default useDataPage;

package/DataPage/useDataPage.js

@@ -0,0 +1,38 @@
+import { useState as n, useRef as R, useEffect as b, useCallback as d } from "react";
+const g = Symbol("DataPageResult");
+function S(e, a) {
+  return { [g]: !0, data: e, warnings: a };
+}
+const x = (e) => e == null ? !0 : Array.isArray(e) ? e.length === 0 : !1;
+function F({ fetchFn: e, deps: a = [] }) {
+  const [y, c] = n(null), [h, u] = n(!0), [w, o] = n(null), [A, l] = n([]), [E, m] = n(0), f = R(e);
+  f.current = e, b(() => {
+    let t = !1;
+    return u(!0), o(null), l([]), (async () => {
+      try {
+        const r = await f.current();
+        if (t) return;
+        if (r && typeof r == "object" && g in r) {
+          const i = r;
+          c(i.data), l(i.warnings);
+        } else
+          c(r);
+      } catch (r) {
+        t || o(r instanceof Error ? r.message : "An unexpected error occurred");
+      } finally {
+        t || u(!1);
+      }
+    })(), () => {
+      t = !0;
+    };
+  }, [...a, E]);
+  const p = d((t) => {
+    c((s) => s !== null ? t(s) : s);
+  }, []), D = d(() => m((t) => t + 1), []);
+  return { data: y, loading: h, error: w, warnings: A, setData: p, refetch: D };
+}
+export {
+  F as default,
+  x as defaultIsEmpty,
+  S as withWarnings
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/utils.d.ts

@@ -6,6 +6,7 @@ export declare const isValidZipCode: (zip: string) => boolean;
 export declare const isValidCityName: (city: string) => boolean;
 export declare const formatDate: (date: string, style?: "mmddyyyy") => string;
 export declare const formatDateTime: (dateTime: string) => string;
+export declare const calculateAge: (birthDateString: string) => number;
 export declare const formatAddress: (address: {
     line1: string;
     line2?: string | null;

package/utils.js

@@ -1,15 +1,15 @@
 import a from "./theme.js";
-import { u as m } from "./.chunks/useMediaQuery.js";
-const D = () => m(`(max-width: ${a.screenSizes.mobile})`), S = () => m(`(max-width: ${a.screenSizes.tablet})`), w = (t) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t.trim()), R = (t) => {
+import { u as l } from "./.chunks/useMediaQuery.js";
+const Z = () => l(`(max-width: ${a.screenSizes.mobile})`), w = () => l(`(max-width: ${a.screenSizes.tablet})`), R = (t) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t.trim()), T = (t) => {
   if (!t) return !1;
   const e = t.replace(/\D/g, "");
   return !!(t.trim() == e && e.length >= 10 && e.length <= 16 || /^\s*(?:\+?1\s*(?:[-\s]\s*)?)?(?:\(\s*\d{3}\s*\)|\d{3})(?:\s*[-\s]\s*)?\d{3}(?:\s*[-\s]\s*)?\d{4}(?:\s*(?:#|x\.?|ext\.?|extension)\s*\d{1,6})?\s*$/.test(t.trim()));
-}, b = (t) => /^\d{5}(?:\s*-?\s*\d{4})?$/.test(t), C = (t) => /^[a-zA-Z\s'.-]+$/.test(t), T = (t, e = "mmddyyyy") => e === "mmddyyyy" ? (/* @__PURE__ */ new Date(t.replace(" ", "T").replace("Z", "") + "Z")).toLocaleDateString("en-US", {
+}, C = (t) => /^\d{5}(?:\s*-?\s*\d{4})?$/.test(t), S = (t) => /^[a-zA-Z\s'.-]+$/.test(t), b = (t, e = "mmddyyyy") => e === "mmddyyyy" ? (/* @__PURE__ */ new Date(t.replace(" ", "T").replace("Z", "") + "Z")).toLocaleDateString("en-US", {
   timeZone: "America/Chicago",
   month: "numeric",
   day: "numeric",
   year: "numeric"
-}) : t, z = (t) => {
+}) : t, A = (t) => {
   try {
     return (/* @__PURE__ */ new Date(t.replace(" ", "T").replace("Z", "") + "Z")).toLocaleString("en-US", {
       timeZone: "America/Chicago",
@@ -23,10 +23,16 @@ const D = () => m(`(max-width: ${a.screenSizes.mobile})`), S = () => m(`(max-wid
   } catch {
     return t;
   }
-}, A = (t) => {
-  const { line1: e, line2: n, city: s, state: i, zip: o } = t;
+}, z = (t) => {
+  t = t.slice(0, 10) + "T00:00:00";
+  const e = /* @__PURE__ */ new Date(), i = new Date(t);
+  let s = e.getFullYear() - i.getFullYear();
+  const n = e.getMonth() - i.getMonth();
+  return (n < 0 || n === 0 && e.getDate() < i.getDate()) && s--, s;
+}, N = (t) => {
+  const { line1: e, line2: i, city: s, state: n, zip: o } = t;
   let r = e || "";
-  return n && (r.length > 0 && (r += ", "), r += n), s && (r.length > 0 && (r += ", "), r += s), i && (r.length > 0 && (r += ", "), r += i), o && (r += ` ${p(o)[0]}`), r;
+  return i && (r.length > 0 && (r += ", "), r += i), s && (r.length > 0 && (r += ", "), r += s), n && (r.length > 0 && (r += ", "), r += n), o && (r += ` ${p(o)[0]}`), r;
 }, $ = (t) => {
   if (t > 3 && t < 21) return "th";
   switch (t % 10) {
@@ -39,7 +45,7 @@ const D = () => m(`(max-width: ${a.screenSizes.mobile})`), S = () => m(`(max-wid
     default:
       return "th";
   }
-}, N = (t) => {
+}, P = (t) => {
   try {
     const e = /* @__PURE__ */ new Date(t.replace(" ", "T").replace("Z", "") + "Z"), s = new Intl.DateTimeFormat("en-US", {
       timeZone: "America/Chicago",
@@ -49,37 +55,38 @@ const D = () => m(`(max-width: ${a.screenSizes.mobile})`), S = () => m(`(max-wid
       hour: "numeric",
       minute: "2-digit",
       hour12: !0
-    }).formatToParts(e), i = (g) => {
+    }).formatToParts(e), n = (h) => {
       var c;
-      return ((c = s.find((y) => y.type === g)) == null ? void 0 : c.value) ?? "";
-    }, o = i("month") + ".", r = Number(i("day")), u = i("year"), l = i("hour"), d = i("minute"), f = i("dayPeriod").toLowerCase(), h = $(r);
-    return `${o} ${r}${h}, ${u}, ${l}:${d}${f}`;
+      return ((c = s.find((y) => y.type === h)) == null ? void 0 : c.value) ?? "";
+    }, o = n("month") + ".", r = Number(n("day")), u = n("year"), m = n("hour"), d = n("minute"), f = n("dayPeriod").toLowerCase(), g = $(r);
+    return `${o} ${r}${g}, ${u}, ${m}:${d}${f}`;
   } catch {
     return t;
   }
-}, P = (t) => {
+}, v = (t) => {
   if (t == null) return ["", void 0];
   let e = t.replace(/\D/g, "") || "";
   e.at(0) == "1" && (e = e.slice(1));
-  const n = e.slice(0, 3), s = e.slice(3, 6), i = e.slice(6, 10), o = e.slice(10, 16);
+  const i = e.slice(0, 3), s = e.slice(3, 6), n = e.slice(6, 10), o = e.slice(10, 16);
   let r = e;
-  return e.length >= 4 && (r = `(${n}) ${e.slice(3)}`), e.length >= 7 && (r = `(${n}) ${s}-${e.slice(6)}`), e.length > 10 && (r = `(${n}) ${s}-${i} ext. ${o}`), [r, e.slice(0, 16)];
+  return e.length >= 4 && (r = `(${i}) ${e.slice(3)}`), e.length >= 7 && (r = `(${i}) ${s}-${e.slice(6)}`), e.length > 10 && (r = `(${i}) ${s}-${n} ext. ${o}`), [r, e.slice(0, 16)];
 }, p = (t) => {
   if (!t) return ["", void 0];
   const e = t.replace(/\D/g, "");
   return e.length <= 5 ? [e, e] : [`${e.slice(0, 5)}-${e.slice(5, 9)}`, e.slice(0, 9)];
 };
 export {
-  A as formatAddress,
-  T as formatDate,
-  z as formatDateTime,
-  P as formatPhoneNumber,
-  N as formatTimestamp,
+  z as calculateAge,
+  N as formatAddress,
+  b as formatDate,
+  A as formatDateTime,
+  v as formatPhoneNumber,
+  P as formatTimestamp,
   p as formatZipCode,
-  D as isMobile,
-  S as isTablet,
-  C as isValidCityName,
-  w as isValidEmail,
-  R as isValidPhoneNumber,
-  b as isValidZipCode
+  Z as isMobile,
+  w as isTablet,
+  S as isValidCityName,
+  R as isValidEmail,
+  T as isValidPhoneNumber,
+  C as isValidZipCode
 };