kynjal-cli 2.0.6

package/dist/templates/components/ui/combobox.tsx

@@ -0,0 +1,624 @@
+import { useColor } from '@/hooks/useColor';
+import { BORDER_RADIUS, CORNERS, FONT_SIZE, HEIGHT } from '@/theme/globals';
+import { ChevronDown } from 'lucide-react-native';
+import React, {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Dimensions,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+// --- 1. DEFINE A SHARED OPTION TYPE ---
+export interface OptionType {
+  value: string;
+  label: string;
+}
+
+// Helper to extract a simple string label from children
+const getLabelFromChildren = (children: ReactNode): string => {
+  let label = '';
+  React.Children.forEach(children, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      label += child;
+    }
+  });
+  return label;
+};
+
+interface ComboboxContextType {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  value: OptionType | null;
+  setValue: (option: OptionType) => void;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  triggerLayout: { x: number; y: number; width: number; height: number };
+  setTriggerLayout: (layout: any) => void;
+  disabled: boolean;
+  multiple: boolean;
+  values: OptionType[];
+  setValues: (options: OptionType[]) => void;
+  filteredItemsCount: number;
+  setFilteredItemsCount: (count: number) => void;
+}
+
+const ComboboxContext = createContext<ComboboxContextType | undefined>(
+  undefined
+);
+
+const useCombobox = () => {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('Combobox components must be used within a Combobox');
+  }
+  return context;
+};
+
+interface ComboboxProps {
+  children: ReactNode;
+  value?: OptionType | null;
+  onValueChange?: (option: OptionType | null) => void;
+  disabled?: boolean;
+  multiple?: boolean;
+  values?: OptionType[];
+  onValuesChange?: (options: OptionType[]) => void;
+}
+
+export function Combobox({
+  children,
+  value = null,
+  onValueChange,
+  disabled = false,
+  multiple = false,
+  values = [],
+  onValuesChange,
+}: ComboboxProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredItemsCount, setFilteredItemsCount] = useState(0);
+  const [triggerLayout, setTriggerLayout] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+
+  const setValue = (newOption: OptionType) => {
+    if (multiple) {
+      const isAlreadySelected = values.some((v) => v.value === newOption.value);
+      const newValues = isAlreadySelected
+        ? values.filter((v) => v.value !== newOption.value)
+        : [...values, newOption];
+      onValuesChange?.(newValues);
+    } else {
+      onValueChange?.(newOption);
+    }
+  };
+
+  const setValues = (newOptions: OptionType[]) => {
+    onValuesChange?.(newOptions);
+  };
+
+  return (
+    <ComboboxContext.Provider
+      value={{
+        isOpen,
+        setIsOpen,
+        value,
+        setValue,
+        searchQuery,
+        setSearchQuery,
+        triggerLayout,
+        setTriggerLayout,
+        disabled,
+        multiple,
+        values,
+        setValues,
+        filteredItemsCount,
+        setFilteredItemsCount,
+      }}
+    >
+      {children}
+    </ComboboxContext.Provider>
+  );
+}
+
+interface ComboboxTriggerProps {
+  children: ReactNode;
+  style?: ViewStyle;
+  error?: boolean;
+}
+
+export function ComboboxTrigger({
+  children,
+  style,
+  error = false,
+}: ComboboxTriggerProps) {
+  const { setIsOpen, setTriggerLayout, disabled, isOpen } = useCombobox();
+  const triggerRef = useRef<React.ComponentRef<typeof TouchableOpacity>>(null);
+  const cardColor = useColor('card');
+  const destructiveColor = useColor('destructive');
+  const mutedColor = useColor('textMuted');
+
+  const measureTrigger = () => {
+    if (triggerRef.current) {
+      triggerRef.current.measure((_x, _y, width, height, pageX, pageY) => {
+        setTriggerLayout({ x: pageX, y: pageY, width, height });
+      });
+    }
+  };
+
+  const handlePress = () => {
+    if (disabled) return;
+    measureTrigger();
+    setIsOpen(true);
+  };
+
+  return (
+    <TouchableOpacity
+      ref={triggerRef}
+      style={[
+        styles.trigger,
+        {
+          backgroundColor: cardColor,
+          borderColor: error ? destructiveColor : cardColor,
+          opacity: disabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <View style={styles.triggerContent}>{children}</View>
+      <ChevronDown
+        size={20}
+        color={mutedColor}
+        strokeWidth={2}
+        style={[
+          styles.chevron,
+          { transform: [{ rotate: isOpen ? '180deg' : '0deg' }] },
+        ]}
+      />
+    </TouchableOpacity>
+  );
+}
+
+interface ComboboxValueProps {
+  placeholder?: string;
+  style?: TextStyle;
+}
+
+export function ComboboxValue({
+  placeholder = 'Select...',
+  style,
+}: ComboboxValueProps) {
+  const { value, values, multiple } = useCombobox();
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+
+  const hasValue = multiple ? values.length > 0 : !!value;
+
+  const displayText = multiple
+    ? values.length === 0
+      ? placeholder
+      : values.length === 1
+      ? values[0].label
+      : `${values.length} selected`
+    : value?.label || placeholder;
+
+  return (
+    <Text
+      style={[
+        styles.valueText,
+        {
+          color: hasValue ? textColor : mutedColor,
+        },
+        style,
+      ]}
+      numberOfLines={1}
+    >
+      {displayText}
+    </Text>
+  );
+}
+
+interface ComboboxContentProps {
+  children: ReactNode;
+  maxHeight?: number;
+}
+
+export function ComboboxContent({
+  children,
+  maxHeight = 400,
+}: ComboboxContentProps) {
+  const { isOpen, setIsOpen, setSearchQuery, triggerLayout } = useCombobox();
+  const cardColor = useColor('card');
+  const borderColor = useColor('border');
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  const screenHeight = Dimensions.get('window').height;
+  const availableHeight =
+    screenHeight - triggerLayout.y - triggerLayout.height - 100;
+  const dropdownHeight = Math.min(maxHeight, availableHeight);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType='fade'
+      onRequestClose={handleClose}
+    >
+      <Pressable style={styles.overlay} onPress={handleClose}>
+        <View
+          style={[
+            styles.dropdown,
+            {
+              backgroundColor: cardColor,
+              borderColor: borderColor,
+              top: triggerLayout.y + triggerLayout.height + 6,
+              left: triggerLayout.x,
+              width: triggerLayout.width,
+              maxHeight: dropdownHeight,
+            },
+          ]}
+        >
+          {children}
+        </View>
+      </Pressable>
+    </Modal>
+  );
+}
+
+interface ComboboxInputProps {
+  placeholder?: string;
+  style?: ViewStyle;
+  autoFocus?: boolean;
+}
+
+export function ComboboxInput({
+  placeholder = 'Search...',
+  style,
+  autoFocus = true,
+}: ComboboxInputProps) {
+  const { searchQuery, setSearchQuery } = useCombobox();
+  const textColor = useColor('text');
+  const mutedColor = useColor('textMuted');
+  const borderColor = useColor('border');
+
+  return (
+    <View
+      style={[
+        styles.searchContainer,
+        { borderBottomColor: borderColor },
+        style,
+      ]}
+    >
+      <TextInput
+        style={[styles.searchInput, { color: textColor }]}
+        placeholder={placeholder}
+        placeholderTextColor={mutedColor}
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        autoFocus={autoFocus}
+      />
+    </View>
+  );
+}
+
+interface ComboboxListProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export function ComboboxList({ children, style }: ComboboxListProps) {
+  const { searchQuery, setFilteredItemsCount } = useCombobox();
+
+  const filteredChildren = Children.toArray(children).filter((child) => {
+    if (!searchQuery) return true;
+
+    if (isValidElement(child) && child.type === ComboboxItem) {
+      const props = child.props as any;
+      const label = getLabelFromChildren(props.children);
+      const searchText = props.searchValue || label || props.value || '';
+      return searchText.toLowerCase().includes(searchQuery.toLowerCase());
+    }
+
+    if (isValidElement(child) && child.type === ComboboxGroup) {
+      const groupProps = child.props as any;
+      const groupChildren = Children.toArray(groupProps.children);
+
+      return groupChildren.some((groupChild) => {
+        if (isValidElement(groupChild) && groupChild.type === ComboboxItem) {
+          const itemProps = groupChild.props as any;
+          const label = getLabelFromChildren(itemProps.children);
+          const searchText =
+            itemProps.searchValue || label || itemProps.value || '';
+          return searchText.toLowerCase().includes(searchQuery.toLowerCase());
+        }
+        return false;
+      });
+    }
+
+    return true;
+  });
+
+  const countFilteredItems = (nodes: React.ReactNode[]): number => {
+    return nodes.reduce<number>((count, node) => {
+      if (isValidElement(node)) {
+        if (node.type === ComboboxItem) {
+          return count + 1;
+        }
+        if (node.type === ComboboxGroup) {
+          const groupChildren = Children.toArray((node.props as any).children);
+          return count + countFilteredItems(groupChildren);
+        }
+      }
+      return count;
+    }, 0);
+  };
+
+  const itemCount = countFilteredItems(filteredChildren);
+
+  useEffect(() => {
+    setFilteredItemsCount(itemCount);
+  }, [itemCount, setFilteredItemsCount]);
+
+  return (
+    <ScrollView
+      style={[styles.optionsList, style]}
+      showsVerticalScrollIndicator={false}
+      keyboardShouldPersistTaps='handled'
+    >
+      {filteredChildren}
+    </ScrollView>
+  );
+}
+
+interface ComboboxEmptyProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+export function ComboboxEmpty({ children, style }: ComboboxEmptyProps) {
+  const { searchQuery, filteredItemsCount } = useCombobox();
+  const mutedColor = useColor('textMuted');
+
+  if (filteredItemsCount > 0) return null;
+
+  return (
+    <View style={[styles.emptyContainer, style]}>
+      {typeof children === 'string' ? (
+        <Text style={[styles.emptyText, { color: mutedColor }]}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+interface ComboboxGroupProps {
+  children: ReactNode;
+  heading?: string;
+}
+
+export function ComboboxGroup({ children, heading }: ComboboxGroupProps) {
+  const { searchQuery } = useCombobox();
+  const mutedColor = useColor('textMuted');
+
+  const filteredChildren = Children.toArray(children).filter((child) => {
+    if (!searchQuery) return true;
+
+    if (isValidElement(child) && child.type === ComboboxItem) {
+      const props = child.props as any;
+      const label = getLabelFromChildren(props.children);
+      const searchText = props.searchValue || label || props.value || '';
+      return searchText.toLowerCase().includes(searchQuery.toLowerCase());
+    }
+    return true;
+  });
+
+  if (searchQuery && filteredChildren.length === 0) return null;
+
+  return (
+    <View>
+      {heading && (
+        <Text style={[styles.groupHeading, { color: mutedColor }]}>
+          {heading}
+        </Text>
+      )}
+      {filteredChildren}
+    </View>
+  );
+}
+
+interface ComboboxItemProps {
+  children: ReactNode;
+  value: string; // The unique value is still a string
+  onSelect?: (value: OptionType) => void;
+  disabled?: boolean;
+  searchValue?: string;
+  style?: ViewStyle;
+}
+
+export function ComboboxItem({
+  children,
+  value: itemValue,
+  onSelect,
+  disabled = false,
+  style,
+}: ComboboxItemProps) {
+  const {
+    setValue,
+    setIsOpen,
+    multiple,
+    values: selectedValues,
+    value: selectedValue,
+  } = useCombobox();
+  const textColor = useColor('text');
+  const primaryColor = useColor('primary');
+
+  const isSelected = multiple
+    ? selectedValues.some((v) => v.value === itemValue)
+    : selectedValue?.value === itemValue;
+
+  const handleSelect = () => {
+    if (disabled) return;
+
+    const label = getLabelFromChildren(children);
+    const selectedOption: OptionType = { value: itemValue, label };
+
+    onSelect?.(selectedOption);
+    setValue(selectedOption);
+
+    if (!multiple) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.option,
+        {
+          backgroundColor: isSelected ? `${primaryColor}15` : 'transparent',
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+      onPress={handleSelect}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      {typeof children === 'string' ? (
+        <Text
+          style={[
+            styles.optionText,
+            {
+              color: textColor,
+              fontWeight: isSelected ? '600' : '400',
+            },
+          ]}
+        >
+          {children}
+        </Text>
+      ) : (
+        Children.map(children, (child) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, { isSelected } as any);
+          }
+          return child;
+        })
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  trigger: {
+    height: HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    borderRadius: CORNERS,
+    borderWidth: 1,
+  },
+  triggerContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  valueText: {
+    fontSize: FONT_SIZE,
+    flex: 1,
+  },
+  chevron: {
+    marginLeft: 8,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  dropdown: {
+    position: 'absolute',
+    borderRadius: BORDER_RADIUS,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  searchContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    height: HEIGHT,
+  },
+  searchInput: {
+    fontSize: FONT_SIZE,
+    flex: 1,
+  },
+  optionsList: {
+    maxHeight: 400,
+  },
+  emptyContainer: {
+    padding: 16,
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: FONT_SIZE,
+    fontStyle: 'italic',
+  },
+  groupHeading: {
+    fontSize: 12,
+    fontWeight: '600',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    minHeight: 44,
+  },
+  optionText: {
+    fontSize: FONT_SIZE,
+    flex: 1,
+  },
+});