@helpwave/hightide-native 0.0.8 → 0.1.1

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

@@ -2,39 +2,43 @@ import {
   useEffect,
   useMemo,
   useState,
-  type ComponentType,
-  type ReactNode
+  type ComponentType
 } 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 { HightideIconRegistry } from '../../icons/HightideIconRegistry'
+import { ThemedIcon } from './ThemedIcon'
+import { ThemedText } from './ThemedText'
+import {
+  avatarSizes,
+  type AvatarSize as AvatarSizeToken
+} from '@helpwave/hightide-design/component-token-resolvers'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
-  AvatarGroupMoreStyle,
+  AvatarGroupContainerStyle,
   AvatarGroupStackStyle,
+  AvatarGroupTextStyle,
   AvatarImageStyle,
   AvatarIconStyle,
+  AvatarState,
   AvatarStatus,
   AvatarStyle,
   AvatarTextStyle,
-  AvatarWithLabelContainerStyle,
-  AvatarWithLabelTextStyle,
-  AvatarWithStatusContainerStyle,
-  AvatarStatusDotStyle
+  AvatarStatusDotStyle,
+  AvatarWithStatusState
 } from '../../theme/types/components/avatar'
+import { avatarStatuses } from '../../theme/types/components/avatar'
 import type { StyleOverwrite } from '../../theme/types/resolver'
 
-export type AvatarSize = ElementSize
+export type AvatarSize = AvatarSizeToken | number
 
 type ImageConfig = {
   avatarUrl: string,
@@ -54,20 +58,21 @@ const DefaultAvatarImage: ComponentType<AvatarImageProps> = ({ alt, ...props })
 )
 
 export const AvatarUtil = {
-  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
-  statuses: ['online', 'offline', 'away', 'busy', 'unknown'] as const satisfies readonly AvatarStatus[],
+  sizes: avatarSizes,
+  statuses: avatarStatuses,
 }
 
 export type AvatarProps = Omit<ViewProps, 'children' | 'style'> & {
   image?: ImageConfig,
   name?: string,
   size?: AvatarSize,
+  color?: ColorPairToken,
   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>,
+  avatarStyle?: StyleOverwrite<AvatarState, AvatarStyle>,
+  imageStyle?: StyleOverwrite<AvatarState, AvatarImageStyle>,
+  textStyle?: StyleOverwrite<AvatarState, AvatarTextStyle>,
+  iconStyle?: StyleOverwrite<AvatarState, AvatarIconStyle>,
   isGrouped?: boolean,
   groupIndex?: number,
 }
@@ -76,6 +81,7 @@ export const Avatar = ({
   image: initialImage,
   name,
   size = 'md',
+  color,
   ImageComponent = DefaultAvatarImage,
   style,
   avatarStyle,
@@ -92,11 +98,12 @@ export const Avatar = ({
   const [image, setImage] = useState(initialImage)
   const ImageElement = ImageComponent
 
-  const state = useMemo(() => ({
+  const state = useMemo((): AvatarState => ({
     size,
     isGrouped,
     groupIndex,
-  }), [size, isGrouped, groupIndex])
+    color,
+  }), [size, isGrouped, groupIndex, color])
 
   const displayName = useMemo(() => {
     const maxLetters = size === 'sm' ? 1 : 2
@@ -119,7 +126,7 @@ export const Avatar = ({
     setImage(initialImage)
   }, [image?.avatarUrl, initialImage])
 
-  const resolvedAvatar = theme.components.avatar.avatar(state, avatarStyle)
+  const resolvedAvatar = theme.components.avatar.container(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)
@@ -141,11 +148,11 @@ export const Avatar = ({
       )}
       {isShowingFallback && (
         name ? (
-          <Text style={resolvedText}>{displayName}</Text>
+          <ThemedText style={resolvedText}>{displayName}</ThemedText>
         ) : (
-          <User
+          <ThemedIcon
+            icon={HightideIconRegistry.User}
             size={resolvedIcon.size}
-            strokeWidth={resolvedIcon.strokeWidth}
             color={resolvedIcon.color}
           />
         )
@@ -158,57 +165,91 @@ export type AvatarGroupProps = Omit<ViewProps, 'children' | 'style'> & {
   avatars: Omit<AvatarProps, 'size' | 'isGrouped' | 'groupIndex'>[],
   showTotalNumber?: boolean,
   size?: AvatarSize,
+  color?: ColorPairToken,
   ImageComponent?: ComponentType<AvatarImageProps>,
   style?: StyleProp<ViewStyle>,
-  stackStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupStackStyle>,
-  moreStyle?: StyleOverwrite<{ size?: ElementSize, count?: number }, AvatarGroupMoreStyle>,
+  containerStyle?: StyleOverwrite<{ size?: AvatarSize, count?: number }, AvatarGroupContainerStyle>,
+  avatarStackStyle?: StyleOverwrite<{ size?: AvatarSize, count?: number }, AvatarGroupStackStyle>,
+  textStyle?: StyleOverwrite<{ size?: AvatarSize, count?: number }, AvatarGroupTextStyle>,
 }
 
 export const AvatarGroup = ({
   avatars,
   showTotalNumber = true,
   size = 'md',
+  color,
   ImageComponent,
   style,
-  stackStyle,
-  moreStyle,
+  containerStyle,
+  avatarStackStyle,
+  textStyle,
   ...props
 }: AvatarGroupProps) => {
   const { theme } = useTheme()
-  const maxShownProfiles = theme.layout.avatarGroup.maxShown
+  const maxShownProfiles = 5
   const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
   const notDisplayedProfiles = avatars.length - maxShownProfiles
 
   const state = useMemo(() => ({
     size,
+    color,
     count: displayedProfiles.length,
-  }), [size, displayedProfiles.length])
+  }), [size, color, 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)
+  const avatarResolvers = useMemo(
+    () => theme.components.avatarGroup.avatar(state),
+    [theme, state]
+  )
+  const resolvedContainer = theme.components.avatarGroup.container(state, containerStyle)
+  const resolvedAvatarStack = theme.components.avatarGroup.avatarStack(state, avatarStackStyle)
+  const resolvedText = theme.components.avatarGroup.text(state, textStyle)
 
   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 style={resolvedAvatarStack}>
+        {displayedProfiles.map((avatar, index) => {
+          const avatarState: AvatarState = {
+            size,
+            isGrouped: true,
+            groupIndex: index,
+            color: avatar.color ?? color,
+          }
+
+          return (
+            <Avatar
+              {...avatar}
+              key={index}
+              size={size}
+              isGrouped
+              groupIndex={index}
+              ImageComponent={avatar.ImageComponent ?? ImageComponent}
+              avatarStyle={(_, state) => avatarResolvers.container({
+                ...state,
+                ...avatarState,
+              })}
+              imageStyle={(_, state) => avatarResolvers.image({
+                ...state,
+                ...avatarState,
+              })}
+              textStyle={(_, state) => avatarResolvers.text({
+                ...state,
+                ...avatarState,
+              })}
+              iconStyle={(_, state) => avatarResolvers.icon({
+                ...state,
+                ...avatarState,
+              })}
+            />
+          )
+        })}
       </View>
       {showTotalNumber && notDisplayedProfiles > 0 && (
-        <Text style={resolvedMore}>
-          {`+ ${notDisplayedProfiles}`}
-        </Text>
+        <ThemedText style={resolvedText}>
+          {`+${notDisplayedProfiles}`}
+        </ThemedText>
       )}
     </View>
   )
@@ -218,69 +259,47 @@ export type { AvatarStatus }
 
 export type AvatarWithStatusProps = AvatarProps & {
   status?: AvatarStatus,
-  containerStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarWithStatusContainerStyle>,
-  statusDotStyle?: StyleOverwrite<{ size?: ElementSize, status?: AvatarStatus }, AvatarStatusDotStyle>,
+  statusDotStyle?: StyleOverwrite<AvatarWithStatusState, AvatarStatusDotStyle>,
 }
 
 export const AvatarWithStatus = ({
   status = 'unknown',
   size = 'md',
+  color,
   style,
-  containerStyle,
+  avatarStyle,
+  imageStyle,
+  textStyle,
+  iconStyle,
   statusDotStyle,
   ...avatarProps
 }: AvatarWithStatusProps) => {
   const { theme } = useTheme()
 
-  const state = useMemo(() => ({
+  const state = useMemo((): AvatarWithStatusState => ({
     size,
+    color,
     status,
-  }), [size, status])
-
-  const resolvedContainer = theme.components.avatar.withStatus.container(state, containerStyle)
-  const resolvedStatusDot = theme.components.avatar.withStatus.statusDot(state, statusDotStyle)
+  }), [size, color, status])
 
-  return (
-    <View style={[resolvedContainer, style]}>
-      <Avatar {...avatarProps} size={size} />
-      <View style={resolvedStatusDot} />
-    </View>
+  const avatarResolvers = useMemo(
+    () => theme.components.avatarWithStatus.avatar(state),
+    [theme, state]
   )
-}
-
-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
+  const resolvedStatusDot = theme.components.avatarWithStatus.statusDot(state, statusDotStyle)
 
   return (
-    <View style={[resolvedContainer, style]}>
-      {labelPosition === 'left' ? labelElement : avatar}
-      {labelPosition === 'left' ? avatar : labelElement}
+    <View style={[{ position: 'relative' }, style]}>
+      <Avatar
+        {...avatarProps}
+        size={size}
+        color={color}
+        avatarStyle={(_, state) => avatarResolvers.container(state, avatarStyle)}
+        imageStyle={(_, state) => avatarResolvers.image(state, imageStyle)}
+        textStyle={(_, state) => avatarResolvers.text(state, textStyle)}
+        iconStyle={(_, state) => avatarResolvers.icon(state, iconStyle)}
+      />
+      <View style={resolvedStatusDot} />
     </View>
   )
 }

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

@@ -3,22 +3,16 @@ import {
   type ReactNode
 } from 'react'
 import {
-  Text,
   View,
   type StyleProp,
   type ViewProps,
   type ViewStyle
 } from 'react-native'
 
-import {
-  coloringTypes,
-  type ColoringType
-} from '@helpwave/hightide-design/utils'
-import type {
-  ChipColoringStyle,
-  ElementSize
-} from '@helpwave/hightide-design/types'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import type { ChipVariant, ComponentSize } from '@helpwave/hightide-design/semantic-token-resolvers'
 
+import { ContentThemeProvider } from '../../global-contexts/content-theme/ContentThemeProvider'
 import { useTheme } from '../../global-contexts/theme/ThemeContext'
 import type {
   ChipState,
@@ -26,20 +20,21 @@ import type {
   ChipTextStyle
 } from '../../theme/types/components/chip'
 import type { StyleOverwrite } from '../../theme/types/resolver'
+import type { Color } from '../../theme/types/color'
+import { ThemedText } from './ThemedText'
 
-export type ChipSize = ElementSize
+export type ChipSize = ComponentSize
 
-export type ChipColor = ColoringType
+export type ChipColor = ColorPairToken
 
 export const ChipUtil = {
-  colors: coloringTypes,
-  sizes: ['xs', 'sm', 'md', 'lg'] as const satisfies readonly ElementSize[],
-  coloringStyles: ['solid', 'tonal', 'outline', 'tonal-outline'] as const satisfies readonly ChipColoringStyle[],
+  sizes: ['sm', 'md', 'lg'] as const satisfies readonly ComponentSize[],
+  variants: ['filled', 'tonal'] as const satisfies readonly ChipVariant[],
 }
 
 export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
   color?: ChipColor,
-  coloringStyle?: ChipColoringStyle,
+  variant?: ChipVariant,
   size?: ChipSize,
   children?: ReactNode,
   style?: StyleProp<ViewStyle>,
@@ -49,8 +44,8 @@ export type ChipProps = Omit<ViewProps, 'children' | 'style'> & {
 
 export const Chip = ({
   children,
-  color = 'neutral',
-  coloringStyle = 'solid',
+  color,
+  variant = 'filled',
   size = 'md',
   style,
   chipStyle,
@@ -62,8 +57,8 @@ export const Chip = ({
   const state = useMemo((): ChipState => ({
     size,
     color,
-    coloringStyle,
-  }), [size, color, coloringStyle])
+    variant,
+  }), [size, color, variant])
 
   const resolvedChipStyle = useMemo(
     () => theme.components.chip.chip(state, chipStyle),
@@ -79,9 +74,14 @@ export const Chip = ({
       {...props}
       style={[resolvedChipStyle, style]}
     >
-      {typeof children === 'string' || typeof children === 'number'
-        ? <Text style={resolvedTextStyle}>{children}</Text>
-        : children}
+      <ContentThemeProvider
+        foregroundColor={resolvedTextStyle.color as Color}
+        textStyle={resolvedTextStyle}
+      >
+        {typeof children === 'string' || typeof children === 'number'
+          ? <ThemedText>{children}</ThemedText>
+          : children}
+      </ContentThemeProvider>
     </View>
   )
 }

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

@@ -0,0 +1,72 @@
+import {
+  View,
+  type ViewProps
+} from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import type { Appearance } from '@helpwave/hightide-design/semantic-token-resolvers'
+import type { IconSize } from '@helpwave/hightide-design/theme-tokens'
+
+import type { IconComponent } from '../../icons/types'
+import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+
+export type ThemedIconAppearance = Appearance
+
+export type ThemedIconProps = Omit<ViewProps, 'children'> & {
+  icon: IconComponent,
+  size?: IconSize | number,
+  color?: string,
+  strokeWidth?: number,
+  appearance?: ThemedIconAppearance,
+}
+
+export const ThemedIcon = ({
+  icon: Glyph,
+  size = 'md',
+  color,
+  strokeWidth,
+  appearance = 'normal',
+  style,
+  ...props
+}: ThemedIconProps) => {
+  const { theme } = useTheme()
+  const { foregroundColor } = useContentTheme()
+  const iconToken = typeof size === 'number'
+    ? {
+      size,
+      strokeWidth: strokeWidth ?? theme.components.icon.md.strokeWidth,
+    }
+    : theme.components.icon[size]
+
+  const baseColor = (color ?? foregroundColor) as HexColorToken
+  const resolvedColor = appearance === 'normal'
+    ? baseColor
+    : theme.semantics.withAppearance({ color: baseColor, appearance })
+
+  return (
+    <View
+      {...props}
+      style={[
+        {
+          width: iconToken.size,
+          height: iconToken.size,
+          minWidth: iconToken.size,
+          maxWidth: iconToken.size,
+          minHeight: iconToken.size,
+          maxHeight: iconToken.size,
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      <Glyph
+        size={iconToken.size}
+        strokeWidth={strokeWidth ?? iconToken.strokeWidth}
+        color={resolvedColor}
+      />
+    </View>
+  )
+}

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

@@ -0,0 +1,38 @@
+import {
+  forwardRef
+} from 'react'
+import {
+  Text as RNText,
+  type TextProps
+} from 'react-native'
+
+import type { HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+
+import { useContentTheme } from '../../global-contexts/content-theme/ContentThemeContext'
+import { useTheme } from '../../global-contexts/theme/ThemeContext'
+
+export type ThemedTextAppearance = 'normal' | 'description'
+
+export type ThemedTextProps = TextProps & {
+  appearance?: ThemedTextAppearance,
+}
+
+export const ThemedText = forwardRef<React.ComponentRef<typeof RNText>, ThemedTextProps>(function ThemedText({
+  appearance = 'normal',
+  style,
+  ...props
+}, ref) {
+  const { theme } = useTheme()
+  const { foregroundColor, textStyle } = useContentTheme()
+  const color = appearance === 'description'
+    ? theme.semantics.asDescription({ color: foregroundColor as HexColorToken })
+    : foregroundColor
+
+  return (
+    <RNText
+      {...props}
+      ref={ref}
+      style={[textStyle, { color }, style]}
+    />
+  )
+})

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

@@ -1,3 +1,4 @@
 export * from './Avatar'
 export * from './Chip'
-export * from './Icon'
+export * from './ThemedIcon'
+export * from './ThemedText'

package/src/global-contexts/HightideProvider.tsx

@@ -8,6 +8,10 @@ import { hightideTranslation } from '@helpwave/hightide-utils/i18n'
 import { ArrayUtil } from '@helpwave/hightide-utils/utils'
 
 import { HightideContext } from './HightideContext'
+import {
+  DebugProvider,
+  type DebugProviderProps
+} from './debug'
 import {
   LocalizationProvider,
   type LocalizationProviderProps
@@ -21,11 +25,13 @@ import {
   TranslationProvider,
   type TranslationProviderProps
 } from './translation/forward-exports'
+import type { HightideTheme } from '../theme'
 
 export type HightideProviderProps = PropsWithChildren & {
-  theme?: Omit<ThemeProviderProps, 'children'>,
+  theme?: Omit<ThemeProviderProps<HightideTheme>, 'children'>,
   locale?: Omit<LocalizationProviderProps, 'children'>,
   translation?: Omit<TranslationProviderProps, 'children' | 'locale'>,
+  debug?: Omit<DebugProviderProps, 'children'>,
 }
 
 const HightideContextBridge = ({ children }: PropsWithChildren) => {
@@ -49,6 +55,7 @@ export const HightideProvider = ({
   theme,
   locale,
   translation,
+  debug,
 }: HightideProviderProps) => {
   const resolvedTranslations = useMemo(() => [
     ...ArrayUtil.resolveSingleOrArray(translation?.translation ?? []),
@@ -56,14 +63,16 @@ export const HightideProvider = ({
   ], [translation?.translation])
 
   return (
-    <LocalizationProvider {...locale}>
-      <TranslationProvider {...translation} translation={resolvedTranslations}>
-        <ThemeProvider {...theme}>
-          <HightideContextBridge>
-            {children}
-          </HightideContextBridge>
-        </ThemeProvider>
-      </TranslationProvider>
-    </LocalizationProvider>
+    <DebugProvider {...debug}>
+      <LocalizationProvider {...locale}>
+        <TranslationProvider {...translation} translation={resolvedTranslations}>
+          <ThemeProvider {...theme}>
+            <HightideContextBridge>
+              {children}
+            </HightideContextBridge>
+          </ThemeProvider>
+        </TranslationProvider>
+      </LocalizationProvider>
+    </DebugProvider>
   )
 }

package/src/global-contexts/content-theme/ContentThemeContext.ts

@@ -0,0 +1,22 @@
+import {
+  createContext,
+  useContext
+} from 'react'
+import type { ColorValue, TextStyle } from 'react-native'
+
+export type ContentThemeContextValue = {
+  foregroundColor: ColorValue,
+  textStyle: TextStyle,
+}
+
+export const ContentThemeContext = createContext<ContentThemeContextValue | null>(null)
+
+export const useContentTheme = (): ContentThemeContextValue => {
+  const context = useContext(ContentThemeContext)
+  if (!context) {
+    throw new Error(
+      'useContentTheme must be used within ContentThemeProvider. Try adding a ContentThemeProvider around your app.'
+    )
+  }
+  return context
+}

package/src/global-contexts/content-theme/ContentThemeProvider.tsx

@@ -0,0 +1,32 @@
+import {
+  useMemo,
+  type PropsWithChildren
+} from 'react'
+import type { TextStyle, ColorValue } from 'react-native'
+
+import {
+  ContentThemeContext,
+  type ContentThemeContextValue
+} from './ContentThemeContext'
+
+export type ContentThemeProviderProps = PropsWithChildren & {
+  foregroundColor: ColorValue,
+  textStyle: TextStyle,
+}
+
+export const ContentThemeProvider = ({
+  children,
+  foregroundColor,
+  textStyle,
+}: ContentThemeProviderProps) => {
+  const value = useMemo((): ContentThemeContextValue => ({
+    foregroundColor,
+    textStyle,
+  }), [foregroundColor, textStyle])
+
+  return (
+    <ContentThemeContext.Provider value={value}>
+      {children}
+    </ContentThemeContext.Provider>
+  )
+}

package/src/global-contexts/content-theme/index.ts

@@ -0,0 +1,2 @@
+export * from './ContentThemeContext'
+export * from './ContentThemeProvider'

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

@@ -0,0 +1,10 @@
+export {
+  DebugContext,
+  DebugProvider,
+  useDebugContext,
+  DEFAULT_HIT_BOX_COLOR,
+  defaultDebugContextValue,
+  type DebugContextValue,
+  type DebugHitBox,
+  type DebugProviderProps,
+} from '@helpwave/hightide-utils/context/debug'

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

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