@helpwave/hightide-native 0.0.2 → 0.0.6

package/src/components/menu/MenuActionItem.tsx

@@ -1,4 +1,8 @@
-import { Fragment, useMemo, type ReactNode } from 'react'
+import {
+  Fragment,
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   Pressable,
   Text,
@@ -7,13 +11,14 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   MenuActionItemLabelStyle,
   MenuActionItemState,
-  MenuActionItemStyle,
-  StyleOverwrite
-} from '../../theme'
+  MenuActionItemStyle
+} from '../../theme/types/components/menu'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type MenuActionItemProps = Omit<PressableProps, 'children' | 'style'> & {
   label: string,

package/src/components/menu/MenuItem.tsx

@@ -1,12 +1,22 @@
-import { useMemo, type ReactNode } from 'react'
-import { Text, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+import {
+  useMemo,
+  type ReactNode
+} from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   MenuItemLabelStyle,
   MenuItemStyle,
-  MenuItemValueStyle,
-  StyleOverwrite
-} from '../../theme'
+  MenuItemValueStyle
+} from '../../theme/types/components/menu'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type MenuItemProps = Omit<ViewProps, 'style'> & {
   label: string,

package/src/components/menu/MenuNavigationItem.tsx

@@ -1,5 +1,8 @@
-import { ChevronRight } from 'lucide-react-native'
-import { Fragment, useMemo, type ReactNode } from 'react'
+import {
+  Fragment,
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   Pressable,
   Text,
@@ -8,13 +11,15 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+import { ChevronRight } from 'lucide-react-native'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   MenuActionItemLabelStyle,
   MenuActionItemState,
-  MenuActionItemStyle,
-  StyleOverwrite
-} from '../../theme'
+  MenuActionItemStyle
+} from '../../theme/types/components/menu'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type MenuNavigationItemProps = Omit<PressableProps, 'children' | 'style'> & {
   label: string,

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

@@ -1,10 +1,7 @@
 import {
-  coloringColors,
-  type ButtonColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
-import { forwardRef, type ReactNode } from 'react'
+  forwardRef,
+  type ReactNode
+} from 'react'
 import {
   Pressable,
   Text,
@@ -12,20 +9,30 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
+
+import {
+  coloringTypes,
+  type ColoringType
+} from '@helpwave/hightide-design/helpers'
+import type {
+  ButtonColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ButtonState,
   ButtonStyle,
-  ButtonTextStyle,
-  StyleOverwrite
-} from '../../theme'
+  ButtonTextStyle
+} from '../../theme/types/components/button'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ButtonSize = ElementSize
 
 export type ButtonColor = ColoringType
 
 export const ButtonUtil = {
-  colors: coloringColors,
+  colors: coloringTypes,
   sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
   coloringStyles: ['outline', 'solid', 'text', 'tonal', 'tonal-outline'] as const satisfies readonly ButtonColoringStyle[],
 }

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

@@ -1,16 +1,35 @@
-import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import { Check, Minus } from 'lucide-react-native'
-import { useCallback, useMemo } from 'react'
+import {
+  useCallback,
+  useMemo
+} 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 { CheckboxSize, CheckboxState, CheckboxStyle, StyleOverwrite } from '../../theme'
-import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+import {
+  Check,
+  Minus
+} from 'lucide-react-native'
+
+import {
+  useControlledState,
+  useEventCallbackStabilizer
+} from '@helpwave/hightide-utils/hooks'
+
+import { Icon } from '../visualization-and-display/Icon'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  CheckboxSize,
+  CheckboxState,
+  CheckboxStyle
+} from '../../theme/types/components/checkbox'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
 
 export type { CheckboxSize }
 

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

@@ -1,14 +1,28 @@
 import {
-  type ButtonColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
+  forwardRef,
+  type ReactNode
+} from 'react'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
 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, StyleOverwrite } from '../../theme'
+
+import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type {
+  ButtonColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { Icon } from '../visualization-and-display/Icon'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  IconButtonState,
+  IconButtonStyle
+} from '../../theme/types/components/iconButton'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type IconButtonSize = ElementSize
 

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

@@ -1,13 +1,30 @@
+import {
+  forwardRef,
+  useMemo
+} from 'react'
+import {
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type TextStyle
+} from 'react-native'
+
 import {
   useControlledState,
   useDelay,
   type UseDelayOptionsResolved
 } from '@helpwave/hightide-utils/hooks'
-import { forwardRef, useMemo } from 'react'
-import { TextInput, type StyleProp, type TextInputProps, type TextStyle } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
-import type { InputState, InputStyle, StyleOverwrite } from '../../theme'
-import type { FormFieldDataHandling, FormFieldInteractionStates } from '../../types/formField'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  InputState,
+  InputStyle
+} from '../../theme/types/components/input'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
 
 export type EditCompleteOptionsResolved = {
   onBlur: boolean,

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

@@ -1,4 +1,3 @@
-import { Check } from 'lucide-react-native'
 import { useMemo } from 'react'
 import {
   FlatList,
@@ -10,12 +9,20 @@ import {
   type StyleProp,
   type ViewStyle
 } from 'react-native'
-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'
-import { Chip } from '../visualization-and-display'
+import { Check } from 'lucide-react-native'
+
+import { Chip } from '../visualization-and-display/Chip'
+import { Icon } from '../visualization-and-display/Icon'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import {
+  useMultiSelect,
+  type UseMultiSelectOption
+} from '../../hooks/useMultiSelect'
+import type { MultiSelectState } from '../../theme/types/components/multiSelect'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
 
 export type MultiSelectOption = UseMultiSelectOption
 

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

@@ -9,10 +9,17 @@ import {
   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'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import {
+  useSelect,
+  type UseSelectOption
+} from '../../hooks/useSelect'
+import type { SelectState } from '../../theme/types/components/select'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
 
 export type SelectOption<T extends string = string> = UseSelectOption & {
   value?: T,

package/src/components/visualization-and-display/Chip.tsx

@@ -1,10 +1,7 @@
 import {
-  coloringColors,
-  type ChipColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
-import { useMemo, type ReactNode } from 'react'
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   Text,
   View,
@@ -12,15 +9,30 @@ import {
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
-import type { ChipState, ChipStyle, ChipTextStyle, StyleOverwrite } from '../../theme'
+
+import {
+  coloringTypes,
+  type ColoringType
+} from '@helpwave/hightide-design/helpers'
+import type {
+  ChipColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  ChipState,
+  ChipStyle,
+  ChipTextStyle
+} from '../../theme/types/components/chip'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChipSize = ElementSize
 
 export type ChipColor = ColoringType
 
 export const ChipUtil = {
-  colors: coloringColors,
+  colors: coloringTypes,
   sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
   coloringStyles: ['solid', 'tonal', 'outline', 'tonal-outline'] as const satisfies readonly ChipColoringStyle[],
 }

package/src/components/visualization-and-display/Icon.tsx

@@ -0,0 +1,27 @@
+import type { LucideIcon } from 'lucide-react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+
+export type IconProps = {
+  icon: LucideIcon,
+  size?: ElementSize,
+  color?: string,
+}
+
+export const Icon = ({
+  icon: IconComponent,
+  size = 'md',
+  color,
+}: IconProps) => {
+  const { theme } = useTheme()
+
+  return (
+    <IconComponent
+      size={theme.layout.icon[size].size}
+      strokeWidth={theme.layout.icon[size].strokeWidth}
+      color={color}
+    />
+  )
+}

package/src/components/visualization-and-display/index.ts

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

package/src/global-contexts/HightideContext.ts

@@ -1,4 +1,7 @@
-import { createContext, useContext } from 'react'
+import {
+  createContext,
+  useContext
+} from 'react'
 
 export type HightideContextValue = {
   isLocalizationInitialized: boolean,

package/src/global-contexts/HightideProvider.tsx

@@ -1,14 +1,26 @@
-import { useMemo, type PropsWithChildren } from 'react'
-import { ArrayUtil } from '@helpwave/hightide-utils/utils'
-import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
+import {
+  useMemo,
+  type PropsWithChildren
+} from 'react'
+
 import { useLocalization } from '@helpwave/hightide-utils/context/localization'
+import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
+import { ArrayUtil } from '@helpwave/hightide-utils/utils'
+
 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'
+import {
+  LocalizationProvider,
+  type LocalizationProviderProps
+} from './localization/LocalizationProvider'
+import { useTheme } from './theme/ThemeContext'
+import {
+  ThemeProvider,
+  type ThemeProviderProps
+} from './theme/ThemeProvider'
+import {
+  TranslationProvider,
+  type TranslationProviderProps
+} from './translation/forward-exports'
 
 export type HightideProviderProps = PropsWithChildren & {
   theme?: Omit<ThemeProviderProps, 'children'>,

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

@@ -1,25 +1,28 @@
-import type { LocaleInformation } from '../localization/forward-exports'
-import type { ThemeInformation } from '../theme/forward-exports'
+import type { SupportedThemesConfig } from '@helpwave/hightide-utils/context'
+
+import type { SupportedLocalesConfig } from '../localization/forward-exports'
+import { themes } from '../../theme/themes/nativeThemes'
+import type { Theme } from '../../theme/types/theme'
 
 export const HightideConfigUtils = {
-  defaultSupportedLocales: [
-    { locale: 'de-DE', localName: 'Deutsch' },
-    { locale: 'en-US', localName: 'English (US)' },
-  ] as const satisfies readonly LocaleInformation[],
-  defaultSupportedThemes: [
-    {
-      theme: 'light',
+  defaultSupportedLocales: {
+    'de-DE': { localName: 'Deutsch' },
+    'en-US': { localName: 'English (US)' },
+  } as const satisfies SupportedLocalesConfig,
+  defaultSupportedThemes: {
+    light: {
       nameTranslations: {
         'de-DE': 'Hell',
         'en-US': 'Light',
       },
+      theme: themes.light
     },
-    {
-      theme: 'dark',
+    dark: {
       nameTranslations: {
         'de-DE': 'Dunkel',
         'en-US': 'Dark',
       },
+      theme: themes.dark,
     },
-  ] as const satisfies readonly ThemeInformation[],
+  } as const satisfies SupportedThemesConfig<Theme>,
 }

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

@@ -1,10 +1,12 @@
 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'
+import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
 
 export type LocalizationProviderProps = PropsWithChildren
   & Omit<LocalizationProviderPropsBase, 'store' | 'fallbackLocale' | 'supportedLocales'>

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

@@ -5,4 +5,5 @@ export {
   useDateTimeFormat,
   type LocalizationContextValue,
   type LocaleInformation,
+  type SupportedLocalesConfig,
 } from '@helpwave/hightide-utils/context/localization'

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

@@ -1,12 +1,17 @@
-import { createContext, useContext } from 'react'
-import type { ThemeConfigValue, ThemeInformation } from './forward-exports'
-import type { DesignTheme, ThemeMode } from '../../theme'
+import {
+  createContext,
+  useContext
+} from 'react'
+
+import type {
+  ThemeConfigValue,
+  ThemeInformation
+} from './forward-exports'
+import type { Theme } from '../../theme/types/theme'
 
 export type { ThemeInformation }
 
-export type ThemeContextValue = Omit<ThemeConfigValue, 'theme'> & {
-  themeMode: ThemeMode,
-  theme: DesignTheme,
+export type ThemeContextValue = ThemeConfigValue<Theme> & {
   isInitialized: boolean,
 }
 

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

@@ -1,25 +1,32 @@
-import { useEffect, useMemo, useState, type PropsWithChildren } from 'react'
+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 type { SupportedThemesConfig } from '@helpwave/hightide-utils/context'
+
 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'
+import {
+  ThemeContext,
+  useTheme,
+  type ThemeContextValue
+} from './ThemeContext'
+import {
+  useCreateThemeConfig,
+  type SystemTheme
+} from './forward-exports'
+import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
+import type { ThemeMode } from '../../theme/themes/nativeThemes'
+import type { Theme } from '../../theme/types/theme'
 
-export type ThemeProviderProps = PropsWithChildren & {
-  theme?: string | null,
-  systemTheme?: SystemTheme,
+export type ThemeProviderProps<T> = PropsWithChildren & {
+  theme?: ThemeMode | null,
   fallbackTheme?: ThemeMode,
-  supportedThemes?: readonly ThemeInformation[],
-  onChangedTheme?: (theme: string) => void,
-}
-
-const resolveThemeMode = (theme: string): ThemeMode => {
-  if (theme in themes) {
-    return theme as ThemeMode
-  }
-  return 'light'
+  supportedThemes?: SupportedThemesConfig<T>,
+  onChangedTheme?: (themeMode: string) => void,
 }
 
 export const useThemeMode = (): ThemeMode => {
@@ -34,7 +41,7 @@ const detectNativeSystemTheme = (): SystemTheme | undefined => {
   return undefined
 }
 
-const useNativeSystemTheme = (enabled: boolean) => {
+const useNativeSystemTheme = (enabled: boolean = true) => {
   const [systemTheme, setSystemTheme] = useState<SystemTheme | undefined>(() =>
     (enabled ? detectNativeSystemTheme() : undefined))
 
@@ -57,13 +64,11 @@ export const ThemeProvider = ({
   children,
   theme,
   fallbackTheme = 'light',
-  systemTheme: systemThemeOverride,
   supportedThemes = HightideConfigUtils.defaultSupportedThemes,
   onChangedTheme,
-}: ThemeProviderProps) => {
+}: ThemeProviderProps<Theme>) => {
   const store = useNativeKeyValueStore()
-  const detectedSystemTheme = useNativeSystemTheme(systemThemeOverride === undefined)
-  const systemTheme = systemThemeOverride ?? detectedSystemTheme
+  const systemTheme = useNativeSystemTheme()
 
   const themeConfig = useCreateThemeConfig({
     store,
@@ -74,27 +79,19 @@ export const ThemeProvider = ({
     onChangedTheme,
   })
 
-  const value = useMemo((): ThemeContextValue => {
-    const themeMode = resolveThemeMode(themeConfig.theme)
-
+  const contextValue = useMemo((): ThemeContextValue => {
     return {
-      preferredTheme: themeConfig.preferredTheme,
+      preferredThemeMode: themeConfig.preferredThemeMode,
       setTheme: themeConfig.setTheme,
       supportedThemes: themeConfig.supportedThemes,
-      themeMode,
-      theme: getTheme(themeMode),
+      themeMode: themeConfig.themeMode,
+      theme: themeConfig.theme,
       isInitialized: store.isInitialized,
     }
-  }, [
-    store.isInitialized,
-    themeConfig.preferredTheme,
-    themeConfig.setTheme,
-    themeConfig.supportedThemes,
-    themeConfig.theme,
-  ])
+  }, [store.isInitialized, themeConfig.preferredThemeMode, themeConfig.setTheme, themeConfig.supportedThemes, themeConfig.theme, themeConfig.themeMode])
 
   return (
-    <ThemeContext.Provider value={value}>
+    <ThemeContext.Provider value={contextValue}>
       {children}
     </ThemeContext.Provider>
   )

package/src/hooks/useMultiSelect.ts

@@ -4,6 +4,7 @@ import {
   useMemo,
   useState
 } from 'react'
+
 import {
   useEventCallbackStabilizer,
   useListNavigation,

package/src/hooks/useNativeKeyValueStore.ts

@@ -1,5 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+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/'