orn-ui 0.1.0 → 0.2.0

package/src/organisms/BottomSheet.tsx

@@ -1,16 +1,52 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
-import { Animated, Dimensions, Modal, PanResponder, Pressable, View, type ViewStyle } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  ScrollView,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useInsets } from '../theme/UIProvider';
+import { useColors, useInsets } from '../theme/UIProvider';
+import { Title } from '../atoms/Text';
+import { IconButton } from '../atoms/IconButton';
+import { Transition } from '../atoms/Transition';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 const DISMISS_THRESHOLD = 100;
 
+export type FooterPlacement = 'fixed' | 'scroll' | 'hide-with-keyboard';
+
 export interface BottomSheetProps {
   visible: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  /** Con título aparece el header, con su botón de cerrar. */
+  title?: string;
+  /** Acciones de la hoja. Dónde vive lo decide `footerPlacement`. */
+  footer?: React.ReactNode;
+  /**
+   * 'fixed' lo ancla al pie de la hoja; 'scroll' lo deja al final del
+   * contenido; 'hide-with-keyboard' lo esconde mientras se escribe, que en un
+   * formulario largo le devuelve esa franja al campo enfocado. @default 'fixed'
+   */
+  footerPlacement?: FooterPlacement;
+  /** El contenido scrollea cuando no entra. @default true */
+  scrollable?: boolean;
+  /** Arrastrar la hoja hacia abajo la cierra. @default true */
+  draggable?: boolean;
+  /** Fracción de la pantalla (0-1) o píxeles. @default 0.9 */
+  maxHeight?: number;
   closeAccessibilityLabel?: string;
+  containerStyle?: ViewStyle;
+  contentStyle?: ViewStyle;
+  testID?: string;
 }
 
 const useStyles = createStyles((theme) => ({
@@ -20,76 +56,192 @@ const useStyles = createStyles((theme) => ({
     backgroundColor: theme.colors.surface,
     borderTopLeftRadius: theme.tokens.radius.xxl,
     borderTopRightRadius: theme.tokens.radius.xxl,
-    paddingHorizontal: theme.tokens.spacing.xl,
     ...theme.tokens.shadow.lg,
   },
   handleArea: { paddingVertical: theme.tokens.spacing.md, alignItems: 'center' },
   handle: { width: 40, height: 5, borderRadius: 3, backgroundColor: theme.colors.border },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.tokens.spacing.md,
+    paddingHorizontal: theme.tokens.spacing.xl,
+    paddingBottom: theme.tokens.spacing.md,
+  },
+  headerSpaced: { paddingTop: theme.tokens.spacing.xl },
+  title: { flex: 1, fontSize: theme.tokens.fontSize.xl, fontWeight: theme.tokens.fontWeight.bold },
+  content: { paddingHorizontal: theme.tokens.spacing.xl },
+  scroll: { flexShrink: 1 },
+  footer: {
+    paddingHorizontal: theme.tokens.spacing.xl,
+    paddingTop: theme.tokens.spacing.md,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+  },
+  footerInline: { paddingTop: theme.tokens.spacing.xl },
 }));
 
 const absoluteFill: ViewStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };
 
 /**
  * BottomSheet
- * Modal que aparece desde abajo: animación con Animated (no la del Modal
- * nativo) y arrastre para cerrar con PanResponder — no un gesture-handler
- * externo, para mantener la librería en cero dependencias.
+ * Hoja que entra desde abajo, con arrastre para cerrar (PanResponder, no un
+ * gesture-handler externo: la librería es cero dependencias). Header, footer y
+ * scroll son opcionales, así que cubre tanto la hoja desnuda como el formulario
+ * completo.
  */
-export const BottomSheet = memo(({ visible, onClose, children, closeAccessibilityLabel = 'Close' }: BottomSheetProps) => {
-  const styles = useStyles();
-  const insets = useInsets();
-  const [mounted, setMounted] = useState(visible);
-  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
-  const backdropOpacity = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (visible) {
-      setMounted(true);
-      Animated.timing(translateY, { toValue: 0, duration: 250, useNativeDriver: true }).start();
-      Animated.timing(backdropOpacity, { toValue: 1, duration: 250, useNativeDriver: true }).start();
-    } else {
-      Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 200, useNativeDriver: true }).start(({ finished }) => {
-        if (finished) setMounted(false);
-      });
-      Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }).start();
-    }
-  }, [visible]);
-
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),
-      onPanResponderMove: (_, gesture) => {
-        if (gesture.dy > 0) translateY.setValue(gesture.dy);
-      },
-      onPanResponderRelease: (_, gesture) => {
-        if (gesture.dy > DISMISS_THRESHOLD) {
-          onClose();
-        } else {
-          Animated.timing(translateY, { toValue: 0, duration: 150, useNativeDriver: true }).start();
-        }
-      },
-    })
-  ).current;
-
-  if (!mounted) return null;
-
-  return (
-    <Modal visible transparent animationType="none" statusBarTranslucent onRequestClose={onClose}>
-      <View style={styles.container}>
-        <Animated.View style={[absoluteFill, styles.backdrop, { opacity: backdropOpacity }]}>
-          <Pressable style={absoluteFill} onPress={onClose} accessibilityRole="button" accessibilityLabel={closeAccessibilityLabel} />
-        </Animated.View>
-
-        <Animated.View
-          style={[styles.sheet, { paddingBottom: Math.max(insets.bottom, 20) }, { transform: [{ translateY }] }]}
-        >
-          <View style={styles.handleArea} {...panResponder.panHandlers}>
-            <View style={styles.handle} />
-          </View>
-          {children}
-        </Animated.View>
+export const BottomSheet = memo(
+  ({
+    visible,
+    onClose,
+    children,
+    title,
+    footer,
+    footerPlacement = 'fixed',
+    scrollable = true,
+    draggable = true,
+    maxHeight = 0.9,
+    closeAccessibilityLabel = 'Close',
+    containerStyle,
+    contentStyle,
+    testID,
+  }: BottomSheetProps) => {
+    const styles = useStyles();
+    const colors = useColors();
+    const insets = useInsets();
+    const [mounted, setMounted] = useState(visible);
+    const [keyboardOpen, setKeyboardOpen] = useState(false);
+    const progress = useRef(new Animated.Value(0)).current;
+
+    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);
+        });
+      }
+    }, [visible, progress]);
+
+    useEffect(() => {
+      if (footerPlacement !== 'hide-with-keyboard') return;
+      const [show, hide] =
+        Platform.OS === 'ios' ? ['keyboardWillShow', 'keyboardWillHide'] : ['keyboardDidShow', 'keyboardDidHide'];
+      const subs = [
+        Keyboard.addListener(show as 'keyboardDidShow', () => setKeyboardOpen(true)),
+        Keyboard.addListener(hide as 'keyboardDidHide', () => setKeyboardOpen(false)),
+      ];
+      return () => subs.forEach((sub) => sub.remove());
+    }, [footerPlacement]);
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gesture) => gesture.dy > 5 && Math.abs(gesture.dy) > Math.abs(gesture.dx),
+        onPanResponderMove: (_, gesture) => {
+          if (gesture.dy > 0) progress.setValue(1 - Math.min(gesture.dy, SCREEN_HEIGHT) / SCREEN_HEIGHT);
+        },
+        onPanResponderRelease: (_, gesture) => {
+          if (gesture.dy > DISMISS_THRESHOLD) {
+            onClose();
+          } else {
+            Animated.timing(progress, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+          }
+        },
+      })
+    ).current;
+
+    if (!mounted) return null;
+
+    // Porcentaje y no píxeles: se mide contra el contenedor, que con el teclado
+    // abierto es más bajo, así que la hoja entra siempre entera.
+    const resolvedMaxHeight: number | `${number}%` = maxHeight <= 1 ? `${maxHeight * 100}%` : maxHeight;
+    const hasHeader = !!title;
+
+    const scrolledFooter = !!footer && footerPlacement === 'scroll' && (
+      <View style={styles.footerInline}>{footer}</View>
+    );
+    const pinnedFooter =
+      !!footer && footerPlacement !== 'scroll' && !(footerPlacement === 'hide-with-keyboard' && keyboardOpen) ? (
+        <View style={styles.footer}>{footer}</View>
+      ) : null;
+
+    const body = scrollable ? (
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={[styles.content, contentStyle]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        {children}
+        {scrolledFooter}
+      </ScrollView>
+    ) : (
+      <View style={[styles.content, contentStyle]}>
+        {children}
+        {scrolledFooter}
       </View>
-    </Modal>
-  );
-});
+    );
+
+    return (
+      <Modal visible transparent animationType="none" statusBarTranslucent onRequestClose={onClose}>
+        {/* La hoja está anclada abajo, así que el teclado la tapa entera: hay
+            que empujarla, no ajustar insets adentro del scroll. Una sola
+            compensación, la del contenedor. */}
+        <KeyboardAvoidingView
+          style={styles.container}
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        >
+          <Transition value={progress} preset="fade" style={[absoluteFill, styles.backdrop]}>
+            {/* Con header, el botón de cerrar ya expone la acción: repetir el
+                label acá deja dos elementos con el mismo nombre. */}
+            <Pressable
+              style={absoluteFill}
+              onPress={onClose}
+              testID="bottom-sheet-backdrop"
+              accessibilityRole={hasHeader ? undefined : 'button'}
+              accessibilityLabel={hasHeader ? undefined : closeAccessibilityLabel}
+            />
+          </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>
+            )}
+
+            {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}
+
+            {pinnedFooter}
+          </Transition>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  }
+);
 BottomSheet.displayName = 'BottomSheet';

package/src/organisms/DateField.tsx

@@ -30,7 +30,7 @@ function defaultFormat(date: Date, monthNames: string[]): string {
 const useStyles = createStyles((theme) => ({
   container: { marginBottom: theme.tokens.spacing.lg, width: '100%', gap: theme.tokens.spacing.sm },
   label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.text },
-  required: { color: theme.colors.error },
+  required: { color: theme.colors.errorText },
   field: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -45,7 +45,7 @@ const useStyles = createStyles((theme) => ({
   fieldError: { borderColor: theme.colors.error },
   fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
   placeholder: { color: theme.colors.textLight },
-  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.error },
+  errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
 }));
 
 /**

package/src/organisms/DatePicker.tsx

@@ -110,13 +110,13 @@ const useStyles = createStyles((theme) => ({
   dayButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
   dayText: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
   daySelected: { backgroundColor: theme.colors.primary },
-  dayTextSelected: { color: theme.colors.white, fontWeight: theme.tokens.fontWeight.bold },
+  dayTextSelected: { color: theme.colors.onPrimary, fontWeight: theme.tokens.fontWeight.bold },
   // El resaltado del tramo intermedio va en la celda (cuadrada, sin gaps) y
   // no en el botón redondo, así la barra del rango se ve continua.
-  cellInRange: { backgroundColor: theme.colors.primary + '1f' },
+  cellInRange: { backgroundColor: theme.colors.primarySoft },
   cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },
   cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },
-  dayTextInRange: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },
+  dayTextInRange: { color: theme.colors.primaryText, fontWeight: theme.tokens.fontWeight.semibold },
   dayToday: { borderWidth: 1, borderColor: theme.colors.primary },
   dayTextDisabled: { color: theme.colors.textLight, opacity: 0.4 },
 }));

package/src/organisms/List.tsx

@@ -1,32 +1,32 @@
-import React, { memo, useCallback } from 'react';
-import {
-  ActivityIndicator,
-  FlatList,
-  Platform,
-  RefreshControl,
-  Text,
-  View,
-  type FlatListProps,
-  type ViewStyle,
-} from 'react-native';
+import React, { useCallback } from 'react';
+import { FlatList, RefreshControl, View, type FlatListProps, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
 import { useColors, useLabels } from '../theme/UIProvider';
 import { EmptyState } from '../atoms/EmptyState';
+import { Skeleton } from '../atoms/Skeleton';
 import { Spinner } from '../atoms/Spinner';
 import type { IconName } from '../icons/types';
 
 export interface ListProps<T> {
   data: T[];
-  keyExtractor: (item: T) => string;
+  keyExtractor: (item: T, index: number) => string;
   renderItem: FlatListProps<T>['renderItem'];
 
+  /** Carga inicial: mientras sea true y no haya datos, se muestran placeholders. */
   isLoading: boolean;
+  /** Recarga con datos ya en pantalla (pull-to-refresh). @default false */
+  isRefreshing?: boolean;
   isLoadingMore?: boolean;
   /** Controlado por el consumidor: mientras es false, se muestra un spinner de pantalla completa. @default true */
   isReady?: boolean;
   loadingText?: string;
   loadingMoreText?: string;
 
+  /** Filas fantasma de la carga inicial. @default 6 */
+  skeletonCount?: number;
+  /** Placeholder propio, para que calce con la forma real del ítem. */
+  renderSkeletonItem?: () => React.ReactElement;
+
   onEndReached?: () => void;
   onEndReachedThreshold?: number;
   onRefresh?: () => void;
@@ -48,20 +48,15 @@ export interface ListProps<T> {
 
 const useStyles = createStyles((theme) => ({
   container: { flex: 1, backgroundColor: theme.colors.background },
-  loadingOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: theme.colors.background + 'CC',
-    zIndex: 10,
-    justifyContent: 'center',
+  listContent: { padding: theme.tokens.spacing.md },
+  footerLoader: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center' },
+  skeletonRow: {
+    flexDirection: 'row',
     alignItems: 'center',
+    gap: theme.tokens.spacing.md,
+    padding: theme.tokens.spacing.md,
   },
-  loadingText: { marginTop: theme.tokens.spacing.md, color: theme.colors.textLight, fontWeight: theme.tokens.fontWeight.medium },
-  listContent: { padding: theme.tokens.spacing.md, paddingBottom: Platform.OS === 'android' ? 100 : 80 },
-  footerLoader: { paddingVertical: theme.tokens.spacing.xl, alignItems: 'center' },
+  skeletonText: { flex: 1, gap: theme.tokens.spacing.sm },
 }));
 
 /**
@@ -75,10 +70,13 @@ export function List<T>({
   keyExtractor,
   renderItem,
   isLoading,
+  isRefreshing = false,
   isLoadingMore = false,
   isReady = true,
   loadingText,
   loadingMoreText,
+  skeletonCount = 6,
+  renderSkeletonItem,
   onEndReached,
   onEndReachedThreshold = 0.3,
   onRefresh,
@@ -98,22 +96,36 @@ export function List<T>({
   const resolvedLoadingText = loadingText ?? labels.loading;
   const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;
 
+  const isInitialLoading = isLoading && data.length === 0;
+
+  // El footer propio y el loader de paginación conviven: antes el primero
+  // tapaba al segundo y la lista dejaba de avisar que estaba trayendo más.
   const renderFooter = useCallback(() => {
-    if (ListFooterComponent) {
-      return typeof ListFooterComponent === 'function' ? <ListFooterComponent /> : (ListFooterComponent as React.ReactElement);
-    }
-    if (!isLoadingMore) return null;
+    const custom =
+      typeof ListFooterComponent === 'function' ? (
+        <ListFooterComponent />
+      ) : (
+        (ListFooterComponent as React.ReactElement | undefined) ?? null
+      );
+
     return (
-      <View style={styles.footerLoader}>
-        <Spinner text={resolvedLoadingMoreText} fullscreen={false} />
-      </View>
+      <>
+        {custom}
+        {isLoadingMore && (
+          <View style={styles.footerLoader}>
+            <Spinner text={resolvedLoadingMoreText} fullscreen={false} />
+          </View>
+        )}
+      </>
     );
   }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);
 
+  // Vacío sólo cuando ya se sabe que no hay nada: durante la carga inicial se
+  // muestran placeholders, no "sin resultados".
   const renderEmpty = useCallback(() => {
-    if (isLoading) return null;
+    if (isLoading || isRefreshing) return null;
     return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;
-  }, [isLoading, emptyTitle, emptyDescription, emptyIconName]);
+  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName]);
 
   if (!isReady) {
     return (
@@ -123,15 +135,30 @@ export function List<T>({
     );
   }
 
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {isLoading && data.length === 0 && (
-        <View style={styles.loadingOverlay} pointerEvents="none">
-          <ActivityIndicator size="large" color={colors.primary} />
-          <Text style={styles.loadingText}>{resolvedLoadingText}</Text>
+  if (isInitialLoading) {
+    return (
+      <View style={[styles.container, containerStyle]} testID="list-skeleton">
+        <View style={[styles.listContent, contentContainerStyle]}>
+          {Array.from({ length: skeletonCount }, (_, i) => (
+            <React.Fragment key={i}>
+              {renderSkeletonItem?.() ?? (
+                <View style={styles.skeletonRow}>
+                  <Skeleton variant="circle" width={40} />
+                  <View style={styles.skeletonText}>
+                    <Skeleton width="60%" height={14} />
+                    <Skeleton width="35%" height={12} />
+                  </View>
+                </View>
+              )}
+            </React.Fragment>
+          ))}
         </View>
-      )}
+      </View>
+    );
+  }
 
+  return (
+    <View style={[styles.container, containerStyle]}>
       <ListComponent
         data={data}
         keyExtractor={keyExtractor}
@@ -144,7 +171,12 @@ export function List<T>({
         ListEmptyComponent={renderEmpty}
         refreshControl={
           onRefresh ? (
-            <RefreshControl refreshing={isLoading} onRefresh={onRefresh} colors={[colors.primary]} tintColor={colors.primary} />
+            <RefreshControl
+              refreshing={isRefreshing}
+              onRefresh={onRefresh}
+              colors={[colors.primary]}
+              tintColor={colors.primary}
+            />
           ) : undefined
         }
         {...listProps}