@helpwave/hightide-native 0.0.7 → 0.1.0

package/src/components/user-interaction/SearchBar.tsx

@@ -0,0 +1,222 @@
+import {
+  forwardRef,
+  useMemo,
+  useState
+} from 'react'
+import {
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native'
+
+import {
+  useControlledState,
+  useDelay,
+  type UseDelayOptionsResolved
+} from '@helpwave/hightide-utils/hooks'
+import { useTranslation } from '@helpwave/hightide-utils/context'
+
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import type {
+  SearchBarContainerStyle,
+  SearchBarIconButtonStyle,
+  SearchBarInputStyle,
+  SearchBarState
+} from '../../theme/types/components/searchBar'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
+import { IconButton, type IconButtonProps } from './IconButton'
+
+export type SearchBarEditCompleteOptionsResolved = {
+  onBlur: boolean,
+  afterDelay: boolean,
+  allowEnterComplete?: boolean,
+} & Omit<UseDelayOptionsResolved, 'disabled'>
+
+export type SearchBarEditCompleteOptions = Partial<SearchBarEditCompleteOptionsResolved>
+
+const defaultEditCompleteOptions: SearchBarEditCompleteOptionsResolved = {
+  allowEnterComplete: true,
+  onBlur: true,
+  afterDelay: false,
+  delay: 2500,
+}
+
+export type SearchBarProps = Omit<TextInputProps, 'value' | 'style'>
+  & Partial<FormFieldDataHandling<string>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    color?: ColorPairToken,
+    onSearch: (value: string) => void,
+    searchButtonProps?: Omit<IconButtonProps, 'onPress' | 'icon' | 'accessibilityLabel'>,
+    editCompleteOptions?: SearchBarEditCompleteOptions,
+    initialValue?: string,
+    style?: StyleProp<ViewStyle>,
+    containerStyle?: StyleOverwrite<SearchBarState, SearchBarContainerStyle>,
+    inputStyle?: StyleOverwrite<SearchBarState, SearchBarInputStyle>,
+    iconButtonStyle?: StyleOverwrite<SearchBarState, SearchBarIconButtonStyle>,
+    textStyle?: StyleProp<TextStyle>,
+  }
+
+export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBar({
+  value: controlledValue,
+  initialValue,
+  color,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onValueChange,
+  onEditComplete,
+  onSearch,
+  searchButtonProps,
+  editCompleteOptions,
+  style,
+  containerStyle,
+  inputStyle,
+  iconButtonStyle,
+  textStyle,
+  placeholder,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+  const translation = useTranslation()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isPressed, setIsPressed] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue,
+  })
+
+  const {
+    onBlur: allowEditCompleteOnBlur,
+    afterDelay,
+    delay,
+    allowEnterComplete,
+  } = { ...defaultEditCompleteOptions, ...editCompleteOptions }
+
+  const { restartTimer, clearTimer } = useDelay({
+    delay,
+    disabled: !afterDelay || disabled || readOnly,
+  })
+
+  const interactive = !disabled && !readOnly
+
+  const state = useMemo((): SearchBarState => ({
+    color,
+    isDisabled: disabled,
+    isInvalid: invalid,
+    isReadonly: readOnly,
+    isHovered: interactive && isHovered,
+    isPressed: interactive && isPressed,
+    isFocused: interactive && isFocused,
+  }), [color, disabled, invalid, readOnly, interactive, isHovered, isPressed, isFocused])
+
+  const searchBarTheme = theme.components.searchBar
+  const resolvedContainerStyle = useMemo(
+    () => searchBarTheme.container(state, containerStyle),
+    [searchBarTheme, state, containerStyle]
+  )
+  const resolvedInputStyle = useMemo(
+    () => searchBarTheme.input(state, inputStyle),
+    [searchBarTheme, state, inputStyle]
+  )
+  const resolvedPlaceholderStyle = useMemo(
+    () => searchBarTheme.placeholder(state),
+    [searchBarTheme, state]
+  )
+  const resolvedIconButtonStyle = useMemo(
+    () => searchBarTheme.iconButton(state, iconButtonStyle),
+    [searchBarTheme, state, iconButtonStyle]
+  )
+
+  const commitSearch = (nextValue: string) => {
+    onSearch(nextValue)
+    onEditComplete?.(nextValue)
+  }
+
+  return (
+    <View style={[resolvedContainerStyle, style]}>
+      <TextInput
+        {...props}
+        ref={ref}
+        value={value}
+        editable={interactive}
+        placeholder={placeholder ?? translation('search')}
+        placeholderTextColor={resolvedPlaceholderStyle.color}
+        onChangeText={(nextValue) => {
+          props.onChangeText?.(nextValue)
+          restartTimer(() => {
+            commitSearch(nextValue)
+          })
+          setValue(nextValue)
+        }}
+        onFocus={(event) => {
+          if (interactive) {
+            setIsFocused(true)
+          }
+          props.onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          setIsFocused(false)
+          props.onBlur?.(event)
+          if (allowEditCompleteOnBlur) {
+            commitSearch(value ?? '')
+            clearTimer()
+          }
+        }}
+        onPressIn={(event) => {
+          if (interactive) {
+            setIsPressed(true)
+          }
+          props.onPressIn?.(event)
+        }}
+        onPressOut={(event) => {
+          setIsPressed(false)
+          props.onPressOut?.(event)
+        }}
+        onPointerEnter={(event) => {
+          if (interactive) {
+            setIsHovered(true)
+          }
+          props.onPointerEnter?.(event)
+        }}
+        onPointerLeave={(event) => {
+          setIsHovered(false)
+          props.onPointerLeave?.(event)
+        }}
+        onSubmitEditing={(event) => {
+          props.onSubmitEditing?.(event)
+          if (allowEnterComplete) {
+            commitSearch(value ?? '')
+            clearTimer()
+          }
+        }}
+        style={[resolvedInputStyle, textStyle]}
+        accessibilityState={{ disabled, selected: required }}
+      />
+      <IconButton
+        {...searchButtonProps}
+        icon={HightideIconRegistry.Search}
+        accessibilityLabel={translation('search')}
+        size="sm"
+        color={searchButtonProps?.color ?? searchBarTheme.iconButtonColor(state)}
+        variant={searchButtonProps?.variant ?? 'foreground'}
+        disabled={disabled || searchButtonProps?.disabled}
+        onPress={() => commitSearch(value ?? '')}
+        style={[resolvedIconButtonStyle, searchButtonProps?.style]}
+      />
+    </View>
+  )
+})

package/src/components/user-interaction/Select.tsx

@@ -1,25 +1,31 @@
-import { useMemo } from 'react'
+import { Fragment, useMemo } from 'react'
 import {
   FlatList,
   Modal,
   Pressable,
-  Text,
-  TextInput,
   View,
   type StyleProp,
   type ViewStyle
 } from 'react-native'
 
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import { useTranslation } from '@helpwave/hightide-utils/context'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import { ThemedText } from '../visualization-and-display/ThemedText'
+import { ThemedIcon } from '../visualization-and-display/ThemedIcon'
+import { ListActionItem } from '../list/ListActionItem'
+import { HightideIconRegistry } from '../../icons/HightideIconRegistry'
 import {
   useSelect,
   type UseSelectOption
 } from '../../hooks/useSelect'
 import type { SelectState } from '../../theme/types/components/select'
+import type { Color } from '../../theme/types/color'
 import type {
   FormFieldDataHandling,
   FormFieldInteractionStates
 } from '../../types/formField'
+import { SearchBar } from './SearchBar'
 
 export type SelectOption<T extends string = string> = UseSelectOption & {
   value?: T,
@@ -33,6 +39,7 @@ export type SelectProps = Partial<FormFieldDataHandling<string>>
     initialValue?: string | null,
     placeholder?: string,
     showSearch?: boolean,
+    color?: ColorPairToken,
     style?: StyleProp<ViewStyle>,
   }
 
@@ -42,6 +49,7 @@ export const Select = ({
   initialValue = null,
   placeholder = 'Select…',
   showSearch = true,
+  color,
   disabled = false,
   readOnly = false,
   invalid = false,
@@ -50,6 +58,7 @@ export const Select = ({
   style,
 }: SelectProps) => {
   const { theme } = useTheme()
+  const translation = useTranslation()
   const interactive = !disabled && !readOnly
 
   const select = useSelect({
@@ -65,51 +74,93 @@ export const Select = ({
     return selected?.label ?? placeholder
   }, [options, placeholder, select.value])
 
+  const visibleOptions = useMemo(
+    () => options.filter((option) => select.visibleOptionIds.includes(option.id)),
+    [options, select.visibleOptionIds]
+  )
+
   const state = useMemo((): SelectState => ({
+    color,
     isDisabled: disabled,
-    isReadOnly: readOnly,
+    isReadonly: readOnly,
     isInvalid: invalid,
     isOpen: select.isOpen,
     hasValue: !!select.value,
-  }), [disabled, invalid, readOnly, select.isOpen, select.value])
+  }), [color, disabled, invalid, readOnly, select.isOpen, select.value])
 
   const selectTheme = theme.components.select
 
-  const resolvedTriggerStyle = useMemo(
-    () => selectTheme.trigger(state),
-    [selectTheme, state]
-  )
-  const resolvedTriggerTextStyle = useMemo(
-    () => selectTheme.triggerText(state),
-    [selectTheme, state]
-  )
   const resolvedOverlayStyle = useMemo(
-    () => selectTheme.overlay(state),
-    [selectTheme, state]
+    () => selectTheme.overlay({}),
+    [selectTheme]
   )
   const resolvedMenuStyle = useMemo(
-    () => selectTheme.menu(state),
-    [selectTheme, state]
+    () => selectTheme.menu({ hasSearch: showSearch }),
+    [selectTheme, showSearch]
   )
-  const resolvedSearchStyle = useMemo(
-    () => selectTheme.search(state),
-    [selectTheme, state]
+  const resolvedHeaderStyle = useMemo(
+    () => selectTheme.header({}),
+    [selectTheme]
   )
-  const searchPlaceholderColor = useMemo(
-    () => selectTheme.searchPlaceholderColor(state),
-    [selectTheme, state]
+  const resolvedEmptyTextStyle = useMemo(
+    () => selectTheme.emptyText({}),
+    [selectTheme]
   )
+  const showEmptySearchResults = showSearch
+    && select.searchQuery.trim().length > 0
+    && visibleOptions.length === 0
 
   return (
     <View style={style}>
       <Pressable
         disabled={!interactive}
         onPress={() => select.toggleOpen()}
-        style={resolvedTriggerStyle}
+        style={(pressableState) => {
+          const interaction = pressableState as {
+            pressed: boolean,
+            hovered?: boolean,
+            focused?: boolean,
+            focusVisible?: boolean,
+          }
+          return selectTheme.trigger({
+            ...state,
+            isPressed: interaction.pressed,
+            isHovered: !!interaction.hovered,
+            isFocused: !!interaction.focused,
+            isFocusVisible: !!interaction.focusVisible,
+          })
+        }}
       >
-        <Text style={resolvedTriggerTextStyle}>
-          {selectedLabel}
-        </Text>
+        {(pressableState) => {
+          const interaction = pressableState as {
+            pressed: boolean,
+            hovered?: boolean,
+            focused?: boolean,
+            focusVisible?: boolean,
+          }
+          const triggerState = {
+            ...state,
+            isPressed: interaction.pressed,
+            isHovered: !!interaction.hovered,
+            isFocused: !!interaction.focused,
+            isFocusVisible: !!interaction.focusVisible,
+          }
+          const icon = selectTheme.icon(triggerState)
+
+          return (
+            <Fragment>
+              <ThemedText style={[selectTheme.triggerText(triggerState), { flex: 1 }]}>
+                {selectedLabel}
+              </ThemedText>
+              <ThemedIcon
+                icon={HightideIconRegistry.ChevronDown}
+                size={icon.size}
+                strokeWidth={icon.strokeWidth}
+                color={icon.color}
+              />
+            </Fragment>
+          )
+        }}
       </Pressable>
 
       <Modal
@@ -127,39 +178,59 @@ export const Select = ({
             onPress={(event) => event.stopPropagation()}
           >
             {showSearch && (
-              <TextInput
-                value={select.searchQuery}
-                onChangeText={select.setSearchQuery}
-                placeholder="Search…"
-                placeholderTextColor={searchPlaceholderColor}
-                style={resolvedSearchStyle}
-              />
+              <View style={resolvedHeaderStyle}>
+                <SearchBar
+                  value={select.searchQuery}
+                  onValueChange={select.setSearchQuery}
+                  onSearch={select.setSearchQuery}
+                />
+              </View>
             )}
-            <FlatList
-              data={options.filter((option) => select.visibleOptionIds.includes(option.id))}
-              keyExtractor={(option) => option.id}
-              renderItem={({ item }) => {
-                const isSelected = select.value === item.id
-                const isHighlighted = select.highlightedValue === item.id
-                const optionState = {
-                  isSelected,
-                  isHighlighted,
-                  isDisabled: item.disabled,
-                }
+            {showEmptySearchResults ? (
+              <View
+                style={{
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <ThemedText style={resolvedEmptyTextStyle}>
+                  {translation('nothingFound')}
+                </ThemedText>
+              </View>
+            ) : (
+              <FlatList
+                data={visibleOptions}
+                keyExtractor={(option) => option.id}
+                style={{ flex: 1 }}
+                renderItem={({ item }) => {
+                  const isSelected = select.value === item.id
+                  const optionColor = isSelected
+                    ? (color ?? theme.colors.primary)
+                    : undefined
+                  const checkIcon = theme.components.listItem.action.icon({ color: optionColor })
 
-                return (
-                  <Pressable
-                    disabled={item.disabled}
-                    onPress={() => select.selectValue(item.id)}
-                    style={selectTheme.option(optionState)}
-                  >
-                    <Text style={selectTheme.optionText(optionState)}>
-                      {item.label}
-                    </Text>
-                  </Pressable>
-                )
-              }}
-            />
+                  return (
+                    <ListActionItem
+                      label={item.label ?? item.id}
+                      color={optionColor}
+                      disabled={item.disabled}
+                      onPress={() => select.selectValue(item.id)}
+                      trailing={isSelected
+                        ? (
+                          <ThemedIcon
+                            icon={HightideIconRegistry.Check}
+                            size={checkIcon.size}
+                            strokeWidth={checkIcon.strokeWidth}
+                            color={checkIcon.color as Color | undefined}
+                          />
+                        )
+                        : undefined}
+                    />
+                  )
+                }}
+              />
+            )}
           </Pressable>
         </Pressable>
       </Modal>

package/src/components/user-interaction/Switch.tsx

@@ -0,0 +1,207 @@
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useRef
+} from 'react'
+import {
+  Animated,
+  Pressable,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+
+import {
+  useControlledState,
+  useEventCallbackStabilizer
+} from '@helpwave/hightide-utils/hooks'
+
+import { useDebugContext } from '../../global-contexts/debug'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  SwitchContainerStyle,
+  SwitchState,
+  SwitchThumbStyle,
+  SwitchTrackStyle
+} from '../../theme/types/components/switch'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
+import { createHitBoxOverlayStyle } from '../../utils/hitBoxOverlay'
+import { useMinimumTouchTargetHitSlop } from '../../utils/minimumTouchTargetHitSlop'
+
+const ANIMATION_DURATION_MS = 250
+
+export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'disabled'>
+  & Partial<FormFieldInteractionStates>
+  & Partial<FormFieldDataHandling<boolean>>
+  & {
+    initialValue?: boolean,
+    style?: StyleProp<ViewStyle>,
+    containerStyle?: StyleOverwrite<SwitchState, SwitchContainerStyle>,
+    trackStyle?: StyleOverwrite<SwitchState, SwitchTrackStyle>,
+    thumbStyle?: StyleOverwrite<SwitchState, SwitchThumbStyle>,
+  }
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+  focusVisible?: boolean,
+}
+
+const toNumber = (value: string | number | undefined, fallback: number): number => (
+  typeof value === 'number' ? value : fallback
+)
+
+export const Switch = ({
+  value: controlledValue,
+  initialValue = false,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onEditComplete,
+  style,
+  containerStyle,
+  trackStyle,
+  thumbStyle,
+  accessibilityLabel,
+  hitSlop: providedHitSlop,
+  onLayout: providedOnLayout,
+  ...props
+}: SwitchProps) => {
+  const { theme } = useTheme()
+  const { hitBox } = useDebugContext()
+  const { hitSlop, onLayout } = useMinimumTouchTargetHitSlop({
+    touchTargetSize: theme.semantics.touchTargetSize({}),
+    hitSlop: providedHitSlop,
+    onLayout: providedOnLayout,
+  })
+  const interactive = !disabled && !readOnly
+
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+
+  const onChangeWrapper = useCallback((nextValue: boolean) => {
+    onValueChangeStable(nextValue)
+    onEditCompleteStable(nextValue)
+  }, [onEditCompleteStable, onValueChangeStable])
+
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange: onChangeWrapper,
+    defaultValue: initialValue,
+  })
+
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: value ? 1 : 0,
+      duration: ANIMATION_DURATION_MS,
+      useNativeDriver: false,
+    }).start()
+  }, [progress, value])
+
+  const resolveState = (interaction: PressableInteraction): SwitchState => ({
+    isActive: value,
+    isInvalid: invalid,
+    isDisabled: disabled,
+    isReadonly: readOnly,
+    isPressed: interaction.pressed,
+    isHovered: !!interaction.hovered,
+    isFocused: !!interaction.focused,
+    isFocusVisible: !!interaction.focusVisible,
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={!interactive}
+      accessibilityRole="switch"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        checked: value,
+        disabled,
+      }}
+      hitSlop={hitSlop}
+      onLayout={onLayout}
+      onPress={(event) => {
+        if (interactive) {
+          setValue((previous) => !previous)
+        }
+        props.onPress?.(event)
+      }}
+      style={(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        return [theme.components.switch.container(state, containerStyle), style]
+      }}
+    >
+      {(pressableState) => {
+        const state = resolveState(pressableState as PressableInteraction)
+        const inactiveState: SwitchState = { ...state, isActive: false }
+        const activeState: SwitchState = { ...state, isActive: true }
+        const resolvedTrackStyle = theme.components.switch.track(state, trackStyle)
+        const resolvedThumbInactive = theme.components.switch.thumb(inactiveState, thumbStyle)
+        const resolvedThumbActive = theme.components.switch.thumb(activeState, thumbStyle)
+        const trackWidth = toNumber(resolvedTrackStyle.width as string | number | undefined, 40)
+        const trackHeight = toNumber(resolvedTrackStyle.height as string | number | undefined, 28)
+        const trackBorderWidth = toNumber(resolvedTrackStyle.borderWidth, 0)
+        const thumbInactiveSize = toNumber(resolvedThumbInactive.width as string | number | undefined, 16)
+        const thumbActiveSize = toNumber(resolvedThumbActive.width as string | number | undefined, 20)
+        const trackInnerWidth = trackWidth - (trackBorderWidth * 2)
+        const trackInnerHeight = trackHeight - (trackBorderWidth * 2)
+        const thumbOffsetInactive = (trackInnerHeight - thumbInactiveSize) / 2
+        const thumbOffsetActive = trackInnerWidth - thumbActiveSize - (
+          (trackInnerHeight - thumbActiveSize) / 2
+        )
+        const thumbTopInactive = (trackInnerHeight - thumbInactiveSize) / 2
+        const thumbTopActive = (trackInnerHeight - thumbActiveSize) / 2
+        const thumbSize = progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [thumbInactiveSize, thumbActiveSize],
+        })
+        const thumbTranslateX = progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [thumbOffsetInactive, thumbOffsetActive],
+        })
+        const thumbTop = progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [thumbTopInactive, thumbTopActive],
+        })
+        const thumbColor = value
+          ? resolvedThumbActive.backgroundColor
+          : resolvedThumbInactive.backgroundColor
+
+        return (
+          <Fragment>
+            {hitBox.isVisualizing && (
+              <View
+                pointerEvents="none"
+                style={createHitBoxOverlayStyle(hitSlop, hitBox.color)}
+              />
+            )}
+            <View style={resolvedTrackStyle}>
+              <Animated.View
+                style={{
+                  position: 'absolute',
+                  top: thumbTop,
+                  width: thumbSize,
+                  height: thumbSize,
+                  borderRadius: thumbActiveSize / 2,
+                  backgroundColor: thumbColor,
+                  transform: [{ translateX: thumbTranslateX }],
+                }}
+              />
+            </View>
+          </Fragment>
+        )
+      }}
+    </Pressable>
+  )
+}