rn-inputforge 0.4.0 → 0.5.1

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/FieldFlowTags/FieldFlowTags.tsx

@@ -0,0 +1,319 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} 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 { renderFieldFlowIcon, type FieldFlowIconSource } from '../../icons';
+import type { DeepPartial, FieldFlowTheme, FieldFlowVariant } from '../../types';
+
+export interface FieldFlowTagsProps {
+  value?: string[];
+  onChange: (tags: string[]) => void;
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  hasError?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /** Max number of tags. */
+  maxTags?: number;
+  /** Max characters per tag. Default: 32. */
+  maxTagLength?: number;
+  /** Separators that commit the current draft. Default: enter + comma. */
+  separators?: Array<',' | ' ' | 'enter'>;
+  /** Allow duplicate tags. Default: false. */
+  allowDuplicates?: boolean;
+  /** Transform each tag before commit (default: trim). */
+  transformTag?: (raw: string) => string;
+  leftIcon?: FieldFlowIconSource | null;
+  variant?: FieldFlowVariant;
+  containerStyle?: ViewStyle;
+  inputContainerStyle?: ViewStyle;
+  tagStyle?: ViewStyle;
+  tagTextStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Multi-value chip / tags input — skills, interests, keywords.
+ * Type a value and press Enter or comma to commit.
+ */
+export function FieldFlowTags({
+  value,
+  onChange,
+  label,
+  placeholder = 'Add a tag…',
+  helperText,
+  errorText,
+  hasError,
+  disabled,
+  required,
+  maxTags,
+  maxTagLength = 32,
+  separators = [',', 'enter'],
+  allowDuplicates = false,
+  transformTag = raw => raw.trim(),
+  leftIcon = 'hash',
+  variant = 'outlined',
+  containerStyle,
+  inputContainerStyle,
+  tagStyle,
+  tagTextStyle,
+  labelStyle,
+  helperStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowTagsProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const tags = value ?? [];
+  const [draft, setDraft] = useState('');
+  const [focused, setFocused] = useState(false);
+
+  const state = useFieldState({
+    isFocused: focused,
+    hasError: Boolean(hasError || errorText),
+    disabled,
+  });
+  const styles = useMemo(() => createStyles(theme, state, variant), [theme, state, variant]);
+  const atMax = maxTags !== undefined && tags.length >= maxTags;
+
+  const commit = useCallback(
+    (raw: string) => {
+      const next = transformTag(raw).slice(0, maxTagLength);
+      if (!next) {
+        setDraft('');
+        return;
+      }
+      if (atMax) {
+        setDraft('');
+        return;
+      }
+      if (!allowDuplicates && tags.some(t => t.toLowerCase() === next.toLowerCase())) {
+        setDraft('');
+        return;
+      }
+      onChange([...tags, next]);
+      setDraft('');
+    },
+    [allowDuplicates, atMax, maxTagLength, onChange, tags, transformTag],
+  );
+
+  const removeAt = useCallback(
+    (index: number) => {
+      if (disabled) return;
+      onChange(tags.filter((_, i) => i !== index));
+    },
+    [disabled, onChange, tags],
+  );
+
+  const onChangeText = useCallback(
+    (text: string) => {
+      if (separators.includes(',') && text.includes(',')) {
+        const parts = text.split(',');
+        const last = parts.pop() ?? '';
+        for (const part of parts) commit(part);
+        setDraft(last);
+        return;
+      }
+      if (separators.includes(' ') && text.endsWith(' ') && text.trim()) {
+        commit(text);
+        return;
+      }
+      setDraft(text.slice(0, maxTagLength));
+    },
+    [commit, maxTagLength, separators],
+  );
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={[styles.inputContainer, inputContainerStyle]}>
+        {leftIcon ? (
+          <View style={styles.iconSlot}>{renderFieldFlowIcon(leftIcon, theme.colors.icon, 16)}</View>
+        ) : null}
+
+        <View style={styles.chips}>
+          {tags.map((tag, index) => (
+            <Pressable
+              key={`${tag}-${index}`}
+              onPress={() => removeAt(index)}
+              disabled={disabled}
+              style={[styles.tag, tagStyle]}
+              accessibilityRole="button"
+              accessibilityLabel={`Remove ${tag}`}
+            >
+              <Text style={[styles.tagText, tagTextStyle]} numberOfLines={1}>
+                {tag}
+              </Text>
+              {!disabled ? renderFieldFlowIcon('clear', theme.colors.icon, 10) : null}
+            </Pressable>
+          ))}
+
+          {!atMax && !disabled ? (
+            <TextInput
+              value={draft}
+              onChangeText={onChangeText}
+              onFocus={() => setFocused(true)}
+              onBlur={() => {
+                setFocused(false);
+                if (draft.trim()) commit(draft);
+              }}
+              onSubmitEditing={() => {
+                if (separators.includes('enter')) commit(draft);
+              }}
+              placeholder={tags.length === 0 ? placeholder : ''}
+              placeholderTextColor={theme.colors.placeholder}
+              editable={!disabled}
+              style={styles.input}
+              autoCapitalize="none"
+              autoCorrect={false}
+              blurOnSubmit={false}
+              returnKeyType="done"
+              accessibilityLabel={label ?? 'Tags'}
+            />
+          ) : null}
+        </View>
+      </View>
+
+      {(helperText || errorText || maxTags !== undefined) && (
+        <View style={styles.footer}>
+          {errorText ? (
+            <Text style={[styles.errorText, helperStyle]}>{errorText}</Text>
+          ) : helperText ? (
+            <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+          ) : (
+            <View />
+          )}
+          {maxTags !== undefined ? (
+            <Text style={styles.counter}>
+              {tags.length}/{maxTags}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function createStyles(
+  theme: FieldFlowTheme,
+  state: ReturnType<typeof useFieldState>,
+  variant: FieldFlowVariant,
+) {
+  const isUnderline = variant === 'underline';
+  const isFilled = variant === 'filled';
+  const borderW = state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth;
+
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+    },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap / 1.5,
+      color: labelColorFor(theme, state),
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      backgroundColor:
+        state === 'disabled'
+          ? theme.colors.backgroundDisabled
+          : isFilled
+            ? theme.colors.backgroundDisabled
+            : isUnderline
+              ? 'transparent'
+              : theme.colors.background,
+      borderRadius: isUnderline ? 0 : theme.spacing.borderRadius,
+      borderWidth: isUnderline ? 0 : isFilled ? 0 : borderW,
+      borderBottomWidth: isUnderline ? borderW + (state === 'focused' ? 0.5 : 0) : isFilled ? 0 : borderW,
+      borderColor: borderColorFor(theme, state),
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical / 1.5,
+      minHeight: theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+    },
+    iconSlot: {
+      marginRight: theme.spacing.gap,
+      marginTop: 6,
+    },
+    chips: {
+      flex: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: 6,
+    },
+    tag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      borderRadius: 999,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      maxWidth: '100%',
+    },
+    tagText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+      maxWidth: 160,
+    },
+    input: {
+      flexGrow: 1,
+      minWidth: 96,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      paddingVertical: 4,
+      fontFamily: theme.typography.fontFamily,
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: theme.spacing.gap / 1.5,
+    },
+    helperText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      flex: 1,
+    },
+    errorText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+      flex: 1,
+    },
+    counter: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginLeft: theme.spacing.gap,
+    },
+  });
+}

package/src/components/FieldFlowTags/index.ts

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