@neko-os/ui 0.0.4 → 0.0.6

package/src/components/form/FormWrapperComponent.js

@@ -0,0 +1,43 @@
+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} {...props}>
+      {children}
+      <input type="submit" style={{ display: 'none' }} />
+    </form>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { View } from '../structure/View'
+
+export function FormWrapperComponent({ children, ...props }) {
+  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/{form → components/form}/index.js

@@ -3,4 +3,6 @@ export * from './FormItem'
 export * from './FormList'
 export * from './FormWrapperComponent'
 export * from './FormGroup'
-export * from './useForm'
+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
+}

package/src/components/helpers/PortalHandler.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+const PortalContext = React.createContext(null)
+
+export const usePortal = () => React.useContext(PortalContext) || {}
+
+export function PortalHandler({ children }) {
+  const [portals, setPortals] = React.useState([])
+
+  const mount = React.useCallback((key, element) => {
+    setPortals((prev) => [...prev, { key, element }])
+  }, [])
+
+  const update = React.useCallback((key, element) => {
+    setPortals((prev) => prev.map((p) => (p.key === key ? { ...p, element } : p)))
+  }, [])
+
+  const unmount = React.useCallback((key) => {
+    setPortals((prev) => prev.filter((p) => p.key !== key))
+  }, [])
+
+  const value = React.useMemo(() => ({ mount, update, unmount }), [mount, update, unmount])
+
+  return (
+    <PortalContext.Provider value={value}>
+      {children}
+      {portals.map((p) => (
+        <React.Fragment key={p.key}>{p.element}</React.Fragment>
+      ))}
+    </PortalContext.Provider>
+  )
+}

package/src/components/helpers/Responsive.js

@@ -0,0 +1,18 @@
+import { useResponsiveValue } from '../../responsive/responsiveHooks'
+
+export function ResponsiveRender(props) {
+  const value = useResponsiveValue(props) || props.df
+  return typeof value === 'function' ? value() : value
+}
+
+export function HideOn({ children, ...props }) {
+  const hide = useResponsiveValue(props)
+  if (!!hide) return false
+  return children
+}
+
+export function ShowOn({ children, ...props }) {
+  const show = useResponsiveValue(props)
+  if (!show) return false
+  return children
+}

package/src/components/helpers/Separator.js

@@ -0,0 +1,45 @@
+import { pipe, is } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ size, sizeCode }, { line }]) => ({
+  height: !!line ? 2 * size : size,
+  br: sizeCode,
+  center: true,
+  fullW: true,
+})
+
+export function Separator(rootProps) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter('divider'),
+    useSizeConverter('spaces', 'md'),
+    useThemeComponentModifier('Separator'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier
+  )([{}, rootProps])
+
+  const { line, lineProps, ...props } = formattedProps
+  const lineHeight = is(Number, line) ? line : 1
+
+  return (
+    <AbsView className="neko-separator" {...props}>
+      {!!line && (
+        <View bg={color} br={lineHeight} height={lineHeight} fullW className="neko-separator-line" {...lineProps} />
+      )}
+    </AbsView>
+  )
+}
+
+export const Divider = Separator

package/src/components/helpers/VerticalView.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { View } from '../structure/View'
+import { formatTransform } from '../../abstractions/helpers/transformStyle'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+
+export function VerticalView({ children, invert, ...props }) {
+  const wrapperRef = React.useRef(null)
+  const [size, setSize] = React.useState({})
+
+  React.useLayoutEffect(() => {
+    getElementSize(wrapperRef, setSize)
+  }, [])
+
+  const { height, width } = size
+
+  return (
+    <View width="100%" height="100%" {...props} relative ref={wrapperRef}>
+      <View
+        style={{
+          position: 'absolute',
+          width: height,
+          height: width,
+          transform: formatTransform([{ rotate: !!invert ? '90deg' : '-90deg' }]),
+          left: width / 2 - height / 2,
+          top: '50%',
+          marginTop: -width / 2,
+        }}
+      >
+        {children}
+      </View>
+    </View>
+  )
+}

package/src/components/helpers/index.js

@@ -0,0 +1,6 @@
+export * from './Separator'
+export * from './Responsive'
+export * from './VerticalView'
+export * from './PortalHandler'
+export * from './Portal'
+export * from './LazyRender'

package/src/components/index.js

@@ -0,0 +1,13 @@
+export * from './actions'
+export * from './animations'
+export * from './form'
+export * from './presentation'
+export * from './structure'
+export * from './text'
+export * from './helpers'
+export * from './inputs'
+export * from './state'
+export * from './layout'
+export * from './table'
+export * from './feedback'
+export * from './calendar'

package/src/components/inputs/Checkbox.js

@@ -0,0 +1,56 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsHiddenInput } from '../../abstractions/HiddenInput'
+import { ContentLabel } from '../presentation/ContentLabel'
+import { Link } from '../actions/Link'
+import { Picker } from './Picker'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Checkbox({ value, onChange, disabled, initialValue, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Checkbox') //
+  )([{}, rootProps])
+
+  const [localValue, setLocalValue] = React.useState(initialValue)
+  value = value === undefined ? localValue : value
+
+  const toggle = () => {
+    if (!!disabled) return
+    setLocalValue(!value)
+    onChange?.(!value)
+  }
+
+  return (
+    <Link onPress={toggle} className="neko-checkbox" disabled={disabled}>
+      <AbsHiddenInput checked={value} onChange={toggle} type="checkbox" disabled={disabled} />
+      <ContentLabel
+        size={sizeCode}
+        gap={8}
+        content={
+          <View height={size * 0.65} ratio={1} border={2} padding={2} borderColor={color} br={3} center>
+            {!!value && <View bg={color} br={2} flex fullW fullH />}
+          </View>
+        }
+        {...props}
+      />
+    </Link>
+  )
+}
+
+export function CheckboxGroup({ checkboxProps, ...props }) {
+  return (
+    <Picker
+      {...props}
+      multiple
+      renderOption={({ option, selected, onChange, labelKey, ...props }) => (
+        <Checkbox label={option[labelKey]} value={selected} onChange={onChange} {...props} {...checkboxProps} />
+      )}
+    />
+  )
+}

package/src/components/inputs/InputWrapper.js

@@ -0,0 +1,79 @@
+import { pipe, is } from 'ramda'
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Loading } from '../state/Loading'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  fullW: '100%', //
+  paddingH: 'sm',
+  bg: 'overlayBG',
+  border: true,
+  br: 'md',
+  row: true,
+  gap: 'sm',
+}
+
+export function InputWrapper({ prefix, suffix, prefixIcon, suffixIcon, loading, error, children, ...rootProps }) {
+  const [hover, setHover] = React.useState(false)
+  const inputRef = React.useRef()
+  const [{ size, sizeCode, onChange }, props] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('InputWrapper'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const handlePress = () => {
+    inputRef?.current?.focus?.()
+  }
+
+  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 && !!error) suffix = <Icon name="close-circle-fill" size={sizeCode} red />
+  if (!!loading) suffix = <Loading size={sizeCode} />
+
+  let borderColor = !!hover ? 'primary_op40' : 'divider'
+  if (!!error) borderColor = 'red_op40'
+
+  const child = React.Children.only(children)
+  const childWithProps = React.cloneElement(child, {
+    ...child.props,
+    ref: inputRef,
+    onChange: child.props.onChange || onChange,
+  })
+
+  return (
+    <View
+      className="neko-input-wrapper"
+      height={size}
+      onPress={handlePress}
+      borderColor={borderColor}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      {...props}
+    >
+      {!!prefix && (
+        <View paddingV={5} fullHeight center>
+          {prefix}
+        </View>
+      )}
+
+      <View flex fullH>
+        {childWithProps}
+      </View>
+
+      {!!suffix && (
+        <View paddingV={5} fullHeight center>
+          {suffix}
+        </View>
+      )}
+    </View>
+  )
+}