@neko-os/ui 0.2.3 → 0.4.0

package/src/components/filter/PopoverFilterItem.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import { path } from 'ramda'
+
+import { Button } from '../actions/Button'
+import { LinkInput } from '../inputs/LinkInput'
+import { Popover } from '../structure/popover/Popover'
+import { View } from '../structure/View'
+import { useFilter } from './FilterHandler'
+import { useFilterPath } from './FilterGroup'
+
+function autoFormat(value) {
+  if (value == null) return undefined
+
+  if ('min' in value || 'max' in value) {
+    const { min, max } = value
+    if (min != null && max != null) return `${min} – ${max}`
+    if (min != null) return `≥ ${min}`
+    if (max != null) return `≤ ${max}`
+    return undefined
+  }
+
+  if ('start' in value || 'end' in value) {
+    const fmt = 'YYYY-MM-DD'
+    const s = value.start?.format?.(fmt) || value.start
+    const e = value.end?.format?.(fmt) || value.end
+    if (s && e) return `${s} – ${e}`
+    if (s) return `${s} →`
+    if (e) return `→ ${e}`
+    return undefined
+  }
+
+  return String(value)
+}
+
+function PopoverFilterContent({ value, onApply, submitOnClose, children, onClose }) {
+  const [local, setLocal] = React.useState(value)
+  const localRef = React.useRef(local)
+  localRef.current = local
+
+  React.useEffect(() => {
+    if (!submitOnClose) return
+    return () => onApply(localRef.current)
+  }, [])
+
+  const handleApply = () => {
+    onApply(local)
+    onClose()
+  }
+
+  return (
+    <View gap="sm">
+      {typeof children === 'function'
+        ? children({ value: local, onChange: setLocal })
+        : React.cloneElement(React.Children.only(children), { value: local, onChange: setLocal })}
+      <View row toRight>
+        <Button label="Apply" onPress={handleApply} xs />
+      </View>
+    </View>
+  )
+}
+
+export function PopoverFilterItem({ name, label, placeholder, children, submitOnClose, popoverProps, formatValue, ...props }) {
+  const { filters, onChangeFilter } = useFilter()
+  const listPath = useFilterPath(name)
+  const value = path(listPath, filters)
+
+  const displayText = value != null ? (formatValue?.(value) ?? autoFormat(value)) : undefined
+
+  return (
+    <Popover
+      trigger="click"
+      placement="bottomLeft"
+      unmountOnClose
+      {...popoverProps}
+      renderContent={({ onClose }) => (
+        <PopoverFilterContent value={value} onApply={(val) => onChangeFilter(listPath, val)} submitOnClose={submitOnClose} onClose={onClose}>
+          {children}
+        </PopoverFilterContent>
+      )}
+    >
+      <LinkInput value={displayText} placeholder={placeholder || label} suffixIcon="arrow-down-s-fill" suffixIconColor="text4" {...props} />
+    </Popover>
+  )
+}

package/src/components/filter/SearchInput.js

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { Icon } from '../presentation'
+import { Link } from '../actions'
+import { TextInput } from '../inputs'
+import { useFilter } from './FilterHandler'
+
+export function SearchInput({ value: valueProp, onChange: onChangeProp, placeholder = 'Search...', ...rest }) {
+  const filter = useFilter()
+
+  const value = valueProp ?? filter.search
+  const onChange = onChangeProp ?? filter.onChangeSearch
+
+  const [local, setLocal] = React.useState(value || '')
+
+  React.useEffect(() => {
+    setLocal(value || '')
+  }, [value])
+
+  const push = () => {
+    onChange?.(local)
+  }
+
+  const clear = () => {
+    setLocal('')
+    onChange?.('')
+  }
+
+  const suffix = !!local && (
+    <Link onPress={clear}>
+      <Icon name="close-line" />
+    </Link>
+  )
+
+  return (
+    <TextInput
+      prefixIcon="search-line"
+      prefixIconColor="text4"
+      placeholder={placeholder}
+      value={local}
+      onChange={setLocal}
+      onBlur={push}
+      onKeyDown={(e) => e.key === 'Enter' && push()}
+      onSubmitEditing={push}
+      suffix={suffix}
+      {...rest}
+    />
+  )
+}

package/src/components/filter/index.js

@@ -0,0 +1,6 @@
+export * from './FilterHandler'
+export * from './FilterGroup'
+export * from './FilterItem'
+export * from './PopoverFilterItem'
+export * from './SearchInput'
+export * from './DateFilter'

package/src/components/form/Form.js

@@ -9,14 +9,20 @@ 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 })
+export function Form({ form, onSubmit, onValuesChange, initialValues, children, loading, disabled, ...props }) {
+  const defaultForm = useNewForm({ onSubmit, onValuesChange, initialValues })
   form = form || defaultForm
 
+  // Keep external form's callbacks in sync with Form props
+  if (form._callbacksRef) {
+    if (onSubmit) form._callbacksRef.current.onSubmit = onSubmit
+    if (onValuesChange) form._callbacksRef.current.onValuesChange = onValuesChange
+  }
+
   return (
     <FormContext.Provider value={{ loading, disabled, form }}>
       <LoadingView active={loading} noWrapper>
-        <FormWrapperComponent form={form} gap="md" {...props}>
+        <FormWrapperComponent form={form} onSubmit={onSubmit} gap="md" {...props}>
           {children}
         </FormWrapperComponent>
       </LoadingView>

package/src/components/form/FormItem.js

@@ -15,6 +15,11 @@ export function FormItem({
   useDefaultValue,
   rules,
   validateTrigger = 'onSubmit',
+  hidden,
+  valuePropName,
+  initialValue,
+  extra,
+  noStyle,
   ...props
 }) {
   const form = useFormInstance()
@@ -24,6 +29,13 @@ export function FormItem({
   const [value, setValue] = React.useState(form.getFieldValue(listPath))
   const [error, setError] = React.useState(form.getError(listPath))
 
+  // Set initial value on mount if provided and field has no value
+  React.useEffect(() => {
+    if (initialValue !== undefined && form.getFieldValue(listPath) === undefined) {
+      form.setFieldValue(listPath, initialValue)
+    }
+  }, [listPathStr])
+
   // Register rules with the form
   React.useEffect(() => {
     return form.registerRules(listPath, rules, validateTrigger)
@@ -56,7 +68,7 @@ export function FormItem({
     }
   }
 
-  let valueKey = 'value'
+  let valueKey = valuePropName || 'value'
   if (!!useDefaultValue) valueKey = 'defaultValue'
 
   const child = typeof children === 'function' ? null : React.Children.only(children)
@@ -77,6 +89,18 @@ export function FormItem({
     content = React.cloneElement(child, { ...child.props, ...childProps })
   }
 
+  if (hidden) {
+    return (
+      <FormGroup name={listPath}>
+        <View hidden>{content}</View>
+      </FormGroup>
+    )
+  }
+
+  if (noStyle) {
+    return <FormGroup name={listPath}>{content}</FormGroup>
+  }
+
   return (
     <FormGroup name={listPath}>
       <View {...props}>
@@ -87,6 +111,7 @@ export function FormItem({
         )}
         {content}
         {error && <Text color="red">{error}</Text>}
+        {extra && <View marginT="xxs">{extra}</View>}
       </View>
     </FormGroup>
   )

package/src/components/form/FormWrapperComponent.js

@@ -12,7 +12,7 @@ import { usePositionModifier } from '../../modifiers/position'
 import { useShadowModifier } from '../../modifiers/shadow'
 import { useSizeModifier } from '../../modifiers/size'
 
-export function FormWrapperComponent({ children, form, ...rootProps }) {
+export function FormWrapperComponent({ children, form, onSubmit, ...rootProps }) {
   const formState = useFormState()
   const [_, props] = pipe(
     useDisplayModifier, //
@@ -28,10 +28,19 @@ export function FormWrapperComponent({ children, form, ...rootProps }) {
     useShadowModifier
   )([{}, rootProps])
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault()
     if (formState?.loading || formState?.disabled) return
-    form.handleSubmit()
+    if (onSubmit) {
+      try {
+        const values = await form.validateFields()
+        onSubmit(values)
+      } catch (e) {
+        // Validation failed, errors already set on fields
+      }
+    } else {
+      form.handleSubmit()
+    }
   }
 
   return (

package/src/components/form/useNewForm.js

@@ -2,12 +2,16 @@ import { assocPath, path } from 'ramda'
 import React from 'react'
 import { validateRules, validateAllFields, normalizeRules } from './validation'
 
-export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
+export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesChange } = {}) {
   const valuesRef = React.useRef({ ...initialValues })
+  const initialValuesRef = React.useRef({ ...initialValues })
   const errorsRef = React.useRef({}) // Flat structure: { 'users': 'error', 'users.0.name': 'error' }
   const listenersRef = React.useRef({})
   const errorListenersRef = React.useRef({})
   const rulesRegistryRef = React.useRef(new Map())
+  const callbacksRef = React.useRef({ onSubmit, validate, onValuesChange })
+
+  callbacksRef.current = { onSubmit, validate, onValuesChange }
 
   const formApi = React.useMemo(() => {
     const toKey = (name) => (Array.isArray(name) ? name.join('.') : name)
@@ -20,6 +24,14 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       }
     }
 
+    const notifyAll = () => {
+      Object.keys(listenersRef.current).forEach((key) => {
+        const keyPath = key.split('.')
+        const value = path(keyPath, valuesRef.current)
+        listenersRef.current[key]?.forEach((cb) => cb(value))
+      })
+    }
+
     const notifyError = (name) => {
       const key = toKey(name)
       if (errorListenersRef.current[key]) {
@@ -27,13 +39,40 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       }
     }
 
+    const notifyAllErrors = () => {
+      Object.keys(errorListenersRef.current).forEach((key) => {
+        errorListenersRef.current[key]?.forEach((cb) => cb(errorsRef.current[key]))
+      })
+    }
+
     const setFieldValue = (name, value) => {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current)
       notify(name)
+      const fn = callbacksRef.current.onValuesChange
+      if (fn) fn(name, valuesRef.current)
     }
 
     const getFieldValue = (name) => path(toPath(name), valuesRef.current)
 
+    const getFieldsValue = () => ({ ...valuesRef.current })
+
+    const setFieldsValue = (obj) => {
+      if (!obj) return
+      Object.entries(obj).forEach(([key, value]) => {
+        valuesRef.current = assocPath(toPath(key), value, valuesRef.current)
+      })
+      notifyAll()
+      const fn = callbacksRef.current.onValuesChange
+      if (fn) fn(null, valuesRef.current)
+    }
+
+    const resetFields = () => {
+      valuesRef.current = { ...initialValuesRef.current }
+      errorsRef.current = {}
+      notifyAll()
+      notifyAllErrors()
+    }
+
     // Flat error lookup by key
     const getError = (name) => {
       const key = toKey(name)
@@ -112,6 +151,7 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       const rulesErrors = await validateAllFields(valuesRef.current, rulesRegistryRef.current)
 
       // Run legacy validate function if provided
+      const { validate } = callbacksRef.current
       const legacyErrors = validate ? validate(valuesRef.current) || {} : {}
 
       // Store errors in flat structure
@@ -134,16 +174,25 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       return Object.keys(errorsRef.current).length === 0
     }
 
+    const validateFields = async () => {
+      const isValid = await validateForm()
+      if (!isValid) return Promise.reject(errorsRef.current)
+      return { ...valuesRef.current }
+    }
+
     const handleSubmit = async () => {
       const isValid = await validateForm()
       if (!isValid) return
-      console.log('SUBMIT')
-      onSubmit(valuesRef.current)
+      const { onSubmit } = callbacksRef.current
+      if (onSubmit) onSubmit({ ...valuesRef.current })
     }
 
     return {
       setFieldValue,
       getFieldValue,
+      getFieldsValue,
+      setFieldsValue,
+      resetFields,
       getError,
       setError,
       clearErrors,
@@ -151,10 +200,12 @@ export function useNewForm({ initialValues = {}, validate, onSubmit } = {}) {
       registerErrorListener,
       registerRules,
       validateField,
+      validateFields,
       handleSubmit,
       valuesRef,
+      _callbacksRef: callbacksRef,
     }
-  }, [validate, onSubmit])
+  }, [])
 
   return formApi
 }

package/src/components/helpers/Separator.js

@@ -11,12 +11,19 @@ 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,
-})
+const DEFAULT_PROPS = ([{ size, sizeCode }, { line, vertical }]) => {
+  const lineSize = is(Number, line) ? line : 1
+  return {
+    ...(vertical
+      ? { width: !!line ? 2 * size : size, fullH: true, row: true }
+      : { height: !!line ? 2 * size : size, fullW: true }),
+    br: sizeCode,
+    center: true,
+    lineProps: vertical
+      ? { width: lineSize, fullH: true, br: lineSize }
+      : { height: lineSize, fullW: true, br: lineSize },
+  }
+}
 
 export function Separator(rootProps) {
   const [{ color }, formattedProps] = pipe(
@@ -30,14 +37,11 @@ export function Separator(rootProps) {
     useFlexWrapperModifier
   )([{}, rootProps])
 
-  const { line, lineProps, ...props } = formattedProps
-  const lineHeight = is(Number, line) ? line : 1
+  const { line, vertical, lineProps, ...props } = formattedProps
 
   return (
     <AbsView className="neko-separator" {...props}>
-      {!!line && (
-        <View bg={color} br={lineHeight} height={lineHeight} fullW className="neko-separator-line" {...lineProps} />
-      )}
+      {!!line && <View bg={color} className="neko-separator-line" {...lineProps} />}
     </AbsView>
   )
 }

package/src/components/helpers/index.js

@@ -3,5 +3,6 @@ export * from './Responsive'
 export * from './VerticalView'
 export * from './PortalHandler'
 export * from './Portal'
+export * from './LazyAction'
 export * from './LazyRender'
 export * from './ConditionalLazyRender'

package/src/components/index.js

@@ -16,3 +16,5 @@ export * from './list'
 export * from './tabs'
 export * from './theme'
 export * from './sections'
+export * from './filter'
+export * from './steps'

package/src/components/inputs/BooleanSelect.js

@@ -0,0 +1,14 @@
+import { Select } from './Select'
+
+export function BooleanSelect({ trueLabel = 'True', falseLabel = 'False', placeholder, ...props }) {
+  return (
+    <Select
+      placeholder={placeholder}
+      options={[
+        { label: trueLabel, value: true },
+        { label: falseLabel, value: false },
+      ]}
+      {...props}
+    />
+  )
+}

package/src/components/inputs/DateInput.js

@@ -47,6 +47,7 @@ export function DateInput({
   placement,
   type = 'day',
   format,
+  startsOpen,
   useBottomDrawer = { native: true, sm: true, md: true },
   ...props
 }) {
@@ -88,13 +89,14 @@ export function DateInput({
   return (
     <Popover
       trigger="click"
+      startsOpen={startsOpen}
       placement={placement || 'bottomLeft'}
       snapPoints={[350]}
       useBottomDrawer={useBottomDrawer}
       bottomDrawerProps={{ contentProps: { padding: 'md' } }}
       watch={[value?.format?.('YYYYMMDD')]}
       renderContent={({ onClose }) => (
-        <View flex centerH>
+        <View flex centerH onMouseDown={(e) => e.preventDefault()}>
           <DatePicker
             value={value}
             onChange={(v) => {

package/src/components/inputs/DateRangeInput.js

@@ -0,0 +1,41 @@
+import { DateInput } from './DateInput'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+export function DateRangeInput({
+  value,
+  onChange,
+  startProps,
+  endProps,
+  placeholderStart = 'Start',
+  placeholderEnd = 'End',
+  separator = '–',
+  ...props
+}) {
+  const handleChangeStart = (start) => onChange?.({ ...value, start })
+  const handleChangeEnd = (end) => onChange?.({ ...value, end })
+
+  return (
+    <View row centerV gap="sm">
+      <DateInput
+        placeholder={placeholderStart}
+        value={value?.start}
+        onChange={handleChangeStart}
+        max={value?.end}
+        flex
+        {...props}
+        {...startProps}
+      />
+      <Text text4>{separator}</Text>
+      <DateInput
+        placeholder={placeholderEnd}
+        value={value?.end}
+        onChange={handleChangeEnd}
+        min={value?.start}
+        flex
+        {...props}
+        {...endProps}
+      />
+    </View>
+  )
+}

package/src/components/inputs/Editable.js

@@ -0,0 +1,129 @@
+import { isEmpty } from 'ramda'
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { IconLabel } from '../presentation/IconLabel'
+import { Loading } from '../state/Loading'
+import { Text } from '../text/Text'
+import { TextInput } from './TextInput'
+import { View } from '../structure/View'
+
+function getInputValue(e) {
+  return e?.target?.value !== undefined ? e.target.value : e
+}
+
+function hasValue(v) {
+  return v !== undefined && v !== null && !isEmpty(v)
+}
+
+function EditableInput({
+  Input,
+  renderInput,
+  onChange,
+  onClose,
+  onSubmit,
+  submitOnChange,
+  submitWhenHasNoValue,
+  disableCloseOnBlur,
+  alwaysEditing,
+  ...props
+}) {
+  const initialValue = props.value || props.defaultValue
+  const [value, setValue] = React.useState(initialValue)
+  Input = Input || TextInput
+
+  const submit = (val) => {
+    const inputHasValue = hasValue(val)
+    const shouldSubmit = submitWhenHasNoValue || inputHasValue
+    const hasChangedTheValue = val !== initialValue
+    if (shouldSubmit && hasChangedTheValue) {
+      onSubmit && onSubmit(val)
+    }
+    onClose()
+  }
+
+  const handleSubmit = (e) => submit(getInputValue(e))
+
+  const handleChange = (e) => {
+    const inputValue = getInputValue(e)
+    setValue(inputValue)
+    onChange && onChange(inputValue)
+    if (submitOnChange) submit(inputValue)
+  }
+
+  const { value: _, defaultValue: __, ...inputProps } = props
+
+  if (!!renderInput) {
+    return renderInput({ handleSubmit, handleChange, value, ...inputProps })
+  }
+
+  return (
+    <Input
+      startsOpen
+      sm
+      value={value}
+      onChange={handleChange}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault()
+          handleSubmit(e)
+        }
+      }}
+      onBlur={!disableCloseOnBlur && !alwaysEditing ? () => submit(value) : undefined}
+      onOpenChange={(open) => !open && !alwaysEditing && submit(value)}
+      onOk={() => submit(value)}
+      {...inputProps}
+    />
+  )
+}
+
+export function Editable({ children, hidden, disabled, visibleIcon, emptyLabel, emptyIcon, loading, ...props }) {
+  const [isEditing, setIsEditing] = React.useState(false)
+  const [hovered, setHovered] = React.useState(false)
+
+  if (!!props.alwaysEditing || isEditing) {
+    return (
+      <EditableInput
+        disabled={disabled}
+        autoFocus={!props.alwaysEditing}
+        onClose={() => setIsEditing(false)}
+        {...props}
+      />
+    )
+  }
+
+  if (disabled) return children
+  if (loading) return <Loading />
+
+  const hasAnyValue = hasValue(props.value || props.defaultValue)
+  const showEmptyLabel = emptyLabel && !hasAnyValue
+
+  return (
+    <View
+      row
+      centerV
+      gap={!hidden ? 1 : 0}
+      pointer
+      border={!hidden ? 1 : 0}
+      borderStyle="dashed"
+      borderColor={hovered && !hidden ? 'divider' : 'transparent'}
+      br={!hidden ? 'xxs' : undefined}
+      onClick={() => {
+        setIsEditing(true)
+        setHovered(false)
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <View flex minHeight={17} maxWidth="100%">
+        {hovered && !hasAnyValue && props.placeholder && <Text color="text4">{props.placeholder}</Text>}
+        {showEmptyLabel ? <IconLabel icon={emptyIcon} label={emptyLabel} color="text4" /> : children}
+      </View>
+      {!hidden && (visibleIcon || hovered) && (
+        <View>
+          <Icon name="RiEditLine" text4 />
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/inputs/EnabledSelect.js

@@ -0,0 +1,14 @@
+import { Select } from './Select'
+
+export function EnabledSelect({ enabledLabel = 'Enabled', disabledLabel = 'Disabled', placeholder, ...props }) {
+  return (
+    <Select
+      placeholder={placeholder}
+      options={[
+        { label: enabledLabel, value: false },
+        { label: disabledLabel, value: true },
+      ]}
+      {...props}
+    />
+  )
+}