@wecareu/select 0.1.0

package/src/SelectOption.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { FlagIcon, Icon } from '@wecareu/icons'
+
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import type { SelectOptionItemProps } from './Select.types'
+
+export function SelectOptionItem({
+  disabled,
+  isMulti,
+  isSelected,
+  onPress,
+  option
+}: SelectOptionItemProps): JSX.Element {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+
+  const handlePress = React.useCallback(() => {
+    if (!disabled) {
+      onPress(option)
+    }
+  }, [disabled, onPress, option])
+
+  const resolvedLabelColor = option.labelColor
+    ? option.labelColor
+    : isSelected
+      ? theme.colors.brand.primary
+      : theme.colors.text.primary
+
+  return (
+    <Pressable
+      accessibilityRole='menuitem'
+      accessibilityState={{ disabled, selected: isSelected }}
+      disabled={disabled}
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.container,
+        option.color ? { backgroundColor: option.color } : isSelected && styles.containerSelected,
+        disabled && styles.containerDisabled,
+        pressed && !disabled && !option.color && styles.containerPressed
+      ]}
+    >
+      {option.flagCode ? (
+        <View style={styles.iconWrapper}>
+          <FlagIcon
+            countryCode={option.flagCode}
+            size={theme.spacing.md + 2}
+          />
+        </View>
+      ) : option.icon ? (
+        <View style={styles.iconWrapper}>
+          <Icon
+            color={disabled ? theme.colors.text.disabled : resolvedLabelColor}
+            name={option.icon}
+            size={theme.spacing.lg}
+          />
+        </View>
+      ) : null}
+
+      <View style={styles.textWrapper}>
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.label,
+            { color: disabled ? theme.colors.text.disabled : resolvedLabelColor },
+            isSelected && !option.labelColor && styles.labelSelected,
+            disabled && styles.labelDisabled
+          ]}
+        >
+          {option.label}
+        </Text>
+
+        {option.description ? (
+          <Text
+            numberOfLines={2}
+            style={[styles.description, disabled && styles.descriptionDisabled]}
+          >
+            {option.description}
+          </Text>
+        ) : null}
+      </View>
+
+      {isMulti ? (
+        <View style={[styles.checkbox, isSelected && styles.checkboxSelected, disabled && styles.checkboxDisabled]}>
+          {isSelected ? (
+            <Icon color={theme.colors.text.white} name='correct' size={12} />
+          ) : null}
+        </View>
+      ) : (
+        isSelected ? (
+          <Icon color={option.labelColor ?? theme.colors.brand.primary} name='correct' size={theme.spacing.md} />
+        ) : null
+      )}
+    </Pressable>
+  )
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    checkbox: {
+      alignItems: 'center',
+      borderColor: theme.colors.border.primary,
+      borderRadius: theme.radius.xs,
+      borderWidth: 1.5,
+      height: 20,
+      justifyContent: 'center',
+      width: 20
+    },
+    checkboxDisabled: {
+      borderColor: theme.colors.border.disabled
+    },
+    checkboxSelected: {
+      backgroundColor: theme.colors.brand.primary,
+      borderColor: theme.colors.brand.primary
+    },
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: theme.spacing.sm,
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm
+    },
+    containerDisabled: {
+      opacity: 0.4
+    },
+    containerPressed: {
+      backgroundColor: theme.colors.surface.secondary
+    },
+    containerSelected: {
+      backgroundColor: theme.colors.surface.secondary
+    },
+    description: {
+      color: theme.colors.text.secondary,
+      fontFamily: theme.typography.fontFamily.caption,
+      fontSize: theme.typography.fontSize.xs,
+      lineHeight: theme.typography.lineHeight.labelSmall,
+      marginTop: 2
+    },
+    descriptionDisabled: {
+      color: theme.colors.text.disabled
+    },
+    iconWrapper: {
+      alignItems: 'center',
+      height: theme.spacing.lg,
+      justifyContent: 'center',
+      marginRight: theme.spacing.md,
+      width: theme.spacing.lg
+    },
+    label: {
+      fontFamily: theme.typography.fontFamily.body,
+      fontSize: theme.typography.fontSize.md,
+      lineHeight: theme.typography.lineHeight.bodySmall
+    },
+    labelDisabled: {
+      color: theme.colors.text.disabled
+    },
+    labelSelected: {
+      fontFamily: theme.typography.fontFamily.semibold
+    },
+    textWrapper: {
+      flex: 1
+    }
+  })
+}

package/src/SelectSearch.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+import { StyleSheet, TextInput, View } from 'react-native'
+
+import { Icon } from '@wecareu/icons'
+import { useTheme } from '@wecareu/theme'
+import type { Theme } from '@wecareu/theme'
+
+import type { SelectSearchProps } from './Select.types'
+
+const DEBOUNCE_MS = 200
+
+export function SelectSearch({ onChangeText, value }: SelectSearchProps): JSX.Element {
+  const theme = useTheme()
+  const styles = React.useMemo(() => createStyles(theme), [theme])
+  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleChangeText = React.useCallback(
+    (text: string) => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+      debounceRef.current = setTimeout(() => {
+        onChangeText(text)
+      }, DEBOUNCE_MS)
+    },
+    [onChangeText]
+  )
+
+  React.useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconWrapper}>
+        <Icon color={theme.colors.text.tertiary} name='search' size={theme.spacing.md} />
+      </View>
+      <TextInput
+        accessibilityLabel='Search options'
+        autoCapitalize='none'
+        autoCorrect={false}
+        clearButtonMode='while-editing'
+        defaultValue={value}
+        onChangeText={handleChangeText}
+        placeholderTextColor={theme.colors.text.tertiary}
+        returnKeyType='search'
+        style={styles.input}
+      />
+    </View>
+  )
+}
+
+function createStyles(theme: Theme) {
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      marginBottom: theme.spacing.xs,
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm
+    },
+    iconWrapper: {
+      marginRight: theme.spacing.xs
+    },
+    input: {
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      fontSize: theme.typography.fontSize.md,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      paddingVertical: theme.spacing.xs
+    }
+  })
+}

package/src/animations/shake.ts

@@ -0,0 +1,76 @@
+import { useCallback, useMemo, useRef } from 'react'
+
+import { Animated } from 'react-native'
+
+interface UseShakeAnimationParams {
+  /**
+   * Distance in pixels applied to the shake translation
+   */
+  distance?: number
+  /**
+   * Duration of each shake step in milliseconds
+   */
+  duration?: number
+  /**
+   * Number of oscillations executed per trigger
+   */
+  iterations?: number
+}
+
+interface UseShakeAnimationReturn {
+  /**
+   * Animated style applied to the container that needs feedback
+   */
+  animatedStyle: {
+    transform: { translateX: Animated.AnimatedInterpolation<number> }[]
+  }
+  /**
+   * Function responsible for starting the shake effect
+   */
+  triggerShake: () => void
+}
+
+export function useShakeAnimation({
+  distance = 6,
+  duration = 60,
+  iterations = 2
+}: UseShakeAnimationParams = {}): UseShakeAnimationReturn {
+  const translation = useRef(new Animated.Value(0)).current
+
+  const animatedStyle = useMemo(
+    () => ({
+      transform: [
+        {
+          translateX: translation.interpolate({
+            inputRange: [-1, -0.5, 0, 0.5, 1],
+            outputRange: [-distance, -distance / 2, 0, distance / 2, distance]
+          })
+        }
+      ]
+    }),
+    [distance, translation]
+  )
+
+  const triggerShake = useCallback(() => {
+    translation.setValue(0)
+
+    const animation = Animated.sequence([
+      Animated.timing(translation, {
+        duration,
+        toValue: 1,
+        useNativeDriver: true
+      }),
+      Animated.timing(translation, {
+        duration,
+        toValue: -1,
+        useNativeDriver: true
+      })
+    ])
+
+    Animated.loop(animation, { iterations }).start(() => {
+      translation.setValue(0)
+    })
+  }, [duration, iterations, translation])
+
+  return { animatedStyle, triggerShake }
+}

package/src/index.stories.tsx

@@ -0,0 +1,336 @@
+import React from 'react'
+
+import { StyleSheet, View } from 'react-native'
+
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Select } from '.'
+import type { SelectMultiProps, SelectOption, SelectSingleProps } from './Select.types'
+
+const GENDER_OPTIONS: SelectOption[] = [
+  { label: 'Female', value: 'F' },
+  { label: 'Male', value: 'M' },
+  { label: 'Non-binary', value: 'NB' },
+  { label: 'Prefer not to say', value: 'X' }
+]
+
+const COUNTRIES_OPTIONS: SelectOption[] = [
+  { description: 'South America', flagCode: 'AR', label: 'Argentina', value: 'AR' },
+  { description: 'Oceania', flagCode: 'AU', label: 'Australia', value: 'AU' },
+  { description: 'South America', flagCode: 'BR', label: 'Brazil', value: 'BR' },
+  { description: 'North America', flagCode: 'CA', label: 'Canada', value: 'CA' },
+  { description: 'South America', flagCode: 'CL', label: 'Chile', value: 'CL' },
+  { description: 'Asia', flagCode: 'CN', label: 'China', value: 'CN' },
+  { description: 'Europe', flagCode: 'FR', label: 'France', value: 'FR' },
+  { description: 'Europe', flagCode: 'DE', label: 'Germany', value: 'DE' },
+  { description: 'Asia', flagCode: 'IN', label: 'India', value: 'IN' },
+  { description: 'Europe', flagCode: 'IT', label: 'Italy', value: 'IT' },
+  { description: 'Asia', flagCode: 'JP', label: 'Japan', value: 'JP' },
+  { description: 'Europe', flagCode: 'PT', label: 'Portugal', value: 'PT' },
+  { description: 'Europe', flagCode: 'ES', label: 'Spain', value: 'ES' },
+  { description: 'North America', flagCode: 'US', label: 'United States', value: 'US' }
+]
+
+const TAGS_OPTIONS: SelectOption[] = [
+  { label: 'Design System', value: 'ds' },
+  { label: 'Expo', value: 'expo' },
+  { label: 'React Native', value: 'rn' },
+  { label: 'Storybook', value: 'sb' },
+  { label: 'Testing', value: 'test' },
+  { label: 'TypeScript', value: 'ts' }
+]
+
+const STATUS_OPTIONS: SelectOption[] = [
+  { description: 'User is available', icon: 'correct', label: 'Available', labelColor: '#22c55e', value: 'available' },
+  { description: 'User is in a meeting', icon: 'time', label: 'Busy', labelColor: '#f59e0b', value: 'busy' },
+  { description: 'User is not here', disabled: true, icon: 'close', label: 'Away', value: 'away' },
+  { description: 'Appears offline to others', icon: 'notificationOff', label: 'Offline', labelColor: '#94a3b8', value: 'offline' }
+]
+
+const ROLE_OPTIONS: SelectOption[] = [
+  { color: '#fef9c3', label: 'Admin', labelColor: '#854d0e', value: 'admin' },
+  { color: '#dcfce7', label: 'Editor', labelColor: '#166534', value: 'editor' },
+  { color: '#dbeafe', label: 'Viewer', labelColor: '#1e40af', value: 'viewer' },
+  { color: '#fee2e2', disabled: true, label: 'Banned', labelColor: '#991b1b', value: 'banned' }
+]
+
+interface StatefulSingleProps extends Omit<SelectSingleProps, 'onChange' | 'value'> {
+  initialValue?: string | number | null
+}
+
+interface StatefulMultiProps extends Omit<SelectMultiProps, 'multiple' | 'onChange' | 'value'> {
+  initialValues?: Array<string | number>
+}
+
+function StatefulSingleSelect({ initialValue = null, ...rest }: StatefulSingleProps) {
+  const [value, setValue] = React.useState<string | number | null>(initialValue)
+
+  const handleChange = React.useCallback(
+    (next: string | number | null) => {
+      setValue(next)
+      action('onChange')(next)
+    },
+    []
+  )
+
+  return <Select {...rest} onChange={handleChange} value={value} />
+}
+
+function StatefulMultiSelect({ initialValues = [], ...rest }: StatefulMultiProps) {
+  const [values, setValues] = React.useState<Array<string | number>>(initialValues)
+
+  const handleChange = React.useCallback(
+    (next: Array<string | number>) => {
+      setValues(next)
+      action('onChange')(next)
+    },
+    []
+  )
+
+  return <Select {...rest} multiple onChange={handleChange} value={values} />
+}
+
+const meta: Meta = {
+  component: Select,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  title: 'Forms/Select'
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        options={GENDER_OPTIONS}
+        placeholder='Select gender'
+      />
+    </View>
+  )
+}
+
+export const Selected: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        initialValue='BR'
+        options={COUNTRIES_OPTIONS}
+        placeholder='Select country'
+      />
+    </View>
+  )
+}
+
+export const WithFlags: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        clearable
+        options={COUNTRIES_OPTIONS}
+        placeholder='Select country'
+        searchable
+      />
+    </View>
+  )
+}
+
+export const WithIconsAndLabelColors: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        clearable
+        options={STATUS_OPTIONS}
+        placeholder='Select status'
+      />
+    </View>
+  )
+}
+
+export const WithRowColors: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        clearable
+        options={ROLE_OPTIONS}
+        placeholder='Select role'
+      />
+    </View>
+  )
+}
+
+export const MultipleSelect: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulMultiSelect
+        clearable
+        options={TAGS_OPTIONS}
+        placeholder='Select tags'
+      />
+    </View>
+  )
+}
+
+export const MultipleWithInitialValues: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulMultiSelect
+        clearable
+        initialValues={['rn', 'ts']}
+        options={TAGS_OPTIONS}
+        placeholder='Select tags'
+      />
+    </View>
+  )
+}
+
+export const MultipleSearchable: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulMultiSelect
+        clearable
+        options={COUNTRIES_OPTIONS}
+        placeholder='Select countries'
+        searchable
+      />
+    </View>
+  )
+}
+
+export const MultipleWithDisabledOptions: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulMultiSelect
+        clearable
+        options={STATUS_OPTIONS}
+        placeholder='Select statuses'
+      />
+    </View>
+  )
+}
+
+export const Clearable: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        clearable
+        initialValue='M'
+        options={GENDER_OPTIONS}
+        placeholder='Select gender'
+      />
+    </View>
+  )
+}
+
+export const WithError: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        errorMessage='This field is required'
+        inputError
+        options={GENDER_OPTIONS}
+        placeholder='Select gender'
+        required
+      />
+    </View>
+  )
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        disabled
+        initialValue='M'
+        options={GENDER_OPTIONS}
+        placeholder='Select gender'
+      />
+    </View>
+  )
+}
+
+export const Readonly: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        initialValue='BR'
+        options={COUNTRIES_OPTIONS}
+        placeholder='Select country'
+        readonly
+      />
+    </View>
+  )
+}
+
+export const WithDisabledOptions: Story = {
+  render: () => (
+    <View style={styles.container}>
+      <StatefulSingleSelect
+        options={STATUS_OPTIONS}
+        placeholder='Select status'
+      />
+    </View>
+  )
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={styles.column}>
+      <View style={styles.storyItem}>
+        <StatefulSingleSelect
+          options={GENDER_OPTIONS}
+          placeholder='Default - empty'
+        />
+      </View>
+      <View style={styles.storyItem}>
+        <StatefulSingleSelect
+          clearable
+          initialValue='M'
+          options={GENDER_OPTIONS}
+          placeholder='With value + clearable'
+        />
+      </View>
+      <View style={styles.storyItem}>
+        <StatefulSingleSelect
+          errorMessage='Required field'
+          inputError
+          options={GENDER_OPTIONS}
+          placeholder='Error state'
+        />
+      </View>
+      <View style={styles.storyItem}>
+        <StatefulSingleSelect
+          disabled
+          initialValue='F'
+          options={GENDER_OPTIONS}
+          placeholder='Disabled'
+        />
+      </View>
+      <View style={styles.storyItem}>
+        <StatefulMultiSelect
+          clearable
+          initialValues={['ts', 'rn']}
+          options={TAGS_OPTIONS}
+          placeholder='Multi select with chips'
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  column: {
+    gap: 12,
+    width: 320
+  },
+  container: {
+    width: 320
+  },
+  storyItem: {
+    width: '100%'
+  }
+})

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export type { SelectMultiProps, SelectOption, SelectProps, SelectSingleProps } from './Select.types'