@pallasoft/ps-mobile-components 1.0.0 → 1.2.0

package/dist/components/ps-count-badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-count-badge';
+export * from './ps-count-badge-props';

package/dist/components/ps-count-badge/index.js

@@ -0,0 +1,2 @@
+export * from './ps-count-badge';
+export * from './ps-count-badge-props';

package/dist/components/ps-count-badge/ps-count-badge-props.d.ts

@@ -0,0 +1,5 @@
+export interface PsCountBadgeProps {
+    count: number;
+    isAlert?: boolean;
+    label?: string;
+}

package/dist/components/ps-count-badge/ps-count-badge-props.js

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

package/dist/components/ps-count-badge/ps-count-badge.d.ts

@@ -0,0 +1,2 @@
+import type { PsCountBadgeProps } from './ps-count-badge-props';
+export declare const PsCountBadge: ({ count, isAlert, label }: PsCountBadgeProps) => import("react").JSX.Element | null;

package/dist/components/ps-count-badge/ps-count-badge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsCountBadgeConfig } from '../../constants/ps-count-badge-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsCountBadgeService } from '../../services/ps-count-badge-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsCountBadge = ({ count, isAlert = false, label }) => {
+    const theme = usePsMobileTheme();
+    if (count <= 0)
+        return null;
+    return (_jsx(View, { accessibilityLabel: label, style: {
+            alignItems: 'center',
+            alignSelf: 'center',
+            backgroundColor: isAlert ? theme.danger : theme.primary,
+            borderRadius: PsCountBadgeConfig.height / 2,
+            height: PsCountBadgeConfig.height,
+            justifyContent: 'center',
+            minWidth: PsCountBadgeConfig.height,
+            paddingHorizontal: PsCountBadgeConfig.paddingHorizontal,
+        }, testID: 'ps-count-badge', children: _jsx(PsText, { style: {
+                color: isAlert ? theme.white : theme.primaryContrast,
+                fontSize: PsCountBadgeConfig.fontSize,
+                lineHeight: PsCountBadgeConfig.height,
+            }, weight: 'bold', children: PsCountBadgeService.text(count) }) }));
+};

package/dist/components/ps-list/index.d.ts

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

package/dist/components/ps-list/index.js

@@ -8,3 +8,5 @@ export * from './ps-list-select-row';
 export * from './ps-list-select-row-props';
 export * from './ps-list-person-row';
 export * from './ps-list-person-row-props';
+export * from './ps-list-link-row';
+export * from './ps-list-link-row-props';

package/dist/components/ps-list/ps-list-link-row-props.d.ts

@@ -0,0 +1,11 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsListLinkRowProps {
+    count?: number;
+    countLabel?: string;
+    iconKey: PsMobileIconKey;
+    isAlert?: boolean;
+    isLoading?: boolean;
+    onPress: () => void;
+    subtitle?: string;
+    title: string;
+}

package/dist/components/ps-list/ps-list-link-row-props.js

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

package/dist/components/ps-list/ps-list-link-row-skeleton.d.ts

@@ -0,0 +1 @@
+export declare const PsListLinkRowSkeleton: () => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-link-row-skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsListConfig } from '../../constants/ps-list-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsListLinkRowSkeleton = () => (_jsxs(View, { style: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: PsLayoutConfig.headerSlotGap,
+        minHeight: PsLayoutConfig.linkRowMinHeight,
+        paddingHorizontal: PsLayoutConfig.gutter,
+        paddingVertical: PsLayoutConfig.rowPaddingVertical,
+    }, testID: 'ps-list-link-row-skeleton', children: [_jsx(PsSkeleton, { height: PsLayoutConfig.linkRowIconBox, radius: PsLayoutConfig.linkRowIconBoxRadius, width: PsLayoutConfig.linkRowIconBox }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap * 3 }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonTitleWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsListConfig.skeletonSubtitleWidth })] })] }));

package/dist/components/ps-list/ps-list-link-row.d.ts

@@ -0,0 +1,2 @@
+import type { PsListLinkRowProps } from './ps-list-link-row-props';
+export declare const PsListLinkRow: ({ count, countLabel, iconKey, isAlert, isLoading, onPress, subtitle, title, }: PsListLinkRowProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-link-row.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsCountBadge } from '../ps-count-badge/ps-count-badge';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+import { PsListLinkRowSkeleton } from './ps-list-link-row-skeleton';
+export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isLoading = false, onPress, subtitle, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    if (isLoading)
+        return _jsx(PsListLinkRowSkeleton, {});
+    const hasCount = count !== undefined && count > 0;
+    return (_jsxs(Pressable, { accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: ({ pressed }) => ({
+            alignItems: 'center',
+            backgroundColor: pressed
+                ? PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha)
+                : theme.surface,
+            flexDirection: 'row',
+            gap: PsLayoutConfig.headerSlotGap,
+            minHeight: PsLayoutConfig.linkRowMinHeight,
+            paddingHorizontal: PsLayoutConfig.gutter,
+            paddingVertical: PsLayoutConfig.rowPaddingVertical,
+        }), testID: 'ps-list-link-row', children: [_jsx(View, { style: {
+                    alignItems: 'center',
+                    backgroundColor: theme.primarySoft,
+                    borderRadius: PsLayoutConfig.linkRowIconBoxRadius,
+                    height: PsLayoutConfig.linkRowIconBox,
+                    justifyContent: 'center',
+                    width: PsLayoutConfig.linkRowIconBox,
+                }, children: _jsx(PsIcon, { color: theme.primary, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
+};

package/dist/constants/ps-count-badge-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsCountBadgeConfig: {
+    readonly fontSize: 13;
+    readonly height: 24;
+    readonly maxCount: 99;
+    readonly paddingHorizontal: 7;
+};

package/dist/constants/ps-count-badge-config.js

@@ -0,0 +1,6 @@
+export const PsCountBadgeConfig = {
+    fontSize: 13,
+    height: 24,
+    maxCount: 99,
+    paddingHorizontal: 7,
+};

package/dist/constants/ps-layout-config.d.ts

@@ -6,6 +6,10 @@ export declare const PsLayoutConfig: {
     readonly headerGap: 4;
     readonly headerSlotGap: 12;
     readonly hitSlop: 8;
+    readonly linkRowIconBox: 44;
+    readonly linkRowIconBoxRadius: 12;
+    readonly linkRowIconSize: 22;
+    readonly linkRowMinHeight: 72;
     readonly listGap: 24;
     readonly listSectionGap: 8;
     readonly longPressDelayMs: 350;

package/dist/constants/ps-layout-config.js

@@ -6,6 +6,10 @@ export const PsLayoutConfig = {
     headerGap: 4,
     headerSlotGap: 12,
     hitSlop: 8,
+    linkRowIconBox: 44,
+    linkRowIconBoxRadius: 12,
+    linkRowIconSize: 22,
+    linkRowMinHeight: 72,
     listGap: 24,
     listSectionGap: 8,
     longPressDelayMs: 350,

package/dist/hooks/use-ps-remote-data.d.ts

@@ -1,3 +1,3 @@
 import { PsRemoteDataOptions } from '../interfaces/ps-remote-data-options';
 import { PsRemoteDataResult } from '../interfaces/ps-remote-data-result';
-export declare const usePsRemoteData: <T>({ key, load, refreshKey, }: PsRemoteDataOptions<T>) => PsRemoteDataResult<T>;
+export declare const usePsRemoteData: <T>({ key, load, onWriteFailed, refreshKey, }: PsRemoteDataOptions<T>) => PsRemoteDataResult<T>;

package/dist/hooks/use-ps-remote-data.js

@@ -1,18 +1,27 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-export const usePsRemoteData = ({ key, load, refreshKey, }) => {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePsChangeQueue, usePsOptimisticRows } from '@pallasoft/ps-utilities/react';
+import { PsRemoteDataService } from '../services/ps-remote-data-service';
+export const usePsRemoteData = ({ key, load, onWriteFailed, refreshKey, }) => {
     const [state, setState] = useState({
         data: null,
         error: false,
         isLoading: true,
     });
+    const [isSaving, setIsSaving] = useState(false);
+    const isSavingRef = useRef(false);
+    const submittedRef = useRef(0);
     const dataRef = useRef(null);
     const loadRef = useRef(load);
+    const onWriteFailedRef = useRef(onWriteFailed);
     const versionRef = useRef(0);
-    const queueRef = useRef(Promise.resolve(true));
-    const pendingRef = useRef(0);
     useEffect(() => {
         loadRef.current = load;
+        onWriteFailedRef.current = onWriteFailed;
     });
+    const setSaving = useCallback((value) => {
+        isSavingRef.current = value;
+        setIsSaving(value);
+    }, []);
     const fetch = useCallback(async () => {
         versionRef.current += 1;
         const version = versionRef.current;
@@ -31,42 +40,63 @@ export const usePsRemoteData = ({ key, load, refreshKey, }) => {
     }, []);
     useEffect(() => {
         dataRef.current = null;
-        pendingRef.current = 0;
+        setSaving(false);
         setState({ data: null, error: false, isLoading: true });
         void fetch();
         return () => {
             versionRef.current += 1;
         };
-    }, [key, fetch]);
+    }, [key, fetch, setSaving]);
     const refreshRef = useRef(refreshKey);
     useEffect(() => {
         if (refreshRef.current === refreshKey)
             return;
         refreshRef.current = refreshKey;
-        if (pendingRef.current === 0)
+        if (!isSavingRef.current)
             void fetch();
     }, [fetch, refreshKey]);
+    const apply = useCallback((rows, updates) => PsRemoteDataService.apply(rows, updates), []);
+    const rows = useMemo(() => PsRemoteDataService.rowsOf(state.data), [state.data]);
+    const optimistic = usePsOptimisticRows({ apply, isSaving, rows });
+    const rememberRef = useRef(optimistic.remember);
+    useEffect(() => {
+        rememberRef.current = optimistic.remember;
+    });
+    const send = useCallback(async (writes) => {
+        for (const item of writes) {
+            await item.request();
+            item.resolve(true);
+        }
+    }, []);
+    const onFailed = useCallback((failed, dropped) => {
+        for (const item of [...failed, ...dropped]) {
+            optimistic.forgetLast();
+            item.resolve(false);
+        }
+        if (onWriteFailedRef.current !== undefined)
+            onWriteFailedRef.current();
+    }, [optimistic.forgetLast]);
+    const onDrained = useCallback(() => {
+        const through = submittedRef.current;
+        void fetch().then(() => {
+            if (submittedRef.current === through)
+                setSaving(false);
+        });
+    }, [fetch, setSaving]);
+    const queue = usePsChangeQueue({ onDrained, onFailed, send });
+    const { enqueue } = queue;
     const write = useCallback((update, request) => {
-        const previous = dataRef.current;
-        if (previous === null)
+        if (dataRef.current === null)
             return Promise.resolve(false);
-        const next = update(previous);
-        versionRef.current += 1;
-        dataRef.current = next;
-        pendingRef.current += 1;
-        setState({ data: next, error: false, isLoading: false });
-        const run = queueRef.current.then(() => request().then(() => true, () => false));
-        queueRef.current = run;
-        return run.then((isSaved) => {
-            pendingRef.current -= 1;
-            if (!isSaved && pendingRef.current === 0) {
-                dataRef.current = previous;
-                setState({ data: previous, error: false, isLoading: false });
-            }
-            if (pendingRef.current === 0)
-                void fetch();
-            return isSaved;
-        });
-    }, [fetch]);
-    return { ...state, reload: fetch, write };
+        submittedRef.current += 1;
+        setSaving(true);
+        rememberRef.current(update);
+        return new Promise((resolve) => enqueue({ request, resolve }));
+    }, [enqueue, setSaving]);
+    return {
+        ...state,
+        data: PsRemoteDataService.shown(optimistic.rows),
+        reload: fetch,
+        write,
+    };
 };

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/ps-mobile-theme-provider';
 export * from './components/ps-page-backdrop';
 export * from './components/ps-pallasoft-sign-in-button';
 export * from './components/ps-color-swatches';
+export * from './components/ps-count-badge';
 export * from './components/ps-segmented-control';
 export * from './components/ps-tabs';
 export * from './components/ps-select';

package/dist/index.js

@@ -25,6 +25,7 @@ export * from './components/ps-mobile-theme-provider';
 export * from './components/ps-page-backdrop';
 export * from './components/ps-pallasoft-sign-in-button';
 export * from './components/ps-color-swatches';
+export * from './components/ps-count-badge';
 export * from './components/ps-segmented-control';
 export * from './components/ps-tabs';
 export * from './components/ps-select';

package/dist/interfaces/ps-remote-data-options.d.ts

@@ -1,5 +1,6 @@
 export interface PsRemoteDataOptions<T> {
     key: string;
     load: () => Promise<T>;
+    onWriteFailed?: () => void;
     refreshKey?: number | string;
 }

package/dist/interfaces/ps-remote-data-update.d.ts

@@ -0,0 +1 @@
+export type PsRemoteDataUpdate<T> = (data: T) => T;

package/dist/interfaces/ps-remote-data-update.js

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

package/dist/interfaces/ps-remote-data-write.d.ts

@@ -0,0 +1,4 @@
+export interface PsRemoteDataWrite {
+    request: () => Promise<unknown>;
+    resolve: (isSaved: boolean) => void;
+}

package/dist/interfaces/ps-remote-data-write.js

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

package/dist/services/ps-count-badge-service.d.ts

@@ -0,0 +1,3 @@
+export declare class PsCountBadgeService {
+    static text(count: number): string;
+}

package/dist/services/ps-count-badge-service.js

@@ -0,0 +1,6 @@
+import { PsCountBadgeConfig } from '../constants/ps-count-badge-config';
+export class PsCountBadgeService {
+    static text(count) {
+        return count > PsCountBadgeConfig.maxCount ? `${PsCountBadgeConfig.maxCount}+` : String(count);
+    }
+}

package/dist/services/ps-remote-data-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsRemoteDataUpdate } from '../interfaces/ps-remote-data-update';
+export declare class PsRemoteDataService {
+    static rowsOf<T>(data: T | null): T[];
+    static apply<T>(rows: T[], updates: PsRemoteDataUpdate<T>[]): T[];
+    static shown<T>(rows: T[]): T | null;
+}

package/dist/services/ps-remote-data-service.js

@@ -0,0 +1,13 @@
+export class PsRemoteDataService {
+    static rowsOf(data) {
+        return data === null ? [] : [data];
+    }
+    static apply(rows, updates) {
+        if (rows.length === 0)
+            return rows;
+        return [updates.reduce((current, update) => update(current), rows[0])];
+    }
+    static shown(rows) {
+        return rows.length === 0 ? null : rows[0];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@pallasoft/ps-design-system": "^1.17.0",
 		"@pallasoft/ps-icons": "^1.11.0",
-		"@pallasoft/ps-utilities": "^2.26.0"
+		"@pallasoft/ps-utilities": "^2.27.0"
 	},
 	"peerDependencies": {
 		"@expo/ui": "~58.0.0",