rn-inputforge 0.4.0 → 0.5.1

package/src/components/FieldFlowKeyboardToolbar/FieldFlowKeyboardToolbar.tsx

@@ -0,0 +1,150 @@
+import React, { useMemo } from 'react';
+import {
+  InputAccessoryView,
+  Keyboard,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowKeyboardToolbarProps {
+  /** Must match `inputAccessoryViewID` on each TextInput (iOS). */
+  nativeID: string;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  onDone?: () => void;
+  canPrevious?: boolean;
+  canNext?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  doneLabel?: string;
+  /** Also render a floating bar on Android (above keyboard region via absolute layout in parent). */
+  androidFloating?: boolean;
+  visible?: boolean;
+  containerStyle?: ViewStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Prev / Next / Done accessory above the keyboard.
+ * iOS: native `InputAccessoryView`. Android: optional floating bar (`androidFloating`).
+ * Pair with `useKeyboardManager` focus helpers.
+ */
+export function FieldFlowKeyboardToolbar({
+  nativeID,
+  onPrevious,
+  onNext,
+  onDone,
+  canPrevious = true,
+  canNext = true,
+  previousLabel = 'Previous',
+  nextLabel = 'Next',
+  doneLabel = 'Done',
+  androidFloating = true,
+  visible = true,
+  containerStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowKeyboardToolbarProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const bar = (
+    <View style={[styles.bar, containerStyle]} testID={testID}>
+      <Pressable
+        onPress={onPrevious}
+        disabled={!canPrevious || !onPrevious}
+        style={[styles.btn, (!canPrevious || !onPrevious) && styles.btnDisabled]}
+        accessibilityRole="button"
+        accessibilityLabel={previousLabel}
+      >
+        <Text style={styles.btnText}>{previousLabel}</Text>
+      </Pressable>
+      <Pressable
+        onPress={onNext}
+        disabled={!canNext || !onNext}
+        style={[styles.btn, (!canNext || !onNext) && styles.btnDisabled]}
+        accessibilityRole="button"
+        accessibilityLabel={nextLabel}
+      >
+        <Text style={styles.btnText}>{nextLabel}</Text>
+      </Pressable>
+      <View style={{ flex: 1 }} />
+      <Pressable
+        onPress={() => {
+          onDone?.();
+          Keyboard.dismiss();
+        }}
+        style={styles.done}
+        accessibilityRole="button"
+        accessibilityLabel={doneLabel}
+      >
+        <Text style={styles.doneText}>{doneLabel}</Text>
+      </Pressable>
+    </View>
+  );
+
+  if (!visible) return null;
+
+  if (Platform.OS === 'ios') {
+    return (
+      <InputAccessoryView nativeID={nativeID} backgroundColor={theme.colors.backgroundDisabled}>
+        {bar}
+      </InputAccessoryView>
+    );
+  }
+
+  if (!androidFloating) return null;
+  return <View style={styles.androidWrap}>{bar}</View>;
+}
+
+/** Stable default accessory id for FieldFlow forms. */
+export const FIELD_FLOW_KEYBOARD_TOOLBAR_ID = 'fieldflow-keyboard-toolbar';
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    androidWrap: {
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: theme.colors.border,
+    },
+    bar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: theme.colors.border,
+      gap: 4,
+    },
+    btn: { paddingHorizontal: 10, paddingVertical: 6 },
+    btnDisabled: { opacity: 0.35 },
+    btnText: {
+      fontSize: theme.typography.helperFontSize + 1,
+      color: theme.colors.borderFocused,
+      fontWeight: '600',
+    },
+    done: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 8,
+      backgroundColor: theme.colors.borderFocused,
+    },
+    doneText: {
+      fontSize: theme.typography.helperFontSize + 1,
+      color: '#fff',
+      fontWeight: '700',
+    },
+  });
+}

package/src/components/FieldFlowKeyboardToolbar/index.ts

@@ -0,0 +1,5 @@
+export {
+  FieldFlowKeyboardToolbar,
+  FIELD_FLOW_KEYBOARD_TOOLBAR_ID,
+} from './FieldFlowKeyboardToolbar';
+export type { FieldFlowKeyboardToolbarProps } from './FieldFlowKeyboardToolbar';

package/src/components/FieldFlowNumberStepper/FieldFlowNumberStepper.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from 'react';
+import { Pressable, 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';
+
+export interface FieldFlowNumberStepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  formatValue?: (value: number) => string;
+  /** Custom − button content. */
+  renderDecrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom + button content. */
+  renderIncrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom center value display. */
+  renderValue?: (value: number) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowNumberStepper({
+  value,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  formatValue,
+  renderDecrease,
+  renderIncrease,
+  renderValue,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowNumberStepperProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, Boolean(errorText), Boolean(disabled)), [theme, errorText, disabled]);
+
+  const dec = () => {
+    if (disabled) return;
+    onChange(Math.max(min, Number((value - step).toFixed(6))));
+  };
+  const inc = () => {
+    if (disabled) return;
+    onChange(Math.min(max, Number((value + step).toFixed(6))));
+  };
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.row}>
+        {renderDecrease ? (
+          renderDecrease({ disabled: Boolean(disabled) || value <= min, onPress: dec })
+        ) : (
+          <Pressable
+            style={[styles.btn, value <= min && styles.btnDisabled]}
+            onPress={dec}
+            disabled={disabled || value <= min}
+            accessibilityLabel="Decrease"
+          >
+            {renderFieldFlowIcon('minus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+        {renderValue ? (
+          renderValue(value)
+        ) : (
+          <Text style={styles.value}>{formatValue ? formatValue(value) : String(value)}</Text>
+        )}
+        {renderIncrease ? (
+          renderIncrease({ disabled: Boolean(disabled) || value >= max, onPress: inc })
+        ) : (
+          <Pressable
+            style={[styles.btn, value >= max && styles.btnDisabled]}
+            onPress={inc}
+            disabled={disabled || value >= max}
+            accessibilityLabel="Increase"
+          >
+            {renderFieldFlowIcon('plus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+      </View>
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, hasError: boolean, disabled: boolean) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap * 2, opacity: disabled ? 0.6 : 1 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      borderWidth: hasError ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: hasError ? theme.colors.borderError : theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.background,
+    },
+    btn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    btnDisabled: { opacity: 0.4 },
+    value: {
+      minWidth: 56,
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+      paddingHorizontal: 8,
+    },
+    helper: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.label },
+    error: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.error },
+  });
+}

package/src/components/FieldFlowNumberStepper/index.ts

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

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';