rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowPhone/FieldFlowPhone.tsx

@@ -0,0 +1,298 @@
+import React, { useMemo, useState } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  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 {
+  DEFAULT_COUNTRY_DIALS,
+  composeE164,
+  findCountryByCode,
+  type FieldFlowCountryDial,
+} from '../../utils/phoneCountries';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowPhoneValue {
+  countryCode: string;
+  dialCode: string;
+  nationalNumber: string;
+  /** E.164-ish composed value, e.g. +15551234567 */
+  e164: string;
+}
+
+export interface FieldFlowPhoneProps {
+  value?: Partial<FieldFlowPhoneValue> | null;
+  onChange: (value: FieldFlowPhoneValue) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  defaultCountryCode?: string;
+  countries?: FieldFlowCountryDial[];
+  /** Custom country row in the picker sheet. Call `select()` to choose. */
+  renderCountryOption?: (ctx: {
+    country: FieldFlowCountryDial;
+    selected: boolean;
+    select: () => void;
+  }) => React.ReactNode;
+  /** Custom dial-code trigger button. */
+  renderDialButton?: (ctx: {
+    country: FieldFlowCountryDial;
+    open: () => void;
+  }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowPhone({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  placeholder = 'Phone number',
+  disabled,
+  required,
+  defaultCountryCode = 'US',
+  countries = DEFAULT_COUNTRY_DIALS,
+  renderCountryOption,
+  renderDialButton,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowPhoneProps) {
+  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 countryCode = value?.countryCode ?? defaultCountryCode;
+  const country = findCountryByCode(countryCode, countries) ?? countries[0];
+  const national = value?.nationalNumber ?? '';
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const emit = (nextCountry: FieldFlowCountryDial, nextNational: string) => {
+    onChange({
+      countryCode: nextCountry.code,
+      dialCode: nextCountry.dial,
+      nationalNumber: nextNational,
+      e164: composeE164(nextCountry.dial, nextNational),
+    });
+  };
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return countries;
+    return countries.filter(
+      c =>
+        c.name.toLowerCase().includes(q) ||
+        c.dial.includes(q) ||
+        c.code.toLowerCase().includes(q),
+    );
+  }, [countries, query]);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.row}>
+        {country && renderDialButton ? (
+          renderDialButton({
+            country,
+            open: () => {
+              setQuery('');
+              setOpen(true);
+            },
+          })
+        ) : (
+          <Pressable
+            style={styles.dialBtn}
+            disabled={disabled}
+            onPress={() => {
+              setQuery('');
+              setOpen(true);
+            }}
+            accessibilityRole="button"
+            accessibilityLabel="Country code"
+          >
+            <Text style={styles.flag}>{country?.flag ?? ''}</Text>
+            <Text style={styles.dial}>{country?.dial ?? '+1'}</Text>
+            {renderFieldFlowIcon('chevronDown', theme.colors.icon, 14)}
+          </Pressable>
+        )}
+
+        <TextInput
+          style={styles.input}
+          value={national}
+          onChangeText={text => country && emit(country, text.replace(/[^\d\s()-]/g, ''))}
+          placeholder={placeholder}
+          placeholderTextColor={theme.colors.placeholder}
+          keyboardType="phone-pad"
+          editable={!disabled}
+        />
+      </View>
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+
+      <Modal visible={open} animationType="slide" transparent onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)} />
+        <View style={styles.sheet}>
+          <Text style={styles.sheetTitle}>Country</Text>
+          <TextInput
+            style={styles.search}
+            value={query}
+            onChangeText={setQuery}
+            placeholder="Search country or code"
+            placeholderTextColor={theme.colors.placeholder}
+            autoFocus
+          />
+          <FlatList
+            data={filtered}
+            keyExtractor={item => item.code}
+            keyboardShouldPersistTaps="handled"
+            renderItem={({ item }) => {
+              const select = () => {
+                emit(item, national);
+                setOpen(false);
+              };
+              if (renderCountryOption) {
+                return (
+                  <>
+                    {renderCountryOption({
+                      country: item,
+                      selected: item.code === country?.code,
+                      select,
+                    })}
+                  </>
+                );
+              }
+              return (
+                <Pressable style={styles.option} onPress={select}>
+                  <Text style={styles.flag}>{item.flag ?? ''}</Text>
+                  <Text style={styles.optionName}>{item.name}</Text>
+                  <Text style={styles.optionDial}>{item.dial}</Text>
+                </Pressable>
+              );
+            }}
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, hasError: boolean, disabled: boolean) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap * 2, opacity: disabled ? 0.6 : 1 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap / 1.5,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      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',
+    },
+    dialBtn: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: 12,
+      paddingVertical: theme.spacing.paddingVertical,
+      borderRightWidth: StyleSheet.hairlineWidth,
+      borderRightColor: theme.colors.border,
+    },
+    flag: { fontSize: 16 },
+    dial: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontWeight: '600',
+      marginRight: 2,
+    },
+    input: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical,
+      fontFamily: theme.typography.fontFamily,
+    },
+    helper: {
+      marginTop: theme.spacing.gap / 1.5,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+    },
+    error: {
+      marginTop: theme.spacing.gap / 1.5,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+    },
+    backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.35)' },
+    sheet: {
+      maxHeight: '70%',
+      backgroundColor: theme.colors.background,
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      padding: 16,
+    },
+    sheetTitle: {
+      fontSize: theme.typography.fontSize + 2,
+      fontWeight: '600',
+      color: theme.colors.text,
+      marginBottom: 10,
+    },
+    search: {
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      marginBottom: 8,
+      color: theme.colors.text,
+      fontSize: theme.typography.fontSize,
+    },
+    option: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      gap: 10,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border,
+    },
+    optionName: { flex: 1, color: theme.colors.text, fontSize: theme.typography.fontSize },
+    optionDial: { color: theme.colors.label, fontWeight: '600' },
+  });
+}

package/src/components/FieldFlowPhone/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowPhone } from './FieldFlowPhone';
+export type { FieldFlowPhoneProps, FieldFlowPhoneValue } from './FieldFlowPhone';

package/src/components/FieldFlowRadio/FieldFlowRadio.tsx

@@ -0,0 +1,215 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { 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, FieldFlowOption, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowRadioProps {
+  options: FieldFlowOption[];
+  value?: string | null;
+  onChange: (value: string) => void;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  direction?: 'vertical' | 'horizontal';
+  /** Leading icon next to the group label. */
+  leftIcon?: FieldFlowIconSource;
+  /** Override selected indicator (default filled radio). */
+  selectedIcon?: FieldFlowIconSource;
+  /** Override unselected indicator. */
+  unselectedIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  selectedColor?: string;
+  containerStyle?: ViewStyle;
+  optionStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+  /** Fully custom option renderer. */
+  renderOption?: (args: {
+    option: FieldFlowOption;
+    selected: boolean;
+    disabled: boolean;
+    onPress: () => void;
+  }) => ReactNode;
+}
+
+export function FieldFlowRadio({
+  options,
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  direction = 'vertical',
+  leftIcon,
+  selectedIcon = 'radioFilled',
+  unselectedIcon = 'radio',
+  iconSize = 20,
+  selectedColor,
+  containerStyle,
+  optionStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID,
+  renderOption,
+}: FieldFlowRadioProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(
+    () => createStyles(theme, Boolean(errorText), Boolean(disabled), direction),
+    [theme, errorText, disabled, direction],
+  );
+  const active = selectedColor ?? theme.colors.borderFocused;
+
+  return (
+    <View
+      style={[styles.wrapper, containerStyle]}
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={label}
+    >
+      {(label || leftIcon) && (
+        <View style={styles.labelRow}>
+          {leftIcon ? renderFieldFlowIcon(leftIcon, theme.colors.icon, 18) : null}
+          {label ? (
+            <Text style={[styles.groupLabel, labelStyle]}>
+              {label}
+              {required ? ' *' : ''}
+            </Text>
+          ) : null}
+        </View>
+      )}
+
+      <View style={styles.options}>
+        {options.map(option => {
+          const selected = value === option.value;
+          const itemDisabled = Boolean(disabled || option.disabled);
+          const onPress = () => onChange(option.value);
+
+          if (renderOption) {
+            return (
+              <View key={option.value}>
+                {renderOption({ option, selected, disabled: itemDisabled, onPress })}
+              </View>
+            );
+          }
+
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => !itemDisabled && onPress()}
+              disabled={itemDisabled}
+              style={[styles.optionRow, itemDisabled && styles.optionDisabled, optionStyle]}
+              accessibilityRole="radio"
+              accessibilityState={{ selected, disabled: itemDisabled }}
+              accessibilityLabel={option.label}
+              hitSlop={4}
+            >
+              {renderFieldFlowIcon(
+                selected ? selectedIcon : unselectedIcon,
+                selected ? active : errorText ? theme.colors.borderError : theme.colors.border,
+                iconSize,
+              )}
+              {option.icon ? (
+                <View style={styles.optionIcon}>
+                  {renderFieldFlowIcon(option.icon, theme.colors.icon, 18)}
+                </View>
+              ) : null}
+              <View style={styles.optionTextCol}>
+                <Text style={styles.optionLabel}>{option.label}</Text>
+                {option.description ? (
+                  <Text style={styles.optionDescription}>{option.description}</Text>
+                ) : null}
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {errorText ? (
+        <Text style={[styles.errorText, errorStyle, helperStyle]}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(
+  theme: FieldFlowTheme,
+  hasError: boolean,
+  disabled: boolean,
+  direction: 'vertical' | 'horizontal',
+) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      marginBottom: theme.spacing.gap,
+    },
+    groupLabel: {
+      fontSize: theme.typography.labelFontSize,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+      fontFamily: theme.typography.fontFamily,
+    },
+    options: {
+      flexDirection: direction === 'horizontal' ? 'row' : 'column',
+      flexWrap: direction === 'horizontal' ? 'wrap' : 'nowrap',
+      gap: theme.spacing.gap * 1.5,
+    },
+    optionRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: theme.spacing.gap,
+      minWidth: direction === 'horizontal' ? '40%' : undefined,
+    },
+    optionDisabled: {
+      opacity: 0.5,
+    },
+    optionIcon: {
+      marginTop: 1,
+    },
+    optionTextCol: {
+      flex: 1,
+    },
+    optionLabel: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    optionDescription: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginTop: 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/FieldFlowRadio/index.ts

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

package/src/components/FieldFlowRating/FieldFlowRating.tsx

@@ -0,0 +1,121 @@
+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 FieldFlowRatingProps {
+  value?: number;
+  onChange: (value: number) => void;
+  /** Max stars. Default: 5. */
+  max?: number;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  /** Allow clearing by tapping the selected star again. Default: true. */
+  clearable?: boolean;
+  size?: number;
+  /** Custom star glyph (emoji, SVG, image…). */
+  renderStar?: (ctx: {
+    index: number;
+    filled: boolean;
+    size: number;
+    color: string;
+  }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowRating({
+  value = 0,
+  onChange,
+  max = 5,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  clearable = true,
+  size = 28,
+  renderStar,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowRatingProps) {
+  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]);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.row} accessibilityRole="adjustable" accessibilityValue={{ min: 0, max, now: value }}>
+        {Array.from({ length: max }, (_, i) => {
+          const star = i + 1;
+          const filled = star <= value;
+          return (
+            <Pressable
+              key={star}
+              disabled={disabled}
+              hitSlop={6}
+              onPress={() => {
+                if (clearable && star === value) onChange(0);
+                else onChange(star);
+              }}
+              accessibilityLabel={`${star} star${star === 1 ? '' : 's'}`}
+            >
+              {renderStar
+                ? renderStar({
+                    index: star,
+                    filled,
+                    size,
+                    color: filled ? theme.colors.borderFocused : theme.colors.border,
+                  })
+                : renderFieldFlowIcon(
+                    'star',
+                    filled ? theme.colors.borderFocused : theme.colors.border,
+                    size,
+                  )}
+            </Pressable>
+          );
+        })}
+      </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 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    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/FieldFlowRating/index.ts

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