jcicl 1.0.60 → 1.0.62

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

package/DefaultTemplate/DefaultTemplate.d.ts

@@ -19,6 +19,8 @@ export type DefaultTemplateProps = AppContainerProps & {
     hasPagination?: boolean;
     fade?: boolean;
     siteBannerText?: string;
+    siteBannerBackgroundColor?: string;
+    siteBannerTextColor?: string;
 };
 declare const DefaultTemplate: React.FC<PropsWithChildren<DefaultTemplateProps>>;
 export default DefaultTemplate;

package/DefaultTemplate/DefaultTemplate.js

@@ -1,25 +1,25 @@
-import { jsx as r, jsxs as g, Fragment as $ } from "react/jsx-runtime";
-import { useState as S, useMemo as z } from "react";
+import { jsx as r, jsxs as g, Fragment as O } from "react/jsx-runtime";
+import { useState as b, useMemo as A } from "react";
 import { n as y } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as C } from "../.chunks/emotion-react.browser.esm.js";
-import t, { defaultTheme as T } from "../theme.js";
+import o, { defaultTheme as T } from "../theme.js";
 import { getHueFromHex as u, updateTheme as p } from "../themeUtils.js";
-import { ThemeContext as O } from "../ThemeContext.js";
-import A from "../AppContainer/AppContainer.js";
-import L from "../WithLoading/WithLoading.js";
-import { TopFade as j, BottomFade as D } from "../Overlays/Overlays.js";
-import { SiteBanner as W } from "../SiteBanner/SiteBanner.js";
-import { P as B } from "../.chunks/AppHeader.js";
-import { u as b } from "../.chunks/useMediaQuery.js";
-const H = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], G = y("div", { shouldForwardProp: (o) => !H.includes(o) })(({ loading: o, hasPagination: i, hasFade: m, loadingColor: l = t.colors.green }) => ({
+import { ThemeContext as L } from "../ThemeContext.js";
+import j from "../AppContainer/AppContainer.js";
+import D from "../WithLoading/WithLoading.js";
+import { TopFade as W, BottomFade as B } from "../Overlays/Overlays.js";
+import { SiteBanner as H } from "../SiteBanner/SiteBanner.js";
+import { P as G } from "../.chunks/AppHeader.js";
+import { u as S } from "../.chunks/useMediaQuery.js";
+const Q = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], N = y("div", { shouldForwardProp: (t) => !Q.includes(t) })(({ loading: t, hasPagination: i, hasFade: m, loadingColor: l = o.colors.green }) => ({
   ...C`
-    color: ${t.colors.midnight};
-    height: ${o ? "100%" : "auto"};
+    color: ${o.colors.midnight};
+    height: ${t ? "100%" : "auto"};
     padding: 19px;
     padding-top: 36px;
     display: flex;
     flex-direction: column;
-    justify-content: ${o ? "center" : "start"};
+    justify-content: ${t ? "center" : "start"};
     align-items: center;
     width: 100%;
     min-height: 100%;
@@ -33,7 +33,7 @@ const H = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], G
       color: ${l};
     }
   `
-})), Q = y("div")(() => ({
+})), q = y("div")(() => ({
   ...C`
     border-radius: 8px;
     padding: 0;
@@ -47,25 +47,27 @@ const H = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], G
     box-sizing: border-box;
   `
 }));
-function N(o, i) {
-  return o == "green" ? T : p(i);
+function E(t, i) {
+  return t == "green" ? T : p(i);
 }
-const oe = ({
-  children: o,
+const ie = ({
+  children: t,
   loading: i = !1,
   hasPagination: m = !1,
   fade: l = !0,
   siteBannerText: n,
-  userProfileMenuItems: w,
+  siteBannerBackgroundColor: w,
+  siteBannerTextColor: k,
+  userProfileMenuItems: I,
   ...s
 }) => {
-  const I = localStorage.getItem("theme") || "green", f = localStorage.getItem("hue") || u(t.themeOptions.green).toString(), x = b(`(max-width: ${t.screenSizes.mobile})`), M = b(`(max-width: ${t.screenSizes.tablet})`), [e, d] = S(
-    () => N(I, parseFloat(f))
-  ), [P, c] = S({ h: Math.max(parseFloat(f), 0) * 360, s: 0, v: 68, a: 1 }), k = [
+  const M = localStorage.getItem("theme") || "green", f = localStorage.getItem("hue") || u(o.themeOptions.green).toString(), x = S(`(max-width: ${o.screenSizes.mobile})`), P = S(`(max-width: ${o.screenSizes.tablet})`), [e, d] = b(
+    () => E(M, parseFloat(f))
+  ), [v, c] = b({ h: Math.max(parseFloat(f), 0) * 360, s: 0, v: 68, a: 1 }), F = [
     {
       label: "Default Theme",
       onClick: () => {
-        localStorage.setItem("theme", "green"), localStorage.setItem("hue", u(t.themeOptions.green).toString()), c((h) => ({ ...h, h: u(t.themeOptions.green) * 360 })), d(T);
+        localStorage.setItem("theme", "green"), localStorage.setItem("hue", u(o.themeOptions.green).toString()), c((h) => ({ ...h, h: u(o.themeOptions.green) * 360 })), d(T);
       }
     },
     {
@@ -78,15 +80,15 @@ const oe = ({
     },
     {
       label: "Hue",
-      hue: P.h,
+      hue: v.h,
       onChange: (a) => {
-        localStorage.setItem("theme", "custom"), localStorage.setItem("hue", (a.h / 360).toString()), c((F) => ({ ...F, h: a.h }));
+        localStorage.setItem("theme", "custom"), localStorage.setItem("hue", (a.h / 360).toString()), c((z) => ({ ...z, h: a.h }));
         const h = p(a.h / 360);
         d(h);
       }
     },
-    ...w || []
-  ], v = z(
+    ...I || []
+  ], $ = A(
     () => ({
       backgroundPrimary: e.themeLight,
       backgroundSecondary: e.themeLightA,
@@ -100,9 +102,9 @@ const oe = ({
       scrollColor: e.themeShadowA,
       loadingColor: e.themeColor,
       iconColors: {
-        icon: /* @__PURE__ */ r(B, {}),
-        iconColor: e.themeDark ?? t.colors.darkGreen,
-        backgroundColor: e.themeMediumA ?? t.colors.mint
+        icon: /* @__PURE__ */ r(G, {}),
+        iconColor: e.themeDark ?? o.colors.darkGreen,
+        backgroundColor: e.themeMediumA ?? o.colors.mint
       },
       highlightPrimary: e.highlightPrimary,
       highlightSecondary: e.highlightSecondary,
@@ -110,30 +112,37 @@ const oe = ({
     }),
     [e]
   );
-  return /* @__PURE__ */ g(O.Provider, { value: e, children: [
-    n && /* @__PURE__ */ r(W, { text: n }),
+  return /* @__PURE__ */ g(L.Provider, { value: e, children: [
+    n && /* @__PURE__ */ r(
+      H,
+      {
+        text: n,
+        backgroundColor: w,
+        textColor: k
+      }
+    ),
     /* @__PURE__ */ r(
-      A,
+      j,
       {
         ...s,
-        userProfileMenuItems: k,
-        themeColors: v ?? (s == null ? void 0 : s.themeColors),
+        userProfileMenuItems: F,
+        themeColors: $ ?? (s == null ? void 0 : s.themeColors),
         hasSiteBanner: !!n,
         children: /* @__PURE__ */ r(
-          G,
+          N,
           {
             className: "jcPageWrapper",
             loading: i,
             loadingColor: e.themeColor,
             hasPagination: m,
             hasFade: l,
-            isTablet: M,
-            children: /* @__PURE__ */ g(L, { loading: i, size: x ? 114 : 201, children: [
-              l && /* @__PURE__ */ g($, { children: [
-                /* @__PURE__ */ r(j, { color: e.themeLight, hasSiteBanner: !!n }),
-                /* @__PURE__ */ r(D, { hasPagination: m, isMobile: x, color: e.themeLight })
+            isTablet: P,
+            children: /* @__PURE__ */ g(D, { loading: i, size: x ? 114 : 201, children: [
+              l && /* @__PURE__ */ g(O, { children: [
+                /* @__PURE__ */ r(W, { color: e.themeLight, hasSiteBanner: !!n }),
+                /* @__PURE__ */ r(B, { hasPagination: m, isMobile: x, color: e.themeLight })
               ] }),
-              /* @__PURE__ */ r(Q, { children: o })
+              /* @__PURE__ */ r(q, { children: t })
             ] })
           }
         )
@@ -142,7 +151,7 @@ const oe = ({
   ] });
 };
 export {
-  Q as MainContentContainer,
-  G as PageWrapper,
-  oe as default
+  q as MainContentContainer,
+  N as PageWrapper,
+  ie as default
 };

package/SiteBanner/SiteBanner.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
 export interface SiteBannerProps {
     text: string;
+    backgroundColor?: string;
+    textColor?: string;
 }
 export declare const SiteBanner: React.FC<SiteBannerProps>;
 export default SiteBanner;

package/SiteBanner/SiteBanner.js

@@ -2,8 +2,8 @@ import { jsx as e } from "react/jsx-runtime";
 import { n as t } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as r } from "../.chunks/emotion-react.browser.esm.js";
 import n from "../theme.js";
-import { useThemeColors as i } from "../ThemeContext.js";
-const a = t("div")(({ backgroundColor: o }) => ({
+import { useThemeColors as c } from "../ThemeContext.js";
+const m = t("div")(({ $backgroundColor: o }) => ({
   ...r`
     width: 100%;
     height: 54px;
@@ -14,20 +14,20 @@ const a = t("div")(({ backgroundColor: o }) => ({
     justify-content: center;
     box-sizing: border-box;
   `
-})), c = t("span")(() => ({
+})), l = t("span")(({ $textColor: o }) => ({
   ...r`
-    color: ${n.colors.white};
+    color: ${o};
     font-family: Roboto, sans-serif;
     font-size: 19px;
     font-weight: 500;
     text-align: center;
     text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
   `
-})), f = ({ text: o }) => {
-  const s = i();
-  return /* @__PURE__ */ e(a, { backgroundColor: s.themeColor, children: /* @__PURE__ */ e(c, { children: o }) });
+})), b = ({ text: o, backgroundColor: s, textColor: i }) => {
+  const a = c();
+  return /* @__PURE__ */ e(m, { $backgroundColor: s ?? a.themeColor, children: /* @__PURE__ */ e(l, { $textColor: i ?? n.colors.white, children: o }) });
 };
 export {
-  f as SiteBanner,
-  f as default
+  b as SiteBanner,
+  b as default
 };

package/api.d.ts

@@ -0,0 +1,41 @@
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T | null;
+    error?: {
+        status: number;
+        statusText: string;
+        message: string;
+    };
+}
+/**
+ * Base API client for JCIT applications.
+ *
+ * Provides a generic `request<T>()` method with timeout, JSON parsing,
+ * and standardized error wrapping into `ApiResponse<T>`.
+ *
+ * Consumers extend this class, pass the base URL via `super()`, and
+ * add app-specific endpoint methods:
+ *
+ * ```typescript
+ * import { BaseApiClient } from 'jcicl/api';
+ *
+ * class MyAppApi extends BaseApiClient {
+ *   constructor() {
+ *     super(import.meta.env.VITE_API_BASE_URL);
+ *   }
+ *   async getItems() {
+ *     return this.request<Item[]>('/api/Items/GetItems');
+ *   }
+ * }
+ *
+ * export const api = new MyAppApi();
+ * ```
+ */
+export declare class BaseApiClient {
+    protected baseUrl: string;
+    constructor(baseUrl: string);
+    protected request<T>(endpoint: string, method?: 'GET' | 'POST' | 'PUT' | 'DELETE', body?: unknown, options?: {
+        timeoutMs?: number;
+        headers?: Record<string, string>;
+    }): Promise<ApiResponse<T>>;
+}

package/api.js

@@ -0,0 +1,79 @@
+var T = Object.defineProperty;
+var h = (s, e, r) => e in s ? T(s, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[e] = r;
+var m = (s, e, r) => h(s, typeof e != "symbol" ? e + "" : e, r);
+class x {
+  constructor(e) {
+    m(this, "baseUrl");
+    if (!e)
+      throw new Error(
+        "BaseApiClient: baseUrl is required. Pass import.meta.env.VITE_API_BASE_URL or equivalent."
+      );
+    this.baseUrl = e.endsWith("/") ? e.slice(0, -1) : e;
+  }
+  async request(e, r = "GET", n, a) {
+    const o = (a == null ? void 0 : a.timeoutMs) ?? 3e4, l = new AbortController(), d = setTimeout(() => l.abort(), o);
+    try {
+      const f = {
+        method: r,
+        headers: {
+          ...n !== void 0 ? { "Content-Type": "application/json" } : {},
+          ...a == null ? void 0 : a.headers
+        },
+        credentials: "include",
+        // Required for Windows Authentication with CORS
+        signal: l.signal
+      };
+      n !== void 0 && (f.body = JSON.stringify(n));
+      const t = await fetch(`${this.baseUrl}${e}`, f);
+      if (clearTimeout(d), !t.ok)
+        return {
+          success: !1,
+          error: {
+            status: t.status,
+            statusText: t.statusText,
+            message: `HTTP ${t.status}: ${t.statusText}`
+          }
+        };
+      if (t.status === 204)
+        return {
+          success: !0,
+          data: void 0
+        };
+      const c = await t.text();
+      if (!c || c === "null")
+        return {
+          success: !0,
+          data: null
+        };
+      let i;
+      try {
+        i = JSON.parse(c);
+      } catch {
+        i = c;
+      }
+      return {
+        success: !0,
+        data: i
+      };
+    } catch (u) {
+      return clearTimeout(d), u instanceof Error && u.name === "AbortError" ? {
+        success: !1,
+        error: {
+          status: 0,
+          statusText: "Timeout",
+          message: `Request timed out after ${o}ms`
+        }
+      } : {
+        success: !1,
+        error: {
+          status: 0,
+          statusText: "Network Error",
+          message: u instanceof Error ? u.message : "Unknown error occurred"
+        }
+      };
+    }
+  }
+}
+export {
+  x as BaseApiClient
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "1.0.60",
+  "version": "1.0.62",
   "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",