@memobit/libs 3.5.0 → 3.6.0

package/dist/helpers/Http.js

@@ -0,0 +1,102 @@
+var l = {
+  Continue: 100,
+  SwitchingProtocols: 101,
+  Ok: 200,
+  Created: 201,
+  Accepted: 202,
+  NoContent: 204,
+  PartialContent: 206,
+  MovedPermanently: 301,
+  Found: 302,
+  SeeOther: 303,
+  NotModified: 304,
+  TemporaryRedirect: 307,
+  PermanentRedirect: 308,
+  BadRequest: 400,
+  Unauthorized: 401,
+  PaymentRequired: 402,
+  Forbidden: 403,
+  NotFound: 404,
+  MethodNotAllowed: 405,
+  NotAcceptable: 406,
+  RequestTimeout: 408,
+  Conflict: 409,
+  Gone: 410,
+  PayloadTooLarge: 413,
+  UnsupportedMediaType: 415,
+  UnprocessableEntity: 422,
+  Locked: 423,
+  TooManyRequests: 429,
+  InternalServerError: 500,
+  NotImplemented: 501,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504
+}, n = {
+  Get: "GET",
+  Post: "POST",
+  Put: "PUT",
+  Patch: "PATCH",
+  Delete: "DELETE"
+}, w = (e) => e >= 200 && e < 300, C = (e) => e >= 400 && e < 500, E = (e) => e >= 500 && e < 600, f = "csrf_token", h = "X-CSRF-Token", v = () => {
+  const e = document.cookie.match(new RegExp(`(?:^|;\\s*)${f}=([^;]+)`));
+  return e ? decodeURIComponent(e[1]) : null;
+}, m = (e, r = !0) => {
+  const s = r ? { "Content-Type": "application/json" } : {};
+  if (e !== n.Get) {
+    const i = v();
+    i && (s[h] = i);
+  }
+  return s;
+}, y = class extends Error {
+  constructor(e, r) {
+    super(e), this.name = "ApiError", this.status = r;
+  }
+}, T = async (e) => {
+  try {
+    const r = await e.json();
+    if (r && typeof r == "object") {
+      if ("error" in r && typeof r.error == "string") return r.error;
+      if ("message" in r && typeof r.message == "string") return r.message;
+    }
+  } catch {
+  }
+  return `Request failed (${e.status}${e.statusText ? ` ${e.statusText}` : ""})`;
+}, P = ({ baseUrl: e, loginPath: r = "/login" }) => {
+  let s = !1;
+  const i = (t) => `${e.replace(/\/$/, "")}/${t.replace(/^\//, "")}`, c = async (t, o, u, p = !0) => {
+    const a = await fetch(i(t), {
+      method: o,
+      headers: m(o, p),
+      credentials: "include",
+      body: u
+    });
+    if (a.status === l.Unauthorized && !window.location.pathname.startsWith(r))
+      return s || (s = !0, window.location.href = `${r}?session_expired=true`), new Promise(() => {
+      });
+    if (!a.ok) throw new y(await T(a), a.status);
+    if (a.status !== l.NoContent)
+      return await a.json();
+  }, d = (t, o, u) => c(t, o, u === void 0 ? void 0 : JSON.stringify(u));
+  return {
+    get: (t) => c(t, n.Get),
+    post: (t, o) => d(t, n.Post, o),
+    put: (t, o) => d(t, n.Put, o),
+    patch: (t, o) => d(t, n.Patch, o),
+    delete: (t) => c(t, n.Delete),
+    upload: (t, o) => c(t, n.Post, o, !1)
+  };
+};
+export {
+  y as ApiError,
+  h as CSRF_HEADER,
+  n as HttpMethod,
+  l as HttpStatus,
+  m as buildRequestHeaders,
+  P as createApiClient,
+  v as getCsrfToken,
+  C as isClientErrorStatus,
+  E as isServerErrorStatus,
+  w as isSuccessStatus,
+  T as readErrorMessage
+};

package/dist/helpers/Images.js

@@ -0,0 +1,19 @@
+var s = "/data-files/images", g = () => `${s}/default.jpg`, i = (t) => `${s}/category/${t}.jpg`, c = (t, a) => typeof t != "string" ? URL.createObjectURL(t) : t ? t.includes("/data-files/images") || t.startsWith("blob:") || t.startsWith("http") ? t : `${s}/specific/${t}` : a ? i(a) : g(), l = (t, a) => {
+  const r = g(), e = a ? i(a) : r;
+  return t ? t.endsWith(r) ? null : t.includes("/data-files/images/category/") ? r : e : e;
+}, u = (t, a) => {
+  const r = t.currentTarget, e = l(r.src, a);
+  if (e && !r.src.endsWith(e)) {
+    r.src = e;
+    return;
+  }
+  r.onerror = null;
+};
+export {
+  s as IMAGES_BASE_PATH,
+  u as applyImageFallback,
+  i as getCategoryImageUrl,
+  g as getDefaultImageUrl,
+  c as getImageUrl,
+  l as getNextImageFallback
+};

package/dist/helpers/Numbers.js

@@ -1,4 +1,4 @@
-var o = (r) => Number((typeof r == "number" ? r : Number(r)).toFixed(2)), n = (r, e) => (r > e && console.warn(`Could not get percent of value ${r} from a total ${e}. Total must be higher or at least equal to value.`), r === e ? r === 0 ? 0 : 100 : r / (e / 100)), u = (r, e) => {
+var o = (r) => Number((typeof r == "number" ? r : Number(r)).toFixed(2)), a = (r, e) => (r > e && console.warn(`Could not get percent of value ${r} from a total ${e}. Total must be higher or at least equal to value.`), r === e ? r === 0 ? 0 : 100 : r / (e / 100)), n = (r, e) => {
   const t = r + e;
   return t === 0 ? {
     a: 0,
@@ -7,9 +7,10 @@ var o = (r) => Number((typeof r == "number" ? r : Number(r)).toFixed(2)), n = (r
     a: Math.round(r / t * 100 * 10) / 10,
     b: Math.round(e / t * 100 * 10) / 10
   };
-};
+}, m = (r, e, t) => Math.min(t, Math.max(e, r));
 export {
+  m as clamp,
   o as format2Digits,
-  n as getPercent,
-  u as getPercentsOf2Numbers
+  a as getPercent,
+  n as getPercentsOf2Numbers
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 479,
+    libBuildNumber: 484,
     libCommit: n,
     libBuildDate: t
   };

package/dist/hooks/useAccountMenu.js

@@ -0,0 +1,58 @@
+import { ThemeSettings as d } from "../components/ThemeSettings/ThemeSettings2.js";
+import { useAuth as w } from "./useAuth/useAuth.js";
+import { ChangePasswordModal as A } from "../components/Auth/ChangePasswordModal/ChangePasswordModal2.js";
+import { useState as s } from "react";
+import { Fragment as k, jsx as o, jsxs as v } from "react/jsx-runtime";
+var j = ({ appName: l, mfaModal: e, themeLabel: c = "Theme", loginPath: m = "/login" }) => {
+  const { user: u, logout: p } = w(), [f, t] = s(!1), [h, n] = s(!1), [g, a] = s(!1), C = async () => {
+    await p(), window.location.href = m;
+  }, i = {
+    label: c,
+    icon: "theme-picker",
+    onClick: () => t(!0),
+    isActive: !1,
+    separator: !0
+  }, r = [
+    {
+      label: "Change Password",
+      icon: "lock",
+      onClick: () => n(!0),
+      isActive: !1
+    },
+    ...e ? [{
+      label: "Two-factor Authentication",
+      icon: "key",
+      onClick: () => a(!0),
+      isActive: !1
+    }] : [],
+    {
+      label: `Logout ${u?.username ?? ""}`.trim(),
+      icon: "logout",
+      onClick: C,
+      isActive: !1
+    }
+  ], O = /* @__PURE__ */ v(k, { children: [
+    /* @__PURE__ */ o(d, {
+      isOpen: f,
+      onClose: () => t(!1),
+      currentApp: l
+    }),
+    /* @__PURE__ */ o(A, {
+      isOpen: h,
+      onClose: () => n(!1)
+    }),
+    e && /* @__PURE__ */ o(e, {
+      isOpen: g,
+      onClose: () => a(!1)
+    })
+  ] });
+  return {
+    themeItem: i,
+    accountItems: r,
+    items: [i, ...r],
+    modals: O
+  };
+};
+export {
+  j as useAccountMenu
+};

package/dist/http.d.ts

@@ -0,0 +1,97 @@
+export declare interface ApiClient {
+    get: <T>(path: string) => Promise<T>;
+    post: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    put: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    patch: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    delete: <T>(path: string) => Promise<T>;
+    upload: <T>(path: string, formData: FormData) => Promise<T>;
+}
+
+export declare interface ApiClientConfig {
+    baseUrl: string;
+    loginPath?: string;
+}
+
+export declare class ApiError extends Error {
+    readonly status: number;
+    constructor(message: string, status: number);
+}
+
+export declare const buildRequestHeaders: (method: HttpMethod, json?: boolean) => Record<string, string>;
+
+/**
+ * Cookie-session API client shared by the memobit apps: sends credentials, adds the CSRF
+ * header on mutating requests, surfaces the server's `error` message, and on 401 navigates
+ * to the login page. The 401 path returns a promise that never settles so callers don't
+ * flash an error toast while the browser is already leaving the page.
+ */
+export declare const createApiClient: ({ baseUrl, loginPath }: ApiClientConfig) => ApiClient;
+
+export declare const CSRF_HEADER = "X-CSRF-Token";
+
+export declare const getCsrfToken: () => string | null;
+
+export declare const HttpMethod: {
+    readonly Get: "GET";
+    readonly Post: "POST";
+    readonly Put: "PUT";
+    readonly Patch: "PATCH";
+    readonly Delete: "DELETE";
+};
+
+export declare type HttpMethod = (typeof HttpMethod)[keyof typeof HttpMethod];
+
+export declare const HttpStatus: {
+    readonly Continue: 100;
+    readonly SwitchingProtocols: 101;
+    readonly Ok: 200;
+    readonly Created: 201;
+    readonly Accepted: 202;
+    readonly NoContent: 204;
+    readonly PartialContent: 206;
+    readonly MovedPermanently: 301;
+    readonly Found: 302;
+    readonly SeeOther: 303;
+    readonly NotModified: 304;
+    readonly TemporaryRedirect: 307;
+    readonly PermanentRedirect: 308;
+    readonly BadRequest: 400;
+    readonly Unauthorized: 401;
+    readonly PaymentRequired: 402;
+    readonly Forbidden: 403;
+    readonly NotFound: 404;
+    readonly MethodNotAllowed: 405;
+    readonly NotAcceptable: 406;
+    readonly RequestTimeout: 408;
+    readonly Conflict: 409;
+    readonly Gone: 410;
+    readonly PayloadTooLarge: 413;
+    readonly UnsupportedMediaType: 415;
+    readonly UnprocessableEntity: 422;
+    readonly Locked: 423;
+    readonly TooManyRequests: 429;
+    readonly InternalServerError: 500;
+    readonly NotImplemented: 501;
+    readonly BadGateway: 502;
+    readonly ServiceUnavailable: 503;
+    readonly GatewayTimeout: 504;
+};
+
+export declare type HttpStatus = (typeof HttpStatus)[keyof typeof HttpStatus];
+
+export declare const isClientErrorStatus: (status: number) => boolean;
+
+export declare const isServerErrorStatus: (status: number) => boolean;
+
+export declare const isSuccessStatus: (status: number) => boolean;
+
+export declare const readErrorMessage: (response: Response) => Promise<string>;
+
+export { }
+
+
+declare global {
+    interface Window {
+        __VERSIONS__: FullVersionInfo;
+    }
+}

package/dist/http.js

@@ -0,0 +1,14 @@
+import { ApiError as t, CSRF_HEADER as e, HttpMethod as s, HttpStatus as i, buildRequestHeaders as o, createApiClient as a, getCsrfToken as u, isClientErrorStatus as S, isServerErrorStatus as p, isSuccessStatus as E, readErrorMessage as d } from "./helpers/Http.js";
+export {
+  t as ApiError,
+  e as CSRF_HEADER,
+  s as HttpMethod,
+  i as HttpStatus,
+  o as buildRequestHeaders,
+  a as createApiClient,
+  u as getCsrfToken,
+  S as isClientErrorStatus,
+  p as isServerErrorStatus,
+  E as isSuccessStatus,
+  d as readErrorMessage
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { ComponentType } from 'react';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
@@ -15,6 +16,7 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
+import { SyntheticEvent } from 'react';
 import { THEME_CONFIGS } from '@memobit/themes';
 import { ThemeConfig } from '@memobit/themes';
 import { TouchEvent as TouchEvent_2 } from 'react';
@@ -37,6 +39,11 @@ export declare interface AccordionProps {
     className?: string;
 }
 
+declare interface AccountMenuModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
 /**
  * Adds days to a date
  */
@@ -104,6 +111,25 @@ export declare interface AngleSliderProps {
 
 export declare type AngleSliderVariant = 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
+export declare interface ApiClient {
+    get: <T>(path: string) => Promise<T>;
+    post: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    put: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    patch: <T, P = unknown>(path: string, payload?: P) => Promise<T>;
+    delete: <T>(path: string) => Promise<T>;
+    upload: <T>(path: string, formData: FormData) => Promise<T>;
+}
+
+export declare interface ApiClientConfig {
+    baseUrl: string;
+    loginPath?: string;
+}
+
+export declare class ApiError extends Error {
+    readonly status: number;
+    constructor(message: string, status: number);
+}
+
 export declare const APP_DATE_FORMAT = "DD MMM YYYY";
 
 export declare const APP_DATE_TIME_FORMAT = "DD MMM YYYY HH:mm";
@@ -126,6 +152,8 @@ export declare interface AppHeaderProps {
     showSeparator?: boolean;
 }
 
+export declare const applyImageFallback: (event: SyntheticEvent<HTMLImageElement>, categoryKey?: string) => void;
+
 export declare interface AppPersistenceDefaults<TPages, TTheme> {
     pages?: TPages;
     theme: TTheme;
@@ -303,6 +331,8 @@ export declare const breakpoints: {
     };
 };
 
+export declare const buildRequestHeaders: (method: HttpMethod, json?: boolean) => Record<string, string>;
+
 export declare interface BulkAction {
     key: string;
     label: string;
@@ -479,6 +509,20 @@ declare interface ChangePasswordModalProps {
     onClose: () => void;
 }
 
+export declare const chartColors: {
+    readonly axis: "var(--body-color-muted)";
+    readonly grid: "var(--border-color)";
+    readonly text: "var(--body-color)";
+};
+
+declare interface ChartTooltipStyle {
+    contentStyle: CSSProperties;
+    itemStyle: CSSProperties;
+    labelStyle: CSSProperties;
+}
+
+export declare const chartTooltipStyle: ChartTooltipStyle;
+
 export declare const Checkbox: FC<CheckboxProps>;
 
 declare interface CheckboxProps {
@@ -512,6 +556,8 @@ export declare type ChipSize = 'xsmall' | 'small' | 'medium' | 'large';
 
 export declare type ChipVariant = 'plain' | 'default' | 'success' | 'info' | 'warning' | 'danger';
 
+export declare const clamp: (value: number, min: number, max: number) => number;
+
 export declare const Col: FC<ColProps>;
 
 export declare const CollapsibleSection: default_2.FC<CollapsibleSectionProps>;
@@ -977,6 +1023,16 @@ declare interface CountryWithFlagProps {
     className?: string;
 }
 
+/**
+ * Cookie-session API client shared by the memobit apps: sends credentials, adds the CSRF
+ * header on mutating requests, surfaces the server's `error` message, and on 401 navigates
+ * to the login page. The 401 path returns a promise that never settles so callers don't
+ * flash an error toast while the browser is already leaving the page.
+ */
+export declare const createApiClient: ({ baseUrl, loginPath }: ApiClientConfig) => ApiClient;
+
+export declare const CSRF_HEADER = "X-CSRF-Token";
+
 declare function DataView_2<T>({ columns, data, rowKey, pinnedIds, selectable, onSelectionChange, selectedIds: controlledSelectedIds, pageSizeOptions, initialPageSize, showPageSize, card, actions, actionsWidth, timeline, onRowClick, rowHref, rowClassName, rowDetail, empty, initialSortKey, initialSortDirection, sortKey: controlledSortKey, sortDirection: controlledSortDirection, onSortChange, miniSort, showCardSortControls, desktopView, cardMaxWidth, className, onPageChange, onPageSizeChange, currentPage: controlledCurrentPage, totalItems: controlledTotalItems, group, showResultsCount, totalCount, itemNoun, columnSelector, }: DataViewProps<T>): default_2.JSX.Element;
 export { DataView_2 as DataView }
 
@@ -1646,11 +1702,26 @@ export declare const formatSecondsToMediaTime: (seconds: number | undefined) =>
 
 export declare const fuzzyMatch: (text: string, query: string) => boolean;
 
+export declare const getCategoryImageUrl: (categoryKey: string) => string;
+
+export declare const getCsrfToken: () => string | null;
+
 /**
  * Gets the number of days in a specific month
  */
 export declare const getDaysInMonth: (year: number, month: number) => number;
 
+export declare const getDefaultImageUrl: () => string;
+
+/**
+ * Resolves what an <img> should show for a stored image value:
+ * - a File (new, unsaved upload) → a blob URL
+ * - a full URL, blob URL or already-prefixed path → unchanged
+ * - empty → the category fallback, else the app default
+ * - a bare filename → its path under specific/
+ */
+export declare const getImageUrl: (filename: string | File, categoryKey?: string) => string;
+
 export declare const getIndicatorColor: (bmi: number, ranges: BMIRange[]) => string;
 
 export declare const getIndicatorPosition: (bmi: number, ranges: BMIRange[]) => number;
@@ -1668,6 +1739,8 @@ export declare const getIsoWeek: (date: Date) => number;
  */
 export declare const getMonthMatrix: (year: number, month: number, firstDayOfWeek?: 0 | 1) => Date[][];
 
+export declare const getNextImageFallback: (currentSrc: string, categoryKey?: string) => string | null;
+
 export declare const getPediatricRanges: (p5: number, p85: number, p95: number) => BMIRange[];
 
 export declare const getPercent: (value: number, total: number) => number;
@@ -1735,6 +1808,54 @@ export declare const htmlToMarkdown: (html: string) => string;
  */
 export declare const htmlToPlainText: (html: string | undefined | null) => string;
 
+export declare const HttpMethod: {
+    readonly Get: "GET";
+    readonly Post: "POST";
+    readonly Put: "PUT";
+    readonly Patch: "PATCH";
+    readonly Delete: "DELETE";
+};
+
+export declare type HttpMethod = (typeof HttpMethod)[keyof typeof HttpMethod];
+
+export declare const HttpStatus: {
+    readonly Continue: 100;
+    readonly SwitchingProtocols: 101;
+    readonly Ok: 200;
+    readonly Created: 201;
+    readonly Accepted: 202;
+    readonly NoContent: 204;
+    readonly PartialContent: 206;
+    readonly MovedPermanently: 301;
+    readonly Found: 302;
+    readonly SeeOther: 303;
+    readonly NotModified: 304;
+    readonly TemporaryRedirect: 307;
+    readonly PermanentRedirect: 308;
+    readonly BadRequest: 400;
+    readonly Unauthorized: 401;
+    readonly PaymentRequired: 402;
+    readonly Forbidden: 403;
+    readonly NotFound: 404;
+    readonly MethodNotAllowed: 405;
+    readonly NotAcceptable: 406;
+    readonly RequestTimeout: 408;
+    readonly Conflict: 409;
+    readonly Gone: 410;
+    readonly PayloadTooLarge: 413;
+    readonly UnsupportedMediaType: 415;
+    readonly UnprocessableEntity: 422;
+    readonly Locked: 423;
+    readonly TooManyRequests: 429;
+    readonly InternalServerError: 500;
+    readonly NotImplemented: 501;
+    readonly BadGateway: 502;
+    readonly ServiceUnavailable: 503;
+    readonly GatewayTimeout: 504;
+};
+
+export declare type HttpStatus = (typeof HttpStatus)[keyof typeof HttpStatus];
+
 export declare const Icon: default_2.FC<IconProps>;
 
 /**
@@ -1785,6 +1906,8 @@ export declare type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 
 export declare type IconVariant = 'default' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
+export declare const IMAGES_BASE_PATH = "/data-files/images";
+
 export declare const InfiniteScroll: ({ children, onLoadMore, hasMore, isLoading, threshold, rootMargin, height, onScrollChange, endMessage, className, }: InfiniteScrollProps) => JSX.Element;
 
 declare interface InfiniteScrollProps {
@@ -2153,6 +2276,8 @@ export declare const isAfter: (date: Date, compareDate: Date) => boolean;
  */
 export declare const isBefore: (date: Date, compareDate: Date) => boolean;
 
+export declare const isClientErrorStatus: (status: number) => boolean;
+
 /**
  * Checks if a date is within a range (inclusive)
  */
@@ -2163,6 +2288,10 @@ export declare const isDateInRange: (date: Date, start: Date, end: Date) => bool
  */
 export declare const isSameDay: (date1: Date, date2: Date) => boolean;
 
+export declare const isServerErrorStatus: (status: number) => boolean;
+
+export declare const isSuccessStatus: (status: number) => boolean;
+
 /**
  * Checks if a date is today
  */
@@ -2676,6 +2805,8 @@ declare interface RatingProps {
 
 export declare type RatingVariant = 'success' | 'info' | 'warning' | 'danger';
 
+export declare const readErrorMessage: (response: Response) => Promise<string>;
+
 export declare const RichTextEditor: ({ advanced, error, format, id, label, onBlur, onChange, placeholder, required, value, }: RichTextEditorProps) => default_2.JSX.Element;
 
 declare interface RichTextEditorProps {
@@ -3435,6 +3566,22 @@ declare type TreeVariant = 'default' | 'info' | 'success' | 'warning' | 'danger'
 
 export declare const truncateText: (text: string, maxLength?: number, separator?: string) => string;
 
+export declare const useAccountMenu: ({ appName, mfaModal: MfaModal, themeLabel, loginPath }: UseAccountMenuOptions) => UseAccountMenuReturn;
+
+export declare interface UseAccountMenuOptions {
+    appName: string;
+    mfaModal?: ComponentType<AccountMenuModalProps>;
+    themeLabel?: string;
+    loginPath?: string;
+}
+
+export declare interface UseAccountMenuReturn {
+    themeItem: MenuHamburgerItem;
+    accountItems: MenuHamburgerItem[];
+    items: MenuHamburgerItem[];
+    modals: ReactElement;
+}
+
 export declare function useAppPersistence<TPages, TTheme>(appId: string, defaults: AppPersistenceDefaults<TPages, TTheme>): UseAppPersistenceReturn<TPages, TTheme>;
 
 export declare interface UseAppPersistenceReturn<TPages, TTheme> {