rn-inputforge 0.3.1 → 0.4.0

package/src/components/FieldFlowOTP/FieldFlowOTP.tsx

@@ -0,0 +1,305 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  NativeSyntheticEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextInputKeyPressEventData,
+  View,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { borderColorFor, labelColorFor } from '../FieldFlowInput/styles';
+import { digitsOnly } from '../../utils/masks';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import type { FieldFlowOTPProps } from './types';
+
+export function FieldFlowOTP({
+  length = 6,
+  value,
+  onChangeText,
+  onComplete,
+  label,
+  helperText,
+  errorText,
+  hasError,
+  successText,
+  isSuccess,
+  disabled,
+  required,
+  secure = false,
+  autoFocus = true,
+  leftIcon = 'otp',
+  rightIcon,
+  iconSize = 18,
+  onLeftIconPress,
+  onRightIconPress,
+  cellGap,
+  cellSize,
+  containerStyle,
+  rowStyle,
+  cellStyle,
+  cellFocusedStyle,
+  cellTextStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+  renderCell,
+}: FieldFlowOTPProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState('');
+  const code = (isControlled ? value ?? '' : internal).slice(0, length);
+  const digits = code.padEnd(length, ' ').split('').map(c => (c === ' ' ? '' : c));
+
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(autoFocus ? 0 : null);
+  const refs = useRef<Array<TextInput | null>>([]);
+
+  const state = useFieldState({
+    isFocused: focusedIndex !== null,
+    hasError: Boolean(hasError || errorText),
+    isSuccess,
+    disabled,
+  });
+
+  const styles = useMemo(
+    () => createStyles(theme, state, cellGap ?? theme.spacing.gap, cellSize),
+    [theme, state, cellGap, cellSize],
+  );
+  const iconColor = state === 'focused' ? theme.colors.iconFocused : theme.colors.icon;
+
+  const commit = useCallback(
+    (next: string) => {
+      const clipped = digitsOnly(next).slice(0, length);
+      if (!isControlled) setInternal(clipped);
+      onChangeText?.(clipped);
+      if (clipped.length === length) onComplete?.(clipped);
+    },
+    [isControlled, length, onChangeText, onComplete],
+  );
+
+  const focusAt = useCallback(
+    (index: number) => {
+      const clamped = Math.max(0, Math.min(length - 1, index));
+      refs.current[clamped]?.focus();
+      setFocusedIndex(clamped);
+    },
+    [length],
+  );
+
+  const handleChangeAt = useCallback(
+    (index: number, text: string) => {
+      if (disabled) return;
+      const incoming = digitsOnly(text);
+      if (incoming.length > 1) {
+        commit(incoming);
+        focusAt(Math.min(incoming.length, length) - 1);
+        return;
+      }
+      const next = digits.slice();
+      next[index] = incoming.slice(-1);
+      commit(next.join(''));
+      if (incoming && index < length - 1) focusAt(index + 1);
+    },
+    [commit, digits, disabled, focusAt, length],
+  );
+
+  const handleKeyPress = useCallback(
+    (index: number, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      if (e.nativeEvent.key !== 'Backspace') return;
+      if (digits[index]) {
+        const next = digits.slice();
+        next[index] = '';
+        commit(next.join(''));
+        return;
+      }
+      if (index > 0) {
+        const next = digits.slice();
+        next[index - 1] = '';
+        commit(next.join(''));
+        focusAt(index - 1);
+      }
+    },
+    [commit, digits, focusAt],
+  );
+
+  return (
+    <View
+      style={[styles.wrapper, containerStyle]}
+      testID={testID}
+      accessibilityLabel={label ?? 'One-time code'}
+    >
+      {(label || leftIcon || rightIcon) && (
+        <View style={styles.labelRow}>
+          {leftIcon ? (
+            <Pressable onPress={onLeftIconPress} disabled={!onLeftIconPress} hitSlop={8} style={styles.labelIcon}>
+              {renderFieldFlowIcon(leftIcon, iconColor, iconSize)}
+            </Pressable>
+          ) : null}
+          {label ? (
+            <Text style={[styles.label, labelStyle]}>
+              {label}
+              {required ? ' *' : ''}
+            </Text>
+          ) : (
+            <View style={{ flex: 1 }} />
+          )}
+          {rightIcon ? (
+            <Pressable onPress={onRightIconPress} disabled={!onRightIconPress} hitSlop={8} style={styles.labelIcon}>
+              {renderFieldFlowIcon(rightIcon, iconColor, iconSize)}
+            </Pressable>
+          ) : null}
+        </View>
+      )}
+
+      <View style={[styles.row, rowStyle]}>
+        {digits.map((digit, index) => {
+          const isFocused = focusedIndex === index;
+          if (renderCell) {
+            return (
+              <View key={index}>
+                {renderCell({
+                  index,
+                  digit,
+                  isFocused,
+                  onChangeText: text => handleChangeAt(index, text),
+                })}
+              </View>
+            );
+          }
+          return (
+            <Pressable
+              key={index}
+              onPress={() => !disabled && focusAt(index)}
+              style={[
+                styles.cell,
+                {
+                  borderColor: borderColorFor(theme, isFocused ? 'focused' : state),
+                  borderWidth: isFocused
+                    ? theme.spacing.borderWidthFocused
+                    : theme.spacing.borderWidth,
+                },
+                cellStyle,
+                isFocused ? cellFocusedStyle : null,
+              ]}
+            >
+              <TextInput
+                ref={r => {
+                  refs.current[index] = r;
+                }}
+                value={digit}
+                onChangeText={text => handleChangeAt(index, text)}
+                onKeyPress={e => handleKeyPress(index, e)}
+                onFocus={() => setFocusedIndex(index)}
+                onBlur={() => setFocusedIndex(prev => (prev === index ? null : prev))}
+                editable={!disabled}
+                keyboardType="number-pad"
+                textContentType="oneTimeCode"
+                autoComplete="sms-otp"
+                secureTextEntry={secure}
+                maxLength={length}
+                selectTextOnFocus
+                autoFocus={autoFocus && index === 0}
+                style={[styles.cellInput, cellTextStyle]}
+                caretHidden
+                accessibilityLabel={`Digit ${index + 1} of ${length}`}
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {(helperText || errorText || successText) && (
+        <View style={styles.footer}>
+          {errorText ? (
+            <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+          ) : successText ? (
+            <Text style={[styles.successText, helperStyle]}>{successText}</Text>
+          ) : helperText ? (
+            <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function createStyles(
+  theme: ReturnType<typeof useFieldFlowTheme>,
+  state: ReturnType<typeof useFieldState>,
+  gap: number,
+  cellSize?: number,
+) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: theme.spacing.gap / 1.5,
+      gap: theme.spacing.gap,
+    },
+    labelIcon: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    label: {
+      flex: 1,
+      fontSize: theme.typography.labelFontSize,
+      color: labelColorFor(theme, state),
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    row: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap,
+    },
+    cell: {
+      flex: cellSize ? undefined : 1,
+      width: cellSize,
+      height: cellSize,
+      aspectRatio: cellSize ? undefined : 0.9,
+      maxWidth: cellSize ?? 56,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: state === 'disabled' ? theme.colors.backgroundDisabled : theme.colors.background,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    cellInput: {
+      width: '100%',
+      height: '100%',
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize + 4,
+      fontWeight: '600',
+      color: theme.colors.text,
+      padding: 0,
+      fontFamily: theme.typography.fontFamily,
+    },
+    footer: {
+      marginTop: theme.spacing.gap / 1.5,
+    },
+    helperText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+    errorText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+    },
+    successText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.success,
+    },
+  });
+}

package/src/components/FieldFlowOTP/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowOTP } from './FieldFlowOTP';
+export type { FieldFlowOTPProps } from './types';

package/src/components/FieldFlowOTP/types.ts

@@ -0,0 +1,57 @@
+import type React from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+import type { FieldFlowIconSource } from '../../icons';
+
+export interface FieldFlowOTPProps {
+  /** Number of digit cells. Default: 6. */
+  length?: number;
+  value?: string;
+  onChangeText?: (value: string) => void;
+  /** Fired once every cell is filled. */
+  onComplete?: (value: string) => void;
+
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  hasError?: boolean;
+  successText?: string;
+  isSuccess?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /** Mask digits (password-style). Default: false. */
+  secure?: boolean;
+  /** Auto-focus the first empty cell on mount. Default: true. */
+  autoFocus?: boolean;
+
+  /** Icon shown before the label / row. Built-in name or custom node. */
+  leftIcon?: FieldFlowIconSource;
+  rightIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  onLeftIconPress?: () => void;
+  onRightIconPress?: () => void;
+
+  /** Gap between cells. */
+  cellGap?: number;
+  /** Override cell size (width/height). */
+  cellSize?: number;
+
+  containerStyle?: ViewStyle;
+  rowStyle?: ViewStyle;
+  cellStyle?: ViewStyle;
+  cellFocusedStyle?: ViewStyle;
+  cellTextStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+
+  /** Render a custom cell. */
+  renderCell?: (args: {
+    index: number;
+    digit: string;
+    isFocused: boolean;
+    onChangeText: (text: string) => void;
+  }) => React.ReactNode;
+}

package/src/components/FieldFlowRadio/FieldFlowRadio.tsx

@@ -0,0 +1,215 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon, type FieldFlowIconSource } from '../../icons';
+import type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowRadioProps {
+  options: FieldFlowOption[];
+  value?: string | null;
+  onChange: (value: string) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  direction?: 'vertical' | 'horizontal';
+  /** Leading icon next to the group label. */
+  leftIcon?: FieldFlowIconSource;
+  /** Override selected indicator (default filled radio). */
+  selectedIcon?: FieldFlowIconSource;
+  /** Override unselected indicator. */
+  unselectedIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  selectedColor?: string;
+  containerStyle?: ViewStyle;
+  optionStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+  /** Fully custom option renderer. */
+  renderOption?: (args: {
+    option: FieldFlowOption;
+    selected: boolean;
+    disabled: boolean;
+    onPress: () => void;
+  }) => ReactNode;
+}
+
+export function FieldFlowRadio({
+  options,
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  direction = 'vertical',
+  leftIcon,
+  selectedIcon = 'radioFilled',
+  unselectedIcon = 'radio',
+  iconSize = 20,
+  selectedColor,
+  containerStyle,
+  optionStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+  renderOption,
+}: FieldFlowRadioProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(
+    () => createStyles(theme, Boolean(errorText), Boolean(disabled), direction),
+    [theme, errorText, disabled, direction],
+  );
+  const active = selectedColor ?? theme.colors.borderFocused;
+
+  return (
+    <View
+      style={[styles.wrapper, containerStyle]}
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={label}
+    >
+      {(label || leftIcon) && (
+        <View style={styles.labelRow}>
+          {leftIcon ? renderFieldFlowIcon(leftIcon, theme.colors.icon, 18) : null}
+          {label ? (
+            <Text style={[styles.groupLabel, labelStyle]}>
+              {label}
+              {required ? ' *' : ''}
+            </Text>
+          ) : null}
+        </View>
+      )}
+
+      <View style={styles.options}>
+        {options.map(option => {
+          const selected = value === option.value;
+          const itemDisabled = Boolean(disabled || option.disabled);
+          const onPress = () => onChange(option.value);
+
+          if (renderOption) {
+            return (
+              <View key={option.value}>
+                {renderOption({ option, selected, disabled: itemDisabled, onPress })}
+              </View>
+            );
+          }
+
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => !itemDisabled && onPress()}
+              disabled={itemDisabled}
+              style={[styles.optionRow, itemDisabled && styles.optionDisabled, optionStyle]}
+              accessibilityRole="radio"
+              accessibilityState={{ selected, disabled: itemDisabled }}
+              accessibilityLabel={option.label}
+              hitSlop={4}
+            >
+              {renderFieldFlowIcon(
+                selected ? selectedIcon : unselectedIcon,
+                selected ? active : errorText ? theme.colors.borderError : theme.colors.border,
+                iconSize,
+              )}
+              {option.icon ? (
+                <View style={styles.optionIcon}>
+                  {renderFieldFlowIcon(option.icon, theme.colors.icon, 18)}
+                </View>
+              ) : null}
+              <View style={styles.optionTextCol}>
+                <Text style={styles.optionLabel}>{option.label}</Text>
+                {option.description ? (
+                  <Text style={styles.optionDescription}>{option.description}</Text>
+                ) : null}
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {errorText ? (
+        <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(
+  theme: FieldFlowTheme,
+  hasError: boolean,
+  disabled: boolean,
+  direction: 'vertical' | 'horizontal',
+) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      marginBottom: theme.spacing.gap,
+    },
+    groupLabel: {
+      fontSize: theme.typography.labelFontSize,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    options: {
+      flexDirection: direction === 'horizontal' ? 'row' : 'column',
+      flexWrap: direction === 'horizontal' ? 'wrap' : 'nowrap',
+      gap: theme.spacing.gap * 1.5,
+    },
+    optionRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: theme.spacing.gap,
+      minWidth: direction === 'horizontal' ? '40%' : undefined,
+    },
+    optionDisabled: {
+      opacity: 0.5,
+    },
+    optionIcon: {
+      marginTop: 1,
+    },
+    optionTextCol: {
+      flex: 1,
+    },
+    optionLabel: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    optionDescription: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginTop: 2,
+    },
+    helperText: {
+      marginTop: theme.spacing.gap / 1.5,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+    errorText: {
+      marginTop: theme.spacing.gap / 1.5,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+    },
+  });
+}

package/src/components/FieldFlowRadio/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowRadio } from './FieldFlowRadio';
+export type { FieldFlowRadioProps } from './FieldFlowRadio';