@wecareu/select 0.1.0

package/src/Select.types.ts

@@ -0,0 +1,256 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+
+import type { IconName } from '@wecareu/icons'
+
+export interface SelectOption {
+  /**
+   * Background color applied to this option's row
+   */
+  color?: string
+  /**
+   * Optional description rendered below the label
+   */
+  description?: string
+  /**
+   * Prevents this option from being selected
+   */
+  disabled?: boolean
+  /**
+   * ISO 3166-1 alpha-2 country code used to render an emoji flag (e.g. 'BR', 'US').
+   * Takes precedence over `icon` when both are provided.
+   */
+  flagCode?: string
+  /**
+   * Icon identifier from @wecareu/icons displayed to the left of the label
+   */
+  icon?: IconName
+  /**
+   * Color applied to the label text of this option
+   */
+  labelColor?: string
+  /**
+   * Text displayed for this option
+   */
+  label: string
+  /**
+   * Unique value for this option
+   */
+  value: string | number
+}
+
+export interface SelectIconProps {
+  /**
+   * Accessibility label announced for screen readers
+   */
+  accessibilityLabel?: string
+  /**
+   * Icon tint color. Falls back to theme.colors.text.tertiary when undefined
+   */
+  color?: string
+  /**
+   * Icon identifier available in WeCareU icons package
+   */
+  name: IconName
+  /**
+   * Press handler triggered when icon is tapped
+   */
+  onPress?: () => void
+  /**
+   * Icon size in pixels. Defaults to theme.spacing.lg
+   */
+  size?: number
+  /**
+   * Testing identifier used in automated tests
+   */
+  testID?: string
+}
+
+export interface SelectLabels {
+  /**
+   * Error message shown when a required field has no selection. Default: 'This field is required'
+   */
+  requiredError?: string
+}
+
+interface SelectBaseProps {
+  /**
+   * Shows a clear button to remove the current selection
+   */
+  clearable?: boolean
+  /**
+   * Displays a disabled appearance and blocks user interaction
+   */
+  disabled?: boolean
+  /**
+   * Optional error message rendered below the field when in error state
+   */
+  errorMessage?: string
+  /**
+   * Shows the component using error tokens, triggering shake animation
+   */
+  inputError?: boolean
+  /**
+   * Overrides for UI strings to enable i18n. Defaults to English.
+   */
+  labels?: SelectLabels
+  /**
+   * Icon rendered on the left side of the field
+   */
+  leftIcon?: SelectIconProps
+  /**
+   * Callback invoked with the validation status.
+   * Only fires when `required` is true.
+   */
+  onValidation?: (isValid: boolean) => void
+  /**
+   * List of selectable options
+   */
+  options: SelectOption[]
+  /**
+   * Placeholder text displayed when no option is selected
+   */
+  placeholder?: string
+  /**
+   * Renders the field as read-only, blocking interaction without changing visuals significantly
+   */
+  readonly?: boolean
+  /**
+   * Marks this field as required for validation purposes
+   */
+  required?: boolean
+  /**
+   * Enables a search input inside the dropdown to filter options
+   */
+  searchable?: boolean
+  /**
+   * Applies style overrides to the container View
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Test identifier exposed on the container
+   */
+  testID?: string
+}
+
+export interface SelectSingleProps extends SelectBaseProps {
+  /**
+   * Enables single selection mode (default)
+   */
+  multiple?: false
+  /**
+   * Callback invoked with the selected value, or null when cleared
+   */
+  onChange: (value: string | number | null) => void
+  /**
+   * Currently selected value. Pass null when nothing is selected
+   */
+  value: string | number | null
+}
+
+export interface SelectMultiProps extends SelectBaseProps {
+  /**
+   * Enables multiple selection mode
+   */
+  multiple: true
+  /**
+   * Callback invoked with the array of selected values
+   */
+  onChange: (values: Array<string | number>) => void
+  /**
+   * Currently selected values
+   */
+  value: Array<string | number>
+}
+
+export type SelectProps = SelectSingleProps | SelectMultiProps
+
+export interface SelectChipProps {
+  /**
+   * Whether the chip should display the remove button
+   */
+  disabled?: boolean
+  /**
+   * Label text displayed inside the chip
+   */
+  label: string
+  /**
+   * Called when the remove button is pressed
+   */
+  onRemove?: () => void
+}
+
+export interface SelectOptionItemProps {
+  /**
+   * Whether the option is interactive
+   */
+  disabled?: boolean
+  /**
+   * Whether checkboxes should appear (multi mode)
+   */
+  isMulti?: boolean
+  /**
+   * Whether this option is currently selected
+   */
+  isSelected: boolean
+  /**
+   * The option data to render
+   */
+  option: SelectOption
+  /**
+   * Called when this item is pressed
+   */
+  onPress: (option: SelectOption) => void
+}
+
+export interface SelectSearchProps {
+  /**
+   * Called with the new query when the user types
+   */
+  onChangeText: (text: string) => void
+  /**
+   * Current search query
+   */
+  value: string
+}
+
+export interface SelectDropdownProps {
+  /**
+   * Whether multiple selection is enabled
+   */
+  isMulti?: boolean
+  /**
+   * Whether the dropdown is visible
+   */
+  isOpen: boolean
+  /**
+   * List of all options
+   */
+  options: SelectOption[]
+  /**
+   * Currently selected value(s)
+   */
+  selectedValues: Array<string | number>
+  /**
+   * Whether the search field is shown
+   */
+  searchable?: boolean
+  /**
+   * Called when the dropdown requests to close
+   */
+  onClose: () => void
+  /**
+   * Called when an option is toggled
+   */
+  onToggleOption: (option: SelectOption) => void
+}
+
+export interface SelectErrorMessageProps {
+  /**
+   * Text displayed underneath the field when it is in error state
+   */
+  message?: string
+  /**
+   * Optional identifier exposed for automated tests
+   */
+  testID?: string
+}

package/src/SelectChip.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { Icon } from '@wecareu/icons'
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import type { SelectChipProps } from './Select.types'
+
+export function SelectChip({ disabled, label, onRemove }: SelectChipProps): JSX.Element {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+
+  return (
+    <View
+      accessibilityLabel={label}
+      accessibilityRole='none'
+      style={[styles.chip, disabled && styles.chipDisabled]}
+    >
+      <Text numberOfLines={1} style={[styles.label, disabled && styles.labelDisabled]}>
+        {label}
+      </Text>
+
+      {onRemove && !disabled ? (
+        <Pressable
+          accessibilityHint={`Remove ${label}`}
+          accessibilityLabel={`Remove ${label}`}
+          accessibilityRole='button'
+          hitSlop={4}
+          onPress={onRemove}
+          style={styles.removeButton}
+        >
+          <Icon color={theme.colors.brand.primary} name='close' size={10} />
+        </Pressable>
+      ) : null}
+    </View>
+  )
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    chip: {
+      alignItems: 'center',
+      backgroundColor: theme.colors.surface.secondary,
+      borderColor: theme.colors.brand.primary,
+      borderRadius: theme.radius.sm,
+      borderWidth: 1,
+      flexDirection: 'row',
+      flexShrink: 1,
+      gap: 4,
+      maxWidth: 120,
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: 2
+    },
+    chipDisabled: {
+      backgroundColor: theme.colors.surface.disabled,
+      borderColor: theme.colors.border.disabled
+    },
+    label: {
+      color: theme.colors.brand.primary,
+      flexShrink: 1,
+      fontFamily: theme.typography.fontFamily.caption,
+      fontSize: theme.typography.fontSize.xs,
+      lineHeight: theme.typography.lineHeight.labelSmall
+    },
+    labelDisabled: {
+      color: theme.colors.text.disabled
+    },
+    removeButton: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  })
+}

package/src/SelectDropdown.tsx

@@ -0,0 +1,184 @@
+import React from 'react'
+
+import {
+  Animated,
+  FlatList,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View
+} from 'react-native'
+
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import type { SelectDropdownProps, SelectOption } from './Select.types'
+import { SelectOptionItem } from './SelectOption'
+import { SelectSearch } from './SelectSearch'
+
+const ANIMATION_DURATION = 250
+const INITIAL_RENDER_COUNT = 20
+const MAX_RENDER_BATCH = 20
+const WINDOW_SIZE = 5
+
+export function SelectDropdown({
+  isMulti,
+  isOpen,
+  onClose,
+  onToggleOption,
+  options,
+  searchable,
+  selectedValues
+}: SelectDropdownProps): JSX.Element {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+
+  const translateY = React.useRef(new Animated.Value(500)).current
+  const overlayOpacity = React.useRef(new Animated.Value(0)).current
+  const [searchQuery, setSearchQuery] = React.useState('')
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setSearchQuery('')
+      Animated.parallel([
+        Animated.timing(translateY, {
+          duration: ANIMATION_DURATION,
+          toValue: 0,
+          useNativeDriver: true
+        }),
+        Animated.timing(overlayOpacity, {
+          duration: ANIMATION_DURATION,
+          toValue: 1,
+          useNativeDriver: true
+        })
+      ]).start()
+    } else {
+      Animated.parallel([
+        Animated.timing(translateY, {
+          duration: ANIMATION_DURATION,
+          toValue: 500,
+          useNativeDriver: true
+        }),
+        Animated.timing(overlayOpacity, {
+          duration: ANIMATION_DURATION,
+          toValue: 0,
+          useNativeDriver: true
+        })
+      ]).start()
+    }
+  }, [isOpen, overlayOpacity, translateY])
+
+  const filteredOptions = React.useMemo(() => {
+    if (!searchQuery.trim()) {
+      return options
+    }
+    const query = searchQuery.toLowerCase().trim()
+    return options.filter(opt => opt.label.toLowerCase().includes(query))
+  }, [options, searchQuery])
+
+  const renderItem = React.useCallback(
+    ({ item }: { item: SelectOption }) => (
+      <SelectOptionItem
+        disabled={item.disabled}
+        isMulti={isMulti}
+        isSelected={selectedValues.includes(item.value)}
+        onPress={onToggleOption}
+        option={item}
+      />
+    ),
+    [isMulti, onToggleOption, selectedValues]
+  )
+
+  const keyExtractor = React.useCallback((item: SelectOption) => String(item.value), [])
+
+  const itemSeparator = React.useCallback(
+    () => <View style={styles.separator} />,
+    [styles.separator]
+  )
+
+  return (
+    <Modal
+      accessibilityViewIsModal
+      animationType='none'
+      onRequestClose={onClose}
+      statusBarTranslucent
+      transparent
+      visible={isOpen}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.keyboardView}
+      >
+        <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>
+          <Pressable accessibilityLabel='Close dropdown' style={styles.overlayPressable} onPress={onClose} />
+        </Animated.View>
+
+        <Animated.View style={[styles.sheet, { transform: [{ translateY }] }]}>
+          <View style={styles.dragHandle} />
+
+          {searchable ? (
+            <SelectSearch
+              onChangeText={setSearchQuery}
+              value={searchQuery}
+            />
+          ) : null}
+
+          <FlatList
+            ItemSeparatorComponent={itemSeparator}
+            contentContainerStyle={styles.listContent}
+            data={filteredOptions}
+            extraData={selectedValues}
+            initialNumToRender={INITIAL_RENDER_COUNT}
+            keyExtractor={keyExtractor}
+            keyboardShouldPersistTaps='handled'
+            maxToRenderPerBatch={MAX_RENDER_BATCH}
+            renderItem={renderItem}
+            windowSize={WINDOW_SIZE}
+          />
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
+  )
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    dragHandle: {
+      alignSelf: 'center',
+      backgroundColor: theme.colors.border.secondary,
+      borderRadius: 2,
+      height: 4,
+      marginBottom: theme.spacing.xs,
+      marginTop: theme.spacing.sm,
+      width: 40
+    },
+    keyboardView: {
+      flex: 1,
+      justifyContent: 'flex-end'
+    },
+    listContent: {
+      paddingBottom: theme.spacing.xl
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: theme.colors.alpha?.overlay ?? 'rgba(0,0,0,0.5)'
+    },
+    overlayPressable: {
+      flex: 1
+    },
+    separator: {
+      backgroundColor: theme.colors.border.secondary,
+      height: StyleSheet.hairlineWidth,
+      marginLeft: theme.spacing.md
+    },
+    sheet: {
+      backgroundColor: theme.colors.background.primary,
+      borderTopLeftRadius: theme.radius.xl,
+      borderTopRightRadius: theme.radius.xl,
+      maxHeight: '70%',
+      ...theme.colors.shadowStyles.card
+    }
+  })
+}

package/src/SelectErrorMessage.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Text } from 'react-native'
+
+import { useTheme } from '@wecareu/theme'
+
+import type { SelectErrorMessageProps } from './Select.types'
+
+export function SelectErrorMessage({ message, testID }: SelectErrorMessageProps): JSX.Element | null {
+  const theme = useTheme()
+  const errorTextStyle = React.useMemo(
+    () => ({
+      color: theme.colors.status.error,
+      fontFamily: theme.typography.fontFamily.caption,
+      fontSize: theme.typography.fontSize.sm,
+      lineHeight: theme.typography.lineHeight.labelMedium,
+      marginTop: theme.spacing.xs
+    }),
+    [theme]
+  )
+
+  if (!message) {
+    return null
+  }
+
+  return (
+    <Text accessibilityLiveRegion='polite' style={errorTextStyle} testID={testID}>
+      {message}
+    </Text>
+  )
+}

package/src/SelectIcon.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { Pressable, StyleSheet, View } from 'react-native'
+
+import { Icon } from '@wecareu/icons'
+import { useTheme } from '@wecareu/theme'
+
+import type { SelectIconProps } from './Select.types'
+
+export function SelectIcon({
+  accessibilityLabel,
+  color,
+  name,
+  onPress,
+  size,
+  testID
+}: SelectIconProps): JSX.Element {
+  const theme = useTheme()
+
+  const iconColor = color ?? theme.colors.text.tertiary
+  const iconSize = size ?? theme.spacing.lg
+  const hitSlop = React.useMemo(
+    () => ({
+      bottom: theme.spacing.xs,
+      left: theme.spacing.xs,
+      right: theme.spacing.xs,
+      top: theme.spacing.xs
+    }),
+    [theme.spacing.xs]
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityLabel={accessibilityLabel ?? name}
+        accessibilityRole='button'
+        hitSlop={hitSlop}
+        onPress={onPress}
+        style={styles.pressable}
+        testID={testID}
+      >
+        <Icon color={iconColor} name={name} size={iconSize} />
+      </Pressable>
+    )
+  }
+
+  return (
+    <View accessible={false} style={styles.wrapper} testID={testID}>
+      <Icon accessibilityLabel={accessibilityLabel} color={iconColor} name={name} size={iconSize} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})