@neko-os/ui 0.0.4 → 0.0.6

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>
+    </>
+  )
+}

package/src/components/layout/LayoutHeader.js

@@ -0,0 +1,69 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+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 { useLayout } from './Layout'
+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 { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { sticky }]) => ({
+  bg: 'overlayBG',
+  fullW: true,
+  row: true,
+  centerV: true,
+  padding: 'md',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: sticky ? 90 : undefined,
+})
+
+export function LayoutHeader({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('LayoutHeader'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  const { registerHeader, unregisterHeader } = useLayout()
+  const headerRef = React.useRef(null)
+  const headerHeightRef = React.useRef(null)
+
+  React.useLayoutEffect(() => {
+    if (headerRef.current && !!rootProps.sticky) {
+      getElementSize(headerRef, ({ height }) => {
+        headerHeightRef.current = height
+        registerHeader?.(height)
+      })
+      return () => unregisterHeader?.(headerHeightRef.current)
+    }
+  }, [])
+
+  return (
+    <>
+      <AbsView className="neko-layout-header" {...props} ref={headerRef}>
+        {children}
+      </AbsView>
+    </>
+  )
+}

package/src/components/layout/LayoutSider.js

@@ -0,0 +1,64 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+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 { useLayout } from './Layout'
+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 { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  (layoutSize, headerSpace) =>
+  ([{}, { sticky }]) => ({
+    top: headerSpace || 0,
+    bottom: 0,
+    maxHeight: !!sticky ? '100vh' : undefined,
+    paddingB: !!sticky ? headerSpace : undefined,
+  })
+
+export function LayoutSider({ children, ...rootProps }) {
+  const { layoutSize, layoutHeaderSpace, registerSider, unregisterHeader } = useLayout()
+
+  const [_, props] = pipe(
+    useThemeComponentModifier('LayoutSider'),
+    useDefaultModifier(DEFAULT_PROPS(layoutSize, layoutHeaderSpace)),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  const siderRef = React.useRef(null)
+  const [siderWidth, setSiderWidth] = React.useState(rootProps.width || 0)
+
+  React.useLayoutEffect(() => {
+    getElementSize(siderRef, ({ width }) => setSiderWidth(width))
+  }, [])
+
+  return (
+    <>
+      {rootProps.fixed && (
+        <AbsView className="neko-layout-sider-empty-space" style={{ width: siderWidth, height: '100%' }} />
+      )}
+      <AbsView className="neko-layout-sider" {...props} ref={siderRef}>
+        {children}
+      </AbsView>
+    </>
+  )
+}

package/src/components/layout/index.js

@@ -0,0 +1,4 @@
+export * from './Layout'
+export * from './LayoutHeader'
+export * from './LayoutSider'
+export * from './LayoutContent'

package/src/components/presentation/Avatar.js

@@ -0,0 +1,79 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { IconLabel } from './IconLabel'
+import { Image } from './Image'
+import { getDynamicColor } from '../../theme/helpers/dynamicColor'
+import { getInitials } from '../../helpers'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+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 { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }, { round, square, src, dynamicColor, color }]) => {
+  return {
+    padding: !!src ? undefined : 1,
+    height: sizeCode,
+    width: sizeCode,
+    ratio: 1,
+    br: !!square ? moveScale(sizeCode, -2) || sizeCode : undefined,
+    round: !square,
+    center: true,
+    border: !!src ? undefined : 1,
+    overflow: 'hidden',
+    color: dynamicColor !== undefined ? getDynamicColor(dynamicColor) : color,
+  }
+}
+
+export function Avatar(rootProps) {
+  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Avatar'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useColorConverter('text3'),
+    useFullColorModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBorderModifier,
+    useShadowModifier,
+    useOverflowModifier
+  )([{}, rootProps])
+
+  let { initials, name, icon, src, invert, textProps, iconProps, ...props } = formattedProps
+  initials = initials || getInitials(name)
+
+  let content = (
+    <IconLabel
+      center
+      color={fontColor}
+      size={sizeCode}
+      label={!icon && initials}
+      icon={icon}
+      invert={invert}
+      textProps={{ strong: true, ...textProps }}
+      iconProps={iconProps}
+    />
+  )
+  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />
+
+  return (
+    <AbsView className="neko-avatar" {...props}>
+      {content}
+    </AbsView>
+  )
+}

package/src/components/presentation/AvatarLabel.js

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+
+import { Avatar } from './Avatar'
+import { ContentLabel } from './ContentLabel'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function AvatarLabel(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('AvatarLabel') //
+  )([{}, rootProps])
+
+  const {
+    icon,
+    label,
+    name,
+    initials,
+    src,
+    avatarColor,
+    square,
+    dynamicColor,
+    avatarProps,
+    moveAvatarSizeScale,
+    avatarSize,
+    ...props
+  } = formattedProps
+  const hasAvatar = !!name || !!initials || !!src
+
+  return (
+    <ContentLabel
+      className="neko-avatar-label"
+      label={label || name}
+      color={color}
+      size={sizeCode}
+      content={
+        <Avatar
+          name={name || label}
+          initials={initials}
+          icon={icon}
+          src={src}
+          size={avatarSize || moveScale(sizeCode, moveAvatarSizeScale || -1)}
+          color={avatarColor || color}
+          dynamicColor={dynamicColor}
+          square={square}
+          marginH={2}
+          {...avatarProps}
+        />
+      }
+      {...props}
+    />
+  )
+}
+
+export const AvatarText = AvatarLabel