@umituz/react-native-design-system 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -105,4 +105,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/molecules/SearchBar/SearchBar.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef } from 'react';
+import {
+    View,
+    TextInput,
+    TouchableOpacity,
+    ActivityIndicator,
+    StyleSheet,
+} from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicIcon } from '../../atoms/AtomicIcon';
+import type { SearchBarProps } from './types';
+
+export const SearchBar = forwardRef<TextInput, SearchBarProps>(({
+    value,
+    onChangeText,
+    onSubmit,
+    onClear,
+    onFocus,
+    onBlur,
+    placeholder = 'Search...',
+    autoFocus = false,
+    loading = false,
+    disabled = false,
+    containerStyle,
+    inputStyle,
+    testID,
+}, ref) => {
+    const tokens = useAppDesignTokens();
+
+    const handleClear = () => {
+        onChangeText('');
+        onClear?.();
+    };
+
+    const showClear = value.length > 0 && !loading;
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: tokens.colors.surfaceVariant,
+                    borderColor: tokens.colors.border,
+                },
+                containerStyle,
+            ]}
+            testID={testID}
+        >
+            <View style={styles.iconContainer}>
+                <AtomicIcon
+                    name="search"
+                    size="md"
+                    customColor={tokens.colors.textSecondary}
+                />
+            </View>
+
+            <TextInput
+                ref={ref}
+                value={value}
+                onChangeText={onChangeText}
+                onSubmitEditing={onSubmit}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                placeholder={placeholder}
+                placeholderTextColor={tokens.colors.textSecondary}
+                autoFocus={autoFocus}
+                editable={!disabled}
+                returnKeyType="search"
+                autoCapitalize="none"
+                autoCorrect={false}
+                style={[
+                    styles.input,
+                    {
+                        color: tokens.colors.textPrimary,
+                        fontSize: 16, // Body medium usually
+                    },
+                    inputStyle,
+                ]}
+            />
+
+            {(loading || showClear) && (
+                <View style={styles.rightActions}>
+                    {loading && (
+                        <ActivityIndicator
+                            size="small"
+                            color={tokens.colors.primary}
+                            style={styles.loader}
+                        />
+                    )}
+
+                    {showClear && (
+                        <TouchableOpacity
+                            onPress={handleClear}
+                            style={styles.clearButton}
+                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            accessibilityRole="button"
+                            accessibilityLabel="Clear search"
+                        >
+                            <AtomicIcon
+                                name="close-circle"
+                                size="md"
+                                customColor={tokens.colors.textSecondary}
+                            />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            )}
+        </View>
+    );
+});
+
+SearchBar.displayName = 'SearchBar';
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        height: 48,
+        borderRadius: 24, // Pill shape
+        borderWidth: 1,
+    },
+    iconContainer: {
+        marginRight: 8,
+    },
+    input: {
+        flex: 1,
+        height: '100%',
+        paddingVertical: 0, // Reset default padding
+    },
+    rightActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: 8,
+    },
+    loader: {
+        marginRight: 8,
+    },
+    clearButton: {
+        padding: 2,
+    },
+});

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import {
+    View,
+    TouchableOpacity,
+    StyleSheet,
+} from 'react-native';
+import { AtomicText } from '../../atoms/AtomicText';
+import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { useAppDesignTokens } from '../../theme';
+import type { SearchHistoryProps } from './types';
+
+export const SearchHistory: React.FC<SearchHistoryProps> = ({
+    history,
+    onSelectItem,
+    onRemoveItem,
+    onClearAll,
+    maxItems = 10,
+    style,
+    title = 'Recent Searches',
+    clearLabel = 'Clear All',
+}) => {
+    const tokens = useAppDesignTokens();
+
+    if (!history || history.length === 0) {
+        return null;
+    }
+
+    const displayedHistory = history.slice(0, maxItems);
+
+    return (
+        <View style={[styles.container, style]}>
+            <View style={styles.header}>
+                <AtomicText
+                    type="labelLarge"
+                    style={{ color: tokens.colors.textSecondary }}
+                >
+                    {title}
+                </AtomicText>
+                <TouchableOpacity
+                    onPress={onClearAll}
+                    style={styles.clearButton}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                    <AtomicText
+                        type="labelMedium"
+                        style={{ color: tokens.colors.primary }}
+                    >
+                        {clearLabel}
+                    </AtomicText>
+                </TouchableOpacity>
+            </View>
+
+            {displayedHistory.map((item) => (
+                <TouchableOpacity
+                    key={item.id}
+                    onPress={() => onSelectItem(item.query)}
+                    style={styles.item}
+                >
+                    <View style={styles.itemLeft}>
+                        <AtomicIcon
+                            name="time-outline"
+                            size="sm"
+                            customColor={tokens.colors.textSecondary}
+                        />
+                        <AtomicText
+                            type="bodyMedium"
+                            style={[
+                                styles.itemText,
+                                { color: tokens.colors.textPrimary }
+                            ]}
+                            numberOfLines={1}
+                        >
+                            {item.query}
+                        </AtomicText>
+                    </View>
+
+                    <TouchableOpacity
+                        onPress={() => onRemoveItem(item.id)}
+                        style={styles.removeButton}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    >
+                        <AtomicIcon
+                            name="close"
+                            size="sm"
+                            customColor={tokens.colors.textSecondary}
+                        />
+                    </TouchableOpacity>
+                </TouchableOpacity>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        marginBottom: 4,
+    },
+    clearButton: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        minHeight: 48,
+    },
+    itemLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        marginRight: 12,
+    },
+    itemText: {
+        marginLeft: 12,
+        flex: 1,
+    },
+    removeButton: {
+        padding: 4,
+    },
+});

package/src/molecules/SearchBar/SearchSuggestions.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+    View,
+    TouchableOpacity,
+    StyleSheet,
+} from 'react-native';
+import { AtomicText } from '../../atoms/AtomicText';
+import { useAppDesignTokens } from '../../theme';
+import type { SearchSuggestionsProps } from './types';
+
+export function SearchSuggestions<T>({
+    query,
+    suggestions,
+    renderItem,
+    onSelectSuggestion,
+    maxSuggestions = 5,
+    style,
+    emptyComponent,
+}: SearchSuggestionsProps<T>) {
+    const tokens = useAppDesignTokens();
+
+    if (!query.trim() && !emptyComponent) {
+        return null;
+    }
+
+    if (suggestions.length === 0) {
+        return <>{emptyComponent}</>;
+    }
+
+    const displayedSuggestions = suggestions.slice(0, maxSuggestions);
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: tokens.colors.surface,
+                },
+                style,
+            ]}
+        >
+            {displayedSuggestions.map((item, index) => (
+                <TouchableOpacity
+                    key={index}
+                    onPress={() => onSelectSuggestion(item)}
+                    style={[
+                        styles.item,
+                        index > 0 ? {
+                            borderTopWidth: 1,
+                            borderTopColor: tokens.colors.border,
+                        } : undefined,
+                    ]}
+                >
+                    {renderItem(item, query)}
+                </TouchableOpacity>
+            ))}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    item: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        minHeight: 48,
+        justifyContent: 'center',
+    },
+});
+
+/**
+ * Default suggestion renderer (simple text with highlighting)
+ */
+export const DefaultSuggestionRenderer = (
+    text: string,
+    query: string,
+    tokens: ReturnType<typeof useAppDesignTokens>
+) => {
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    const index = lowerText.indexOf(lowerQuery);
+
+    if (index === -1) {
+        return (
+            <AtomicText
+                type="bodyMedium"
+                style={{ color: tokens.colors.textPrimary }}
+            >
+                {text}
+            </AtomicText>
+        );
+    }
+
+    const before = text.slice(0, index);
+    const match = text.slice(index, index + query.length);
+    const after = text.slice(index + query.length);
+
+    return (
+        <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.textPrimary }}
+        >
+            {before}
+            <AtomicText type="bodyMedium" style={{ fontWeight: '700', color: tokens.colors.primary }}>
+                {match}
+            </AtomicText>
+            {after}
+        </AtomicText>
+    );
+};

package/src/molecules/SearchBar/index.ts

@@ -0,0 +1,4 @@
+export * from './SearchBar';
+export * from './SearchHistory';
+export * from './SearchSuggestions';
+export * from './types';

package/src/molecules/SearchBar/types.ts

@@ -0,0 +1,46 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface SearchHistoryItem {
+    id: string;
+    query: string;
+    timestamp: number;
+}
+
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    onSubmit?: () => void;
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    showCancelButton?: boolean;
+    onCancel?: () => void;
+    containerStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+
+export interface SearchHistoryProps {
+    history: SearchHistoryItem[];
+    onSelectItem: (query: string) => void;
+    onRemoveItem: (id: string) => void;
+    onClearAll: () => void;
+    maxItems?: number;
+    style?: StyleProp<ViewStyle>;
+    title?: string;
+    clearLabel?: string;
+}
+
+export interface SearchSuggestionsProps<T> {
+    query: string;
+    suggestions: T[];
+    renderItem: (item: T, query: string) => React.ReactNode;
+    onSelectSuggestion: (item: T) => void;
+    maxSuggestions?: number;
+    style?: StyleProp<ViewStyle>;
+    emptyComponent?: React.ReactNode;
+}

package/src/molecules/SearchBar.tsx

@@ -1,198 +0,0 @@
-/**
- * SearchBar Molecule - Enhanced Search Input with Clear Button
- *
- * Universal search input with clear functionality and loading state
- * Fully configurable for general purpose use
- */
-
-import React from 'react';
-import {
-  View,
-  TextInput,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { useAppDesignTokens } from '../theme';
-import { AtomicIcon } from '../atoms';
-
-export interface SearchBarProps {
-  value: string;
-  onChangeText: (text: string) => void;
-  onSubmit?: () => void;
-  onClear?: () => void;
-  placeholder?: string;
-  autoFocus?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  containerStyle?: ViewStyle;
-  searchIconName?: string;
-  clearIconName?: string;
-}
-
-const useSearchBarLogic = (
-  value: string,
-  loading: boolean,
-  onChangeText: (text: string) => void,
-  onClear?: () => void,
-  onSubmit?: () => void
-) => {
-  const handleClear = React.useCallback(() => {
-    onChangeText('');
-    onClear?.();
-  }, [onChangeText, onClear]);
-
-  const handleSubmit = React.useCallback(() => {
-    onSubmit?.();
-  }, [onSubmit]);
-
-  const showClear = React.useMemo(() =>
-    value.length > 0 && !loading, [value, loading]
-  );
-
-  return { handleClear, handleSubmit, showClear };
-};
-
-const SearchBarInput: React.FC<{
-  value: string;
-  placeholder?: string;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-  onChangeText: (text: string) => void;
-  onSubmitEditing?: () => void;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}> = ({ value, placeholder, autoFocus, disabled, style, onChangeText, onSubmitEditing, tokens }) => {
-  const styles = React.useMemo(() => getSearchBarStyles(), []);
-
-  const inputStyle = React.useMemo(() => [
-    styles.input,
-    {
-      color: tokens.colors.textPrimary,
-      ...tokens.typography.bodyMedium,
-    },
-  ], [styles.input, tokens.colors.textPrimary, tokens.typography.bodyMedium]);
-
-  return (
-    <TextInput
-      value={value}
-      onChangeText={onChangeText}
-      onSubmitEditing={onSubmitEditing}
-      placeholder={placeholder}
-      placeholderTextColor={tokens.colors.textSecondary}
-      autoFocus={autoFocus}
-      editable={!disabled}
-      returnKeyType="search"
-      autoCapitalize="none"
-      autoCorrect={false}
-      style={[inputStyle, style]}
-    />
-  );
-};
-
-const SearchBarIcons: React.FC<{
-  searchIconName: string;
-  clearIconName: string;
-  loading: boolean;
-  showClear: boolean;
-  onClear: () => void;
-  tokens: ReturnType<typeof useAppDesignTokens>;
-}> = ({ searchIconName, clearIconName, loading, showClear, onClear, tokens }) => {
-  const styles = React.useMemo(() => getSearchBarStyles(), []);
-
-  return (
-    <>
-      <AtomicIcon
-        name={searchIconName}
-        customSize={20}
-        customColor={tokens.colors.textSecondary}
-        style={styles.searchIcon}
-      />
-
-      {loading && (
-        <ActivityIndicator
-          size="small"
-          color={tokens.colors.primary}
-          style={styles.icon}
-        />
-      )}
-
-      {showClear && (
-        <TouchableOpacity onPress={onClear} style={styles.icon}>
-          <AtomicIcon name={clearIconName} customSize={20} customColor={tokens.colors.textSecondary} />
-        </TouchableOpacity>
-      )}
-    </>
-  );
-};
-
-const SearchBarComponent: React.FC<SearchBarProps> = ({
-  value,
-  onChangeText,
-  onSubmit,
-  onClear,
-  placeholder,
-  autoFocus = false,
-  loading = false,
-  disabled = false,
-  style,
-  containerStyle,
-  searchIconName = 'search',
-  clearIconName = 'close-circle',
-}) => {
-  const tokens = useAppDesignTokens();
-  const { handleClear, handleSubmit, showClear } = useSearchBarLogic(
-    value, loading, onChangeText, onClear, onSubmit
-  );
-
-  return (
-    <View style={containerStyle}>
-      <SearchBarIcons
-        searchIconName={searchIconName}
-        clearIconName={clearIconName}
-        loading={loading}
-        showClear={showClear}
-        onClear={handleClear}
-        tokens={tokens}
-      />
-
-      <SearchBarInput
-        value={value}
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-        disabled={disabled}
-        style={style}
-        onChangeText={onChangeText}
-        onSubmitEditing={handleSubmit}
-        tokens={tokens}
-      />
-    </View>
-  );
-};
-
-export const SearchBar = SearchBarComponent;
-
-const getSearchBarStyles = () => StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 12,
-    minHeight: 44,
-  },
-  searchIcon: {
-    marginRight: 12,
-  },
-  input: {
-    flex: 1,
-    paddingVertical: 0,
-  },
-  icon: {
-    marginLeft: 8,
-  },
-});
-