@helpwave/hightide-native 0.0.8 → 0.1.1

package/src/theme/resolvers/searchBar.ts

@@ -0,0 +1,121 @@
+import type {
+  InputState as DesignInputState,
+  InputStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
+import { toContainerStyle, toContainerStyleWithStateLayer } from '../adapters/container-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
+import type {
+  SearchBarContainerStyle,
+  SearchBarIconButtonStyle,
+  SearchBarInputStyle,
+  SearchBarPlaceholderStyle,
+  SearchBarState,
+  SearchBarThemeResolvers
+} from '../types/components/searchBar'
+import {
+  createStyleResolver,
+  createValueResolver,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+const toDesignSearchBarState = (state: SearchBarState = {}): DesignInputState => {
+  const active = new Set<InputStateValue>()
+
+  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')
+  }
+
+  return active
+}
+
+export const toSearchBarThemeResolvers: ComponentThemeResolver<SearchBarThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: SearchBarState = {}) => componentTokens.searchBar({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      color: state.color,
+    },
+    state: toDesignSearchBarState(state),
+  })
+
+  return {
+    container: createStyleResolver((state: SearchBarState): SearchBarContainerStyle => ({
+      ...toContainerStyle(resolve(state).container),
+      position: 'relative',
+      justifyContent: 'center',
+    })),
+    input: createStyleResolver((state: SearchBarState): SearchBarInputStyle => {
+      const tokens = resolve(state)
+      const { container, stateLayer, text } = tokens.input
+      // TODO remove this computation with a better solution
+      const base = toContainerStyleWithStateLayer(container, stateLayer)
+      const horizontalPadding = typeof base.paddingLeft === 'number'
+        ? base.paddingLeft
+        : typeof base.paddingRight === 'number'
+          ? base.paddingRight
+          : 0
+      const iconButtonWidth = typeof tokens.iconButton.size?.width === 'number'
+        ? tokens.iconButton.size.width
+        : 0
+      const iconButtonMargin = tokens.iconButton.margin?.type === 'physicalAxis'
+        ? tokens.iconButton.margin.horizontal ?? 0
+        : 0
+      const trailingInset = iconButtonWidth + iconButtonMargin
+
+      return {
+        ...base,
+        ...toTextStyle(text),
+        paddingLeft: horizontalPadding,
+        paddingRight: horizontalPadding + trailingInset,
+      }
+    }),
+    placeholder: createStyleResolver((state: SearchBarState): SearchBarPlaceholderStyle => (
+      toTextStyle(resolve(state).input.placeholder)
+    )),
+    iconButton: createStyleResolver((state: SearchBarState): SearchBarIconButtonStyle => {
+      const { iconButton } = resolve(state)
+      const style = toContainerStyle(iconButton)
+
+      return {
+        ...style,
+        position: 'absolute',
+        right: 0,
+        top: '50%',
+        transform: [{ translateY: '-50%' }],
+      }
+    }),
+    iconButtonColor: createValueResolver((state: SearchBarState): ColorPairToken => {
+      const iconColor = resolve(state).icon.color
+
+      return {
+        color: (iconColor === undefined || iconColor === 'transparent'
+          ? themeTokens.color.surface.onColor
+          : iconColor),
+        onColor: themeTokens.color.surface.color,
+      }
+    }),
+  }
+}

package/src/theme/resolvers/select.ts

@@ -1,82 +1,157 @@
-import { fontWeights } from '@helpwave/hightide-design/tokens'
 import type {
-  ComponentColorTokens,
-  HightideThemeTokens as DesignTokensTheme
-} from '@helpwave/hightide-design/types'
-
-import type { HightideSemanticColors } from '../types/color'
+  SelectState as DesignSelectState,
+  SelectStateValue
+} 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 {
+  SelectIconStyle,
+  SelectMenuStyle,
+  SelectMenuState,
+  SelectHeaderStyle,
+  SelectEmptyTextStyle,
   SelectOptionState,
+  SelectOptionStyle,
+  SelectOptionTextStyle,
+  SelectOverlayStyle,
   SelectState,
-  SelectTheme
+  SelectThemeResolvers,
+  SelectTriggerStyle,
+  SelectTriggerTextStyle
 } from '../types/components/select'
 import {
+  createSimpleStyleResolver,
   createStyleResolver,
-  createValueResolver
+  createValueResolver,
+  type ComponentThemeResolver
 } from '../types/resolver'
 
-export type CreateSelectThemeOptions = {
-  semantic: HightideSemanticColors,
-  component: ComponentColorTokens,
+type SelectResolveState = {
+  color?: SelectState['color'],
+  isDisabled?: boolean,
+  isInvalid?: boolean,
+  isHovered?: boolean,
+  isFocused?: boolean,
+  isFocusVisible?: boolean,
+  isPressed?: boolean,
+  isReadonly?: boolean,
+  isOpen?: boolean,
+  hasValue?: boolean,
+  isSelected?: boolean,
+  isHighlighted?: boolean,
+  hasSearch?: boolean,
 }
 
-export const createSelectTheme = ({
-  semantic,
-  component,
-}: CreateSelectThemeOptions): SelectTheme => {
-  return {
-    trigger: createStyleResolver((state: SelectState) => ({
-      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',
-      opacity: state.isDisabled ? 0.6 : 1,
-    })),
-    triggerText: createStyleResolver((state: SelectState) => ({
-      color: state.hasValue ? component.input.text : 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: SelectOptionState) => ({
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-      backgroundColor: state.isHighlighted ? component.table.rowHoverBackground : 'transparent',
-      opacity: state.isDisabled ? 0.5 : 1,
-    })),
-    optionText: createStyleResolver((state: SelectOptionState) => ({
-      color: state.isSelected ? semantic.primary : component.menu.text,
-      fontWeight: state.isSelected ? fontWeights.semibold : fontWeights.base,
-    })),
+const toDesignSelectState = (state: SelectResolveState = {}): DesignSelectState => {
+  const active = new Set<SelectStateValue>()
+
+  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.hasValue) {
+    active.add('hasValue')
+  }
+  if (state.isSelected) {
+    active.add('selected')
+  }
+  if (state.isHighlighted) {
+    active.add('highlighted')
+  }
+
+  return active
 }
 
-export const createSelectThemeFromDesign = (theme: DesignTokensTheme): SelectTheme => {
-  return createSelectTheme({
-    semantic: theme.semanticColors,
-    component: theme.componentColors,
+export const toSelectThemeResolvers: ComponentThemeResolver<SelectThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: SelectResolveState = {}) => componentTokens.select({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    config: {
+      hasSearch: state.hasSearch,
+    },
+    overrides: {
+      color: state.color,
+    },
+    state: toDesignSelectState(state),
   })
+
+  const toTriggerState = (state: SelectState): SelectResolveState => ({
+    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,
+    hasValue: state.hasValue,
+  })
+
+  return {
+    trigger: createStyleResolver((state: SelectState): SelectTriggerStyle => {
+      const { trigger, stateLayer } = resolve(toTriggerState(state))
+      return toContainerStyleWithStateLayer(trigger, stateLayer)
+    }),
+    triggerText: createStyleResolver((state: SelectState): SelectTriggerTextStyle => (
+      toTextStyle(resolve(toTriggerState(state)).triggerText)
+    )),
+    icon: createValueResolver((state: SelectState): SelectIconStyle => (
+      toIconStyle(resolve(toTriggerState(state)).icon)
+    )),
+    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: SelectOptionState): SelectOptionStyle => (
+      toContainerStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).option)
+    )),
+    optionText: createStyleResolver((state: SelectOptionState): SelectOptionTextStyle => (
+      toTextStyle(resolve({
+        color: state.color,
+        isDisabled: state.isDisabled,
+        isSelected: state.isSelected,
+        isHighlighted: state.isHighlighted,
+      }).optionText)
+    )),
+    emptyText: createSimpleStyleResolver((): SelectEmptyTextStyle => (
+      toTextStyle(resolve().emptyText)
+    )),
+  }
 }

package/src/theme/resolvers/switch.ts

@@ -1,65 +1,71 @@
 import type {
-  ComponentColorTokens,
-  HightideThemeTokens as DesignTokensTheme
-} from '@helpwave/hightide-design/types'
-
-import type { HightideSemanticColors } from '../types/color'
+  SwitchState as DesignSwitchState,
+  SwitchStateValue
+} from '@helpwave/hightide-design/component-token-resolvers'
+import { toContainerStyle } from '../adapters/container-adapter'
 import type {
+  SwitchContainerStyle,
   SwitchState,
-  SwitchTheme
+  SwitchThemeResolvers,
+  SwitchThumbStyle,
+  SwitchTrackStyle
 } 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
+import {
+  createStyleResolver,
+  type ComponentThemeResolver
+} from '../types/resolver'
 
-    const borderColor = state.isDisabled
-      ? semantic.disabled
-      : state.isInvalid
-        ? semantic.negative
-        : state.isActive
-          ? trackActive
-          : component.switch.borderColor
+const toDesignSwitchState = (state: SwitchState = {}): DesignSwitchState => {
+  const active = new Set<SwitchStateValue>()
 
-    const thumbColor = state.isDisabled
-      ? semantic.onDisabled
-      : state.isActive
-        ? component.switch.thumb.active
-        : component.switch.thumb.inactive
-
-    return {
-      trackColor,
-      borderColor,
-      thumbColor,
-    }
+  if (state.isDisabled) {
+    active.add('disabled')
   }
-
-  return {
-    trackColor: createValueResolver((state) => resolveState(state).trackColor),
-    borderColor: createValueResolver((state) => resolveState(state).borderColor),
-    thumbColor: createValueResolver((state) => resolveState(state).thumbColor),
+  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.isActive) {
+    active.add('active')
+  }
+
+  return active
 }
 
-export const createSwitchThemeFromDesign = (theme: DesignTokensTheme): SwitchTheme => {
-  return createSwitchTheme({
-    semantic: theme.semanticColors,
-    component: theme.componentColors,
+export const toSwitchThemeResolvers: ComponentThemeResolver<SwitchThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: SwitchState = {}) => componentTokens.switch({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    state: toDesignSwitchState(state),
   })
+
+  return {
+    container: createStyleResolver((state: SwitchState): SwitchContainerStyle => (
+      toContainerStyle(resolve(state).container)
+    )),
+    track: createStyleResolver((state: SwitchState): SwitchTrackStyle => (
+      toContainerStyle(resolve(state).track)
+    )),
+    thumb: createStyleResolver((state: SwitchState): SwitchThumbStyle => (
+      toContainerStyle(resolve(state).thumb)
+    )),
+  }
 }

package/src/theme/resolvers/themedPressable.ts

@@ -0,0 +1,54 @@
+import { toContainerStyle } from '../adapters/container-adapter'
+import { toTextStyle } from '../adapters/text-style-adapter'
+import type {
+  ThemedPressableState,
+  ThemedPressableStyle,
+  ThemedPressableTextStyle,
+  ThemedPressableThemeResolvers
+} from '../types/components/themedPressable'
+import {
+  createStyleResolver,
+  toPressableInteractionState,
+  type ComponentThemeResolver
+} from '../types/resolver'
+
+export const toThemedPressableThemeResolvers: ComponentThemeResolver<ThemedPressableThemeResolvers> = ({
+  themeTokens,
+  semanticTokens,
+  componentTokens,
+}) => {
+  const resolve = (state: ThemedPressableState) => componentTokens.pressable({
+    themeTokens,
+    semanticResolvers: semanticTokens,
+    overrides: {
+      size: state.size,
+      color: state.color,
+      coloringStyle: state.coloringStyle,
+      coloringColorVariant: state.coloringColorVariant,
+      hasAdditionalHorizontalPadding: state.hasAdditionalHorizontalPadding,
+    },
+    state: toPressableInteractionState(state),
+  })
+
+  return {
+    container: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => ({
+      ...toContainerStyle(resolve(state).container),
+      alignSelf: 'flex-start',
+    })),
+    stateLayer: createStyleResolver((state: ThemedPressableState): ThemedPressableStyle => {
+      const tokens = resolve(state)
+
+      return {
+        ...toContainerStyle(tokens.stateLayer),
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }
+    }),
+    text: createStyleResolver((state: ThemedPressableState): ThemedPressableTextStyle => (
+      toTextStyle(resolve(state).text)
+    )),
+  }
+}