@helpwave/hightide-native 0.0.7 → 0.1.0

package/src/theme/resolvers/iconButton.ts

@@ -1,72 +1,56 @@
-import type { ViewStyle } from 'react-native'
-
-import { componentLayouts } from '@helpwave/hightide-design/tokens'
-import type { HightideThemeTokens as DesignTokensTheme } from '@helpwave/hightide-design/types'
-
-import {
-  isOutlineColoringStyle,
-  resolveColoringStyles
-} from './coloring'
-import type { HightideSemanticColors } from '../types/color'
-import type { HightideComponentThemes } from '../types/components/hightide'
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  IconButtonIconStyle,
   IconButtonState,
-  IconButtonTheme
+  IconButtonStyle,
+  IconButtonTextStyle,
+  IconButtonThemeResolvers
 } from '../types/components/iconButton'
 import {
   createStyleResolver,
-  createValueResolver
+  createValueResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
 } from '../types/resolver'
 
-export type CreateIconButtonThemeOptions = {
-  semantic: HightideSemanticColors,
-  coloring: HightideComponentThemes['coloring'],
-}
-
-export const createIconButtonTheme = ({
-  semantic,
-  coloring,
-}: CreateIconButtonThemeOptions): IconButtonTheme => {
-  const resolveState = (state: IconButtonState) => {
-    const size = state.size ?? 'md'
-    const color = state.color ?? 'neutral'
-    const coloringStyle = state.coloringStyle ?? 'solid'
-    const tokens = coloring[color]
-    const resolved = resolveColoringStyles(tokens, coloringStyle, semantic, state)
-    const sizing = componentLayouts.element[size]
-    const outlineWidth = componentLayouts.shared.coloringOutlineWidth
-    const dimension = sizing.height
-    const borderWidth = resolved.borderWidth > 0
-      ? resolved.borderWidth
-      : (isOutlineColoringStyle(coloringStyle) ? outlineWidth : 0)
-
-    const button: ViewStyle = {
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: resolved.backgroundColor,
-      borderColor: resolved.borderColor,
-      borderWidth,
-      width: dimension,
-      height: dimension,
-      borderRadius: componentLayouts.button[size].borderRadius,
-      opacity: state.isDisabled ? 0.6 : 1,
-    }
-
-    return {
-      button,
-      icon: { color: resolved.color },
-    }
-  }
+export const toIconButtonThemeResolvers: ComponentThemeResolver<IconButtonThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: IconButtonState) => componentTokens.iconButton({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      size: state.size,
+      color: state.color,
+      variant: state.variant,
+    },
+    state: toPressableInteractionState(state),
+  })
 
   return {
-    button: createStyleResolver((state) => resolveState(state).button),
-    icon: createValueResolver((state) => resolveState(state).icon),
+    container: createStyleResolver((state: IconButtonState): IconButtonStyle => ({
+      ...toContainerStyle(resolve(state).container),
+    })),
+    stateLayer: createStyleResolver((state: IconButtonState): IconButtonStyle => {
+      const tokens = resolve(state)
+      return {
+        ...toContainerStyle(tokens.stateLayer),
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }
+    }),
+    icon: createValueResolver((state: IconButtonState): IconButtonIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+    text: createStyleResolver((state: IconButtonState): IconButtonTextStyle => (
+      toTextStyle(resolve(state).text)
+    )),
   }
 }
-
-export const createIconButtonThemeFromDesign = (theme: DesignTokensTheme): IconButtonTheme => {
-  return createIconButtonTheme({
-    semantic: theme.semanticColors,
-    coloring: theme.coloring as HightideComponentThemes['coloring'],
-  })
-}

package/src/theme/resolvers/index.ts

@@ -1,11 +1,17 @@
 export * from './avatar'
 export * from './button'
+export * from './card'
 export * from './chat'
 export * from './checkbox'
 export * from './chip'
-export * from './coloring'
+export * from './colorScheme'
+export * from './divider'
+export * from './icon'
 export * from './iconButton'
 export * from './input'
-export * from './menu'
+export * from './listItem'
 export * from './multiSelect'
+export * from './searchBar'
 export * from './select'
+export * from './switch'
+export * from './themedPressable'

package/src/theme/resolvers/input.ts

@@ -1,57 +1,79 @@
-import type { TextStyle } from 'react-native'
-
-import { componentLayouts } from '@helpwave/hightide-design/tokens'
 import type {
-  ComponentColorTokens,
-  HightideThemeTokens as DesignTokensTheme
-} from '@helpwave/hightide-design/types'
-
-import type { HightideSemanticColors } from '../types/color'
+  InputState as DesignInputState,
+  InputStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+import { toContainerStyleWithStateLayer } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  InputContainerStyle,
+  InputIconStyle,
+  InputPlaceholderStyle,
   InputState,
-  InputTheme
+  InputTextStyle,
+  InputThemeResolvers
 } from '../types/components/input'
 import {
   createStyleResolver,
-  createValueResolver
+  createValueResolver,
+  type ComponentThemeResolver
 } from '../types/resolver'
 
-export type CreateInputThemeOptions = {
-  semantic: HightideSemanticColors,
-  component: ComponentColorTokens,
-}
-
-export const createInputTheme = ({
-  semantic,
-  component,
-}: CreateInputThemeOptions): InputTheme => {
-  const resolveInput = (state: InputState): TextStyle => {
-    const sizing = componentLayouts.input.md
-    const borderColor = state.isInvalid ? semantic.negative : component.border
+const toDesignInputState = (state: InputState = {}): DesignInputState => {
+  const active = new Set<InputStateValue>()
 
-    return {
-      minHeight: sizing.height,
-      paddingHorizontal: sizing.paddingX,
-      paddingVertical: sizing.paddingY,
-      borderRadius: sizing.borderRadius,
-      borderWidth: 1,
-      borderColor,
-      backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
-      color: state.isDisabled ? semantic.onDisabled : component.input.text,
-      fontSize: 14,
-      opacity: state.isDisabled ? 0.6 : 1,
-    }
+  if (state.isDisabled) {
+    active.add('disabled')
   }
-
-  return {
-    input: createStyleResolver(resolveInput),
-    placeholderColor: createValueResolver(() => semantic.placeholder),
+  if (state.isFocused) {
+    active.add('focused')
+  }
+  if (state.isFocusVisible) {
+    active.add('focusVisible')
+  }
+  if (state.isHovered) {
+    active.add('hovered')
   }
+  if (state.isPressed) {
+    active.add('pressed')
+  }
+  if (state.isReadonly) {
+    active.add('readonly')
+  }
+  if (state.isInvalid) {
+    active.add('invalid')
+  }
+
+  return active
 }
 
-export const createInputThemeFromDesign = (theme: DesignTokensTheme): InputTheme => {
-  return createInputTheme({
-    semantic: theme.semanticColors,
-    component: theme.componentColors,
+export const toInputThemeResolvers: ComponentThemeResolver<InputThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: InputState = {}) => componentTokens.input({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      color: state.color,
+    },
+    state: toDesignInputState(state),
   })
+
+  return {
+    container: createStyleResolver((state: InputState): InputContainerStyle => {
+      const { container, stateLayer } = resolve(state)
+      return toContainerStyleWithStateLayer(container, stateLayer)
+    }),
+    text: createStyleResolver((state: InputState): InputTextStyle => (
+      toTextStyle(resolve(state).text)
+    )),
+    placeholder: createStyleResolver((state: InputState): InputPlaceholderStyle => (
+      toTextStyle(resolve(state).placeholder)
+    )),
+    icon: createValueResolver((state: InputState): InputIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+  }
 }

package/src/theme/resolvers/listItem.ts

@@ -0,0 +1,115 @@
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
+import type {
+  ListActionItemContentStyle,
+  ListActionItemIconStyle,
+  ListActionItemLeadingItemContainerStyle,
+  ListActionItemState,
+  ListActionItemStyle,
+  ListActionItemThemeResolvers,
+  ListActionItemTitleStyle,
+  ListActionItemTrailingItemContainerStyle,
+  ListItemContentStyle,
+  ListItemDefaultThemeResolvers,
+  ListItemDescriptionStyle,
+  ListItemIconStyle,
+  ListItemLeadingItemContainerStyle,
+  ListItemState,
+  ListItemStyle,
+  ListItemThemeResolvers,
+  ListItemTitleStyle,
+  ListItemTrailingItemContainerStyle
+} from '../types/components/listItem'
+import {
+  createStyleResolver,
+  createValueResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+const toListItemDefaultThemeResolvers: ComponentThemeResolver<ListItemDefaultThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ListItemState = {}) => componentTokens.listItem.default({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      color: state.color,
+    },
+  })
+
+  return {
+    container: createStyleResolver((state: ListItemState): ListItemStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    leadingItemContainer: createStyleResolver((state: ListItemState): ListItemLeadingItemContainerStyle => (
+      toContainerStyle(resolve(state).leadingItemContainer)
+    )),
+    content: createStyleResolver((state: ListItemState): ListItemContentStyle => ({
+      ...toContainerStyle(resolve(state).content),
+      flex: 1,
+    })),
+    trailingItemContainer: createStyleResolver((state: ListItemState): ListItemTrailingItemContainerStyle => (
+      toContainerStyle(resolve(state).trailingItemContainer)
+    )),
+    descriptionText: createStyleResolver((state: ListItemState): ListItemDescriptionStyle => (
+      toTextStyle(resolve(state).descriptionText)
+    )),
+    titleText: createStyleResolver((state: ListItemState): ListItemTitleStyle => (
+      toTextStyle(resolve(state).titleText)
+    )),
+    icon: createValueResolver((state: ListItemState): ListItemIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+  }
+}
+
+const toListActionItemThemeResolvers: ComponentThemeResolver<ListActionItemThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ListActionItemState = {}) => componentTokens.listItem.action({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      color: state.color,
+    },
+    state: toPressableInteractionState(state),
+  })
+
+  return {
+    container: createStyleResolver((state: ListActionItemState): ListActionItemStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    leadingItemContainer: createStyleResolver((state: ListActionItemState): ListActionItemLeadingItemContainerStyle => (
+      toContainerStyle(resolve(state).leadingItemContainer)
+    )),
+    content: createStyleResolver((state: ListActionItemState): ListActionItemContentStyle => ({
+      ...toContainerStyle(resolve(state).content),
+      flex: 1,
+    })),
+    trailingItemContainer: createStyleResolver((state: ListActionItemState): ListActionItemTrailingItemContainerStyle => (
+      toContainerStyle(resolve(state).trailingItemContainer)
+    )),
+    titleText: createStyleResolver((state: ListActionItemState): ListActionItemTitleStyle => (
+      toTextStyle(resolve(state).titleText)
+    )),
+    icon: createValueResolver((state: ListActionItemState): ListActionItemIconStyle => (
+      toIconStyle(resolve(state).icon)
+    )),
+  }
+}
+
+export const toListItemThemeResolvers: ComponentThemeResolver<ListItemThemeResolvers> = (params) => {
+  const action = toListActionItemThemeResolvers(params)
+
+  return {
+    default: toListItemDefaultThemeResolvers(params),
+    action,
+    navigation: action,
+  }
+}

package/src/theme/resolvers/multiSelect.ts

@@ -1,100 +1,175 @@
-import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
-  ComponentColorTokens,
-  HightideThemeTokens as DesignTokensTheme
-} from '@helpwave/hightide-design/types'
-
-import type { HightideSemanticColors } from '../types/color'
+  MultiSelectState as DesignMultiSelectState,
+  MultiSelectStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+import { toContainerStyle, toContainerStyleWithStateLayer } from '../adapters/container-adapter'
+import { toIconStyle } from '../adapters/icon-style-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
+  MultiSelectCheckboxIconStyle,
+  MultiSelectCheckboxStyle,
   MultiSelectOptionState,
+  MultiSelectOptionStyle,
+  MultiSelectOptionTextStyle,
   MultiSelectState,
-  MultiSelectTheme
+  MultiSelectThemeResolvers,
+  MultiSelectTriggerStyle
 } from '../types/components/multiSelect'
+import type {
+  SelectEmptyTextStyle,
+  SelectHeaderStyle,
+  SelectMenuState,
+  SelectMenuStyle,
+  SelectOverlayStyle,
+  SelectTriggerTextStyle
+} from '../types/components/select'
 import {
+  createSimpleStyleResolver,
   createStyleResolver,
-  createValueResolver
+  createValueResolver,
+  type ComponentThemeResolver
 } from '../types/resolver'
 
-export type CreateMultiSelectThemeOptions = {
-  semantic: HightideSemanticColors,
-  component: ComponentColorTokens,
+type MultiSelectResolveState = {
+  color?: MultiSelectState['color'],
+  isDisabled?: boolean,
+  isInvalid?: boolean,
+  isHovered?: boolean,
+  isFocused?: boolean,
+  isFocusVisible?: boolean,
+  isPressed?: boolean,
+  isReadonly?: boolean,
+  isOpen?: boolean,
+  hasSelections?: boolean,
+  isSelected?: boolean,
+  isHighlighted?: boolean,
+  hasSearch?: boolean,
 }
 
-export const createMultiSelectTheme = ({
-  semantic,
-  component,
-}: CreateMultiSelectThemeOptions): MultiSelectTheme => {
-  return {
-    trigger: createStyleResolver((state: MultiSelectState) => ({
-      minHeight: 44,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      borderRadius: 6,
-      borderWidth: 1,
-      borderColor: state.isInvalid ? semantic.negative : component.border,
-      backgroundColor: state.isDisabled ? semantic.disabled : component.input.background,
-      justifyContent: 'center',
-      gap: 8,
-      opacity: state.isDisabled ? 0.6 : 1,
-    })),
-    triggerText: createStyleResolver(() => ({
-      color: semantic.placeholder,
-    })),
-    overlay: createStyleResolver(() => ({
-      flex: 1,
-      backgroundColor: '#00000059',
-      justifyContent: 'center',
-      padding: 24,
-    })),
-    menu: createStyleResolver(() => ({
-      maxHeight: 360,
-      borderRadius: 12,
-      backgroundColor: component.menu.background,
-      borderWidth: 1,
-      borderColor: component.menu.border,
-      overflow: 'hidden',
-    })),
-    search: createStyleResolver(() => ({
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: component.menu.border,
-      color: component.menu.text,
-    })),
-    searchPlaceholderColor: createValueResolver(() => semantic.placeholder),
-    option: createStyleResolver((state: MultiSelectOptionState) => ({
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-      backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
-      opacity: state.isDisabled ? 0.5 : 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 10,
-    })),
-    optionText: createStyleResolver((state: MultiSelectOptionState) => ({
-      color: state.isSelected ? semantic.primary : component.menu.text,
-      fontWeight: state.isSelected ? fontWeights.semibold : fontWeights.base,
-    })),
-    checkbox: createStyleResolver((state: MultiSelectOptionState) => ({
-      width: 18,
-      height: 18,
-      borderRadius: 4,
-      borderWidth: 1,
-      borderColor: state.isSelected ? semantic.primary : component.border,
-      backgroundColor: state.isSelected ? semantic.primary : 'transparent',
-      alignItems: 'center',
-      justifyContent: 'center',
-    })),
-    checkboxIcon: createValueResolver((state: MultiSelectOptionState) => ({
-      color: semantic.onPrimary,
-      visible: !!state.isSelected,
-    })),
+const toDesignMultiSelectState = (
+  state: MultiSelectResolveState = {}
+): DesignMultiSelectState => {
+  const active = new Set<MultiSelectStateValue>()
+
+  if (state.isDisabled) {
+    active.add('disabled')
+  }
+  if (state.isFocused) {
+    active.add('focused')
+  }
+  if (state.isFocusVisible) {
+    active.add('focusVisible')
   }
+  if (state.isHovered) {
+    active.add('hovered')
+  }
+  if (state.isPressed) {
+    active.add('pressed')
+  }
+  if (state.isReadonly) {
+    active.add('readonly')
+  }
+  if (state.isInvalid) {
+    active.add('invalid')
+  }
+  if (state.isOpen) {
+    active.add('open')
+  }
+  if (state.hasSelections) {
+    active.add('hasSelections')
+  }
+  if (state.isSelected) {
+    active.add('selected')
+  }
+  if (state.isHighlighted) {
+    active.add('highlighted')
+  }
+
+  return active
 }
 
-export const createMultiSelectThemeFromDesign = (theme: DesignTokensTheme): MultiSelectTheme => {
-  return createMultiSelectTheme({
-    semantic: theme.semanticColors,
-    component: theme.componentColors,
+export const toMultiSelectThemeResolvers: ComponentThemeResolver<MultiSelectThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: MultiSelectResolveState = {}) => componentTokens.multiSelect({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    config: {
+      hasSearch: state.hasSearch,
+    },
+    overrides: {
+      color: state.color,
+    },
+    state: toDesignMultiSelectState(state),
+  })
+
+  const toTriggerState = (state: MultiSelectState): MultiSelectResolveState => ({
+    color: state.color,
+    isDisabled: state.isDisabled,
+    isInvalid: state.isInvalid,
+    isHovered: state.isHovered,
+    isFocused: state.isFocused,
+    isFocusVisible: state.isFocusVisible,
+    isPressed: state.isPressed,
+    isReadonly: state.isReadonly,
+    isOpen: state.isOpen,
+    hasSelections: state.hasSelections,
   })
+
+  return {
+    trigger: createStyleResolver((state: MultiSelectState): MultiSelectTriggerStyle => {
+      const { trigger, stateLayer } = resolve(toTriggerState(state))
+      return toContainerStyleWithStateLayer(trigger, stateLayer)
+    }),
+    triggerText: createStyleResolver((state: MultiSelectState): SelectTriggerTextStyle => (
+      toTextStyle(resolve(toTriggerState(state)).triggerText)
+    )),
+    overlay: createSimpleStyleResolver((): SelectOverlayStyle => ({
+      ...toContainerStyle(resolve().overlay),
+      flex: 1,
+    })),
+    menu: createStyleResolver((state: SelectMenuState): SelectMenuStyle => (
+      toContainerStyle(resolve({ hasSearch: state.hasSearch }).menu)
+    )),
+    header: createSimpleStyleResolver((): SelectHeaderStyle => (
+      toContainerStyle(resolve().header)
+    )),
+    option: createStyleResolver((state: MultiSelectOptionState): MultiSelectOptionStyle => (
+      toContainerStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).option)
+    )),
+    optionText: createStyleResolver((state: MultiSelectOptionState): MultiSelectOptionTextStyle => (
+      toTextStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).optionText)
+    )),
+    emptyText: createSimpleStyleResolver((): SelectEmptyTextStyle => (
+      toTextStyle(resolve().emptyText)
+    )),
+    checkbox: createStyleResolver((state: MultiSelectOptionState): MultiSelectCheckboxStyle => (
+      toContainerStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).checkbox)
+    )),
+    checkboxIcon: createValueResolver((state: MultiSelectOptionState): MultiSelectCheckboxIconStyle => (
+      toIconStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).checkboxIcon)
+    )),
+  }
 }