@pallasoft/ps-mobile-components 1.2.0 → 1.4.0

package/dist/services/ps-sheet-service.js

@@ -4,6 +4,9 @@ export class PsSheetService {
     static maxHeight(windowHeight) {
         return Math.floor(windowHeight * PsSheetConfig.maxHeightFraction);
     }
+    static handlesInset(os) {
+        return os === 'ios' || os === 'android';
+    }
     static bottomPadding(isFloating, bottomInset) {
         return PsLayoutConfig.sheetGutter + (isFloating ? 0 : bottomInset);
     }
@@ -22,6 +25,17 @@ export class PsSheetService {
         }
         return isPressed ? PsSheetConfig.pressedOpacity : 1;
     }
+    static trailing(action, closeLabel, onClose) {
+        if (action === null)
+            return undefined;
+        return action === undefined ? PsSheetService.closeAction(closeLabel, onClose) : action;
+    }
+    static leadingIconStyle(kind) {
+        return kind === 'back' ? { transform: [{ scaleX: -1 }] } : {};
+    }
+    static grownHeight(previous, measured, isOpen) {
+        return isOpen ? Math.max(previous, measured) : measured;
+    }
     static shouldClose(isPresented, isOpen, isDismissBlocked) {
         return !isPresented && isOpen && !isDismissBlocked;
     }

package/dist/services/ps-stack-options-service.d.ts

@@ -0,0 +1,5 @@
+import type { PsMobileTheme } from '../interfaces/ps-mobile-theme';
+import type { PsStackScreenOptions } from '../interfaces/ps-stack-screen-options';
+export declare class PsStackOptionsService {
+    static android(base: PsStackScreenOptions, theme: PsMobileTheme): PsStackScreenOptions;
+}

package/dist/services/ps-stack-options-service.js

@@ -0,0 +1,18 @@
+import { PsHeaderConfig } from '../constants/ps-header-config';
+export class PsStackOptionsService {
+    static android(base, theme) {
+        return {
+            ...base,
+            contentStyle: { backgroundColor: theme.background },
+            headerShadowVisible: false,
+            headerStyle: { backgroundColor: theme.background },
+            headerTintColor: theme.ink,
+            headerTitleAlign: 'left',
+            headerTitleStyle: {
+                color: theme.ink,
+                fontFamily: theme.fonts.semibold,
+                fontSize: PsHeaderConfig.titleSize,
+            },
+        };
+    }
+}

package/dist/services/ps-state-service.d.ts

@@ -0,0 +1,7 @@
+import type { PsMobileTheme } from '../interfaces/ps-mobile-theme';
+export declare class PsStateService {
+    static pressedFill(theme: PsMobileTheme, base: string): string;
+    static headerFill(theme: PsMobileTheme, isPressed: boolean): string;
+    static disabledOpacity(): number;
+    static ringColor(theme: PsMobileTheme, hasError: boolean): string;
+}

package/dist/services/ps-state-service.js

@@ -0,0 +1,26 @@
+import { Platform } from 'react-native';
+import { PsAndroidStateConfig } from '../constants/ps-android-state-config';
+import { PsMobileControlConfig } from '../constants/ps-mobile-control-config';
+import { PsMobileColorService } from './ps-mobile-color-service';
+export class PsStateService {
+    static pressedFill(theme, base) {
+        if (Platform.OS === 'android')
+            return base;
+        return PsMobileColorService.withAlpha(theme.ink, PsMobileControlConfig.pressedAlpha);
+    }
+    static headerFill(theme, isPressed) {
+        if (Platform.OS === 'android')
+            return isPressed ? theme.primarySoftStrong : theme.primarySoft;
+        return PsMobileColorService.withAlpha(theme.ink, isPressed
+            ? PsMobileControlConfig.neutralAlpha + PsMobileControlConfig.pressedAlpha
+            : PsMobileControlConfig.neutralAlpha);
+    }
+    static disabledOpacity() {
+        return Platform.OS === 'android'
+            ? PsAndroidStateConfig.disabledContentAlpha
+            : PsMobileControlConfig.disabledOpacity;
+    }
+    static ringColor(theme, hasError) {
+        return Platform.OS === 'android' && hasError ? theme.danger : theme.primary;
+    }
+}

package/dist/services/ps-switcher-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsSwitcherItem } from '../interfaces/ps-switcher-item';
+export declare class PsSwitcherService {
+    static filter(items: PsSwitcherItem[], query: string): PsSwitcherItem[];
+    static hasSearch(count: number): boolean;
+    static selected(items: PsSwitcherItem[], id: string): PsSwitcherItem | undefined;
+}

package/dist/services/ps-switcher-service.js

@@ -0,0 +1,15 @@
+import { PsSwitcherConfig } from '../constants/ps-switcher-config';
+export class PsSwitcherService {
+    static filter(items, query) {
+        const needle = query.trim().toLowerCase();
+        return needle === ''
+            ? items
+            : items.filter((item) => item.searchText.toLowerCase().includes(needle));
+    }
+    static hasSearch(count) {
+        return count > PsSwitcherConfig.searchThreshold;
+    }
+    static selected(items, id) {
+        return items.find((item) => item.id === id);
+    }
+}

package/dist/services/ps-tab-bar-style-service.d.ts

@@ -0,0 +1,5 @@
+import type { PsMobileTheme } from '../interfaces/ps-mobile-theme';
+import type { PsTabBarStyle } from '../interfaces/ps-tab-bar-style';
+export declare class PsTabBarStyleService {
+    static resolve(theme: PsMobileTheme): PsTabBarStyle;
+}

package/dist/services/ps-tab-bar-style-service.js

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+import { PsAndroidStateConfig } from '../constants/ps-android-state-config';
+import { PsMobileColorService } from './ps-mobile-color-service';
+export class PsTabBarStyleService {
+    static resolve(theme) {
+        if (Platform.OS !== 'android')
+            return { tintColor: theme.primaryText };
+        return {
+            backgroundColor: theme.surface,
+            badgeBackgroundColor: theme.danger,
+            badgeTextColor: theme.white,
+            iconColor: { default: theme.muted, selected: theme.primaryText },
+            indicatorColor: theme.primarySoftStrong,
+            labelStyle: {
+                default: {
+                    color: theme.muted,
+                    fontFamily: theme.fonts.medium,
+                    fontSize: PsAndroidStateConfig.tabLabelSize,
+                },
+                selected: {
+                    color: theme.primaryText,
+                    fontFamily: theme.fonts.semibold,
+                    fontSize: PsAndroidStateConfig.tabLabelSize,
+                },
+            },
+            rippleColor: PsMobileColorService.withAlpha(theme.primary, PsAndroidStateConfig.rippleAlpha),
+            tintColor: theme.primaryText,
+        };
+    }
+}

package/dist/services/ps-text-service.js

@@ -3,15 +3,15 @@ export class PsTextService {
     static color(tone, theme) {
         switch (tone) {
             case 'danger':
-                return theme.danger;
+                return theme.dangerText;
             case 'muted':
                 return theme.muted;
             case 'primary':
-                return theme.primary;
+                return theme.primaryText;
             case 'success':
-                return theme.success;
+                return theme.successText;
             case 'warning':
-                return theme.warning;
+                return theme.warningText;
             case 'white':
                 return theme.white;
             default:

package/dist/services/ps-waterfall-service.d.ts

@@ -0,0 +1,10 @@
+import type { PsChartBarRect } from '../interfaces/ps-chart-bar-rect';
+import type { PsChartDomain } from '../interfaces/ps-chart-domain';
+import type { PsChartPlot } from '../interfaces/ps-chart-plot';
+import type { PsWaterfallDatum } from '../interfaces/ps-waterfall-datum';
+import type { PsWaterfallStep } from '../interfaces/ps-waterfall-step';
+export declare class PsWaterfallService {
+    static steps(data: PsWaterfallDatum[]): PsWaterfallStep[];
+    static values(steps: PsWaterfallStep[]): number[];
+    static rects(steps: PsWaterfallStep[], colors: string[], domain: PsChartDomain, plot: PsChartPlot): PsChartBarRect[];
+}

package/dist/services/ps-waterfall-service.js

@@ -0,0 +1,38 @@
+import { PsChartConfig } from '../constants/ps-chart-config';
+import { PsChartBarService } from './ps-chart-bar-service';
+import { PsChartScaleService } from './ps-chart-scale-service';
+export class PsWaterfallService {
+    static steps(data) {
+        let running = 0;
+        return data.map((datum) => {
+            const value = Number.isFinite(datum.value) ? datum.value : 0;
+            if (datum.isTotal === true) {
+                running = value;
+                return { end: value, isTotal: true, label: datum.label, start: 0, value };
+            }
+            const start = running;
+            running += value;
+            return { end: running, isTotal: false, label: datum.label, start, value };
+        });
+    }
+    static values(steps) {
+        return steps.flatMap((step) => [step.start, step.end]);
+    }
+    static rects(steps, colors, domain, plot) {
+        const slot = PsChartBarService.slot(steps.length, plot);
+        const width = slot * (1 - PsChartConfig.barGapRatio);
+        return steps.map((step, row) => {
+            const from = PsChartScaleService.y(step.start, domain, plot);
+            const to = PsChartScaleService.y(step.end, domain, plot);
+            return {
+                color: step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0],
+                height: Math.abs(to - from),
+                id: `${row}:${step.label}`,
+                isNegative: step.end < step.start,
+                width,
+                x: plot.left + row * slot + (slot * PsChartConfig.barGapRatio) / 2,
+                y: Math.min(from, to),
+            };
+        });
+    }
+}

package/jest-setup.js

@@ -16,6 +16,8 @@ jest.mock('react-native-reanimated', () => {
 		interpolate: (value, input, output) => output[0],
 		withRepeat: (value) => value,
 		FadeInUp: builder,
+		SlideInLeft: builder,
+		SlideInRight: builder,
 		FadeOutUp: builder,
 		useAnimatedProps: (props) => props(),
 		useAnimatedStyle: (style) => style(),
@@ -57,3 +59,155 @@ jest.mock('@react-native-menu/menu', () => {
 			React.createElement(View, { actions, onPressAction, testID }, children),
 	};
 });
+
+jest.mock('expo-router', () => {
+	const React = require('react');
+	const { View } = require('react-native');
+	const Link = ({ children, href }) =>
+		React.createElement(View, { href, testID: 'ps-list-link' }, children);
+	const Pass = ({ children }) => React.createElement(React.Fragment, null, children);
+	const MenuAction = ({ onPress, title }) =>
+		React.createElement(View, {
+			accessibilityLabel: title,
+			onPress,
+			testID: 'ps-list-link-action',
+		});
+
+	Link.Trigger = Pass;
+	Link.Preview = ({ children, style }) =>
+		children === undefined
+			? null
+			: React.createElement(View, { style, testID: 'ps-list-link-preview' }, children);
+	const Menu = ({ children }) =>
+		React.createElement(
+			React.Fragment,
+			null,
+			React.Children.toArray(children).filter(
+				(child) => React.isValidElement(child) && (child.type === MenuAction || child.type === Menu)
+			)
+		);
+
+	Link.Menu = Menu;
+	Link.MenuAction = MenuAction;
+
+	const Stack = () => null;
+
+	Stack.Screen = ({ options }) =>
+		React.createElement(View, {
+			accessibilityLabel: options.title,
+			headerBackVisible: options.headerBackVisible,
+			testID: 'stack-screen',
+		});
+	Stack.Toolbar = ({ children, placement }) =>
+		React.createElement(View, { testID: `stack-toolbar-${placement}` }, children);
+	Stack.Toolbar.Button = ({ children, disabled, onPress }) =>
+		React.createElement(View, { accessibilityLabel: children, disabled, onPress });
+	Stack.Toolbar.Spacer = () => null;
+
+	const ThemeProvider = ({ children }) => React.createElement(React.Fragment, null, children);
+
+	return { __esModule: true, Link, Stack, ThemeProvider };
+});
+
+jest.mock(
+	'expo-local-authentication',
+	() => ({
+		__esModule: true,
+		authenticateAsync: jest.fn(() => Promise.resolve({ success: true })),
+		getEnrolledLevelAsync: jest.fn(() => Promise.resolve(3)),
+		supportedAuthenticationTypesAsync: jest.fn(() => Promise.resolve([2])),
+	}),
+	{ virtual: true }
+);
+
+jest.mock(
+	'expo-quick-actions',
+	() => ({
+		__esModule: true,
+		addListener: jest.fn(() => ({ remove: jest.fn() })),
+		initial: undefined,
+		setItems: jest.fn(() => Promise.resolve()),
+	}),
+	{ virtual: true }
+);
+
+jest.mock('expo', () => {
+	const actual = jest.requireActual('expo');
+
+	return {
+		...actual,
+		requireOptionalNativeModule: (name) =>
+			name === 'ExpoLocalAuthentication' ? {} : actual.requireOptionalNativeModule(name),
+	};
+});
+
+jest.mock(
+	'react-native-document-scanner-plugin',
+	() => ({
+		__esModule: true,
+		default: {
+			scanDocument: jest.fn(() => Promise.resolve({ scannedImages: [], status: 'cancel' })),
+		},
+	}),
+	{ virtual: true }
+);
+
+jest.mock(
+	'react-native-pdf-thumbnail',
+	() => ({
+		__esModule: true,
+		default: {
+			generate: jest.fn(() =>
+				Promise.resolve({ height: 400, uri: 'file:///page-0.jpg', width: 300 })
+			),
+			generateAllPages: jest.fn(() =>
+				Promise.resolve([{ height: 400, uri: 'file:///page-0.jpg', width: 300 }])
+			),
+		},
+	}),
+	{ virtual: true }
+);
+
+jest.mock(
+	'expo-image-picker',
+	() => ({
+		__esModule: true,
+		launchCameraAsync: jest.fn(() => Promise.resolve({ assets: null, canceled: true })),
+		launchImageLibraryAsync: jest.fn(() => Promise.resolve({ assets: null, canceled: true })),
+		requestCameraPermissionsAsync: jest.fn(() => Promise.resolve({ granted: true })),
+	}),
+	{ virtual: true }
+);
+
+jest.mock(
+	'expo-document-picker',
+	() => ({
+		__esModule: true,
+		getDocumentAsync: jest.fn(() => Promise.resolve({ assets: null, canceled: true })),
+	}),
+	{ virtual: true }
+);
+
+jest.mock('expo-device', () => ({ __esModule: true, isDevice: true }), { virtual: true });
+
+jest.mock(
+	'expo-camera',
+	() => {
+		const React = require('react');
+		const { View } = require('react-native');
+
+		return {
+			__esModule: true,
+			Camera: {
+				requestCameraPermissionsAsync: jest.fn(() => Promise.resolve({ granted: true })),
+			},
+			CameraView: (props) =>
+				React.createElement(View, {
+					enableTorch: props.enableTorch,
+					onBarcodeScanned: props.onBarcodeScanned,
+					testID: 'ps-barcode-camera',
+				}),
+		};
+	},
+	{ virtual: true }
+);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -34,7 +34,7 @@
 		"test": "jest"
 	},
 	"dependencies": {
-		"@pallasoft/ps-design-system": "^1.17.0",
+		"@pallasoft/ps-design-system": "^1.19.0",
 		"@pallasoft/ps-icons": "^1.11.0",
 		"@pallasoft/ps-utilities": "^2.27.0"
 	},
@@ -42,19 +42,55 @@
 		"@expo/ui": "~58.0.0",
 		"@react-native-menu/menu": "^2.0.0",
 		"expo": "~58.0.0",
+		"expo-camera": "~58.0.0",
+		"expo-device": "~58.0.0",
+		"expo-document-picker": "~58.0.0",
+		"expo-file-system": "~58.0.0",
 		"expo-haptics": "~58.0.7",
+		"expo-image-picker": "~58.0.0",
 		"expo-linear-gradient": "~58.0.3",
+		"expo-local-authentication": "~58.0.0",
+		"expo-quick-actions": "^6.0.2",
+		"expo-router": "~58.0.0",
 		"react": "^19.3.0",
 		"react-native": "~0.88.0",
 		"react-native-document-scanner-plugin": "^2.0.4",
 		"react-native-gesture-handler": "~3.3.0",
+		"react-native-pdf-thumbnail": "^2.0.0",
 		"react-native-reanimated": "~4.7.1",
 		"react-native-safe-area-context": "~5.10.1",
 		"react-native-svg": "~15.16.0"
 	},
 	"peerDependenciesMeta": {
+		"expo-camera": {
+			"optional": true
+		},
+		"expo-device": {
+			"optional": true
+		},
+		"expo-document-picker": {
+			"optional": true
+		},
+		"expo-file-system": {
+			"optional": true
+		},
+		"expo-image-picker": {
+			"optional": true
+		},
+		"expo-local-authentication": {
+			"optional": true
+		},
+		"expo-quick-actions": {
+			"optional": true
+		},
+		"expo-router": {
+			"optional": true
+		},
 		"react-native-document-scanner-plugin": {
 			"optional": true
+		},
+		"react-native-pdf-thumbnail": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
@@ -67,6 +103,7 @@
 		"@expo/ui": "~58.0.21",
 		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
 		"@react-native-menu/menu": "^2.0.0",
+		"@react-native/jest-preset": "^0.88.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/git": "^10.0.1",
@@ -86,8 +123,15 @@
 		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-prettier": "^5.5.4",
 		"expo": "~58.0.16",
+		"expo-device": "~58.0.5",
+		"expo-document-picker": "~58.0.4",
+		"expo-file-system": "~58.0.10",
 		"expo-haptics": "~58.0.7",
+		"expo-image-picker": "~58.0.10",
 		"expo-linear-gradient": "~58.0.3",
+		"expo-local-authentication": "~58.0.2",
+		"expo-router": "~58.0.24",
+		"hono": "^4.13.13",
 		"husky": "^9.1.7",
 		"jest": "^30.5.2",
 		"jest-expo": "~58.0.11",
@@ -96,6 +140,7 @@
 		"react": "^19.3.1",
 		"react-native": "0.88.0",
 		"react-native-gesture-handler": "~3.3.0",
+		"react-native-pdf-thumbnail": "^2.0.0",
 		"react-native-reanimated": "^4.7.1",
 		"react-native-safe-area-context": "~5.10.1",
 		"react-native-svg": "^15.16.0",