@neko-os/ui 0.0.5 → 0.0.6

package/src/components/actions/Breadcrumb.js

@@ -0,0 +1,47 @@
+import { pipe, omit } from 'ramda'
+
+import { IconLabel } from '../presentation/IconLabel'
+import { Link } from './Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Breadcrumb({ items, onChange, ...rootProps }) {
+  const [{ sizeCode }, props] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Breadcrumb')
+  )([{}, rootProps])
+
+  const gap = 'sm'
+
+  const handlePress = (item, index) => {
+    onChange?.(item, index)
+    item.onPress?.(index)
+    item.onClick?.(index)
+  }
+
+  return (
+    <View className="neko-breadcrumb" row gap={gap} centerV {...props}>
+      {items.map((item, index) => {
+        const active = index === items.length - 1
+
+        return (
+          <View row gap={gap} centerV key={item.key || index}>
+            <Link onPress={!active ? () => handlePress(item, index) : undefined}>
+              <IconLabel
+                color={active ? 'text' : 'text3'}
+                size={sizeCode}
+                moveIconSizeScale={-2}
+                strong={active}
+                {...omit(['onPress', 'onClick'], item)}
+              />
+            </Link>
+            {!active && <Text text4 label="/" size={moveScale(sizeCode, -1)} />}
+          </View>
+        )
+      })}
+    </View>
+  )
+}

package/src/components/actions/Button.js

@@ -6,6 +6,7 @@ import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
 import { useColorConverter } from '../../modifiers/colorConverter'
 import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
 import { useFullColorModifier } from '../../modifiers/fullColor'
@@ -14,6 +15,7 @@ import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = ([{ sizeCode }]) => ({
@@ -21,17 +23,19 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   paddingV: 2,
   height: sizeCode,
   br: sizeCode,
-  borderWidth: 1,
+  border: 1,
   center: true,
 })
 
 export function Button(rootProps) {
-  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+  const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
     useColorConverter('primary'),
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Button'),
     useDefaultModifier(DEFAULT_PROPS),
     useFullColorModifier,
+    useDisplayModifier,
+    useStateModifier,
     useSizeModifier,
     usePositionModifier,
     usePaddingModifier,
@@ -45,7 +49,7 @@ export function Button(rootProps) {
   const { label, icon, textProps, iconProps, gap, invert, size, ...props } = formattedProps
 
   return (
-    <AbsTouchableOpacity className="neko-button neko-wave-click-effect" {...props}>
+    <AbsTouchableOpacity className="neko-button neko-wave-click-effect" type="button" {...props}>
       <IconLabel
         center
         color={fontColor}
@@ -56,6 +60,7 @@ export function Button(rootProps) {
         invert={invert}
         textProps={{ strong: true, ...textProps }}
         iconProps={iconProps}
+        loading={loading}
       />
     </AbsTouchableOpacity>
   )

package/src/components/actions/Dropdown.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation/IconLabel'
+import { Link } from './Link'
+import { Menu } from './menu/Menu'
+import { Popover } from '../structure/popover/Popover'
+import { View } from '../structure/View'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Dropdown({ items, ...rootProps }) {
+  const [_, formattedProps] = pipe(
+    useThemeComponentModifier('Dropdown')
+    // useColorConverter('primary'),
+    // useSizeModifier, //
+    // useFlexWrapperModifier,
+    // useDisplayModifier,
+    // useStateModifier,
+    // usePositionModifier,
+    // usePaddingModifier,
+    // useMarginModifier,
+    // useFlexModifier
+  )([{}, rootProps])
+
+  const {
+    onChange,
+    label,
+    trigger = 'click',
+    icon,
+    strong,
+    color,
+    popoverProps,
+    iconLabelProps,
+    children,
+    ...props
+  } = formattedProps
+
+  return (
+    <View className="neko-dropdown" {...props}>
+      <Popover
+        useParentMinWidth
+        placement="bottomLeft"
+        trigger={trigger}
+        padding="xs"
+        {...popoverProps}
+        renderContent={({ onClose }) => {
+          const handleChange = (...params) => {
+            if (onChange) onChange(...params)
+            onClose()
+          }
+          return <Menu vertical items={items} gap={0} onChange={handleChange} linkPaddingH="xs" />
+        }}
+      >
+        {children || (
+          <Link>
+            <IconLabel
+              label={label || '---'}
+              icon={icon || 'arrow-down-s-fill'}
+              strong={strong}
+              color={color}
+              invert
+              {...iconLabelProps}
+            />
+          </Link>
+        )}
+      </Popover>
+    </View>
+  )
+}

package/src/components/actions/Link.js

@@ -1,7 +1,12 @@
 import { pipe, is } from 'ramda'
 
 import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { LoadingView } from '../state/LoadingView'
 import { Text } from '../text/Text'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
 import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
@@ -9,31 +14,39 @@ import { useMarginModifier } from '../../modifiers/margin'
 import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
 import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-export function Link({ label, children, onPress, ...rootProps }) {
-  const [_, props] = pipe(
+export function Link({ label, children, href, target, ...rootProps }) {
+  const [{ loading, color: color }, props] = pipe(
     useThemeComponentModifier('Link'),
+    useBackgroundModifier,
+    useColorConverter('primary'),
+    useAnimationModifier,
     useSizeModifier, //
-    useDisplayModifier, //
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useBorderModifier,
     usePositionModifier,
     usePaddingModifier,
     useMarginModifier,
-    useFlexWrapperModifier,
     useFlexModifier
   )([{}, rootProps])
 
   if (!!label || is(String, children)) {
     children = (
-      <Text primary {...props}>
+      <Text color={color} {...props}>
         {label || children}
       </Text>
     )
   }
 
   return (
-    <AbsTouchableOpacity className="neko-link" link onPress={!!props.disabled ? undefined : onPress} {...props}>
-      {children}
-    </AbsTouchableOpacity>
+    <LoadingView active={loading} noWrapper replaceChildren>
+      <AbsTouchableOpacity className="neko-link" link target={target} href={!props.disabled && href} {...props}>
+        {children}
+      </AbsTouchableOpacity>
+    </LoadingView>
   )
 }

package/src/components/actions/index.js

@@ -1,2 +1,5 @@
 export * from './Button'
 export * from './Link'
+export * from './Dropdown'
+export * from './Breadcrumb'
+export * from './menu/Menu'

package/src/components/actions/menu/HorizontalMenu.js

@@ -0,0 +1,96 @@
+import { omit, pipe } from 'ramda'
+import React from 'react'
+
+import { IconText } from '../../presentation/IconLabel'
+import { Link } from '../Link'
+import { SubmenuWrapper } from './SubmenuWrapper'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+function Item({
+  item,
+  linkPaddingH = 'md',
+  handlePress,
+  linkProps,
+  activeIndex,
+  activeKey,
+  activeColor = 'primary',
+  color,
+  sizeCode,
+  index,
+  ...props
+}) {
+  activeColor = activeColor || 'primary'
+  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  if (!active && activeIndex >= 0) active = activeIndex === index
+  if (!active && activeKey !== undefined) active = activeKey === item.key
+
+  return (
+    <SubmenuWrapper
+      item={item}
+      onChange={handlePress}
+      activeKey={activeKey}
+      color={color}
+      placement="bottomRight"
+      hideIcon
+    >
+      <Link
+        key={key || index}
+        fullH
+        center
+        paddingH={linkPaddingH}
+        {...linkProps}
+        onPress={() => handlePress(item, index)}
+      >
+        <IconText
+          color={active ? activeColor : color}
+          fullH
+          marginT={3}
+          borderB={3}
+          borderColor={active ? activeColor : 'transparent'}
+          transition="border-color 0.6s ease"
+          size={sizeCode}
+          {...childProps}
+        />
+      </Link>
+    </SubmenuWrapper>
+  )
+}
+
+export function HorizontalMenu(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('HorizontalMenu') //
+  )([{}, rootProps])
+
+  let { gap = 'sm', height = 50, items, onChange, onChangeIndex, ...props } = formattedProps
+
+  const handlePress = React.useCallback(
+    (item, index) => {
+      if (!!onChange) onChange(item, index)
+      if (!!onChangeIndex) onChangeIndex(index)
+      if (!!item.onPress) item.onPress()
+      if (!!item.onClick) item.onClick()
+    },
+    [onChange, onChangeIndex]
+  )
+
+  return (
+    <View className="neko-horizontal-menu" row gap={gap} height={height} centerV {...props}>
+      {items.map((item, index) => (
+        <Item
+          key={item.key || index}
+          item={item}
+          handlePress={handlePress}
+          color={color}
+          sizeCode={sizeCode}
+          index={index}
+          {...props}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/actions/menu/Menu.js

@@ -0,0 +1,7 @@
+import { HorizontalMenu } from './HorizontalMenu'
+import { VerticalMenu } from './VerticalMenu'
+
+export function Menu({ vertical, ...props }) {
+  if (!!vertical) return <VerticalMenu {...props} />
+  return <HorizontalMenu {...props} />
+}

package/src/components/actions/menu/SubmenuWrapper.js

@@ -0,0 +1,16 @@
+import { Dropdown } from '../Dropdown'
+import { Icon } from '../../presentation/Icon'
+import { View } from '../../structure/View'
+
+export function SubmenuWrapper({ item, children, placement, hideIcon, ...props }) {
+  if (!item.subItems?.length) return children
+
+  return (
+    <Dropdown popoverProps={{ placement: placement || 'rightTop' }} items={item.subItems} trigger="hover" {...props}>
+      <View flex row gap="xxs" center fullH>
+        {children}
+        {!hideIcon && <Icon name="arrow-right-s-line" />}
+      </View>
+    </Dropdown>
+  )
+}

package/src/components/actions/menu/VerticalMenu.js

@@ -0,0 +1,107 @@
+import { omit, pipe } from 'ramda'
+import React from 'react'
+import tinycolor from 'tinycolor2'
+
+import { Divider } from '../../helpers/Separator'
+import { IconText } from '../../presentation/IconLabel'
+import { Link } from '../Link'
+import { SubmenuWrapper } from './SubmenuWrapper'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+function LinkItem({
+  item,
+  linkPaddingH = 'md',
+  linkPaddingV = 'xs',
+  handlePress,
+  linkProps,
+  activeIndex,
+  activeKey,
+  activeColor = 'primary',
+  color,
+  sizeCode,
+  index,
+  ...props
+}) {
+  activeColor = activeColor || 'primary'
+  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  if (!active && activeIndex >= 0) active = activeIndex === index
+  if (!active && activeKey !== undefined) active = activeKey === item.key
+  const bg = active && tinycolor(color).setAlpha(0.03).toString()
+
+  return (
+    <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
+      <Link
+        fullW
+        center
+        paddingH={linkPaddingH}
+        paddingV={linkPaddingV}
+        marginR={3}
+        borderL={3}
+        marginV={!!active && -4}
+        borderColor={active ? activeColor : 'transparent'}
+        bg={bg}
+        transition="border-color 0.5s ease, background 0.3s ease"
+        {...linkProps}
+        onPress={() => handlePress(item, index)}
+      >
+        <IconText paddingV={active && 4} color={active ? activeColor : color} fullW size={sizeCode} {...childProps} />
+      </Link>
+    </SubmenuWrapper>
+  )
+}
+
+function DividerItem({ linkPaddingH = 'md', item }) {
+  let content = <Divider height="xxs" line {...item} />
+  if (!item.label) return content
+  return (
+    <>
+      {content}
+      <Text size="xs" color="text4" paddingH={linkPaddingH || 'md'} strong {...item} />
+    </>
+  )
+}
+
+function Item({ item, ...props }) {
+  if (item.type === 'divider') return <DividerItem item={item} {...props} />
+  return <LinkItem item={item} {...props} />
+}
+
+export function VerticalMenu(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter('text'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('VerticalMenu') //
+  )([{}, rootProps])
+
+  let { gap = 'sm', items, onChange, onChangeIndex, ...props } = formattedProps
+
+  const handlePress = React.useCallback(
+    (item, index) => {
+      if (!!onChange) onChange(item, index)
+      if (!!onChangeIndex) onChangeIndex(index)
+      if (!!item.onPress) item.onPress()
+      if (!!item.onClick) item.onClick()
+    },
+    [onChange, onChangeIndex]
+  )
+
+  return (
+    <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
+      {items.map((item, index) => (
+        <Item
+          key={item.key || index}
+          item={item}
+          handlePress={handlePress}
+          color={color}
+          sizeCode={sizeCode}
+          index={index}
+          {...props}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/animations/AnimatedView.js

@@ -0,0 +1,45 @@
+import { pipe } from 'ramda'
+
+import { AbsAnimatedView } from '../../abstractions/AnimatedView'
+import { useAnimatedEffects } from '../../modifiers/animations/animatedEffects'
+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 { 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 { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function AnimatedView({ children, ...rootProps }) {
+  const [{ lazy, render, hasOpened }, props] = pipe(
+    useAnimatedEffects,
+    useThemeComponentModifier('AnimatedView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  if (lazy && !hasOpened) return null
+  if (!render) return null
+
+  return (
+    <AbsAnimatedView className="neko-animated-view" {...props}>
+      {children}
+    </AbsAnimatedView>
+  )
+}

package/src/components/animations/DraggableSlideView.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsDraggableSlideView } from '../../abstractions/DraggableSlideView'
+import { useAnimationModifier } from '../../modifiers/animation'
+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 { 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 { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function DraggableSlideView({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('DraggableSlideView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsDraggableSlideView className="neko-draggable-slide-view" {...props}>
+      {children}
+    </AbsDraggableSlideView>
+  )
+}

package/src/components/animations/index.js

@@ -0,0 +1,2 @@
+export * from './AnimatedView'
+export * from './DraggableSlideView'

package/src/components/calendar/DayPicker.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { Col } from '../structure/Col'
+import { Grid } from '../structure/Row'
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useCalendarDays } from './_helpers/calendarDays'
+
+export function DayPicker({ initialValue, value, onChange, ...props }) {
+  const [localValue, setLocalValue] = React.useState(dayjs(initialValue))
+  value = value === undefined ? localValue : value
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const [currentMonth, setCurrentMonth] = React.useState(() =>
+    initialValue ? dayjs(initialValue).startOf('month') : dayjs().startOf('month')
+  )
+
+  const prevMonth = () => setCurrentMonth((m) => m.subtract(1, 'month'))
+  const nextMonth = () => setCurrentMonth((m) => m.add(1, 'month'))
+
+  const prevYear = () => setCurrentMonth((m) => m.subtract(1, 'year'))
+  const nextYear = () => setCurrentMonth((m) => m.add(1, 'year'))
+
+  const { weekdayLabels, cells } = useCalendarDays(currentMonth)
+
+  return (
+    <View className="neko-day-picker" width={250} {...props}>
+      <View className="neko-date-picker-header" row centerV gap="xxs" height={30}>
+        <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
+          <Icon name="arrow-left-double-line" />
+        </Link>
+
+        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
+          <Icon name="arrow-left-s-line" />
+        </Link>
+
+        <Text center flex>
+          {currentMonth.format('MMM YYYY')}
+        </Text>
+
+        <Link onPress={nextMonth} aria-label="Next month" padding="xxs">
+          <Icon name="arrow-right-s-line" />
+        </Link>
+
+        <Link onPress={nextYear} aria-label="Next year" padding="xxs" paddingR={0}>
+          <Icon name="arrow-right-double-line" />
+        </Link>
+      </View>
+
+      <View className="neko-day-picker-week" row center gap="sm">
+        {weekdayLabels.map((w) => (
+          <View key={w} flex height={30} center>
+            <Text center sm text4>
+              {w}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
+        {cells.map((val, idx) => {
+          const dateVal = currentMonth.date(val)
+          const isActive = dateVal.isSame(value, 'day')
+
+          return (
+            <Col key={idx} className="day-cell" center>
+              <Link
+                ratio={1}
+                width={30}
+                center
+                br="md"
+                onPress={() => !!val && handleChange(dateVal)}
+                bg={isActive && 'primary'}
+              >
+                <Text sm text2 center strong={isActive}>
+                  {val != null ? val : ''}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/calendar/_helpers/calendarDays.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export function useCalendarDays(currentMonth) {
+  return React.useMemo(() => {
+    const startWeekday = currentMonth.startOf('month').day()
+    const daysInMonth = currentMonth.daysInMonth()
+
+    const blanks = Array.from({ length: startWeekday }, () => null)
+    const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
+    const cells = [...blanks, ...days]
+
+    const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+    return { weekdayLabels, cells }
+  }, [currentMonth.month(), currentMonth.year()])
+}

package/src/components/calendar/index.js

@@ -0,0 +1 @@
+export * from './DayPicker'

package/src/components/feedback/index.js

@@ -0,0 +1 @@
+export * from './notifications/NotificationsHandler'