rn-inputforge 0.3.1 → 0.5.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/FieldFlowPasswordStrength/FieldFlowPasswordStrength.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+import {
+  DEFAULT_PASSWORD_RULES,
+  evaluatePasswordStrength,
+  PASSWORD_STRENGTH_COLORS,
+  type PasswordStrengthLevel,
+  type PasswordStrengthRule,
+} from '../../utils/passwordStrength';
+
+export interface FieldFlowPasswordStrengthProps {
+  password: string;
+  /** Override the default rule checklist. */
+  rules?: PasswordStrengthRule[];
+  /** Show the checklist under the bar. Default: true. */
+  showRules?: boolean;
+  /** Hide entirely when password is empty. Default: true. */
+  hideWhenEmpty?: boolean;
+  /** Override bar colors per level. */
+  colors?: Partial<Record<Exclude<PasswordStrengthLevel, 'empty'>, string>>;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  ruleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Password strength meter + optional rule checklist.
+ * Pair with `FieldFlowInput type="password"` or use via `showStrength` on the input.
+ */
+export function FieldFlowPasswordStrength({
+  password,
+  rules,
+  showRules = true,
+  hideWhenEmpty = true,
+  colors,
+  containerStyle,
+  labelStyle,
+  ruleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowPasswordStrengthProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const result = useMemo(() => evaluatePasswordStrength(password, rules), [password, rules]);
+
+  if (hideWhenEmpty && result.level === 'empty') return null;
+
+  const barColor =
+    result.level === 'empty'
+      ? theme.colors.border
+      : colors?.[result.level] ?? PASSWORD_STRENGTH_COLORS[result.level];
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID} accessibilityRole="summary">
+      <View style={styles.header}>
+        <View style={styles.track}>
+          <View style={[styles.fill, { width: `${Math.round(result.progress * 100)}%`, backgroundColor: barColor }]} />
+        </View>
+        {result.label ? (
+          <Text style={[styles.levelLabel, { color: barColor }, labelStyle]}>{result.label}</Text>
+        ) : null}
+      </View>
+
+      {showRules ? (
+        <View style={styles.rules}>
+          {(rules ?? DEFAULT_PASSWORD_RULES).map(rule => {
+            const ok = result.passed.some(p => p.id === rule.id);
+            return (
+              <View key={rule.id} style={styles.ruleRow}>
+                {renderFieldFlowIcon(ok ? 'check' : 'clear', ok ? theme.colors.success : theme.colors.placeholder, 12)}
+                <Text
+                  style={[
+                    styles.ruleText,
+                    ok ? styles.rulePassed : styles.ruleFailed,
+                    ruleStyle,
+                  ]}
+                >
+                  {rule.label}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrapper: {
+      marginTop: theme.spacing.gap,
+      marginBottom: theme.spacing.gap,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    track: {
+      flex: 1,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: theme.colors.border,
+      overflow: 'hidden',
+    },
+    fill: {
+      height: '100%',
+      borderRadius: 3,
+    },
+    levelLabel: {
+      fontSize: theme.typography.helperFontSize,
+      fontWeight: '600',
+      minWidth: 48,
+      textAlign: 'right',
+      fontFamily: theme.typography.fontFamily,
+    },
+    rules: {
+      marginTop: theme.spacing.gap,
+      gap: 4,
+    },
+    ruleRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    ruleText: {
+      fontSize: theme.typography.helperFontSize,
+      fontFamily: theme.typography.fontFamily,
+    },
+    rulePassed: {
+      color: theme.colors.success,
+    },
+    ruleFailed: {
+      color: theme.colors.placeholder,
+    },
+  });
+}

package/src/components/FieldFlowPasswordStrength/index.ts

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