@helpwave/hightide-native 0.0.6 → 0.0.8

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,
+  })
+}

package/src/theme/resolvers/button.ts

@@ -8,7 +8,7 @@ import {
   fontWeights
 } from '@helpwave/hightide-design/tokens'
 import type {
-  HightideDesignTokens as DesignTokensTheme,
+  HightideThemeTokens as DesignTokensTheme,
   ElementSize
 } from '@helpwave/hightide-design/types'
 

package/src/theme/resolvers/chat.ts

@@ -4,11 +4,11 @@ import {
   type ViewStyle
 } from 'react-native'
 
-import { hexWithAlpha } from '@helpwave/hightide-design/helpers'
+import { hexWithAlpha } from '@helpwave/hightide-design/utils'
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type {

package/src/theme/resolvers/checkbox.ts

@@ -3,7 +3,7 @@ import type { ViewStyle } from 'react-native'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme,
+  HightideThemeTokens as DesignTokensTheme,
   ElementSize
 } from '@helpwave/hightide-design/types'
 

package/src/theme/resolvers/chip.ts

@@ -7,7 +7,7 @@ import {
   componentLayouts,
   fontWeights
 } from '@helpwave/hightide-design/tokens'
-import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
 
 import { resolveColoringStyles } from './coloring'
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/coloring.ts

@@ -1,6 +1,6 @@
 import {
   hexWithAlpha
-} from '@helpwave/hightide-design/helpers'
+} from '@helpwave/hightide-design/utils'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ButtonColoringStyle,

package/src/theme/resolvers/iconButton.ts

@@ -1,7 +1,7 @@
 import type { ViewStyle } from 'react-native'
 
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
-import type { HightideDesignTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
+import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
 
 import {
   isOutlineColoringStyle,

package/src/theme/resolvers/index.ts

@@ -1,3 +1,4 @@
+export * from './avatar'
 export * from './button'
 export * from './chat'
 export * from './checkbox'
@@ -8,3 +9,4 @@ export * from './input'
 export * from './menu'
 export * from './multiSelect'
 export * from './select'
+export * from './switch'

package/src/theme/resolvers/input.ts

@@ -3,7 +3,7 @@ import type { TextStyle } from 'react-native'
 import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/menu.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native'
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/multiSelect.ts

@@ -1,7 +1,7 @@
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/select.ts

@@ -1,7 +1,7 @@
 import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
   ComponentColorTokens,
-  HightideDesignTokens as DesignTokensTheme
+  HightideThemeTokens as DesignTokensTheme
 } from '@helpwave/hightide-design/types'
 
 import type { HightideSemanticColors } from '../types/color'

package/src/theme/resolvers/switch.ts

@@ -0,0 +1,65 @@
+import type {
+  ComponentColorTokens,
+  HightideThemeTokens as DesignTokensTheme
+} from '@helpwave/hightide-design/types'
+
+import type { HightideSemanticColors } from '../types/color'
+import type {
+  SwitchState,
+  SwitchTheme
+} from '../types/components/switch'
+import { createValueResolver } from '../types/resolver'
+
+export type CreateSwitchThemeOptions = {
+  semantic: HightideSemanticColors,
+  component: ComponentColorTokens,
+}
+
+export const createSwitchTheme = ({
+  semantic,
+  component,
+}: CreateSwitchThemeOptions): SwitchTheme => {
+  const resolveState = (state: SwitchState) => {
+    const trackInactive = state.isDisabled
+      ? semantic.disabled
+      : component.switch.track.inactive
+    const trackActive = state.isDisabled
+      ? semantic.disabled
+      : component.switch.track.active
+
+    const trackColor = state.isActive ? trackActive : trackInactive
+
+    const borderColor = state.isDisabled
+      ? semantic.disabled
+      : state.isInvalid
+        ? semantic.negative
+        : state.isActive
+          ? trackActive
+          : component.switch.borderColor
+
+    const thumbColor = state.isDisabled
+      ? semantic.onDisabled
+      : state.isActive
+        ? component.switch.thumb.active
+        : component.switch.thumb.inactive
+
+    return {
+      trackColor,
+      borderColor,
+      thumbColor,
+    }
+  }
+
+  return {
+    trackColor: createValueResolver((state) => resolveState(state).trackColor),
+    borderColor: createValueResolver((state) => resolveState(state).borderColor),
+    thumbColor: createValueResolver((state) => resolveState(state).thumbColor),
+  }
+}
+
+export const createSwitchThemeFromDesign = (theme: DesignTokensTheme): SwitchTheme => {
+  return createSwitchTheme({
+    semantic: theme.semanticColors,
+    component: theme.componentColors,
+  })
+}

package/src/theme/themes/{createTheme.ts → createHightideTheme.ts}

@@ -1,12 +1,14 @@
 import type {
   ColorPaletteToken,
-  HightideDesignTokens
+  HightideThemeTokens
 } from '@helpwave/hightide-design/types'
 
+import { createAvatarThemeFromDesign } from '../resolvers/avatar'
 import { createButtonThemeFromDesign } from '../resolvers/button'
 import { createChatThemeFromDesign } from '../resolvers/chat'
 import { createCheckboxThemeFromDesign } from '../resolvers/checkbox'
 import { createChipThemeFromDesign } from '../resolvers/chip'
+import { createSwitchThemeFromDesign } from '../resolvers/switch'
 import { createIconButtonThemeFromDesign } from '../resolvers/iconButton'
 import { createInputThemeFromDesign } from '../resolvers/input'
 import { createMenuThemeFromDesign } from '../resolvers/menu'
@@ -17,7 +19,7 @@ import type {
   ColorPalette,
   HightideColors
 } from '../types/color'
-import type { Theme } from '../types/theme'
+import type { HightideTheme } from '../types/theme'
 
 const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette => {
   if (token.type === 'singleValue') {
@@ -26,7 +28,7 @@ const unwrapColorPaletteToken = (token: ColorPaletteToken): Color | ColorPalette
   return token.value
 }
 
-const unwrapColors = (colors: HightideDesignTokens['colors']): HightideColors & Record<string, Color | ColorPalette> => {
+const unwrapColors = (colors: HightideThemeTokens['colors']): HightideColors & Record<string, Color | ColorPalette> => {
   const result: Record<string, Color | ColorPalette> = {}
   for (const [key, token] of Object.entries(colors)) {
     result[key] = unwrapColorPaletteToken(token)
@@ -34,7 +36,7 @@ const unwrapColors = (colors: HightideDesignTokens['colors']): HightideColors &
   return result as HightideColors & Record<string, Color | ColorPalette>
 }
 
-export const createTheme = (tokens: HightideDesignTokens): Theme => ({
+export const createHightideTheme = (tokens: HightideThemeTokens): HightideTheme => ({
   colors: unwrapColors(tokens.colors),
   semantic: tokens.semanticColors,
   typography: tokens.typography,
@@ -46,10 +48,12 @@ export const createTheme = (tokens: HightideDesignTokens): Theme => ({
     iconButton: createIconButtonThemeFromDesign(tokens),
     chip: createChipThemeFromDesign(tokens),
     checkbox: createCheckboxThemeFromDesign(tokens),
+    switch: createSwitchThemeFromDesign(tokens),
     input: createInputThemeFromDesign(tokens),
     select: createSelectThemeFromDesign(tokens),
     multiSelect: createMultiSelectThemeFromDesign(tokens),
     chat: createChatThemeFromDesign(tokens),
     menu: createMenuThemeFromDesign(tokens),
+    avatar: createAvatarThemeFromDesign(tokens),
   },
 })

package/src/theme/themes/hightideThemes.ts

@@ -0,0 +1,14 @@
+import { ThemeTokens as designThemes } from '@helpwave/hightide-design/tokens'
+import { createHightideTheme } from './createHightideTheme'
+
+export const lightTheme = createHightideTheme(designThemes.light)
+export const darkTheme = createHightideTheme(designThemes.dark)
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const
+
+export type HightideThemeModes = 'dark' | 'light'
+
+export type ThemeMode = string | HightideThemeModes

package/src/theme/themes/index.ts

@@ -1,2 +1,2 @@
-export * from './createTheme'
-export * from './nativeThemes'
+export * from './createHightideTheme'
+export * from './hightideThemes'

package/src/theme/types/components/avatar.ts

@@ -0,0 +1,77 @@
+import type {
+  ImageStyle,
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type { ElementSize } from '@helpwave/hightide-design/types'
+
+import type { StyleResolverFunction } from '../resolver'
+
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'
+
+export type AvatarState = {
+  size?: ElementSize,
+  isGrouped?: boolean,
+  groupIndex?: number,
+}
+
+export type AvatarWithStatusState = {
+  size?: ElementSize,
+  status?: AvatarStatus,
+}
+
+export type AvatarWithLabelState = {
+  size?: ElementSize,
+}
+
+export type AvatarGroupState = {
+  size?: ElementSize,
+  count?: number,
+}
+
+export type AvatarStyle = ViewStyle
+
+export type AvatarImageStyle = ImageStyle
+
+export type AvatarTextStyle = TextStyle
+
+export type AvatarIconStyle = {
+  size: number,
+  strokeWidth: number,
+  color: string,
+}
+
+export type AvatarStatusDotStyle = ViewStyle
+
+export type AvatarWithStatusContainerStyle = ViewStyle
+
+export type AvatarWithLabelContainerStyle = ViewStyle
+
+export type AvatarWithLabelTextStyle = TextStyle
+
+export type AvatarGroupContainerStyle = ViewStyle
+
+export type AvatarGroupStackStyle = ViewStyle
+
+export type AvatarGroupMoreStyle = TextStyle
+
+export type AvatarTheme = {
+  avatar: StyleResolverFunction<AvatarState, AvatarStyle>,
+  image: StyleResolverFunction<AvatarState, AvatarImageStyle>,
+  text: StyleResolverFunction<AvatarState, AvatarTextStyle>,
+  icon: StyleResolverFunction<AvatarState, AvatarIconStyle>,
+  withStatus: {
+    container: StyleResolverFunction<AvatarWithStatusState, AvatarWithStatusContainerStyle>,
+    statusDot: StyleResolverFunction<AvatarWithStatusState, AvatarStatusDotStyle>,
+  },
+  withLabel: {
+    container: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelContainerStyle>,
+    text: StyleResolverFunction<AvatarWithLabelState, AvatarWithLabelTextStyle>,
+  },
+  group: {
+    container: StyleResolverFunction<AvatarGroupState, AvatarGroupContainerStyle>,
+    stack: StyleResolverFunction<AvatarGroupState, AvatarGroupStackStyle>,
+    more: StyleResolverFunction<AvatarGroupState, AvatarGroupMoreStyle>,
+  },
+}

package/src/theme/types/components/button.ts

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

package/src/theme/types/components/chat.ts

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 
 import type { Color } from '../color'
 import type {

package/src/theme/types/components/chip.ts

@@ -3,7 +3,7 @@ import type {
   ViewStyle
 } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ChipColoringStyle,
   ElementSize

package/src/theme/types/components/hightide.ts

@@ -1,4 +1,5 @@
 import type { Color } from '../color'
+import type { AvatarTheme } from './avatar'
 import type { ButtonTheme } from './button'
 import type { ChatTheme } from './chat'
 import type { CheckboxTheme } from './checkbox'
@@ -8,6 +9,7 @@ import type { InputTheme } from './input'
 import type { MenuTheme } from './menu'
 import type { MultiSelectTheme } from './multiSelect'
 import type { SelectTheme } from './select'
+import type { SwitchTheme } from './switch'
 
 export type ColoringDefinition = {
   color: Color,
@@ -34,9 +36,11 @@ export type HightideComponentThemes = {
   iconButton: IconButtonTheme,
   chip: ChipTheme,
   checkbox: CheckboxTheme,
+  switch: SwitchTheme,
   input: InputTheme,
   select: SelectTheme,
   multiSelect: MultiSelectTheme,
   chat: ChatTheme,
   menu: MenuTheme,
+  avatar: AvatarTheme,
 }

package/src/theme/types/components/iconButton.ts

@@ -1,6 +1,6 @@
 import type { ViewStyle } from 'react-native'
 
-import type { ColoringType } from '@helpwave/hightide-design/helpers'
+import type { ColoringType } from '@helpwave/hightide-design/utils'
 import type {
   ButtonColoringStyle,
   ElementSize

package/src/theme/types/components/index.ts

@@ -1,3 +1,4 @@
+export * from './avatar'
 export * from './button'
 export * from './chat'
 export * from './checkbox'
@@ -8,3 +9,4 @@ export * from './input'
 export * from './menu'
 export * from './multiSelect'
 export * from './select'
+export * from './switch'

package/src/theme/types/components/switch.ts

@@ -0,0 +1,15 @@
+import type { Color } from '../color'
+import type {
+  InteractionState,
+  StyleResolverFunction
+} from '../resolver'
+
+export type SwitchState = InteractionState & {
+  isActive?: boolean,
+}
+
+export type SwitchTheme = {
+  trackColor: StyleResolverFunction<SwitchState, Color>,
+  borderColor: StyleResolverFunction<SwitchState, Color>,
+  thumbColor: StyleResolverFunction<SwitchState, Color>,
+}

package/src/theme/types/layout.ts

@@ -43,4 +43,16 @@ export type HightideLayout = {
     borderRadius: number,
     fontSize: number,
   }>,
+  avatar: Record<ElementSize, {
+    size: number,
+    padding: number,
+    fontSize: number,
+    statusDotSize: number,
+    statusDotBorderWidth: number,
+  }>,
+  avatarGroup: {
+    overlap: number,
+    maxShown: number,
+    gap: number,
+  },
 }