@neko-os/ui 0.0.5 → 0.0.7

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

@@ -1,4 +1,4 @@
-import { useResponsiveValue } from '../../helpers/responsive'
+import { useResponsiveValue } from '../../responsive/responsiveHooks'
 
 export function ResponsiveRender(props) {
   const value = useResponsiveValue(props) || props.df

package/src/components/helpers/Separator.js

@@ -1,4 +1,4 @@
-import { pipe } from 'ramda'
+import { pipe, is } from 'ramda'
 
 import { AbsView } from '../../abstractions/View'
 import { View } from '../structure/View'
@@ -11,10 +11,11 @@ import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useSizeModifier } from '../../modifiers/size'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-const DEFAULT_PROPS = ([{ size, sizeCode }, { withLine }]) => ({
-  height: withLine ? 2 * size : size,
+const DEFAULT_PROPS = ([{ size, sizeCode }, { line }]) => ({
+  height: !!line ? 2 * size : size,
   br: sizeCode,
   center: true,
+  fullW: true,
 })
 
 export function Separator(rootProps) {
@@ -29,21 +30,16 @@ export function Separator(rootProps) {
     useFlexWrapperModifier
   )([{}, rootProps])
 
-  const { withLine, lineProps, lineWidth, lineHeight = 1, ...props } = formattedProps
+  const { line, lineProps, ...props } = formattedProps
+  const lineHeight = is(Number, line) ? line : 1
 
   return (
     <AbsView className="neko-separator" {...props}>
-      {!!withLine && (
-        <View
-          bg={color}
-          br={lineHeight}
-          height={lineHeight}
-          fullW
-          maxWidth={lineWidth}
-          className="neko-separator-line"
-          {...lineProps}
-        />
+      {!!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

@@ -1,2 +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

@@ -1,6 +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>
+  )
+}

package/src/components/inputs/Picker.js

@@ -0,0 +1,116 @@
+import React from 'react'
+
+import { Col } from '../structure/Col'
+import { LoadingView } from '../state/LoadingView'
+import { Row } from '../structure/Row'
+import { useOptions } from '../../helpers/options'
+
+function isSelected(value, option, config = {}) {
+  return !!config.multiple
+    ? value?.some?.((item) => compareOptionsValues(item, option, config))
+    : compareOptionsValues(value, option, config)
+}
+
+function compareOptionsValues(optionA, optionB, config = {}) {
+  const valueKey = config.valueKey || 'value'
+  const valueA = optionA?.[valueKey] || optionA
+  const valueB = optionB?.[valueKey] || optionB
+
+  if (!valueA || !valueB) return false
+
+  return valueA === valueB
+}
+
+function formatSingleChangeValue(option, value, { useRawOption, selected, valueKey }) {
+  let selectedOption = option
+  let selectedValue = option[valueKey]
+  if (!!useRawOption) selectedValue = option
+  if (selected) {
+    selectedOption = null
+    selectedValue = null
+  }
+
+  return selectedValue
+}
+
+function formatMultipleChangeValue(option, value, { useRawOption, selected, multiple, valueKey }) {
+  let selectedOption = option
+  let selectedValue = option[valueKey]
+  value = [...(value || [])]
+  if (!!useRawOption) selectedValue = option
+  if (selected) {
+    value = value.filter((item) => !isSelected(item, selectedOption, { multiple, valueKey }))
+  } else {
+    value.push(selectedValue)
+  }
+
+  return value
+}
+
+function PickerItem({ option, onChange, value, renderOption, useRawOption, multiple, labelKey, valueKey, ...props }) {
+  const selected = isSelected(value, option, { multiple, valueKey })
+
+  const handleChange = () => {
+    const formatChangeValueFunc = multiple ? formatMultipleChangeValue : formatSingleChangeValue
+    const formattedValue = formatChangeValueFunc(option, value, { selected, useRawOption, valueKey })
+    onChange(formattedValue)
+  }
+
+  return <Col {...props}>{renderOption({ option, selected, onChange: handleChange, valueKey, labelKey })}</Col>
+}
+
+export function Picker({
+  value,
+  initialValue,
+  onChange,
+  disabled,
+  options,
+  renderOption,
+  colProps,
+  useRawOption,
+  multiple,
+  valueKey,
+  labelKey,
+  ...rootProps
+}) {
+  const [localValue, setLocalValue] = React.useState(initialValue)
+  value = value === undefined ? localValue : value
+  onChange = onChange || setLocalValue
+
+  const handleChange = (v) => {
+    if (!!disabled) return
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const { options: finalOptions, isFirstLoad } = useOptions(options, {})
+
+  valueKey = valueKey || 'value'
+  labelKey = labelKey || 'label'
+
+  if (!renderOption) {
+    console.error('Picker requires a renderOption prop')
+    return false
+  }
+
+  return (
+    <LoadingView active={isFirstLoad} replaceChildren>
+      <Row className="neko-picker" gap="md" {...rootProps}>
+        {finalOptions?.map?.((option) => (
+          <PickerItem
+            key={option.value}
+            option={option}
+            onChange={handleChange}
+            value={value}
+            renderOption={renderOption}
+            useRawOption={useRawOption}
+            multiple={multiple}
+            valueKey={valueKey}
+            labelKey={labelKey}
+            {...colProps}
+          />
+        ))}
+      </Row>
+    </LoadingView>
+  )
+}

package/src/components/inputs/Radio.js

@@ -0,0 +1,55 @@
+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 Radio({ value, onChange, disabled, initialValue, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Radio') //
+  )([{}, 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-radio" disabled={disabled}>
+      <AbsHiddenInput checked={value} onChange={toggle} type="radio" disabled={disabled} />
+      <ContentLabel
+        size={sizeCode}
+        gap={8}
+        content={
+          <View height={size * 0.65} ratio={1} border={2} padding={3} borderColor={color} br={size} center>
+            {!!value && <View bg={color} br={size} flex fullW fullH />}
+          </View>
+        }
+        {...props}
+      />
+    </Link>
+  )
+}
+
+export function RadioGroup({ radioProps, ...props }) {
+  return (
+    <Picker
+      {...props}
+      renderOption={({ option, selected, onChange, labelKey, ...props }) => (
+        <Radio label={option[labelKey]} value={selected} onChange={onChange} {...props} {...radioProps} />
+      )}
+    />
+  )
+}

package/src/components/inputs/Switch.js

@@ -0,0 +1,60 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsSwitch } from '../../abstractions/Switch'
+import { ContentLabel } from '../presentation/ContentLabel'
+import { Picker } from './Picker'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Switch({ value, onChange, disabled, initialValue, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Switch') //
+  )([{}, rootProps])
+
+  const [localValue, setLocalValue] = React.useState(initialValue)
+  value = value === undefined ? localValue : value
+  onChange = onChange || setLocalValue
+
+  const toggle = () => {
+    if (!!disabled) return
+    setLocalValue(!value)
+    onChange?.(!value)
+  }
+
+  return (
+    <ContentLabel
+      className="neko-checkbox"
+      size={sizeCode}
+      gap={8}
+      disabled={disabled}
+      content={
+        <AbsSwitch
+          color={color}
+          value={value}
+          onValueChange={toggle}
+          trackColor={{ true: color }}
+          disabled={disabled}
+          height={size * 0.75}
+        />
+      }
+      {...props}
+    />
+  )
+}
+
+export function SwitchGroup({ switchProps, ...props }) {
+  return (
+    <Picker
+      multiple
+      row={false}
+      {...props}
+      renderOption={({ option, selected, onChange, labelKey, ...props }) => (
+        <Switch label={option[labelKey]} value={selected} onChange={onChange} {...props} {...switchProps} />
+      )}
+    />
+  )
+}

package/src/components/inputs/TextInput.js

@@ -0,0 +1,22 @@
+import { AbsTextInput } from '../../abstractions/TextInput'
+import { InputWrapper } from './InputWrapper'
+import { useColors } from '../../theme/ThemeHandler'
+
+export function TextInput({ value, ...props }) {
+  const colors = useColors()
+
+  const STYLE = {
+    width: '100%',
+    height: '100%',
+    borderWidth: 0,
+    background: 'transparent',
+    outline: 'none',
+    color: colors.text,
+  }
+
+  return (
+    <InputWrapper {...props}>
+      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} value={value} />
+    </InputWrapper>
+  )
+}

package/src/components/inputs/index.js

@@ -0,0 +1,6 @@
+export * from './Checkbox'
+export * from './Radio'
+export * from './Switch'
+export * from './InputWrapper'
+export * from './TextInput'
+export * from './Picker'

package/src/components/layout/Layout.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { View } from '../structure/View'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+
+const LayoutContext = React.createContext({})
+export const useLayout = () => React.useContext(LayoutContext) || {}
+
+export function Layout({ children, ...rootProps }) {
+  const [layoutHeaderSpace, setLayoutHeaderSpace] = React.useState(0)
+  const [layoutSiderSpace, setLayoutSiderSpace] = React.useState(0)
+
+  const registerHeader = (space) => setLayoutHeaderSpace((v) => v + space)
+  const unregisterHeader = (space) => setLayoutHeaderSpace((v) => v - space)
+
+  const [layoutSize, setLayoutSize] = React.useState({})
+  const layoutRef = React.useRef(null)
+
+  React.useLayoutEffect(() => {
+    getElementSize(layoutRef, setLayoutSize)
+  }, [])
+
+  const value = {
+    layoutSize,
+    layoutHeaderSpace,
+    setLayoutHeaderSpace,
+    layoutSiderSpace,
+    layoutSiderSpace,
+    registerHeader,
+    unregisterHeader,
+  }
+
+  return (
+    <LayoutContext.Provider value={value}>
+      <View className="neko-layout" bg="bg" flex relative {...rootProps} ref={layoutRef}>
+        {children}
+      </View>
+    </LayoutContext.Provider>
+  )
+}

package/src/components/layout/LayoutContent.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+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 { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  // flex: 1,
+}
+
+export function LayoutContent({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('LayoutContent'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+
+  return (
+    <>
+      <AbsView className="neko-layout-content" {...props}>
+        {children}
+      </AbsView>
+    </>
+  )
+}