rn-inputforge 0.4.0 → 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/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';

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