jp-composter 0.1.0

package/src/SliceUI/input/hooks/useSelectLogic.ts

@@ -0,0 +1,338 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import type { SelectOption, ExtendedInputVariant } from '../Type';
+import { toggleOption, filterAndRankBySearch } from '../utils/selectUtils';
+
+interface UseSelectLogicParams {
+  variant?: ExtendedInputVariant;
+  value?: string | string[];
+  options: SelectOption[];
+  searchable?: boolean;
+  normalizedMultiple?: boolean;
+  onChangeText?: ((value: string) => void) | ((value: string | string[]) => void);
+  disabled?: boolean;
+  focusInput?: () => void;
+  maxAllowed?: number;
+}
+
+function useStableState<T>(initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+  const [state, setState] = useState<T>(initialValue);
+  const setStable = useCallback((value: T | ((prev: T) => T)) => {
+    setState(value);
+  }, []);
+  return [state, setStable];
+}
+
+export const useSelectLogic = ({
+  variant,
+  value,
+  options,
+  searchable = false,
+  normalizedMultiple,
+  onChangeText,
+  disabled = false,
+  focusInput,
+  maxAllowed,
+}: UseSelectLogicParams) => {
+  const [selectDropdownOpen, setSelectDropdownOpen] = useStableState(false);
+  const [searchValue, setSearchValue] = useStableState('');
+  const [debouncedSearchValue, setDebouncedSearchValue] = useStableState('');
+
+  const optionRefs = useRef<Map<number, HTMLElement>>(new Map());
+  const prevSelectDropdownOpen = useRef(selectDropdownOpen);
+  const searchValueRef = useRef(searchValue);
+  const filteredOptionsRef = useRef<SelectOption[]>(options);
+
+  const suppressNextOpenRef = useRef(false);
+
+  const selectedValues = useMemo(() => {
+    if (normalizedMultiple) {
+      return Array.isArray(value) ? value : [];
+    }
+    return value && typeof value === 'string' ? [value] : [];
+  }, [normalizedMultiple, value]);
+
+  const filteredOptions = useMemo(() => {
+    const base = options;
+
+    if (!searchable || !debouncedSearchValue.trim()) {
+      return base;
+    }
+
+    return filterAndRankBySearch(base, debouncedSearchValue, o => o.label);
+  }, [options, searchable, debouncedSearchValue]);
+
+  useEffect(() => {
+    filteredOptionsRef.current = filteredOptions;
+  }, [filteredOptions]);
+
+  useEffect(() => {
+    prevSelectDropdownOpen.current = selectDropdownOpen;
+  }, [selectDropdownOpen]);
+
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setDebouncedSearchValue(searchValue);
+    }, 250);
+    return () => clearTimeout(t);
+  }, [searchValue, setDebouncedSearchValue]);
+
+  useEffect(() => {
+    searchValueRef.current = searchValue;
+  }, [searchValue]);
+
+  useEffect(() => {
+    if (selectDropdownOpen) return;
+    if (searchValue !== '') {
+      setSearchValue('');
+    }
+  }, [selectDropdownOpen, searchValue, setSearchValue]);
+
+  const handleCheckboxToggle = useCallback((value: string, checked: boolean) => {
+    if (!normalizedMultiple) return;
+    if (disabled) return;
+
+    if (checked && maxAllowed !== undefined && selectedValues.length >= maxAllowed) {
+      return;
+    }
+
+    const next = checked
+      ? [...selectedValues, value]
+      : selectedValues.filter(v => v !== value);
+
+    (onChangeText as any)?.(next);
+    setSearchValue('');
+  }, [normalizedMultiple, disabled, selectedValues, onChangeText, setSearchValue, maxAllowed]);
+
+  const handleSelectKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (variant !== 'select') return;
+      if (disabled) return;
+
+      e.stopPropagation();
+
+      switch (e.key) {
+        case 'Enter': {
+          e.preventDefault();
+
+          if (!selectDropdownOpen) {
+            setSelectDropdownOpen(true);
+            return;
+          }
+
+          let didSelect = false;
+
+          if (searchValueRef.current) {
+            const searchBase = filterAndRankBySearch(options, searchValueRef.current, o => o.label);
+            const exactMatch = searchBase.find(
+              o => o.label.toLowerCase() === searchValueRef.current.toLowerCase(),
+            );
+
+            if (exactMatch) {
+              (onChangeText as any)?.(
+                normalizedMultiple
+                  ? toggleOption(selectedValues, exactMatch.value)
+                  : exactMatch.value,
+              );
+              didSelect = true;
+            } else if (searchBase.length === 1) {
+              const only = searchBase[0];
+              (onChangeText as any)?.(
+                normalizedMultiple
+                  ? toggleOption(selectedValues, only.value)
+                  : only.value,
+              );
+              didSelect = true;
+            }
+          }
+
+          if (!didSelect) {
+            const focusedEntry = Array.from(optionRefs.current.entries())
+              .find(([, el]) => el === (document.activeElement as HTMLElement));
+            if (!focusedEntry) return;
+            const [focusedIndex] = focusedEntry;
+            const option = filteredOptionsRef.current[focusedIndex];
+            if (!option) return;
+
+            (onChangeText as any)?.(
+              normalizedMultiple
+                ? toggleOption(selectedValues, option.value)
+                : option.value,
+            );
+            didSelect = true;
+          }
+
+          if (didSelect) {
+            setSearchValue('');
+            if (!normalizedMultiple) {
+              setSelectDropdownOpen(false);
+            }
+
+            suppressNextOpenRef.current = true;
+            focusInput?.();
+          }
+
+          break;
+        }
+        case ' ': {
+          if (!selectDropdownOpen) {
+            e.preventDefault();
+            setSelectDropdownOpen(true);
+          }
+          break;
+        }
+        case 'Backspace': {
+          if (!searchValueRef.current) {
+            if (normalizedMultiple && selectedValues.length > 0) {
+              e.preventDefault();
+              const next = selectedValues.slice(0, -1);
+              (onChangeText as any)?.(next);
+            } else if (!normalizedMultiple && value && typeof value === 'string') {
+              e.preventDefault();
+              (onChangeText as any)?.('');
+              if (searchable && !selectDropdownOpen) {
+                setSelectDropdownOpen(true);
+              }
+            }
+          }
+          break;
+        }
+
+        case 'ArrowDown': {
+          e.preventDefault();
+
+          if (!selectDropdownOpen) {
+            setSelectDropdownOpen(true);
+            return;
+          }
+
+          const entries = Array.from(optionRefs.current.entries()).sort(
+            (a, b) => a[0] - b[0],
+          );
+          const currentIdx = entries.findIndex(([, el]) => el === (document.activeElement as HTMLElement));
+          const nextIdx = currentIdx < 0 ? 0 : Math.min(currentIdx + 1, entries.length - 1);
+          const nextEl = entries[nextIdx]?.[1];
+          if (nextEl) {
+            nextEl.focus();
+            nextEl.scrollIntoView({ block: 'nearest' });
+          }
+          break;
+        }
+
+        case 'ArrowUp': {
+          e.preventDefault();
+          if (!selectDropdownOpen) return;
+
+          const entries = Array.from(optionRefs.current.entries()).sort(
+            (a, b) => a[0] - b[0],
+          );
+          const currentIdx = entries.findIndex(([, el]) => el === (document.activeElement as HTMLElement));
+          const prevIdx = currentIdx < 0 ? 0 : Math.max(currentIdx - 1, 0);
+          const prevEl = entries[prevIdx]?.[1];
+          if (prevEl) {
+            prevEl.focus();
+            prevEl.scrollIntoView({ block: 'nearest' });
+          }
+          break;
+        }
+
+        case 'Escape': {
+          e.preventDefault();
+          setSelectDropdownOpen(false);
+          (e.currentTarget as HTMLElement).blur();
+          break;
+        }
+
+      }
+    },
+    [
+      variant,
+      selectDropdownOpen,
+      normalizedMultiple,
+      selectedValues,
+      options,
+      onChangeText,
+      disabled,
+      value,
+      searchable,
+      focusInput,
+      setSelectDropdownOpen,
+      setSearchValue,
+      optionRefs,
+    ],
+  );
+
+  const handleOptionSelect = useCallback(
+    (optionValue: string) => {
+      if (disabled) return;
+
+      if (normalizedMultiple) {
+        // MULTI SELECT
+        if (
+          !selectedValues.includes(optionValue) &&
+          maxAllowed !== undefined &&
+          selectedValues.length >= maxAllowed
+        ) {
+          return;
+        }
+
+        const next = toggleOption(selectedValues, optionValue);
+        (onChangeText as any)?.(next);
+
+        // Clear search but DO NOT refocus the input.
+        // Refocusing triggers onFocus -> onOpen -> dropdown flicker.
+        setSearchValue('');
+        return;
+      }
+
+      // SINGLE SELECT
+      if (value === optionValue) {
+        (onChangeText as any)?.('');
+      } else {
+        (onChangeText as any)?.(optionValue);
+      }
+
+      setSearchValue('');
+      setSelectDropdownOpen(false);
+
+      // Single select should refocus, but we must suppress the next onFocus
+      // from re-opening the dropdown (onFocus={onOpen} on the search TextInput).
+      suppressNextOpenRef.current = true;
+      focusInput?.();
+    },
+    [
+      normalizedMultiple,
+      selectedValues,
+      onChangeText,
+      disabled,
+      focusInput,
+      value,
+      maxAllowed,
+      setSearchValue,
+      setSelectDropdownOpen,
+    ],
+  );
+
+
+
+  const registerOptionRef = useCallback((index: number, element: HTMLElement | null) => {
+    if (element) {
+      optionRefs.current.set(index, element);
+    } else {
+      optionRefs.current.delete(index);
+    }
+  }, []);
+
+  return {
+    selectDropdownOpen,
+    setSelectDropdownOpen,
+    searchValue,
+    setSearchValue,
+    filteredOptions,
+    selectedValues,
+    handleSelectKeyDown,
+    handleOptionSelect,
+    handleCheckboxToggle,
+    registerOptionRef,
+    suppressNextOpenRef,
+  };
+};

package/src/SliceUI/input/utils/inputUtils.ts

@@ -0,0 +1,120 @@
+import { Platform } from 'react-native';
+import type { ExtendedInputVariant, SelectListType, SelectOption } from '../Type';
+
+export const isWeb = Platform.OS === 'web';
+
+export const currencySymbols: Record<string, string> = {
+  USD: '$',
+  EUR: '€',
+  INR: '₹',
+  JPY: '¥',
+  GBP: '£',
+};
+
+export const availableCurrencies = [
+  'USD',
+  'EUR',
+  'INR',
+  'JPY',
+  'GBP',
+];
+
+export const labelLeftOffsetBySize: Record<string, number> = {
+  small: 36,
+  medium: 40,
+  large: 48,
+  xlarge: 56,
+  xxlarge: 64,
+};
+
+export const getNormalizedVariant = (
+  variant?: ExtendedInputVariant,
+): ExtendedInputVariant | 'select' => {
+  return variant === 'checkbox' ? 'select' : variant ?? 'outlined';
+};
+
+export const getNormalizedMultiple = (
+  variant?: ExtendedInputVariant,
+  multiple?: boolean,
+): boolean | undefined => {
+  return variant === 'checkbox' ? true : multiple;
+};
+
+export const getNormalizedListType = (
+  variant?: ExtendedInputVariant,
+  listType?: SelectListType,
+): SelectListType => {
+  return variant === 'checkbox' ? 'checkbox' : listType ?? 'default';
+};
+
+export const isSelectVariant = (
+  variant?: ExtendedInputVariant,
+): boolean => {
+  return (
+    variant === 'select' ||
+    variant === 'checkbox'
+  );
+};
+
+export const isMultiSelect = (
+  normalizedMultiple?: boolean,
+): boolean => {
+  return normalizedMultiple === true;
+};
+
+interface GetDisplayValueParams {
+  variant?: ExtendedInputVariant;
+  value?: string | string[];
+  selectedValues: string[];
+  options: SelectOption[];
+  labelText?: string;
+  placeholder?: string;
+  normalizedMultiple?: boolean;
+}
+
+export const getDisplayValue = ({
+  variant,
+  value,
+  selectedValues,
+  options,
+  labelText,
+  placeholder,
+  normalizedMultiple,
+}: GetDisplayValueParams): string => {
+  if (variant !== 'select') {
+    return typeof value === 'string'
+      ? value || (!labelText ? placeholder ?? '' : '')
+      : '';
+  }
+
+  if (!normalizedMultiple) {
+    const stringValue = typeof value === 'string' ? value : '';
+    return (
+      options.find(o => o.value === stringValue)?.label ??
+      (!labelText ? placeholder ?? '' : '')
+    );
+  }
+
+  if (selectedValues.length === 0) {
+    return !labelText ? placeholder ?? '' : '';
+  }
+
+  if (selectedValues.length === 1) {
+    return (
+      options.find(o => o.value === selectedValues[0])?.label ?? ''
+    );
+  }
+
+  if (selectedValues.length === 2) {
+    return selectedValues
+      .map(v => options.find(o => o.value === v)?.label)
+      .filter(Boolean)
+      .join(', ');
+  }
+
+  const first =
+    options.find(o => o.value === selectedValues[0])?.label ?? '';
+
+  return `${first} +${selectedValues.length - 1}`;
+};
+

package/src/SliceUI/input/utils/selectUtils.ts

@@ -0,0 +1,85 @@
+import type { SelectOption } from '../Type';
+
+export const optionExists = (
+  selectedValues: string[],
+  value: string,
+): boolean => {
+  return selectedValues.includes(value);
+};
+
+export const toggleOption = (
+  selectedValues: string[],
+  value: string,
+): string[] => {
+  const exists = selectedValues.includes(value);
+
+  return exists
+    ? selectedValues.filter(v => v !== value)
+    : [...selectedValues, value];
+};
+
+export const removeOption = (
+  selectedValues: string[],
+  value: string,
+): string[] => {
+  return selectedValues.filter(v => v !== value);
+};
+
+export const removeLastSelected = (
+  selectedValues: string[],
+): string[] => {
+  if (selectedValues.length === 0) return selectedValues;
+
+  return selectedValues.slice(0, -1);
+};
+
+export function filterAndRankBySearch<T>(
+  items: T[],
+  query: string,
+  getLabel: (item: T) => string,
+): T[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  
+  const scored = items
+    .map((item, index) => {
+      const label = getLabel(item);
+      const lowerLabel = label.toLowerCase();
+      const tokens = lowerLabel.split(/\s+/);
+      let score = 0;
+      
+      if (lowerLabel === q) {
+        score = 1000; 
+      } else if (lowerLabel.startsWith(q + ' ') || lowerLabel.startsWith(q)) {
+        score = 500;
+      } else {
+        for (let i = 0; i < tokens.length; i++) {
+          const token = tokens[i];
+          if (token === q) {
+            score = Math.max(score, 100 - i * 10);
+          } else if (token.startsWith(q)) {
+            score = Math.max(score, 80 - i * 10);
+          } else if (token.includes(q)) {
+            score = Math.max(score, 60 - i * 10);
+          }
+        }
+        
+        if (score === 0 && lowerLabel.includes(q)) {
+          score = 40;
+        }
+      }
+      
+      return score > 0 ? { item, score, index } : null;
+    })
+    .filter(Boolean) as { item: T; score: number; index: number }[];
+    
+  return scored
+    .sort((a, b) => {
+      if (b.score !== a.score) {
+        return b.score - a.score;
+      }
+      return a.index - b.index;
+    })
+    .map(entry => entry.item);
+}
+

package/src/SliceUI/input/utils/styleUtils.ts

@@ -0,0 +1,50 @@
+import type { ExtendedTheme } from '../../colors/Type';
+import type { InputVariantType } from '../Type';
+
+export const getInputBackgroundColor = (
+  variant: InputVariantType,
+  state: 'default' | 'hover' | 'focused',
+  theme: ExtendedTheme
+): string => {
+  if (variant === 'filled') {
+    return theme.colors.colorBackgroundLight;
+  }
+  return 'transparent';
+};
+
+export const getInputBorderColor = (
+  variant: InputVariantType,
+  state: 'default' | 'hover' | 'focused' | 'error',
+  theme: ExtendedTheme
+): string => {
+  if (state === 'error') {
+    return theme.colors.colorBorderNegative;
+  }
+  if (state === 'focused') {
+    return theme.colors.colorBorderAccent;
+  }
+  if (state === 'hover') {
+    return theme.colors.colorBorderMedium;
+  }
+  return theme.colors.colorBorderSubtle;
+};
+
+export const getInputTextColor = (
+  variant: InputVariantType,
+  state: 'default' | 'disabled',
+  theme: ExtendedTheme
+): string => {
+  if (state === 'disabled') {
+    return theme.colors.colorForegroundTertiary;
+  }
+  return theme.colors.colorForegroundPrimary;
+};
+
+export const formatPhoneNumber = (value: string): string => {
+  const cleaned = value.replace(/\D/g, '');
+  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    return `${match[1]}-${match[2]}-${match[3]}`;
+  }
+  return value;
+}; 

package/src/SliceUI/input/variants/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,16 @@
+// CurrencyInput/CurrencyInput.tsx
+import React from 'react';
+import { isWeb } from '../../utils/inputUtils';
+import type { CurrencyInputProps } from './types';
+import NativeCurrencyInput from './NativeCurrencyInput';
+import WebCurrencyInput from './WebCurrencyInput';
+
+const CurrencyInput = (props: CurrencyInputProps) => {
+  if (isWeb) {
+    return <WebCurrencyInput {...props} />;
+  }
+
+  return <NativeCurrencyInput {...props} />;
+};
+
+export default CurrencyInput;