rn-inputforge 0.4.0 → 0.5.1

package/src/components/FieldFlowSegmented/FieldFlowSegmented.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import { useReducedMotion } from '../../motion/useReducedMotion';
+import type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowSegmentedProps {
+  options: FieldFlowOption[];
+  value?: string | null;
+  onChange: (value: string) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Equal-width segments. Default: true. */
+  equalWidth?: boolean;
+  containerStyle?: ViewStyle;
+  trackStyle?: ViewStyle;
+  segmentStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Animated pill segmented control — plan pickers, account type, filters.
+ * Matches FieldFlow theming and supports option icons.
+ */
+export function FieldFlowSegmented({
+  options,
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  equalWidth = true,
+  containerStyle,
+  trackStyle,
+  segmentStyle,
+  labelStyle,
+  helperStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSegmentedProps) {
+  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 reducedMotion = useReducedMotion();
+
+  const selectedIndex = Math.max(
+    0,
+    options.findIndex(o => o.value === value),
+  );
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  const translate = useRef(new Animated.Value(0)).current;
+
+  const segmentWidth = options.length > 0 && trackWidth > 0 ? trackWidth / options.length : 0;
+
+  useEffect(() => {
+    if (!equalWidth || segmentWidth <= 0) return;
+    const to = selectedIndex * segmentWidth + 2;
+    if (reducedMotion) {
+      translate.setValue(to);
+      return;
+    }
+    Animated.spring(translate, {
+      toValue: to,
+      friction: 8,
+      tension: 120,
+      useNativeDriver: true,
+    }).start();
+  }, [selectedIndex, segmentWidth, equalWidth, reducedMotion, translate]);
+
+  const onTrackLayout = (e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  };
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View
+        style={[styles.track, trackStyle]}
+        onLayout={onTrackLayout}
+        accessibilityRole="tablist"
+      >
+        {equalWidth && segmentWidth > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.thumb,
+              {
+                width: segmentWidth - 4,
+                transform: [{ translateX: translate }],
+              },
+            ]}
+          />
+        ) : null}
+
+        {options.map(option => {
+          const isSelected = option.value === value;
+          const itemDisabled = disabled || option.disabled;
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => !itemDisabled && onChange(option.value)}
+              disabled={itemDisabled}
+              style={[
+                styles.segment,
+                equalWidth && { flex: 1 },
+                !equalWidth && isSelected && styles.segmentSelectedStatic,
+                segmentStyle,
+                itemDisabled && styles.segmentDisabled,
+              ]}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: isSelected, disabled: Boolean(itemDisabled) }}
+              accessibilityLabel={option.label}
+            >
+              {option.icon ? (
+                <View style={styles.segmentIcon}>
+                  {renderFieldFlowIcon(
+                    option.icon,
+                    isSelected ? theme.colors.borderFocused : theme.colors.icon,
+                    14,
+                  )}
+                </View>
+              ) : null}
+              <Text
+                style={[styles.segmentText, isSelected && styles.segmentTextSelected]}
+                numberOfLines={1}
+              >
+                {option.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {errorText ? (
+        <Text style={[styles.errorText, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, hasError: boolean, disabled: boolean) {
+  return StyleSheet.create({
+    wrapper: {
+      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',
+      fontFamily: theme.typography.fontFamily,
+    },
+    track: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderRadius: theme.spacing.borderRadius + 2,
+      padding: 2,
+      borderWidth: hasError ? theme.spacing.borderWidth : 0,
+      borderColor: theme.colors.borderError,
+      position: 'relative',
+      overflow: 'hidden',
+    },
+    thumb: {
+      position: 'absolute',
+      top: 2,
+      bottom: 2,
+      left: 0,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.background,
+      shadowColor: '#000',
+      shadowOpacity: 0.08,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 2,
+    },
+    segment: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 6,
+      paddingVertical: 10,
+      paddingHorizontal: 12,
+      zIndex: 1,
+    },
+    segmentSelectedStatic: {
+      backgroundColor: theme.colors.background,
+      borderRadius: theme.spacing.borderRadius,
+    },
+    segmentDisabled: {
+      opacity: 0.45,
+    },
+    segmentIcon: {
+      marginRight: 0,
+    },
+    segmentText: {
+      fontSize: theme.typography.helperFontSize + 1,
+      color: theme.colors.label,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    segmentTextSelected: {
+      color: theme.colors.text,
+      fontWeight: '600',
+    },
+    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/FieldFlowSegmented/index.ts

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

package/src/components/FieldFlowSignature/FieldFlowSignature.tsx

@@ -0,0 +1,241 @@
+import React, { useMemo, useRef, useState } from 'react';
+import {
+  PanResponder,
+  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';
+
+export interface FieldFlowPoint {
+  x: number;
+  y: number;
+}
+
+export type FieldFlowStroke = FieldFlowPoint[];
+
+export interface FieldFlowSignatureValue {
+  strokes: FieldFlowStroke[];
+  /** True when at least one stroke exists. */
+  isEmpty: boolean;
+}
+
+export interface FieldFlowSignatureProps {
+  value?: FieldFlowSignatureValue | null;
+  onChange: (value: FieldFlowSignatureValue) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  height?: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  clearLabel?: string;
+  /** Empty-pad hint (default “Sign here”). */
+  placeholder?: string;
+  /** Custom clear control. Call `clear()` to wipe strokes. */
+  renderClear?: (ctx: { clear: () => void; isEmpty: boolean }) => React.ReactNode;
+  /** Custom empty overlay inside the pad. */
+  renderPlaceholder?: () => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function SignatureSegment({
+  p1,
+  p2,
+  color,
+  thickness,
+}: {
+  p1: FieldFlowPoint;
+  p2: FieldFlowPoint;
+  color: string;
+  thickness: number;
+}) {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 0.01;
+  const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+  return (
+    <View
+      pointerEvents="none"
+      style={{
+        position: 'absolute',
+        left: p1.x,
+        top: p1.y,
+        width: len,
+        height: thickness,
+        backgroundColor: color,
+        borderRadius: thickness / 2,
+        transform: [{ translateY: -thickness / 2 }, { rotate: `${angle}deg` }],
+      }}
+    />
+  );
+}
+
+export function FieldFlowSignature({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  height = 160,
+  strokeWidth = 2.5,
+  strokeColor,
+  clearLabel = 'Clear',
+  placeholder = 'Sign here',
+  renderClear,
+  renderPlaceholder,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSignatureProps) {
+  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 color = strokeColor ?? theme.colors.text;
+
+  const strokes = value?.strokes ?? [];
+  const strokesRef = useRef(strokes);
+  strokesRef.current = strokes;
+  const currentRef = useRef<FieldFlowPoint[]>([]);
+  const [, setTick] = useState(0);
+  const bump = () => setTick(t => t + 1);
+
+  const emit = (next: FieldFlowStroke[]) => {
+    onChange({ strokes: next, isEmpty: next.length === 0 });
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: e => {
+        currentRef.current = [{ x: e.nativeEvent.locationX, y: e.nativeEvent.locationY }];
+        bump();
+      },
+      onPanResponderMove: e => {
+        currentRef.current = [
+          ...currentRef.current,
+          { x: e.nativeEvent.locationX, y: e.nativeEvent.locationY },
+        ];
+        bump();
+      },
+      onPanResponderRelease: () => {
+        if (currentRef.current.length > 1) {
+          emit([...strokesRef.current, currentRef.current]);
+        }
+        currentRef.current = [];
+        bump();
+      },
+    }),
+  ).current;
+
+  const allStrokes = currentRef.current.length
+    ? [...strokes, currentRef.current]
+    : strokes;
+
+  const clear = () => {
+    currentRef.current = [];
+    emit([]);
+    bump();
+  };
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      <View style={styles.header}>
+        {label ? (
+          <Text style={[styles.label, labelStyle]}>
+            {label}
+            {required ? ' *' : ''}
+          </Text>
+        ) : (
+          <View />
+        )}
+        {renderClear ? (
+          renderClear({ clear, isEmpty: allStrokes.length === 0 })
+        ) : (
+          <Pressable
+            onPress={clear}
+            disabled={disabled || allStrokes.length === 0}
+            hitSlop={8}
+          >
+            <Text style={styles.clear}>{clearLabel}</Text>
+          </Pressable>
+        )}
+      </View>
+
+      <View style={[styles.pad, { height }]} {...pan.panHandlers}>
+        {allStrokes.map((stroke, si) =>
+          stroke.slice(1).map((point, pi) => (
+            <SignatureSegment
+              key={`${si}-${pi}`}
+              p1={stroke[pi]}
+              p2={point}
+              color={color}
+              thickness={strokeWidth}
+            />
+          )),
+        )}
+        {allStrokes.length === 0
+          ? renderPlaceholder
+            ? renderPlaceholder()
+            : (
+              <Text style={styles.placeholder} pointerEvents="none">
+                {placeholder}
+              </Text>
+            )
+          : null}
+      </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', alignItems: 'center', marginBottom: 8 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    clear: { color: theme.colors.borderFocused, fontWeight: '600', fontSize: theme.typography.helperFontSize },
+    pad: {
+      borderWidth: hasError ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: hasError ? theme.colors.borderError : theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.background,
+      overflow: 'hidden',
+    },
+    placeholder: {
+      position: 'absolute',
+      alignSelf: 'center',
+      top: '42%',
+      color: theme.colors.placeholder,
+      fontSize: theme.typography.fontSize,
+    },
+    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/FieldFlowSignature/index.ts

@@ -0,0 +1,7 @@
+export { FieldFlowSignature } from './FieldFlowSignature';
+export type {
+  FieldFlowSignatureProps,
+  FieldFlowSignatureValue,
+  FieldFlowStroke,
+  FieldFlowPoint,
+} from './FieldFlowSignature';

package/src/components/FieldFlowSkeleton/FieldFlowSkeleton.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useReducedMotion } from '../../motion/useReducedMotion';
+import type { DeepPartial, FieldFlowTheme, FieldFlowVariant } from '../../types';
+
+export interface FieldFlowSkeletonProps {
+  /** How many fake fields to show. Default: 3. */
+  count?: number;
+  /** Match your form variant for realistic height. */
+  variant?: FieldFlowVariant;
+  /** Show label bars. Default: true. */
+  showLabels?: boolean;
+  /** Multiline taller block on last item. */
+  lastMultiline?: boolean;
+  containerStyle?: ViewStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Soft shimmer placeholders while a form hydrates (draft / API).
+ */
+export function FieldFlowSkeleton({
+  count = 3,
+  variant = 'outlined',
+  showLabels = true,
+  lastMultiline = false,
+  containerStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSkeletonProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, variant), [theme, variant]);
+  const reducedMotion = useReducedMotion();
+  const pulse = useRef(new Animated.Value(0.45)).current;
+
+  useEffect(() => {
+    if (reducedMotion) {
+      pulse.setValue(0.55);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 0.9,
+          duration: 700,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 0.45,
+          duration: 700,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [reducedMotion, pulse]);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID} accessibilityLabel="Loading form">
+      {Array.from({ length: count }, (_, i) => {
+        const tall = lastMultiline && i === count - 1;
+        return (
+          <View key={i} style={styles.item}>
+            {showLabels ? <Animated.View style={[styles.label, { opacity: pulse }]} /> : null}
+            <Animated.View style={[styles.field, tall && styles.fieldTall, { opacity: pulse }]} />
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, variant: FieldFlowVariant) {
+  const height =
+    theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6 + (variant === 'floating' ? 6 : 0);
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap },
+    item: { marginBottom: theme.spacing.gap * 2 },
+    label: {
+      width: '32%',
+      height: theme.typography.labelFontSize,
+      borderRadius: 4,
+      backgroundColor: theme.colors.backgroundDisabled,
+      marginBottom: theme.spacing.gap,
+    },
+    field: {
+      height,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+    },
+    fieldTall: { height: 88 },
+  });
+}

package/src/components/FieldFlowSkeleton/index.ts

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