@helpwave/hightide-native 0.0.1 → 0.0.2

package/src/theme/types/multiSelect.ts

@@ -1,12 +1,12 @@
-import type { ColorValue, FontWeight } from '@helpwave/hightide-design'
-import type { ResolverFunction } from './resolver'
+import type { ColorValue } from '@helpwave/hightide-design'
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import type { StyleResolverFunction } from './resolver'
 import type {
   SelectMenuStyle,
   SelectOptionState,
   SelectOverlayStyle,
   SelectSearchStyle,
   SelectState,
-  SelectTriggerStyle,
   SelectTriggerTextStyle
 } from './select'
 
@@ -16,35 +16,13 @@ export type MultiSelectState = SelectState & {
 
 export type MultiSelectOptionState = SelectOptionState
 
-export type MultiSelectTriggerStyle = SelectTriggerStyle & {
-  gap: number,
-}
+export type MultiSelectTriggerStyle = StyleProp<ViewStyle>
 
-export type MultiSelectOptionStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  backgroundColor: ColorValue | 'transparent',
-  opacity: number,
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: number,
-}
+export type MultiSelectOptionStyle = StyleProp<ViewStyle>
 
-export type MultiSelectOptionTextStyle = {
-  color: ColorValue,
-  fontWeight: FontWeight,
-}
+export type MultiSelectOptionTextStyle = StyleProp<TextStyle>
 
-export type MultiSelectCheckboxStyle = {
-  width: number,
-  height: number,
-  borderRadius: number,
-  borderWidth: number,
-  borderColor: ColorValue,
-  backgroundColor: ColorValue | 'transparent',
-  alignItems: 'center',
-  justifyContent: 'center',
-}
+export type MultiSelectCheckboxStyle = StyleProp<ViewStyle>
 
 export type MultiSelectCheckboxIconStyle = {
   color: ColorValue,
@@ -52,14 +30,14 @@ export type MultiSelectCheckboxIconStyle = {
 }
 
 export type MultiSelectTheme = {
-  trigger: ResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
-  triggerText: ResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
-  overlay: ResolverFunction<MultiSelectState, SelectOverlayStyle>,
-  menu: ResolverFunction<MultiSelectState, SelectMenuStyle>,
-  search: ResolverFunction<MultiSelectState, SelectSearchStyle>,
-  searchPlaceholderColor: ResolverFunction<MultiSelectState, ColorValue>,
-  option: ResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
-  optionText: ResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
-  checkbox: ResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,
-  checkboxIcon: ResolverFunction<MultiSelectOptionState, MultiSelectCheckboxIconStyle>,
+  trigger: StyleResolverFunction<MultiSelectState, MultiSelectTriggerStyle>,
+  triggerText: StyleResolverFunction<MultiSelectState, SelectTriggerTextStyle>,
+  overlay: StyleResolverFunction<MultiSelectState, SelectOverlayStyle>,
+  menu: StyleResolverFunction<MultiSelectState, SelectMenuStyle>,
+  search: StyleResolverFunction<MultiSelectState, SelectSearchStyle>,
+  searchPlaceholderColor: StyleResolverFunction<MultiSelectState, ColorValue>,
+  option: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionStyle>,
+  optionText: StyleResolverFunction<MultiSelectOptionState, MultiSelectOptionTextStyle>,
+  checkbox: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxStyle>,
+  checkboxIcon: StyleResolverFunction<MultiSelectOptionState, MultiSelectCheckboxIconStyle>,
 }

package/src/theme/types/resolver.ts

@@ -7,4 +7,46 @@ export type InteractionState = {
   isInvalid?: boolean,
 }
 
-export type ResolverFunction<TState, TStyle> = (props: TState) => TStyle
+export type StyleOverwrite<TState, TStyle> =
+  TStyle | ((prev: TStyle, state: TState) => TStyle)
+
+export type StyleResolverFunction<TState, TStyle> = (
+  props: TState,
+  overwrite?: StyleOverwrite<TState, TStyle>,
+) => TStyle
+
+export const createStyleResolver = <TState, TStyle>(
+  resolve: (props: TState) => TStyle
+): StyleResolverFunction<TState, TStyle> => {
+  return (props, overwrite) => {
+    const base = resolve(props)
+
+    if (overwrite === undefined) {
+      return base
+    }
+
+    if (typeof overwrite === 'function') {
+      return (overwrite as (prev: TStyle, state: TState) => TStyle)(base, props)
+    }
+
+    return [base, overwrite] as TStyle
+  }
+}
+
+export const createValueResolver = <TState, TValue>(
+  resolve: (props: TState) => TValue
+): StyleResolverFunction<TState, TValue> => {
+  return (props, overwrite) => {
+    const base = resolve(props)
+
+    if (overwrite === undefined) {
+      return base
+    }
+
+    if (typeof overwrite === 'function') {
+      return (overwrite as (prev: TValue, state: TState) => TValue)(base, props)
+    }
+
+    return overwrite
+  }
+}

package/src/theme/types/select.ts

@@ -1,5 +1,6 @@
-import type { ColorValue, FontWeight } from '@helpwave/hightide-design'
-import type { InteractionState, ResolverFunction } from './resolver'
+import type { ColorValue } from '@helpwave/hightide-design'
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import type { InteractionState, StyleResolverFunction } from './resolver'
 
 export type SelectState = InteractionState & {
   isInvalid?: boolean,
@@ -13,65 +14,27 @@ export type SelectOptionState = InteractionState & {
   isHighlighted?: boolean,
 }
 
-export type SelectTriggerStyle = {
-  minHeight: number,
-  paddingHorizontal: number,
-  paddingVertical: number,
-  borderRadius: number,
-  borderWidth: number,
-  borderColor: ColorValue,
-  backgroundColor: ColorValue,
-  justifyContent: 'center',
-  opacity: number,
-}
+export type SelectTriggerStyle = StyleProp<ViewStyle>
 
-export type SelectTriggerTextStyle = {
-  color: ColorValue,
-}
+export type SelectTriggerTextStyle = StyleProp<TextStyle>
 
-export type SelectOverlayStyle = {
-  flex: 1,
-  backgroundColor: ColorValue,
-  justifyContent: 'center',
-  padding: number,
-}
+export type SelectOverlayStyle = StyleProp<ViewStyle>
 
-export type SelectMenuStyle = {
-  maxHeight: number,
-  borderRadius: number,
-  backgroundColor: ColorValue,
-  borderWidth: number,
-  borderColor: ColorValue,
-  overflow: 'hidden',
-}
+export type SelectMenuStyle = StyleProp<ViewStyle>
 
-export type SelectSearchStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  borderBottomWidth: number,
-  borderBottomColor: ColorValue,
-  color: ColorValue,
-}
+export type SelectSearchStyle = StyleProp<TextStyle>
 
-export type SelectOptionStyle = {
-  paddingHorizontal: number,
-  paddingVertical: number,
-  backgroundColor: ColorValue | 'transparent',
-  opacity: number,
-}
+export type SelectOptionStyle = StyleProp<ViewStyle>
 
-export type SelectOptionTextStyle = {
-  color: ColorValue,
-  fontWeight: FontWeight,
-}
+export type SelectOptionTextStyle = StyleProp<TextStyle>
 
 export type SelectTheme = {
-  trigger: ResolverFunction<SelectState, SelectTriggerStyle>,
-  triggerText: ResolverFunction<SelectState, SelectTriggerTextStyle>,
-  overlay: ResolverFunction<SelectState, SelectOverlayStyle>,
-  menu: ResolverFunction<SelectState, SelectMenuStyle>,
-  search: ResolverFunction<SelectState, SelectSearchStyle>,
-  searchPlaceholderColor: ResolverFunction<SelectState, ColorValue>,
-  option: ResolverFunction<SelectOptionState, SelectOptionStyle>,
-  optionText: ResolverFunction<SelectOptionState, SelectOptionTextStyle>,
+  trigger: StyleResolverFunction<SelectState, SelectTriggerStyle>,
+  triggerText: StyleResolverFunction<SelectState, SelectTriggerTextStyle>,
+  overlay: StyleResolverFunction<SelectState, SelectOverlayStyle>,
+  menu: StyleResolverFunction<SelectState, SelectMenuStyle>,
+  search: StyleResolverFunction<SelectState, SelectSearchStyle>,
+  searchPlaceholderColor: StyleResolverFunction<SelectState, ColorValue>,
+  option: StyleResolverFunction<SelectOptionState, SelectOptionStyle>,
+  optionText: StyleResolverFunction<SelectOptionState, SelectOptionTextStyle>,
 }

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export * from './Button'

package/src/components/Checkbox/index.ts

@@ -1 +0,0 @@
-export * from './Checkbox'

package/src/components/IconButton/index.ts

@@ -1 +0,0 @@
-export * from './IconButton'

package/src/components/Input/index.ts

@@ -1 +0,0 @@
-export * from './Input'

package/src/components/MultiSelect/index.ts

@@ -1 +0,0 @@
-export * from './MultiSelect'

package/src/components/Select/index.ts

@@ -1 +0,0 @@
-export * from './Select'