@neko-os/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,16 @@
+import { Dropdown } from '../Dropdown'
+import { Icon } from '../../presentation/Icon'
+import { View } from '../../structure/View'
+
+export function SubmenuWrapper({ item, children, placement, hideIcon, ...props }) {
+  if (!item.subItems?.length) return children
+
+  return (
+    <Dropdown popoverProps={{ placement: placement || 'rightTop' }} items={item.subItems} trigger="hover" {...props}>
+      <View flex row gap="xxs" center fullH>
+        {children}
+        {!hideIcon && <Icon name="arrow-right-s-line" />}
+      </View>
+    </Dropdown>
+  )
+}

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

@@ -0,0 +1,107 @@
+import { omit, pipe } from 'ramda'
+import React from 'react'
+import tinycolor from 'tinycolor2'
+
+import { Divider } from '../../helpers/Separator'
+import { IconText } from '../../presentation/IconLabel'
+import { Link } from '../Link'
+import { SubmenuWrapper } from './SubmenuWrapper'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+function LinkItem({
+  item,
+  linkPaddingH = 'md',
+  linkPaddingV = 'xs',
+  handlePress,
+  linkProps,
+  activeIndex,
+  activeKey,
+  activeColor = 'primary',
+  color,
+  sizeCode,
+  index,
+  ...props
+}) {
+  activeColor = activeColor || 'primary'
+  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  if (!active && activeIndex >= 0) active = activeIndex === index
+  if (!active && activeKey !== undefined) active = activeKey === item.key
+  const bg = active && tinycolor(color).setAlpha(0.03).toString()
+
+  return (
+    <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
+      <Link
+        fullW
+        center
+        paddingH={linkPaddingH}
+        paddingV={linkPaddingV}
+        marginR={3}
+        borderL={3}
+        marginV={!!active && -4}
+        borderColor={active ? activeColor : 'transparent'}
+        bg={bg}
+        transition="border-color 0.5s ease, background 0.3s ease"
+        {...linkProps}
+        onPress={() => handlePress(item, index)}
+      >
+        <IconText paddingV={active && 4} color={active ? activeColor : color} fullW size={sizeCode} {...childProps} />
+      </Link>
+    </SubmenuWrapper>
+  )
+}
+
+function DividerItem({ linkPaddingH = 'md', item }) {
+  let content = <Divider height="xxs" line {...item} />
+  if (!item.label) return content
+  return (
+    <>
+      {content}
+      <Text size="xs" color="text4" paddingH={linkPaddingH || 'md'} strong {...item} />
+    </>
+  )
+}
+
+function Item({ item, ...props }) {
+  if (item.type === 'divider') return <DividerItem item={item} {...props} />
+  return <LinkItem item={item} {...props} />
+}
+
+export function VerticalMenu(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('text'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('VerticalMenu') //
+  )([{}, rootProps])
+
+  let { gap = 'sm', items, onChange, onChangeIndex, ...props } = formattedProps
+
+  const handlePress = React.useCallback(
+    (item, index) => {
+      if (!!onChange) onChange(item, index)
+      if (!!onChangeIndex) onChangeIndex(index)
+      if (!!item.onPress) item.onPress()
+      if (!!item.onClick) item.onClick()
+    },
+    [onChange, onChangeIndex]
+  )
+
+  return (
+    <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
+      {items.map((item, index) => (
+        <Item
+          key={item.key || index}
+          item={item}
+          handlePress={handlePress}
+          color={color}
+          sizeCode={sizeCode}
+          index={index}
+          {...props}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/animations/AnimatedView.js

@@ -0,0 +1,45 @@
+import { pipe } from 'ramda'
+
+import { AbsAnimatedView } from '../../abstractions/AnimatedView'
+import { useAnimatedEffects } from '../../modifiers/animations/animatedEffects'
+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 AnimatedView({ children, ...rootProps }) {
+  const [{ lazy, render, hasOpened }, props] = pipe(
+    useAnimatedEffects,
+    useThemeComponentModifier('AnimatedView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  if (lazy && !hasOpened) return null
+  if (!render) return null
+
+  return (
+    <AbsAnimatedView className="neko-animated-view" {...props}>
+      {children}
+    </AbsAnimatedView>
+  )
+}

package/src/components/animations/DraggableSlideView.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsDraggableSlideView } from '../../abstractions/DraggableSlideView'
+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 { 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 DraggableSlideView({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('DraggableSlideView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsDraggableSlideView className="neko-draggable-slide-view" {...props}>
+      {children}
+    </AbsDraggableSlideView>
+  )
+}

package/src/components/animations/index.js

@@ -0,0 +1,2 @@
+export * from './AnimatedView'
+export * from './DraggableSlideView'

package/src/components/calendar/DayPicker.js

@@ -0,0 +1,91 @@
+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, ...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((val, idx) => {
+          const dateVal = currentMonth.date(val)
+          const isActive = dateVal.isSame(value, 'day')
+
+          return (
+            <Col key={idx} className="day-cell" center>
+              <Link
+                ratio={1}
+                width={30}
+                center
+                br="md"
+                onPress={() => !!val && handleChange(dateVal)}
+                bg={isActive && 'primary'}
+              >
+                <Text sm text2 center strong={isActive}>
+                  {val != null ? val : ''}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export function useCalendarDays(currentMonth) {
+  return React.useMemo(() => {
+    const startWeekday = currentMonth.startOf('month').day()
+    const daysInMonth = currentMonth.daysInMonth()
+
+    const blanks = Array.from({ length: startWeekday }, () => null)
+    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 }
+  }, [currentMonth.month(), currentMonth.year()])
+}

package/src/components/calendar/index.js

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

package/src/components/feedback/index.js

@@ -0,0 +1 @@
+export * from './notifications/NotificationsHandler'

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

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { AnimatedView } from '../../animations/AnimatedView'
+import { Icon } from '../../presentation/Icon'
+import { Link } from '../../actions/Link'
+import { ResultBar } from '../../presentation/ResultBar'
+
+export function Notification({ time, ...props }) {
+  const [open, setOpen] = React.useState(true)
+
+  React.useEffect(() => {
+    setTimeout(() => setOpen(false), time - 500)
+  }, [])
+
+  return (
+    <AnimatedView
+      open={open}
+      className="neko-notification"
+      slide={{ from: 'right' }}
+      fade
+      zIndex={120}
+      maxWidth="100%"
+      bg="overlayBG"
+      br="sm"
+      unmountOnClose
+    >
+      <ResultBar
+        {...props}
+        rightContent={
+          <Link onPress={() => setOpen(false)}>
+            <Icon name="close-line" text4 />
+          </Link>
+        }
+      />
+    </AnimatedView>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { Notification } from './Notification'
+import { SafeAreaView } from '../../structure/SafeAreaView'
+import { View } from '../../structure/View'
+import { useResponsiveValue } from '../../../responsive/responsiveHooks'
+
+const NotificationsContext = React.createContext(null)
+
+export const useNotifications = () => React.useContext(NotificationsContext) || {}
+
+let idCounter = 0
+
+export function useNotifier() {
+  const { add, remove } = useNotifications()
+  const notify = (data, opts, type) => {
+    const key = ++idCounter
+    const time = opts?.time || 6000
+
+    if (is(String, data)) data = { title: data }
+
+    const timerId = setTimeout(() => remove(key), time)
+    add(key, { ...data, type, opts, timerId, time })
+  }
+
+  return {
+    notify,
+    info: (data, opts) => notify(data, opts, 'info'),
+    error: (data, opts) => notify(data, opts, 'error'),
+    warning: (data, opts) => notify(data, opts, 'warning'),
+    success: (data, opts) => notify(data, opts, 'success'),
+  }
+}
+
+export function NotificationsHandler({ children }) {
+  const width = useResponsiveValue({ sm: '100%', df: 400 })
+  const [messages, setMessages] = React.useState([])
+
+  const add = React.useCallback((key, data) => {
+    setMessages((prev) => [{ key, ...data }, ...prev])
+  }, [])
+
+  const remove = React.useCallback((key) => {
+    setMessages((prev) => prev.filter((p) => p.key !== key))
+  }, [])
+
+  const value = React.useMemo(() => ({ add, remove }), [add, remove])
+
+  return (
+    <NotificationsContext.Provider value={value}>
+      {children}
+
+      {!!messages.length && (
+        <View fixed top={0} right={0} padding="md" width={width} maxWidth="100%" pointerEvents="box-none">
+          <SafeAreaView gap="xs">
+            {messages.map(({ key, ...item }) => (
+              <Notification key={key} {...item} />
+            ))}
+          </SafeAreaView>
+        </View>
+      )}
+    </NotificationsContext.Provider>
+  )
+}

package/src/components/form/Form.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { FormWrapperComponent } from './FormWrapperComponent'
+import { LoadingView } from '../state/LoadingView'
+import { useNewForm } from './useNewForm'
+
+const FormContext = React.createContext(null)
+export const useFormState = () => React.useContext(FormContext)
+export const useFormInstance = () => useFormState()?.form
+export const useForm = useFormInstance
+
+export function Form({ form, onSubmit, initialValues, children, loading, disabled, ...props }) {
+  const defaultForm = useNewForm({ onSubmit, initialValues })
+  form = form || defaultForm
+
+  return (
+    <FormContext.Provider value={{ loading, disabled, form }}>
+      <LoadingView active={loading} noWrapper>
+        <FormWrapperComponent form={form} gap="md" {...props}>
+          {children}
+        </FormWrapperComponent>
+      </LoadingView>
+    </FormContext.Provider>
+  )
+}

package/src/{form → components/form}/FormGroup.js

@@ -4,17 +4,17 @@ const FormGroupContext = React.createContext(null)
 const useGroupPath = () => React.useContext(FormGroupContext)?.path || []
 
 export function useRelativePath(name, opts) {
-  const { relative } = opts
+  const { isAbsolutePath } = opts
   const listPath = !!name ? (Array.isArray(name) ? name : [name]) : []
   const parentPath = useGroupPath()
 
-  if (!relative) return listPath
+  if (!!isAbsolutePath) return listPath
 
   return [...parentPath, ...listPath]
 }
 
-export function FormGroup({ name }) {
-  const path = useRelativePath(name, { relative: true })
+export function FormGroup({ name, children }) {
+  const path = useRelativePath(name, { isAbsolutePath: false })
   const value = { path }
 
   return <FormGroupContext.Provider value={value}>{children}</FormGroupContext.Provider>

package/src/components/form/FormItem.js

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { FormGroup, useRelativePath } from './FormGroup'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { clearProps } from '../../modifiers/_helpers'
+import { useFormInstance, useFormState } from './Form'
+
+export function FormItem({ name, label, isAbsolutePath, children, useDefaultValue, ...props }) {
+  const form = useFormInstance()
+  const formState = useFormState()
+  const listPath = useRelativePath(name, { isAbsolutePath })
+  const [value, setValue] = React.useState(form.getFieldValue(listPath))
+  const error = form.getError(listPath)
+
+  React.useEffect(() => {
+    return form.registerListener(listPath, (val) => setValue(val))
+  }, [listPath.join('$NEKOJOIN$')])
+
+  const handleChange = (e) => {
+    const val = e?.target?.value ?? e
+    form.setFieldValue(listPath, val)
+  }
+
+  let valueKey = 'value'
+  if (!!useDefaultValue) valueKey = 'defaultValue'
+
+  const childProps = clearProps({
+    [valueKey]: value === undefined ? '' : value,
+    onChange: handleChange,
+    // loading: formState?.loading === true || undefined,
+    disabled: formState?.disabled === true || undefined,
+  })
+
+  let content
+  if (typeof children === 'function') {
+    content = children(childProps)
+  } else {
+    const child = React.Children.only(children)
+    content = React.cloneElement(child, { ...child.props, ...childProps })
+  }
+
+  return (
+    <FormGroup name={listPath}>
+      <View {...props}>
+        {label && (
+          <Text sm marginB="xxs">
+            {label}
+          </Text>
+        )}
+        {content}
+        {error && <Text color="red">{error}</Text>}
+      </View>
+    </FormGroup>
+  )
+}

package/src/{form → components/form}/FormList.js

@@ -1,29 +1,49 @@
-import { Text } from 'react-native'
 import React from 'react'
 
 import { FormGroup, useRelativePath } from './FormGroup'
+import { Text } from '../text/Text'
 import { useFormInstance } from './Form'
 
 const FormListContext = React.createContext(null)
 const useFormList = () => React.useContext(FormListContext)
 
-export function FormList({ name, relative, children }) {
+export function FormList({ name, isAbsolutePath, children }) {
   const form = useFormInstance()
-  const listPath = useRelativePath(name, { relative })
+  const listPath = useRelativePath(name, { isAbsolutePath })
   // To avoid watch being recalled
   const listPathStr = listPath.join('$NEKOJOIN$')
   const error = form.getError(listPath)
 
+  // Counter to generate unique keys
+  const keyCounter = React.useRef(0)
+  // Map to track keys by value reference
+  const keysMap = React.useRef(new WeakMap())
+
+  const generateFields = (items) => {
+    if (!Array.isArray(items)) return []
+    return items.map((item, index) => {
+      let key
+      if (typeof item === 'object' && item !== null) {
+        key = keysMap.current.get(item)
+        if (!key) {
+          key = `field_${keyCounter.current++}`
+          keysMap.current.set(item, key)
+        }
+      } else {
+        key = `field_${keyCounter.current++}`
+      }
+      return { key, name: index }
+    })
+  }
+
   const [fields, setFields] = React.useState(() => {
     const initial = form.getFieldValue(listPath) || []
-    return initial.map((_, index) => ({ key: index, name: index }))
+    return generateFields(initial)
   })
 
   React.useEffect(() => {
     return form.registerListener(listPath, (val) => {
-      if (Array.isArray(val)) {
-        setFields(val.map((_, index) => ({ key: index, name: index })))
-      }
+      setFields(generateFields(val))
     })
   }, [listPathStr])
 
@@ -45,6 +65,15 @@ export function FormList({ name, relative, children }) {
     )
   }
 
+  const duplicate = (index) => {
+    const current = form.getFieldValue(listPath) || []
+    const value = current[index]
+    if (!value) return
+    // Deep clone the value to avoid reference issues
+    const clonedValue = typeof value === 'object' ? { ...value } : value
+    addOn(index + 1, clonedValue)
+  }
+
   const move = (fromIndex, toIndex) => {
     const current = form.getFieldValue(listPath) || []
     if (fromIndex < 0 || fromIndex >= current.length) return
@@ -71,17 +100,24 @@ export function FormList({ name, relative, children }) {
       replace,
       remove,
       move,
+      duplicate,
     }),
     [listPathStr]
   )
 
+  let content
+  if (typeof children === 'function') {
+    content = children(fields, actions)
+  } else {
+    const child = React.Children.only(children)
+    content = React.cloneElement(child, { ...child.props, fields, ...actions })
+  }
+
   return (
     <FormGroup name={listPath}>
       <FormListContext.Provider value={actions}>
-        {typeof children === 'function'
-          ? children(fields, actions)
-          : React.cloneElement(React.Children.only(children), { fields, ...actions })}
-        {error && <Text style={{ color: 'red' }}>{error}</Text>}
+        {content}
+        {error && <Text color="red">{error}</Text>}
       </FormListContext.Provider>
     </FormGroup>
   )