@helpwave/hightide-native 0.0.6 → 0.0.8

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "src"
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-design": "0.0.4",
-    "@helpwave/hightide-utils": "0.0.4"
+    "@helpwave/hightide-design": "0.0.6",
+    "@helpwave/hightide-utils": "0.0.5"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",

package/src/components/chat/ChatMessageCard.tsx

@@ -10,7 +10,7 @@ import {
   type ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {

package/src/components/chat/ChatSystemLine.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native'
 import { CheckCheck } from 'lucide-react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {

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

@@ -13,7 +13,7 @@ import {
 import {
   coloringTypes,
   type ColoringType
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

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

@@ -10,7 +10,7 @@ import {
 } from 'react-native'
 import type { LucideIcon } from 'lucide-react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

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

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  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 { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type { SwitchState } from '../../theme/types/components/switch'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { Color } from '../../theme/types/color'
+import type {
+  FormFieldDataHandling,
+  FormFieldInteractionStates
+} from '../../types/formField'
+
+const TRACK_WIDTH = 48
+const TRACK_HEIGHT = 28
+const TRACK_BORDER_WIDTH = 2
+const TRACK_PADDING = 4
+const THUMB_SIZE_INACTIVE = 12
+const THUMB_SIZE_ACTIVE = 16
+const THUMB_OFFSET_INACTIVE = 2
+const ANIMATION_DURATION_MS = 250
+
+const TRACK_INNER_WIDTH = TRACK_WIDTH - (TRACK_BORDER_WIDTH * 2) - (TRACK_PADDING * 2)
+const TRACK_INNER_HEIGHT = TRACK_HEIGHT - (TRACK_BORDER_WIDTH * 2) - (TRACK_PADDING * 2)
+const THUMB_OFFSET_ACTIVE = TRACK_INNER_WIDTH - THUMB_SIZE_ACTIVE
+const THUMB_TOP_INACTIVE = (TRACK_INNER_HEIGHT - THUMB_SIZE_INACTIVE) / 2
+const THUMB_TOP_ACTIVE = (TRACK_INNER_HEIGHT - THUMB_SIZE_ACTIVE) / 2
+
+export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'disabled'>
+  & Partial<FormFieldInteractionStates>
+  & Partial<FormFieldDataHandling<boolean>>
+  & {
+    initialValue?: boolean,
+    style?: StyleProp<ViewStyle>,
+    trackColorStyle?: StyleOverwrite<SwitchState, Color>,
+    borderColorStyle?: StyleOverwrite<SwitchState, Color>,
+    thumbColorStyle?: StyleOverwrite<SwitchState, Color>,
+  }
+
+export const Switch = ({
+  value: controlledValue,
+  initialValue = false,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  onValueChange,
+  onEditComplete,
+  style,
+  trackColorStyle,
+  borderColorStyle,
+  thumbColorStyle,
+  accessibilityLabel,
+  ...props
+}: SwitchProps) => {
+  const { theme } = useTheme()
+  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 state = useMemo((): SwitchState => ({
+    isActive: value,
+    isInvalid: invalid,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+  }), [disabled, invalid, readOnly, value])
+
+  const trackColor = useMemo(
+    () => theme.components.switch.trackColor(state, trackColorStyle),
+    [theme, state, trackColorStyle]
+  )
+  const borderColor = useMemo(
+    () => theme.components.switch.borderColor(state, borderColorStyle),
+    [theme, state, borderColorStyle]
+  )
+  const thumbColor = useMemo(
+    () => theme.components.switch.thumbColor(state, thumbColorStyle),
+    [theme, state, thumbColorStyle]
+  )
+
+  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 thumbSize = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_SIZE_INACTIVE, THUMB_SIZE_ACTIVE],
+  })
+  const thumbTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_OFFSET_INACTIVE, THUMB_OFFSET_ACTIVE],
+  })
+  const thumbTop = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [THUMB_TOP_INACTIVE, THUMB_TOP_ACTIVE],
+  })
+
+  return (
+    <Pressable
+      {...props}
+      disabled={!interactive}
+      accessibilityRole="switch"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        checked: value,
+        disabled,
+      }}
+      onPress={(event) => {
+        if (interactive) {
+          setValue((previous) => !previous)
+        }
+        props.onPress?.(event)
+      }}
+      style={style}
+    >
+      <View
+        style={{
+          width: TRACK_WIDTH,
+          height: TRACK_HEIGHT,
+          borderRadius: TRACK_HEIGHT / 2,
+          borderWidth: TRACK_BORDER_WIDTH,
+          borderColor,
+          backgroundColor: trackColor,
+          padding: TRACK_PADDING,
+          opacity: disabled ? 0.6 : 1,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Animated.View
+            style={{
+              position: 'absolute',
+              top: thumbTop,
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: THUMB_SIZE_ACTIVE / 2,
+              backgroundColor: thumbColor,
+              transform: [{ translateX: thumbTranslateX }],
+            }}
+          />
+        </View>
+      </View>
+    </Pressable>
+  )
+}

package/src/components/user-interaction/index.ts

@@ -4,3 +4,4 @@ export * from './IconButton'
 export * from './Input'
 export * from './MultiSelect'
 export * from './Select'
+export * from './Switch'

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

@@ -0,0 +1,286 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode
+} from 'react'
+import {
+  Image,
+  Text,
+  View,
+  type ImageProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle
+} from 'react-native'
+import { User } from 'lucide-react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+import type {
+  AvatarGroupMoreStyle,
+  AvatarGroupStackStyle,
+  AvatarImageStyle,
+  AvatarIconStyle,
+  AvatarStatus,
+  AvatarStyle,
+  AvatarTextStyle,
+  AvatarWithLabelContainerStyle,
+  AvatarWithLabelTextStyle,
+  AvatarWithStatusContainerStyle,
+  AvatarStatusDotStyle
+} from '../../theme/types/components/avatar'
+import type { StyleOverwrite } from '../../theme/types/resolver'
+
+export type AvatarSize = ElementSize
+
+type ImageConfig = {
+  avatarUrl: string,
+  alt: string,
+}
+
+export type AvatarImageProps = Omit<ImageProps, 'source'> & {
+  source: { uri: string },
+  alt?: string,
+}
+
+const DefaultAvatarImage: ComponentType<AvatarImageProps> = ({ alt, ...props }) => (
+  <Image
+    {...props}
+    accessibilityLabel={alt}
+  />
+)
+
+export const AvatarUtil = {
+  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
+  statuses: ['online', 'offline', 'away', 'busy', 'unknown'] as const satisfies readonly AvatarStatus[],
+}
+
+export type AvatarProps = Omit<ViewProps, 'children' | 'style'> & {
+  image?: ImageConfig,
+  name?: string,
+  size?: AvatarSize,
+  ImageComponent?: ComponentType<AvatarImageProps>,
+  style?: StyleProp<ViewStyle>,
+  avatarStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarStyle>,
+  imageStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarImageStyle>,
+  textStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarTextStyle>,
+  iconStyle?: StyleOverwrite<{ size?: ElementSize, isGrouped?: boolean, groupIndex?: number }, AvatarIconStyle>,
+  isGrouped?: boolean,
+  groupIndex?: number,
+}
+
+export const Avatar = ({
+  image: initialImage,
+  name,
+  size = 'md',
+  ImageComponent = DefaultAvatarImage,
+  style,
+  avatarStyle,
+  imageStyle,
+  textStyle,
+  iconStyle,
+  isGrouped = false,
+  groupIndex,
+  ...props
+}: AvatarProps) => {
+  const { theme } = useTheme()
+  const [hasError, setHasError] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+  const [image, setImage] = useState(initialImage)
+  const ImageElement = ImageComponent
+
+  const state = useMemo(() => ({
+    size,
+    isGrouped,
+    groupIndex,
+  }), [size, isGrouped, groupIndex])
+
+  const displayName = useMemo(() => {
+    const maxLetters = size === 'sm' ? 1 : 2
+    return (name ?? '')
+      .split(' ')
+      .filter((_, index) => index < maxLetters)
+      .map(value => value[0])
+      .join('')
+      .toUpperCase()
+  }, [name, size])
+
+  const isShowingImage = !!image && (!hasError || !hasLoaded)
+  const isShowingFallback = !hasLoaded || hasError
+
+  useEffect(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false)
+      setHasLoaded(false)
+    }
+    setImage(initialImage)
+  }, [image?.avatarUrl, initialImage])
+
+  const resolvedAvatar = theme.components.avatar.avatar(state, avatarStyle)
+  const resolvedImage = theme.components.avatar.image(state, imageStyle)
+  const resolvedText = theme.components.avatar.text(state, textStyle)
+  const resolvedIcon = theme.components.avatar.icon(state, iconStyle)
+
+  return (
+    <View
+      {...props}
+      style={[resolvedAvatar, style]}
+    >
+      {isShowingImage && (
+        <ImageElement
+          key={image?.avatarUrl}
+          source={{ uri: image?.avatarUrl ?? '' }}
+          alt={image?.alt}
+          style={[resolvedImage, { opacity: hasLoaded && !hasError ? 1 : 0 }]}
+          onLoad={() => setHasLoaded(true)}
+          onError={() => setHasError(true)}
+        />
+      )}
+      {isShowingFallback && (
+        name ? (
+          <Text style={resolvedText}>{displayName}</Text>
+        ) : (
+          <User
+            size={resolvedIcon.size}
+            strokeWidth={resolvedIcon.strokeWidth}
+            color={resolvedIcon.color}
+          />
+        )
+      )}
+    </View>
+  )
+}
+
+export type AvatarGroupProps = Omit<ViewProps, 'children' | 'style'> & {
+  avatars: Omit<AvatarProps, 'size' | 'isGrouped' | 'groupIndex'>[],
+  showTotalNumber?: boolean,
+  size?: AvatarSize,
+  ImageComponent?: ComponentType<AvatarImageProps>,
+  style?: StyleProp<ViewStyle>,
+  stackStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupStackStyle>,
+  moreStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupMoreStyle>,
+}
+
+export const AvatarGroup = ({
+  avatars,
+  showTotalNumber = true,
+  size = 'md',
+  ImageComponent,
+  style,
+  stackStyle,
+  moreStyle,
+  ...props
+}: AvatarGroupProps) => {
+  const { theme } = useTheme()
+  const maxShownProfiles = theme.layout.avatarGroup.maxShown
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
+  const notDisplayedProfiles = avatars.length - maxShownProfiles
+
+  const state = useMemo(() => ({
+    size,
+    count: displayedProfiles.length,
+  }), [size, displayedProfiles.length])
+
+  const resolvedContainer = theme.components.avatar.group.container(state)
+  const resolvedStack = theme.components.avatar.group.stack(state, stackStyle)
+  const resolvedMore = theme.components.avatar.group.more(state, moreStyle)
+
+  return (
+    <View
+      {...props}
+      style={[resolvedContainer, style]}
+    >
+      <View style={resolvedStack}>
+        {displayedProfiles.map((avatar, index) => (
+          <Avatar
+            {...avatar}
+            key={index}
+            size={size}
+            isGrouped
+            groupIndex={index}
+            ImageComponent={avatar.ImageComponent ?? ImageComponent}
+          />
+        ))}
+      </View>
+      {showTotalNumber && notDisplayedProfiles > 0 && (
+        <Text style={resolvedMore}>
+          {`+ ${notDisplayedProfiles}`}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export type { AvatarStatus }
+
+export type AvatarWithStatusProps = AvatarProps & {
+  status?: AvatarStatus,
+  containerStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarWithStatusContainerStyle>,
+  statusDotStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarStatusDotStyle>,
+}
+
+export const AvatarWithStatus = ({
+  status = 'unknown',
+  size = 'md',
+  style,
+  containerStyle,
+  statusDotStyle,
+  ...avatarProps
+}: AvatarWithStatusProps) => {
+  const { theme } = useTheme()
+
+  const state = useMemo(() => ({
+    size,
+    status,
+  }), [size, status])
+
+  const resolvedContainer = theme.components.avatar.withStatus.container(state, containerStyle)
+  const resolvedStatusDot = theme.components.avatar.withStatus.statusDot(state, statusDotStyle)
+
+  return (
+    <View style={[resolvedContainer, style]}>
+      <Avatar {...avatarProps} size={size} />
+      <View style={resolvedStatusDot} />
+    </View>
+  )
+}
+
+type AvatarWithLabelPosition = 'left' | 'right'
+
+export type AvatarWithLabelProps = AvatarProps & {
+  label: ReactNode,
+  labelPosition?: AvatarWithLabelPosition,
+  containerStyle?: StyleOverwrite<{ size?: ElementSize }, AvatarWithLabelContainerStyle>,
+  labelStyle?: StyleOverwrite<{ size?: ElementSize }, AvatarWithLabelTextStyle>,
+}
+
+export const AvatarWithLabel = ({
+  label,
+  labelPosition = 'left',
+  size = 'md',
+  style,
+  containerStyle,
+  labelStyle,
+  ...avatarProps
+}: AvatarWithLabelProps) => {
+  const { theme } = useTheme()
+
+  const state = useMemo(() => ({ size }), [size])
+  const resolvedContainer = theme.components.avatar.withLabel.container(state, containerStyle)
+  const resolvedLabel = theme.components.avatar.withLabel.text(state, labelStyle)
+
+  const avatar = <Avatar {...avatarProps} size={size} />
+  const labelElement = typeof label === 'string' || typeof label === 'number'
+    ? <Text style={resolvedLabel}>{label}</Text>
+    : label
+
+  return (
+    <View style={[resolvedContainer, style]}>
+      {labelPosition === 'left' ? labelElement : avatar}
+      {labelPosition === 'left' ? avatar : labelElement}
+    </View>
+  )
+}

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

@@ -13,7 +13,7 @@ import {
 import {
   coloringTypes,
   type ColoringType
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import type {
   ChipColoringStyle,
   ElementSize

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

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

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

@@ -1,8 +1,8 @@
 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'
+import { themes } from '../../theme/themes/hightideThemes'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export const HightideConfigUtils = {
   defaultSupportedLocales: {
@@ -24,5 +24,5 @@ export const HightideConfigUtils = {
       },
       theme: themes.dark,
     },
-  } as const satisfies SupportedThemesConfig<Theme>,
+  } as const satisfies SupportedThemesConfig<HightideTheme>,
 }

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

@@ -7,11 +7,11 @@ import type {
   ThemeConfigValue,
   ThemeInformation
 } from './forward-exports'
-import type { Theme } from '../../theme/types/theme'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export type { ThemeInformation }
 
-export type ThemeContextValue = ThemeConfigValue<Theme> & {
+export type ThemeContextValue = ThemeConfigValue<HightideTheme> & {
   isInitialized: boolean,
 }
 

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

@@ -19,8 +19,8 @@ import {
   type SystemTheme
 } from './forward-exports'
 import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
-import type { ThemeMode } from '../../theme/themes/nativeThemes'
-import type { Theme } from '../../theme/types/theme'
+import type { ThemeMode } from '../../theme/themes/hightideThemes'
+import type { HightideTheme } from '../../theme/types/theme'
 
 export type ThemeProviderProps<T> = PropsWithChildren & {
   theme?: ThemeMode | null,
@@ -66,7 +66,7 @@ export const ThemeProvider = ({
   fallbackTheme = 'light',
   supportedThemes = HightideConfigUtils.defaultSupportedThemes,
   onChangedTheme,
-}: ThemeProviderProps<Theme>) => {
+}: ThemeProviderProps<HightideTheme>) => {
   const store = useNativeKeyValueStore()
   const systemTheme = useNativeSystemTheme()