@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/widgets/ReorderableList.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { moveCollectionEntry } from "../utils/criteria.js";
+import { applyReorder, moveReorderItem, reorderKeys, sameOrder, } from "../utils/reorder.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, useWindowDimensions, View, } from "react-native";
+import Sortable from "react-native-sortables";
+export default function ReorderableList({ items, keyExtractor, getItemLabel, onChange, renderItem, renderControls, renderHandleContent, disabled = false, className, style, itemStyle, contentStyle, controlsStyle, handleStyle, actionStyle, testID, labels, onDragStart, onDragEnd, onReorderRejected, sortableProps, }) {
+    const { fontScale } = useWindowDimensions();
+    const keys = useMemo(() => reorderKeys(items, keyExtractor), [items, keyExtractor]);
+    const data = useMemo(() => [...items], [items]);
+    const dragOrder = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [error, setError] = useState();
+    const [revision, setRevision] = useState(0);
+    const busy = disabled || dragging;
+    const commit = (order, event) => {
+        if (sameOrder(keys, order))
+            return;
+        const next = applyReorder(items, keyExtractor, order);
+        onChange(next, event);
+        AccessibilityInfo.announceForAccessibility(labels?.moved?.(getItemLabel(next[event.toIndex]), event.toIndex + 1, items.length) ??
+            `${getItemLabel(next[event.toIndex])}, posición ${event.toIndex + 1} de ${items.length}`);
+    };
+    const reject = useCallback((reason) => {
+        const message = reason === "disabled"
+            ? (labels?.disabledDuringDrag ??
+                "El orden se bloqueó durante el arrastre. No se aplicó el cambio.")
+            : (labels?.changedDuringDrag ??
+                "La lista cambió durante el arrastre. Revisa el orden e inténtalo de nuevo.");
+        setError(message);
+        setRevision((value) => value + 1);
+        AccessibilityInfo.announceForAccessibility(message);
+        onReorderRejected?.(reason);
+    }, [labels?.changedDuringDrag, labels?.disabledDuringDrag, onReorderRejected]);
+    useEffect(() => {
+        if (dragOrder.current && (disabled || !sameOrder(dragOrder.current, keys))) {
+            dragOrder.current = null;
+            setDragging(false);
+            reject(disabled ? "disabled" : "data-changed");
+            onDragEnd?.();
+        }
+    }, [disabled, keys, onDragEnd, reject]);
+    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(Sortable.Grid, { activeItemScale: 1, activeItemShadowOpacity: 0, rowGap: 8, ...sortableProps, columns: 1, customHandle: true, data: data, keyExtractor: keyExtractor, onDragEnd: ({ fromIndex, toIndex }) => {
+                    const started = dragOrder.current;
+                    if (!started)
+                        return;
+                    dragOrder.current = null;
+                    setDragging(false);
+                    if (started && !sameOrder(started, keys))
+                        reject("data-changed");
+                    else if (disabled)
+                        reject("disabled");
+                    else if (started)
+                        commit(moveReorderItem(keys, fromIndex, toIndex), {
+                            key: keys[fromIndex],
+                            fromIndex,
+                            toIndex,
+                            source: "drag",
+                        });
+                    onDragEnd?.();
+                }, onDragStart: ({ fromIndex }) => {
+                    dragOrder.current = keys;
+                    setDragging(true);
+                    setError(undefined);
+                    onDragStart?.(keys[fromIndex]);
+                }, renderItem: ({ item, index }) => {
+                    const key = keys[index];
+                    const label = getItemLabel(item);
+                    const move = (direction) => {
+                        if (busy || index + direction < 0 || index + direction >= items.length)
+                            return;
+                        setError(undefined);
+                        commit(moveCollectionEntry(keys, index, direction), {
+                            key,
+                            fromIndex: index,
+                            toIndex: index + direction,
+                            source: "button",
+                        });
+                    };
+                    const context = {
+                        item,
+                        index,
+                        canMoveUp: !busy && index > 0,
+                        canMoveDown: !busy && index < items.length - 1,
+                        moveUp: () => move(-1),
+                        moveDown: () => move(1),
+                    };
+                    const dragHandle = (_jsx(Sortable.Handle, { mode: disabled ? "non-draggable" : "draggable", children: _jsx(View, { accessibilityActions: [
+                                ...(context.canMoveUp ? [{ name: "decrement" }] : []),
+                                ...(context.canMoveDown ? [{ name: "increment" }] : []),
+                            ], accessibilityLabel: labels?.drag?.(label) ?? `Arrastrar ${label}`, accessibilityRole: "adjustable", accessibilityState: { disabled, busy: dragging }, accessibilityValue: { min: 1, max: items.length, now: index + 1 }, accessible: true, onAccessibilityAction: ({ nativeEvent }) => {
+                                if (nativeEvent.actionName === "increment")
+                                    move(1);
+                                if (nativeEvent.actionName === "decrement")
+                                    move(-1);
+                            }, style: [
+                                {
+                                    minHeight: 48,
+                                    minWidth: 48,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                },
+                                handleStyle,
+                            ], testID: testID ? `${testID}-handle-${key}` : undefined, children: renderHandleContent ? (renderHandleContent(context)) : (_jsx(Icon, { name: "reorder-two-outline", size: 20 })) }) }));
+                    return (_jsxs(View, { style: [
+                            {
+                                width: "100%",
+                                flexDirection: fontScale > 1.3 ? "column" : "row",
+                                alignItems: "center",
+                                gap: 8,
+                            },
+                            itemStyle,
+                        ], testID: testID ? `${testID}-item-${key}` : undefined, children: [_jsx(View, { style: [
+                                    fontScale > 1.3 ? { alignSelf: "stretch" } : { flex: 1, minWidth: 0 },
+                                    contentStyle,
+                                ], children: renderItem(context) }), _jsx(View, { style: [{ flexDirection: "row", alignItems: "center" }, controlsStyle], children: renderControls ? (renderControls({ ...context, dragHandle })) : (_jsxs(_Fragment, { children: [dragHandle, _jsx(Pressable, { accessibilityLabel: labels?.up?.(label) ?? `Subir ${label}`, disabled: !context.canMoveUp, onPress: context.moveUp, style: [
+                                                {
+                                                    minWidth: 48,
+                                                    minHeight: 48,
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                },
+                                                actionStyle,
+                                            ], children: _jsx(Icon, { name: "arrow-up-outline", size: 18 }) }), _jsx(Pressable, { accessibilityLabel: labels?.down?.(label) ?? `Bajar ${label}`, disabled: !context.canMoveDown, onPress: context.moveDown, style: [
+                                                {
+                                                    minWidth: 48,
+                                                    minHeight: 48,
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                },
+                                                actionStyle,
+                                            ], children: _jsx(Icon, { name: "arrow-down-outline", size: 18 }) })] })) })] }, key));
+                }, sortEnabled: !disabled, strategy: "insert" }, revision), error ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: error })) : null] }));
+}

package/dist/widgets/index.d.ts

@@ -1,4 +1,8 @@
+export type { CollectionField, CollectionQuery, CollectionSort, CriteriaCondition, CriteriaField, CriteriaGroup, CriteriaNode, CriteriaOperator, CriteriaValue, SavedCollectionQuery, } from "../utils/criteria.js";
 export { CircleButton } from "./CircleButton.js";
+export { default as CollectionOptions, type CollectionOptionsProps, } from "./CollectionOptions.js";
+export { FilterBar, type FilterBarOption, type FilterBarProps, } from "./FilterBar.js";
+export { default as FilterBuilder, type FilterBuilderProps, } from "./FilterBuilder.js";
 export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
 export { HomeHeader } from "./HomeHeader.js";
 export { MenuCard } from "./MenuCard.js";

package/dist/widgets/index.js

@@ -1,4 +1,7 @@
 export { CircleButton } from "./CircleButton.js";
+export { default as CollectionOptions, } from "./CollectionOptions.js";
+export { FilterBar, } from "./FilterBar.js";
+export { default as FilterBuilder, } from "./FilterBuilder.js";
 export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
 export { HomeHeader } from "./HomeHeader.js";
 export { MenuCard } from "./MenuCard.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -19,6 +19,7 @@
     "./Dialog": "./dist/Dialog/index.js",
     "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
     "./Dialog/Sheet": "./dist/Dialog/Dialog.Sheet.js",
+    "./Dialog/NativeSheet": "./dist/Dialog/Dialog.NativeSheet.js",
     "./Actions": "./dist/Actions/index.js",
     "./Display": "./dist/Display/index.js",
     "./Feedback": "./dist/Feedback/index.js",
@@ -28,6 +29,7 @@
     "./primitives": "./dist/primitives/index.js",
     "./tokens": "./dist/tokens/index.js",
     "./widgets": "./dist/widgets/index.js",
+    "./widgets/ReorderableList": "./dist/widgets/ReorderableList.js",
     "./views/Wizard": "./dist/views/Wizard/index.js",
     "./tailwind.preset": "./tailwind.preset.js",
     "./theme/globals.css": "./dist/theme/globals.css",
@@ -67,15 +69,20 @@
     "react-hook-form": ">=7",
     "react-native": ">=0.88",
     "react-native-currency-input": ">=1.1",
+    "react-native-gesture-handler": ">=3.3",
     "react-native-keyboard-controller": ">=1.22",
     "react-native-reanimated": ">=4.7",
     "react-native-safe-area-context": ">=5.11",
+    "react-native-sortables": ">=1.10.1 <2",
     "react-native-svg": ">=15.16",
     "react-native-worklets": ">=0.13"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
       "optional": true
+    },
+    "react-native-sortables": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -86,6 +93,12 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
+    "@jest/globals": "^30.0.0",
+    "@testing-library/react-native": "14.1.0",
+    "@react-native/jest-preset": "^0.88.1",
+    "jest": "^30.0.0",
+    "jest-expo": "~58.0.14",
+    "test-renderer": "^1.0.0",
     "@expo-google-fonts/ibm-plex-mono": "^0.4.1",
     "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
     "@expo/ui": "~58.0.27",
@@ -125,6 +138,7 @@
     "react-native-keyboard-controller": "1.22.7",
     "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "~5.11.1",
+    "react-native-sortables": "^1.10.1",
     "react-native-svg": "15.16.0",
     "react-native-worklets": "0.13.0",
     "storybook": "10.6.6",