@neko-os/ui 0.0.4 → 0.0.6

package/src/modifiers/animations/animatedEffects.js

@@ -0,0 +1,63 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { useApplyStyles } from '../applyStyles'
+import { useFadeEffect } from './fadeEffect'
+import { useSlideEffect } from './slideEffect'
+
+export function useAnimatedEffects([values, { open, onClose, lazy = false, unmountOnClose = false, ...props }]) {
+  const unmountTimerRef = React.useRef()
+  const [totalDuration, setTotalDuration] = React.useState(0)
+  const [transform, setTransform] = React.useState('')
+  const [transitions, setTransitions] = React.useState([])
+  const [hasOpened, setHasOpened] = React.useState(open || !lazy)
+  const [render, setRender] = React.useState(open || !lazy)
+
+  const useRegisterEffect = (effect) => {
+    React.useEffect(() => {
+      if (!effect?.duration) return
+      setTotalDuration((v) => (v > effect.duration ? v : effect.duration))
+    }, [])
+  }
+
+  const useAddTransition = (effect, transition) => {
+    React.useEffect(() => {
+      if (!effect?.duration) return
+
+      setTransitions((v) => [...v, transition])
+    }, [])
+  }
+
+  React.useEffect(() => {
+    if (open) {
+      clearTimeout(unmountTimerRef?.current)
+      setHasOpened(true)
+      setRender(true)
+    } else if (unmountOnClose) {
+      unmountTimerRef.current = setTimeout(() => setRender(false), totalDuration)
+    }
+  }, [open])
+
+  return pipe(
+    useFadeEffect, //
+    useSlideEffect,
+    useApplyStyles({ transition: transitions.join(',') })
+  )([
+    {
+      ...values,
+      useRegisterEffect,
+      useAddTransition,
+      open,
+      onClose,
+      lazy,
+      unmountOnClose,
+      transform,
+      setTransform,
+      hasOpened,
+      setHasOpened,
+      render,
+      setRender,
+    },
+    props,
+  ])
+}

package/src/modifiers/animations/animatedEffects.native.js

@@ -0,0 +1,53 @@
+import { pipe } from 'ramda'
+import { useSharedValue } from 'react-native-reanimated'
+import React from 'react'
+
+import { useFadeEffect } from './fadeEffect'
+import { useSlideEffect } from './slideEffect'
+
+export function useAnimatedEffects([values, { open = true, onClose, lazy = false, unmountOnClose = false, ...props }]) {
+  const unmountTimerRef = React.useRef()
+  const [totalDuration, setTotalDuration] = React.useState(0)
+  const [hasOpened, setHasOpened] = React.useState(open || !lazy)
+  const [render, setRender] = React.useState(open || !lazy)
+
+  const useRegisterEffect = (effect) => {
+    React.useEffect(() => {
+      if (!effect?.duration) return
+      setTotalDuration((v) => (v > effect.duration ? v : effect.duration))
+    }, [])
+  }
+
+  const translate = useSharedValue(0)
+
+  React.useEffect(() => {
+    if (open) {
+      clearTimeout(unmountTimerRef?.current)
+      setHasOpened(true)
+      setRender(true)
+    } else if (unmountOnClose) {
+      unmountTimerRef.current = setTimeout(() => setRender(false), totalDuration)
+    }
+  }, [open])
+
+  return pipe(
+    useFadeEffect, //
+    useSlideEffect
+  )([
+    {
+      ...values,
+      animatedStyles: [],
+      useRegisterEffect,
+      useAddTransition: () => {},
+      open,
+      onClose,
+      lazy,
+      unmountOnClose,
+      hasOpened,
+      setHasOpened,
+      render,
+      setRender,
+    },
+    { ...props, animatedStyles: [] },
+  ])
+}

package/src/modifiers/animations/animatedEffects.web.js

@@ -0,0 +1,3 @@
+import { useAnimatedEffect as useAnimatedEffectNative } from './animatedEffects.native'
+
+export const useAnimatedEffects = useAnimatedEffectNative

package/src/modifiers/animations/fadeEffect.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 300 }
+
+export function useFadeEffect([values, { fade, ...props }]) {
+  if (fade === true) fade = DEFAULT_EFFECT
+  if (!!fade) fade = { ...DEFAULT_EFFECT, ...fade }
+  const { duration } = fade || {}
+  const { open, useRegisterEffect, useAddTransition } = values
+  const [opacity, setOpacity] = React.useState(0)
+
+  useRegisterEffect(fade)
+  useAddTransition(fade, `opacity ${duration}ms ease-in-out`)
+
+  React.useEffect(() => {
+    if (!fade) return
+
+    if (open) {
+      // setOpacity(0)
+
+      requestAnimationFrame(() => {
+        setOpacity(1)
+      })
+    } else {
+      setOpacity(0)
+    }
+  }, [open])
+
+  if (!fade) return [values, props]
+
+  const style = { opacity }
+
+  return [
+    values,
+    {
+      ...props,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/animations/fadeEffect.native.js

@@ -0,0 +1,33 @@
+import { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated'
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 300 }
+
+export function useFadeEffect([values, { fade, ...props }]) {
+  if (fade === true) fade = DEFAULT_EFFECT
+  if (!!fade) fade = { ...DEFAULT_EFFECT, ...fade }
+  const { duration } = fade || {}
+  const { open, useRegisterEffect } = values
+  const opacity = useSharedValue(0)
+
+  useRegisterEffect(fade)
+
+  React.useEffect(() => {
+    if (!fade) return
+
+    if (open) {
+      opacity.value = 0
+      opacity.value = withTiming(1, { duration })
+    } else {
+      opacity.value = withTiming(0, { duration })
+    }
+  }, [open])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return { opacity: opacity.value }
+  })
+
+  if (!fade) return [values, props]
+
+  return [values, { ...props, animatedStyles: [...props.animatedStyles, animatedStyle] }]
+}

package/src/modifiers/animations/slideEffect.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 400, from: 'top' }
+
+export function useSlideEffect([values, { slide, ...props }]) {
+  if (slide === true) slide = DEFAULT_EFFECT
+  if (!!slide) slide = { ...DEFAULT_EFFECT, ...slide }
+  const { duration, from, distance } = slide || {}
+  const { open, useRegisterEffect, useAddTransition } = values
+
+  const initialValue = React.useMemo(() => {
+    const w = window.innerWidth
+    const h = window.innerHeight
+
+    switch (from) {
+      case 'left':
+        return `translateX(-${distance || w}px)`
+      case 'right':
+        return `translateX(${distance || w}px)`
+      case 'top':
+        return `translateY(-${distance || h}px)`
+      case 'bottom':
+        return `translateY(${distance || h}px)`
+      default:
+        return `translateX(-${distance || w}px)`
+    }
+  }, [distance, from])
+
+  const [transform, setTransform] = React.useState(initialValue)
+
+  useRegisterEffect(slide)
+  useAddTransition(slide, `transform ${duration}ms ease-in-out`)
+
+  React.useLayoutEffect(() => {
+    if (!slide) return
+    if (open) {
+      setTransform(initialValue)
+
+      requestAnimationFrame(() => {
+        setTransform('translateY(0)')
+      })
+    } else {
+      setTransform(initialValue)
+    }
+  }, [open])
+
+  if (!slide) return [values, props]
+
+  const style = { transform }
+
+  return [
+    values,
+    {
+      ...props,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/animations/slideEffect.native.js

@@ -0,0 +1,53 @@
+import { Dimensions } from 'react-native'
+import { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated'
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 400, from: 'top' }
+const { width, height } = Dimensions.get('window')
+
+export function useSlideEffect([values, { slide, ...props }]) {
+  if (slide === true) slide = DEFAULT_EFFECT
+  if (!!slide) slide = { ...DEFAULT_EFFECT, ...slide }
+  const { duration, from, distance } = slide || {}
+  const { open, useRegisterEffect } = values
+
+  useRegisterEffect(slide)
+
+  const initialValue = React.useMemo(() => {
+    switch (from) {
+      case 'left':
+        return -(distance || width)
+      case 'right':
+        return distance || width
+      case 'top':
+        return -(distance || height)
+      case 'bottom':
+        return distance || height
+      default:
+        return -(distance || width)
+    }
+  }, [from, distance, width, height])
+
+  const translate = useSharedValue(open ? 0 : initialValue)
+
+  React.useEffect(() => {
+    if (!slide) return
+
+    if (open) {
+      translate.value = initialValue
+      translate.value = withTiming(0, { duration })
+    } else {
+      translate.value = withTiming(initialValue, { duration })
+    }
+  }, [open])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const transform =
+      from === 'left' || from === 'right' ? [{ translateX: translate.value }] : [{ translateY: translate.value }]
+    return { transform }
+  })
+
+  if (!slide) return [values, props]
+
+  return [values, { ...props, animatedStyles: [...props.animatedStyles, animatedStyle] }]
+}

package/src/modifiers/applyStyles.js

@@ -0,0 +1,7 @@
+import { curry } from 'ramda'
+
+import { clearProps } from './_helpers'
+
+export const useApplyStyles = curry((customStyle, [values, { style, ...props }]) => {
+  return [values, { ...props, style: { ...style, ...clearProps(customStyle) } }]
+})

package/src/modifiers/background.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useBackgroundModifier(props) {
+export function useBackgroundModifier([values, props]) {
   const getColor = useGetColor()
   let { bg, background, backgroundColor, ...restProps } = props
 
@@ -9,11 +9,14 @@ export function useBackgroundModifier(props) {
 
   const style = clearProps({ backgroundColor })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/border.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetColor, useGetRadius } from '../theme/ThemeHandler'
 
-export function useBorderModifier(props) {
+export function useBorderModifier([values, props]) {
   const getRadius = useGetRadius()
   const getColor = useGetColor()
   let {
@@ -16,23 +16,44 @@ export function useBorderModifier(props) {
     borderRadiusR,
     borderRadius,
     borderStyle,
-    borderWidth,
+    borderT,
+    borderB,
+    borderL,
+    borderR,
+    border,
     borderColor,
     brColor,
     round,
     ...restProps
   } = props
 
-  if (round) br = 1000
+  if (!!round) br = 1000
+
   const borderTopRightRadius = getRadius(brT ?? borderRadiusT ?? brR ?? borderRadiusR ?? borderRadius ?? br)
   const borderTopLeftRadius = getRadius(brT ?? borderRadiusT ?? brL ?? borderRadiusL ?? borderRadius ?? br)
   const borderBottomRightRadius = getRadius(brB ?? borderRadiusB ?? brR ?? borderRadiusR ?? borderRadius ?? br)
   const borderBottomLeftRadius = getRadius(brB ?? borderRadiusB ?? brL ?? borderRadiusL ?? borderRadius ?? br)
 
-  if (!!borderColor || brColor) borderColor = getColor(brColor ?? borderColor)
-
   borderStyle = borderStyle
-  if (!!borderWidth) borderStyle = 'solid'
+
+  if (border === true) border = 1
+  if (borderT === true) borderT = 1
+  if (borderR === true) borderR = 1
+  if (borderB === true) borderB = 1
+  if (borderL === true) borderL = 1
+  const borderTopWidth = borderT || border || 0
+  const borderBottomWidth = borderB || border || 0
+  const borderLeftWidth = borderL || border || 0
+  const borderRightWidth = borderR || border || 0
+  const hasBorder = borderTopWidth || borderBottomWidth || borderLeftWidth || borderRightWidth
+
+  if (!!hasBorder) {
+    borderStyle = 'solid'
+    if (!borderColor && !brColor) brColor = 'divider'
+  }
+
+  if (!!borderColor || !!brColor) borderColor = getColor(borderColor ?? brColor)
+
   const style = clearProps({
     borderStyle,
     borderTopRightRadius,
@@ -40,14 +61,20 @@ export function useBorderModifier(props) {
     borderBottomRightRadius,
     borderBottomLeftRadius,
     borderColor,
-    borderWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/colorConverter.js

@@ -0,0 +1,13 @@
+import { getColorFromProps } from '../theme/helpers/colorScale'
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useColorConverter(defaultValue) {
+  const getColor = useGetColor()
+
+  return ([values, props]) => {
+    const [colorCode, formattedProps] = getColorFromProps(props, defaultValue)
+    const color = getColor(colorCode)
+
+    return [{ ...values, color, colorCode }, formattedProps]
+  }
+}

package/src/modifiers/default.js

@@ -0,0 +1,9 @@
+import { mergeDeepRight, is } from 'ramda'
+
+export function useDefaultModifier(defaultPropsOrFunc) {
+  return ([values, props]) => {
+    const defaultProps =
+      (is(Function, defaultPropsOrFunc) ? defaultPropsOrFunc([values, props]) : defaultPropsOrFunc) || {}
+    return [values, mergeDeepRight(defaultProps, props)]
+  }
+}

package/src/modifiers/display.js

@@ -0,0 +1,22 @@
+import { clearProps } from './_helpers'
+
+export function useDisplayModifier([values, props]) {
+  let { cursor, opacity, hidden, display, inline, block, ...restProps } = props
+
+  if (!!hidden) display = 'hidden'
+  if (!!inline) display = 'inline'
+  if (!!block) display = 'block'
+
+  const style = clearProps({ display, opacity, cursor })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/flex.js

@@ -1,17 +1,20 @@
 import { clearProps } from './_helpers'
 
-export function useFlexModifier(props) {
+export function useFlexModifier([values, props]) {
   let { flex, ...restProps } = props
 
   if (flex === true) flex = 1
 
-  const style = clearProps({ flex })
+  const style = clearProps({ flex, minWidth: 0 })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/flexWrapper.js

@@ -1,27 +1,68 @@
 import { clearProps } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
-export function useFlexWrapperModifier(props) {
+export function useFlexWrapperModifier([values, props]) {
   const getSpace = useGetSpace()
-  let { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap, ...restProps } = props
+  let {
+    justify,
+    align,
+    center,
+    centerV,
+    centerH,
+    toRight,
+    toBottom,
+    toLeft,
+    toTop,
+    direction,
+    row,
+    wrap,
+    gap,
+    noGap,
+    ...restProps
+  } = props
 
+  let flexDirection = direction || (row ? 'row' : 'column')
   let justifyContent = justify
   let alignItems = align
-  let flexDirection = direction || 'column'
   let flexWrap
+
   gap = getSpace(gap)
+  if (noGap) gap = undefined
+
+  const isRow = flexDirection === 'row'
+  const mainAxis = isRow ? 'horizontal' : 'vertical'
+  const crossAxis = isRow ? 'vertical' : 'horizontal'
 
   if (center) {
     justifyContent = 'center'
     alignItems = 'center'
   } else {
-    if (centerV) justifyContent = 'center'
-    if (toBottom) justifyContent = 'flex-end'
-    if (centerH) alignItems = 'center'
-    if (toRight) alignItems = 'flex-end'
+    if (centerH) {
+      if (mainAxis === 'horizontal') justifyContent = 'center'
+      else alignItems = 'center'
+    }
+    if (centerV) {
+      if (mainAxis === 'vertical') justifyContent = 'center'
+      else alignItems = 'center'
+    }
+    if (toRight) {
+      if (mainAxis === 'horizontal') justifyContent = 'flex-end'
+      else alignItems = 'flex-end'
+    }
+    if (toLeft) {
+      if (mainAxis === 'horizontal') justifyContent = 'flex-start'
+      else alignItems = 'flex-start'
+    }
+    if (toBottom) {
+      if (mainAxis === 'vertical') justifyContent = 'flex-end'
+      else alignItems = 'flex-end'
+    }
+    if (toTop) {
+      if (mainAxis === 'vertical') justifyContent = 'flex-start'
+      else alignItems = 'flex-start'
+    }
   }
 
-  if (row) flexDirection = 'row'
   if (wrap) flexWrap = 'wrap'
 
   const style = clearProps({
@@ -33,11 +74,14 @@ export function useFlexWrapperModifier(props) {
     gap,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/fullColor.js

@@ -0,0 +1,29 @@
+import tinycolor from 'tinycolor2'
+
+import { getContrastColor } from '../theme/helpers/contrastColor'
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useFullColorModifier([{ color, ...values }, { outline, fill, ...props }]) {
+  const getColor = useGetColor()
+
+  let bg = color
+  const bgObj = tinycolor(getColor(bg))
+  let borderColor = color
+  let fontColor = 'text'
+
+  if (!!outline && fill !== true) {
+    bg = 'transparent'
+    fontColor = color
+  } else {
+    fontColor = getContrastColor(bgObj, [getColor('text'), getColor('overlayBG')])
+  }
+
+  return [
+    { ...values, fontColor },
+    {
+      ...props,
+      bg,
+      borderColor,
+    },
+  ]
+}

package/src/modifiers/grid.js

@@ -0,0 +1,27 @@
+import { useGetSpace } from '../theme/ThemeHandler'
+
+export function useGridModifier([values, props]) {
+  const getSpace = useGetSpace()
+
+  let { gap, gapV, gapH, ...restProps } = props
+
+  gap = getSpace(gap)
+  gapV = getSpace(gapV)
+  gapH = getSpace(gapH)
+  let childPaddingV, childPaddingH
+  if (gap || gapV) childPaddingV = (gapV ?? gap) / 2
+  if (gap || gapH) childPaddingH = (gapH ?? gap) / 2
+
+  const childPaddingProps = { paddingV: childPaddingV, paddingH: childPaddingH }
+
+  return [
+    { ...values, gap, childPaddingProps },
+    {
+      row: true,
+      wrap: true,
+      marginV: -childPaddingV,
+      marginH: -childPaddingH,
+      ...restProps,
+    },
+  ]
+}

package/src/modifiers/logger.js

@@ -0,0 +1,6 @@
+export function useLoggerModifier(key) {
+  return ([values, props]) => {
+    console.log(key, values, props)
+    return [values, props]
+  }
+}