orn-ui 0.1.1 → 0.2.1

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

@@ -1,26 +1,44 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import { Text, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
 import { createStyles } from '../theme/createStyles';
-import { useAllowFontScaling, useColors } from '../theme/UIProvider';
+import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Modal } from './Modal';
-import { DatePicker, DEFAULT_MONTH_NAMES, type DatePickerProps } from './DatePicker';
+import { DatePicker, type DatePickerProps, type DateRange } from './DatePicker';
 import { Button } from '../atoms/Button';
 
 export interface DateFieldProps
   extends Pick<DatePickerProps, 'minDate' | 'maxDate' | 'monthNames' | 'weekdayNames' | 'firstDayOfWeek'> {
   label?: string;
   required?: boolean;
+  /**
+   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.
+   * @default 'single'
+   */
+  mode?: 'single' | 'range';
+  /** Fecha elegida en mode="single". */
   value?: Date;
-  onChange: (date: Date) => void;
+  /** Se llama en mode="single". */
+  onChange?: (date: Date) => void;
+  /** Rango elegido en mode="range". */
+  range?: DateRange;
+  /** Se llama en mode="range", tanto al fijar el inicio como al cerrar el rango. */
+  onRangeChange?: (range: DateRange) => void;
   placeholder?: string;
   error?: string;
   disabled?: boolean;
-  /** Formatea la fecha en el campo. @default "D de Month de YYYY" en inglés */
+  /** Formatea la fecha en el campo. @default "Month D, YYYY" */
   format?: (date: Date) => string;
-  /** Título del modal del calendario. @default 'Select date' */
+  /** Título del modal del calendario. @default el `selectDate` de `useLabels()` */
   modalTitle?: string;
+  /**
+   * Si se pasa, el modal muestra un botón que borra la selección y cierra.
+   * Sin esto no hay botón: el "Clear" anterior sólo cerraba, sin limpiar nada.
+   */
+  onClear?: () => void;
+  /** Texto de ese botón. @default el `clear` de `useLabels()` */
   clearLabel?: string;
   containerStyle?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 function defaultFormat(date: Date, monthNames: string[]): string {
@@ -58,27 +76,67 @@ export const DateField = memo(
   ({
     label,
     required = false,
+    mode = 'single',
     value,
     onChange,
+    range,
+    onRangeChange,
     placeholder = 'Select a date',
     error,
     disabled = false,
     format,
-    modalTitle = 'Select date',
-    clearLabel = 'Clear',
+    modalTitle,
+    onClear,
+    clearLabel,
     containerStyle,
-    monthNames = DEFAULT_MONTH_NAMES,
+    monthNames,
+    testID,
     ...pickerProps
   }: DateFieldProps) => {
     const colors = useColors();
     const styles = useStyles();
+    const labels = useLabels();
     const allowFontScaling = useAllowFontScaling();
     const [open, setOpen] = useState(false);
 
-    const display = value ? (format ? format(value) : defaultFormat(value, monthNames)) : placeholder;
+    const months = monthNames ?? labels.months;
+    const isRange = mode === 'range';
+
+    const formatDate = (date: Date) => (format ? format(date) : defaultFormat(date, months));
+
+    // El calendario se cierra solo cuando ya no falta nada por elegir: en
+    // rango, recién cuando el segundo toque cierra el intervalo.
+    const handleChange = useCallback(
+      (date: Date) => {
+        onChange?.(date);
+        setOpen(false);
+      },
+      [onChange]
+    );
+
+    const handleRangeChange = useCallback(
+      (next: DateRange) => {
+        onRangeChange?.(next);
+        if (next.end) setOpen(false);
+      },
+      [onRangeChange]
+    );
+
+    const handleClear = useCallback(() => {
+      onClear?.();
+      setOpen(false);
+    }, [onClear]);
+
+    const hasValue = isRange ? !!range?.start : !!value;
+    let display = placeholder;
+    if (isRange && range?.start) {
+      display = range.end ? `${formatDate(range.start)} — ${formatDate(range.end)}` : formatDate(range.start);
+    } else if (!isRange && value) {
+      display = formatDate(value);
+    }
 
     return (
-      <View style={[styles.container, containerStyle]}>
+      <View style={[styles.container, containerStyle]} testID={testID}>
         {!!label && (
           <Text allowFontScaling={allowFontScaling} style={styles.label}>
             {label}
@@ -95,7 +153,7 @@ export const DateField = memo(
           accessibilityLabel={label ?? placeholder}
           accessibilityState={{ disabled, expanded: open }}
         >
-          <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !value && styles.placeholder]}>
+          <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !hasValue && styles.placeholder]}>
             {display}
           </Text>
           <Text allowFontScaling={allowFontScaling} style={{ color: colors.textLight }}>
@@ -112,19 +170,21 @@ export const DateField = memo(
         <Modal
           visible={open}
           onClose={() => setOpen(false)}
-          title={modalTitle}
+          title={modalTitle ?? labels.selectDate}
           variant="overlay"
           scrollable={false}
-          footer={<Button title={clearLabel} variant="ghost" onPress={() => setOpen(false)} />}
+          footer={
+            onClear ? <Button title={clearLabel ?? labels.clear} variant="ghost" onPress={handleClear} /> : undefined
+          }
         >
           <DatePicker
+            mode={mode}
             value={value}
-            monthNames={monthNames}
+            range={range}
+            monthNames={months}
             {...pickerProps}
-            onChange={(date) => {
-              onChange(date);
-              setOpen(false);
-            }}
+            onChange={handleChange}
+            onRangeChange={handleRangeChange}
           />
         </Modal>
       </View>