rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowTags/FieldFlowTags.tsx

@@ -0,0 +1,319 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { borderColorFor, labelColorFor } from '../FieldFlowInput/styles';
+import { renderFieldFlowIcon, type FieldFlowIconSource } from '../../icons';
+import type { DeepPartial, FieldFlowTheme, FieldFlowVariant } from '../../types';
+
+export interface FieldFlowTagsProps {
+  value?: string[];
+  onChange: (tags: string[]) => void;
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  hasError?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /** Max number of tags. */
+  maxTags?: number;
+  /** Max characters per tag. Default: 32. */
+  maxTagLength?: number;
+  /** Separators that commit the current draft. Default: enter + comma. */
+  separators?: Array<',' | ' ' | 'enter'>;
+  /** Allow duplicate tags. Default: false. */
+  allowDuplicates?: boolean;
+  /** Transform each tag before commit (default: trim). */
+  transformTag?: (raw: string) => string;
+  leftIcon?: FieldFlowIconSource | null;
+  variant?: FieldFlowVariant;
+  containerStyle?: ViewStyle;
+  inputContainerStyle?: ViewStyle;
+  tagStyle?: ViewStyle;
+  tagTextStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  helperStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Multi-value chip / tags input — skills, interests, keywords.
+ * Type a value and press Enter or comma to commit.
+ */
+export function FieldFlowTags({
+  value,
+  onChange,
+  label,
+  placeholder = 'Add a tag…',
+  helperText,
+  errorText,
+  hasError,
+  disabled,
+  required,
+  maxTags,
+  maxTagLength = 32,
+  separators = [',', 'enter'],
+  allowDuplicates = false,
+  transformTag = raw => raw.trim(),
+  leftIcon = 'hash',
+  variant = 'outlined',
+  containerStyle,
+  inputContainerStyle,
+  tagStyle,
+  tagTextStyle,
+  labelStyle,
+  helperStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowTagsProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+
+  const tags = value ?? [];
+  const [draft, setDraft] = useState('');
+  const [focused, setFocused] = useState(false);
+
+  const state = useFieldState({
+    isFocused: focused,
+    hasError: Boolean(hasError || errorText),
+    disabled,
+  });
+  const styles = useMemo(() => createStyles(theme, state, variant), [theme, state, variant]);
+  const atMax = maxTags !== undefined && tags.length >= maxTags;
+
+  const commit = useCallback(
+    (raw: string) => {
+      const next = transformTag(raw).slice(0, maxTagLength);
+      if (!next) {
+        setDraft('');
+        return;
+      }
+      if (atMax) {
+        setDraft('');
+        return;
+      }
+      if (!allowDuplicates && tags.some(t => t.toLowerCase() === next.toLowerCase())) {
+        setDraft('');
+        return;
+      }
+      onChange([...tags, next]);
+      setDraft('');
+    },
+    [allowDuplicates, atMax, maxTagLength, onChange, tags, transformTag],
+  );
+
+  const removeAt = useCallback(
+    (index: number) => {
+      if (disabled) return;
+      onChange(tags.filter((_, i) => i !== index));
+    },
+    [disabled, onChange, tags],
+  );
+
+  const onChangeText = useCallback(
+    (text: string) => {
+      if (separators.includes(',') && text.includes(',')) {
+        const parts = text.split(',');
+        const last = parts.pop() ?? '';
+        for (const part of parts) commit(part);
+        setDraft(last);
+        return;
+      }
+      if (separators.includes(' ') && text.endsWith(' ') && text.trim()) {
+        commit(text);
+        return;
+      }
+      setDraft(text.slice(0, maxTagLength));
+    },
+    [commit, maxTagLength, separators],
+  );
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={[styles.inputContainer, inputContainerStyle]}>
+        {leftIcon ? (
+          <View style={styles.iconSlot}>{renderFieldFlowIcon(leftIcon, theme.colors.icon, 16)}</View>
+        ) : null}
+
+        <View style={styles.chips}>
+          {tags.map((tag, index) => (
+            <Pressable
+              key={`${tag}-${index}`}
+              onPress={() => removeAt(index)}
+              disabled={disabled}
+              style={[styles.tag, tagStyle]}
+              accessibilityRole="button"
+              accessibilityLabel={`Remove ${tag}`}
+            >
+              <Text style={[styles.tagText, tagTextStyle]} numberOfLines={1}>
+                {tag}
+              </Text>
+              {!disabled ? renderFieldFlowIcon('clear', theme.colors.icon, 10) : null}
+            </Pressable>
+          ))}
+
+          {!atMax && !disabled ? (
+            <TextInput
+              value={draft}
+              onChangeText={onChangeText}
+              onFocus={() => setFocused(true)}
+              onBlur={() => {
+                setFocused(false);
+                if (draft.trim()) commit(draft);
+              }}
+              onSubmitEditing={() => {
+                if (separators.includes('enter')) commit(draft);
+              }}
+              placeholder={tags.length === 0 ? placeholder : ''}
+              placeholderTextColor={theme.colors.placeholder}
+              editable={!disabled}
+              style={styles.input}
+              autoCapitalize="none"
+              autoCorrect={false}
+              blurOnSubmit={false}
+              returnKeyType="done"
+              accessibilityLabel={label ?? 'Tags'}
+            />
+          ) : null}
+        </View>
+      </View>
+
+      {(helperText || errorText || maxTags !== undefined) && (
+        <View style={styles.footer}>
+          {errorText ? (
+            <Text style={[styles.errorText, helperStyle]}>{errorText}</Text>
+          ) : helperText ? (
+            <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
+          ) : (
+            <View />
+          )}
+          {maxTags !== undefined ? (
+            <Text style={styles.counter}>
+              {tags.length}/{maxTags}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function createStyles(
+  theme: FieldFlowTheme,
+  state: ReturnType<typeof useFieldState>,
+  variant: FieldFlowVariant,
+) {
+  const isUnderline = variant === 'underline';
+  const isFilled = variant === 'filled';
+  const borderW = state === 'focused' ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth;
+
+  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',
+      fontFamily: theme.typography.fontFamily,
+    },
+    inputContainer: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      backgroundColor:
+        state === 'disabled'
+          ? theme.colors.backgroundDisabled
+          : isFilled
+            ? theme.colors.backgroundDisabled
+            : isUnderline
+              ? 'transparent'
+              : theme.colors.background,
+      borderRadius: isUnderline ? 0 : theme.spacing.borderRadius,
+      borderWidth: isUnderline ? 0 : isFilled ? 0 : borderW,
+      borderBottomWidth: isUnderline ? borderW + (state === 'focused' ? 0.5 : 0) : isFilled ? 0 : borderW,
+      borderColor: borderColorFor(theme, state),
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      paddingVertical: theme.spacing.paddingVertical / 1.5,
+      minHeight: theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+    },
+    iconSlot: {
+      marginRight: theme.spacing.gap,
+      marginTop: 6,
+    },
+    chips: {
+      flex: 1,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: 6,
+    },
+    tag: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      borderRadius: 999,
+      backgroundColor: theme.colors.backgroundDisabled,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      maxWidth: '100%',
+    },
+    tagText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+      maxWidth: 160,
+    },
+    input: {
+      flexGrow: 1,
+      minWidth: 96,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      paddingVertical: 4,
+      fontFamily: theme.typography.fontFamily,
+    },
+    footer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: theme.spacing.gap / 1.5,
+    },
+    helperText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      flex: 1,
+    },
+    errorText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error,
+      flex: 1,
+    },
+    counter: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      marginLeft: theme.spacing.gap,
+    },
+  });
+}

package/src/components/FieldFlowTags/index.ts

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

package/src/components/FieldFlowTypeahead/FieldFlowTypeahead.tsx

@@ -0,0 +1,261 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  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 type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+
+export type FieldFlowTypeaheadFetcher = (
+  query: string,
+) => Promise<FieldFlowOption[]> | FieldFlowOption[];
+
+export interface FieldFlowTypeaheadProps {
+  value?: string | null;
+  /** Selected option label for display when value is set. */
+  displayValue?: string;
+  onChange: (value: string | null, option?: FieldFlowOption) => void;
+  /**
+   * Async (or sync) option loader. Debounced by `debounceMs`.
+   * Return [] when nothing matches.
+   */
+  fetchOptions: FieldFlowTypeaheadFetcher;
+  /** Optional static fallback options used when query is empty. */
+  defaultOptions?: FieldFlowOption[];
+  label?: string;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  debounceMs?: number;
+  minChars?: number;
+  emptyText?: string;
+  /** Custom dropdown row. Call `select()` to commit. */
+  renderOption?: (ctx: {
+    option: FieldFlowOption;
+    selected: boolean;
+    select: () => void;
+  }) => React.ReactNode;
+  /** Custom empty / no-results state. */
+  renderEmpty?: (ctx: { query: string; loading: boolean }) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowTypeahead({
+  value,
+  displayValue,
+  onChange,
+  fetchOptions,
+  defaultOptions = [],
+  label,
+  placeholder = 'Search…',
+  helperText,
+  errorText,
+  disabled,
+  required,
+  debounceMs = 300,
+  minChars = 1,
+  emptyText = 'No results',
+  renderOption,
+  renderEmpty,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowTypeaheadProps) {
+  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 [query, setQuery] = useState(displayValue ?? '');
+  const [options, setOptions] = useState<FieldFlowOption[]>(defaultOptions);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const gen = useRef(0);
+
+  useEffect(() => {
+    if (displayValue != null) setQuery(displayValue);
+  }, [displayValue]);
+
+  useEffect(() => {
+    if (!open) return;
+    const q = query.trim();
+    if (q.length < minChars) {
+      setOptions(defaultOptions);
+      setLoading(false);
+      return;
+    }
+
+    const id = setTimeout(async () => {
+      const token = ++gen.current;
+      setLoading(true);
+      try {
+        const result = await fetchOptions(q);
+        if (token === gen.current) setOptions(result);
+      } finally {
+        if (token === gen.current) setLoading(false);
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(id);
+  }, [query, open, debounceMs, minChars, fetchOptions, defaultOptions]);
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.field}>
+        {renderFieldFlowIcon('search', theme.colors.icon, 16)}
+        <TextInput
+          style={styles.input}
+          value={query}
+          editable={!disabled}
+          placeholder={placeholder}
+          placeholderTextColor={theme.colors.placeholder}
+          onFocus={() => setOpen(true)}
+          onChangeText={text => {
+            setQuery(text);
+            setOpen(true);
+            if (value != null) onChange(null);
+          }}
+        />
+        {loading ? <ActivityIndicator size="small" color={theme.colors.borderFocused} /> : null}
+        {query ? (
+          <Pressable
+            onPress={() => {
+              setQuery('');
+              onChange(null);
+              setOptions(defaultOptions);
+            }}
+            hitSlop={8}
+          >
+            {renderFieldFlowIcon('clear', theme.colors.icon, 14)}
+          </Pressable>
+        ) : null}
+      </View>
+
+      {open && !disabled ? (
+        <View style={styles.dropdown}>
+          <FlatList
+            keyboardShouldPersistTaps="handled"
+            data={options}
+            keyExtractor={item => item.value}
+            ListEmptyComponent={
+              loading
+                ? null
+                : renderEmpty
+                  ? <>{renderEmpty({ query, loading })}</>
+                  : <Text style={styles.empty}>{emptyText}</Text>
+            }
+            renderItem={({ item }) => {
+              const select = () => {
+                setQuery(item.label);
+                onChange(item.value, item);
+                setOpen(false);
+              };
+              if (renderOption) {
+                return (
+                  <>
+                    {renderOption({
+                      option: item,
+                      selected: item.value === value,
+                      select,
+                    })}
+                  </>
+                );
+              }
+              return (
+                <Pressable
+                  style={styles.option}
+                  disabled={item.disabled}
+                  onPress={select}
+                >
+                  <Text style={styles.optionLabel}>{item.label}</Text>
+                  {item.description ? (
+                    <Text style={styles.optionDesc}>{item.description}</Text>
+                  ) : null}
+                </Pressable>
+              );
+            }}
+            style={{ maxHeight: 200 }}
+          />
+        </View>
+      ) : null}
+
+      {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, zIndex: 2 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap / 1.5,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    field: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      borderWidth: hasError ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: hasError ? theme.colors.borderError : theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      paddingHorizontal: theme.spacing.paddingHorizontal,
+      backgroundColor: theme.colors.background,
+      minHeight: theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6,
+    },
+    input: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      paddingVertical: theme.spacing.paddingVertical,
+    },
+    dropdown: {
+      marginTop: 4,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.background,
+      overflow: 'hidden',
+    },
+    option: {
+      paddingHorizontal: 14,
+      paddingVertical: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.colors.border,
+    },
+    optionLabel: { color: theme.colors.text, fontSize: theme.typography.fontSize },
+    optionDesc: { color: theme.colors.label, fontSize: theme.typography.helperFontSize, marginTop: 2 },
+    empty: { padding: 14, color: theme.colors.placeholder, textAlign: 'center' },
+    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/FieldFlowTypeahead/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowTypeahead } from './FieldFlowTypeahead';
+export type { FieldFlowTypeaheadProps, FieldFlowTypeaheadFetcher } from './FieldFlowTypeahead';