rn-inputforge 0.1.1 → 0.2.0

package/src/components/FieldFlowDropdown/FieldFlowDropdown.tsx

@@ -0,0 +1,353 @@
+import React, { useMemo, useRef, useState } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  ViewStyle,
+  Dimensions,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { FieldFlowIcon } from '../../icons/Icon';
+import { createDropdownStyles } from './styles';
+import type { FieldFlowDropdownProps } from './types';
+import type { FieldFlowOption } from '../../types';
+
+export function FieldFlowDropdown(props: FieldFlowDropdownProps) {
+  const {
+    options,
+    label,
+    placeholder = 'Select...',
+    helperText,
+    errorText,
+    hasError,
+    disabled,
+    required,
+    title,
+    presentation = 'bottomSheet',
+    searchable,
+    searchThreshold = 6,
+    searchPlaceholder = 'Search...',
+    emptyText = 'No options found',
+    maxModalHeight,
+    clearable,
+    containerStyle,
+    triggerStyle,
+    labelStyle,
+    theme: themeOverride,
+    testID,
+    multiple,
+  } = props;
+
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () =>
+      themeOverride
+        ? mergeDeep(contextTheme ?? defaultTheme, themeOverride)
+        : (contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [draftValues, setDraftValues] = useState<string[]>(
+    multiple ? (props.values ?? []) : [],
+  );
+  const [anchorLayout, setAnchorLayout] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const triggerRef = useRef<View>(null);
+
+  const resolvedError = errorText;
+  const state = useFieldState({
+    isFocused: isOpen,
+    hasError: Boolean(hasError || resolvedError),
+    disabled,
+  });
+  const styles = useMemo(
+    () => createDropdownStyles(theme, state),
+    [theme, state],
+  );
+
+  const selectedValues: string[] = multiple
+    ? (props.values ?? [])
+    : props.value
+      ? [props.value]
+      : [];
+
+  const shouldShowSearch = searchable ?? options.length > searchThreshold;
+  const filteredOptions = useMemo(() => {
+    if (!query.trim()) return options;
+    const q = query.trim().toLowerCase();
+    return options.filter(o => o.label.toLowerCase().includes(q));
+  }, [options, query]);
+
+  const openDropdown = () => {
+    if (disabled) return;
+    if (multiple) setDraftValues(props.values ?? []);
+    setQuery('');
+    if (presentation === 'inline') {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setAnchorLayout({ x, y, width, height });
+        setIsOpen(true);
+      });
+    } else {
+      setIsOpen(true);
+    }
+  };
+
+  const closeDropdown = () => setIsOpen(false);
+
+  const commitSingle = (value: string) => {
+    if (!multiple) {
+      props.onChange(value);
+      if (props.closeOnSelect ?? true) closeDropdown();
+    }
+  };
+
+  const toggleMultiDraft = (value: string) => {
+    setDraftValues(prev =>
+      prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value],
+    );
+    if (multiple && (props.closeOnSelect ?? false)) {
+      const next = draftValues.includes(value)
+        ? draftValues.filter(v => v !== value)
+        : [...draftValues, value];
+      props.onChangeMulti(next);
+    }
+  };
+
+  const confirmMulti = () => {
+    if (multiple) {
+      props.onChangeMulti(draftValues);
+    }
+    closeDropdown();
+  };
+
+  const clearSelection = () => {
+    if (multiple) {
+      props.onChangeMulti([]);
+      setDraftValues([]);
+    } else {
+      props.onChange(null);
+    }
+  };
+
+  const triggerLabel = useMemo(() => {
+    if (selectedValues.length === 0) return null;
+    const labels = options
+      .filter(o => selectedValues.includes(o.value))
+      .map(o => o.label);
+    if (!multiple) return labels[0] ?? null;
+    const maxShown = props.maxLabelsShown ?? 2;
+    if (labels.length <= maxShown) return labels.join(', ');
+    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown} more`;
+  }, [selectedValues, options, multiple, props]);
+
+  const renderOption = ({ item }: { item: FieldFlowOption }) => {
+    const isSelected = multiple
+      ? draftValues.includes(item.value)
+      : props.value === item.value;
+    const handlePress = () => {
+      if (item.disabled) return;
+      multiple ? toggleMultiDraft(item.value) : commitSingle(item.value);
+    };
+    return (
+      <Pressable
+        onPress={handlePress}
+        disabled={item.disabled}
+        style={styles.optionRow}
+      >
+        <View style={{ flex: 1 }}>
+          <Text
+            style={[
+              styles.optionLabel,
+              isSelected && styles.optionLabelSelected,
+              item.disabled && styles.optionLabelDisabled,
+            ]}
+          >
+            {item.label}
+          </Text>
+          {item.description ? (
+            <Text style={styles.optionDescription}>{item.description}</Text>
+          ) : null}
+        </View>
+        {multiple ? (
+          <View style={[styles.checkbox, isSelected && styles.checkboxChecked]}>
+            {isSelected ? (
+              <FieldFlowIcon name="check" size={12} color="#FFFFFF" />
+            ) : null}
+          </View>
+        ) : isSelected ? (
+          <FieldFlowIcon
+            name="check"
+            size={16}
+            color={theme.colors.borderFocused}
+          />
+        ) : null}
+      </Pressable>
+    );
+  };
+
+  const listContent = (
+    <>
+      {shouldShowSearch ? (
+        <View style={styles.searchWrapper}>
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder={searchPlaceholder}
+            placeholderTextColor={theme.colors.placeholder}
+            style={styles.searchInput}
+          />
+        </View>
+      ) : null}
+      <FlatList
+        data={filteredOptions}
+        keyExtractor={item => item.value}
+        renderItem={renderOption}
+        keyboardShouldPersistTaps="handled"
+        style={{ maxHeight: maxModalHeight ?? 360 }}
+        ListEmptyComponent={<Text style={styles.emptyText}>{emptyText}</Text>}
+      />
+      {multiple ? (
+        <Pressable style={styles.confirmButton} onPress={confirmMulti}>
+          <Text style={styles.confirmButtonText}>
+            {props.confirmLabel ?? 'Done'}
+          </Text>
+        </Pressable>
+      ) : null}
+    </>
+  );
+
+  const header = (
+    <View style={styles.modalHeader}>
+      <Text style={styles.modalTitle}>{title ?? label ?? 'Select'}</Text>
+      {clearable && selectedValues.length > 0 ? (
+        <Pressable onPress={clearSelection} hitSlop={8}>
+          <Text style={styles.modalClearButton}>Clear</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View ref={triggerRef} collapsable={false}>
+        <Pressable
+          onPress={openDropdown}
+          disabled={disabled}
+          style={[styles.trigger, triggerStyle]}
+        >
+          {triggerLabel ? (
+            <Text style={styles.triggerText} numberOfLines={1}>
+              {triggerLabel}
+            </Text>
+          ) : (
+            <Text style={styles.placeholderText} numberOfLines={1}>
+              {placeholder}
+            </Text>
+          )}
+          <FieldFlowIcon
+            name="chevronDown"
+            size={16}
+            color={theme.colors.icon}
+          />
+        </Pressable>
+      </View>
+
+      {(helperText || resolvedError) && (
+        <View style={styles.footerRow}>
+          <View style={{ flex: 1 }}>
+            {resolvedError ? (
+              <Text style={styles.errorText}>{resolvedError}</Text>
+            ) : helperText ? (
+              <Text style={styles.helperText}>{helperText}</Text>
+            ) : null}
+          </View>
+        </View>
+      )}
+
+      {presentation === 'inline' ? (
+        isOpen && anchorLayout ? (
+          <Modal
+            transparent
+            visible
+            animationType="fade"
+            onRequestClose={closeDropdown}
+          >
+            <Pressable style={{ flex: 1 }} onPress={closeDropdown}>
+              <View
+                style={[styles.inlineDropdown, inlinePosition(anchorLayout)]}
+              >
+                {listContent}
+              </View>
+            </Pressable>
+          </Modal>
+        ) : null
+      ) : (
+        <Modal
+          transparent
+          visible={isOpen}
+          animationType={presentation === 'popup' ? 'fade' : 'slide'}
+          onRequestClose={closeDropdown}
+        >
+          <Pressable
+            style={
+              presentation === 'popup'
+                ? styles.popupWrapper
+                : styles.bottomSheetWrapper
+            }
+            onPress={closeDropdown}
+          >
+            <Pressable
+              style={
+                presentation === 'popup' ? styles.popupCard : styles.sheetCard
+              }
+              onPress={e => e.stopPropagation()}
+            >
+              {presentation === 'bottomSheet' ? (
+                <View style={styles.dragHandle} />
+              ) : null}
+              {header}
+              {listContent}
+            </Pressable>
+          </Pressable>
+        </Modal>
+      )}
+    </View>
+  );
+}
+
+function inlinePosition(anchor: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}): ViewStyle {
+  const screenHeight = Dimensions.get('window').height;
+  const spaceBelow = screenHeight - (anchor.y + anchor.height);
+  const openUpward = spaceBelow < 260;
+  return {
+    left: anchor.x,
+    width: anchor.width,
+    maxHeight: 300,
+    ...(openUpward
+      ? { bottom: screenHeight - anchor.y + 4 }
+      : { top: anchor.y + anchor.height + 4 }),
+  };
+}

package/src/components/FieldFlowDropdown/index.ts

@@ -0,0 +1,7 @@
+export { FieldFlowDropdown } from './FieldFlowDropdown';
+export type {
+  FieldFlowDropdownProps,
+  FieldFlowDropdownSingleProps,
+  FieldFlowDropdownMultiProps,
+  FieldFlowDropdownPresentation,
+} from './types';

package/src/components/FieldFlowDropdown/styles.ts

@@ -0,0 +1,193 @@
+import { StyleSheet } from 'react-native';
+import type { FieldFlowState, FieldFlowTheme } from '../../types';
+import { borderColorFor, labelColorFor } from '../FieldFlowInput/styles';
+
+export function createDropdownStyles(theme: FieldFlowTheme, state: FieldFlowState) {
+  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',
+    },
+    trigger: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: state === 'disabled' ? theme.colors.backgroundDisabled : theme.colors.background,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: borderColorFor(theme, state),
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      minHeight: theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+    },
+    triggerText: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+    },
+    placeholderText: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.placeholder,
+    },
+    footerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: theme.spacing.gap / 1.5,
+    },
+    errorText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+      flexShrink: 1,
+    },
+    helperText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      flexShrink: 1,
+    },
+
+    // Modal
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0,0,0,0.4)',
+    },
+    bottomSheetWrapper: {
+      flex: 1,
+      justifyContent: 'flex-end',
+    },
+    popupWrapper: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 24,
+    },
+    sheetCard: {
+      backgroundColor: theme.colors.background,
+      borderTopLeftRadius: theme.spacing.borderRadius * 1.6,
+      borderTopRightRadius: theme.spacing.borderRadius * 1.6,
+      paddingTop: theme.spacing.gap,
+      paddingBottom: theme.spacing.paddingVertical,
+    },
+    popupCard: {
+      width: '100%',
+      backgroundColor: theme.colors.background,
+      borderRadius: theme.spacing.borderRadius * 1.4,
+      paddingTop: theme.spacing.gap,
+      paddingBottom: theme.spacing.paddingVertical,
+      maxHeight: '80%',
+    },
+    dragHandle: {
+      alignSelf: 'center',
+      width: 36,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: theme.colors.border,
+      marginBottom: theme.spacing.gap,
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingBottom: theme.spacing.gap,
+      borderBottomWidth: theme.spacing.borderWidth,
+      borderBottomColor: theme.colors.border,
+      marginBottom: theme.spacing.gap,
+    },
+    modalTitle: {
+      fontSize: theme.typography.fontSize + 1,
+      fontWeight: '600',
+      color: theme.colors.text,
+    },
+    modalClearButton: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.borderFocused,
+    },
+    searchWrapper: {
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      marginBottom: theme.spacing.gap,
+    },
+    searchInput: {
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderRadius: theme.spacing.borderRadius,
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical * 0.6,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+    },
+    optionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical * 0.9,
+    },
+    optionLabel: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+    },
+    optionLabelSelected: {
+      color: theme.colors.borderFocused,
+      fontWeight: '600',
+    },
+    optionLabelDisabled: {
+      color: theme.colors.placeholder,
+    },
+    optionDescription: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginTop: 2,
+    },
+    checkbox: {
+      width: 20,
+      height: 20,
+      borderRadius: 5,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    checkboxChecked: {
+      backgroundColor: theme.colors.borderFocused,
+      borderColor: theme.colors.borderFocused,
+    },
+    emptyText: {
+      textAlign: 'center',
+      paddingVertical: theme.spacing.paddingVertical * 2,
+      color: theme.colors.placeholder,
+      fontSize: theme.typography.fontSize,
+    },
+    confirmButton: {
+      marginHorizontal: theme.spacing.paddingHorizontal,
+      marginTop: theme.spacing.gap,
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: theme.spacing.borderRadius,
+      paddingVertical: theme.spacing.paddingVertical * 0.8,
+      alignItems: 'center',
+    },
+    confirmButtonText: {
+      color: '#FFFFFF',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+    },
+
+    // Inline presentation
+    inlineDropdown: {
+      position: 'absolute',
+      backgroundColor: theme.colors.background,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.15,
+      shadowRadius: 8,
+      elevation: 6,
+      overflow: 'hidden',
+      zIndex: 50,
+    },
+  });
+}

package/src/components/FieldFlowDropdown/types.ts

@@ -0,0 +1,57 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+
+export type FieldFlowDropdownPresentation = 'bottomSheet' | 'popup' | 'inline';
+
+interface BaseDropdownProps {
+  options: FieldFlowOption[];
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  hasError?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+
+  /** Modal title shown at the top of the bottom sheet / popup. Defaults to `label` if omitted. */
+  title?: string;
+  /** 'bottomSheet' slides up from the bottom, 'popup' fades in centered, 'inline' drops down under the field. Default: 'bottomSheet'. */
+  presentation?: FieldFlowDropdownPresentation;
+  /** Shows a search box above the option list once there are more than this many options. Default: 6. Set to false to disable search entirely. */
+  searchable?: boolean;
+  searchThreshold?: number;
+  searchPlaceholder?: string;
+  emptyText?: string;
+
+  maxModalHeight?: number;
+  clearable?: boolean;
+
+  containerStyle?: ViewStyle;
+  triggerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export interface FieldFlowDropdownSingleProps extends BaseDropdownProps {
+  multiple?: false;
+  value?: string | null;
+  onChange: (value: string | null) => void;
+  /** Close the sheet as soon as an option is tapped. Default: true. */
+  closeOnSelect?: boolean;
+}
+
+export interface FieldFlowDropdownMultiProps extends BaseDropdownProps {
+  multiple: true;
+  values?: string[];
+  onChangeMulti: (values: string[]) => void;
+  /** Close the sheet as soon as an option is tapped. Default: false (user taps "Done"). */
+  closeOnSelect?: boolean;
+  /** Label for the confirm button shown in multi-select mode. Default: "Done". */
+  confirmLabel?: string;
+  /** Max number of individual labels to show on the trigger before collapsing to "N selected". Default: 2. */
+  maxLabelsShown?: number;
+}
+
+export type FieldFlowDropdownProps = FieldFlowDropdownSingleProps | FieldFlowDropdownMultiProps;

package/src/icons/Icon.tsx

@@ -14,6 +14,7 @@ export type FieldFlowIconName =
   | 'paperclip'
   | 'mic'
   | 'mapPin'
+  | 'chevronDown'
   | 'spinner';
 
 export interface FieldFlowIconProps {
@@ -296,6 +297,31 @@ export function FieldFlowIcon({ name, size = 18, color = '#6B7280', style }: Fie
           </View>
         </View>
       );
+    case 'chevronDown':
+      return (
+        <View style={[box, style]}>
+          <View
+            style={{
+              width: size * 0.55,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke,
+              transform: [{ rotate: '45deg' }, { translateX: -size * 0.13 }, { translateY: -size * 0.02 }],
+              position: 'absolute',
+            }}
+          />
+          <View
+            style={{
+              width: size * 0.55,
+              height: stroke,
+              backgroundColor: color,
+              borderRadius: stroke,
+              transform: [{ rotate: '-45deg' }, { translateX: size * 0.13 }, { translateY: -size * 0.02 }],
+              position: 'absolute',
+            }}
+          />
+        </View>
+      );
     default:
       return <View style={[box, style]} />;
   }

package/src/index.ts

@@ -11,6 +11,14 @@ export type { ChatInputProps, ChatAttachmentAction, CustomChatAction } from './c
 export { KeyboardAwareFormWrapper } from './components/KeyboardAwareFormWrapper';
 export type { KeyboardAwareFormWrapperProps } from './components/KeyboardAwareFormWrapper';
 
+export { FieldFlowDropdown } from './components/FieldFlowDropdown';
+export type {
+  FieldFlowDropdownProps,
+  FieldFlowDropdownSingleProps,
+  FieldFlowDropdownMultiProps,
+  FieldFlowDropdownPresentation,
+} from './components/FieldFlowDropdown';
+
 // Theming
 export { FieldFlowThemeProvider, useFieldFlowTheme, defaultTheme, darkTheme } from './theme';
 export type { FieldFlowThemeProviderProps } from './theme';
@@ -52,6 +60,7 @@ export type {
   FieldFlowFieldType,
   FieldFlowState,
   FieldFlowRules,
+  FieldFlowOption,
   ValidationResult,
   Validator,
   FieldFlowColors,

package/src/types/index.ts

@@ -1,6 +1,14 @@
 import type { KeyboardTypeOptions, TextInputProps, TextStyle } from 'react-native';
 
 /** Every field "flavor" the core input understands out of the box. */
+export interface FieldFlowOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  /** Optional secondary line of text shown under the label in the option list. */
+  description?: string;
+}
+
 export type FieldFlowFieldType =
   | 'text'
   | 'email'