@helpwave/hightide-native 0.0.1

package/src/global-contexts/theme/ThemeContext.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react'
+import type { ThemeConfigValue, ThemeInformation } from './forward-exports'
+import type { DesignTheme, ThemeMode } from '../../theme'
+
+export type { ThemeInformation }
+
+export type ThemeContextValue = Omit<ThemeConfigValue, 'theme'> & {
+  themeMode: ThemeMode,
+  theme: DesignTheme,
+  isInitialized: boolean,
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export const useTheme = (): ThemeContextValue => {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error(
+      'useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.'
+    )
+  }
+  return context
+}

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useMemo, useState, type PropsWithChildren } from 'react'
+import { Appearance } from 'react-native'
+import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
+import { getTheme, themes, type ThemeMode } from '../../theme'
+import { HightideConfigUtils } from '../hightide-config/HightideConfigUtils'
+import type { SystemTheme, ThemeInformation } from './forward-exports'
+import { useCreateThemeConfig } from './forward-exports'
+import { ThemeContext, useTheme, type ThemeContextValue } from './ThemeContext'
+
+export type ThemeProviderProps = PropsWithChildren & {
+  theme?: string | null,
+  systemTheme?: SystemTheme,
+  fallbackTheme?: ThemeMode,
+  supportedThemes?: readonly ThemeInformation[],
+  onChangedTheme?: (theme: string) => void,
+}
+
+const resolveThemeMode = (theme: string): ThemeMode => {
+  if (theme in themes) {
+    return theme as ThemeMode
+  }
+  return 'light'
+}
+
+export const useThemeMode = (): ThemeMode => {
+  return useTheme().themeMode
+}
+
+const detectNativeSystemTheme = (): SystemTheme | undefined => {
+  const colorScheme = Appearance.getColorScheme()
+  if (colorScheme === 'dark' || colorScheme === 'light') {
+    return colorScheme
+  }
+  return undefined
+}
+
+const useNativeSystemTheme = (enabled: boolean) => {
+  const [systemTheme, setSystemTheme] = useState<SystemTheme | undefined>(() =>
+    (enabled ? detectNativeSystemTheme() : undefined))
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      if (colorScheme === 'dark' || colorScheme === 'light') {
+        setSystemTheme(colorScheme)
+      }
+    })
+
+    return () => subscription.remove()
+  }, [enabled])
+
+  return systemTheme
+}
+
+export const ThemeProvider = ({
+  children,
+  theme,
+  fallbackTheme = 'light',
+  systemTheme: systemThemeOverride,
+  supportedThemes = HightideConfigUtils.defaultSupportedThemes,
+  onChangedTheme,
+}: ThemeProviderProps) => {
+  const store = useNativeKeyValueStore()
+  const detectedSystemTheme = useNativeSystemTheme(systemThemeOverride === undefined)
+  const systemTheme = systemThemeOverride ?? detectedSystemTheme
+
+  const themeConfig = useCreateThemeConfig({
+    store,
+    fallbackTheme,
+    supportedThemes,
+    theme,
+    systemTheme,
+    onChangedTheme,
+  })
+
+  const value = useMemo((): ThemeContextValue => {
+    const themeMode = resolveThemeMode(themeConfig.theme)
+
+    return {
+      preferredTheme: themeConfig.preferredTheme,
+      setTheme: themeConfig.setTheme,
+      supportedThemes: themeConfig.supportedThemes,
+      themeMode,
+      theme: getTheme(themeMode),
+      isInitialized: store.isInitialized,
+    }
+  }, [
+    store.isInitialized,
+    themeConfig.preferredTheme,
+    themeConfig.setTheme,
+    themeConfig.supportedThemes,
+    themeConfig.theme,
+  ])
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}

package/src/global-contexts/theme/forward-exports.ts

@@ -0,0 +1,7 @@
+export {
+  useCreateThemeConfig,
+  type ThemeInformation,
+  type ThemeConfigValue,
+  type SystemTheme,
+  type UseCreateThemeConfigProps,
+} from '@helpwave/hightide-utils/context/theme'

package/src/global-contexts/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './ThemeContext'
+export * from './ThemeProvider'
+export * from './forward-exports'

package/src/global-contexts/translation/forward-exports.ts

@@ -0,0 +1,11 @@
+export {
+  TranslationContext,
+  TranslationProvider,
+  useTranslation,
+  useHightideTranslation,
+  useICUTranslation,
+  useSingleKeyTranslation,
+  type TranslationContextValue,
+  type TranslationProviderProps,
+  type UseCreateTranslationContextProps,
+} from '@helpwave/hightide-utils/context/translation'

package/src/global-contexts/translation/index.ts

@@ -0,0 +1 @@
+export * from './forward-exports'

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useMultiSelect'
+export * from './useNativeKeyValueStore'
+export * from './useSelect'

package/src/hooks/useMultiSelect.ts

@@ -0,0 +1,232 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
+import {
+  useEventCallbackStabilizer,
+  useListNavigation,
+  useMultiSelection,
+  useSearch,
+  useTypeAheadSearch
+} from '@helpwave/hightide-utils/hooks'
+
+export interface UseMultiSelectOption {
+  id: string,
+  label?: string,
+  disabled?: boolean,
+}
+
+export interface UseMultiSelectOptions {
+  options: ReadonlyArray<UseMultiSelectOption>,
+  value?: ReadonlyArray<string>,
+  onValueChange?: (value: string[]) => void,
+  onEditComplete?: (value: string[]) => void,
+  initialValue?: string[],
+  initialIsOpen?: boolean,
+  onClose?: () => void,
+  typeAheadResetMs?: number,
+}
+
+export type UseMultiSelectFirstHighlightBehavior = 'first' | 'last'
+
+export interface UseMultiSelectState {
+  value: string[],
+  highlightedId: string | null,
+  isOpen: boolean,
+  searchQuery: string,
+  options: ReadonlyArray<UseMultiSelectOption>,
+}
+
+export interface UseMultiSelectComputedState {
+  visibleOptionIds: ReadonlyArray<string>,
+}
+
+export interface UseMultiSelectActions {
+  setIsOpen: (isOpen: boolean, behavior?: UseMultiSelectFirstHighlightBehavior) => void,
+  toggleOpen: (behavior?: UseMultiSelectFirstHighlightBehavior) => void,
+  setSearchQuery: (query: string) => void,
+  highlightFirst: () => void,
+  highlightLast: () => void,
+  highlightNext: () => void,
+  highlightPrevious: () => void,
+  highlightItem: (id: string) => void,
+  toggleSelection: (id: string, isSelected?: boolean) => void,
+  setSelection: (ids: string[]) => void,
+  isSelected: (id: string) => boolean,
+  handleTypeaheadKey: (key: string) => void,
+}
+
+export interface UseMultiSelectReturn extends UseMultiSelectState, UseMultiSelectComputedState, UseMultiSelectActions {}
+
+export function useMultiSelect({
+  options,
+  value: controlledValue,
+  onValueChange,
+  onEditComplete,
+  initialValue = [],
+  onClose,
+  initialIsOpen = false,
+  typeAheadResetMs = 500,
+}: UseMultiSelectOptions): UseMultiSelectReturn {
+  const [isOpen, setIsOpen] = useState(initialIsOpen)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const selectionOptions = useMemo(
+    () => options.map((option) => ({ id: option.id, disabled: option.disabled })),
+    [options]
+  )
+
+  const { selection, toggleSelection, setSelection, isSelected } = useMultiSelection({
+    options: selectionOptions,
+    value: controlledValue,
+    onSelectionChange: (ids) => onValueChange?.(Array.from(ids)),
+    initialSelection: initialValue,
+    isControlled: controlledValue !== undefined,
+  })
+
+  const editCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onCloseStable = useEventCallbackStabilizer(onClose)
+
+  const { searchResult: visibleOptions } = useSearch({
+    items: options,
+    searchQuery,
+    toTags: useCallback((option: UseMultiSelectOption) => [option.label ?? ''], []),
+  })
+
+  const visibleOptionIds = useMemo(
+    () => visibleOptions.map((option) => option.id),
+    [visibleOptions]
+  )
+
+  const enabledOptions = useMemo(
+    () => visibleOptions.filter((option) => !option.disabled),
+    [visibleOptions]
+  )
+
+  const listNav = useListNavigation({
+    options: enabledOptions.map((option) => option.id),
+    initialValue: selection[0] ?? null,
+  })
+
+  const typeAhead = useTypeAheadSearch({
+    options: enabledOptions,
+    resetTimer: typeAheadResetMs,
+    toString: (option) => option.label ?? '',
+    onResultChange: useCallback(
+      (option: UseMultiSelectOption | null) => {
+        if (option) listNav.highlight(option.id)
+      },
+      [listNav]
+    ),
+  })
+
+  useEffect(() => {
+    if (!isOpen) typeAhead.reset()
+  }, [isOpen, typeAhead])
+
+  const highlightItem = useCallback((id: string) => {
+    if (!enabledOptions.some((option) => option.id === id)) return
+    listNav.highlight(id)
+  }, [enabledOptions, listNav])
+
+  const toggleSelectionValue = useCallback((id: string, newIsSelected?: boolean) => {
+    const next = newIsSelected ?? !isSelected(id)
+    if (next) {
+      toggleSelection(id)
+    } else {
+      setSelection(selection.filter((selectedId) => selectedId !== id))
+    }
+    highlightItem(id)
+  }, [highlightItem, isSelected, selection, setSelection, toggleSelection])
+
+  const setIsOpenWrapper = useCallback(
+    (open: boolean, behavior?: UseMultiSelectFirstHighlightBehavior) => {
+      setIsOpen(open)
+      const highlightBehavior = behavior ?? 'first'
+      if (open) {
+        if (enabledOptions.length > 0) {
+          let selected: UseMultiSelectOption | undefined
+          if (highlightBehavior === 'first') {
+            selected = enabledOptions.find((option) => isSelected(option.id))
+            selected ??= enabledOptions[0]
+          } else {
+            selected = [...enabledOptions]
+              .reverse()
+              .find((option) => isSelected(option.id))
+            selected ??= enabledOptions[enabledOptions.length - 1]
+          }
+          if (selected) highlightItem(selected.id)
+        }
+      } else {
+        setSearchQuery('')
+        onCloseStable?.()
+        editCompleteStable?.(Array.from(selection))
+      }
+    },
+    [editCompleteStable, enabledOptions, highlightItem, isSelected, onCloseStable, selection]
+  )
+
+  const toggleOpenWrapper = useCallback(
+    (behavior?: UseMultiSelectFirstHighlightBehavior) => {
+      setIsOpenWrapper(!isOpen, behavior)
+    },
+    [isOpen, setIsOpenWrapper]
+  )
+
+  const state: UseMultiSelectState = useMemo(
+    () => ({
+      value: [...selection],
+      highlightedId: listNav.highlightedId,
+      isOpen,
+      searchQuery,
+      options,
+    }),
+    [selection, listNav.highlightedId, isOpen, searchQuery, options]
+  )
+
+  const computedState: UseMultiSelectComputedState = useMemo(
+    () => ({ visibleOptionIds }),
+    [visibleOptionIds]
+  )
+
+  const actions: UseMultiSelectActions = useMemo(
+    () => ({
+      setIsOpen: setIsOpenWrapper,
+      toggleOpen: toggleOpenWrapper,
+      setSearchQuery,
+      highlightFirst: listNav.first,
+      highlightLast: listNav.last,
+      highlightNext: listNav.next,
+      highlightPrevious: listNav.previous,
+      highlightItem,
+      toggleSelection: toggleSelectionValue,
+      setSelection,
+      isSelected,
+      handleTypeaheadKey: typeAhead.addToTypeAhead,
+    }),
+    [
+      setIsOpenWrapper,
+      toggleOpenWrapper,
+      listNav.first,
+      listNav.last,
+      listNav.next,
+      listNav.previous,
+      highlightItem,
+      toggleSelectionValue,
+      setSelection,
+      isSelected,
+      typeAhead.addToTypeAhead,
+    ]
+  )
+
+  return useMemo(
+    () => ({
+      ...state,
+      ...computedState,
+      ...actions,
+    }),
+    [state, computedState, actions]
+  )
+}

package/src/hooks/useNativeKeyValueStore.ts

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import type { SimpleValueStore } from '@helpwave/hightide-utils/hooks'
+
+const storagePrefix = '@helpwave/hightide/'
+
+export const useNativeKeyValueStore = (): SimpleValueStore => {
+  const cacheRef = useRef(new Map<string, string | null>())
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const hydrate = async () => {
+      try {
+        const keys = await AsyncStorage.getAllKeys()
+        const relevantKeys = keys.filter((key) => key.startsWith(storagePrefix))
+        if (relevantKeys.length > 0) {
+          const entries = await AsyncStorage.multiGet(relevantKeys)
+          if (cancelled) return
+          for (const [fullKey, value] of entries) {
+            cacheRef.current.set(fullKey.slice(storagePrefix.length), value)
+          }
+        }
+      } catch (error) {
+        console.error('useNativeKeyValueStore: Failed to hydrate AsyncStorage', error)
+      } finally {
+        if (!cancelled) {
+          setIsInitialized(true)
+        }
+      }
+    }
+
+    void hydrate()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return useMemo(() => ({
+    isInitialized,
+    getValue: (key) => {
+      if (!cacheRef.current.has(key)) return null
+      return cacheRef.current.get(key) ?? null
+    },
+    setValue: (key, value) => {
+      cacheRef.current.set(key, value)
+      if (value === null) {
+        void AsyncStorage.removeItem(`${storagePrefix}${key}`)
+        return
+      }
+      void AsyncStorage.setItem(`${storagePrefix}${key}`, value)
+    },
+    deleteValue: (key) => {
+      cacheRef.current.delete(key)
+      void AsyncStorage.removeItem(`${storagePrefix}${key}`)
+    },
+  }), [isInitialized])
+}

package/src/hooks/useSelect.ts

@@ -0,0 +1,198 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
+import {
+  useEventCallbackStabilizer,
+  useListNavigation,
+  useSearch,
+  useSingleSelection,
+  useTypeAheadSearch
+} from '@helpwave/hightide-utils/hooks'
+
+export interface UseSelectOption {
+  id: string,
+  label?: string,
+  disabled?: boolean,
+}
+
+export interface UseSelectOptions {
+  options: ReadonlyArray<UseSelectOption>,
+  value?: string | null,
+  initialValue?: string | null,
+  initialIsOpen?: boolean,
+  onValueChange?: (value: string) => void,
+  onEditComplete?: (value: string) => void,
+  onClose?: () => void,
+  onIsOpenChange?: (isOpen: boolean) => void,
+  typeAheadResetMs?: number,
+}
+
+export type UseSelectFirstHighlightBehavior = 'first' | 'last'
+
+export interface UseSelectState {
+  value: string | null,
+  highlightedValue: string | null,
+  isOpen: boolean,
+  searchQuery: string,
+  options: ReadonlyArray<UseSelectOption>,
+}
+
+export interface UseSelectComputedState {
+  visibleOptionIds: ReadonlyArray<string>,
+}
+
+export interface UseSelectActions {
+  setIsOpen: (isOpen: boolean, behavior?: UseSelectFirstHighlightBehavior) => void,
+  toggleOpen: (behavior?: UseSelectFirstHighlightBehavior) => void,
+  setSearchQuery: (query: string) => void,
+  highlightFirst: () => void,
+  highlightLast: () => void,
+  highlightNext: () => void,
+  highlightPrevious: () => void,
+  highlightItem: (value: string) => void,
+  selectValue: (value: string) => void,
+  handleTypeaheadKey: (key: string) => void,
+}
+
+export interface UseSelectReturn extends UseSelectState, UseSelectComputedState, UseSelectActions {}
+
+export function useSelect({
+  options,
+  value: controlledValue,
+  onValueChange,
+  onEditComplete,
+  initialValue = null,
+  onClose,
+  onIsOpenChange,
+  initialIsOpen = false,
+  typeAheadResetMs = 500,
+}: UseSelectOptions): UseSelectReturn {
+  const [isOpen, setIsOpen] = useState(initialIsOpen)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onCloseStable = useEventCallbackStabilizer(onClose)
+  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)
+
+  const onSelectionChangeWrapper = useCallback((id: string | null) => {
+    if (id === null) return
+    onValueChangeStable(id)
+    onEditCompleteStable(id)
+    setIsOpen(false)
+  }, [onValueChangeStable, onEditCompleteStable])
+
+  const { selection, selectValue } = useSingleSelection({
+    options,
+    selection: controlledValue,
+    onSelectionChange: onSelectionChangeWrapper,
+    initialSelection: initialValue,
+  })
+
+  const { searchResult: visibleOptions } = useSearch({
+    items: options,
+    searchQuery,
+    toTags: useCallback((option: UseSelectOption) => [option.label ?? ''], []),
+  })
+
+  const visibleOptionIds = useMemo(() => visibleOptions.map((option) => option.id), [visibleOptions])
+  const enabledOptions = useMemo(() => visibleOptions.filter((option) => !option.disabled), [visibleOptions])
+
+  const {
+    highlightedId,
+    highlight: listNavHighlight,
+    first: listNavFirst,
+    last: listNavLast,
+    next: listNavNext,
+    previous: listNavPrevious,
+  } = useListNavigation({
+    options: enabledOptions.map((option) => option.id),
+    initialValue: selection,
+  })
+
+  const { addToTypeAhead, reset: typeAheadReset } = useTypeAheadSearch({
+    options: enabledOptions,
+    resetTimer: typeAheadResetMs,
+    toString: (option) => option.label ?? '',
+    onResultChange: useCallback((option: UseSelectOption | null) => {
+      if (option) listNavHighlight(option.id)
+    }, [listNavHighlight]),
+  })
+
+  useEffect(() => {
+    if (!isOpen) typeAheadReset()
+  }, [isOpen, typeAheadReset])
+
+  const highlightItem = useCallback((value: string) => {
+    if (!enabledOptions.some((option) => option.id === value)) return
+    listNavHighlight(value)
+  }, [enabledOptions, listNavHighlight])
+
+  const setIsOpenWrapper = useCallback((nextIsOpen: boolean, behavior?: UseSelectFirstHighlightBehavior) => {
+    const highlightBehavior = behavior ?? 'first'
+    if (nextIsOpen) {
+      if (selection == null) {
+        if (highlightBehavior === 'first') {
+          listNavFirst()
+        } else {
+          listNavLast()
+        }
+      } else {
+        highlightItem(selection)
+      }
+    } else {
+      setSearchQuery('')
+      onCloseStable?.()
+    }
+    setIsOpen(nextIsOpen)
+    onIsOpenChangeStable(nextIsOpen)
+  }, [highlightItem, listNavFirst, listNavLast, onCloseStable, onIsOpenChangeStable, selection])
+
+  const toggleOpenWrapper = useCallback((behavior?: UseSelectFirstHighlightBehavior) => {
+    setIsOpenWrapper(!isOpen, behavior)
+  }, [isOpen, setIsOpenWrapper])
+
+  const state: UseSelectState = useMemo(() => ({
+    value: selection,
+    highlightedValue: highlightedId,
+    isOpen,
+    searchQuery,
+    options,
+  }), [selection, highlightedId, isOpen, searchQuery, options])
+
+  const computedState: UseSelectComputedState = useMemo(() => ({
+    visibleOptionIds,
+  }), [visibleOptionIds])
+
+  const actions: UseSelectActions = useMemo(() => ({
+    selectValue,
+    setIsOpen: setIsOpenWrapper,
+    toggleOpen: toggleOpenWrapper,
+    setSearchQuery,
+    highlightFirst: listNavFirst,
+    highlightLast: listNavLast,
+    highlightNext: listNavNext,
+    highlightPrevious: listNavPrevious,
+    highlightItem,
+    handleTypeaheadKey: addToTypeAhead,
+  }), [
+    selectValue,
+    setIsOpenWrapper,
+    toggleOpenWrapper,
+    listNavFirst,
+    listNavLast,
+    listNavNext,
+    listNavPrevious,
+    highlightItem,
+    addToTypeAhead,
+  ])
+
+  return useMemo(() => ({
+    ...state,
+    ...computedState,
+    ...actions,
+  }), [state, computedState, actions])
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,35 @@
+import { getIconSizePx, getIconStrokeWidth, type ElementSize } from '@helpwave/hightide-design'
+import type { LucideIcon } from 'lucide-react-native'
+
+export type IconProps = {
+  icon: LucideIcon,
+  size?: ElementSize,
+  color?: string,
+}
+
+export const Icon = ({
+  icon: IconComponent,
+  size = 'md',
+  color,
+}: IconProps) => {
+  return (
+    <IconComponent
+      size={getIconSizePx(size)}
+      strokeWidth={getIconStrokeWidth(size)}
+      color={color}
+    />
+  )
+}
+
+export const resolveIconProps = (
+  size: ElementSize = 'md',
+  color?: string
+): {
+  size: number,
+  strokeWidth: number,
+  color?: string,
+} => ({
+  size: getIconSizePx(size),
+  strokeWidth: getIconStrokeWidth(size),
+  color,
+})

package/src/icons/index.ts

@@ -0,0 +1 @@
+export * from './Icon'