rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowSlider/FieldFlowSlider.tsx

@@ -0,0 +1,190 @@
+import React, { useMemo, useRef, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  PanResponder,
+  StyleSheet,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowSliderProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Show numeric value. Default: true. */
+  showValue?: boolean;
+  formatValue?: (value: number) => string;
+  /** Custom thumb node. Positioned for you via `style`. */
+  renderThumb?: (ctx: {
+    value: number;
+    ratio: number;
+    style: ViewStyle;
+  }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function snap(n: number, min: number, max: number, step: number) {
+  const raw = Math.round((n - min) / step) * step + min;
+  return clamp(Number(raw.toFixed(6)), min, max);
+}
+
+export function FieldFlowSlider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  showValue = true,
+  formatValue,
+  renderThumb,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSliderProps) {
+  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 [width, setWidth] = useState(0);
+  const widthRef = useRef(0);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const ratio = max === min ? 0 : (clamp(value, min, max) - min) / (max - min);
+
+  const updateFromX = (x: number) => {
+    if (widthRef.current <= 0 || disabled) return;
+    const r = clamp(x / widthRef.current, 0, 1);
+    const next = snap(min + r * (max - min), min, max, step);
+    if (next !== valueRef.current) onChange(next);
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: e => updateFromX(e.nativeEvent.locationX),
+      onPanResponderMove: e => updateFromX(e.nativeEvent.locationX),
+    }),
+  ).current;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    widthRef.current = w;
+    setWidth(w);
+  };
+
+  const display = formatValue ? formatValue(value) : String(value);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      <View style={styles.header}>
+        {label ? (
+          <Text style={[styles.label, labelStyle]}>
+            {label}
+            {required ? ' *' : ''}
+          </Text>
+        ) : (
+          <View />
+        )}
+        {showValue ? <Text style={styles.value}>{display}</Text> : null}
+      </View>
+
+      <View style={styles.track} onLayout={onLayout} {...pan.panHandlers}>
+        <View style={styles.trackBg} />
+        <View style={[styles.fill, { width: Math.max(0, ratio * width) }]} />
+        {renderThumb ? (
+          renderThumb({
+            value,
+            ratio,
+            style: { ...styles.thumb, left: Math.max(0, ratio * width - 10) },
+          })
+        ) : (
+          <View style={[styles.thumb, { left: Math.max(0, ratio * width - 10) }]} />
+        )}
+      </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 },
+    header: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: theme.spacing.gap },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    value: { fontSize: theme.typography.fontSize, fontWeight: '600', color: theme.colors.text },
+    track: {
+      height: 28,
+      justifyContent: 'center',
+    },
+    trackBg: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    fill: {
+      position: 'absolute',
+      left: 0,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: theme.colors.borderFocused,
+    },
+    thumb: {
+      position: 'absolute',
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      backgroundColor: theme.colors.background,
+      borderWidth: 2,
+      borderColor: theme.colors.borderFocused,
+      top: 4,
+      shadowColor: '#000',
+      shadowOpacity: 0.12,
+      shadowRadius: 3,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 2,
+    },
+    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/FieldFlowSlider/index.ts

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

package/src/components/FieldFlowStepper/FieldFlowStepper.tsx

@@ -0,0 +1,190 @@
+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 type { DeepPartial, FieldFlowTheme } from '../../types';
+import type { FieldFlowStepDefinition } from '../../hooks/useFieldFlowSteps';
+
+export interface FieldFlowStepRenderContext<T extends Record<string, string> = Record<string, string>> {
+  step: FieldFlowStepDefinition<T>;
+  index: number;
+  active: boolean;
+  done: boolean;
+  canPress: boolean;
+  onPress: () => void;
+}
+
+export interface FieldFlowStepperProps<T extends Record<string, string> = Record<string, string>> {
+  steps: FieldFlowStepDefinition<T>[];
+  stepIndex: number;
+  onStepPress?: (index: number) => void;
+  /** Allow tapping completed steps. Default: true. */
+  allowJumpBack?: boolean;
+  /** Show titles under dots. Default: true. */
+  showLabels?: boolean;
+  /** Trailing slot next to the progress row (e.g. “Skip”). */
+  headerRight?: React.ReactNode;
+  /** Fully custom step chrome. */
+  renderStep?: (ctx: FieldFlowStepRenderContext<T>) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowStepper<T extends Record<string, string> = Record<string, string>>({
+  steps,
+  stepIndex,
+  onStepPress,
+  allowJumpBack = true,
+  showLabels = true,
+  headerRight,
+  renderStep,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowStepperProps<T>) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const progress = steps.length <= 1 ? 1 : Math.min(1, Math.max(0, stepIndex / (steps.length - 1)));
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {headerRight ? <View style={styles.headerRow}>{headerRight}</View> : null}
+
+      <View style={styles.track}>
+        <View style={[styles.trackFill, { flex: progress }]} />
+        <View style={{ flex: Math.max(0.0001, 1 - progress) }} />
+      </View>
+
+      <View style={styles.row}>
+        {steps.map((step, index) => {
+          const done = index < stepIndex;
+          const active = index === stepIndex;
+          const canPress = Boolean(onStepPress) && (allowJumpBack ? index <= stepIndex : false);
+          const onPress = () => {
+            if (canPress) onStepPress?.(index);
+          };
+
+          if (renderStep) {
+            return (
+              <React.Fragment key={step.id}>
+                {renderStep({ step, index, active, done, canPress, onPress })}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <Pressable
+              key={step.id}
+              disabled={!canPress}
+              onPress={onPress}
+              style={styles.item}
+              accessibilityRole="button"
+              accessibilityState={{ selected: active, disabled: !canPress }}
+              accessibilityLabel={step.title}
+            >
+              <View
+                style={[
+                  styles.dot,
+                  done && styles.dotDone,
+                  active && styles.dotActive,
+                ]}
+              >
+                <Text style={[styles.dotText, done && styles.dotTextOnFill, active && !done && styles.dotTextActive]}>
+                  {done ? '✓' : index + 1}
+                </Text>
+              </View>
+              {showLabels ? (
+                <Text
+                  style={[styles.label, active && styles.labelActive, labelStyle]}
+                  numberOfLines={2}
+                >
+                  {step.title}
+                </Text>
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: {
+      marginBottom: theme.spacing.gap * 2.5,
+    },
+    headerRow: {
+      alignItems: 'flex-end',
+      marginBottom: theme.spacing.gap,
+    },
+    track: {
+      flexDirection: 'row',
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: theme.colors.backgroundDisabled,
+      marginBottom: theme.spacing.gap * 1.5,
+      overflow: 'hidden',
+    },
+    trackFill: {
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: 2,
+    },
+    row: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    item: {
+      flex: 1,
+      alignItems: 'center',
+      paddingHorizontal: 2,
+    },
+    dot: {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 6,
+    },
+    dotDone: {
+      backgroundColor: theme.colors.borderFocused,
+      borderColor: theme.colors.borderFocused,
+    },
+    dotActive: {
+      borderColor: theme.colors.borderFocused,
+      borderWidth: theme.spacing.borderWidthFocused,
+    },
+    dotText: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: theme.colors.label,
+    },
+    dotTextOnFill: {
+      color: '#fff',
+    },
+    dotTextActive: {
+      color: theme.colors.borderFocused,
+    },
+    label: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      textAlign: 'center',
+      fontFamily: theme.typography.fontFamily,
+    },
+    labelActive: {
+      color: theme.colors.text,
+      fontWeight: '600',
+    },
+  });
+}

package/src/components/FieldFlowStepper/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowStepper } from './FieldFlowStepper';
+export type { FieldFlowStepperProps, FieldFlowStepRenderContext } from './FieldFlowStepper';

package/src/components/FieldFlowSwitch/FieldFlowSwitch.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, 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, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  switchPosition?: 'left' | 'right';
+  leftIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  /** Track color when on. */
+  onTrackColor?: string;
+  /** Track color when off. */
+  offTrackColor?: string;
+  thumbColor?: string;
+  trackStyle?: ViewStyle;
+  thumbStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowSwitch({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  switchPosition = 'right',
+  leftIcon,
+  iconSize = 18,
+  onTrackColor,
+  offTrackColor,
+  thumbColor = '#FFFFFF',
+  trackStyle,
+  thumbStyle,
+  containerStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSwitchProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, Boolean(disabled)), [theme, disabled]);
+
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: theme.animation.duration,
+      useNativeDriver: false,
+    }).start();
+  }, [anim, theme.animation.duration, value]);
+
+  const trackColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [offTrackColor ?? theme.colors.border, onTrackColor ?? theme.colors.borderFocused],
+  });
+  const thumbTranslate = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [2, 22],
+  });
+
+  const switchNode = (
+    <Animated.View style={[styles.track, { backgroundColor: trackColor }, trackStyle]}>
+      <Animated.View
+        style={[styles.thumb, { backgroundColor: thumbColor, transform: [{ translateX: thumbTranslate }] }, thumbStyle]}
+      />
+    </Animated.View>
+  );
+
+  const labelNode = label ? (
+    <Text style={[styles.label, labelStyle]}>
+      {label}
+      {required ? ' *' : ''}
+    </Text>
+  ) : null;
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      <Pressable
+        onPress={() => !disabled && onChange(!value)}
+        disabled={disabled}
+        style={styles.row}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: value, disabled: Boolean(disabled) }}
+        accessibilityLabel={label}
+        hitSlop={6}
+      >
+        {leftIcon ? (
+          <View style={styles.leftIcon}>{renderFieldFlowIcon(leftIcon, theme.colors.icon, iconSize)}</View>
+        ) : null}
+        {switchPosition === 'left' ? switchNode : null}
+        {labelNode}
+        {switchPosition === 'right' ? switchNode : null}
+      </Pressable>
+      {errorText ? (
+        <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, disabled: boolean) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: theme.spacing.gap,
+    },
+    leftIcon: {
+      marginRight: 2,
+    },
+    label: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    track: {
+      width: 44,
+      height: 26,
+      borderRadius: 13,
+      justifyContent: 'center',
+    },
+    thumb: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      shadowColor: '#000',
+      shadowOpacity: 0.15,
+      shadowRadius: 2,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 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/FieldFlowSwitch/index.ts

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