@neko-os/ui 0.0.10 → 0.0.12

package/dist/abstractions/AnimatedView.native.js

@@ -1 +1 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import{map,prop}from'ramda';import Animated,{useAnimatedStyle}from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/AnimatedView.native.js";import Animated from'react-native-reanimated';import{jsx as _jsx}from"react/jsx-runtime";export function AbsAnimatedView(_ref){var children=_ref.children,style=_ref.style,_ref$animatedStyles=_ref.animatedStyles,animatedStyles=_ref$animatedStyles===void 0?[]:_ref$animatedStyles;return _jsx(Animated.View,{style:[style].concat(_toConsumableArray(animatedStyles)),children:children});}

package/dist/components/actions/Button.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Button.js";var _excluded=["label","icon","textProps","iconProps","gap","invert","size"];import{pipe}from'ramda';import{AbsTouchableOpacity}from"../../abstractions/TouchableOpacity";import{IconLabel}from"../presentation/IconLabel";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useColorConverter}from"../../modifiers/colorConverter";import{useCursorModifier}from"../../modifiers/cursor";import{useDefaultModifier}from"../../modifiers/default";import{useDisplayModifier}from"../../modifiers/display";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useFullColorModifier}from"../../modifiers/fullColor";import{useHoverConverter}from"../../modifiers/hover";import{useMarginModifier}from"../../modifiers/margin";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useSizeModifier}from"../../modifiers/size";import{useStateModifier}from"../../modifiers/state";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,1),sizeCode=_ref2[0].sizeCode;return{paddingH:sizeCode,paddingV:2,height:sizeCode,br:sizeCode,border:1,center:true,pointer:true,hover:{opacity:0.7}};};export function Button(rootProps){var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Button'),useDefaultModifier(DEFAULT_PROPS),useHoverConverter,useCursorModifier,useFullColorModifier,useDisplayModifier,useStateModifier,useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexModifier,useFlexWrapperModifier,useBackgroundModifier,useBorderModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],loading=_pipe2$.loading,fontColor=_pipe2$.fontColor,sizeCode=_pipe2$.sizeCode,formattedProps=_pipe2[1];var label=formattedProps.label,icon=formattedProps.icon,textProps=formattedProps.textProps,iconProps=formattedProps.iconProps,gap=formattedProps.gap,invert=formattedProps.invert,size=formattedProps.size,props=_objectWithoutProperties(formattedProps,_excluded);return _jsx(AbsTouchableOpacity,Object.assign({className:"neko-button neko-wave-click-effect",type:"button"},props,{children:_jsx(IconLabel,{center:true,color:fontColor,size:sizeCode,label:label,icon:icon,gap:gap,invert:invert,textProps:Object.assign({strong:true},textProps),iconProps:iconProps,loading:loading})}));}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Button.js";var _excluded=["children"],_excluded2=["label","icon","textProps","iconProps","gap","invert","size"];import{pipe}from'ramda';import{AbsTouchableOpacity}from"../../abstractions/TouchableOpacity";import{IconLabel}from"../presentation/IconLabel";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useColorConverter}from"../../modifiers/colorConverter";import{useCursorModifier}from"../../modifiers/cursor";import{useDefaultModifier}from"../../modifiers/default";import{useDisplayModifier}from"../../modifiers/display";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useFullColorModifier}from"../../modifiers/fullColor";import{useHoverConverter}from"../../modifiers/hover";import{useMarginModifier}from"../../modifiers/margin";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useSizeModifier}from"../../modifiers/size";import{useStateModifier}from"../../modifiers/state";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,1),sizeCode=_ref2[0].sizeCode;return{paddingH:sizeCode,paddingV:2,height:sizeCode,br:sizeCode,border:1,center:true,pointer:true,hover:{opacity:0.7}};};export function Button(_ref3){var children=_ref3.children,rootProps=_objectWithoutProperties(_ref3,_excluded);var _pipe=pipe(useColorConverter('primary'),useSizeConverter('elementHeights','md'),useThemeComponentModifier('Button'),useDefaultModifier(DEFAULT_PROPS),useHoverConverter,useCursorModifier,useFullColorModifier,useDisplayModifier,useStateModifier,useSizeModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexModifier,useFlexWrapperModifier,useBackgroundModifier,useBorderModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],loading=_pipe2$.loading,fontColor=_pipe2$.fontColor,sizeCode=_pipe2$.sizeCode,formattedProps=_pipe2[1];var label=formattedProps.label,icon=formattedProps.icon,textProps=formattedProps.textProps,iconProps=formattedProps.iconProps,gap=formattedProps.gap,invert=formattedProps.invert,size=formattedProps.size,props=_objectWithoutProperties(formattedProps,_excluded2);return _jsx(AbsTouchableOpacity,Object.assign({className:"neko-button neko-wave-click-effect",type:"button"},props,{children:children||_jsx(IconLabel,{center:true,color:fontColor,size:sizeCode,label:label,icon:icon,gap:gap,invert:invert,textProps:Object.assign({strong:true},textProps),iconProps:iconProps,loading:loading})}));}

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

@@ -1 +1 @@
-import{useAnimatedEffect as useAnimatedEffectNative}from"./animatedEffects.native";export var useAnimatedEffects=useAnimatedEffectNative;
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["open","onClose","lazy","unmountOnClose"];import{pipe}from'ramda';import{useSharedValue}from'react-native-reanimated';import React from'react';import{useFadeEffect}from"./fadeEffect";import{useScaleEffect}from"./scaleEffect";import{useSlideEffect}from"./slideEffect";export function useAnimatedEffects(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],_ref2$=_ref2[1],_ref2$$open=_ref2$.open,open=_ref2$$open===void 0?true:_ref2$$open,onClose=_ref2$.onClose,_ref2$$lazy=_ref2$.lazy,lazy=_ref2$$lazy===void 0?false:_ref2$$lazy,_ref2$$unmountOnClose=_ref2$.unmountOnClose,unmountOnClose=_ref2$$unmountOnClose===void 0?false:_ref2$$unmountOnClose,props=_objectWithoutProperties(_ref2$,_excluded);var unmountTimerRef=React.useRef();var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),totalDuration=_React$useState2[0],setTotalDuration=_React$useState2[1];var _React$useState3=React.useState(open||!lazy),_React$useState4=_slicedToArray(_React$useState3,2),hasOpened=_React$useState4[0],setHasOpened=_React$useState4[1];var _React$useState5=React.useState(open||!lazy),_React$useState6=_slicedToArray(_React$useState5,2),render=_React$useState6[0],setRender=_React$useState6[1];var useRegisterEffect=function useRegisterEffect(effect){React.useEffect(function(){if(!(effect!=null&&effect.duration))return;setTotalDuration(function(v){return v>effect.duration?v:effect.duration;});},[]);};var translate=useSharedValue(0);React.useEffect(function(){if(open){clearTimeout(unmountTimerRef==null?void 0:unmountTimerRef.current);setHasOpened(true);setRender(true);}else if(unmountOnClose){unmountTimerRef.current=setTimeout(function(){return setRender(false);},totalDuration);}},[open]);return pipe(useFadeEffect,useSlideEffect,useScaleEffect)([Object.assign({},values,{animatedStyles:[],useRegisterEffect:useRegisterEffect,useAddTransition:function useAddTransition(){},open:open,onClose:onClose,lazy:lazy,unmountOnClose:unmountOnClose,hasOpened:hasOpened,setHasOpened:setHasOpened,render:render,setRender:setRender}),Object.assign({},props,{animatedStyles:[]})]);}

package/dist/modifiers/fullColor.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color"],_excluded2=["outline","contrastTolerance","fill"];import tinycolor from'tinycolor2';import{getContrastColor}from"../theme/helpers/contrastColor";import{useGetColor}from"../theme/ThemeHandler";export function useFullColorModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,values=_objectWithoutProperties(_ref2$,_excluded),_ref2$2=_ref2[1],outline=_ref2$2.outline,contrastTolerance=_ref2$2.contrastTolerance,fill=_ref2$2.fill,props=_objectWithoutProperties(_ref2$2,_excluded2);var getColor=useGetColor();var bg=color;var bgObj=tinycolor(getColor(bg));var borderColor=color;var fontColor='text';if(!!outline&&fill!==true){bg='transparent';fontColor=color;}else{fontColor=getContrastColor(bgObj,[getColor('overlayBG'),getColor('text')],contrastTolerance);}return[Object.assign({},values,{fontColor:fontColor}),Object.assign({},props,{bg:bg,borderColor:borderColor})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color"],_excluded2=["outline","contrastTolerance","fill","bg"];import tinycolor from'tinycolor2';import{getContrastColor}from"../theme/helpers/contrastColor";import{useGetColor}from"../theme/ThemeHandler";export function useFullColorModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,values=_objectWithoutProperties(_ref2$,_excluded),_ref2$2=_ref2[1],outline=_ref2$2.outline,contrastTolerance=_ref2$2.contrastTolerance,fill=_ref2$2.fill,forcedBG=_ref2$2.bg,props=_objectWithoutProperties(_ref2$2,_excluded2);var getColor=useGetColor();var bg=color;var bgObj=tinycolor(getColor(bg));var borderColor=color;var fontColor='text';if(!!outline&&fill!==true){bg='transparent';fontColor=color;}else{fontColor=getContrastColor(bgObj,[getColor('overlayBG'),getColor('text')],contrastTolerance);}return[Object.assign({},values,{fontColor:fontColor}),Object.assign({},props,{bg:forcedBG||bg,borderColor:borderColor})];}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/abstractions/AnimatedView.native.js

@@ -1,5 +1,4 @@
-import { map, prop } from 'ramda'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import Animated from 'react-native-reanimated'
 
 export function AbsAnimatedView({ children, style, animatedStyles = [] }) {
   return <Animated.View style={[style, ...animatedStyles]}>{children}</Animated.View>

package/src/components/actions/Button.js

@@ -33,7 +33,7 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   },
 })
 
-export function Button(rootProps) {
+export function Button({ children, ...rootProps }) {
   const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
     useColorConverter('primary'),
     useSizeConverter('elementHeights', 'md'),
@@ -58,18 +58,20 @@ export function Button(rootProps) {
 
   return (
     <AbsTouchableOpacity className="neko-button neko-wave-click-effect" type="button" {...props}>
-      <IconLabel
-        center
-        color={fontColor}
-        size={sizeCode}
-        label={label}
-        icon={icon}
-        gap={gap}
-        invert={invert}
-        textProps={{ strong: true, ...textProps }}
-        iconProps={iconProps}
-        loading={loading}
-      />
+      {children || (
+        <IconLabel
+          center
+          color={fontColor}
+          size={sizeCode}
+          label={label}
+          icon={icon}
+          gap={gap}
+          invert={invert}
+          textProps={{ strong: true, ...textProps }}
+          iconProps={iconProps}
+          loading={loading}
+        />
+      )}
     </AbsTouchableOpacity>
   )
 }

package/src/modifiers/animations/animatedEffects.js

@@ -24,7 +24,6 @@ export function useAnimatedEffects([values, { open, onClose, lazy = false, unmou
   const useAddTransition = (effect, transition) => {
     React.useEffect(() => {
       if (!effect?.duration) return
-
       setTransitions((v) => [...v, transition])
     }, [])
   }

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

@@ -1,3 +1,55 @@
-import { useAnimatedEffect as useAnimatedEffectNative } from './animatedEffects.native'
+import { pipe } from 'ramda'
+import { useSharedValue } from 'react-native-reanimated'
+import React from 'react'
 
-export const useAnimatedEffects = useAnimatedEffectNative
+import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
+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,
+    useScaleEffect
+  )([
+    {
+      ...values,
+      animatedStyles: [],
+      useRegisterEffect,
+      useAddTransition: () => {},
+      open,
+      onClose,
+      lazy,
+      unmountOnClose,
+      hasOpened,
+      setHasOpened,
+      render,
+      setRender,
+    },
+    { ...props, animatedStyles: [] },
+  ])
+}

package/src/modifiers/fullColor.js

@@ -3,7 +3,10 @@ import tinycolor from 'tinycolor2'
 import { getContrastColor } from '../theme/helpers/contrastColor'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useFullColorModifier([{ color, ...values }, { outline, contrastTolerance, fill, ...props }]) {
+export function useFullColorModifier([
+  { color, ...values },
+  { outline, contrastTolerance, fill, bg: forcedBG, ...props },
+]) {
   const getColor = useGetColor()
 
   let bg = color
@@ -22,7 +25,7 @@ export function useFullColorModifier([{ color, ...values }, { outline, contrastT
     { ...values, fontColor },
     {
       ...props,
-      bg,
+      bg: forcedBG || bg,
       borderColor,
     },
   ]