rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.tsx

@@ -0,0 +1,585 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { createStyles as createInputStyles, iconColorFor } from '../FieldFlowInput/styles';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import type { FieldFlowDateTimePickerProps } from './types';
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+function pad(n: number) {
+  return n < 10 ? `0${n}` : String(n);
+}
+
+function parseValue(value: string | null | undefined, mode: FieldFlowDateTimePickerProps['mode']): Date {
+  const now = new Date();
+  if (!value) return now;
+
+  if (mode === 'time') {
+    const [h, m] = value.split(':').map(Number);
+    const d = new Date(now);
+    d.setHours(h || 0, m || 0, 0, 0);
+    return d;
+  }
+
+  if (mode === 'datetime' && value.includes('T')) {
+    const [datePart, timePart] = value.split('T');
+    const [y, mo, day] = datePart.split('-').map(Number);
+    const [h, m] = (timePart || '00:00').split(':').map(Number);
+    return new Date(y, (mo || 1) - 1, day || 1, h || 0, m || 0);
+  }
+
+  const [y, mo, day] = value.split('-').map(Number);
+  if (!y) return now;
+  return new Date(y, (mo || 1) - 1, day || 1);
+}
+
+function toOutput(date: Date, mode: FieldFlowDateTimePickerProps['mode']): string {
+  const y = date.getFullYear();
+  const mo = pad(date.getMonth() + 1);
+  const d = pad(date.getDate());
+  const h = pad(date.getHours());
+  const mi = pad(date.getMinutes());
+  if (mode === 'time') return `${h}:${mi}`;
+  if (mode === 'datetime') return `${y}-${mo}-${d}T${h}:${mi}`;
+  return `${y}-${mo}-${d}`;
+}
+
+function formatTime(date: Date, hourCycle: 12 | 24): string {
+  if (hourCycle === 12) {
+    const h = date.getHours();
+    const ampm = h >= 12 ? 'PM' : 'AM';
+    const h12 = h % 12 || 12;
+    return `${h12}:${pad(date.getMinutes())} ${ampm}`;
+  }
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function defaultFormat(
+  date: Date,
+  mode: NonNullable<FieldFlowDateTimePickerProps['mode']>,
+  hourCycle: 12 | 24,
+): string {
+  if (mode === 'time') return formatTime(date, hourCycle);
+  const dateStr = `${MONTHS[date.getMonth()].slice(0, 3)} ${date.getDate()}, ${date.getFullYear()}`;
+  if (mode === 'date') return dateStr;
+  return `${dateStr} · ${formatTime(date, hourCycle)}`;
+}
+
+function daysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function startWeekday(year: number, month: number) {
+  return new Date(year, month, 1).getDay();
+}
+
+export function FieldFlowDateTimePicker({
+  mode = 'date',
+  value,
+  onChange,
+  label,
+  placeholder = 'Select',
+  helperText,
+  errorText,
+  hasError,
+  successText,
+  isSuccess,
+  disabled,
+  required,
+  clearable,
+  variant = 'outlined',
+  minimumDate,
+  maximumDate,
+  hourCycle = 24,
+  confirmLabel = 'Done',
+  cancelLabel = 'Cancel',
+  title,
+  leftIcon,
+  rightIcon,
+  iconSize = 18,
+  onLeftIconPress,
+  onRightIconPress,
+  formatDisplay,
+  renderTrigger,
+  containerStyle,
+  triggerStyle,
+  labelStyle,
+  helperStyle,
+  modalStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowDateTimePickerProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(() => parseValue(value, mode));
+  const [viewYear, setViewYear] = useState(draft.getFullYear());
+  const [viewMonth, setViewMonth] = useState(draft.getMonth());
+
+  const state = useFieldState({
+    isFocused: open,
+    hasError: Boolean(hasError || errorText),
+    isSuccess,
+    disabled,
+  });
+  const inputStyles = useMemo(
+    () => createInputStyles(theme, state, false, variant),
+    [theme, state, variant],
+  );
+  const styles = useMemo(() => createModalStyles(theme), [theme]);
+  const iconColor = iconColorFor(theme, state);
+
+  const display = useMemo(() => {
+    if (!value) return '';
+    const d = parseValue(value, mode);
+    return formatDisplay ? formatDisplay(d, mode) : defaultFormat(d, mode, hourCycle);
+  }, [value, mode, formatDisplay, hourCycle]);
+
+  const resolvedLeft =
+    leftIcon !== undefined
+      ? leftIcon
+      : mode === 'time'
+        ? 'clock'
+        : 'calendar';
+  const resolvedRight = rightIcon !== undefined ? rightIcon : 'chevronDown';
+
+  const min = minimumDate ? parseValue(minimumDate, 'date') : undefined;
+  const max = maximumDate ? parseValue(maximumDate, 'date') : undefined;
+
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    const d = parseValue(value, mode);
+    setDraft(d);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    setOpen(true);
+  }, [disabled, value, mode]);
+
+  const confirm = useCallback(() => {
+    onChange(toOutput(draft, mode));
+    setOpen(false);
+  }, [draft, mode, onChange]);
+
+  const isDayDisabled = (day: number) => {
+    const d = new Date(viewYear, viewMonth, day);
+    if (min && d < new Date(min.getFullYear(), min.getMonth(), min.getDate())) return true;
+    if (max && d > new Date(max.getFullYear(), max.getMonth(), max.getDate())) return true;
+    return false;
+  };
+
+  const calendarCells = useMemo(() => {
+    const total = daysInMonth(viewYear, viewMonth);
+    const start = startWeekday(viewYear, viewMonth);
+    const cells: Array<number | null> = [];
+    for (let i = 0; i < start; i++) cells.push(null);
+    for (let d = 1; d <= total; d++) cells.push(d);
+    while (cells.length % 7 !== 0) cells.push(null);
+    return cells;
+  }, [viewYear, viewMonth]);
+
+  const hours = hourCycle === 12
+    ? Array.from({ length: 12 }, (_, i) => i + 1)
+    : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: 60 }, (_, i) => i);
+
+  const trigger = renderTrigger ? (
+    renderTrigger({ open: openPicker, display, value })
+  ) : (
+    <View style={[inputStyles.wrapper, containerStyle]} testID={testID}>
+      {label && variant !== 'floating' ? (
+        <Text style={[inputStyles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+      <Pressable
+        onPress={openPicker}
+        disabled={disabled}
+        style={[inputStyles.inputContainer, triggerStyle]}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? 'Date picker'}
+        accessibilityState={{ disabled: Boolean(disabled) }}
+      >
+        {resolvedLeft ? (
+          <Pressable
+            onPress={onLeftIconPress}
+            disabled={!onLeftIconPress}
+            style={[inputStyles.iconSlot, inputStyles.iconSlotLeft]}
+            hitSlop={8}
+          >
+            {renderFieldFlowIcon(resolvedLeft, iconColor, iconSize)}
+          </Pressable>
+        ) : null}
+        <Text
+          style={[
+            inputStyles.input,
+            { paddingVertical: theme.spacing.paddingVertical },
+            !display && { color: theme.colors.placeholder },
+          ]}
+          numberOfLines={1}
+        >
+          {display || placeholder}
+        </Text>
+        {clearable && value && !disabled ? (
+          <Pressable
+            onPress={() => onChange('')}
+            style={[inputStyles.iconSlot, inputStyles.iconSlotRight]}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel="Clear"
+          >
+            {renderFieldFlowIcon('clear', iconColor, iconSize)}
+          </Pressable>
+        ) : resolvedRight ? (
+          <Pressable
+            onPress={onRightIconPress ?? openPicker}
+            style={[inputStyles.iconSlot, inputStyles.iconSlotRight]}
+            hitSlop={8}
+          >
+            {renderFieldFlowIcon(resolvedRight, iconColor, iconSize)}
+          </Pressable>
+        ) : null}
+      </Pressable>
+      {(helperText || errorText || successText) && (
+        <View style={inputStyles.footerRow}>
+          {errorText ? (
+            <Text style={[inputStyles.errorText, helperStyle]}>{errorText}</Text>
+          ) : successText ? (
+            <Text style={[inputStyles.successText, helperStyle]}>{successText}</Text>
+          ) : helperText ? (
+            <Text style={[inputStyles.helperText, helperStyle]}>{helperText}</Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+
+  const showDate = mode === 'date' || mode === 'datetime';
+  const showTime = mode === 'time' || mode === 'datetime';
+
+  return (
+    <>
+      {trigger}
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+          <Pressable style={[styles.sheet, modalStyle]} onPress={e => e.stopPropagation()}>
+            <View style={styles.header}>
+              <Text style={styles.title}>{title ?? label ?? 'Select'}</Text>
+              <Pressable onPress={() => setOpen(false)} hitSlop={8}>
+                {renderFieldFlowIcon('clear', theme.colors.icon, 18)}
+              </Pressable>
+            </View>
+
+            {showDate ? (
+              <View>
+                <View style={styles.monthRow}>
+                  <Pressable
+                    onPress={() => {
+                      if (viewMonth === 0) {
+                        setViewMonth(11);
+                        setViewYear(y => y - 1);
+                      } else setViewMonth(m => m - 1);
+                    }}
+                    hitSlop={8}
+                  >
+                    {renderFieldFlowIcon('chevronLeft', theme.colors.icon, 20)}
+                  </Pressable>
+                  <Text style={styles.monthLabel}>
+                    {MONTHS[viewMonth]} {viewYear}
+                  </Text>
+                  <Pressable
+                    onPress={() => {
+                      if (viewMonth === 11) {
+                        setViewMonth(0);
+                        setViewYear(y => y + 1);
+                      } else setViewMonth(m => m + 1);
+                    }}
+                    hitSlop={8}
+                  >
+                    {renderFieldFlowIcon('chevronRight', theme.colors.icon, 20)}
+                  </Pressable>
+                </View>
+
+                <View style={styles.weekRow}>
+                  {WEEKDAYS.map(d => (
+                    <Text key={d} style={styles.weekday}>
+                      {d}
+                    </Text>
+                  ))}
+                </View>
+
+                <View style={styles.grid}>
+                  {calendarCells.map((day, idx) => {
+                    if (day == null) return <View key={`e-${idx}`} style={styles.dayCell} />;
+                    const selected =
+                      draft.getFullYear() === viewYear &&
+                      draft.getMonth() === viewMonth &&
+                      draft.getDate() === day;
+                    const dayDisabled = isDayDisabled(day);
+                    return (
+                      <Pressable
+                        key={`${viewYear}-${viewMonth}-${day}`}
+                        style={[styles.dayCell, selected && styles.daySelected, dayDisabled && styles.dayDisabled]}
+                        disabled={dayDisabled}
+                        onPress={() => {
+                          const next = new Date(draft);
+                          next.setFullYear(viewYear, viewMonth, day);
+                          setDraft(next);
+                        }}
+                      >
+                        <Text style={[styles.dayText, selected && styles.dayTextSelected]}>{day}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              </View>
+            ) : null}
+
+            {showTime ? (
+              <View style={styles.timeRow}>
+                <ScrollView style={styles.timeCol} showsVerticalScrollIndicator={false}>
+                  {hours.map(h => {
+                    const currentH = draft.getHours();
+                    const selected =
+                      hourCycle === 12
+                        ? (currentH % 12 || 12) === h
+                        : currentH === h;
+                    return (
+                      <Pressable
+                        key={`h-${h}`}
+                        style={[styles.timeItem, selected && styles.timeItemSelected]}
+                        onPress={() => {
+                          const next = new Date(draft);
+                          if (hourCycle === 12) {
+                            const isPM = draft.getHours() >= 12;
+                            let hour24 = h % 12;
+                            if (isPM) hour24 += 12;
+                            next.setHours(hour24);
+                          } else {
+                            next.setHours(h);
+                          }
+                          setDraft(next);
+                        }}
+                      >
+                        <Text style={[styles.timeText, selected && styles.timeTextSelected]}>{pad(h)}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </ScrollView>
+                <Text style={styles.timeColon}>:</Text>
+                <ScrollView style={styles.timeCol} showsVerticalScrollIndicator={false}>
+                  {minutes.map(m => {
+                    const selected = draft.getMinutes() === m;
+                    return (
+                      <Pressable
+                        key={`m-${m}`}
+                        style={[styles.timeItem, selected && styles.timeItemSelected]}
+                        onPress={() => {
+                          const next = new Date(draft);
+                          next.setMinutes(m);
+                          setDraft(next);
+                        }}
+                      >
+                        <Text style={[styles.timeText, selected && styles.timeTextSelected]}>{pad(m)}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </ScrollView>
+                {hourCycle === 12 ? (
+                  <View style={styles.ampmCol}>
+                    {(['AM', 'PM'] as const).map(period => {
+                      const isPM = draft.getHours() >= 12;
+                      const selected = period === 'PM' ? isPM : !isPM;
+                      return (
+                        <Pressable
+                          key={period}
+                          style={[styles.timeItem, selected && styles.timeItemSelected]}
+                          onPress={() => {
+                            const next = new Date(draft);
+                            const h = next.getHours();
+                            if (period === 'AM' && h >= 12) next.setHours(h - 12);
+                            if (period === 'PM' && h < 12) next.setHours(h + 12);
+                            setDraft(next);
+                          }}
+                        >
+                          <Text style={[styles.timeText, selected && styles.timeTextSelected]}>{period}</Text>
+                        </Pressable>
+                      );
+                    })}
+                  </View>
+                ) : null}
+              </View>
+            ) : null}
+
+            <View style={styles.actions}>
+              <Pressable onPress={() => setOpen(false)} style={styles.btnGhost}>
+                <Text style={styles.btnGhostText}>{cancelLabel}</Text>
+              </Pressable>
+              <Pressable onPress={confirm} style={styles.btnPrimary}>
+                <Text style={styles.btnPrimaryText}>{confirmLabel}</Text>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+function createModalStyles(theme: ReturnType<typeof useFieldFlowTheme>) {
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0,0,0,0.45)',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    sheet: {
+      backgroundColor: theme.colors.background,
+      borderRadius: theme.spacing.borderRadius + 4,
+      padding: 16,
+      maxHeight: '85%',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 12,
+    },
+    title: {
+      fontSize: theme.typography.fontSize + 2,
+      fontWeight: '600',
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    monthRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    monthLabel: {
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+    },
+    weekRow: {
+      flexDirection: 'row',
+      marginBottom: 4,
+    },
+    weekday: {
+      flex: 1,
+      textAlign: 'center',
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      fontWeight: '500',
+    },
+    grid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    },
+    dayCell: {
+      width: `${100 / 7}%`,
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: theme.spacing.borderRadius,
+    },
+    daySelected: {
+      backgroundColor: theme.colors.borderFocused,
+    },
+    dayDisabled: {
+      opacity: 0.3,
+    },
+    dayText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+    },
+    dayTextSelected: {
+      color: '#FFFFFF',
+      fontWeight: '600',
+    },
+    timeRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 12,
+      maxHeight: 160,
+    },
+    timeCol: {
+      maxHeight: 160,
+      width: 64,
+    },
+    ampmCol: {
+      marginLeft: 8,
+      justifyContent: 'center',
+      gap: 8,
+    },
+    timeColon: {
+      fontSize: 22,
+      fontWeight: '700',
+      color: theme.colors.text,
+      marginHorizontal: 6,
+    },
+    timeItem: {
+      paddingVertical: 8,
+      alignItems: 'center',
+      borderRadius: theme.spacing.borderRadius,
+    },
+    timeItemSelected: {
+      backgroundColor: theme.colors.borderFocused,
+    },
+    timeText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+    },
+    timeTextSelected: {
+      color: '#FFFFFF',
+      fontWeight: '600',
+    },
+    actions: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      gap: 12,
+      marginTop: 16,
+    },
+    btnGhost: {
+      paddingHorizontal: 14,
+      paddingVertical: 10,
+    },
+    btnGhostText: {
+      color: theme.colors.label,
+      fontSize: theme.typography.fontSize,
+      fontWeight: '500',
+    },
+    btnPrimary: {
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: theme.spacing.borderRadius,
+    },
+    btnPrimaryText: {
+      color: '#FFFFFF',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+    },
+  });
+}

package/src/components/FieldFlowDateTimePicker/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowDateTimePicker } from './FieldFlowDateTimePicker';
+export type { FieldFlowDateTimePickerProps, FieldFlowDateTimeMode } from './types';

package/src/components/FieldFlowDateTimePicker/types.ts

@@ -0,0 +1,57 @@
+import type React from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DeepPartial, FieldFlowTheme, FieldFlowVariant } from '../../types';
+import type { FieldFlowIconSource } from '../../icons';
+
+export type FieldFlowDateTimeMode = 'date' | 'time' | 'datetime';
+
+export interface FieldFlowDateTimePickerProps {
+  mode?: FieldFlowDateTimeMode;
+  /** ISO date string (YYYY-MM-DD), time (HH:mm), or datetime (YYYY-MM-DDTHH:mm). */
+  value?: string | null;
+  onChange: (value: string) => void;
+
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  hasError?: boolean;
+  successText?: string;
+  isSuccess?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  clearable?: boolean;
+  variant?: FieldFlowVariant;
+
+  /** Min selectable date (YYYY-MM-DD). */
+  minimumDate?: string;
+  /** Max selectable date (YYYY-MM-DD). */
+  maximumDate?: string;
+  /** 12h or 24h clock for time mode. Default: 24. */
+  hourCycle?: 12 | 24;
+  /** Confirm button label. Default: "Done". */
+  confirmLabel?: string;
+  /** Cancel / dismiss label. Default: "Cancel". */
+  cancelLabel?: string;
+  /** Modal title. Defaults to `label`. */
+  title?: string;
+
+  leftIcon?: FieldFlowIconSource;
+  rightIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  onLeftIconPress?: () => void;
+  onRightIconPress?: () => void;
+
+  /** Custom format for the trigger display. Receives the parsed Date. */
+  formatDisplay?: (date: Date, mode: FieldFlowDateTimeMode) => string;
+  /** Render a fully custom trigger; receives open() to show the picker. */
+  renderTrigger?: (helpers: { open: () => void; display: string; value: string | null | undefined }) => React.ReactNode;
+
+  containerStyle?: ViewStyle;
+  triggerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  modalStyle?: ViewStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}