rn-inputforge 0.1.2 → 0.3.0

package/lib/typescript/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rn-inputforge",
-  "version": "0.1.2",
-  "description": "A production-ready, highly customizable input field system for React Native (bare CLI) — text/email/number/phone/password/search fields, description fields, chat input, built-in validation, theming, icons, and keyboard-aware form navigation.",
+  "version": "0.3.0",
+  "description": "A production-ready, highly customizable input field system for React Native (bare CLI) — text/email/number/phone/password/search fields, description fields, chat input, and a single/multi-select dropdown (bottom sheet, popup, or inline), with built-in validation, theming, icons, and keyboard-aware form navigation.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -33,21 +33,17 @@
     "form",
     "form-builder",
     "chat-input",
+    "dropdown",
+    "select",
+    "multi-select",
+    "bottom-sheet",
     "keyboard-aware",
     "validation",
     "typescript",
     "bare-react-native-cli"
   ],
-  "author": "Saad Waheed Khan",
+  "author": "Your Name <you@example.com>",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/saadwaheed10/rn-inputforge.git"
-  },
-  "homepage": "https://github.com/saadwaheed10/rn-inputforge#readme",
-  "bugs": {
-    "url": "https://github.com/saadwaheed10/rn-inputforge/issues"
-  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.73.0"
@@ -59,7 +55,7 @@
     "prettier": "^3.4.2",
     "react": "19.2.8",
     "react-native": "0.86.2",
-    "react-native-builder-bob": "^0.43.0",
+    "react-native-builder-bob": "^0.41.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.3"
   },

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;