@helpwave/hightide-native 0.0.1 → 0.0.5

package/src/components/{Chip → visualization-and-display}/Chip.tsx

@@ -1,27 +1,38 @@
 import {
-  coloringColors,
-  type ChipColoringStyle,
-  type ColoringType,
-  type ElementSize
-} from '@helpwave/hightide-design'
-import type { ReactNode } from 'react'
+  useMemo,
+  type ReactNode
+} from 'react'
 import {
   Text,
   View,
   type StyleProp,
-  type TextStyle,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
-import { useTheme } from '../../global-contexts/theme'
-import type { ChipState, ChipStyle, ChipTextStyle } from '../../theme'
+
+import {
+  coloringTypes,
+  type ColoringType
+} from '@helpwave/hightide-design/helpers'
+import type {
+  ChipColoringStyle,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import type {
+  ChipState,
+  ChipStyle,
+  ChipTextStyle
+} from '@/src/theme/types/components/chip'
+import type { StyleOverwrite } from '@/src/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[],
 }
@@ -32,8 +43,8 @@ export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
   size?: ChipSize,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
-  chipStyle?: StyleProp<ViewStyle> | ((style: ChipStyle) => StyleProp<ViewStyle>),
-  textStyle?: StyleProp<TextStyle> | ((style: ChipTextStyle) => StyleProp<TextStyle>),
+  chipStyle?: StyleOverwrite<ChipState, ChipStyle>,
+  textStyle?: StyleOverwrite<ChipState, ChipTextStyle>,
 }
 
 export const Chip = ({
@@ -47,24 +58,29 @@ export const Chip = ({
   ...props
 }: ChipProps) => {
   const { theme } = useTheme()
-  const state: ChipState = {
+
+  const state = useMemo((): ChipState => ({
     size,
     color,
     coloringStyle,
-  }
+  }), [size, color, coloringStyle])
 
-  const resolvedChip = theme.components.chip.chip(state)
-  const resolvedText = theme.components.chip.text(state)
-  const appliedChipStyle = typeof chipStyle === 'function' ? chipStyle(resolvedChip) : [resolvedChip, chipStyle]
-  const appliedTextStyle = typeof textStyle === 'function' ? textStyle(resolvedText) : [resolvedText, textStyle]
+  const resolvedChipStyle = useMemo(
+    () => theme.components.chip.chip(state, chipStyle),
+    [theme, state, chipStyle]
+  )
+  const resolvedTextStyle = useMemo(
+    () => theme.components.chip.text(state, textStyle),
+    [theme, state, textStyle]
+  )
 
   return (
     <View
       {...props}
-      style={[appliedChipStyle, style]}
+      style={[resolvedChipStyle, style]}
     >
       {typeof children === 'string' || typeof children === 'number'
-        ? <Text style={appliedTextStyle}>{children}</Text>
+        ? <Text style={resolvedTextStyle}>{children}</Text>
         : children}
     </View>
   )

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 '@/src/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/{Chip → 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 { 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 { hightideTranslation } from '@helpwave/hightide-utils/i18n'
+import { ArrayUtil } from '@helpwave/hightide-utils/utils'
+
+import { HightideContext } from '@/src/global-contexts/HightideContext'
+import {
+  LocalizationProvider,
+  type LocalizationProviderProps
+} from '@/src/global-contexts/localization/LocalizationProvider'
+import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import {
+  ThemeProvider,
+  type ThemeProviderProps
+} from '@/src/global-contexts/theme/ThemeProvider'
+import {
+  TranslationProvider,
+  type TranslationProviderProps
+} from '@/src/global-contexts/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 '@/src/global-contexts/localization/forward-exports'
+import { themes } from '@/src/theme/themes/nativeThemes'
+import type { Theme } from '@/src/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 { HightideConfigUtils } from '@/src/global-contexts/hightide-config/HightideConfigUtils'
+import { useNativeKeyValueStore } from '@/src/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 '@/src/global-contexts/theme/forward-exports'
+import type { Theme } from '@/src/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 { 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,
-}
+import type { SupportedThemesConfig } from '@helpwave/hightide-utils/context'
 
-const resolveThemeMode = (theme: string): ThemeMode => {
-  if (theme in themes) {
-    return theme as ThemeMode
-  }
-  return 'light'
+import { HightideConfigUtils } from '@/src/global-contexts/hightide-config/HightideConfigUtils'
+import {
+  ThemeContext,
+  useTheme,
+  type ThemeContextValue
+} from '@/src/global-contexts/theme/ThemeContext'
+import {
+  useCreateThemeConfig,
+  type SystemTheme
+} from '@/src/global-contexts/theme/forward-exports'
+import { useNativeKeyValueStore } from '@/src/hooks/useNativeKeyValueStore'
+import type { ThemeMode } from '@/src/theme/themes/nativeThemes'
+import type { Theme } from '@/src/theme/types/theme'
+
+export type ThemeProviderProps<T> = PropsWithChildren & {
+  theme?: ThemeMode | null,
+  fallbackTheme?: ThemeMode,
+  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/'

package/src/hooks/useSelect.ts

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

package/src/theme/resolvers/button.ts

@@ -1,13 +1,28 @@
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
 import {
   componentLayouts,
-  toPx,
-  type ColoringTokensDefinitions,
-  type DesignTheme as DesignTokensTheme,
-  type ElementSize,
-  type SemanticColors
-} from '@helpwave/hightide-design'
-import type { ButtonState, ButtonStyle, ButtonTextStyle, ButtonTheme } from '../types'
-import { isOutlineColoringStyle, resolveColoringStyles } from './coloring'
+  fontWeights
+} from '@helpwave/hightide-design/tokens'
+import type {
+  HightideDesignTokens as DesignTokensTheme,
+  ElementSize
+} from '@helpwave/hightide-design/types'
+
+import {
+  isOutlineColoringStyle,
+  resolveColoringStyles
+} from '@/src/theme/resolvers/coloring'
+import type { HightideSemanticColors } from '@/src/theme/types/color'
+import type {
+  ButtonState,
+  ButtonTheme
+} from '@/src/theme/types/components/button'
+import type { HightideComponentThemes } from '@/src/theme/types/components/hightide'
+import { createStyleResolver } from '@/src/theme/types/resolver'
 
 const buttonFontSizes: Record<ElementSize, number> = {
   xs: 12,
@@ -17,8 +32,8 @@ const buttonFontSizes: Record<ElementSize, number> = {
 }
 
 export type CreateButtonThemeOptions = {
-  semantic: SemanticColors,
-  coloring: ColoringTokensDefinitions,
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
 }
 
 export const createButtonTheme = ({
@@ -35,40 +50,40 @@ export const createButtonTheme = ({
     const sizing = componentLayouts.element[size]
     const outlinePadding = isOutlineColoringStyle(coloringStyle)
 
-    const button: ButtonStyle = {
+    const button: ViewStyle = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: resolved.backgroundColor,
       borderColor: resolved.borderColor,
       borderWidth: resolved.borderWidth,
-      paddingVertical: toPx(outlinePadding ? padding.paddingYOutline : padding.paddingY),
-      paddingHorizontal: toPx(outlinePadding ? padding.paddingXOutline : padding.paddingX),
-      gap: toPx(padding.gap),
-      minWidth: toPx(padding.minWidth),
-      minHeight: toPx(sizing.height),
-      borderRadius: toPx(padding.borderRadius),
+      paddingVertical: outlinePadding ? padding.paddingYOutline : padding.paddingY,
+      paddingHorizontal: outlinePadding ? padding.paddingXOutline : padding.paddingX,
+      gap: padding.gap,
+      minWidth: padding.minWidth,
+      minHeight: sizing.height,
+      borderRadius: padding.borderRadius,
       opacity: state.isDisabled ? 0.6 : 1,
     }
 
-    const text: ButtonTextStyle = {
+    const text: TextStyle = {
       color: resolved.color,
       fontSize: buttonFontSizes[size],
-      fontWeight: '600',
+      fontWeight: fontWeights.semibold,
     }
 
     return { button, text }
   }
 
   return {
-    button: (state) => resolveState(state).button,
-    text: (state) => resolveState(state).text,
+    button: createStyleResolver((state) => resolveState(state).button),
+    text: createStyleResolver((state) => resolveState(state).text),
   }
 }
 
 export const createButtonThemeFromDesign = (theme: DesignTokensTheme): ButtonTheme => {
   return createButtonTheme({
-    semantic: theme.semantic,
-    coloring: theme.coloring,
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
   })
 }