rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowSection/FieldFlowSection.tsx

@@ -0,0 +1,176 @@
+import React, { useMemo, useState } from 'react';
+import {
+  LayoutAnimation,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} 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';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+export interface FieldFlowSectionProps {
+  title?: string;
+  description?: string;
+  /** Leading icon next to the title. */
+  icon?: FieldFlowIconSource;
+  children: React.ReactNode;
+  /** Soft card surface (default) vs flush / borderless. */
+  elevated?: boolean;
+  /** Allow collapsing the body. Default: false. */
+  collapsible?: boolean;
+  /** Initial open state when collapsible. Default: true. */
+  defaultOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Optional trailing header action (e.g. “Edit”). */
+  headerRight?: React.ReactNode;
+  containerStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  bodyStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Themed form surface — groups related fields into a designed card with
+ * optional icon, description, and collapse.
+ */
+export function FieldFlowSection({
+  title,
+  description,
+  icon,
+  children,
+  elevated = true,
+  collapsible = false,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  headerRight,
+  containerStyle,
+  headerStyle,
+  bodyStyle,
+  titleStyle,
+  descriptionStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowSectionProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, elevated), [theme, elevated]);
+
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : internalOpen;
+
+  const toggle = () => {
+    const next = !open;
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const showHeader = Boolean(title || description || icon || headerRight || collapsible);
+
+  return (
+    <View style={[styles.card, containerStyle]} testID={testID}>
+      {showHeader ? (
+        <Pressable
+          onPress={collapsible ? toggle : undefined}
+          disabled={!collapsible}
+          style={[styles.header, headerStyle]}
+          accessibilityRole={collapsible ? 'button' : undefined}
+          accessibilityState={collapsible ? { expanded: open } : undefined}
+        >
+          {icon ? (
+            <View style={styles.iconWrap}>{renderFieldFlowIcon(icon, theme.colors.borderFocused, 18)}</View>
+          ) : null}
+          <View style={styles.headerCopy}>
+            {title ? <Text style={[styles.title, titleStyle]}>{title}</Text> : null}
+            {description ? <Text style={[styles.description, descriptionStyle]}>{description}</Text> : null}
+          </View>
+          {headerRight}
+          {collapsible
+            ? renderFieldFlowIcon(open ? 'chevronUp' : 'chevronDown', theme.colors.icon, 18)
+            : null}
+        </Pressable>
+      ) : null}
+
+      {(!collapsible || open) && <View style={[styles.body, bodyStyle]}>{children}</View>}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, elevated: boolean) {
+  return StyleSheet.create({
+    card: {
+      marginBottom: theme.spacing.gap * 2.5,
+      borderRadius: theme.spacing.borderRadius + 4,
+      backgroundColor: theme.colors.background,
+      borderWidth: elevated ? theme.spacing.borderWidth : 0,
+      borderColor: theme.colors.border,
+      overflow: 'hidden',
+      ...(elevated
+        ? {
+            shadowColor: '#000',
+            shadowOpacity: 0.06,
+            shadowRadius: 12,
+            shadowOffset: { width: 0, height: 4 },
+            elevation: 2,
+          }
+        : null),
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      paddingHorizontal: theme.spacing.paddingHorizontal + 2,
+      paddingTop: theme.spacing.paddingVertical + 2,
+      paddingBottom: theme.spacing.paddingVertical / 1.5,
+    },
+    iconWrap: {
+      width: 36,
+      height: 36,
+      borderRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    headerCopy: {
+      flex: 1,
+    },
+    title: {
+      fontSize: theme.typography.fontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    description: {
+      marginTop: 2,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      fontFamily: theme.typography.fontFamily,
+    },
+    body: {
+      paddingHorizontal: theme.spacing.paddingHorizontal + 2,
+      paddingBottom: theme.spacing.paddingVertical + 4,
+      paddingTop: theme.spacing.gap,
+    },
+  });
+}

package/src/components/FieldFlowSection/index.ts

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

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