@neko-os/ui 0.0.5 → 0.0.6

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

@@ -1,14 +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 useFormInstance = () => React.useContext(FormContext)
+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
 
-export function Form({ form, children }) {
   return (
-    <FormContext.Provider value={form}>
-      <FormWrapperComponent form={form}>{children}</FormWrapperComponent>
+    <FormContext.Provider value={{ loading, disabled, form }}>
+      <LoadingView active={loading} noWrapper>
+        <FormWrapperComponent form={form} gap="md" {...props}>
+          {children}
+        </FormWrapperComponent>
+      </LoadingView>
     </FormContext.Provider>
   )
 }

package/src/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

@@ -2,11 +2,14 @@ import React from 'react'
 
 import { FormGroup, useRelativePath } from './FormGroup'
 import { Text } from '../text/Text'
-import { useFormInstance } from './Form'
+import { View } from '../structure/View'
+import { clearProps } from '../../modifiers/_helpers'
+import { useFormInstance, useFormState } from './Form'
 
-export function FormItem({ name, relative, children }) {
+export function FormItem({ name, label, isAbsolutePath, children, useDefaultValue, ...props }) {
   const form = useFormInstance()
-  const listPath = useRelativePath(name, { relative })
+  const formState = useFormState()
+  const listPath = useRelativePath(name, { isAbsolutePath })
   const [value, setValue] = React.useState(form.getFieldValue(listPath))
   const error = form.getError(listPath)
 
@@ -19,16 +22,35 @@ export function FormItem({ name, relative, children }) {
     form.setFieldValue(listPath, val)
   }
 
-  const child = React.Children.only(children)
-  const childWithProps = React.cloneElement(child, {
-    value,
+  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}>
-      {childWithProps}
-      {error && <Text color="red">{error}</Text>}
+      <View {...props}>
+        {label && (
+          <Text sm marginB="xxs">
+            {label}
+          </Text>
+        )}
+        {content}
+        {error && <Text color="red">{error}</Text>}
+      </View>
     </FormGroup>
   )
 }

package/src/components/form/FormList.js

@@ -7,23 +7,43 @@ 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,16 +100,23 @@ 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 })}
+        {content}
         {error && <Text color="red">{error}</Text>}
       </FormListContext.Provider>
     </FormGroup>

package/src/components/form/FormWrapperComponent.js

@@ -1,8 +1,43 @@
-export function FormWrapperComponent({ children, form, ...props }) {
+import { pipe } from 'ramda'
+
+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 { useFormState } from './Form'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+
+export function FormWrapperComponent({ children, form, ...rootProps }) {
+  const formState = useFormState()
+  const [_, props] = pipe(
+    useDisplayModifier, //
+    // useStateModifier,
+    useSizeModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
   const handleSubmit = (e) => {
     e.preventDefault()
+    if (formState?.loading || formState?.disabled) return
     form.handleSubmit()
   }
 
-  return <form onSubmit={handleSubmit}>{children}</form>
+  return (
+    <form onSubmit={handleSubmit} {...props}>
+      {children}
+      <input type="submit" style={{ display: 'none' }} />
+    </form>
+  )
 }

package/src/components/form/FormWrapperComponent.native.js

@@ -1,5 +1,5 @@
-import React from 'react'
+import { View } from '../structure/View'
 
 export function FormWrapperComponent({ children, ...props }) {
-  return children
+  return <View {...props}>{children}</View>
 }

package/src/components/form/SubmitButton.js

@@ -0,0 +1,20 @@
+import { Button } from '../actions/Button'
+import { useFormInstance, useFormState } from './Form'
+
+export function SubmitButton({ form, disabled, ...props }) {
+  const formState = useFormState()
+  const contextForm = useFormInstance()
+  form = form || contextForm
+  disabled = formState?.disabled || disabled
+
+  const handleSubmit = () => {
+    if (!form) {
+      console.error('No form provided to useWatch. Pass it as params or wrap it inside a <Form> component.')
+      return
+    }
+
+    form.handleSubmit()
+  }
+
+  return <Button {...props} disabled={disabled} onPress={handleSubmit} />
+}

package/src/components/form/index.js

@@ -3,5 +3,6 @@ export * from './FormItem'
 export * from './FormList'
 export * from './FormWrapperComponent'
 export * from './FormGroup'
-export * from './useForm'
-export * from './inputs'
+export * from './useNewForm'
+export * from './useWatch'
+export * from './SubmitButton'

package/src/components/form/useNewForm.js

@@ -0,0 +1,67 @@
+import { assocPath, path } from 'ramda'
+import React from 'react'
+
+export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
+  const valuesRef = React.useRef({ ...initialValues })
+  const errorsRef = React.useRef({})
+  const listenersRef = React.useRef({})
+
+  const formApi = React.useMemo(() => {
+    const notify = (name) => {
+      const key = Array.isArray(name) ? name.join('.') : name
+      if (listenersRef.current[key]) {
+        listenersRef.current[key].forEach((cb) => cb(path(name, valuesRef.current)))
+      }
+    }
+
+    const setFieldValue = (name, value) => {
+      valuesRef.current = assocPath(name, value, valuesRef.current)
+      notify(name)
+    }
+
+    const getFieldValue = (name) => path(name, valuesRef.current)
+
+    const getError = (name) => path(name, errorsRef.current)
+
+    const setError = (name, error) => {
+      errorsRef.current = assocPath(name, error, errorsRef.current)
+    }
+
+    const registerListener = (name, cb) => {
+      const key = Array.isArray(name) ? name.join('.') : name
+      if (!listenersRef.current[key]) {
+        listenersRef.current[key] = []
+      }
+      listenersRef.current[key].push(cb)
+      return () => {
+        listenersRef.current[key] = listenersRef.current[key].filter((fn) => fn !== cb)
+      }
+    }
+
+    const validateForm = () => {
+      if (!validate) return true
+      const newErrors = validate(valuesRef.current) || {}
+      errorsRef.current = newErrors
+      return Object.keys(newErrors).length === 0
+    }
+
+    const handleSubmit = () => {
+      const isValid = validateForm()
+      if (!isValid) return
+      console.log('SUBMIT')
+      onSubmit(valuesRef.current)
+    }
+
+    return {
+      setFieldValue,
+      getFieldValue,
+      getError,
+      setError,
+      registerListener,
+      handleSubmit,
+      valuesRef,
+    }
+  }, [validate, onSubmit])
+
+  return formApi
+}

package/src/components/form/useWatch.js

@@ -0,0 +1,70 @@
+import React from 'react'
+import { useFormInstance } from './Form'
+
+export function useWatch(name, { form } = {}) {
+  const contextForm = useFormInstance()
+  form = form || contextForm
+  const [value, setValue] = React.useState(() => form?.getFieldValue(name))
+
+  React.useEffect(() => {
+    if (!form) {
+      console.error('No form provided to useWatch. Pass it as params or wrap it inside a <Form> component.')
+      return
+    }
+
+    setValue(form.getFieldValue(name))
+
+    const unsubscribe = form.registerListener(name, (newValue) => {
+      setValue(newValue)
+    })
+
+    return unsubscribe
+  }, [form, name])
+
+  return value
+}
+
+export function useWatchAll(form) {
+  const contextForm = useFormInstance()
+  form = form || contextForm
+  const [values, setValues] = React.useState(() => form?.valuesRef.current || {})
+  const watchedFieldsRef = React.useRef(new Set())
+
+  React.useEffect(() => {
+    if (!form) return
+
+    setValues({ ...form.valuesRef.current })
+
+    const checkForNewFields = () => {
+      const currentFields = Object.keys(form.valuesRef.current)
+      const unsubscribers = []
+
+      currentFields.forEach((field) => {
+        if (!watchedFieldsRef.current.has(field)) {
+          watchedFieldsRef.current.add(field)
+          const unsub = form.registerListener(field, () => {
+            setValues({ ...form.valuesRef.current })
+          })
+          unsubscribers.push(unsub)
+        }
+      })
+
+      return unsubscribers
+    }
+
+    const unsubscribers = checkForNewFields()
+
+    const interval = setInterval(() => {
+      const newUnsubs = checkForNewFields()
+      unsubscribers.push(...newUnsubs)
+    }, 100)
+
+    return () => {
+      clearInterval(interval)
+      unsubscribers.forEach((unsub) => unsub())
+      watchedFieldsRef.current.clear()
+    }
+  }, [form])
+
+  return values
+}

package/src/components/helpers/LazyRender.js

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { View } from '../structure/View'
+
+export function LazyRender({
+  children,
+  delay = 0,
+  whenVisible = false,
+  destroyOffScreen = false,
+  minHeight: initMinHeight,
+  ...props
+}) {
+  const ref = React.useRef(null)
+  const [open, setOpen] = React.useState(!whenVisible && !delay)
+  const [minHeight, setMinHeight] = React.useState(initMinHeight)
+
+  React.useEffect(() => {
+    if (!whenVisible) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setOpen((open) => {
+          if (entry.isIntersecting) return true
+          return destroyOffScreen ? false : open
+        })
+      },
+      { threshold: 0 }
+    )
+
+    if (ref.current) observer.observe(ref.current)
+
+    return () => {
+      if (ref.current) observer.unobserve(ref.current)
+    }
+  }, [whenVisible, destroyOffScreen])
+
+  React.useEffect(() => {
+    if (delay > 0 && !whenVisible) {
+      const timer = setTimeout(() => setOpen(true), delay)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (ref.current && open) {
+      setMinHeight(ref.current.offsetHeight)
+    }
+  }, [open])
+
+  return (
+    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+      {open ? children : null}
+    </View>
+  )
+}

package/src/components/helpers/LazyRender.native.js

@@ -0,0 +1,58 @@
+import { Dimensions } from 'react-native'
+import React from 'react'
+
+import { View } from '../structure/View'
+
+export function LazyRender({
+  children,
+  delay = 0,
+  whenVisible = false,
+  destroyOffScreen = false,
+  minHeight: initMinHeight,
+  ...props
+}) {
+  const ref = React.useRef(null)
+  const [open, setOpen] = React.useState(!whenVisible && !delay)
+  const [minHeight, setMinHeight] = React.useState(initMinHeight)
+  const windowHeight = Dimensions.get('window').height
+
+  const checkVisibility = React.useCallback(() => {
+    if (!ref.current) return
+    ref.current.measureInWindow((x, y, width, height) => {
+      const isVisible = y + height > 0 && y < windowHeight
+      setOpen((prev) => {
+        if (isVisible) return true
+        return destroyOffScreen ? false : prev
+      })
+    })
+  }, [windowHeight, destroyOffScreen])
+
+  React.useEffect(() => {
+    if (whenVisible) {
+      checkVisibility()
+      const interval = setInterval(checkVisibility, 100)
+      return () => clearInterval(interval)
+    }
+  }, [whenVisible, checkVisibility])
+
+  React.useEffect(() => {
+    if (delay > 0 && !whenVisible) {
+      const timer = setTimeout(() => setOpen(true), delay)
+      return () => clearTimeout(timer)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (ref.current && open) {
+      ref.current.measure((x, y, width, height) => {
+        setMinHeight(height)
+      })
+    }
+  }, [open])
+
+  return (
+    <View className="neko-lazy-render" {...props} minHeight={minHeight} ref={ref}>
+      {open ? children : null}
+    </View>
+  )
+}

package/src/components/helpers/Portal.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { usePortal } from './PortalHandler'
+
+let idCounter = 0
+
+export function Portal({ children }) {
+  const keyRef = React.useRef(++idCounter)
+  const { mount, update, unmount } = usePortal()
+
+  React.useEffect(() => {
+    mount(keyRef.current, children)
+    return () => unmount(keyRef.current)
+  }, [])
+
+  React.useEffect(() => {
+    update(keyRef.current, children)
+  }, [children])
+
+  return null
+}