@helpwave/hightide-native 0.0.1

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,89 @@
+import {
+  type ButtonColoringStyle,
+  type ColoringType,
+  type ElementSize
+} from '@helpwave/hightide-design'
+import type { LucideIcon } from 'lucide-react-native'
+import { forwardRef, type ReactNode } from 'react'
+import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native'
+import { Icon } from '../../icons/Icon'
+import { useTheme } from '../../global-contexts/theme'
+import type { IconButtonState, IconButtonStyle } from '../../theme'
+
+export type IconButtonSize = ElementSize
+
+export type IconButtonProps = Omit<PressableProps, 'children' | 'style'> & {
+  size?: IconButtonSize,
+  color?: ColoringType,
+  coloringStyle?: ButtonColoringStyle,
+  icon?: LucideIcon,
+  iconSize?: ElementSize,
+  children?: ReactNode,
+  accessibilityLabel: string,
+  style?: StyleProp<ViewStyle>,
+  buttonStyle?: StyleProp<ViewStyle> | ((style: IconButtonStyle) => StyleProp<ViewStyle>),
+}
+
+type PressableInteraction = {
+  pressed: boolean,
+  hovered?: boolean,
+  focused?: boolean,
+}
+
+export const IconButton = forwardRef<React.ComponentRef<typeof Pressable>, IconButtonProps>(function IconButton({
+  children,
+  icon,
+  iconSize,
+  size = 'md',
+  color = 'neutral',
+  coloringStyle = 'solid',
+  disabled,
+  accessibilityLabel,
+  style,
+  buttonStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  const resolveStyles = (interaction: PressableInteraction) => {
+    const state: IconButtonState = {
+      size,
+      color,
+      coloringStyle,
+      isDisabled: !!disabled,
+      isPressed: interaction.pressed,
+      isHovered: !!interaction.hovered,
+      isFocused: !!interaction.focused,
+    }
+
+    const resolvedButton = theme.components.iconButton.button(state)
+    const resolvedIcon = theme.components.iconButton.icon(state)
+
+    return {
+      button: typeof buttonStyle === 'function' ? buttonStyle(resolvedButton) : [resolvedButton, buttonStyle],
+      icon: resolvedIcon,
+    }
+  }
+
+  return (
+    <Pressable
+      {...props}
+      ref={ref}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={(pressableState) => {
+        const resolved = resolveStyles(pressableState as PressableInteraction)
+        return [resolved.button, style]
+      }}
+    >
+      {(pressableState) => {
+        const resolved = resolveStyles(pressableState as PressableInteraction)
+        if (icon) {
+          return <Icon icon={icon} size={iconSize ?? size} color={resolved.icon.color} />
+        }
+        return children
+      }}
+    </Pressable>
+  )
+})

package/src/components/IconButton/index.ts

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

package/src/components/Input/Input.tsx

@@ -0,0 +1,114 @@
+import {
+  useControlledState,
+  useDelay,
+  type UseDelayOptionsResolved
+} from '@helpwave/hightide-utils/hooks'
+import { forwardRef } from 'react'
+import { TextInput, type StyleProp, type TextInputProps, type TextStyle } from 'react-native'
+import { useTheme } from '../../global-contexts/theme'
+import type { InputState, InputStyle } from '../../theme'
+import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+export type EditCompleteOptionsResolved = {
+  onBlur: boolean,
+  afterDelay: boolean,
+  allowEnterComplete?: boolean,
+} & Omit<UseDelayOptionsResolved, 'disabled'>
+
+export type EditCompleteOptions = Partial<EditCompleteOptionsResolved>
+
+const defaultEditCompleteOptions: EditCompleteOptionsResolved = {
+  allowEnterComplete: false,
+  onBlur: true,
+  afterDelay: false,
+  delay: 2500,
+}
+
+export type InputProps = Omit<TextInputProps, 'value' | 'style'>
+  & Partial<FormFieldDataHandling<string>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    editCompleteOptions?: EditCompleteOptions,
+    initialValue?: string,
+    style?: StyleProp<TextStyle>,
+    inputStyle?: StyleProp<TextStyle> | ((style: InputStyle) => StyleProp<TextStyle>),
+  }
+
+export const Input = forwardRef<TextInput, InputProps>(function Input({
+  value: controlledValue,
+  initialValue,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  onValueChange,
+  onEditComplete,
+  editCompleteOptions,
+  style,
+  inputStyle,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+
+  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 state: InputState = {
+    isDisabled: disabled,
+    isInvalid: invalid,
+    isReadOnly: readOnly,
+  }
+
+  const resolvedInput = theme.components.input.input(state)
+  const appliedInputStyle = typeof inputStyle === 'function'
+    ? inputStyle(resolvedInput)
+    : [resolvedInput, inputStyle]
+
+  return (
+    <TextInput
+      {...props}
+      ref={ref}
+      value={value}
+      editable={!disabled && !readOnly}
+      onChangeText={(nextValue) => {
+        props.onChangeText?.(nextValue)
+        restartTimer(() => {
+          onEditComplete?.(nextValue)
+        })
+        setValue(nextValue)
+      }}
+      onBlur={(event) => {
+        props.onBlur?.(event)
+        if (allowEditCompleteOnBlur) {
+          onEditComplete?.(value ?? '')
+          clearTimer()
+        }
+      }}
+      onSubmitEditing={(event) => {
+        props.onSubmitEditing?.(event)
+        if (allowEnterComplete) {
+          onEditComplete?.(value ?? '')
+          clearTimer()
+        }
+      }}
+      placeholderTextColor={theme.components.input.placeholderColor(state)}
+      style={[appliedInputStyle, style]}
+      accessibilityState={{ disabled, selected: required }}
+    />
+  )
+})

package/src/components/Input/index.ts

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

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,153 @@
+import { Check } from 'lucide-react-native'
+import { useMemo } from 'react'
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { Chip } from '../Chip/Chip'
+import { Icon } from '../../icons/Icon'
+import { useMultiSelect, type UseMultiSelectOption } from '../../hooks/useMultiSelect'
+import { useTheme } from '../../global-contexts/theme'
+import type { MultiSelectState } from '../../theme'
+import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+export type MultiSelectOption = UseMultiSelectOption
+
+export type MultiSelectProps = Partial<FormFieldDataHandling<string[]>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    options: ReadonlyArray<MultiSelectOption>,
+    value?: string[],
+    initialValue?: string[],
+    placeholder?: string,
+    showSearch?: boolean,
+    style?: StyleProp<ViewStyle>,
+  }
+
+export const MultiSelect = ({
+  options,
+  value: controlledValue,
+  initialValue = [],
+  placeholder = 'Select…',
+  showSearch = true,
+  disabled = false,
+  readOnly = false,
+  invalid = false,
+  onValueChange,
+  onEditComplete,
+  style,
+}: MultiSelectProps) => {
+  const { theme } = useTheme()
+  const interactive = !disabled && !readOnly
+
+  const multiSelect = useMultiSelect({
+    options,
+    value: controlledValue,
+    initialValue,
+    onValueChange,
+    onEditComplete,
+  })
+
+  const selectedLabels = useMemo(() => {
+    return options
+      .filter((option) => multiSelect.isSelected(option.id))
+      .map((option) => option.label ?? option.id)
+  }, [multiSelect, options])
+
+  const state: MultiSelectState = {
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isInvalid: invalid,
+    isOpen: multiSelect.isOpen,
+    hasSelections: selectedLabels.length > 0,
+    hasValue: selectedLabels.length > 0,
+  }
+
+  const multiSelectTheme = theme.components.multiSelect
+
+  return (
+    <View style={style}>
+      <Pressable
+        disabled={!interactive}
+        onPress={() => multiSelect.toggleOpen()}
+        style={multiSelectTheme.trigger(state)}
+      >
+        {selectedLabels.length > 0
+          ? (
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
+              {selectedLabels.map((label) => (
+                <Chip key={label} size="sm" color="primary" coloringStyle="tonal">
+                  {label}
+                </Chip>
+              ))}
+            </View>
+          )
+          : <Text style={multiSelectTheme.triggerText(state)}>{placeholder}</Text>}
+      </Pressable>
+
+      <Modal
+        visible={multiSelect.isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => multiSelect.setIsOpen(false)}
+      >
+        <Pressable
+          style={multiSelectTheme.overlay(state)}
+          onPress={() => multiSelect.setIsOpen(false)}
+        >
+          <Pressable
+            style={multiSelectTheme.menu(state)}
+            onPress={(event) => event.stopPropagation()}
+          >
+            {showSearch && (
+              <TextInput
+                value={multiSelect.searchQuery}
+                onChangeText={multiSelect.setSearchQuery}
+                placeholder="Search…"
+                placeholderTextColor={multiSelectTheme.searchPlaceholderColor(state)}
+                style={multiSelectTheme.search(state)}
+              />
+            )}
+            <FlatList
+              data={options.filter((option) => multiSelect.visibleOptionIds.includes(option.id))}
+              keyExtractor={(option) => option.id}
+              renderItem={({ item }) => {
+                const selected = multiSelect.isSelected(item.id)
+                const isHighlighted = multiSelect.highlightedId === item.id
+                const optionState = {
+                  isSelected: selected,
+                  isHighlighted,
+                  isDisabled: item.disabled,
+                }
+                const checkboxIcon = multiSelectTheme.checkboxIcon(optionState)
+
+                return (
+                  <Pressable
+                    disabled={item.disabled}
+                    onPress={() => multiSelect.toggleSelection(item.id)}
+                    style={multiSelectTheme.option(optionState)}
+                  >
+                    <View style={multiSelectTheme.checkbox(optionState)}>
+                      {checkboxIcon.visible && (
+                        <Icon icon={Check} size="sm" color={checkboxIcon.color} />
+                      )}
+                    </View>
+                    <Text style={multiSelectTheme.optionText(optionState)}>
+                      {item.label}
+                    </Text>
+                  </Pressable>
+                )
+              }}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  )
+}

package/src/components/MultiSelect/index.ts

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

package/src/components/Select/Select.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from 'react'
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { useSelect, type UseSelectOption } from '../../hooks/useSelect'
+import { useTheme } from '../../global-contexts/theme'
+import type { SelectState } from '../../theme'
+import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+export type SelectOption<T extends string = string> = UseSelectOption & {
+  value?: T,
+}
+
+export type SelectProps = Partial<FormFieldDataHandling<string>>
+  & Partial<FormFieldInteractionStates>
+  & {
+    options: ReadonlyArray<SelectOption>,
+    value?: string | null,
+    initialValue?: string | null,
+    placeholder?: string,
+    showSearch?: boolean,
+    style?: StyleProp<ViewStyle>,
+  }
+
+export const Select = ({
+  options,
+  value: controlledValue,
+  initialValue = null,
+  placeholder = 'Select…',
+  showSearch = true,
+  disabled = false,
+  readOnly = false,
+  invalid = false,
+  onValueChange,
+  onEditComplete,
+  style,
+}: SelectProps) => {
+  const { theme } = useTheme()
+  const interactive = !disabled && !readOnly
+
+  const select = useSelect({
+    options,
+    value: controlledValue,
+    initialValue,
+    onValueChange,
+    onEditComplete,
+  })
+
+  const selectedLabel = useMemo(() => {
+    const selected = options.find((option) => option.id === select.value)
+    return selected?.label ?? placeholder
+  }, [options, placeholder, select.value])
+
+  const state: SelectState = {
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isInvalid: invalid,
+    isOpen: select.isOpen,
+    hasValue: !!select.value,
+  }
+
+  const selectTheme = theme.components.select
+
+  return (
+    <View style={style}>
+      <Pressable
+        disabled={!interactive}
+        onPress={() => select.toggleOpen()}
+        style={selectTheme.trigger(state)}
+      >
+        <Text style={selectTheme.triggerText(state)}>
+          {selectedLabel}
+        </Text>
+      </Pressable>
+
+      <Modal
+        visible={select.isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => select.setIsOpen(false)}
+      >
+        <Pressable
+          style={selectTheme.overlay(state)}
+          onPress={() => select.setIsOpen(false)}
+        >
+          <Pressable
+            style={selectTheme.menu(state)}
+            onPress={(event) => event.stopPropagation()}
+          >
+            {showSearch && (
+              <TextInput
+                value={select.searchQuery}
+                onChangeText={select.setSearchQuery}
+                placeholder="Search…"
+                placeholderTextColor={selectTheme.searchPlaceholderColor(state)}
+                style={selectTheme.search(state)}
+              />
+            )}
+            <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,
+                }
+
+                return (
+                  <Pressable
+                    disabled={item.disabled}
+                    onPress={() => select.selectValue(item.id)}
+                    style={selectTheme.option(optionState)}
+                  >
+                    <Text style={selectTheme.optionText(optionState)}>
+                      {item.label}
+                    </Text>
+                  </Pressable>
+                )
+              }}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  )
+}

package/src/components/Select/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './Button'
+export * from './Checkbox'
+export * from './Chip'
+export * from './IconButton'
+export * from './Input'
+export * from './MultiSelect'
+export * from './Select'

package/src/global-contexts/HightideContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+
+export type HightideContextValue = {
+  isLocalizationInitialized: boolean,
+  isThemeInitialized: boolean,
+}
+
+export const HightideContext = createContext<HightideContextValue | null>(null)
+
+export const useHightide = (): HightideContextValue => {
+  const context = useContext(HightideContext)
+  if (!context) {
+    throw new Error(
+      'useHightide must be used within HightideContext. Try adding a HightideProvider around your app.'
+    )
+  }
+  return context
+}

package/src/global-contexts/HightideProvider.tsx

@@ -0,0 +1,57 @@
+import { useMemo, type PropsWithChildren } from 'react'
+import { ArrayUtil } from '@helpwave/hightide-utils/utils'
+import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
+import { useLocalization } from '@helpwave/hightide-utils/context/localization'
+import { HightideContext } from './HightideContext'
+import type { LocalizationProviderProps } from './localization'
+import { LocalizationProvider } from './localization'
+import type { ThemeProviderProps } from './theme'
+import { ThemeProvider, useTheme } from './theme'
+import type { TranslationProviderProps } from './translation'
+import { TranslationProvider } from './translation'
+
+export type HightideProviderProps = PropsWithChildren & {
+  theme?: Omit<ThemeProviderProps, 'children'>,
+  locale?: Omit<LocalizationProviderProps, 'children'>,
+  translation?: Omit<TranslationProviderProps, 'children' | 'locale'>,
+}
+
+const HightideContextBridge = ({ children }: PropsWithChildren) => {
+  const { isInitialized: isLocalizationInitialized } = useLocalization()
+  const { isInitialized: isThemeInitialized } = useTheme()
+
+  const value = useMemo(() => ({
+    isLocalizationInitialized,
+    isThemeInitialized,
+  }), [isLocalizationInitialized, isThemeInitialized])
+
+  return (
+    <HightideContext.Provider value={value}>
+      {children}
+    </HightideContext.Provider>
+  )
+}
+
+export const HightideProvider = ({
+  children,
+  theme,
+  locale,
+  translation,
+}: HightideProviderProps) => {
+  const resolvedTranslations = useMemo(() => [
+    ...ArrayUtil.resolveSingleOrArray(translation?.translation ?? []),
+    hightideTranslation,
+  ], [translation?.translation])
+
+  return (
+    <LocalizationProvider {...locale}>
+      <TranslationProvider {...translation} translation={resolvedTranslations}>
+        <ThemeProvider {...theme}>
+          <HightideContextBridge>
+            {children}
+          </HightideContextBridge>
+        </ThemeProvider>
+      </TranslationProvider>
+    </LocalizationProvider>
+  )
+}

package/src/global-contexts/hightide-config/HightideConfigUtils.ts

@@ -0,0 +1,25 @@
+import type { LocaleInformation } from '../localization/forward-exports'
+import type { ThemeInformation } from '../theme/forward-exports'
+
+export const HightideConfigUtils = {
+  defaultSupportedLocales: [
+    { locale: 'de-DE', localName: 'Deutsch' },
+    { locale: 'en-US', localName: 'English (US)' },
+  ] as const satisfies readonly LocaleInformation[],
+  defaultSupportedThemes: [
+    {
+      theme: 'light',
+      nameTranslations: {
+        'de-DE': 'Hell',
+        'en-US': 'Light',
+      },
+    },
+    {
+      theme: 'dark',
+      nameTranslations: {
+        'de-DE': 'Dunkel',
+        'en-US': 'Dark',
+      },
+    },
+  ] as const satisfies readonly ThemeInformation[],
+}

package/src/global-contexts/hightide-config/forward-exports.ts

@@ -0,0 +1 @@
+export {}

package/src/global-contexts/hightide-config/index.ts

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

package/src/global-contexts/index.ts

@@ -0,0 +1,6 @@
+export * from './HightideContext'
+export * from './HightideProvider'
+export * from './hightide-config'
+export * from './localization'
+export * from './theme'
+export * from './translation'

package/src/global-contexts/localization/LocalizationProvider.tsx

@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react'
+import {
+  LocalizationProvider as LocalizationProviderBase,
+  type LocalizationProviderProps as LocalizationProviderPropsBase
+} from '@helpwave/hightide-utils/context/localization'
+import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
+import { HightideConfigUtils } from '../hightide-config/HightideConfigUtils'
+
+export type LocalizationProviderProps = PropsWithChildren
+  & Omit<LocalizationProviderPropsBase, 'store' | 'fallbackLocale' | 'supportedLocales'>
+  & Partial<Pick<LocalizationProviderPropsBase, 'fallbackLocale' | 'supportedLocales'>>
+
+export const LocalizationProvider = ({
+  children,
+  fallbackLocale = 'de-DE',
+  supportedLocales = HightideConfigUtils.defaultSupportedLocales,
+  ...rest
+}: LocalizationProviderProps) => {
+  const store = useNativeKeyValueStore()
+
+  return (
+    <LocalizationProviderBase
+      store={store}
+      fallbackLocale={fallbackLocale}
+      supportedLocales={supportedLocales}
+      {...rest}
+    >
+      {children}
+    </LocalizationProviderBase>
+  )
+}

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

@@ -0,0 +1,8 @@
+export {
+  LocalizationContext,
+  useLocalization,
+  useTimeZone,
+  useDateTimeFormat,
+  type LocalizationContextValue,
+  type LocaleInformation,
+} from '@helpwave/hightide-utils/context/localization'

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

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