@helpwave/hightide-native 0.0.5 → 0.0.7

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,19 +13,19 @@ import {
 import {
   coloringTypes,
   type ColoringType
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import type {
   ChipColoringStyle,
   ElementSize
 } from '@helpwave/hightide-design/types'
 
-import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChipState,
   ChipStyle,
   ChipTextStyle
-} from '@/src/theme/types/components/chip'
-import type { StyleOverwrite } from '@/src/theme/types/resolver'
+} from '../../theme/types/components/chip'
+import type { StyleOverwrite } from '../../theme/types/resolver'
 
 export type ChipSize = ElementSize
 

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

@@ -2,7 +2,7 @@ import type { LucideIcon } from 'lucide-react-native'
 
 import type { ElementSize } from '@helpwave/hightide-design/types'
 
-import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
 
 export type IconProps = {
   icon: LucideIcon,

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/HightideProvider.tsx

@@ -7,20 +7,20 @@ 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 '@/src/global-contexts/HightideContext'
+import { HightideContext } from './HightideContext'
 import {
   LocalizationProvider,
   type LocalizationProviderProps
-} from '@/src/global-contexts/localization/LocalizationProvider'
-import { useTheme } from '@/src/global-contexts/theme/ThemeContext'
+} from './localization/LocalizationProvider'
+import { useTheme } from './theme/ThemeContext'
 import {
   ThemeProvider,
   type ThemeProviderProps
-} from '@/src/global-contexts/theme/ThemeProvider'
+} from './theme/ThemeProvider'
 import {
   TranslationProvider,
   type TranslationProviderProps
-} from '@/src/global-contexts/translation/forward-exports'
+} from './translation/forward-exports'
 
 export type HightideProviderProps = PropsWithChildren & {
   theme?: Omit<ThemeProviderProps, 'children'>,

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

@@ -1,8 +1,8 @@
 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'
+import type { SupportedLocalesConfig } from '../localization/forward-exports'
+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/localization/LocalizationProvider.tsx

@@ -5,8 +5,8 @@ import {
   type LocalizationProviderProps as LocalizationProviderPropsBase
 } from '@helpwave/hightide-utils/context/localization'
 
-import { HightideConfigUtils } from '@/src/global-contexts/hightide-config/HightideConfigUtils'
-import { useNativeKeyValueStore } from '@/src/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/theme/ThemeContext.ts

@@ -6,12 +6,12 @@ import {
 import type {
   ThemeConfigValue,
   ThemeInformation
-} from '@/src/global-contexts/theme/forward-exports'
-import type { Theme } from '@/src/theme/types/theme'
+} from './forward-exports'
+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

@@ -8,19 +8,19 @@ import { Appearance } from 'react-native'
 
 import type { SupportedThemesConfig } from '@helpwave/hightide-utils/context'
 
-import { HightideConfigUtils } from '@/src/global-contexts/hightide-config/HightideConfigUtils'
+import { HightideConfigUtils } from '../hightide-config/HightideConfigUtils'
 import {
   ThemeContext,
   useTheme,
   type ThemeContextValue
-} from '@/src/global-contexts/theme/ThemeContext'
+} from './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'
+} from './forward-exports'
+import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
+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()
 

package/src/theme/resolvers/avatar.ts

@@ -0,0 +1,231 @@
+import type {
+  ImageStyle,
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import {
+  componentLayouts,
+  fontWeights
+} from '@helpwave/hightide-design/tokens'
+import type {
+  ElementSize,
+  HightideThemeTokens as DesignTokensTheme,
+  TypographyTokens
+} from '@helpwave/hightide-design/types'
+
+import { resolveColoringStyles } from './coloring'
+import type {
+  ColorPalette,
+  HightideSemanticColors
+} from '../types/color'
+import type {
+  AvatarGroupState,
+  AvatarIconStyle,
+  AvatarState,
+  AvatarStatus,
+  AvatarTheme,
+  AvatarWithLabelState,
+  AvatarWithStatusState
+} from '../types/components/avatar'
+import type { HightideComponentThemes } from '../types/components/hightide'
+import { createStyleResolver } from '../types/resolver'
+
+const avatarFontWeights: Record<ElementSize, string> = {
+  xs: fontWeights.semibold,
+  sm: fontWeights.semibold,
+  md: fontWeights.semibold,
+  lg: fontWeights.bold,
+}
+
+const statusColor = (
+  status: AvatarStatus,
+  semantic: HightideSemanticColors,
+  gray: ColorPalette
+): string => {
+  switch (status) {
+  case 'online':
+    return semantic.positive
+  case 'busy':
+    return semantic.negative
+  case 'away':
+    return semantic.warning
+  case 'offline':
+  case 'unknown':
+  default:
+    return gray[500]
+  }
+}
+
+export type CreateAvatarThemeOptions = {
+  semantic: HightideSemanticColors,
+  coloring: HightideComponentThemes['coloring'],
+  gray: ColorPalette,
+  typography: TypographyTokens,
+}
+
+export const createAvatarTheme = ({
+  semantic,
+  coloring,
+  gray,
+  typography,
+}: CreateAvatarThemeOptions): AvatarTheme => {
+  const resolveAvatar = (state: AvatarState) => {
+    const size = state.size ?? 'md'
+    const layout = componentLayouts.avatar[size]
+    const groupLayout = componentLayouts.avatarGroup
+    const resolved = resolveColoringStyles(coloring.primary, 'solid', semantic)
+    const borderRadius = layout.size / 2
+
+    const avatar: ViewStyle = {
+      position: state.isGrouped ? 'absolute' : 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: layout.size,
+      height: layout.size,
+      padding: layout.padding,
+      borderRadius,
+      backgroundColor: resolved.backgroundColor,
+      overflow: 'hidden',
+      ...(state.isGrouped ? {
+        left: (state.groupIndex ?? 0) * layout.size * groupLayout.overlap,
+        zIndex: groupLayout.maxShown - (state.groupIndex ?? 0),
+        shadowColor: '#000000',
+        shadowOffset: { width: 4, height: 0 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        elevation: 4,
+      } : {}),
+    }
+
+    const image: ImageStyle = {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: layout.size,
+      height: layout.size,
+      borderRadius,
+    }
+
+    const text: TextStyle = {
+      color: resolved.color,
+      fontSize: layout.fontSize,
+      fontWeight: avatarFontWeights[size] as TextStyle['fontWeight'],
+      textAlign: 'center',
+    }
+
+    const icon: AvatarIconStyle = {
+      size: componentLayouts.icon[size].size,
+      strokeWidth: componentLayouts.icon[size].strokeWidth,
+      color: resolved.color,
+    }
+
+    return { avatar, image, text, icon }
+  }
+
+  const resolveWithStatus = (state: AvatarWithStatusState) => {
+    const size = state.size ?? 'md'
+    const status = state.status ?? 'unknown'
+    const layout = componentLayouts.avatar[size]
+
+    const container: ViewStyle = {
+      position: 'relative',
+      alignSelf: 'flex-start',
+    }
+
+    const statusDot: ViewStyle = {
+      position: 'absolute',
+      right: 0,
+      bottom: 0,
+      zIndex: 1,
+      width: layout.statusDotSize,
+      height: layout.statusDotSize,
+      borderRadius: layout.statusDotSize / 2,
+      borderWidth: layout.statusDotBorderWidth,
+      borderColor: semantic.background,
+      backgroundColor: statusColor(status, semantic, gray),
+    }
+
+    return { container, statusDot }
+  }
+
+  const resolveWithLabel = (_state: AvatarWithLabelState) => {
+    const bodyMedium = typography.scales.body.medium
+
+    const container: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: componentLayouts.avatarGroup.gap,
+    }
+
+    const text: TextStyle = {
+      fontSize: bodyMedium.fontSize,
+      fontWeight: bodyMedium.fontWeight as TextStyle['fontWeight'],
+      lineHeight: bodyMedium.lineHeight,
+      color: semantic.onBackground,
+      flexShrink: 1,
+    }
+
+    return { container, text }
+  }
+
+  const resolveGroup = (state: AvatarGroupState) => {
+    const size = state.size ?? 'md'
+    const layout = componentLayouts.avatar[size]
+    const groupLayout = componentLayouts.avatarGroup
+    const visibleCount = Math.min(state.count ?? groupLayout.maxShown, groupLayout.maxShown)
+    const stackWidth = layout.size * (groupLayout.overlap * Math.max(visibleCount - 1, 0) + 1)
+
+    const container: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: groupLayout.gap,
+      height: layout.size,
+      alignSelf: 'flex-start',
+    }
+
+    const stack: ViewStyle = {
+      position: 'relative',
+      width: stackWidth,
+      height: layout.size,
+    }
+
+    const more: TextStyle = {
+      fontSize: (layout.size * 2) / 3,
+      color: semantic.onBackground,
+      flexShrink: 1,
+    }
+
+    return { container, stack, more }
+  }
+
+  return {
+    avatar: createStyleResolver((state) => resolveAvatar(state).avatar),
+    image: createStyleResolver((state) => resolveAvatar(state).image),
+    text: createStyleResolver((state) => resolveAvatar(state).text),
+    icon: createStyleResolver((state) => resolveAvatar(state).icon),
+    withStatus: {
+      container: createStyleResolver((state) => resolveWithStatus(state).container),
+      statusDot: createStyleResolver((state) => resolveWithStatus(state).statusDot),
+    },
+    withLabel: {
+      container: createStyleResolver((state) => resolveWithLabel(state).container),
+      text: createStyleResolver((state) => resolveWithLabel(state).text),
+    },
+    group: {
+      container: createStyleResolver((state) => resolveGroup(state).container),
+      stack: createStyleResolver((state) => resolveGroup(state).stack),
+      more: createStyleResolver((state) => resolveGroup(state).more),
+    },
+  }
+}
+
+export const createAvatarThemeFromDesign = (theme: DesignTokensTheme): AvatarTheme => {
+  return createAvatarTheme({
+    semantic: theme.semanticColors,
+    coloring: theme.coloring as HightideComponentThemes['coloring'],
+    gray: theme.colors.gray.value as ColorPalette,
+    typography: theme.typography,
+  })
+}