@neko-os/ui 0.0.7 → 0.0.8

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

@@ -3,6 +3,7 @@ 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([values, { open = true, onClose, lazy = false, unmountOnClose = false, ...props }]) {
@@ -32,7 +33,8 @@ export function useAnimatedEffects([values, { open = true, onClose, lazy = false
 
   return pipe(
     useFadeEffect, //
-    useSlideEffect
+    useSlideEffect,
+    useScaleEffect
   )([
     {
       ...values,

package/src/modifiers/animations/fadeEffect.js

@@ -16,10 +16,12 @@ export function useFadeEffect([values, { fade, ...props }]) {
     if (!fade) return
 
     if (open) {
-      // setOpacity(0)
+      setOpacity(0)
 
       requestAnimationFrame(() => {
-        setOpacity(1)
+        requestAnimationFrame(() => {
+          setOpacity(1)
+        })
       })
     } else {
       setOpacity(0)

package/src/modifiers/animations/scaleEffect.js

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

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

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

package/src/modifiers/animations/slideEffect.js

@@ -37,7 +37,9 @@ export function useSlideEffect([values, { slide, ...props }]) {
       setTransform(initialValue)
 
       requestAnimationFrame(() => {
-        setTransform('translateY(0)')
+        requestAnimationFrame(() => {
+          setTransform('translateY(0)')
+        })
       })
     } else {
       setTransform(initialValue)

package/src/modifiers/background.js

@@ -1,16 +1,28 @@
+import { is } from 'ramda'
+
 import { clearProps } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
 export function useBackgroundModifier([values, props]) {
   const getColor = useGetColor()
-  let { bg, background, backgroundColor, ...restProps } = props
+  let { bg, colors, background, backgroundColor, ...restProps } = props
+  let gradientColors = []
+
+  if (is(Array, bg) || !!colors?.length) {
+    colors = colors || bg || []
+    gradientColors = colors.map(getColor)
+    const angle = restProps.angle || 45
+    background = `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`
+  } else {
+    backgroundColor = getColor(bg ?? background ?? backgroundColor)
+  }
 
-  backgroundColor = getColor(bg ?? background ?? backgroundColor)
+  const pointerEvents = props.pointerEvents
 
-  const style = clearProps({ backgroundColor })
+  const style = clearProps({ background, backgroundColor, pointerEvents })
 
   return [
-    values,
+    { gradientColors, ...values },
     {
       ...restProps,
       style: {

package/src/modifiers/cursor.js

@@ -0,0 +1,21 @@
+import { clearProps } from './_helpers'
+
+export function useCursorModifier([values, props]) {
+  let { pointer, cursor, move, ...restProps } = props
+
+  if (pointer === true) cursor = 'pointer'
+  if (move === true) cursor = 'move'
+
+  const style = clearProps({ cursor })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/display.js

@@ -1,13 +1,13 @@
 import { clearProps } from './_helpers'
 
 export function useDisplayModifier([values, props]) {
-  let { cursor, opacity, hidden, display, inline, block, ...restProps } = props
+  let { 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 })
+  const style = clearProps({ display, opacity })
 
   return [
     values,

package/src/modifiers/hover.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+export function useHoverConverter([values, props]) {
+  const [isHover, setIsHover] = React.useState(false)
+  let { hover, onMouseEnter, onMouseLeave, ...restProps } = props
+
+  const handleMouseEnter = () => {
+    setIsHover(true)
+    onMouseEnter?.()
+  }
+
+  const handleMouseLeave = () => {
+    setIsHover(false)
+    onMouseLeave?.()
+  }
+
+  if (!isHover) hover = {}
+
+  return [
+    { ...values, isHover },
+    {
+      ...restProps,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...hover,
+    },
+  ]
+}

package/src/modifiers/position.js

@@ -2,14 +2,35 @@ import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 
 export function usePositionModifier([values, props]) {
-  let { position, absolute, relative, fixed, sticky, top, bottom, left, right, zIndex, ...restProps } = props
+  let {
+    position,
+    absolute,
+    absoluteFill,
+    fixedFill,
+    relative,
+    fixed,
+    sticky,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex,
+    ...restProps
+  } = props
 
   if (!zIndex && !!absolute) zIndex = 10
-  if (absolute) position = 'absolute'
+  if (absolute || absoluteFill) position = 'absolute'
   if (relative) position = 'relative'
-  if (fixed) position = 'fixed'
+  if (fixed || fixedFill) position = 'fixed'
   if (sticky) position = 'sticky'
 
+  if (absoluteFill || fixedFill) {
+    top = 0
+    bottom = 0
+    left = 0
+    right = 0
+  }
+
   if (Platform.OS !== 'web' && ['fixed', 'sticky'].includes(position)) {
     position = 'absolute'
   }

package/src/modifiers/size.js

@@ -1,3 +1,4 @@
+import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 import { useGetElementHeight } from '../theme/ThemeHandler'
 
@@ -38,7 +39,7 @@ export function useSizeModifier([values, props]) {
   if (span) width = (span / 24) * 100 + '%'
 
   if (fullWidth || fullW) width = '100%'
-  if (fullHeight || fullH) height = '100%'
+  if ((fullHeight || fullH) && Platform.OS === 'web') height = '100%'
 
   let aspectRatio = ratio
   if (!!square) aspectRatio = 1

package/src/modifiers/state.js

@@ -3,7 +3,7 @@ import { clearProps } from './_helpers'
 export function useStateModifier([values, props]) {
   let { disabled, loading, onClick, onPress, onChange, ...restProps } = props
 
-  let cursor = props.style
+  let cursor = undefined
   let opacity = props.opacity
 
   if (!!disabled) {

package/src/responsive/responsiveHooks.js

@@ -1,6 +1,7 @@
 import { is } from 'ramda'
 import React from 'react'
 
+import { Platform } from '../abstractions/Platform'
 import { useBreakpoints } from '../theme/ThemeHandler'
 import { useResponsive } from '../responsive/ResponsiveHandler'
 
@@ -10,6 +11,12 @@ export function useGetResponsiveValue() {
 
   return React.useCallback(
     (value) => {
+      const isNative = value?.native !== undefined && Platform.OS !== 'web'
+      if (isNative) return value?.native
+
+      const isWeb = value?.web !== undefined && Platform.OS === 'web'
+      if (isWeb) return value?.web
+
       const isObj = is(Object, value)
 
       if (!isObj) return value

package/src/theme/default/blackTheme.js

@@ -0,0 +1,32 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#818DF9',
+    text: '#FFFFFF',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
+
+    bg: '#0f0f0f',
+    overlayBG: '#000000',
+    backdrop: '#1f1f1f',
+    shadow: 'rgba(216, 210, 203, 0.1)',
+    divider: '#383E44',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#9E9E9E',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1',
+  },
+})

package/src/theme/default/cyberpunkTheme.js

@@ -11,6 +11,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#0A0A0F',
     overlayBG: '#14141F',
+    backdrop: '#0A0A0F',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',
 

package/src/theme/default/darkTheme.js

@@ -11,6 +11,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#383E44',
     overlayBG: '#272D34',
+    backdrop: '#383E44',
     shadow: 'rgba(216, 210, 203, 0.1)',
     divider: '#383E44',
 

package/src/theme/default/deepWoodsTheme.js

@@ -11,6 +11,7 @@ export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#0D1B14',
     overlayBG: '#16281F',
+    backdrop: '#0D1B14',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',
 

package/src/theme/default/forestTheme.js

@@ -11,6 +11,7 @@ export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#E9F5EC',
     overlayBG: '#FFFFFF',
+    backdrop: '#E9F5EC',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: 'rgba(0,0,0, 0.1)',
 

package/src/theme/default/hackerTheme.js

@@ -12,6 +12,7 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#000000',
     overlayBG: '#0A0A0A',
+    backdrop: '#000000',
     shadow: 'rgba(0, 255, 65, 0.2)',
     divider: 'rgba(0,255,65, 0.3)',
 

package/src/theme/default/lightTheme.js

@@ -11,6 +11,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#F4F5FE',
     overlayBG: '#FFFFFF',
+    backdrop: '#383E44',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: '#e0e0e0',
 

package/src/theme/default/midnightTheme.js

@@ -11,6 +11,7 @@ export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#0D0D0D',
     overlayBG: '#1A1A1A',
+    backdrop: '#0D0D0D',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',
 

package/src/theme/default/msdosTheme.js

@@ -12,6 +12,7 @@ export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#0000AA',
     overlayBG: '#000088',
+    backdrop: '#0000AA',
     shadow: 'rgba(0, 0, 0, 0.6)',
     divider: 'rgba(255,255,255,0.3)',
 

package/src/theme/default/oceanTheme.js

@@ -11,6 +11,7 @@ export const OCEAN_BREEZE_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#E6F7FF',
     overlayBG: '#FFFFFF',
+    backdrop: '#04364A',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: 'rgba(0,0,0, 0.1)',
 

package/src/theme/default/pastelTheme.js

@@ -11,8 +11,9 @@ export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#FFF7FA',
     overlayBG: '#FFFFFF',
+    backdrop: '#4B4453',
     shadow: 'rgba(39, 45, 52, 0.15)',
-    divider: 'rgba(255,255,255, 0.2)',
+    divider: '#f0f0f0',
 
     blue: '#A5B4FC',
     yellow: '#FDE68A',

package/src/theme/default/sunsetTheme.js

@@ -12,8 +12,9 @@ export const SUNSET_GLOW_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#FFF5E6',
     overlayBG: '#FFFFFF',
+    backdrop: '#331E0A',
     shadow: 'rgba(39, 45, 52, 0.15)',
-    divider: 'rgba(255,255,255, 0.2)',
+    divider: '#f0f0f0',
 
     blue: '#3B82F6',
     yellow: '#FBBF24',

package/src/theme/default/themes.js

@@ -1,5 +1,6 @@
 import { CYBERPUNK_DARK_THEME } from './cyberpunkTheme'
 import { DEEP_WOODS_DARK_THEME } from './deepWoodsTheme'
+import { DEFAULT_BLACK_THEME } from './blackTheme'
 import { DEFAULT_DARK_THEME } from './darkTheme'
 import { DEFAULT_LIGHT_THEME } from './lightTheme'
 import { DEFAULT_MATRIX_THEME } from './hackerTheme'
@@ -13,6 +14,7 @@ import { SUNSET_GLOW_THEME } from './sunsetTheme'
 export const DEFAULT_THEMES = {
   light: DEFAULT_LIGHT_THEME,
   dark: DEFAULT_DARK_THEME,
+  black: DEFAULT_BLACK_THEME,
   pastel: PASTEL_DREAM_THEME,
   midnight: MIDNIGHT_NEON_THEME,
   sunset: SUNSET_GLOW_THEME,

package/dist/components/calendar/DayPicker.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/DayPicker.js";var _excluded=["initialValue","value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import{Col}from"../structure/Col";import{Grid}from"../structure/Row";import{Icon}from"../presentation/Icon";import{Link}from"../actions/Link";import{Text}from"../text/Text";import{View}from"../structure/View";import{useCalendarDays}from"./_helpers/calendarDays";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DayPicker(_ref){var _this=this;var initialValue=_ref.initialValue,value=_ref.value,onChange=_ref.onChange,min=_ref.min,max=_ref.max,onCheckDisabled=_ref.onCheckDisabled,props=_objectWithoutProperties(_ref,_excluded);var _React$useState=React.useState(dayjs(initialValue)),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;var handleChange=function handleChange(v){setLocalValue(v);onChange==null?void 0:onChange(v);};var _React$useState3=React.useState(function(){return initialValue?dayjs(initialValue).startOf('month'):dayjs().startOf('month');}),_React$useState4=_slicedToArray(_React$useState3,2),currentMonth=_React$useState4[0],setCurrentMonth=_React$useState4[1];var prevMonth=function prevMonth(){return setCurrentMonth(function(m){return m.subtract(1,'month');});};var nextMonth=function nextMonth(){return setCurrentMonth(function(m){return m.add(1,'month');});};var prevYear=function prevYear(){return setCurrentMonth(function(m){return m.subtract(1,'year');});};var nextYear=function nextYear(){return setCurrentMonth(function(m){return m.add(1,'year');});};var _useCalendarDays=useCalendarDays(currentMonth),weekdayLabels=_useCalendarDays.weekdayLabels,cells=_useCalendarDays.cells;return _jsxs(View,Object.assign({className:"neko-day-picker",width:250},props,{children:[_jsxs(View,{className:"neko-date-picker-header",row:true,centerV:true,gap:"xxs",height:30,children:[_jsx(Link,{onPress:prevYear,"aria-label":"Previous year",padding:"xxs",paddingL:0,children:_jsx(Icon,{name:"arrow-left-double-line"})}),_jsx(Link,{onPress:prevMonth,"aria-label":"Previous month",padding:"xxs",children:_jsx(Icon,{name:"arrow-left-s-line"})}),_jsx(Text,{center:true,flex:true,children:currentMonth.format('MMM YYYY')}),_jsx(Link,{onPress:nextMonth,"aria-label":"Next month",padding:"xxs",children:_jsx(Icon,{name:"arrow-right-s-line"})}),_jsx(Link,{onPress:nextYear,"aria-label":"Next year",padding:"xxs",paddingR:0,children:_jsx(Icon,{name:"arrow-right-double-line"})})]}),_jsx(View,{className:"neko-day-picker-week",row:true,center:true,gap:"sm",children:weekdayLabels.map(function(w){return _jsx(View,{flex:true,height:30,center:true,children:_jsx(Text,{center:true,sm:true,text4:true,children:w})},w);})}),_jsx(Grid,{className:"neko-day-picker-days",colSpan:24/7,gap:"sm",children:cells.map(function(day,i){var dateVal=currentMonth.date(day);var isActive=!!day&&dateVal.isSame(value,'day');var disabled=!!min&&dateVal.isBefore(min)||!!max&&dateVal.isAfter(max)||(onCheckDisabled==null?void 0:onCheckDisabled(dateVal));return _jsx(Col,{className:"day-cell",center:true,children:_jsx(Link,{ratio:1,width:30,center:true,br:"md",onPress:function onPress(){return!!day&&handleChange(dateVal);},bg:isActive&&'primary',disabled:disabled,children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:day||''})})},day?dateVal.format('YYYYMMDD'):i);})})]}));}

package/src/components/calendar/DayPicker.js

@@ -1,94 +0,0 @@
-import React from 'react'
-import dayjs from 'dayjs'
-
-import { Col } from '../structure/Col'
-import { Grid } from '../structure/Row'
-import { Icon } from '../presentation/Icon'
-import { Link } from '../actions/Link'
-import { Text } from '../text/Text'
-import { View } from '../structure/View'
-import { useCalendarDays } from './_helpers/calendarDays'
-
-export function DayPicker({ initialValue, value, onChange, min, max, onCheckDisabled, ...props }) {
-  const [localValue, setLocalValue] = React.useState(dayjs(initialValue))
-  value = value === undefined ? localValue : value
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
-
-  const [currentMonth, setCurrentMonth] = React.useState(() =>
-    initialValue ? dayjs(initialValue).startOf('month') : dayjs().startOf('month')
-  )
-
-  const prevMonth = () => setCurrentMonth((m) => m.subtract(1, 'month'))
-  const nextMonth = () => setCurrentMonth((m) => m.add(1, 'month'))
-
-  const prevYear = () => setCurrentMonth((m) => m.subtract(1, 'year'))
-  const nextYear = () => setCurrentMonth((m) => m.add(1, 'year'))
-
-  const { weekdayLabels, cells } = useCalendarDays(currentMonth)
-
-  return (
-    <View className="neko-day-picker" width={250} {...props}>
-      <View className="neko-date-picker-header" row centerV gap="xxs" height={30}>
-        <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
-          <Icon name="arrow-left-double-line" />
-        </Link>
-
-        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
-          <Icon name="arrow-left-s-line" />
-        </Link>
-
-        <Text center flex>
-          {currentMonth.format('MMM YYYY')}
-        </Text>
-
-        <Link onPress={nextMonth} aria-label="Next month" padding="xxs">
-          <Icon name="arrow-right-s-line" />
-        </Link>
-
-        <Link onPress={nextYear} aria-label="Next year" padding="xxs" paddingR={0}>
-          <Icon name="arrow-right-double-line" />
-        </Link>
-      </View>
-
-      <View className="neko-day-picker-week" row center gap="sm">
-        {weekdayLabels.map((w) => (
-          <View key={w} flex height={30} center>
-            <Text center sm text4>
-              {w}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
-        {cells.map((day, i) => {
-          const dateVal = currentMonth.date(day)
-          const isActive = !!day && dateVal.isSame(value, 'day')
-          const disabled =
-            (!!min && dateVal.isBefore(min)) || (!!max && dateVal.isAfter(max)) || onCheckDisabled?.(dateVal)
-
-          return (
-            <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center>
-              <Link
-                ratio={1}
-                width={30}
-                center
-                br="md"
-                onPress={() => !!day && handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text sm text2 center strong={isActive}>
-                  {day || ''}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
-    </View>
-  )
-}