orn-ui 0.2.3 → 0.2.4

package/src/molecules/SymmetricGrid.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+
+export interface SymmetricGridProps<T> {
+  data: T[];
+  renderItem: (item: T, index: number) => React.ReactElement;
+  keyExtractor: (item: T, index: number) => string;
+  /** Columnas por fila. @default 2 */
+  columns?: number;
+  /** Separación entre celdas, en ambos ejes. @default theme.tokens.spacing.md */
+  gap?: number;
+  /**
+   * Última fila incompleta: centrada (simétrica) en vez de pegada a la
+   * izquierda con un hueco a la derecha. @default true
+   */
+  balanceLastRow?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const useStyles = createStyles((theme) => ({
+  grid: { gap: theme.tokens.spacing.md },
+  row: { flexDirection: 'row', gap: theme.tokens.spacing.md },
+  rowBalanced: { justifyContent: 'center' },
+  rowFull: { justifyContent: 'flex-start' },
+  cell: { flexGrow: 0, flexShrink: 0 },
+}));
+
+function chunk<T>(data: T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let i = 0; i < data.length; i += size) rows.push(data.slice(i, i + size));
+  return rows;
+}
+
+/**
+ * SymmetricGrid
+ * Ley de Prägnanz (buena forma): agrupa en filas parejas de N columnas.
+ * La última fila, cuando queda incompleta, se centra por defecto en vez de
+ * quedar pegada a un borde — eso es lo que la lee como "fila corta" y no
+ * como un layout roto con un hueco a un lado.
+ */
+export function SymmetricGrid<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  columns = 2,
+  gap,
+  balanceLastRow = true,
+  style,
+}: SymmetricGridProps<T>) {
+  const styles = useStyles();
+  const rows = useMemo(() => chunk(data, columns), [data, columns]);
+  const cellWidth = `${100 / columns}%` as const;
+
+  return (
+    <View style={[styles.grid, gap !== undefined && { gap }, style]}>
+      {rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === rows.length - 1;
+        const isIncomplete = row.length < columns;
+        const centered = isLastRow && isIncomplete && balanceLastRow;
+
+        return (
+          <View
+            // `columns` en la key: si cambia, las filas no reusan nodos DOM
+            // de una fila armada con otra cantidad de columnas.
+            key={`row-${columns}-${rowIndex}`}
+            style={[styles.row, centered ? styles.rowBalanced : styles.rowFull, gap !== undefined && { gap }]}
+          >
+            {row.map((item, colIndex) => {
+              const index = rowIndex * columns + colIndex;
+              return (
+                <View key={keyExtractor(item, index)} style={[styles.cell, { width: cellWidth }]}>
+                  {renderItem(item, index)}
+                </View>
+              );
+            })}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/molecules/index.ts

@@ -12,3 +12,5 @@ export { SegmentedControl } from './SegmentedControl';
 export type { SegmentedControlProps, SegmentedControlOption } from './SegmentedControl';
 export { Steps } from './Steps';
 export type { StepsProps, StepItem, StepStatus } from './Steps';
+export { SymmetricGrid } from './SymmetricGrid';
+export type { SymmetricGridProps } from './SymmetricGrid';

package/src/organisms/AlertProvider.tsx

@@ -63,14 +63,21 @@ const HIDDEN: InternalState = { visible: false, title: '', type: 'info', buttons
 export function AlertProvider({ children }: { children: React.ReactNode }) {
   const [state, setState] = useState<InternalState>(HIDDEN);
   const resolverRef = useRef<((value: any) => void) | null>(null);
-
-  const hide = useCallback(() => {
-    setState(HIDDEN);
+  // Si alert()/confirm() se llaman de nuevo mientras ya hay uno abierto, el
+  // pedido anterior se resuelve (no se descarta) antes de mostrar el nuevo:
+  // evita que su promise quede colgada para siempre.
+  const settlePending = useCallback(() => {
     resolverRef.current?.(undefined);
     resolverRef.current = null;
   }, []);
 
+  const hide = useCallback(() => {
+    setState(HIDDEN);
+    settlePending();
+  }, [settlePending]);
+
   const alertFn = useCallback((options: AlertOptions): Promise<void> => {
+    settlePending();
     return new Promise((resolve) => {
       resolverRef.current = resolve;
       setState({
@@ -90,9 +97,10 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
         ],
       });
     });
-  }, []);
+  }, [settlePending]);
 
   const confirmFn = useCallback((options: ConfirmOptions): Promise<boolean> => {
+    settlePending();
     return new Promise((resolve) => {
       resolverRef.current = resolve;
       setState({
@@ -124,7 +132,7 @@ export function AlertProvider({ children }: { children: React.ReactNode }) {
         ],
       });
     });
-  }, []);
+  }, [settlePending]);
 
   const value = useMemo<AlertContextValue>(() => ({ alert: alertFn, confirm: confirmFn, hide }), [alertFn, confirmFn, hide]);
 

package/src/organisms/BottomSheet.tsx

@@ -13,7 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useColors, useInsets } from '../theme/UIProvider';
+import { useColors, useModalSafeAreaBoundary } from '../theme/UIProvider';
 import { Title } from '../atoms/Text';
 import { IconButton } from '../atoms/IconButton';
 import { Transition } from '../atoms/Transition';
@@ -107,20 +107,28 @@ export const BottomSheet = memo(
   }: BottomSheetProps) => {
     const styles = useStyles();
     const colors = useColors();
-    const insets = useInsets();
+    const ModalSafeAreaBoundary = useModalSafeAreaBoundary();
     const [mounted, setMounted] = useState(visible);
     const [keyboardOpen, setKeyboardOpen] = useState(false);
     const progress = useRef(new Animated.Value(0)).current;
+    // El PanResponder de más abajo se crea una sola vez; leer `onClose`
+    // directo del closure daría siempre el de ese primer render. El ref
+    // refleja la última prop sin importar cuándo se creó la closure.
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
 
     useEffect(() => {
-      if (visible) {
-        setMounted(true);
-        Animated.timing(progress, { toValue: 1, duration: 250, useNativeDriver: true }).start();
-      } else {
-        Animated.timing(progress, { toValue: 0, duration: 200, useNativeDriver: true }).start(({ finished }) => {
-          if (finished) setMounted(false);
-        });
-      }
+      const animation = visible
+        ? Animated.timing(progress, { toValue: 1, duration: 250, useNativeDriver: true })
+        : Animated.timing(progress, { toValue: 0, duration: 200, useNativeDriver: true });
+      if (visible) setMounted(true);
+      animation.start(({ finished }) => {
+        if (!visible && finished) setMounted(false);
+      });
+      // Si el efecto vuelve a correr (o el componente se desmonta) antes de
+      // que termine, se corta: si no, un `finished` tardío podría llamar
+      // `setMounted` sobre un componente ya desmontado.
+      return () => animation.stop();
     }, [visible, progress]);
 
     useEffect(() => {
@@ -142,7 +150,7 @@ export const BottomSheet = memo(
         },
         onPanResponderRelease: (_, gesture) => {
           if (gesture.dy > DISMISS_THRESHOLD) {
-            onClose();
+            onCloseRef.current();
           } else {
             Animated.timing(progress, { toValue: 1, duration: 150, useNativeDriver: true }).start();
           }
@@ -203,42 +211,48 @@ export const BottomSheet = memo(
             />
           </Transition>
 
-          <Transition
-            value={progress}
-            preset="slide-up"
-            distance={SCREEN_HEIGHT}
-            testID={testID}
-            style={[
-              styles.sheet,
-              { maxHeight: resolvedMaxHeight, paddingBottom: Math.max(insets.bottom, 20) },
-              containerStyle,
-            ]}
-          >
-            {draggable && (
-              <View style={styles.handleArea} testID="bottom-sheet-handle" {...panResponder.panHandlers}>
-                <View style={styles.handle} />
-              </View>
-            )}
+          {/* Insets medidos dentro de esta ventana nativa (el Modal nativo que
+              usa BottomSheet por debajo), no los de la raíz de la app. */}
+          <ModalSafeAreaBoundary>
+            {(insets) => (
+              <Transition
+                value={progress}
+                preset="slide-up"
+                distance={SCREEN_HEIGHT}
+                testID={testID}
+                style={[
+                  styles.sheet,
+                  { maxHeight: resolvedMaxHeight, paddingBottom: Math.max(insets.bottom, 20) },
+                  containerStyle,
+                ]}
+              >
+                {draggable && (
+                  <View style={styles.handleArea} testID="bottom-sheet-handle" {...panResponder.panHandlers}>
+                    <View style={styles.handle} />
+                  </View>
+                )}
 
-            {hasHeader && (
-              <View style={[styles.header, !draggable && styles.headerSpaced]}>
-                <Title style={styles.title} numberOfLines={1}>
-                  {title}
-                </Title>
-                <IconButton
-                  iconName="close"
-                  size={24}
-                  color={colors.text}
-                  onPress={onClose}
-                  accessibilityLabel={closeAccessibilityLabel}
-                />
-              </View>
-            )}
+                {hasHeader && (
+                  <View style={[styles.header, !draggable && styles.headerSpaced]}>
+                    <Title style={styles.title} numberOfLines={1}>
+                      {title}
+                    </Title>
+                    <IconButton
+                      iconName="close"
+                      size={24}
+                      color={colors.text}
+                      onPress={onClose}
+                      accessibilityLabel={closeAccessibilityLabel}
+                    />
+                  </View>
+                )}
 
-            {body}
+                {body}
 
-            {pinnedFooter}
-          </Transition>
+                {pinnedFooter}
+              </Transition>
+            )}
+          </ModalSafeAreaBoundary>
         </KeyboardAvoidingView>
       </Modal>
     );

package/src/organisms/Modal.tsx

@@ -11,7 +11,8 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useColors, useInsets } from '../theme/UIProvider';
+import { useColors, useModalSafeAreaBoundary } from '../theme/UIProvider';
+import type { EdgeInsets } from '../theme/insets';
 import { Title } from '../atoms/Text';
 import { IconButton } from '../atoms/IconButton';
 import { Transition, type TransitionPreset } from '../atoms/Transition';
@@ -96,7 +97,7 @@ export const Modal = memo(
     const isOverlay = variant === 'overlay';
     const isFullScreen = variant === 'fullScreen';
     const isAnimatedVariant = isOverlay || isFull;
-    const insets = useInsets();
+    const ModalSafeAreaBoundary = useModalSafeAreaBoundary();
     const colors = useColors();
     const styles = useStyles();
 
@@ -176,59 +177,66 @@ export const Modal = memo(
         hardwareAccelerated={hardwareAccelerated}
       >
         <KeyboardAvoidingView behavior={behavior} keyboardVerticalOffset={keyboardOffset} style={styles.flex1}>
-          {isOverlay ? (
-            <View style={styles.overlayContainer}>
-              {/* Sin accessibilityLabel propio: el header ya expone un botón "Close"
-                  accesible; duplicar el label aquí generaría dos elementos con el
-                  mismo nombre para lectores de pantalla. Tocar afuera es un atajo
-                  puramente táctil. */}
-              <Transition
-                visible={visible}
-                preset="fade"
-                duration={200}
-                keepMounted
-                style={[{ ...StyleSheetAbsoluteFill }, styles.backdrop]}
-              >
-                <Pressable style={StyleSheetAbsoluteFill} onPress={onClose} testID="modal-backdrop" />
-              </Transition>
-
-              <Transition
-                visible={visible}
-                preset={cardPreset}
-                distance={cardDistance}
-                duration={250}
-                onExited={() => setMounted(false)}
-                style={[styles.overlayCard, containerStyle]}
-              >
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </Transition>
-            </View>
-          ) : isFull ? (
-            <Transition
-              visible={visible}
-              preset={cardPreset}
-              distance={cardDistance}
-              duration={250}
-              onExited={() => setMounted(false)}
-              style={[styles.fullWrapper, containerStyle]}
-            >
-              <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </View>
-            </Transition>
-          ) : (
-            <View style={[styles.fullWrapper, containerStyle]}>
-              <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-                {renderHeader()}
-                {renderMainContent()}
-                {renderFooter()}
-              </View>
-            </View>
-          )}
+          {/* Insets medidos dentro de esta ventana nativa del Modal, no los de
+              la raíz de la app — pueden diferir (Android siempre abre una
+              ventana propia; iOS según `presentationStyle`). */}
+          <ModalSafeAreaBoundary>
+            {(insets: EdgeInsets) =>
+              isOverlay ? (
+                <View style={styles.overlayContainer}>
+                  {/* Sin accessibilityLabel propio: el header ya expone un botón "Close"
+                      accesible; duplicar el label aquí generaría dos elementos con el
+                      mismo nombre para lectores de pantalla. Tocar afuera es un atajo
+                      puramente táctil. */}
+                  <Transition
+                    visible={visible}
+                    preset="fade"
+                    duration={200}
+                    keepMounted
+                    style={[{ ...StyleSheetAbsoluteFill }, styles.backdrop]}
+                  >
+                    <Pressable style={StyleSheetAbsoluteFill} onPress={onClose} testID="modal-backdrop" />
+                  </Transition>
+
+                  <Transition
+                    visible={visible}
+                    preset={cardPreset}
+                    distance={cardDistance}
+                    duration={250}
+                    onExited={() => setMounted(false)}
+                    style={[styles.overlayCard, containerStyle]}
+                  >
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </Transition>
+                </View>
+              ) : isFull ? (
+                <Transition
+                  visible={visible}
+                  preset={cardPreset}
+                  distance={cardDistance}
+                  duration={250}
+                  onExited={() => setMounted(false)}
+                  style={[styles.fullWrapper, containerStyle]}
+                >
+                  <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </View>
+                </Transition>
+              ) : (
+                <View style={[styles.fullWrapper, containerStyle]}>
+                  <View style={[styles.flex1, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+                    {renderHeader()}
+                    {renderMainContent()}
+                    {renderFooter()}
+                  </View>
+                </View>
+              )
+            }
+          </ModalSafeAreaBoundary>
         </KeyboardAvoidingView>
       </RNModal>
     );

package/src/organisms/ReorderableList.tsx

@@ -0,0 +1,151 @@
+import React, { useRef, useState } from 'react';
+import { Animated, PanResponder, View, type StyleProp, type ViewStyle } from 'react-native';
+import { createStyles } from '../theme/createStyles';
+
+export interface ReorderableListProps<T> {
+  data: T[];
+  keyExtractor: (item: T, index: number) => string;
+  /** Alto fijo de cada fila: necesario para calcular el índice destino sin medir layout async. */
+  itemHeight: number;
+  renderItem: (item: T, index: number, dragging: boolean) => React.ReactElement;
+  /** Se llama al soltar, con el arreglo ya reordenado. No muta `data`. */
+  onReorder: (data: T[]) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Reordena moviendo el ítem de `from` a `to`, sin mutar `data`. Exportada aparte por ser testeable sin simular gestos. */
+export function move<T>(data: T[], from: number, to: number): T[] {
+  const next = data.slice();
+  const [item] = next.splice(from, 1) as [T];
+  next.splice(to, 0, item);
+  return next;
+}
+
+const useStyles = createStyles(() => ({
+  row: { width: '100%' },
+}));
+
+/**
+ * ReorderableList
+ * Ley de destino común (common fate): al arrastrar una fila, las filas que
+ * tiene que atravesar se desplazan juntas en el mismo sentido — eso es lo
+ * que comunica "van a intercambiar lugar" antes de soltar el dedo, no un
+ * simple resaltado del ítem activo.
+ *
+ * Sin dependencias de gestos/animación externas (reanimated, gesture-handler):
+ * PanResponder + Animated alcanzan porque el cálculo de índice destino
+ * necesita el valor de arrastre en JS en cada movimiento (no algo que
+ * useNativeDriver pueda resolver solo).
+ */
+export function ReorderableList<T>({
+  data,
+  keyExtractor,
+  itemHeight,
+  renderItem,
+  onReorder,
+  disabled = false,
+  style,
+}: ReorderableListProps<T>) {
+  const styles = useStyles();
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [targetIndex, setTargetIndex] = useState<number | null>(null);
+  const dy = useRef(new Animated.Value(0)).current;
+  const activeIndexRef = useRef<number | null>(null);
+  // El PanResponder de cada fila se crea una sola vez (se cachea en el Map de
+  // abajo) y su closure queda fijo al render de esa primera vez: leer
+  // `targetIndex` (state) directamente ahí siempre daría el valor del
+  // montaje. Un ref sí refleja la última escritura sin importar cuándo se
+  // creó la closure que lo lee.
+  const targetIndexRef = useRef<number | null>(null);
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  // Igual razón que targetIndexRef: el responder de cada fila se crea una
+  // sola vez, así que leer `disabled` directo del closure congelaría el
+  // valor del momento en que esa fila se creó.
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  const panResponders = useRef(new Map<number, ReturnType<typeof PanResponder.create>>()).current;
+  // Si `data` se achica, los responders de índices que ya no existen quedan
+  // colgados en el Map para siempre: se podan en cada render.
+  for (const index of panResponders.keys()) {
+    if (index >= data.length) panResponders.delete(index);
+  }
+
+  function panResponderFor(index: number) {
+    let responder = panResponders.get(index);
+    if (responder) return responder;
+
+    responder = PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: (_, gesture) => !disabledRef.current && Math.abs(gesture.dy) > 2,
+      onPanResponderGrant: () => {
+        activeIndexRef.current = index;
+        targetIndexRef.current = index;
+        setActiveIndex(index);
+        setTargetIndex(index);
+        dy.setValue(0);
+      },
+      onPanResponderMove: (_, gesture) => {
+        dy.setValue(gesture.dy);
+        const from = activeIndexRef.current;
+        if (from === null) return;
+        const rawTarget = from + Math.round(gesture.dy / itemHeight);
+        const clamped = Math.max(0, Math.min(dataRef.current.length - 1, rawTarget));
+        targetIndexRef.current = clamped;
+        setTargetIndex((prev) => (prev === clamped ? prev : clamped));
+      },
+      onPanResponderRelease: () => {
+        const from = activeIndexRef.current;
+        const to = targetIndexRef.current;
+        dy.setValue(0);
+        activeIndexRef.current = null;
+        targetIndexRef.current = null;
+        setActiveIndex(null);
+        setTargetIndex(null);
+        if (from === null || to === null || from === to) return;
+        onReorder(move(dataRef.current, from, to));
+      },
+      onPanResponderTerminate: () => {
+        dy.setValue(0);
+        activeIndexRef.current = null;
+        targetIndexRef.current = null;
+        setActiveIndex(null);
+        setTargetIndex(null);
+      },
+    });
+    panResponders.set(index, responder);
+    return responder;
+  }
+
+  return (
+    <View style={style}>
+      {data.map((item, index) => {
+        const isActive = activeIndex === index;
+        // Filas entre el origen y el destino se corren un lugar entero en el
+        // sentido del arrastre: es el efecto de "grupo que se mueve junto".
+        let shift = 0;
+        if (activeIndex !== null && targetIndex !== null && !isActive) {
+          if (activeIndex < targetIndex && index > activeIndex && index <= targetIndex) shift = -itemHeight;
+          else if (activeIndex > targetIndex && index < activeIndex && index >= targetIndex) shift = itemHeight;
+        }
+
+        return (
+          <Animated.View
+            key={keyExtractor(item, index)}
+            style={[
+              styles.row,
+              isActive
+                ? { transform: [{ translateY: dy }], zIndex: 1, elevation: 4 }
+                : { transform: [{ translateY: shift }] },
+            ]}
+            {...panResponderFor(index).panHandlers}
+          >
+            {renderItem(item, index, isActive)}
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+}

package/src/organisms/Screen.tsx

@@ -68,12 +68,11 @@ export const Screen = memo(({
         {scrollable ? (
           <ScrollView
             style={styles.container}
-            contentInsetAdjustmentBehavior="automatic"
             automaticallyAdjustKeyboardInsets
             contentContainerStyle={[
               styles.contentContainer,
               { paddingTop: applyTop ? insets.top : 0 },
-              Platform.OS === 'android' && applyBottom && { paddingBottom: insets.bottom },
+              applyBottom && { paddingBottom: insets.bottom },
               contentContainerStyle,
             ]}
             keyboardShouldPersistTaps="handled"

package/src/organisms/index.ts

@@ -28,3 +28,5 @@ export { ThemeToggle } from './ThemeToggle';
 export type { ThemeToggleProps } from './ThemeToggle';
 export { NavigationBar } from './NavigationBar';
 export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';
+export { ReorderableList } from './ReorderableList';
+export type { ReorderableListProps } from './ReorderableList';