@neko-os/ui 0.0.7 → 0.0.9

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}
-        borderColor={active ? activeColor : 'transparent'}
+        marginV={-4}
+        brColor={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,5 @@ export * from './layout'
 export * from './table'
 export * from './feedback'
 export * from './calendar'
+export * from './list'
+export * from './theme'

package/src/components/inputs/DateInput.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+import { LinkInput } from './LinkInput'
+import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
+
+dayjs.extend(advancedFormat)
+dayjs.extend(weekOfYear)
+
+import { DatePicker } from './datePicker/DatePicker'
+import { MaskInput } from './MaskInput'
+import { Popover } from '../structure/popover/Popover'
+import { isValidDate } from '../calendar/_helpers/dateDisabled'
+
+export function getDateInputDefaultFormat(type) {
+  switch (type) {
+    case 'year':
+      return 'YYYY'
+    case 'quarter':
+      return 'YYYY-Q'
+    case 'month':
+      return 'YYYY-MM'
+    case 'week':
+      return 'YYYY-ww'
+    default:
+      return 'YYYY-MM-DD'
+  }
+}
+
+export function DateInput({
+  value,
+  onChange,
+  min,
+  max,
+  onCheckDisabled,
+  placement,
+  type = 'day',
+  format,
+  useBottomDrawer = { native: true, sm: true, md: true },
+  ...props
+}) {
+  useBottomDrawer = useResponsiveValue(useBottomDrawer)
+  format = format || getDateInputDefaultFormat(type)
+  if (value === '') value = undefined
+  const [inputValue, setInputValue] = React.useState('')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  value = value || localValue
+
+  const validations = { min, max, onCheckDisabled }
+
+  const handleChange = (v) => {
+    if (!isValidDate(v, format, validations)) return
+    v = !!v ? dayjs(v) : null
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const handleChangeInput = (v) => {
+    setInputValue(v)
+    if (!isValidDate(v, format, validations)) return
+    handleChange(v)
+  }
+
+  const onBlur = () => {
+    if (isValidDate(inputValue, format, validations)) return
+    handleChange(null)
+    setInputValue('')
+  }
+
+  React.useEffect(() => {
+    setInputValue(!!value ? dayjs(value).format(format) : '')
+  }, [value])
+
+  const Input = useBottomDrawer ? LinkInput : MaskInput
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      snapPoints={[350]}
+      useBottomDrawer={useBottomDrawer}
+      renderContent={({ onClose }) => (
+        <View flex centerH>
+          <DatePicker
+            value={value}
+            onChange={(v) => {
+              handleChange(v)
+              onClose()
+            }}
+            {...validations}
+            type={type}
+          />
+        </View>
+      )}
+    >
+      <Input
+        value={inputValue}
+        onChange={handleChangeInput}
+        suffixIcon="calendar-line"
+        suffixIconColor="text4"
+        onBlur={onBlur}
+        mask={format.replace(/[DMYQwW]/gi, '9')}
+        {...props}
+      />
+    </Popover>
+  )
+}

package/src/components/inputs/InputWrapper.js

@@ -19,10 +19,23 @@ const DEFAULT_PROPS = {
   gap: 'sm',
 }
 
-export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading, error, children, ...rootProps }) {
+export function InputWrapper({
+  prefix,
+  suffix,
+  prefixIcon,
+  prefixIconColor,
+  suffixIcon,
+  suffixIconColor,
+  loading,
+  error,
+  children,
+  ref,
+  ...rootProps
+}) {
   const [hover, setHover] = React.useState(false)
-  const inputRef = React.useRef()
-  const [{ size, sizeCode, onChange }, props] = pipe(
+  const fallbackInputRef = React.useRef()
+  const inputRef = ref || fallbackInputRef
+  const [{ size, sizeCode }, props] = pipe(
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('InputWrapper'),
     useDefaultModifier(DEFAULT_PROPS)
@@ -34,8 +47,8 @@ export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading,
 
   if (!!prefix && is(String, prefix)) prefix = <Text>{prefix}</Text>
   if (!!suffix && is(String, suffix)) suffix = <Text>{suffix}</Text>
-  if (!prefix && !!prefixIcon) prefix = <Icon name={prefixIcon} size={sizeCode} />
-  if (!suffix && !!suffixIcon) suffix = <Icon name={suffixIcon} size={sizeCode} />
+  if (!prefix && !!prefixIcon) prefix = <Icon name={prefixIcon} size={sizeCode} color={prefixIconColor} />
+  if (!suffix && !!suffixIcon) suffix = <Icon name={suffixIcon} size={sizeCode} color={suffixIconColor} />
   if (!prefix && !!error) suffix = <Icon name="close-circle-fill" size={sizeCode} red />
   if (!!loading) suffix = <Loading size={sizeCode} />
 
@@ -46,7 +59,6 @@ export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading,
   const childWithProps = React.cloneElement(child, {
     ...child.props,
     ref: inputRef,
-    onChange: child.props.onChange || onChange,
   })
 
   return (

package/src/components/inputs/LinkInput.js

@@ -0,0 +1,17 @@
+import { InputWrapper } from './InputWrapper'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useColors } from '../../theme/ThemeHandler'
+
+export function LinkInput({ onPress, onClick, placeholder, value, disabled, ...props }) {
+  return (
+    <Link onPress={!props.loading ? onPress || onClick : undefined} flex fullW centerV disabled={disabled}>
+      <InputWrapper {...props}>
+        <View centerV flex fullW>
+          <Text color={!!value ? 'text' : 'text_op30'} label={value || placeholder} />
+        </View>
+      </InputWrapper>
+    </Link>
+  )
+}