@neko-os/ui 0.0.9 → 0.0.11

package/src/components/inputs/SegmentedPicker.js

@@ -0,0 +1,62 @@
+import { pipe } from 'ramda'
+
+import { Button } from '../actions'
+import { Picker } from './Picker'
+import { View } from '../structure'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  gap: 1,
+  br: sizeCode,
+  minHeight: sizeCode,
+  bg: 'overlayBG',
+  padding: 2,
+  wrap: false,
+  row: true,
+  border: true,
+  buttonProps: {
+    fullH: true,
+    size: sizeCode,
+  },
+})
+
+function PickerWrapper({ renderItem, options, ...props }) {
+  return (
+    <View row>
+      <View {...props}>{options?.map?.((option) => renderItem(option))}</View>
+    </View>
+  )
+}
+
+export function SegmentedPicker({ ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('SegmentPicker'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { buttonProps, color, ...props } = formattedProps
+
+  return (
+    <Picker
+      className="neko-segmented-picker"
+      Wrapper={PickerWrapper}
+      {...props}
+      renderOption={({ option, selected, onChange, labelKey, ...props }) => (
+        <Button
+          label={option[labelKey]}
+          onPress={onChange}
+          color={selected ? color || 'primary' : rootProps?.bg || 'overlayBG'}
+          round={rootProps?.round}
+          textProps={{ strong: selected }}
+          opacity={!selected && 0.8}
+          {...option}
+          {...buttonProps}
+        />
+      )}
+    />
+  )
+}

package/src/components/inputs/Select.js

@@ -0,0 +1,189 @@
+import React from 'react'
+
+import { Icon, IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { LinkInput } from './LinkInput'
+import { Picker, getOptionLabel, searchOptions } from './Picker'
+import { Popover } from '../structure/popover/Popover'
+import { TextInput } from './TextInput'
+import { View } from '../structure'
+import { useResponsiveValue } from '../../responsive'
+
+function FullWidthInputWrapper({ ref, ...props }) {
+  return (
+    <View fullW ref={ref}>
+      <TextInput {...props} />
+    </View>
+  )
+}
+
+export function Select({
+  value,
+  onChange,
+  onChangeSearch,
+  options,
+  placement,
+  placeholder,
+  initialLabel,
+  useBottomDrawer = { native: true, sm: true, md: true },
+  useSearch,
+  renderOption,
+  labelKey,
+  valueKey,
+  useRawOption,
+  multiple,
+  onEndReached,
+  renderFooter,
+  renderHeader,
+  pickerProps,
+  popoverProps,
+  popoverMaxHeight,
+  ...props
+}) {
+  const [focus, setFocus] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+  const [inputValue, setInputValue] = React.useState(initialLabel || '')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  labelKey = labelKey || pickerProps?.labelKey || 'label'
+  valueKey = valueKey || pickerProps?.valueKey || 'value'
+  useRawOption = useRawOption || pickerProps?.useRawOption
+  multiple = multiple || pickerProps?.multiple
+  onEndReached = onEndReached || pickerProps?.onEndReached
+  renderFooter = renderFooter || pickerProps?.renderFooter
+  renderHeader = renderHeader || pickerProps?.renderHeader
+  pickerProps = { ...pickerProps, labelKey, valueKey, useRawOption, multiple, onEndReached, renderFooter, renderHeader }
+
+  popoverMaxHeight = popoverMaxHeight || 300
+
+  useBottomDrawer = useResponsiveValue(useBottomDrawer)
+
+  value = value || localValue
+
+  const handleChange = React.useCallback(
+    (value, option) => {
+      if (!!multiple) {
+        setInputValue(value.map((item) => getOptionLabel(options, item, { valueKey, labelKey })).join(', '))
+      } else {
+        setInputValue(option?.[labelKey] || getOptionLabel(options, option, { valueKey, labelKey }))
+      }
+      setLocalValue(value)
+      onChange?.(value)
+    },
+    [labelKey, valueKey]
+  )
+
+  React.useEffect(() => {
+    if (!!multiple) {
+      setInputValue(value?.map?.((item) => getOptionLabel(options, item, { valueKey, labelKey })).join(', '))
+    } else {
+      const label = value?.[labelKey] || getOptionLabel(options, value, { valueKey, labelKey })
+      if (!!label || !value) setInputValue(label)
+    }
+  }, [value])
+
+  const handleChangeSearch = React.useCallback((v) => {
+    onChangeSearch?.(v)
+    setSearch(v)
+  }, [])
+
+  const Input = !useSearch || useBottomDrawer ? LinkInput : FullWidthInputWrapper
+  const valueWatcher = multiple && localValue
+
+  const finalRenderOption = React.useCallback(
+    (params) => {
+      if (!!renderOption) return renderOption(params)
+      const { option, labelKey, selected } = params
+      return <IconLabel {...option} label={option?.[labelKey]} flex strong={selected} />
+    },
+    [renderOption]
+  )
+
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      snapPoints={[450]}
+      useBottomDrawer={useBottomDrawer}
+      parentWidth
+      padding={0}
+      watch={[search, options, valueWatcher]}
+      unmountOnClose
+      maxHeight={popoverMaxHeight}
+      {...popoverProps}
+      renderContent={({ onClose }) => (
+        <>
+          {useBottomDrawer && useSearch && (
+            <View padding="md" paddingB="xs">
+              <TextInput
+                prefixIcon="search-line"
+                prefixIconColor="text4"
+                value={search}
+                onChange={handleChangeSearch}
+              />
+            </View>
+          )}
+          <Picker
+            row={false}
+            options={searchOptions(options, search, { labelKey })}
+            value={value}
+            gap={0}
+            maxHeight={!useBottomDrawer && popoverMaxHeight}
+            useFlatList
+            onlyOnScreen
+            itemMinHeight={30}
+            onChange={(v, option) => {
+              handleChange(v, option)
+              if (!multiple) onClose()
+            }}
+            {...pickerProps}
+            renderOption={({ option, selected, onChange }) => (
+              <Link
+                row
+                paddingH={useBottomDrawer ? 'md' : 'sm'}
+                paddingV="xs"
+                minHeight={useBottomDrawer ? 'xl' : 'md'}
+                gap="sm"
+                onMouseDown={(e) => !!multiple && e.preventDefault()}
+                onPress={onChange}
+                centerV
+                bg={selected && 'primary_op10'}
+              >
+                <View flex row>
+                  {finalRenderOption({ option, labelKey, selected })}
+                </View>
+                {selected && <Icon name="checkbox-circle-fill" primary />}
+              </Link>
+            )}
+          />
+        </>
+      )}
+    >
+      <Input
+        value={!!focus ? search : inputValue}
+        onChange={handleChangeSearch}
+        onFocus={() => {
+          handleChangeSearch('')
+          setFocus(true)
+        }}
+        onBlur={() => {
+          setTimeout(() => {
+            setFocus(false)
+          }, 200)
+        }}
+        // When the option to use tags presentation, use prefix to render the tags
+        // _prefix={
+        // multiple &&
+        // value?.length && (
+        // <Text>{value?.map((item) => getOptionLabel(options, item, { labelKey, valueKey })).join(', ')}</Text>
+        // )
+        // }
+        placeholder={(!multiple || !value?.length) && placeholder}
+        suffixIcon="arrow-down-s-fill"
+        suffixIconColor="text4"
+        fullW
+        {...props}
+      />
+    </Popover>
+  )
+}

package/src/components/inputs/datePicker/DayPicker.js

@@ -14,20 +14,19 @@ import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   if (!!value) value = dayjs(value)
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
+  value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
-  }, [value])
-
-  value = value === undefined ? localValue : value
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
     setLocalValue(v)
     onChange?.(v)
   }
 
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
-
   const { cells } = useCalendarDays(currentMonth)
 
   return (

package/src/components/inputs/datePicker/MonthPicker.js

@@ -14,10 +14,12 @@ const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
 export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -26,8 +28,6 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...pro
     onChange?.(newValue)
   }
 
-  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
-
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -17,10 +17,12 @@ const quarters = [1, 2, 3, 4]
 
 export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.quarter?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -29,8 +31,6 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...p
     onChange?.(newValue)
   }
 
-  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
-
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />

package/src/components/inputs/datePicker/WeekPicker.js

@@ -14,10 +14,12 @@ import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 
 export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
   const handleChange = (v) => {
@@ -26,8 +28,6 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     onChange?.(newValue)
   }
 
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
-
   const { cells } = useCalendarDays(currentMonth)
   const weeks = splitEvery(7, cells)
 

package/src/components/inputs/datePicker/YearPicker.js

@@ -11,12 +11,21 @@ import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
+function getDecade(value) {
+  const year = dayjs(value || undefined).year()
+  const decadeStartYear = Math.floor(year / 10) * 10
+  return dayjs().year(decadeStartYear).startOf('year')
+}
+
 export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
+  const [currentDecade, setCurrentDecade] = React.useState(() => getDecade(value))
+
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
+    if (value?.isValid?.()) setCurrentDecade(getDecade(value))
   }, [value?.year?.()])
 
   const handleChange = (v) => {
@@ -25,12 +34,6 @@ export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     onChange?.(newValue)
   }
 
-  const [currentDecade, setCurrentDecade] = React.useState(() => {
-    const year = dayjs(value).year()
-    const decadeStartYear = Math.floor(year / 10) * 10
-    return dayjs().year(decadeStartYear).startOf('year')
-  })
-
   const years = range(currentDecade.year(), currentDecade.year() + 10)
 
   return (

package/src/components/inputs/index.js

@@ -3,8 +3,12 @@ export * from './Radio'
 export * from './Switch'
 export * from './InputWrapper'
 export * from './TextInput'
+export * from './NumberInput'
 export * from './LinkInput'
 export * from './MaskInput'
 export * from './DateInput'
 export * from './datePicker/DatePicker'
 export * from './Picker'
+export * from './Select'
+export * from './RateInput'
+export * from './SegmentedPicker'

package/src/components/list/FlatList.js

@@ -1,6 +1,9 @@
 import { pipe } from 'ramda'
+import React from 'react'
 
 import { AbsFlatList } from '../../abstractions/FlatList'
+import { AbsStaticList } from '../../abstractions/StaticList'
+import { ConditionalLazyRender, Divider } from '../helpers'
 import { useAnimationModifier } from '../../modifiers/animation'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
@@ -12,6 +15,7 @@ import { useMarginModifier } from '../../modifiers/margin'
 import { useOverflowModifier } from '../../modifiers/overflow'
 import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
+import { useResponsiveValue } from '../../responsive'
 import { useShadowModifier } from '../../modifiers/shadow'
 import { useSizeModifier } from '../../modifiers/size'
 import { useStateModifier } from '../../modifiers/state'
@@ -27,7 +31,7 @@ const DEFAULT_PROPS = ([_, { horizontal }]) => {
 }
 
 export function FlatList({ children, ...rootProps }) {
-  const [_, props] = pipe(
+  const [_, formattedProps] = pipe(
     useThemeComponentModifier('FlatList'),
     useDefaultModifier(DEFAULT_PROPS),
     useFlexWrapperModifier,
@@ -44,11 +48,44 @@ export function FlatList({ children, ...rootProps }) {
     useBorderModifier,
     useShadowModifier
   )([{}, rootProps])
-  // useNormalView = useResponsiveValue(useNormalView)
+
+  let {
+    divider,
+    dividerColor,
+    dividerProps,
+    renderSeparator,
+    renderItem,
+    lazy,
+    onlyOnScreen,
+    itemMinHeight,
+    ...props
+  } = formattedProps
+  const noScroll = useResponsiveValue(rootProps.noScroll)
+  const Wrapper = noScroll ? AbsStaticList : AbsFlatList
+
+  const formattedRenderItem = React.useCallback(
+    (...params) => (
+      <ConditionalLazyRender
+        whenVisible={lazy || onlyOnScreen}
+        destroyOffScreen={onlyOnScreen}
+        minHeight={itemMinHeight}
+      >
+        {renderItem?.(...params)}
+      </ConditionalLazyRender>
+    ),
+    [renderItem]
+  )
+
+  if (!renderSeparator && !!divider) {
+    if (divider === true) divider = 1
+    renderSeparator = () => <Divider line={divider} height={divider} color={dividerColor} {...dividerProps} />
+  }
 
   return (
-    <AbsFlatList className="neko-flat-list" {...props}>
+    <Wrapper className="neko-flat-list" renderSeparator={renderSeparator} renderItem={formattedRenderItem} {...props}>
       {children}
-    </AbsFlatList>
+    </Wrapper>
   )
 }
+
+export const List = (props) => <FlatList noScroll {...props} />

package/src/components/presentation/Rate.js

@@ -0,0 +1,58 @@
+import { pipe, range, is } from 'ramda'
+
+import { Icon } from '../presentation'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  color: 'primary',
+  inactiveColor: 'text4_op50',
+  max: 5,
+  icon: 'star-fill',
+}
+
+export function Rate({ value, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('Rate'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, max, inactiveColor, tag, ...props } = formattedProps
+
+  return (
+    <View className="neko-rate" row gap="xxs" centerV minHeight={sizeCode} {...props}>
+      {range(1, max + 1).map((i) => {
+        const active = value >= i
+        const partial = getDecimalOrEdge(value, i)
+
+        let finalIcon = icon
+        if (is(Function, icon)) finalIcon = icon?.({ value, optionValue: i, active })
+
+        let finalColor = color
+        if (is(Function, color)) finalColor = color?.({ value, optionValue: i, active })
+
+        return (
+          <View center key={i} relative>
+            <Icon name={finalIcon} size={sizeCode} color={inactiveColor} />
+            {!!partial && (
+              <View absolute overflow="hidden" left={0} width={100 * partial + '%'}>
+                <Icon name={finalIcon} size={sizeCode} color={finalColor} />
+              </View>
+            )}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+function getDecimalOrEdge(value, i) {
+  if (value >= i) return 1
+  if (value < i - 1) return 0
+  return value - Math.floor(value)
+}

package/src/components/presentation/RateTag.js

@@ -0,0 +1,35 @@
+import { pipe } from 'ramda'
+
+import { Tag } from './Tag'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  icon: 'star-fill', //
+  // outline: false,
+}
+
+export function RateTag({ value, ...rootProps }) {
+  let [{ size, sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('RateTag'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, ...props } = formattedProps
+
+  return (
+    <Tag
+      icon={icon}
+      label={value}
+      color={color}
+      textProps={{ size: moveScale(sizeCode, -1) }}
+      gap={moveScale(sizeCode, -3)}
+      {...props}
+    />
+  )
+}

package/src/components/presentation/Result.js

@@ -46,11 +46,11 @@ export function Result({
     <View className="neko-result" center padding="lg" {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h3 {...textProps} {...titleProps}>
+      <Text h4 {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (
-        <Text text3 sm {...textProps} {...descriptionProps}>
+        <Text text3 sm marginT="sm" {...textProps} {...descriptionProps}>
           {description}
         </Text>
       )}

package/src/components/presentation/Tooltip.js

@@ -21,6 +21,7 @@ export function Tooltip(rootProps) {
   return (
     <Popover
       className="neko-tooltip"
+      padding="xs"
       {...props}
       content={
         <IconLabel

package/src/components/presentation/index.js

@@ -10,3 +10,5 @@ export * from './AvatarLabel'
 export * from './Image'
 export * from './ImageBackground'
 export * from './LabelValue'
+export * from './Rate'
+export * from './RateTag'

package/src/components/structure/Accordion.js

@@ -43,7 +43,7 @@ export function Accordion({ children, title, open, onChange, ...rootProps }) {
         row
         gap={moveScale(sizeCode, -2)}
         borderB={open ? props.border || true : open}
-        borderColor={props.borderColor || 'bg'}
+        borderColor={props.borderColor || 'divider_op40'}
         centerV
         {...headerProps}
         onPress={toggle}

package/src/components/structure/Row.js

@@ -2,12 +2,16 @@ import { pipe } from 'ramda'
 import React from 'react'
 
 import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
 import { useGridModifier } from '../../modifiers/grid'
 import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useShadowModifier } from '../../modifiers/shadow'
 import { useSizeModifier } from '../../modifiers/size'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
@@ -20,7 +24,11 @@ export function Row({ children, ...rootProps }) {
     usePositionModifier,
     useFlexWrapperModifier,
     useFlexModifier,
-    useMarginModifier
+    useMarginModifier,
+    usePaddingModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
   )([{}, rootProps])
 
   // Memoiza os children clonados para evitar recriação se childPaddingProps não mudar