rn-inputforge 0.4.0 → 0.5.0

package/src/adapters/reactHookForm.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import type { TextInput } from 'react-native';
+import {
+  Controller,
+  type Control,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  type RegisterOptions,
+} from 'react-hook-form';
+import { FieldFlowInput, type FieldFlowInputProps } from '../components/FieldFlowInput';
+import { FieldFlowTags, type FieldFlowTagsProps } from '../components/FieldFlowTags';
+
+type InputPassthrough = Omit<
+  FieldFlowInputProps,
+  | 'value'
+  | 'defaultValue'
+  | 'onChangeText'
+  | 'onBlur'
+  | 'onFocus'
+  | 'errorText'
+  | 'hasError'
+  | 'rules'
+>;
+
+export interface FieldFlowControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends InputPassthrough {
+  control: Control<TFieldValues>;
+  name: TName;
+  /** react-hook-form register/controller rules. */
+  rules?: RegisterOptions<TFieldValues, TName>;
+  defaultValue?: ControllerProps<TFieldValues, TName>['defaultValue'];
+  /** When true, show the field error message from RHF. Default: true. */
+  showError?: boolean;
+}
+
+/**
+ * Drop-in `Controller` wrapper that renders a themed `FieldFlowInput`
+ * wired to react-hook-form. Requires the optional `react-hook-form` peer.
+ *
+ * @example
+ * const { control, handleSubmit } = useForm({ defaultValues: { email: '' } });
+ *
+ * <FieldFlowController
+ *   control={control}
+ *   name="email"
+ *   type="email"
+ *   label="Email"
+ *   rules={{ required: 'Email is required' }}
+ *   suggestions
+ * />
+ */
+export function FieldFlowController<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  rules,
+  defaultValue,
+  showError = true,
+  ...inputProps
+}: FieldFlowControllerProps<TFieldValues, TName>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field, fieldState }) => (
+        <FieldFlowInput
+          {...inputProps}
+          ref={field.ref as React.Ref<TextInput>}
+          value={field.value == null ? '' : String(field.value)}
+          onChangeText={field.onChange}
+          onBlur={field.onBlur}
+          errorText={showError ? fieldState.error?.message : undefined}
+          hasError={showError ? Boolean(fieldState.error) : undefined}
+        />
+      )}
+    />
+  );
+}
+
+type TagsPassthrough = Omit<FieldFlowTagsProps, 'value' | 'onChange' | 'errorText' | 'hasError'>;
+
+export interface FieldFlowTagsControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends TagsPassthrough {
+  control: Control<TFieldValues>;
+  name: TName;
+  rules?: RegisterOptions<TFieldValues, TName>;
+  defaultValue?: ControllerProps<TFieldValues, TName>['defaultValue'];
+  showError?: boolean;
+}
+
+/**
+ * RHF `Controller` for `FieldFlowTags` (string[] values).
+ */
+export function FieldFlowTagsController<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  rules,
+  defaultValue,
+  showError = true,
+  ...tagsProps
+}: FieldFlowTagsControllerProps<TFieldValues, TName>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field, fieldState }) => (
+        <FieldFlowTags
+          {...tagsProps}
+          value={Array.isArray(field.value) ? field.value : []}
+          onChange={field.onChange}
+          errorText={showError ? fieldState.error?.message : undefined}
+          hasError={showError ? Boolean(fieldState.error) : undefined}
+        />
+      )}
+    />
+  );
+}
+
+/**
+ * Map an RHF `field` + `fieldState` onto common FieldFlow input props.
+ * Useful when you need a custom render or a non-input FieldFlow component.
+ */
+export function mapRhfToFieldFlowProps(args: {
+  value: unknown;
+  onChange: (...event: any[]) => void;
+  onBlur: () => void;
+  errorMessage?: string;
+  showError?: boolean;
+}): Pick<FieldFlowInputProps, 'value' | 'onChangeText' | 'onBlur' | 'errorText' | 'hasError'> {
+  const { value, onChange, onBlur, errorMessage, showError = true } = args;
+  return {
+    value: value == null ? '' : String(value),
+    onChangeText: onChange,
+    onBlur,
+    errorText: showError ? errorMessage : undefined,
+    hasError: showError ? Boolean(errorMessage) : undefined,
+  };
+}

package/src/components/FieldFlowAffordance/FieldFlowAffordance.tsx

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  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 {
+  applyAffordanceSuggestion,
+  resolveAffordanceChips,
+  type FieldFlowAffordanceChip,
+  type FieldFlowAffordanceKind,
+} from '../../utils/affordance';
+
+export interface FieldFlowAffordanceProps {
+  /** Preset chip set. Ignored when `chips` is provided. */
+  kind?: FieldFlowAffordanceKind;
+  /** Explicit chips (strings or objects). Overrides `kind` defaults when non-empty. */
+  chips?: FieldFlowAffordanceChip[] | string[];
+  /** Current field value — used to compute the next value on chip press. */
+  value?: string;
+  /** Called with the updated field value after a chip is applied. */
+  onSelect: (nextValue: string, chip: FieldFlowAffordanceChip) => void;
+  /** Hide the bar entirely. Useful when the parent field is blurred. Default: false. */
+  hidden?: boolean;
+  /** When true, chips that would leave the value unchanged are still pressable. Default: true. */
+  allowNoop?: boolean;
+  containerStyle?: ViewStyle;
+  chipStyle?: ViewStyle;
+  chipTextStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Horizontal suggestion chips shown under (or near) a field — email domains,
+ * phone dial codes, currency symbols, or a fully custom chip list.
+ */
+export function FieldFlowAffordance({
+  kind = 'custom',
+  chips: chipsProp,
+  value = '',
+  onSelect,
+  hidden = false,
+  allowNoop = true,
+  containerStyle,
+  chipStyle,
+  chipTextStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowAffordanceProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const chips = useMemo(
+    () => resolveAffordanceChips(kind, chipsProp),
+    [kind, chipsProp],
+  );
+
+  if (hidden || chips.length === 0) return null;
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID} accessibilityRole="menu">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={styles.row}
+      >
+        {chips.map((chip, index) => {
+          const next = applyAffordanceSuggestion(kind, value, chip);
+          const disabled = !allowNoop && next === value;
+          return (
+            <Pressable
+              key={`${chip.label}-${index}`}
+              onPress={() => onSelect(next, chip)}
+              disabled={disabled}
+              style={({ pressed }) => [
+                styles.chip,
+                pressed && styles.chipPressed,
+                disabled && styles.chipDisabled,
+                chipStyle,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel={chip.accessibilityLabel ?? chip.label}
+              accessibilityState={{ disabled }}
+            >
+              <Text style={[styles.chipText, chipTextStyle]} numberOfLines={1}>
+                {chip.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrapper: {
+      marginTop: theme.spacing.gap,
+      marginBottom: theme.spacing.gap / 2,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      paddingRight: theme.spacing.paddingHorizontal,
+    },
+    chip: {
+      paddingHorizontal: 12,
+      paddingVertical: 7,
+      borderRadius: 999,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      backgroundColor: theme.colors.background,
+    },
+    chipPressed: {
+      borderColor: theme.colors.borderFocused,
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    chipDisabled: {
+      opacity: 0.4,
+    },
+    chipText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.text,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+  });
+}

package/src/components/FieldFlowAffordance/index.ts

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

package/src/components/FieldFlowCreditCard/FieldFlowCreditCard.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { FieldFlowMaskedInput } from '../FieldFlowMaskedInput';
+import { FieldFlowInput } from '../FieldFlowInput';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowCreditCardValue {
+  number: string;
+  expiry: string;
+  cvc: string;
+  name?: string;
+}
+
+export interface FieldFlowCreditCardProps {
+  value: FieldFlowCreditCardValue;
+  onChange: (value: FieldFlowCreditCardValue) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  /** Per-field errors. */
+  errors?: Partial<Record<keyof FieldFlowCreditCardValue, string>>;
+  disabled?: boolean;
+  required?: boolean;
+  showName?: boolean;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function formatExpiry(raw: string): string {
+  const digits = raw.replace(/\D/g, '').slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+
+export function FieldFlowCreditCard({
+  value,
+  onChange,
+  label = 'Card details',
+  helperText,
+  errorText,
+  errors,
+  disabled,
+  required,
+  showName = false,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowCreditCardProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const patch = (partial: Partial<FieldFlowCreditCardValue>) => onChange({ ...value, ...partial });
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <FieldFlowMaskedInput
+        mask="card"
+        label="Card number"
+        leftIcon="creditCard"
+        value={value.number}
+        valueMode="raw"
+        onChangeText={(_formatted, raw) => patch({ number: raw })}
+        errorText={errors?.number}
+        disabled={disabled}
+        theme={themeOverride}
+      />
+
+      <View style={styles.row}>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="Expiry"
+            placeholder="MM/YY"
+            keyboardType="number-pad"
+            value={value.expiry}
+            onChangeText={text => patch({ expiry: formatExpiry(text) })}
+            maxLength={5}
+            errorText={errors?.expiry}
+            disabled={disabled}
+            leftIcon="calendar"
+            theme={themeOverride}
+          />
+        </View>
+        <View style={styles.half}>
+          <FieldFlowInput
+            label="CVC"
+            placeholder="123"
+            keyboardType="number-pad"
+            value={value.cvc}
+            onChangeText={text => patch({ cvc: text.replace(/\D/g, '').slice(0, 4) })}
+            maxLength={4}
+            errorText={errors?.cvc}
+            disabled={disabled}
+            leftIcon="lock"
+            secureTextEntry
+            theme={themeOverride}
+          />
+        </View>
+      </View>
+
+      {showName ? (
+        <FieldFlowInput
+          label="Name on card"
+          value={value.name ?? ''}
+          onChangeText={name => patch({ name })}
+          errorText={errors?.name}
+          disabled={disabled}
+          leftIcon="user"
+          autoCapitalize="words"
+          theme={themeOverride}
+        />
+      ) : null}
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap },
+    label: {
+      fontSize: theme.typography.fontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+      marginBottom: theme.spacing.gap,
+    },
+    row: { flexDirection: 'row', gap: 12 },
+    half: { flex: 1 },
+    helper: { fontSize: theme.typography.helperFontSize, color: theme.colors.label, marginTop: -4 },
+    error: { fontSize: theme.typography.helperFontSize, color: theme.colors.error, marginTop: -4 },
+  });
+}

package/src/components/FieldFlowCreditCard/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowCreditCard } from './FieldFlowCreditCard';
+export type { FieldFlowCreditCardProps, FieldFlowCreditCardValue } from './FieldFlowCreditCard';

package/src/components/FieldFlowDraftBanner/FieldFlowDraftBanner.tsx

@@ -0,0 +1,169 @@
+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 FieldFlowDraftBannerProps {
+  visible: boolean;
+  /** Epoch ms when the draft was saved — used for relative time copy. */
+  savedAt?: number | null;
+  title?: string;
+  subtitle?: string;
+  resumeLabel?: string;
+  discardLabel?: string;
+  onResume: () => void;
+  onDiscard: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function formatRelativeTime(savedAt: number): string {
+  const delta = Math.max(0, Date.now() - savedAt);
+  const minutes = Math.floor(delta / 60000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/**
+ * Themed “Resume where you left off?” banner for `useFieldFlowDraft`.
+ */
+export function FieldFlowDraftBanner({
+  visible,
+  savedAt,
+  title = 'Resume your draft?',
+  subtitle,
+  resumeLabel = 'Resume',
+  discardLabel = 'Discard',
+  onResume,
+  onDiscard,
+  containerStyle,
+  titleStyle,
+  subtitleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowDraftBannerProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const resolvedSubtitle =
+    subtitle ??
+    (savedAt ? `Saved ${formatRelativeTime(savedAt)}. Pick up where you left off.` : 'Pick up where you left off.');
+
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[styles.banner, containerStyle]}
+      testID={testID}
+      accessibilityRole="summary"
+      accessibilityLabel={`${title}. ${resolvedSubtitle}`}
+    >
+      <View style={styles.iconWrap}>
+        {renderFieldFlowIcon('file', theme.colors.borderFocused, 18)}
+      </View>
+      <View style={styles.copy}>
+        <Text style={[styles.title, titleStyle]}>{title}</Text>
+        <Text style={[styles.subtitle, subtitleStyle]}>{resolvedSubtitle}</Text>
+      </View>
+      <View style={styles.actions}>
+        <Pressable
+          onPress={onDiscard}
+          hitSlop={6}
+          accessibilityRole="button"
+          accessibilityLabel={discardLabel}
+          style={styles.ghostBtn}
+        >
+          <Text style={styles.ghostText}>{discardLabel}</Text>
+        </Pressable>
+        <Pressable
+          onPress={onResume}
+          hitSlop={6}
+          accessibilityRole="button"
+          accessibilityLabel={resumeLabel}
+          style={styles.primaryBtn}
+        >
+          <Text style={styles.primaryText}>{resumeLabel}</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    banner: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      padding: theme.spacing.paddingHorizontal,
+      marginBottom: theme.spacing.gap * 2,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.borderFocused,
+      backgroundColor: theme.colors.background,
+    },
+    iconWrap: {
+      width: 32,
+      height: 32,
+      borderRadius: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    copy: {
+      flex: 1,
+      minWidth: 140,
+    },
+    title: {
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    subtitle: {
+      marginTop: 2,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      fontFamily: theme.typography.fontFamily,
+    },
+    actions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    ghostBtn: {
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+    },
+    ghostText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      fontWeight: '500',
+    },
+    primaryBtn: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.borderFocused,
+    },
+    primaryText: {
+      fontSize: theme.typography.helperFontSize,
+      color: '#FFFFFF',
+      fontWeight: '600',
+    },
+  });
+}

package/src/components/FieldFlowDraftBanner/index.ts

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