@neko-os/ui 0.0.5 → 0.0.7

package/src/helpers/index.js

@@ -1,2 +1,3 @@
-export * from './responsive'
+export * from './debounce'
 export * from './string'
+export * from './random'

package/src/helpers/options.js

@@ -0,0 +1,65 @@
+import { is, propEq } from 'ramda'
+import React from 'react'
+
+function formatOptions(options) {
+  if (!options?.length) return options
+  return options.map((option) => {
+    if (is(String, option) || is(Number, option)) {
+      return { label: option, value: option }
+    }
+    return option
+  })
+}
+
+export function useOptions(optionsOrFetch, { limit } = {}) {
+  const isLazy = !is(Array, optionsOrFetch)
+  const [loading, setLoading] = React.useState(isLazy)
+  const [options, setOptions] = React.useState([])
+  const [page, setPage] = React.useState(1)
+  const [done, setDone] = React.useState(!isLazy)
+
+  const isFirstLoad = page === 1 && !options?.length && loading
+  const isRefetching = page === 1 && !!options.length && loading
+  const isFetchingMore = page > 1 && !!options.length && loading
+
+  const handleGetOptions = (page = 1) => {
+    setDone(false)
+    setPage(page)
+    setLoading(true)
+    optionsOrFetch(optionsOrFetch, page)
+      .then((result) => {
+        if (result?.length < limit) setDone(true)
+        let newOptions = []
+        if (page > 1) newOptions = options
+        setOptions([...newOptions, ...result])
+      })
+      .finally(() => setLoading(false))
+  }
+
+  const fetchMore = () => {
+    const newPage = (page || 1) + 1
+    handleGetOptions(newPage)
+  }
+
+  React.useEffect(() => {
+    if (isLazy) handleGetOptions()
+  }, [limit])
+
+  return {
+    options: formatOptions(isLazy ? options : optionsOrFetch),
+    handleGetOptions,
+    fetchMore,
+    done,
+    page,
+    done,
+    limit,
+    loading,
+    isFirstLoad,
+    isRefetching,
+    isFetchingMore,
+  }
+}
+
+export function findOptionByValue(options, value) {
+  return options.find(propEq('value', value))
+}

package/src/helpers/random.js

@@ -0,0 +1,5 @@
+export function genRandonId(length = 30) {
+  return Math.random()
+    .toString(36)
+    .substring(2, 2 + length)
+}

package/src/index.css

@@ -28,6 +28,7 @@ body {
 a,
 button {
   cursor: pointer;
+  text-decoration: none;
 }
 
 .neko-wave-click-effect {
@@ -71,3 +72,12 @@ button {
     transform: scale(1.3);
   }
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/index.js

@@ -1,6 +1,7 @@
 export * from './helpers'
 export * from './components'
 export * from './theme'
+export * from './responsive'
 export * from './NekoUI'
 
 export const version = 41

package/src/modifiers/alignConverter.js

@@ -0,0 +1,11 @@
+export function useAlignConverter(defaultValue) {
+  return ([values, props]) => {
+    let align = props.align
+    if (!align && props.center) align = 'center'
+    if (!align && props.toRight) align = 'right'
+    if (!align && props.toLeft) align = 'left'
+    if (!align) align = defaultValue
+
+    return [{ align }, { ...props, align }]
+  }
+}

package/src/modifiers/animation.js

@@ -0,0 +1,18 @@
+import { clearProps } from './_helpers'
+
+export function useAnimationModifier([values, props]) {
+  let { transition, ...restProps } = props
+
+  const style = clearProps({ transition })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

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/border.js

@@ -16,23 +16,44 @@ export function useBorderModifier([values, 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,7 +61,10 @@ export function useBorderModifier([values, props]) {
     borderBottomRightRadius,
     borderBottomLeftRadius,
     borderColor,
-    borderWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
   })
 
   return [

package/src/modifiers/display.js

@@ -1,13 +1,11 @@
 import { clearProps } from './_helpers'
 
 export function useDisplayModifier([values, props]) {
-  let { cursor, opacity, disabled, hidden, display, ...restProps } = props
+  let { cursor, opacity, hidden, display, inline, block, ...restProps } = props
 
   if (!!hidden) display = 'hidden'
-  if (!!disabled) {
-    opacity = opacity || 0.4
-    cursor = 'not-allowed'
-  }
+  if (!!inline) display = 'inline'
+  if (!!block) display = 'block'
 
   const style = clearProps({ display, opacity, cursor })
 

package/src/modifiers/flex.js

@@ -5,7 +5,7 @@ export function useFlexModifier([values, props]) {
 
   if (flex === true) flex = 1
 
-  const style = clearProps({ flex })
+  const style = clearProps({ flex, minWidth: 0 })
 
   return [
     values,

package/src/modifiers/flexWrapper.js

@@ -3,25 +3,66 @@ import { useGetSpace } from '../theme/ThemeHandler'
 
 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 (centerH) justifyContent = 'center'
-    if (toBottom) justifyContent = 'flex-end'
-    if (centerV) 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({

package/src/modifiers/fullColor.js

@@ -1,21 +1,21 @@
 import tinycolor from 'tinycolor2'
 
+import { getContrastColor } from '../theme/helpers/contrastColor'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useFullColorModifier([{ color, ...values }, { outline, ...props }]) {
+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'
-  let fontColorObj = tinycolor(getColor('text'))
 
-  if (!!outline) {
+  if (!!outline && fill !== true) {
     bg = 'transparent'
     fontColor = color
-  } else if (bgObj.isDark() === fontColorObj.isDark()) {
-    fontColor = 'overlayBG'
+  } else {
+    fontColor = getContrastColor(bgObj, [getColor('text'), getColor('overlayBG')])
   }
 
   return [

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,
+    },
+  ]
+}