@sincpro/mobile 0.1.1 → 0.3.1

package/dist/ui/components/organisms/InjectableWebView.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { loggerUseCases } from "../../../infrastructure/logger";
 import { webViewService } from "../../../services/webview.service";
+import { useToast } from "@sincpro/mobile-ui/Feedback";
 import Spinner from "@sincpro/mobile-ui/Feedback/Feedback.Spinner";
+import { useBottomInset } from "@sincpro/mobile-ui/layouts/BottomInset";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { BackHandler, StyleSheet, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import Toast from "react-native-toast-message";
 import WebView from "react-native-webview";
 function WebViewControls({ canGoBack: _canGoBack, canGoForward: _canGoForward, onGoBack: _onGoBack, onGoForward: _onGoForward, onReload: _onReload, }) {
     return _jsx(View, {});
@@ -14,6 +15,7 @@ function WebViewLoadingIndicator({ backgroundColor }) {
     return (_jsx(View, { style: [StyleSheet.absoluteFillObject, styles.loading, { backgroundColor }], children: _jsx(Spinner, { size: "large", text: "Cargando p\u00E1gina..." }) }));
 }
 function useWebView() {
+    const toast = useToast();
     const webViewRef = useRef(null);
     const [canGoBack, setCanGoBack] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
@@ -37,11 +39,11 @@ function useWebView() {
     const hardRefresh = useCallback(() => {
         if (webViewRef.current) {
             loggerUseCases.info("Hard refresh: Clearing cache and reloading");
-            Toast.show({
-                type: "info",
-                text1: "Limpiando caché...",
-                text2: "Descargando cliente fresco",
-                visibilityTime: 2000,
+            toast.show({
+                variant: "info",
+                title: "Limpiando caché...",
+                message: "Descargando cliente fresco",
+                duration: 2000,
             });
             if (webViewRef.current.clearCache) {
                 webViewRef.current.clearCache(true);
@@ -52,7 +54,7 @@ function useWebView() {
                 }
             }, 300);
         }
-    }, []);
+    }, [toast]);
     useEffect(() => {
         const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
             if (canGoBack) {
@@ -88,7 +90,9 @@ function useWebView() {
 }
 function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavigationChange, onLoadStart, onLoadEnd, onError, renderLoading, backgroundColor = "#f8f8f8", reloadKey, hardRefreshKey, maxRetries = 2, useDefaultCache = true, }) {
     const { webViewRef, handleNavigationStateChange, retryCount, setRetryCount, reload, hardRefresh, errorTimeoutRef, loadingTimeoutRef, isLoadingRef, } = useWebView();
+    const bottomInset = useBottomInset();
     const finalScript = webViewService.combineScripts(scripts, injectedJavaScript);
+    const [isLoading, setIsLoading] = useState(true);
     function handleMessage(event) {
         onMessage?.(event);
     }
@@ -98,6 +102,7 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
     }
     function handleLoadStart() {
         isLoadingRef.current = true;
+        setIsLoading(true);
         if (loadingTimeoutRef.current) {
             clearTimeout(loadingTimeoutRef.current);
         }
@@ -111,6 +116,7 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
     }
     function handleLoadEnd() {
         isLoadingRef.current = false;
+        setIsLoading(false);
         if (loadingTimeoutRef.current) {
             clearTimeout(loadingTimeoutRef.current);
             loadingTimeoutRef.current = null;
@@ -156,8 +162,12 @@ function InjectableWebView({ url, scripts, injectedJavaScript, onMessage, onNavi
         }
     }, [hardRefreshKey, hardRefresh]);
     const cacheMode = useDefaultCache ? "LOAD_DEFAULT" : "LOAD_NO_CACHE";
-    return (_jsx(SafeAreaView, { className: "flex-1", edges: ["top", "bottom"], style: { backgroundColor }, children: _jsx(WebView, { allowsBackForwardNavigationGestures: true, cacheEnabled: true, cacheMode: cacheMode, domStorageEnabled: true, injectedJavaScript: finalScript, javaScriptEnabled: true, mixedContentMode: "compatibility", onError: handleError, onLoadEnd: handleLoadEnd, onLoadStart: handleLoadStart, onMessage: handleMessage, onNavigationStateChange: handleNavigationStateChangeInternal, ref: webViewRef, renderLoading: renderLoading ||
-                (() => _jsx(WebViewLoadingIndicator, { backgroundColor: backgroundColor })), scalesPageToFit: true, sharedCookiesEnabled: true, source: { uri: url }, startInLoadingState: true, style: { flex: 1, backgroundColor } }) }));
+    return (
+    // Outer full-bleed container: under edge-to-edge (SDK 54+ / targetSdk 36) the window
+    // draws behind the transparent system bars. The loading overlay lives here (NOT inside
+    // the inset SafeAreaView) so it covers the whole screen and also shows on reload/refresh.
+    _jsxs(View, { style: { flex: 1, backgroundColor }, children: [_jsx(SafeAreaView, { className: "flex-1", edges: ["bottom"], style: { backgroundColor, marginBottom: bottomInset }, children: _jsx(WebView, { allowsBackForwardNavigationGestures: true, cacheEnabled: true, cacheMode: cacheMode, domStorageEnabled: true, injectedJavaScript: finalScript, javaScriptEnabled: true, mixedContentMode: "compatibility", onError: handleError, onLoadEnd: handleLoadEnd, onLoadStart: handleLoadStart, onMessage: handleMessage, onNavigationStateChange: handleNavigationStateChangeInternal, ref: webViewRef, scalesPageToFit: true, sharedCookiesEnabled: true, source: { uri: url }, style: { flex: 1, backgroundColor } }) }), isLoading &&
+                (renderLoading ? (renderLoading()) : (_jsx(WebViewLoadingIndicator, { backgroundColor: backgroundColor })))] }));
 }
 const styles = StyleSheet.create({
     loading: {

package/dist/ui/components/organisms/TableInfoInfoRow.js

@@ -14,6 +14,6 @@ function TableInfoRow({ item, onPress }) {
         messageId += `[${parsedData.uuid})]`;
     }
     const jsonString = safeJsonStringify(parsedData);
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-white p-4 rounded-xl my-2 shadow-sm", onPress: onPress, children: _jsxs(View, { children: [_jsx(Typography.Text, { className: "mb-2", variant: "caption", children: parsedData.name || "Sin Nombre" }), _jsx(Typography.Text, { numberOfLines: 1, semibold: true, variant: "body", children: messageId || "Sin Identificador" }), parsedData.status && (_jsxs(Typography.Text, { variant: "label", children: ["Estado: ", parsedData.status] })), _jsx(Typography.Text, { className: "text-gray-500", ellipsizeMode: "tail", numberOfLines: 2, variant: "bodySmall", children: jsonString })] }) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-bg-card p-4 rounded-xl my-2 shadow-sm", onPress: onPress, children: _jsxs(View, { children: [_jsx(Typography.Text, { className: "mb-2", variant: "caption", children: parsedData.name || "Sin Nombre" }), _jsx(Typography.Text, { numberOfLines: 1, semibold: true, variant: "body", children: messageId || "Sin Identificador" }), parsedData.status && (_jsxs(Typography.Text, { variant: "label", children: ["Estado: ", parsedData.status] })), _jsx(Typography.Text, { className: "text-text-secondary", ellipsizeMode: "tail", numberOfLines: 2, variant: "bodySmall", children: jsonString })] }) }));
 }
 export default TableInfoRow;

package/dist/ui/screens/database/database.json_detail.js

@@ -1,19 +1,19 @@
 import { jsxs as _jsxs, jsx as _jsx } from "nativewind/jsx-runtime";
 import { Display } from "@sincpro/mobile-ui/Display";
 import { Form } from "@sincpro/mobile-ui/Form";
-import { theme } from "@sincpro/mobile-ui/theme";
+import { useTheme } from "@sincpro/mobile-ui/theme";
 import { Typography } from "@sincpro/mobile-ui/Typography";
 import { FormViewV2 } from "@sincpro/mobile-ui/views/FormViewV2";
 import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import * as Clipboard from "expo-clipboard";
 import { View } from "react-native";
 import { useDatabase } from "./database.context";
 const Button = Form.Button;
 const Icon = Display.Icon;
 function JsonDetailView() {
+    const theme = useTheme();
     const { selectedTable, selectedRowJson, goBackFromJson, currentRowIndex, filteredData, hasNextRow, hasPreviousRow, goToNextRow, goToPreviousRow, } = useDatabase();
-    return (_jsxs(FormViewV2.Root, { description: `JSON VIEWER - ${selectedTable}`, isLoading: false, item: { json: selectedRowJson }, name: "Detalles", onBack: goBackFromJson, children: [_jsx(FormViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER, children: _jsx(FormViewV2.Header.Actions, { children: _jsxs(Typography.Text, { className: "text-gray-500", variant: "bodySmall", children: [currentRowIndex + 1, " de ", filteredData.length] }) }) }), _jsx(FormViewV2.Content, { children: _jsx(JsonPreview, { selectedJson: selectedRowJson }) }), _jsx(FormViewV2.Footer, { children: _jsxs(View, { className: "flex-row items-center justify-between gap-3", children: [_jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasPreviousRow, icon: _jsx(Icon, { color: hasPreviousRow ? theme.secondary : theme.text.tertiary, name: "chevron-left", size: 24, type: "feather" }), onPress: goToPreviousRow, title: "", variant: "secondary" }), _jsx(Button, { className: "flex-1", onPress: async () => {
+    return (_jsxs(FormViewV2.Root, { description: `JSON VIEWER - ${selectedTable}`, isLoading: false, item: { json: selectedRowJson }, name: "Detalles", onBack: goBackFromJson, children: [_jsx(FormViewV2.Header, { variant: "default", children: _jsx(FormViewV2.Header.Actions, { children: _jsxs(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: [currentRowIndex + 1, " de ", filteredData.length] }) }) }), _jsx(FormViewV2.Content, { children: _jsx(JsonPreview, { selectedJson: selectedRowJson }) }), _jsx(FormViewV2.Footer, { children: _jsxs(View, { className: "flex-row items-center justify-between gap-3", children: [_jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasPreviousRow, icon: _jsx(Icon, { color: hasPreviousRow ? theme.secondary : theme.text.tertiary, name: "chevron-left", size: 24, type: "feather" }), onPress: goToPreviousRow, title: "", variant: "secondary" }), _jsx(Button, { className: "flex-1", onPress: async () => {
                                 await Clipboard.setStringAsync(selectedRowJson);
                             }, title: "Copiar JSON", variant: "primary" }), _jsx(Button, { className: "flex-none min-w-[50px]", disabled: !hasNextRow, icon: _jsx(Icon, { color: hasNextRow ? theme.secondary : theme.text.tertiary, name: "chevron-right", size: 24, type: "feather" }), onPress: goToNextRow, title: "", variant: "secondary" })] }) })] }));
 }

package/dist/ui/screens/database/database.list.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useNavigation } from "@react-navigation/native";
 import DatabaseInfoRow from "../../../ui/components/organisms/DatabaseInfoRow";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import { useEffect } from "react";
-import { useNavigate } from "react-router-native";
 import { DatabaseProvider, EDatabaseView, useDatabase } from "./database.context";
 import JsonDetailView from "./database.json_detail";
 import TableRowsView from "./database.table_rows";
 function TablesView() {
-    const navigate = useNavigate();
+    const navigation = useNavigation();
     const { loadTables, isLoading, tables, selectTable } = useDatabase();
     useEffect(() => {
         void loadTables();
     }, [loadTables]);
-    const onBack = () => navigate(-1);
+    const onBack = () => navigation.goBack();
     return (_jsxs(ListViewV2.Root, { isLoading: isLoading, items: tables, name: "Lista de tablas", onBack: onBack, onPressItem: async (table) => {
             await selectTable(table.name);
-        }, children: [_jsx(ListViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER }), _jsx(ListViewV2.Content, { children: (table) => (_jsx(DatabaseInfoRow, { item: {
+        }, children: [_jsx(ListViewV2.Header, { variant: "default" }), _jsx(ListViewV2.Content, { children: (table) => (_jsx(DatabaseInfoRow, { item: {
                         name: table.displayName || table.name,
                         description: "Tabla de base de datos",
                         tableName: table.name,

package/dist/ui/screens/database/database.table_rows.js

@@ -2,10 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { safeJsonStringify } from "../../../tools/utils/serializer";
 import TableInfoRow from "../../../ui/components/organisms/TableInfoInfoRow";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import { useDatabase } from "./database.context";
 function TableRowsView() {
     const { isLoading, filteredData, selectedTable, goBackFromRows, selectRowJson, setSearchQuery, } = useDatabase();
-    return (_jsxs(ListViewV2.Root, { isLoading: isLoading, items: filteredData, name: `Datos - ${selectedTable}`, onBack: goBackFromRows, onPressItem: (item) => selectRowJson(safeJsonStringify(item), item.index), onSearch: setSearchQuery, children: [_jsx(ListViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER, children: _jsx(ListViewV2.Header.Search, {}) }), _jsx(ListViewV2.Content, { children: (item) => (_jsx(TableInfoRow, { item: { data: safeJsonStringify(item) }, onPress: () => selectRowJson(safeJsonStringify(item), item.index) })) })] }));
+    return (_jsxs(ListViewV2.Root, { isLoading: isLoading, items: filteredData, name: `Datos - ${selectedTable}`, onBack: goBackFromRows, onPressItem: (item) => selectRowJson(safeJsonStringify(item), item.index), onSearch: setSearchQuery, children: [_jsx(ListViewV2.Header, { variant: "default", children: _jsx(ListViewV2.Header.Search, {}) }), _jsx(ListViewV2.Content, { children: (item) => (_jsx(TableInfoRow, { item: { data: safeJsonStringify(item) }, onPress: () => selectRowJson(safeJsonStringify(item), item.index) })) })] }));
 }
 export default TableRowsView;

package/dist/ui/screens/dead_letter_queue/dead_letter_queue.list.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useNavigation } from "@react-navigation/native";
 import DeadLetterQueueRow from "../../../ui/components/organisms/DeadLetterQueueRow";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import { useEffect } from "react";
-import { useNavigate } from "react-router-native";
 import { DeadLetterQueueProvider, useDeadLetterQueue } from "./dead_letter_queue.context";
 function DeadLetterQueueScreenComponent() {
-    const navigate = useNavigate();
+    const navigation = useNavigation();
     const { enrichedEvents, isLoading, loadEvents, retryEvent } = useDeadLetterQueue();
     useEffect(() => {
         loadEvents();
     }, [loadEvents]);
-    const onBack = () => navigate(-1);
-    return (_jsxs(ListViewV2.Root, { description: "Eventos que no pudieron ser procesados", isLoading: isLoading, items: enrichedEvents, name: "Eventos fallidos", onBack: onBack, onRefresh: loadEvents, children: [_jsx(ListViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER }), _jsx(ListViewV2.Content, { children: (event) => (_jsx(DeadLetterQueueRow, { item: event, onRetry: async (evt) => {
+    const onBack = () => navigation.goBack();
+    return (_jsxs(ListViewV2.Root, { description: "Eventos que no pudieron ser procesados", isLoading: isLoading, items: enrichedEvents, name: "Eventos fallidos", onBack: onBack, onRefresh: loadEvents, children: [_jsx(ListViewV2.Header, { variant: "default" }), _jsx(ListViewV2.Content, { children: (event) => (_jsx(DeadLetterQueueRow, { item: event, onRetry: async (evt) => {
                         await retryEvent(evt);
                         setTimeout(() => {
                             void loadEvents();

package/dist/ui/screens/events/events.list.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useNavigation } from "@react-navigation/native";
 import EventRow from "../../../ui/components/organisms/EventRow";
 import { ListViewV2 } from "@sincpro/mobile-ui/views/ListViewV2";
-import { EVariantScreenHeader } from "@sincpro/mobile-ui/widgets/ScreenHeader";
 import { useEffect } from "react";
-import { useNavigate } from "react-router-native";
 import { EventsProvider, useEvents } from "./events.context";
 const FILTER_OPTIONS = [
     { label: "Todos", value: "ALL" },
@@ -12,13 +11,13 @@ const FILTER_OPTIONS = [
     { label: "Pendientes", value: "PENDING" },
 ];
 function EventsScreenComponent() {
-    const navigate = useNavigate();
+    const navigation = useNavigation();
     const { pagedEvents, isLoading, loadEvents, retryEvent, filter, setFilter } = useEvents();
     useEffect(() => {
         void loadEvents();
     }, [loadEvents]);
-    const onBack = () => navigate(-1);
-    return (_jsxs(ListViewV2.Root, { description: "Eventos registrados", isLoading: isLoading, items: pagedEvents, name: "Eventos", onBack: onBack, onRefresh: loadEvents, children: [_jsx(ListViewV2.Header, { variant: EVariantScreenHeader.FLAT_HEADER, children: _jsx(ListViewV2.Header.Filters, { children: _jsx(ListViewV2.Header.Filters.Chips, { children: FILTER_OPTIONS.map((option) => (_jsx(ListViewV2.Header.Filters.Chip, { active: filter === option.value, label: option.label, onPress: () => setFilter(option.value) }, option.value))) }) }) }), _jsx(ListViewV2.Content, { children: (event) => (_jsx(EventRow, { item: event, onRetry: async (evt) => {
+    const onBack = () => navigation.goBack();
+    return (_jsxs(ListViewV2.Root, { description: "Eventos registrados", isLoading: isLoading, items: pagedEvents, name: "Eventos", onBack: onBack, onRefresh: loadEvents, children: [_jsx(ListViewV2.Header, { variant: "default", children: _jsx(ListViewV2.Header.Filters, { children: _jsx(ListViewV2.Header.Filters.Chips, { children: FILTER_OPTIONS.map((option) => (_jsx(ListViewV2.Header.Filters.Chip, { active: filter === option.value, label: option.label, onPress: () => setFilter(option.value) }, option.value))) }) }) }), _jsx(ListViewV2.Content, { children: (event) => (_jsx(EventRow, { item: event, onRetry: async (evt) => {
                         await retryEvent(evt);
                     } })) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "description": "Sincpro Mobile framework core: offline-first infra (DB, queue/events, cron), DDD patterns, adapters, AppShell and module-driven composition for React Native",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -58,8 +58,10 @@
     "react-native-toast-message": "*",
     "react-native-view-shot": "*",
     "react-native-webview": "*",
-    "react-router-native": ">=6",
-    "@sincpro/mobile-ui": "^0.2.1"
+    "@react-navigation/native": ">=7",
+    "@react-navigation/native-stack": ">=7",
+    "react-native-screens": "*",
+    "@sincpro/mobile-ui": "^0.7.1"
   },
   "devDependencies": {
     "@types/big.js": "^6.2.2",
@@ -96,10 +98,12 @@
     "react-native-toast-message": "^2.3.3",
     "react-native-view-shot": "^4.0.3",
     "react-native-webview": "13.15.0",
-    "react-router-native": "^6.30.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
+    "react-native-screens": "~4.25.2",
     "tsc-alias": "^1.8.17",
     "typescript": "~5.9.2",
-    "@sincpro/mobile-ui": "^0.2.1"
+    "@sincpro/mobile-ui": "^0.7.1"
   },
   "exports": {
     ".": "./dist/index.js",

package/dist/ui/layouts/router_layouts.d.ts

@@ -1,17 +0,0 @@
-import UITabNavigatorLayout from "@sincpro/mobile-ui/layouts/TabNavigatorLayout";
-import type { ComponentProps, ReactElement } from "react";
-type UITabProps = ComponentProps<typeof UITabNavigatorLayout>;
-/**
- * Layouts conectados a react-router. El design system (@sincpro/mobile-ui) trae
- * las versiones presentacionales (sin router); aquí el core —que sí posee el
- * router— les inyecta location/navigate/Outlet para usarse como layout routes.
- */
-declare function TabNavigatorLayout(props: Omit<UITabProps, "content" | "currentPath" | "onTabPress">): ReactElement;
-declare namespace TabNavigatorLayout {
-    var Tabs: ({ children: tabsChildren }: {
-        children?: import("react").ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    var Tab: (_props: import("@sincpro/mobile-ui/layouts/TabNavigatorLayout").TabProps) => null;
-}
-declare function PlainLayout(): ReactElement;
-export { PlainLayout, TabNavigatorLayout };

package/dist/ui/layouts/router_layouts.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import UIPlainLayout from "@sincpro/mobile-ui/layouts/PlainLayout";
-import UITabNavigatorLayout from "@sincpro/mobile-ui/layouts/TabNavigatorLayout";
-import { Outlet, useLocation, useNavigate } from "react-router-native";
-/**
- * Layouts conectados a react-router. El design system (@sincpro/mobile-ui) trae
- * las versiones presentacionales (sin router); aquí el core —que sí posee el
- * router— les inyecta location/navigate/Outlet para usarse como layout routes.
- */
-function TabNavigatorLayout(props) {
-    const location = useLocation();
-    const navigate = useNavigate();
-    return (_jsx(UITabNavigatorLayout, { ...props, content: _jsx(Outlet, {}), currentPath: location.pathname, onTabPress: (path) => navigate(path) }));
-}
-TabNavigatorLayout.Tabs = UITabNavigatorLayout.Tabs;
-TabNavigatorLayout.Tab = UITabNavigatorLayout.Tab;
-function PlainLayout() {
-    return (_jsx(UIPlainLayout, { children: _jsx(Outlet, {}) }));
-}
-export { PlainLayout, TabNavigatorLayout };