@neko-os/ui 0.0.6 → 0.0.8

package/src/abstractions/ImageBackground.native.js

@@ -0,0 +1,27 @@
+import { pick } from 'ramda'
+import { ImageBackground as RNImageBackground } from 'react-native'
+
+import { AbsView } from './View'
+
+const allBorderRadiusProps = [
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderTopStartRadius',
+  'borderTopEndRadius',
+  'borderBottomStartRadius',
+  'borderBottomEndRadius',
+]
+
+export function AbsImageBackground({ src, source, resizeMode = 'cover', style, children, ...props }) {
+  if (!source && !!src) source = { uri: src }
+  const imageStyle = pick(allBorderRadiusProps, style)
+
+  return (
+    <RNImageBackground source={source} resizeMode={resizeMode} style={style} imageStyle={imageStyle} {...props}>
+      {children}
+    </RNImageBackground>
+  )
+}

package/src/abstractions/ImageBackground.web.js

@@ -0,0 +1,7 @@
+import { ImageBackground as RNImageBackground } from 'react-native'
+
+export function AbsImageBackground({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImageBackground source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Pressable.js

@@ -0,0 +1,4 @@
+export function AbsPressable({ link, onPress, onClick, ...props }) {
+  const Component = link ? 'a' : 'button'
+  return <Component onClick={onClick || onPress} {...props} />
+}

package/src/abstractions/Pressable.native.js

@@ -0,0 +1,3 @@
+import { Pressable as RNPressable } from 'react-native'
+
+export const AbsPressable = RNPressable

package/src/abstractions/Pressable.web.js

@@ -0,0 +1,3 @@
+import { Pressable as RNPressable } from 'react-native'
+
+export const AbsPressable = RNPressable

package/src/abstractions/ScrollView.js

@@ -0,0 +1,3 @@
+import { AbsView } from './View'
+
+export const AbsScrollView = AbsView

package/src/abstractions/ScrollView.native.js

@@ -0,0 +1,5 @@
+import { ScrollView } from 'react-native'
+
+export const AbsScrollView = ({ style: { height, width, ...style }, ...props }) => {
+  return <ScrollView height={height} width={width} {...props} contentContainerStyle={style} />
+}

package/src/abstractions/TextInput.js

@@ -1,3 +1,3 @@
-export function AbsTextInput(props) {
-  return <input type="text" {...props} />
+export function AbsTextInput({ onChange, ...props }) {
+  return <input type="text" onChange={(e) => onChange?.(e?.target?.value, e)} {...props} />
 }

package/src/components/actions/Button.js

@@ -5,11 +5,13 @@ 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'
@@ -25,6 +27,9 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   br: sizeCode,
   border: 1,
   center: true,
+  hover: {
+    opacity: 0.7,
+  },
 })
 
 export function Button(rootProps) {
@@ -33,6 +38,8 @@ export function Button(rootProps) {
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Button'),
     useDefaultModifier(DEFAULT_PROPS),
+    useHoverConverter,
+    useCursorModifier,
     useFullColorModifier,
     useDisplayModifier,
     useStateModifier,

package/src/components/actions/Dropdown.js

@@ -41,13 +41,14 @@ export function Dropdown({ items, ...rootProps }) {
         placement="bottomLeft"
         trigger={trigger}
         padding="xs"
+        useBottomDrawer={{ native: true, sm: true, md: true }}
         {...popoverProps}
         renderContent={({ onClose }) => {
           const handleChange = (...params) => {
             if (onChange) onChange(...params)
             onClose()
           }
-          return <Menu vertical items={items} gap={0} onChange={handleChange} linkPaddingH="xs" />
+          return <Menu vertical items={items} onChange={handleChange} linkPaddingH="xs" />
         }}
       >
         {children || (

package/src/components/actions/Link.js

@@ -7,9 +7,12 @@ import { useAnimationModifier } from '../../modifiers/animation'
 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 { useHoverConverter } from '../../modifiers/hover'
 import { useMarginModifier } from '../../modifiers/margin'
 import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
@@ -17,11 +20,22 @@ import { useSizeModifier } from '../../modifiers/size'
 import { useStateModifier } from '../../modifiers/state'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
+const DEFAULT_PROPS = {
+  pointer: true, //
+  hover: {
+    br: 'md',
+    bg: 'text4_op10',
+  },
+}
+
 export function Link({ label, children, href, target, ...rootProps }) {
-  const [{ loading, color: color }, props] = pipe(
-    useThemeComponentModifier('Link'),
+  const [{ isHover, loading, color: color }, props] = pipe(
+    useDefaultModifier(DEFAULT_PROPS),
+    useHoverConverter,
     useBackgroundModifier,
     useColorConverter('primary'),
+    useThemeComponentModifier('Link'),
+    useCursorModifier,
     useAnimationModifier,
     useSizeModifier, //
     useFlexWrapperModifier,

package/src/components/actions/Pressable.js

@@ -0,0 +1,38 @@
+import { pipe } from 'ramda'
+
+import { AbsPressable } from '../../abstractions/Pressable'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Pressable({ children, href, target, ...rootProps }) {
+  const [{}, props] = pipe(
+    useThemeComponentModifier('Pressable'),
+    useBackgroundModifier,
+    useAnimationModifier,
+    useSizeModifier, //
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useBorderModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsPressable className="neko-pressable" link target={target} href={!props.disabled && href} {...props}>
+      {children}
+    </AbsPressable>
+  )
+}

package/src/components/actions/index.js

@@ -1,5 +1,6 @@
 export * from './Button'
 export * from './Link'
+export * from './Pressable'
 export * from './Dropdown'
 export * from './Breadcrumb'
 export * from './menu/Menu'

package/src/components/actions/menu/HorizontalMenu.js

@@ -66,7 +66,7 @@ export function HorizontalMenu(rootProps) {
     useThemeComponentModifier('HorizontalMenu') //
   )([{}, rootProps])
 
-  let { gap = 'sm', height = 50, items, onChange, onChangeIndex, ...props } = formattedProps
+  let { gap = 'sm', height = 50, items, onChange, onChangeIndex, activeIndex, ...props } = formattedProps
 
   const handlePress = React.useCallback(
     (item, index) => {
@@ -88,6 +88,7 @@ export function HorizontalMenu(rootProps) {
           color={color}
           sizeCode={sizeCode}
           index={index}
+          activeIndex={activeIndex}
           {...props}
         />
       ))}

package/src/components/actions/menu/VerticalMenu.js

@@ -15,7 +15,7 @@ import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 function LinkItem({
   item,
   linkPaddingH = 'md',
-  linkPaddingV = 'xs',
+  linkPaddingV = 'sm',
   handlePress,
   linkProps,
   activeIndex,
@@ -41,14 +41,15 @@ function LinkItem({
         paddingV={linkPaddingV}
         marginR={3}
         borderL={3}
-        marginV={!!active && -4}
+        marginV={-4}
         borderColor={active ? activeColor : 'transparent'}
         bg={bg}
         transition="border-color 0.5s ease, background 0.3s ease"
+        hover={{ br: 0 }}
         {...linkProps}
         onPress={() => handlePress(item, index)}
       >
-        <IconText paddingV={active && 4} color={active ? activeColor : color} fullW size={sizeCode} {...childProps} />
+        <IconText addingV={active && 4} color={active ? activeColor : color} fullW size={sizeCode} {...childProps} />
       </Link>
     </SubmenuWrapper>
   )

package/src/components/animations/ReanimatedView.js

@@ -0,0 +1,40 @@
+import { pipe } from 'ramda'
+
+import { AbsAnimatedView } from '../../abstractions/AnimatedView'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function ReanimatedView({ children, ...rootProps }) {
+  const [{}, props] = pipe(
+    useThemeComponentModifier('ReanimatedView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsAnimatedView className="neko-reanimated-view" {...props}>
+      {children}
+    </AbsAnimatedView>
+  )
+}

package/src/components/calendar/CalendarNav.js

@@ -0,0 +1,67 @@
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+export function CalendarNav({ value, onChange, level, ...props }) {
+  const prevMonth = () => onChange((m) => m.subtract(1, 'month'))
+  const nextMonth = () => onChange((m) => m.add(1, 'month'))
+
+  const prevYear = () => onChange((m) => m.subtract(1, 'year'))
+  const nextYear = () => onChange((m) => m.add(1, 'year'))
+
+  const prevDecade = () => onChange((m) => m.subtract(10, 'year'))
+  const nextDecade = () => onChange((m) => m.add(10, 'year'))
+
+  const showMonth = level !== 'year'
+
+  if (level === 'decade') {
+    const year = value.year()
+
+    return (
+      <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
+        <Link onPress={prevDecade} aria-label="Previous decade" padding="xxs" paddingL={0}>
+          <Icon name="arrow-left-double-line" />
+        </Link>
+
+        <Text center flex>
+          {year}-{year + 9}
+        </Text>
+
+        <Link onPress={nextDecade} aria-label="Next decade" padding="xxs" paddingR={0}>
+          <Icon name="arrow-right-double-line" />
+        </Link>
+      </View>
+    )
+  }
+
+  return (
+    <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
+      <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
+        <Icon name="arrow-left-double-line" />
+      </Link>
+
+      {showMonth && (
+        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
+          <Icon name="arrow-left-s-line" />
+        </Link>
+      )}
+
+      <View center flex gap="xxs" row>
+        {showMonth && <Text center>{value.format?.('MMM')}</Text>}
+
+        <Text center>{value.format?.('YYYY')}</Text>
+      </View>
+
+      {showMonth && (
+        <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>
+  )
+}

package/src/components/calendar/WeekDaysBar.js

@@ -0,0 +1,18 @@
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+export function WeekDaysBar() {
+  return (
+    <View className="neko-week-days-bar" row center gap="sm">
+      {weekdayLabels.map((w) => (
+        <View key={w} flex height={30} center>
+          <Text center sm text4>
+            {w}
+          </Text>
+        </View>
+      ))}
+    </View>
+  )
+}

package/src/components/calendar/_helpers/calendarDays.js

@@ -9,8 +9,6 @@ export function useCalendarDays(currentMonth) {
     const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
     const cells = [...blanks, ...days]
 
-    const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-
-    return { weekdayLabels, cells }
+    return { cells }
   }, [currentMonth.month(), currentMonth.year()])
 }

package/src/components/calendar/_helpers/dateDisabled.js

@@ -0,0 +1,24 @@
+import { is } from 'ramda'
+import dayjs from 'dayjs'
+
+export function isDateDisabled(date, { min, max, onCheckDisabled } = {}) {
+  const dateVal = !!date && dayjs(date)
+  if (!dateVal || !dateVal.isValid()) return true
+  if (!!min && dateVal.isBefore(min)) return true
+  if (!!max && dateVal.isAfter(max)) return true
+  return onCheckDisabled?.(dateVal) || false
+}
+
+export function isValidDate(v, format, validations = {}) {
+  if (v === null || v === '') return true
+
+  let dateVal = dayjs(v)
+
+  if (is(String, v)) {
+    if (v.length !== format.length) return false
+    dateVal = dayjs(v, format, true)
+    if (!dateVal.isValid()) return false
+  }
+
+  return !isDateDisabled(v, validations)
+}

package/src/components/calendar/index.js

@@ -1 +1 @@
-export * from './DayPicker'
+// export * from './DayPicker'

package/src/components/feedback/alerter.js

@@ -0,0 +1,31 @@
+import { is } from 'ramda'
+
+import { Button } from '../actions'
+import { Result } from '../presentation'
+import { useModalOpener } from '../structure/modal'
+
+export function useAlerter() {
+  const { open } = useModalOpener()
+
+  const alert = (data, type) => {
+    if (is(String, data)) data = { title: data }
+    const { width, closeLabel, hideClose, ...resultProps } = data || {}
+
+    open(({ onClose }) => ({
+      content: <Result {...resultProps} type={type} padding={0} paddingT="lg" paddingB="sm" />,
+      footer: !hideClose && (
+        <Button sm label={closeLabel || 'Close'} outline color="text_op40" onPress={onClose} fullW />
+      ),
+      footerProps: { borderT: false },
+      width: width || 350,
+    }))
+  }
+
+  return {
+    alert,
+    info: (data) => alert(data, 'info'),
+    error: (data) => alert(data, 'error'),
+    warning: (data) => alert(data, 'warning'),
+    success: (data) => alert(data, 'success'),
+  }
+}

package/src/components/feedback/confirmer.js

@@ -0,0 +1,70 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { Button } from '../actions'
+import { RESULT_TYPES } from '../presentation/Result'
+import { Result } from '../presentation'
+import { View } from '../structure/View'
+import { useModalOpener } from '../structure/modal'
+
+function Footer({ cancelLabel, confirmLabel, onConfirm, type, onClose }) {
+  const [loading, setLoading] = React.useState(false)
+  const color = RESULT_TYPES[type]?.color || 'primary'
+
+  return (
+    <View row gap="sm" centerV>
+      <Button sm label={cancelLabel || 'Cancel'} outline color="text_op40" onPress={onClose} flex disabled={loading} />
+      <Button
+        disabled={loading}
+        loading={loading}
+        sm
+        label={confirmLabel || 'Confirm'}
+        color={color}
+        onPress={() => {
+          setLoading(true)
+          Promise.resolve(onConfirm?.())
+            .then((result) => {
+              if (result !== false) {
+                onClose()
+              }
+            })
+            .finally(() => {
+              setLoading(false)
+            })
+        }}
+        flex
+      />
+    </View>
+  )
+}
+
+export function useConfirmer() {
+  const { open } = useModalOpener()
+
+  const confirm = (data, type) => {
+    const { width, cancelLabel, confirmLabel, onConfirm, ...resultProps } = data || {}
+
+    open(({ onClose }) => ({
+      content: <Result {...resultProps} type={type} padding={0} paddingT="lg" paddingB="sm" />,
+      footer: (
+        <Footer
+          cancelLabel={cancelLabel}
+          confirmLabel={confirmLabel}
+          onConfirm={onConfirm}
+          type={type}
+          onClose={onClose}
+        />
+      ),
+      footerProps: { borderT: false },
+      width: width || 350,
+    }))
+  }
+
+  return {
+    confirm,
+    info: (data) => confirm(data, 'info'),
+    error: (data) => confirm(data, 'error'),
+    warning: (data) => confirm(data, 'warning'),
+    success: (data) => confirm(data, 'success'),
+  }
+}

package/src/components/feedback/index.js

@@ -1 +1,3 @@
 export * from './notifications/NotificationsHandler'
+export * from './alerter'
+export * from './confirmer'

package/src/components/feedback/notifications/Notification.js

@@ -18,7 +18,7 @@ export function Notification({ time, ...props }) {
       className="neko-notification"
       slide={{ from: 'right' }}
       fade
-      zIndex={120}
+      zIndex={520}
       maxWidth="100%"
       bg="overlayBG"
       br="sm"

package/src/components/feedback/notifications/NotificationsHandler.js

@@ -20,8 +20,8 @@ export function useNotifier() {
 
     if (is(String, data)) data = { title: data }
 
-    const timerId = setTimeout(() => remove(key), time)
-    add(key, { ...data, type, opts, timerId, time })
+    const timerId = setTimeout(() => remove?.(key), time)
+    add?.(key, { ...data, type, opts, timerId, time })
   }
 
   return {
@@ -52,7 +52,7 @@ export function NotificationsHandler({ children }) {
       {children}
 
       {!!messages.length && (
-        <View fixed top={0} right={0} padding="md" width={width} maxWidth="100%" pointerEvents="box-none">
+        <View fixed top={0} right={0} padding="md" width={width} maxWidth="100%" pointerEvents="box-none" zIndex={600}>
           <SafeAreaView gap="xs">
             {messages.map(({ key, ...item }) => (
               <Notification key={key} {...item} />

package/src/components/index.js

@@ -11,3 +11,4 @@ export * from './layout'
 export * from './table'
 export * from './feedback'
 export * from './calendar'
+export * from './list'