@helpwave/hightide-native 0.0.7 → 0.1.0

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'

package/src/global-contexts/index.ts

@@ -1,5 +1,7 @@
 export * from './HightideContext'
 export * from './HightideProvider'
+export * from './content-theme'
+export * from './debug'
 export * from './hightide-config'
 export * from './localization'
 export * from './theme'

package/src/global-contexts/theme/ThemeProvider.tsx

@@ -21,6 +21,7 @@ import {
 import { useNativeKeyValueStore } from '../../hooks/useNativeKeyValueStore'
 import type { ThemeMode } from '../../theme/themes/hightideThemes'
 import type { HightideTheme } from '../../theme/types/theme'
+import { ContentThemeProvider } from '../content-theme'
 
 export type ThemeProviderProps<T> = PropsWithChildren & {
   theme?: ThemeMode | null,
@@ -92,7 +93,12 @@ export const ThemeProvider = ({
 
   return (
     <ThemeContext.Provider value={contextValue}>
-      {children}
+      <ContentThemeProvider
+        foregroundColor={contextValue.theme.colors.surface.onColor}
+        textStyle={contextValue.theme.typography.body.md}
+      >
+        {children}
+      </ContentThemeProvider>
     </ThemeContext.Provider>
   )
 }

package/src/icons/HightideIconRegistry.ts

@@ -0,0 +1,33 @@
+import {
+  Check,
+  CheckCheck,
+  ChevronDown,
+  ChevronRight,
+  Download,
+  FileText,
+  Minus,
+  Plus,
+  Search,
+  SendHorizontal,
+  User,
+  X
+} from 'lucide-react-native'
+
+import type { IconComponent } from './types'
+
+export const HightideIconRegistry = {
+  Check: Check,
+  CheckCheck: CheckCheck,
+  ChevronDown: ChevronDown,
+  ChevronRight: ChevronRight,
+  Download: Download,
+  FileText: FileText,
+  Minus: Minus,
+  Plus: Plus,
+  Search: Search,
+  SendHorizontal: SendHorizontal,
+  User: User,
+  X: X,
+} as const satisfies Record<string, IconComponent>
+
+export type HightideIconName = keyof typeof HightideIconRegistry

package/src/icons/index.ts

@@ -0,0 +1,2 @@
+export * from './HightideIconRegistry'
+export * from './types'

package/src/icons/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from 'react'
+
+export type IconStyle = {
+  size?: number,
+  color?: string,
+  strokeWidth?: number,
+}
+
+export type IconComponentProps = IconStyle
+
+export type IconComponent = ComponentType<IconComponentProps>

package/src/theme/adapters/container-adapter.ts

@@ -0,0 +1,323 @@
+import type { ViewStyle } from 'react-native'
+
+import type {
+  AlignSelfToken,
+  AxisAligmentToken,
+  BorderRadiusToken,
+  BorderToken,
+  ContainerTokens,
+  DirectionalToken,
+  LayoutDirectionToken,
+  MarginToken,
+  PaddingToken
+} from '@helpwave/hightide-design/component-token-resolvers'
+import {
+  defaultWritingMode,
+  resolveDirectionalTokens
+} from '@helpwave/hightide-design/component-token-resolvers'
+import type { ColorToken, HexColorToken } from '@helpwave/hightide-design/primitive-tokens'
+import type { ShadowToken } from '@helpwave/hightide-design/theme-tokens'
+import { HexColorUtils } from '@helpwave/hightide-design/utils'
+
+import { defined } from './defined'
+
+export const toShadowStyle = (shadow: ShadowToken): ViewStyle => defined({
+  boxShadow: [{
+    color: shadow.color,
+    offsetX: shadow.x,
+    offsetY: shadow.y,
+    blurRadius: shadow.blur,
+    spreadDistance: shadow.spread,
+  }],
+})
+
+const toFlexDirection = (
+  direction?: LayoutDirectionToken
+): ViewStyle['flexDirection'] => {
+  if (direction === undefined) {
+    return undefined
+  }
+
+  return direction === 'horizontal' ? 'row' : 'column'
+}
+
+const toJustifyContent = (
+  alignment?: AxisAligmentToken
+): ViewStyle['justifyContent'] => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'start') {
+    return 'flex-start'
+  }
+
+  if (alignment === 'end') {
+    return 'flex-end'
+  }
+
+  return 'center'
+}
+
+const toAlignItems = (
+  alignment?: AxisAligmentToken
+): ViewStyle['alignItems'] => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'start') {
+    return 'flex-start'
+  }
+
+  if (alignment === 'end') {
+    return 'flex-end'
+  }
+
+  return 'center'
+}
+
+const toAlignSelf = (
+  alignment?: AlignSelfToken
+): ViewStyle['alignSelf'] => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'start') {
+    return 'flex-start'
+  }
+
+  if (alignment === 'end') {
+    return 'flex-end'
+  }
+
+  return alignment
+}
+
+const toAlignContent = (
+  alignment?: AlignSelfToken
+): ViewStyle['alignContent'] => {
+  if (alignment === undefined) {
+    return undefined
+  }
+
+  if (alignment === 'start') {
+    return 'flex-start'
+  }
+
+  if (alignment === 'end') {
+    return 'flex-end'
+  }
+
+  return alignment
+}
+
+const toBorderRadiusStyle = (
+  borderRadius?: BorderRadiusToken
+): ViewStyle => {
+  if (borderRadius === undefined) {
+    return {}
+  }
+
+  if (borderRadius.type === 'all') {
+    return defined({ borderRadius: borderRadius.value })
+  }
+
+  return defined({
+    borderTopLeftRadius: borderRadius.topLeft,
+    borderTopRightRadius: borderRadius.topRight,
+    borderBottomLeftRadius: borderRadius.bottomLeft,
+    borderBottomRightRadius: borderRadius.bottomRight,
+  })
+}
+
+const toDirectionalBorderWidths = (
+  width?: DirectionalToken<number>
+): ViewStyle => {
+  if (width === undefined) {
+    return {}
+  }
+
+  switch (width.type) {
+  case 'all':
+    return defined({
+      borderWidth: width.value,
+    })
+  case 'physicalAxis':
+    return defined({
+      borderTopWidth: width.vertical,
+      borderBottomWidth: width.vertical,
+      borderLeftWidth: width.horizontal,
+      borderRightWidth: width.horizontal,
+    })
+  case 'physicalSide':
+    return defined({
+      borderTopWidth: width.top,
+      borderRightWidth: width.right,
+      borderBottomWidth: width.bottom,
+      borderLeftWidth: width.left,
+    })
+  case 'logicalAxis':
+    return defined({
+      borderTopWidth: width.block,
+      borderBottomWidth: width.block,
+      borderStartWidth: width.inline,
+      borderEndWidth: width.inline,
+    })
+  case 'logicalSide':
+    return defined({
+      borderStartWidth: width.inlineStart,
+      borderEndWidth: width.inlineEnd,
+      borderTopWidth: width.blockStart,
+      borderBottomWidth: width.blockEnd,
+    })
+  }
+}
+
+const toDirectionalBorderColors = (
+  color?: NonNullable<BorderToken['color']>
+): ViewStyle => {
+  if (color === undefined) {
+    return {}
+  }
+
+  switch (color.type) {
+  case 'all':
+    return defined({
+      borderColor: color.value,
+    })
+  case 'physicalAxis':
+    return defined({
+      borderTopColor: color.vertical,
+      borderBottomColor: color.vertical,
+      borderLeftColor: color.horizontal,
+      borderRightColor: color.horizontal,
+    })
+  case 'physicalSide':
+    return defined({
+      borderTopColor: color.top,
+      borderRightColor: color.right,
+      borderBottomColor: color.bottom,
+      borderLeftColor: color.left,
+    })
+  case 'logicalAxis':
+    return defined({
+      borderTopColor: color.block,
+      borderBottomColor: color.block,
+      borderStartColor: color.inline,
+      borderEndColor: color.inline,
+    })
+  case 'logicalSide':
+    return defined({
+      borderStartColor: color.inlineStart,
+      borderEndColor: color.inlineEnd,
+      borderTopColor: color.blockStart,
+      borderBottomColor: color.blockEnd,
+    })
+  }
+}
+
+const toBorderStyle = (border?: BorderToken): ViewStyle => {
+  if (border === undefined) {
+    return {}
+  }
+
+  return defined({
+    ...toDirectionalBorderWidths(border.width),
+    ...toDirectionalBorderColors(border.color),
+    borderStyle: border.style,
+  })
+}
+
+const toPaddingStyle = (padding?: PaddingToken): ViewStyle => {
+  if (padding === undefined) {
+    return {}
+  }
+
+  const sides = resolveDirectionalTokens([padding], defaultWritingMode)
+
+  return defined({
+    paddingTop: sides.top,
+    paddingRight: sides.right,
+    paddingBottom: sides.bottom,
+    paddingLeft: sides.left,
+  })
+}
+
+const toMarginStyle = (margin?: MarginToken): ViewStyle => {
+  if (margin === undefined) {
+    return {}
+  }
+
+  const sides = resolveDirectionalTokens([margin], defaultWritingMode)
+
+  return defined({
+    marginTop: sides.top,
+    marginRight: sides.right,
+    marginBottom: sides.bottom,
+    marginLeft: sides.left,
+  })
+}
+
+export const toContainerStyle = (tokens: ContainerTokens): ViewStyle => defined({
+  display: 'flex',
+  overflow: tokens.overflow,
+  flexWrap: tokens.layout?.flexWrap,
+  flexDirection: toFlexDirection(tokens.layout?.direction),
+  justifyContent: toJustifyContent(tokens.layout?.mainAxisAlignment),
+  alignItems: toAlignItems(tokens.layout?.crossAxisAligment),
+  alignContent: toAlignContent(tokens.layout?.alignContent),
+  alignSelf: toAlignSelf(tokens.layout?.alignSelf),
+  backgroundColor: tokens.backgroundColor,
+  opacity: tokens.opacity,
+  ...toBorderStyle(tokens.border),
+  height: tokens.size?.height,
+  width: tokens.size?.width,
+  minHeight: tokens.size?.minHeight,
+  minWidth: tokens.size?.minWidth,
+  maxHeight: tokens.size?.maxHeight,
+  maxWidth: tokens.size?.maxWidth,
+  ...toBorderRadiusStyle(tokens.shape?.borderRadius),
+  ...toPaddingStyle(tokens.padding),
+  ...toMarginStyle(tokens.margin),
+  gap: tokens.layout?.gap,
+  outlineColor: tokens.outline?.color,
+  outlineOffset: tokens.outline?.offset,
+  outlineWidth: tokens.outline?.width,
+  outlineStyle: tokens.outline?.style,
+  ...(tokens.decoration?.shadow ? toShadowStyle(tokens.decoration.shadow) : {}),
+})
+
+const blendWithStateLayer = (
+  base: ColorToken | undefined,
+  tint: ColorToken
+): ColorToken | undefined => {
+  if (base === undefined || tint === 'transparent' || base === 'transparent') {
+    return base
+  }
+
+  return HexColorUtils.blend(base as HexColorToken, tint as HexColorToken)
+}
+
+export const toContainerStyleWithStateLayer = (
+  container: ContainerTokens,
+  stateLayer?: ContainerTokens
+): ViewStyle => {
+  const tint = stateLayer?.backgroundColor ?? 'transparent'
+  const borderColor = container.border?.color
+
+  return toContainerStyle({
+    ...container,
+    backgroundColor: blendWithStateLayer(container.backgroundColor, tint),
+    border: container.border === undefined ? undefined : {
+      ...container.border,
+      color: borderColor?.type === 'all'
+        ? {
+          type: 'all',
+          value: blendWithStateLayer(borderColor.value, tint) ?? borderColor.value,
+        }
+        : borderColor,
+    },
+  })
+}

package/src/theme/adapters/defined.ts

@@ -0,0 +1,11 @@
+export 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
+}

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

@@ -0,0 +1,10 @@
+import type { IconTokens } from '@helpwave/hightide-design/component-token-resolvers'
+
+import type { IconStyle } from '../../icons'
+import { defined } from './defined'
+
+export const toIconStyle = (tokens: IconTokens): IconStyle => defined({
+  color: tokens.color,
+  size: tokens.size,
+  strokeWidth: tokens.strokeWidth,
+})

package/src/theme/adapters/index.ts

@@ -0,0 +1,4 @@
+export * from './container-adapter'
+export * from './defined'
+export * from './icon-style-adapter'
+export * from './text-style-adapter'

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

@@ -0,0 +1,16 @@
+import type { TextStyle } from 'react-native'
+
+import type { TextStyleTokens } from '@helpwave/hightide-design/component-token-resolvers'
+
+import { defined } from './defined'
+
+export const toTextStyle = (tokens: TextStyleTokens): TextStyle => defined({
+  color: tokens.color,
+  fontSize: tokens.fontSize,
+  fontWeight: tokens.fontWeight,
+  fontFamily: tokens.fontFamily,
+  lineHeight: tokens.lineHeight,
+  textAlign: tokens.textAlign,
+  flex: tokens.flex,
+  flexShrink: tokens.flexShrink,
+})

package/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from './adapters'
 export * from './resolvers'
 export * from './themes'
 export * from './types'