@pallasoft/ps-core-components 2.27.0 → 2.28.0

package/dist/components/ps-overview-card.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface PsOverviewCardProps {
+    action?: ReactNode;
+    badge?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    summary?: string;
+    title: string;
+}
+export declare const PsOverviewCard: ({ action, badge, children, className, footer, icon, summary, title, }: PsOverviewCardProps) => import("react").JSX.Element;

package/dist/components/ps-overview-card.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOverviewCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [(0, jsx_runtime_1.jsxs)("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? (0, jsx_runtime_1.jsx)("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));
+exports.PsOverviewCard = PsOverviewCard;

package/dist/esm/components/ps-overview-card.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => (_jsxs("section", { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [_jsxs("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? _jsx("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [_jsx("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? _jsx("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? _jsx("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? _jsx("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));

package/dist/esm/hooks/use-ps-optimistic-fetcher.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePsChangeQueue } from './use-ps-change-queue';
+import { usePsOptimisticRows } from './use-ps-optimistic-rows';
+export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = useState(false);
+    const submitted = useRef(0);
+    const settle = useRef(null);
+    const sawBusy = useRef(false);
+    const dataBefore = useRef(fetcher.data);
+    const dataSeen = useRef(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = usePsOptimisticRows({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    useEffect(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = useCallback((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = useCallback(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = useCallback(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = useCallback((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = usePsChangeQueue({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = useCallback((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};

package/dist/esm/index.js

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';

package/dist/esm/interfaces/ps-fetcher-like.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-fetcher-submit-options.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-optimistic-fetcher-input.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-optimistic-fetcher-result.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-revalidator-like.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-ps-optimistic-fetcher.d.ts

@@ -0,0 +1,3 @@
+import type { PsOptimisticFetcherInput } from '../interfaces/ps-optimistic-fetcher-input';
+import type { PsOptimisticFetcherResult } from '../interfaces/ps-optimistic-fetcher-result';
+export declare const usePsOptimisticFetcher: <Row, Data>({ apply, fetcher, isHolding, isSuccess, merge, revalidator, rows, }: PsOptimisticFetcherInput<Row, Data>) => PsOptimisticFetcherResult<Row>;

package/dist/hooks/use-ps-optimistic-fetcher.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsOptimisticFetcher = void 0;
+const react_1 = require("react");
+const use_ps_change_queue_1 = require("./use-ps-change-queue");
+const use_ps_optimistic_rows_1 = require("./use-ps-optimistic-rows");
+const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = (0, react_1.useState)(false);
+    const submitted = (0, react_1.useRef)(0);
+    const settle = (0, react_1.useRef)(null);
+    const sawBusy = (0, react_1.useRef)(false);
+    const dataBefore = (0, react_1.useRef)(fetcher.data);
+    const dataSeen = (0, react_1.useRef)(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = (0, use_ps_optimistic_rows_1.usePsOptimisticRows)({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    (0, react_1.useEffect)(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = (0, react_1.useCallback)((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = (0, react_1.useCallback)(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = (0, react_1.useCallback)(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = (0, react_1.useCallback)((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = (0, use_ps_change_queue_1.usePsChangeQueue)({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = (0, react_1.useCallback)((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};
+exports.usePsOptimisticFetcher = usePsOptimisticFetcher;

package/dist/index.d.ts

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';

package/dist/index.js

@@ -91,6 +91,12 @@ __exportStar(require("./hooks/use-ps-change-queue"), exports);
 __exportStar(require("./interfaces/ps-change-queue-input"), exports);
 __exportStar(require("./interfaces/ps-change-queue-result"), exports);
 __exportStar(require("./hooks/use-ps-optimistic-rows"), exports);
+__exportStar(require("./hooks/use-ps-optimistic-fetcher"), exports);
+__exportStar(require("./interfaces/ps-fetcher-like"), exports);
+__exportStar(require("./interfaces/ps-fetcher-submit-options"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-input"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-result"), exports);
+__exportStar(require("./interfaces/ps-revalidator-like"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-result"), exports);
 __exportStar(require("./hooks/use-ps-navigation-progress"), exports);
@@ -145,6 +151,7 @@ __exportStar(require("./models/ps-theme-mode-state"), exports);
 __exportStar(require("./models/ps-tool-card-data"), exports);
 __exportStar(require("./components/ps-capped-list"), exports);
 __exportStar(require("./components/ps-detail-list"), exports);
+__exportStar(require("./components/ps-overview-card"), exports);
 __exportStar(require("./components/ps-form-footer"), exports);
 __exportStar(require("./components/ps-start-highlight"), exports);
 __exportStar(require("./components/ps-start-panel"), exports);

package/dist/interfaces/ps-fetcher-like.d.ts

@@ -0,0 +1,6 @@
+import type { PsFetcherSubmitOptions } from './ps-fetcher-submit-options';
+export interface PsFetcherLike<Data> {
+    data: Data | undefined;
+    state: string;
+    submit: (values: Record<string, string>, options: PsFetcherSubmitOptions) => unknown;
+}

package/dist/interfaces/ps-fetcher-like.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-fetcher-submit-options.d.ts

@@ -0,0 +1,3 @@
+export interface PsFetcherSubmitOptions {
+    method: 'post';
+}

package/dist/interfaces/ps-fetcher-submit-options.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-optimistic-fetcher-input.d.ts

@@ -0,0 +1,11 @@
+import type { PsFetcherLike } from './ps-fetcher-like';
+import type { PsRevalidatorLike } from './ps-revalidator-like';
+export interface PsOptimisticFetcherInput<Row, Data> {
+    apply: (rows: Row[], changes: Record<string, string>[]) => Row[];
+    fetcher: PsFetcherLike<Data>;
+    isHolding?: boolean;
+    isSuccess: (data: Data | undefined) => boolean;
+    merge?: (changes: Record<string, string>[]) => Record<string, string>[];
+    revalidator: PsRevalidatorLike;
+    rows: Row[];
+}

package/dist/interfaces/ps-optimistic-fetcher-input.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-optimistic-fetcher-result.d.ts

@@ -0,0 +1,4 @@
+export interface PsOptimisticFetcherResult<Row> {
+    rows: Row[];
+    submit: (values: Record<string, string>) => void;
+}

package/dist/interfaces/ps-optimistic-fetcher-result.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-revalidator-like.d.ts

@@ -0,0 +1,4 @@
+export interface PsRevalidatorLike {
+    revalidate: () => Promise<void> | void;
+    state: string;
+}

package/dist/interfaces/ps-revalidator-like.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.27.0",
+	"version": "2.28.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",