@pallasoft/ps-mobile-components 1.14.0 → 1.15.0

package/dist/components/ps-link-preview-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-link-preview-card';
+export * from './ps-link-preview-card-props';

package/dist/components/ps-link-preview-card/index.js

@@ -0,0 +1,2 @@
+export * from './ps-link-preview-card';
+export * from './ps-link-preview-card-props';

package/dist/components/ps-link-preview-card/ps-link-preview-card-props.d.ts

@@ -0,0 +1,21 @@
+import type { PsLinkPreviewSize } from '../../constants/ps-link-preview-size';
+import type { PsDocumentSource } from '../../interfaces/ps-document-source';
+export interface PsLinkPreviewCardProps {
+    description?: string | null;
+    faviconSource?: PsDocumentSource | null;
+    href: string;
+    imageSource?: PsDocumentSource | null;
+    isFramed?: boolean;
+    isLoading?: boolean;
+    loadingLabel?: string;
+    onPress: () => void;
+    opensInBrowserLabel?: string;
+    siteName?: string | null;
+    size?: PsLinkPreviewSize;
+    title?: string | null;
+}
+export interface PsLinkPreviewCardSkeletonProps {
+    isCompact: boolean;
+    isFramed: boolean;
+    label?: string;
+}

package/dist/components/ps-link-preview-card/ps-link-preview-card-props.js

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

package/dist/components/ps-link-preview-card/ps-link-preview-card-skeleton.d.ts

@@ -0,0 +1,2 @@
+import type { PsLinkPreviewCardSkeletonProps } from './ps-link-preview-card-props';
+export declare const PsLinkPreviewCardSkeleton: ({ isCompact, isFramed, label, }: PsLinkPreviewCardSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-link-preview-card/ps-link-preview-card-skeleton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View } from 'react-native';
+import { PsLinkPreviewConfig } from '../../constants/ps-link-preview-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsLinkPreviewService } from '../../services/ps-link-preview-service';
+import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
+export const PsLinkPreviewCardSkeleton = ({ isCompact, isFramed, label, }) => {
+    const theme = usePsMobileTheme();
+    const [width, setWidth] = useState(0);
+    const bodyPadding = isCompact
+        ? PsLinkPreviewConfig.compactBodyPadding
+        : PsLinkPreviewConfig.fullBodyPadding;
+    return (_jsxs(View, { accessibilityLabel: label, accessible: label !== undefined, onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
+            backgroundColor: theme.surface,
+            borderColor: theme.line,
+            borderRadius: PsMobileControlConfig.cardRadius,
+            borderWidth: isFramed ? 1 : 0,
+            flexDirection: isCompact ? 'row' : 'column',
+            overflow: 'hidden',
+        }, testID: 'ps-link-preview-card-skeleton', children: [isCompact ? (_jsx(PsSkeleton, { height: PsLinkPreviewConfig.compactImageMinHeight, radius: 0, shape: PsSkeletonShape.Block, width: PsLinkPreviewConfig.compactImageWidth })) : (_jsx(PsSkeleton, { height: PsLinkPreviewService.imageHeight(width), radius: 0, shape: PsSkeletonShape.Block })), _jsxs(View, { style: {
+                    flex: isCompact ? 1 : undefined,
+                    gap: PsLinkPreviewConfig.skeletonLineGap,
+                    padding: bodyPadding,
+                }, children: [_jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsLinkPreviewConfig.skeletonMetaWidth }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Line, width: PsLinkPreviewConfig.skeletonTitleWidth }), isCompact ? null : _jsx(PsSkeleton, { shape: PsSkeletonShape.Line })] })] }));
+};

package/dist/components/ps-link-preview-card/ps-link-preview-card.d.ts

@@ -0,0 +1,2 @@
+import type { PsLinkPreviewCardProps } from './ps-link-preview-card-props';
+export declare const PsLinkPreviewCard: ({ description, faviconSource, href, imageSource, isFramed, isLoading, loadingLabel, onPress, opensInBrowserLabel, siteName, size, title, }: PsLinkPreviewCardProps) => import("react").JSX.Element | null;

package/dist/components/ps-link-preview-card/ps-link-preview-card.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Image, Pressable, View } from 'react-native';
+import { PsLinkPreviewConfig } from '../../constants/ps-link-preview-config';
+import { PsLinkPreviewSize } from '../../constants/ps-link-preview-size';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsLinkPreviewService } from '../../services/ps-link-preview-service';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+import { PsLinkPreviewCardSkeleton } from './ps-link-preview-card-skeleton';
+export const PsLinkPreviewCard = ({ description, faviconSource, href, imageSource, isFramed = true, isLoading = false, loadingLabel, onPress, opensInBrowserLabel, siteName, size = PsLinkPreviewSize.Full, title, }) => {
+    const theme = usePsMobileTheme();
+    const haptic = usePsHaptics();
+    const [failedImageUri, setFailedImageUri] = useState(null);
+    const [failedFaviconUri, setFailedFaviconUri] = useState(null);
+    if (!PsLinkPreviewService.isWebAddress(href))
+        return null;
+    const isCompact = PsLinkPreviewService.isCompact(size);
+    if (isLoading)
+        return (_jsx(PsLinkPreviewCardSkeleton, { isCompact: isCompact, isFramed: isFramed, label: loadingLabel }));
+    const meta = PsLinkPreviewService.meta(href, title, siteName, description, size);
+    const hasImage = PsLinkPreviewService.hasSource(imageSource, failedImageUri);
+    const hasFavicon = PsLinkPreviewService.hasSource(faviconSource, failedFaviconUri);
+    return (_jsxs(Pressable, { accessibilityHint: opensInBrowserLabel, accessibilityRole: 'link', android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: ({ pressed }) => ({
+            backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
+            borderColor: theme.line,
+            borderRadius: PsMobileControlConfig.cardRadius,
+            borderWidth: isFramed ? 1 : 0,
+            flexDirection: isCompact ? 'row' : 'column',
+            overflow: 'hidden',
+        }), testID: 'ps-link-preview-card', children: [hasImage && imageSource !== null && imageSource !== undefined ? (_jsx(Image, { onError: () => setFailedImageUri(imageSource.uri), resizeMode: 'cover', source: { headers: imageSource.headers, uri: imageSource.uri }, style: isCompact
+                    ? {
+                        alignSelf: 'stretch',
+                        backgroundColor: theme.skeletonBase,
+                        minHeight: PsLinkPreviewConfig.compactImageMinHeight,
+                        width: PsLinkPreviewConfig.compactImageWidth,
+                    }
+                    : {
+                        aspectRatio: PsLinkPreviewConfig.imageAspectRatio,
+                        backgroundColor: theme.skeletonBase,
+                        width: '100%',
+                    }, testID: 'ps-link-preview-card-image' })) : null, _jsxs(View, { style: {
+                    flex: isCompact ? 1 : undefined,
+                    gap: PsLinkPreviewConfig.textGap,
+                    padding: isCompact
+                        ? PsLinkPreviewConfig.compactBodyPadding
+                        : PsLinkPreviewConfig.fullBodyPadding,
+                }, children: [_jsxs(View, { style: {
+                            alignItems: 'center',
+                            flexDirection: 'row',
+                            gap: PsLinkPreviewConfig.metaGap,
+                        }, children: [hasFavicon && faviconSource !== null && faviconSource !== undefined ? (_jsx(Image, { onError: () => setFailedFaviconUri(faviconSource.uri), resizeMode: 'contain', source: { headers: faviconSource.headers, uri: faviconSource.uri }, style: {
+                                    borderRadius: PsLinkPreviewConfig.faviconRadius,
+                                    height: PsLinkPreviewConfig.faviconSize,
+                                    width: PsLinkPreviewConfig.faviconSize,
+                                }, testID: 'ps-link-preview-card-favicon' })) : (_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.Globe, size: PsLinkPreviewConfig.faviconSize })), _jsx(View, { style: { flex: 1 }, children: _jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'caption', weight: 'medium', children: meta.siteLabel }) }), _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ExternalLink, size: PsLinkPreviewConfig.faviconSize })] }), meta.hasTitle ? (_jsx(PsText, { numberOfLines: PsLinkPreviewConfig.titleLines, weight: 'bold', children: title })) : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'caption', children: href })), meta.hasDescription ? (_jsx(PsText, { numberOfLines: PsLinkPreviewConfig.descriptionLines, tone: 'muted', variant: 'small', children: description })) : null] })] }));
+};

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

@@ -12,9 +12,7 @@ export const PsListPersonRow = ({ badge, initials, subtitle, title }) => {
             backgroundColor: theme.surface,
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: subtitle === undefined
-                ? PsLayoutConfig.rowMinHeight
-                : PsLayoutConfig.rowMinHeightWithSubtitle,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }, testID: 'ps-list-person-row', children: [_jsx(PsAvatar, { initials: initials, size: 'small' }), _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 }))] }), badge === undefined ? null : (_jsx(PsBadge, { size: 'small', tone: badge.tone, children: badge.label }))] }));

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

@@ -21,9 +21,7 @@ export const PsListRowBody = ({ badge, hasChevron = false, hasMenu, isSelectable
             backgroundColor: PsListRowStyleService.background(isSelectable && isSelected, pressed, theme),
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: hasSecondLine
-                ? PsLayoutConfig.rowMinHeightWithSubtitle
-                : PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }), testID: 'ps-list-row', children: [isSelectable ? _jsx(PsListRowSelectMark, { isSelected: isSelected }) : null, leadingIcon === undefined ? null : (_jsx(View, { style: {

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

@@ -16,9 +16,7 @@ export const PsListRowSkeleton = ({ badge, isSection = false, leadingIcon, skele
             alignItems: 'center',
             flexDirection: 'row',
             gap: PsLayoutConfig.headerSlotGap,
-            minHeight: hasSubtitle
-                ? PsLayoutConfig.rowMinHeightWithSubtitle
-                : PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.rowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
             paddingVertical: PsLayoutConfig.rowPaddingVertical,
         }, testID: 'ps-skeleton-row', children: [hasIcon ? (_jsx(PsSkeleton, { height: PsLayoutConfig.rowIconBox, radius: PsLayoutConfig.rowIconBoxRadius, width: PsLayoutConfig.rowIconBox })) : null, _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap * 3 }, children: [_jsxs(View, { style: {

package/dist/components/ps-native-menu/ps-native-menu-row.js

@@ -16,7 +16,7 @@ export const PsNativeMenuRow = ({ item, onSelect }) => {
             backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
             gap: PsMobileControlConfig.rowSpacing,
-            minHeight: PsLayoutConfig.rowMinHeight,
+            minHeight: PsLayoutConfig.menuRowMinHeight,
             paddingHorizontal: PsLayoutConfig.gutter,
         }), children: [_jsx(PsText, { style: { flex: 1 }, weight: item.isSelected ? 'semibold' : 'regular', children: item.label }), item.isSelected ? _jsx(PsIcon, { color: theme.primary, iconKey: PsIconKey.Check }) : null] }));
 };

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

@@ -1,4 +1,5 @@
 export declare const PsChartConfig: {
+    readonly revealDefaultToken: "default";
     readonly areaOpacity: 0.18;
     readonly axisLabelGap: 8;
     readonly axisLabelMaxWidth: 48;

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

@@ -1,4 +1,5 @@
 export const PsChartConfig = {
+    revealDefaultToken: 'default',
     areaOpacity: 0.18,
     axisLabelGap: 8,
     axisLabelMaxWidth: 48,

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

@@ -18,8 +18,8 @@ export declare const PsLayoutConfig: {
     readonly rowIconSize: 16;
     readonly scrollEventThrottle: 16;
     readonly selectMarkSize: 22;
-    readonly rowMinHeight: 48;
-    readonly rowMinHeightWithSubtitle: 62;
+    readonly menuRowMinHeight: 48;
+    readonly rowMinHeight: 62;
     readonly rowLineGap: 2;
     readonly rowPaddingVertical: 12;
     readonly sheetFooterGap: 8;

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

@@ -18,8 +18,8 @@ export const PsLayoutConfig = {
     rowIconSize: 16,
     scrollEventThrottle: 16,
     selectMarkSize: 22,
-    rowMinHeight: 48,
-    rowMinHeightWithSubtitle: 62,
+    menuRowMinHeight: 48,
+    rowMinHeight: 62,
     rowLineGap: 2,
     rowPaddingVertical: 12,
     sheetFooterGap: 8,

package/dist/constants/ps-link-preview-config.d.ts

@@ -0,0 +1,19 @@
+export declare const PsLinkPreviewConfig: {
+    readonly compactBodyPadding: 12;
+    readonly compactImageMinHeight: 80;
+    readonly compactImageWidth: 96;
+    readonly descriptionLines: 2;
+    readonly domainPrefixPattern: RegExp;
+    readonly faviconRadius: 2;
+    readonly faviconSize: 16;
+    readonly fullBodyPadding: 16;
+    readonly imageAspectRatio: 1.91;
+    readonly metaGap: 8;
+    readonly portSuffixPattern: RegExp;
+    readonly skeletonLineGap: 8;
+    readonly skeletonMetaWidth: 96;
+    readonly skeletonTitleWidth: 192;
+    readonly textGap: 4;
+    readonly titleLines: 2;
+    readonly webAddressPattern: RegExp;
+};

package/dist/constants/ps-link-preview-config.js

@@ -0,0 +1,19 @@
+export const PsLinkPreviewConfig = {
+    compactBodyPadding: 12,
+    compactImageMinHeight: 80,
+    compactImageWidth: 96,
+    descriptionLines: 2,
+    domainPrefixPattern: /^www\./i,
+    faviconRadius: 2,
+    faviconSize: 16,
+    fullBodyPadding: 16,
+    imageAspectRatio: 1.91,
+    metaGap: 8,
+    portSuffixPattern: /:\d*$/,
+    skeletonLineGap: 8,
+    skeletonMetaWidth: 96,
+    skeletonTitleWidth: 192,
+    textGap: 4,
+    titleLines: 2,
+    webAddressPattern: /^https?:\/\/([^/?#\s]+)/i,
+};

package/dist/constants/ps-link-preview-size.d.ts

@@ -0,0 +1,5 @@
+export declare const PsLinkPreviewSize: {
+    readonly Compact: "compact";
+    readonly Full: "full";
+};
+export type PsLinkPreviewSize = (typeof PsLinkPreviewSize)[keyof typeof PsLinkPreviewSize];

package/dist/constants/ps-link-preview-size.js

@@ -0,0 +1,4 @@
+export const PsLinkPreviewSize = {
+    Compact: 'compact',
+    Full: 'full',
+};

package/dist/hooks/use-ps-chart-reveal.js

@@ -1,17 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsChartConfig } from '../constants/ps-chart-config';
+import { PsChartRevealService } from '../services/ps-chart-reveal-service';
 import { usePsMobileTheme } from './use-ps-mobile-theme';
 export const usePsChartReveal = (isReady, revealKey) => {
     const { isReduceMotion: isReduced } = usePsMobileTheme();
     const progress = useSharedValue(isReduced ? 1 : 0);
+    const played = useRef(null);
     useEffect(() => {
         if (isReduced) {
             progress.set(1);
             return;
         }
-        if (!isReady)
+        const token = PsChartRevealService.token(revealKey);
+        if (!PsChartRevealService.shouldPlay(isReady, played.current, token))
             return;
+        played.current = token;
         progress.set(0);
         progress.set(withTiming(1, { duration: PsChartConfig.drawMs }));
     }, [isReady, isReduced, progress, revealKey]);

package/dist/index.d.ts

@@ -133,6 +133,9 @@ export * from './components/ps-date-range-field';
 export * from './components/ps-statement-table';
 export * from './components/ps-action-sheet';
 export * from './components/ps-card';
+export * from './components/ps-link-preview-card';
+export * from './constants/ps-link-preview-size';
+export { PsLinkPreviewService } from './services/ps-link-preview-service';
 export * from './components/ps-checkbox';
 export * from './components/ps-chip';
 export * from './components/ps-icon-button';

package/dist/index.js

@@ -128,6 +128,9 @@ export * from './components/ps-date-range-field';
 export * from './components/ps-statement-table';
 export * from './components/ps-action-sheet';
 export * from './components/ps-card';
+export * from './components/ps-link-preview-card';
+export * from './constants/ps-link-preview-size';
+export { PsLinkPreviewService } from './services/ps-link-preview-service';
 export * from './components/ps-checkbox';
 export * from './components/ps-chip';
 export * from './components/ps-icon-button';

package/dist/interfaces/ps-link-preview-meta.d.ts

@@ -0,0 +1,5 @@
+export interface PsLinkPreviewMeta {
+    hasDescription: boolean;
+    hasTitle: boolean;
+    siteLabel: string;
+}

package/dist/interfaces/ps-link-preview-meta.js

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

package/dist/services/ps-chart-reveal-service.d.ts

@@ -0,0 +1,4 @@
+export declare class PsChartRevealService {
+    static token(revealKey: string | undefined): string;
+    static shouldPlay(isReady: boolean, played: string | null, token: string): boolean;
+}

package/dist/services/ps-chart-reveal-service.js

@@ -0,0 +1,9 @@
+import { PsChartConfig } from '../constants/ps-chart-config';
+export class PsChartRevealService {
+    static token(revealKey) {
+        return revealKey === undefined ? PsChartConfig.revealDefaultToken : `key:${revealKey}`;
+    }
+    static shouldPlay(isReady, played, token) {
+        return isReady && played !== token;
+    }
+}

package/dist/services/ps-link-preview-service.d.ts

@@ -0,0 +1,12 @@
+import { PsLinkPreviewSize } from '../constants/ps-link-preview-size';
+import type { PsDocumentSource } from '../interfaces/ps-document-source';
+import type { PsLinkPreviewMeta } from '../interfaces/ps-link-preview-meta';
+export declare class PsLinkPreviewService {
+    static isWebAddress(href: string): boolean;
+    static domain(href: string): string;
+    static hasText(value: string | null | undefined): boolean;
+    static hasSource(source: PsDocumentSource | null | undefined, failedUri: string | null): boolean;
+    static isCompact(size: PsLinkPreviewSize): boolean;
+    static meta(href: string, title: string | null | undefined, siteName: string | null | undefined, description: string | null | undefined, size: PsLinkPreviewSize): PsLinkPreviewMeta;
+    static imageHeight(width: number): number;
+}

package/dist/services/ps-link-preview-service.js

@@ -0,0 +1,38 @@
+import { PsLinkPreviewConfig } from '../constants/ps-link-preview-config';
+import { PsLinkPreviewSize } from '../constants/ps-link-preview-size';
+export class PsLinkPreviewService {
+    static isWebAddress(href) {
+        return PsLinkPreviewConfig.webAddressPattern.test(href);
+    }
+    static domain(href) {
+        const match = PsLinkPreviewConfig.webAddressPattern.exec(href);
+        if (match === null)
+            return href;
+        const authority = match[1];
+        const host = authority
+            .slice(authority.lastIndexOf('@') + 1)
+            .replace(PsLinkPreviewConfig.portSuffixPattern, '');
+        return host.replace(PsLinkPreviewConfig.domainPrefixPattern, '');
+    }
+    static hasText(value) {
+        return value !== null && value !== undefined && value.trim() !== '';
+    }
+    static hasSource(source, failedUri) {
+        return source !== null && source !== undefined && source.uri !== '' && source.uri !== failedUri;
+    }
+    static isCompact(size) {
+        return size === PsLinkPreviewSize.Compact;
+    }
+    static meta(href, title, siteName, description, size) {
+        return {
+            hasDescription: PsLinkPreviewService.hasText(description) && !PsLinkPreviewService.isCompact(size),
+            hasTitle: PsLinkPreviewService.hasText(title),
+            siteLabel: siteName !== null && siteName !== undefined && PsLinkPreviewService.hasText(siteName)
+                ? siteName
+                : PsLinkPreviewService.domain(href),
+        };
+    }
+    static imageHeight(width) {
+        return Math.round(width / PsLinkPreviewConfig.imageAspectRatio);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.14.0",
+	"version": "1.15.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",