orn-ui 0.1.0

package/src/organisms/DateField.tsx

@@ -0,0 +1,134 @@
+import React, { memo, 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 { Modal } from './Modal';
+import { DatePicker, DEFAULT_MONTH_NAMES, type DatePickerProps } from './DatePicker';
+import { Button } from '../atoms/Button';
+
+export interface DateFieldProps
+  extends Pick<DatePickerProps, 'minDate' | 'maxDate' | 'monthNames' | 'weekdayNames' | 'firstDayOfWeek'> {
+  label?: string;
+  required?: boolean;
+  value?: Date;
+  onChange: (date: Date) => void;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  /** Formatea la fecha en el campo. @default "D de Month de YYYY" en inglés */
+  format?: (date: Date) => string;
+  /** Título del modal del calendario. @default 'Select date' */
+  modalTitle?: string;
+  clearLabel?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+function defaultFormat(date: Date, monthNames: string[]): string {
+  return `${monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+}
+
+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 },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: theme.colors.inputBackground,
+    borderRadius: theme.tokens.radius.lg,
+    borderWidth: 2,
+    borderColor: theme.colors.border,
+    minHeight: 50,
+    paddingHorizontal: theme.tokens.spacing.lg,
+  },
+  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 },
+}));
+
+/**
+ * DateField
+ * Campo de fecha: se ve como un Input, abre un `DatePicker` en un Modal al
+ * tocarlo. Sin picker nativo del sistema, así que se ve y se comporta igual
+ * en iOS y Android.
+ */
+export const DateField = memo(
+  ({
+    label,
+    required = false,
+    value,
+    onChange,
+    placeholder = 'Select a date',
+    error,
+    disabled = false,
+    format,
+    modalTitle = 'Select date',
+    clearLabel = 'Clear',
+    containerStyle,
+    monthNames = DEFAULT_MONTH_NAMES,
+    ...pickerProps
+  }: DateFieldProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const [open, setOpen] = useState(false);
+
+    const display = value ? (format ? format(value) : defaultFormat(value, monthNames)) : placeholder;
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {!!label && (
+          <Text allowFontScaling={allowFontScaling} style={styles.label}>
+            {label}
+            {required && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+
+        <TouchableOpacity
+          style={[styles.field, !!error && styles.fieldError, disabled && { opacity: 0.5 }]}
+          onPress={() => setOpen(true)}
+          disabled={disabled}
+          activeOpacity={0.7}
+          accessibilityRole="button"
+          accessibilityLabel={label ?? placeholder}
+          accessibilityState={{ disabled, expanded: open }}
+        >
+          <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !value && styles.placeholder]}>
+            {display}
+          </Text>
+          <Text allowFontScaling={allowFontScaling} style={{ color: colors.textLight }}>
+            {'▾'}
+          </Text>
+        </TouchableOpacity>
+
+        {!!error && (
+          <Text allowFontScaling={allowFontScaling} style={styles.errorText}>
+            {error}
+          </Text>
+        )}
+
+        <Modal
+          visible={open}
+          onClose={() => setOpen(false)}
+          title={modalTitle}
+          variant="overlay"
+          scrollable={false}
+          footer={<Button title={clearLabel} variant="ghost" onPress={() => setOpen(false)} />}
+        >
+          <DatePicker
+            value={value}
+            monthNames={monthNames}
+            {...pickerProps}
+            onChange={(date) => {
+              onChange(date);
+              setOpen(false);
+            }}
+          />
+        </Modal>
+      </View>
+    );
+  }
+);
+DateField.displayName = 'DateField';

package/src/organisms/DatePicker.tsx

@@ -0,0 +1,255 @@
+import React, { memo, useMemo, 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 { IconButton } from '../atoms/IconButton';
+
+export const DEFAULT_MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+/** Índice 0 = domingo, para alinear con Date.getDay(). */
+export const DEFAULT_WEEKDAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+export interface DateRange {
+  start: Date;
+  /** Falta mientras el rango está a medio elegir (sólo se tocó el inicio). */
+  end?: Date;
+}
+
+export interface DatePickerProps {
+  /**
+   * 'single' elige una fecha; 'range' elige un intervalo con dos toques.
+   * @default 'single'
+   */
+  mode?: 'single' | 'range';
+  /** Fecha elegida en mode="single". */
+  value?: Date;
+  /** 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;
+  minDate?: Date;
+  maxDate?: Date;
+  /** Mes mostrado al abrir si no hay `value`. @default hoy */
+  defaultMonth?: Date;
+  monthNames?: string[];
+  weekdayNames?: string[];
+  /** 0 = domingo, 1 = lunes. @default 0 */
+  firstDayOfWeek?: 0 | 1;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Compara sólo año/mes/día, ignorando hora — dos Date del mismo día son "iguales". */
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+/** Estrictamente entre start y end, sin incluir los extremos. */
+function isBetween(day: Date, start: Date, end: Date): boolean {
+  const t = startOfDay(day).getTime();
+  return t > startOfDay(start).getTime() && t < startOfDay(end).getTime();
+}
+
+function isOutOfRange(day: Date, minDate?: Date, maxDate?: Date): boolean {
+  const t = startOfDay(day).getTime();
+  if (minDate && t < startOfDay(minDate).getTime()) return true;
+  if (maxDate && t > startOfDay(maxDate).getTime()) return true;
+  return false;
+}
+
+/**
+ * Devuelve la grilla del mes: 6 filas de 7 celdas. Las celdas fuera del mes
+ * son null, así el layout no salta de alto entre meses (un mes puede
+ * necesitar 4, 5 o 6 filas según en qué día caiga el 1).
+ */
+export function buildMonthGrid(year: number, month: number, firstDayOfWeek: 0 | 1): (Date | null)[][] {
+  const first = new Date(year, month, 1);
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const leading = (first.getDay() - firstDayOfWeek + 7) % 7;
+
+  const cells: (Date | null)[] = [];
+  for (let i = 0; i < leading; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(year, month, d));
+  while (cells.length < 42) cells.push(null);
+
+  const rows: (Date | null)[][] = [];
+  for (let r = 0; r < 6; r++) rows.push(cells.slice(r * 7, r * 7 + 7));
+  return rows;
+}
+
+const useStyles = createStyles((theme) => ({
+  container: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: theme.tokens.radius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    padding: theme.tokens.spacing.md,
+  },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: theme.tokens.spacing.sm },
+  monthLabel: { fontSize: theme.tokens.fontSize.lg, fontWeight: theme.tokens.fontWeight.semibold, color: theme.colors.text },
+  weekRow: { flexDirection: 'row' },
+  weekday: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: theme.tokens.fontSize.xs,
+    fontWeight: theme.tokens.fontWeight.semibold,
+    color: theme.colors.textLight,
+    paddingVertical: theme.tokens.spacing.sm,
+  },
+  row: { flexDirection: 'row' },
+  cell: { flex: 1, aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },
+  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 },
+  // 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' },
+  cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },
+  cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },
+  dayTextInRange: { color: theme.colors.primary, fontWeight: theme.tokens.fontWeight.semibold },
+  dayToday: { borderWidth: 1, borderColor: theme.colors.primary },
+  dayTextDisabled: { color: theme.colors.textLight, opacity: 0.4 },
+}));
+
+/**
+ * DatePicker
+ * Calendario mensual dibujado con View/Text puros — sin
+ * @react-native-community/datetimepicker ni ningún picker nativo, para
+ * mantener la librería en cero dependencias y verse igual en iOS y Android.
+ */
+export const DatePicker = memo(
+  ({
+    mode = 'single',
+    value,
+    onChange,
+    range,
+    onRangeChange,
+    minDate,
+    maxDate,
+    defaultMonth,
+    monthNames = DEFAULT_MONTH_NAMES,
+    weekdayNames = DEFAULT_WEEKDAY_NAMES,
+    firstDayOfWeek = 0,
+    style,
+    testID,
+  }: DatePickerProps) => {
+    const colors = useColors();
+    const styles = useStyles();
+    const allowFontScaling = useAllowFontScaling();
+    const isRange = mode === 'range';
+
+    const handlePress = (day: Date) => {
+      if (!isRange) {
+        onChange?.(day);
+        return;
+      }
+      // Primer toque (o rango ya cerrado, o toque antes del inicio): arranca
+      // un rango nuevo. Segundo toque en adelante: lo cierra.
+      if (!range?.start || range.end || startOfDay(day) < startOfDay(range.start)) {
+        onRangeChange?.({ start: day });
+      } else {
+        onRangeChange?.({ start: range.start, end: day });
+      }
+    };
+
+    const initial = value ?? range?.start ?? defaultMonth ?? new Date();
+    const [visibleMonth, setVisibleMonth] = useState(() => new Date(initial.getFullYear(), initial.getMonth(), 1));
+
+    const today = useMemo(() => new Date(), []);
+    const grid = useMemo(
+      () => buildMonthGrid(visibleMonth.getFullYear(), visibleMonth.getMonth(), firstDayOfWeek),
+      [visibleMonth, firstDayOfWeek]
+    );
+
+    const orderedWeekdays = useMemo(
+      () => (firstDayOfWeek === 0 ? weekdayNames : [...weekdayNames.slice(1), weekdayNames[0]!]),
+      [weekdayNames, firstDayOfWeek]
+    );
+
+    const shiftMonth = (delta: number) =>
+      setVisibleMonth((m) => new Date(m.getFullYear(), m.getMonth() + delta, 1));
+
+    const monthLabel = `${monthNames[visibleMonth.getMonth()]} ${visibleMonth.getFullYear()}`;
+
+    return (
+      <View style={[styles.container, style]} testID={testID}>
+        <View style={styles.header}>
+          <IconButton iconName="chevron-left" accessibilityLabel="Previous month" onPress={() => shiftMonth(-1)} />
+          <Text allowFontScaling={allowFontScaling} style={styles.monthLabel} accessibilityRole="header">
+            {monthLabel}
+          </Text>
+          <IconButton iconName="chevron-right" accessibilityLabel="Next month" onPress={() => shiftMonth(1)} />
+        </View>
+
+        <View style={styles.weekRow}>
+          {orderedWeekdays.map((w, i) => (
+            <Text allowFontScaling={allowFontScaling} key={`${w}-${i}`} style={styles.weekday}>
+              {w}
+            </Text>
+          ))}
+        </View>
+
+        {grid.map((row, rowIndex) => (
+          <View style={styles.row} key={rowIndex}>
+            {row.map((day, cellIndex) => {
+              if (!day) return <View style={styles.cell} key={cellIndex} />;
+
+              const isStart = isRange && !!range?.start && isSameDay(day, range.start);
+              const isEnd = isRange && !!range?.end && isSameDay(day, range.end);
+              const inRange =
+                isRange && !!range?.start && !!range.end && isBetween(day, range.start, range.end);
+              const selected = isRange ? isStart || isEnd : !!value && isSameDay(day, value);
+
+              const disabled = isOutOfRange(day, minDate, maxDate);
+              const isToday = isSameDay(day, today);
+              return (
+                <View
+                  style={[
+                    styles.cell,
+                    (inRange || (isStart && !!range?.end) || isEnd) && styles.cellInRange,
+                    isStart && !!range?.end && styles.cellRangeStart,
+                    isEnd && styles.cellRangeEnd,
+                  ]}
+                  key={cellIndex}
+                >
+                  <TouchableOpacity
+                    style={[styles.dayButton, selected && styles.daySelected, !selected && isToday && styles.dayToday]}
+                    onPress={() => handlePress(day)}
+                    disabled={disabled}
+                    activeOpacity={0.7}
+                    accessibilityRole="button"
+                    accessibilityLabel={`${monthNames[day.getMonth()]} ${day.getDate()}, ${day.getFullYear()}`}
+                    accessibilityState={{ selected, disabled }}
+                  >
+                    <Text
+                      allowFontScaling={allowFontScaling}
+                      style={[
+                        styles.dayText,
+                        inRange && styles.dayTextInRange,
+                        selected && styles.dayTextSelected,
+                        disabled && styles.dayTextDisabled,
+                      ]}
+                    >
+                      {day.getDate()}
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+              );
+            })}
+          </View>
+        ))}
+      </View>
+    );
+  }
+);
+DatePicker.displayName = 'DatePicker';

package/src/organisms/List.tsx

@@ -0,0 +1,154 @@
+import React, { memo, useCallback } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  Platform,
+  RefreshControl,
+  Text,
+  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 { Spinner } from '../atoms/Spinner';
+import type { IconName } from '../icons/types';
+
+export interface ListProps<T> {
+  data: T[];
+  keyExtractor: (item: T) => string;
+  renderItem: FlatListProps<T>['renderItem'];
+
+  isLoading: 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;
+
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  onRefresh?: () => void;
+
+  emptyTitle?: string;
+  emptyDescription?: string;
+  emptyIconName?: IconName;
+
+  ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+  ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
+
+  contentContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+
+  /** Componente de lista a usar (FlashList, etc). @default FlatList */
+  ListComponent?: React.ComponentType<any>;
+  listProps?: Record<string, unknown>;
+}
+
+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',
+    alignItems: 'center',
+  },
+  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' },
+}));
+
+/**
+ * List
+ * Lista con estados de carga/paginación/vacío resueltos, sin atarse a
+ * expo-router ni a FlashList: `ListComponent` permite inyectar cualquiera
+ * (por defecto FlatList del propio React Native).
+ */
+export function List<T>({
+  data,
+  keyExtractor,
+  renderItem,
+  isLoading,
+  isLoadingMore = false,
+  isReady = true,
+  loadingText,
+  loadingMoreText,
+  onEndReached,
+  onEndReachedThreshold = 0.3,
+  onRefresh,
+  emptyTitle,
+  emptyDescription,
+  emptyIconName,
+  ListHeaderComponent,
+  ListFooterComponent,
+  contentContainerStyle,
+  containerStyle,
+  ListComponent = FlatList,
+  listProps,
+}: ListProps<T>) {
+  const colors = useColors();
+  const styles = useStyles();
+  const labels = useLabels();
+  const resolvedLoadingText = loadingText ?? labels.loading;
+  const resolvedLoadingMoreText = loadingMoreText ?? labels.loadingMore;
+
+  const renderFooter = useCallback(() => {
+    if (ListFooterComponent) {
+      return typeof ListFooterComponent === 'function' ? <ListFooterComponent /> : (ListFooterComponent as React.ReactElement);
+    }
+    if (!isLoadingMore) return null;
+    return (
+      <View style={styles.footerLoader}>
+        <Spinner text={resolvedLoadingMoreText} fullscreen={false} />
+      </View>
+    );
+  }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);
+
+  const renderEmpty = useCallback(() => {
+    if (isLoading) return null;
+    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;
+  }, [isLoading, emptyTitle, emptyDescription, emptyIconName]);
+
+  if (!isReady) {
+    return (
+      <View style={styles.container}>
+        <Spinner text={resolvedLoadingText} />
+      </View>
+    );
+  }
+
+  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>
+        </View>
+      )}
+
+      <ListComponent
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        contentContainerStyle={[styles.listContent, contentContainerStyle]}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={onEndReachedThreshold}
+        ListHeaderComponent={ListHeaderComponent}
+        ListFooterComponent={renderFooter}
+        ListEmptyComponent={renderEmpty}
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl refreshing={isLoading} onRefresh={onRefresh} colors={[colors.primary]} tintColor={colors.primary} />
+          ) : undefined
+        }
+        {...listProps}
+      />
+    </View>
+  );
+}