@helpwave/hightide-native 0.2.0 → 0.3.0

package/src/theme/adapters/style-adapter-utils.ts

@@ -0,0 +1,433 @@
+import type {
+  TextStyle,
+  ViewStyle
+} from 'react-native'
+
+import type {
+  AxisAligmentToken,
+  BorderRadiusToken,
+  BorderToken,
+  ContainerTokens,
+  CrossAxisAligmentToken,
+  CrossAxisLineAligmentToken,
+  IconTokens,
+  LayoutDirectionToken,
+  MainAxisAligmentToken,
+  MarginToken,
+  PaddingToken,
+  TextStyleTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+import {
+  defaultWritingMode,
+  resolveDirectionalTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
+import type { IconStyle } from '../../icons'
+
+type OptionalViewStyle<K extends keyof ViewStyle> = {
+  [P in K]?: ViewStyle[P]
+}
+
+const defined = <T extends object>(style: T): T => {
+  const result = {} as T
+
+  for (const key of Object.keys(style) as (keyof T)[]) {
+    if (style[key] !== undefined) {
+      result[key] = style[key]
+    }
+  }
+
+  return result
+}
+
+const toFlexStartEnd = (
+  alignment: AxisAligmentToken
+): 'flex-start' | 'flex-end' | 'center' => {
+  if (alignment === 'start') {
+    return 'flex-start'
+  }
+
+  if (alignment === 'end') {
+    return 'flex-end'
+  }
+
+  return 'center'
+}
+
+const shadowStyleAdapter = (
+  shadow?: ShadowToken
+): ViewStyle['boxShadow'] | undefined => {
+  if (shadow === undefined) {
+    return undefined
+  }
+
+  return [{
+    color: shadow.color,
+    offsetX: shadow.x,
+    offsetY: shadow.y,
+    blurRadius: shadow.blur,
+    spreadDistance: shadow.spread,
+  }]
+}
+
+const flexDirectionStyleAdapter = (
+  direction?: LayoutDirectionToken
+): ViewStyle['flexDirection'] | undefined => {
+  if (direction === undefined) {
+    return undefined
+  }
+
+  return direction === 'horizontal' ? 'row' : 'column'
+}
+
+const justifyContentStyleAdapter = (
+  alignment?: MainAxisAligmentToken
+): ViewStyle['justifyContent'] | undefined => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'space-between' || alignment === 'space-evenly' || alignment === 'space-around') {
+    return alignment
+  }
+
+  return toFlexStartEnd(alignment)
+}
+
+const alignItemsStyleAdapter = (
+  alignment?: CrossAxisAligmentToken
+): ViewStyle['alignItems'] | undefined => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'stretch') {
+    return alignment
+  }
+
+  return toFlexStartEnd(alignment)
+}
+
+const alignSelfStyleAdapter = (
+  alignment?: CrossAxisAligmentToken
+): ViewStyle['alignSelf'] | undefined => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'stretch') {
+    return alignment
+  }
+
+  return toFlexStartEnd(alignment)
+}
+
+const alignContentStyleAdapter = (
+  alignment?: CrossAxisLineAligmentToken
+): ViewStyle['alignContent'] | undefined => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (
+    alignment === 'stretch'
+    || alignment === 'space-between'
+    || alignment === 'space-evenly'
+    || alignment === 'space-around'
+  ) {
+    return alignment
+  }
+
+  return toFlexStartEnd(alignment)
+}
+
+const borderRadiusStyleAdapter = (
+  borderRadius?: BorderRadiusToken
+): OptionalViewStyle<
+  | 'borderRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+> | undefined => {
+  if (borderRadius === undefined) {
+    return undefined
+  }
+
+  if (borderRadius.type === 'all') {
+    return {
+      borderRadius: borderRadius.value,
+      borderTopLeftRadius: undefined,
+      borderTopRightRadius: undefined,
+      borderBottomLeftRadius: undefined,
+      borderBottomRightRadius: undefined,
+    }
+  }
+
+  return {
+    borderRadius: undefined,
+    borderTopLeftRadius: borderRadius.topLeft,
+    borderTopRightRadius: borderRadius.topRight,
+    borderBottomLeftRadius: borderRadius.bottomLeft,
+    borderBottomRightRadius: borderRadius.bottomRight,
+  }
+}
+
+const borderWidthStyleAdapter = (
+  width?: BorderToken['width']
+): OptionalViewStyle<
+  | 'borderTopWidth'
+  | 'borderRightWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+> | undefined => {
+  if (width === undefined) {
+    return undefined
+  }
+
+  const sides = resolveDirectionalTokens([width], defaultWritingMode)
+
+  return {
+    borderTopWidth: sides.top,
+    borderRightWidth: sides.right,
+    borderBottomWidth: sides.bottom,
+    borderLeftWidth: sides.left,
+  }
+}
+
+const borderColorStyleAdapter = (
+  color?: BorderToken['color']
+): OptionalViewStyle<
+  | 'borderTopColor'
+  | 'borderRightColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+> | undefined => {
+  if (color === undefined) {
+    return undefined
+  }
+
+  const sides = resolveDirectionalTokens([color], defaultWritingMode)
+
+  return {
+    borderTopColor: sides.top,
+    borderRightColor: sides.right,
+    borderBottomColor: sides.bottom,
+    borderLeftColor: sides.left,
+  }
+}
+
+const borderStyleAdapter = (
+  border?: BorderToken
+): OptionalViewStyle<
+  | 'borderStyle'
+  | 'borderTopWidth'
+  | 'borderRightWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'borderTopColor'
+  | 'borderRightColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+> | undefined => {
+  if (border === undefined) {
+    return undefined
+  }
+
+  return {
+    borderStyle: border.style,
+    ...borderWidthStyleAdapter(border.width),
+    ...borderColorStyleAdapter(border.color),
+  }
+}
+
+const paddingStyleAdapter = (
+  padding?: PaddingToken
+): OptionalViewStyle<
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+> | undefined => {
+  if (padding === undefined) {
+    return undefined
+  }
+
+  const sides = resolveDirectionalTokens([padding], defaultWritingMode)
+
+  return {
+    paddingTop: sides.top,
+    paddingRight: sides.right,
+    paddingBottom: sides.bottom,
+    paddingLeft: sides.left,
+  }
+}
+
+const marginStyleAdapter = (
+  margin?: MarginToken
+): OptionalViewStyle<
+  | 'marginTop'
+  | 'marginRight'
+  | 'marginBottom'
+  | 'marginLeft'
+> | undefined => {
+  if (margin === undefined) {
+    return undefined
+  }
+
+  const sides = resolveDirectionalTokens([margin], defaultWritingMode)
+
+  return {
+    marginTop: sides.top,
+    marginRight: sides.right,
+    marginBottom: sides.bottom,
+    marginLeft: sides.left,
+  }
+}
+
+const sizeStyleAdapter = (
+  size?: ContainerTokens['size']
+): OptionalViewStyle<
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+> | undefined => {
+  if (size === undefined) {
+    return undefined
+  }
+
+  return {
+    width: size.width,
+    height: size.height,
+    minWidth: size.minWidth,
+    minHeight: size.minHeight,
+    maxWidth: size.maxWidth,
+    maxHeight: size.maxHeight,
+  }
+}
+
+const outlineStyleAdapter = (
+  outline?: ContainerTokens['outline']
+): OptionalViewStyle<
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineWidth'
+  | 'outlineStyle'
+> | undefined => {
+  if (outline === undefined) {
+    return undefined
+  }
+
+  return {
+    outlineColor: outline.color,
+    outlineOffset: outline.offset,
+    outlineWidth: outline.width,
+    outlineStyle: outline.style,
+  }
+}
+
+const layoutStyleAdapter = (
+  layout?: ContainerTokens['layout']
+): OptionalViewStyle<
+  | 'flexWrap'
+  | 'flexGrow'
+  | 'flexShrink'
+  | 'flexBasis'
+  | 'flexDirection'
+  | 'justifyContent'
+  | 'alignItems'
+  | 'alignContent'
+  | 'alignSelf'
+  | 'gap'
+> | undefined => {
+  if (layout === undefined) {
+    return undefined
+  }
+
+  return {
+    flexWrap: layout.flexWrap,
+    flexGrow: layout.flexGrow,
+    flexShrink: layout.flexShrink,
+    flexBasis: layout.flexBasis,
+    flexDirection: flexDirectionStyleAdapter(layout.direction),
+    justifyContent: justifyContentStyleAdapter(layout.mainAxisAlignment),
+    alignItems: alignItemsStyleAdapter(layout.crossAxisAligment),
+    alignContent: alignContentStyleAdapter(layout.crossAxisLineAligment),
+    alignSelf: alignSelfStyleAdapter(layout.selfCrossAxisAlignment),
+    gap: layout.gap,
+  }
+}
+
+function containerStyleAdapter(tokens: ContainerTokens): ViewStyle {
+  if (tokens === undefined) {
+    return {}
+  }
+
+  return defined({
+    display: 'flex' as ViewStyle['display'],
+    overflow: tokens.overflow,
+    backgroundColor: tokens.backgroundColor,
+    opacity: tokens.opacity,
+    boxShadow: shadowStyleAdapter(tokens.decoration?.shadow),
+    ...layoutStyleAdapter(tokens.layout),
+    ...sizeStyleAdapter(tokens.size),
+    ...borderStyleAdapter(tokens.border),
+    ...borderRadiusStyleAdapter(tokens.shape?.borderRadius),
+    ...paddingStyleAdapter(tokens.padding),
+    ...marginStyleAdapter(tokens.margin),
+    ...outlineStyleAdapter(tokens.outline),
+  })
+}
+
+function textStyleAdapter(tokens: TextStyleTokens): TextStyle {
+  if (tokens === undefined) {
+    return {}
+  }
+
+  return defined({
+    color: tokens.color,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    fontFamily: tokens.fontFamily,
+    lineHeight: tokens.lineHeight,
+    textAlign: tokens.textAlign,
+  })
+}
+
+function iconStyleAdapter(tokens: IconTokens): IconStyle {
+  if (tokens === undefined) {
+    return {}
+  }
+
+  return defined({
+    color: tokens.color,
+    size: tokens.size,
+    strokeWidth: tokens.strokeWidth,
+  })
+}
+
+export const StyleAdapterUtils = {
+  shadow: shadowStyleAdapter,
+  flexDirection: flexDirectionStyleAdapter,
+  justifyContent: justifyContentStyleAdapter,
+  alignItems: alignItemsStyleAdapter,
+  alignSelf: alignSelfStyleAdapter,
+  alignContent: alignContentStyleAdapter,
+  borderRadius: borderRadiusStyleAdapter,
+  borderWidth: borderWidthStyleAdapter,
+  borderColor: borderColorStyleAdapter,
+  border: borderStyleAdapter,
+  padding: paddingStyleAdapter,
+  margin: marginStyleAdapter,
+  size: sizeStyleAdapter,
+  outline: outlineStyleAdapter,
+  layout: layoutStyleAdapter,
+  container: containerStyleAdapter,
+  text: textStyleAdapter,
+  icon: iconStyleAdapter,
+}
+
+export type StyleAdapters = typeof StyleAdapterUtils

package/src/theme/resolvers/avatar.ts

@@ -8,9 +8,6 @@ import {
   type AvatarWithStatusTokens
 } from '@helpwave/hightide-design/component-token-resolvers'
 
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   AvatarGroupContainerStyle,
   AvatarGroupStackStyle,
@@ -34,6 +31,8 @@ import {
 } from '../types/resolver'
 import type { ThemeTokens } from '@helpwave/hightide-design/theme-tokens'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toDesignAvatarSize = (size?: AvatarSize | number): AvatarSize => (
   typeof size === 'number' ? 'md' : (size ?? 'md')
 )
@@ -114,7 +113,7 @@ export const createAvatarStyleResolvers = (
     const groupIndex = state.groupIndex ?? 0
 
     return {
-      ...toContainerStyle(container),
+      ...StyleAdapterUtils.container(container),
       position: state.isGrouped ? 'absolute' : 'relative',
       overflow: 'hidden',
       ...(state.isGrouped ? {
@@ -141,13 +140,13 @@ export const createAvatarStyleResolvers = (
     }
   }),
   text: createStyleResolver((state: AvatarState): AvatarTextStyle => ({
-    ...toTextStyle(resolveTokens(state).text),
+    ...StyleAdapterUtils.text(resolveTokens(state).text),
     textAlign: 'center',
   })),
   icon: createValueResolver((state: AvatarState): AvatarIconStyle => {
     const { icon } = resolveTokens(state)
 
-    return toIconStyle({
+    return StyleAdapterUtils.icon({
       size: icon.size ?? themeTokens.icongraphy.sizes.md,
       strokeWidth: icon.strokeWidth ?? themeTokens.icongraphy.strokeWidth,
       color: icon.color ?? themeTokens.color.primary.onColor,
@@ -233,7 +232,7 @@ export const createAvatarWithStatusThemeResolvers = (
         : undefined
 
       return {
-        ...toContainerStyle(
+        ...StyleAdapterUtils.container(
           size === undefined
             ? statusDot
             : {
@@ -378,7 +377,7 @@ export const toAvatarGroupThemeResolvers: ComponentThemeResolver<
         }
       }
 
-      return toContainerStyle(container)
+      return StyleAdapterUtils.container(container)
     }),
     avatarStack: createStyleResolver((state: AvatarGroupState): AvatarGroupStackStyle => {
       const tokens = resolve(state)
@@ -403,7 +402,7 @@ export const toAvatarGroupThemeResolvers: ComponentThemeResolver<
       const height = avatarStack.size?.height
 
       return {
-        ...toContainerStyle(avatarStack),
+        ...StyleAdapterUtils.container(avatarStack),
         position: 'relative',
         minWidth: width,
         maxWidth: width,
@@ -415,7 +414,7 @@ export const toAvatarGroupThemeResolvers: ComponentThemeResolver<
       const { text } = resolve(state)
 
       return {
-        ...toTextStyle(
+        ...StyleAdapterUtils.text(
           typeof state.size === 'number'
             ? {
               ...text,

package/src/theme/resolvers/button.ts

@@ -1,6 +1,3 @@
-import { toContainerStyle } from '../adapters/container-adapter'
-import { toIconStyle } from '../adapters/icon-style-adapter'
-import { toTextStyle } from '../adapters/text-style-adapter'
 import type {
   ButtonIconStyle,
   ButtonState,
@@ -15,6 +12,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toButtonThemeResolvers: ComponentThemeResolver<ButtonThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -33,13 +32,13 @@ export const toButtonThemeResolvers: ComponentThemeResolver<ButtonThemeResolvers
 
   return {
     container: createStyleResolver((state: ButtonState): ButtonStyle => ({
-      ...toContainerStyle(resolve(state).container),
+      ...StyleAdapterUtils.container(resolve(state).container),
       alignSelf: 'flex-start',
     })),
     stateLayer: createStyleResolver((state: ButtonState): ButtonStyle => {
       const tokens = resolve(state)
       return {
-        ...toContainerStyle(tokens.stateLayer),
+        ...StyleAdapterUtils.container(tokens.stateLayer),
         position: 'absolute',
         top: 0,
         right: 0,
@@ -48,10 +47,10 @@ export const toButtonThemeResolvers: ComponentThemeResolver<ButtonThemeResolvers
       }
     }),
     icon: createValueResolver((state: ButtonState): ButtonIconStyle => (
-      toIconStyle(resolve(state).icon)
+      StyleAdapterUtils.icon(resolve(state).icon)
     )),
     text: createStyleResolver((state: ButtonState): ButtonTextStyle => (
-      toTextStyle(resolve(state).text)
+      StyleAdapterUtils.text(resolve(state).text)
     )),
   }
 }

package/src/theme/resolvers/card.ts

@@ -1,4 +1,3 @@
-import { toContainerStyle } from '../adapters/container-adapter'
 import type {
   CardStyle,
   CardThemeResolvers
@@ -8,6 +7,8 @@ import {
   type ComponentThemeResolver
 } from '../types/resolver'
 
+import { StyleAdapterUtils } from '../adapters'
+
 export const toCardThemeResolvers: ComponentThemeResolver<CardThemeResolvers> = ({
   themeTokens,
   semanticTokens,
@@ -20,7 +21,7 @@ export const toCardThemeResolvers: ComponentThemeResolver<CardThemeResolvers> =
 
   return {
     container: createSimpleStyleResolver((): CardStyle => ({
-      ...toContainerStyle(resolveCard()),
+      ...StyleAdapterUtils.container(resolveCard()),
       overflow: 'hidden',
     })),
   }