@neko-os/ui 0.3.0 → 0.5.0

package/src/abstractions/KeyboardDismissView.native.js

@@ -0,0 +1,9 @@
+import { Keyboard, Pressable } from 'react-native'
+
+export function AbsKeyboardDismissView({ children, style }) {
+  return (
+    <Pressable onPress={Keyboard.dismiss} accessible={false} style={style}>
+      {children}
+    </Pressable>
+  )
+}

package/src/abstractions/TouchableOpacity.native.js

@@ -1,3 +1,9 @@
-import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
+import { Linking, TouchableOpacity as RNTouchableOpacity } from 'react-native'
 
-export const AbsTouchableOpacity = RNTouchableOpacity
+export function AbsTouchableOpacity({ href, target, link, onPress, ...props }) {
+  const handlePress = href
+    ? (e) => { onPress?.(e); Linking.openURL(href) }
+    : onPress
+
+  return <RNTouchableOpacity onPress={handlePress} {...props} />
+}

package/src/components/actions/ClearLink.js

@@ -0,0 +1,6 @@
+import { Link } from './Link'
+
+export function ClearLink({ hide, value, onChange, ...props }) {
+  if (!!hide || !!value) return false
+  return <Link center red label="Remove Value" onPress={() => onChange(null)} padding="sm" {...props} />
+}

package/src/components/actions/FloatingMenu.js

@@ -14,7 +14,7 @@ export function FloatingMenu({ fixed, onChange, items, activeIndex, size = 'md',
 
   return (
     <View absolute={!fixed} fixed={fixed} left="md" right="md" centerH bottom={Math.max(insets.bottom / 2, 16)}>
-      <WrapperView height={height} shadow round row paddingH="sm" bg={bg} {...props}>
+      <WrapperView height={height} shadow round row paddingH="sm" bg={bg} border="overlayDivider" {...props}>
         {items.map((item, index) => {
           const isActive = index === activeIndex
 

package/src/components/calendar/CalendarNav.js

@@ -20,7 +20,7 @@ export function CalendarNav({ value, onChange, level, ...props }) {
 
     return (
       <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
-        <Link onPress={prevDecade} aria-label="Previous decade" padding="xxs" paddingL={0}>
+        <Link onPress={prevDecade} aria-label="Previous decade" padding="sm" paddingL={0}>
           <Icon name="arrow-left-double-line" />
         </Link>
 
@@ -28,7 +28,7 @@ export function CalendarNav({ value, onChange, level, ...props }) {
           {year}-{year + 9}
         </Text>
 
-        <Link onPress={nextDecade} aria-label="Next decade" padding="xxs" paddingR={0}>
+        <Link onPress={nextDecade} aria-label="Next decade" padding="sm" paddingR={0}>
           <Icon name="arrow-right-double-line" />
         </Link>
       </View>
@@ -37,12 +37,12 @@ export function CalendarNav({ value, onChange, level, ...props }) {
 
   return (
     <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
-      <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
+      <Link onPress={prevYear} aria-label="Previous year" padding="sm" paddingR={0}>
         <Icon name="arrow-left-double-line" />
       </Link>
 
       {showMonth && (
-        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
+        <Link onPress={prevMonth} aria-label="Previous month" padding="sm">
           <Icon name="arrow-left-s-line" />
         </Link>
       )}
@@ -54,12 +54,12 @@ export function CalendarNav({ value, onChange, level, ...props }) {
       </View>
 
       {showMonth && (
-        <Link onPress={nextMonth} aria-label="Next month" padding="xxs">
+        <Link onPress={nextMonth} aria-label="Next month" padding="sm">
           <Icon name="arrow-right-s-line" />
         </Link>
       )}
 
-      <Link onPress={nextYear} aria-label="Next year" padding="xxs" paddingR={0}>
+      <Link onPress={nextYear} aria-label="Next year" padding="sm" paddingL={0}>
         <Icon name="arrow-right-double-line" />
       </Link>
     </View>

package/src/components/carousel/Carousel.js

@@ -0,0 +1,48 @@
+import { View } from '../structure/View'
+import { CarouselArrows } from './CarouselArrows'
+import { CarouselDots } from './CarouselDots'
+import { CarouselHandler } from './CarouselHandler'
+import { CarouselSlider } from './CarouselSlider'
+
+export function Carousel({
+  items,
+  activeIndex,
+  activeKey,
+  onChange,
+  afterChange,
+  autoplay,
+  autoplaySpeed,
+  draggable,
+  loop,
+  showDots,
+  showArrows,
+  floatingDots,
+  dotsProps,
+  arrowsProps,
+  children,
+  ...rootProps
+}) {
+  return (
+    <CarouselHandler
+      items={items}
+      activeIndex={activeIndex}
+      activeKey={activeKey}
+      onChange={onChange}
+      afterChange={afterChange}
+      autoplay={autoplay}
+      autoplaySpeed={autoplaySpeed}
+      draggable={draggable}
+      loop={loop}
+    >
+      <View {...rootProps}>
+        <View relative>
+          <CarouselSlider />
+          {showArrows && <CarouselArrows {...arrowsProps} />}
+          {showDots && floatingDots && <CarouselDots absolute bottom="xs" left={0} right={0} {...dotsProps} />}
+        </View>
+        {showDots && !floatingDots && <CarouselDots {...dotsProps} />}
+        {children}
+      </View>
+    </CarouselHandler>
+  )
+}

package/src/components/carousel/CarouselArrows.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+export function CarouselArrows({ iconSize = 'md', ...props }) {
+  const { goToNext, goToPrev, activeIndex, itemsCount, loop } = useCarousel()
+
+  const showPrev = loop || activeIndex > 0
+  const showNext = loop || activeIndex < itemsCount - 1
+
+  return (
+    <View
+      absoluteFill
+      row
+      centerV
+      paddingH="xs"
+      justify="space-between"
+      style={{ pointerEvents: 'none' }}
+      {...props}
+    >
+      {showPrev ? (
+        <Link onPress={goToPrev} bg="overlayBG_op80" round padding="xs" shadow style={{ pointerEvents: 'auto' }}>
+          <Icon name="arrow-left-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+      {showNext ? (
+        <Link onPress={goToNext} bg="overlayBG_op80" round padding="xs" shadow style={{ pointerEvents: 'auto' }}>
+          <Icon name="arrow-right-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+    </View>
+  )
+}

package/src/components/carousel/CarouselArrows.native.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+export function CarouselArrows({ iconSize = 'md', ...props }) {
+  const { goToNext, goToPrev, activeIndex, itemsCount, loop } = useCarousel()
+
+  const showPrev = loop || activeIndex > 0
+  const showNext = loop || activeIndex < itemsCount - 1
+
+  return (
+    <View
+      absoluteFill
+      row
+      centerV
+      paddingH="xs"
+      justify="space-between"
+      pointerEvents="box-none"
+      {...props}
+    >
+      {showPrev ? (
+        <Link onPress={goToPrev} bg="overlayBG_op80" round padding="xs" shadow>
+          <Icon name="arrow-left-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+      {showNext ? (
+        <Link onPress={goToNext} bg="overlayBG_op80" round padding="xs" shadow>
+          <Icon name="arrow-right-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+    </View>
+  )
+}

package/src/components/carousel/CarouselDots.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Pressable } from '../actions/Pressable'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function Dot({ active, onPress }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      width={active ? 20 : 8}
+      height={8}
+      round
+      bg={active ? 'primary' : 'text4_op30'}
+      style={{ transition: 'all 200ms ease-in-out' }}
+    />
+  )
+}
+
+export function CarouselDots(props) {
+  const { items, activeIndex, goTo } = useCarousel()
+
+  if (!items?.length) return null
+
+  return (
+    <View row center gap="xs" paddingV="sm" {...props}>
+      {items.map((item, index) => (
+        <Dot key={item.key} active={index === activeIndex} onPress={() => goTo(index)} />
+      ))}
+    </View>
+  )
+}

package/src/components/carousel/CarouselDots.native.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+
+import { Pressable } from '../actions/Pressable'
+import { View } from '../structure/View'
+import { useColors } from '../../theme/ThemeHandler'
+import { useCarousel } from './CarouselHandler'
+
+function Dot({ active, onPress }) {
+  const colors = useColors()
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(active ? 20 : 8, { duration: 200 }),
+    backgroundColor: withTiming(active ? colors.primary : colors.text4_op30, { duration: 200 }),
+  }), [active])
+
+  return (
+    <Pressable onPress={onPress}>
+      <Animated.View style={[{ height: 8, borderRadius: 4 }, animatedStyle]} />
+    </Pressable>
+  )
+}
+
+export function CarouselDots(props) {
+  const { items, activeIndex, goTo } = useCarousel()
+
+  if (!items?.length) return null
+
+  return (
+    <View row center gap="xs" paddingV="sm" {...props}>
+      {items.map((item, index) => (
+        <Dot key={item.key} active={index === activeIndex} onPress={() => goTo(index)} />
+      ))}
+    </View>
+  )
+}

package/src/components/carousel/CarouselHandler.js

@@ -0,0 +1,86 @@
+import React from 'react'
+
+const CarouselContext = React.createContext(null)
+export const useCarousel = () => React.useContext(CarouselContext) || {}
+
+export function CarouselHandler({
+  children,
+  items,
+  activeIndex: controlledIndex,
+  activeKey,
+  onChange,
+  afterChange,
+  autoplay,
+  autoplaySpeed = 3000,
+  draggable,
+  loop,
+}) {
+  const itemsCount = items?.length || 0
+  const isControlled = controlledIndex !== undefined || activeKey !== undefined
+
+  const [internalIndex, setInternalIndex] = React.useState(() => {
+    if (controlledIndex !== undefined) return controlledIndex
+    if (activeKey !== undefined) return Math.max(0, items?.findIndex((i) => i.key === activeKey) || 0)
+    return 0
+  })
+
+  const resolvedIndex = isControlled
+    ? activeKey !== undefined
+      ? Math.max(0, items?.findIndex((i) => i.key === activeKey) || 0)
+      : controlledIndex
+    : internalIndex
+
+  const activeItem = React.useMemo(() => items?.[resolvedIndex], [items, resolvedIndex])
+
+  const pausedRef = React.useRef(false)
+
+  const goTo = React.useCallback(
+    (index) => {
+      let next = index
+      if (loop) next = ((next % itemsCount) + itemsCount) % itemsCount
+      else next = Math.max(0, Math.min(next, itemsCount - 1))
+
+      if (!isControlled) setInternalIndex(next)
+      onChange?.(items?.[next]?.key, next)
+    },
+    [loop, itemsCount, isControlled, onChange, items]
+  )
+
+  const goToNext = React.useCallback(() => goTo(resolvedIndex + 1), [goTo, resolvedIndex])
+  const goToPrev = React.useCallback(() => goTo(resolvedIndex - 1), [goTo, resolvedIndex])
+
+  const pauseAutoplay = React.useCallback(() => {
+    pausedRef.current = true
+  }, [])
+
+  const resumeAutoplay = React.useCallback(() => {
+    pausedRef.current = false
+  }, [])
+
+  React.useEffect(() => {
+    if (!autoplay || itemsCount <= 1) return
+
+    const interval = setInterval(() => {
+      if (!pausedRef.current) goToNext()
+    }, autoplaySpeed)
+
+    return () => clearInterval(interval)
+  }, [autoplay, autoplaySpeed, itemsCount, resolvedIndex, goToNext])
+
+  const value = {
+    items,
+    activeIndex: resolvedIndex,
+    activeItem,
+    itemsCount,
+    goTo,
+    goToNext,
+    goToPrev,
+    afterChange,
+    draggable,
+    loop,
+    pauseAutoplay,
+    resumeAutoplay,
+  }
+
+  return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
+}

package/src/components/carousel/CarouselSlider.js

@@ -0,0 +1,124 @@
+import React from 'react'
+
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function SlideContent({ item }) {
+  const Content = React.useMemo(
+    () => item.render || item.renderContent || item.Content,
+    [item.render, item.renderContent, item.Content]
+  )
+  return Content ? <Content /> : null
+}
+
+export function CarouselSlider() {
+  const { items, activeIndex, itemsCount, draggable, loop, afterChange, goToNext, goToPrev, pauseAutoplay, resumeAutoplay } =
+    useCarousel()
+
+  const containerRef = React.useRef(null)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [dragOffset, setDragOffset] = React.useState(0)
+  const startXRef = React.useRef(0)
+  const startTimeRef = React.useRef(0)
+  const prevItemsRef = React.useRef(items)
+  const skipTransitionRef = React.useRef(false)
+
+  if (items !== prevItemsRef.current) {
+    skipTransitionRef.current = true
+    prevItemsRef.current = items
+  }
+
+  React.useEffect(() => {
+    if (skipTransitionRef.current) {
+      const id = requestAnimationFrame(() => {
+        skipTransitionRef.current = false
+      })
+      return () => cancelAnimationFrame(id)
+    }
+  })
+
+  if (!items?.length) return null
+
+  const baseTranslate = -(activeIndex * 100) / itemsCount
+  const dragPercent =
+    isDragging && containerRef.current ? (dragOffset / containerRef.current.offsetWidth) * (100 / itemsCount) : 0
+  const transformX = baseTranslate + dragPercent
+
+  const dragStateRef = React.useRef({ isDragging: false, dragOffset: 0 })
+
+  const handlePointerDown = (e) => {
+    if (!draggable) return
+    startXRef.current = e.clientX
+    startTimeRef.current = Date.now()
+    dragStateRef.current = { isDragging: true, dragOffset: 0 }
+    setIsDragging(true)
+    setDragOffset(0)
+    pauseAutoplay()
+
+    const onMove = (ev) => {
+      const raw = ev.clientX - startXRef.current
+      let offset = raw
+      if (!loop) {
+        const containerWidth = containerRef.current?.offsetWidth || 1
+        const atStart = activeIndex === 0 && raw > 0
+        const atEnd = activeIndex === itemsCount - 1 && raw < 0
+        if (atStart || atEnd) offset = raw * 0.3
+      }
+      dragStateRef.current.dragOffset = offset
+      setDragOffset(offset)
+    }
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onUp)
+
+      const offset = dragStateRef.current.dragOffset
+      const containerWidth = containerRef.current?.offsetWidth || 1
+      const threshold = containerWidth * 0.25
+      const elapsed = Date.now() - startTimeRef.current
+      const velocity = Math.abs(offset) / (elapsed || 1)
+
+      if (offset < -threshold || (offset < 0 && velocity > 0.5)) {
+        goToNext()
+      } else if (offset > threshold || (offset > 0 && velocity > 0.5)) {
+        goToPrev()
+      }
+
+      dragStateRef.current = { isDragging: false, dragOffset: 0 }
+      setIsDragging(false)
+      setDragOffset(0)
+      resumeAutoplay()
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onUp)
+  }
+
+  return (
+    <View hiddenOverflow fullW ref={containerRef}>
+      <View
+        row
+        style={{
+          width: `${itemsCount * 100}%`,
+          transform: `translateX(${transformX}%)`,
+          transition: isDragging || skipTransitionRef.current ? 'none' : 'transform 300ms ease-in-out',
+          touchAction: 'pan-y',
+          cursor: draggable ? (isDragging ? 'grabbing' : 'grab') : undefined,
+          userSelect: 'none',
+        }}
+        onTransitionEnd={afterChange ? (e) => {
+          if (e.propertyName === 'transform') afterChange(items?.[activeIndex]?.key, activeIndex)
+        } : undefined}
+        onPointerDown={draggable ? handlePointerDown : undefined}
+      >
+        {items.map((item) => (
+          <View key={item.key} style={{ width: `${100 / itemsCount}%` }}>
+            <SlideContent item={item} />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/carousel/CarouselSlider.native.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS } from 'react-native-reanimated'
+
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function SlideContent({ item }) {
+  const Content = React.useMemo(
+    () => item.render || item.renderContent || item.Content,
+    [item.render, item.renderContent, item.Content]
+  )
+  return Content ? <Content /> : null
+}
+
+function clampIndex(index, count, loop) {
+  'worklet'
+  if (loop) return ((index % count) + count) % count
+  return Math.max(0, Math.min(index, count - 1))
+}
+
+export function CarouselSlider() {
+  const { items, activeIndex, itemsCount, draggable, goTo, afterChange, pauseAutoplay, resumeAutoplay, loop } =
+    useCarousel()
+
+  const [slideWidth, setSlideWidth] = React.useState(0)
+  const translateX = useSharedValue(0)
+  const gestureStartX = useSharedValue(0)
+  const prevItemsRef = React.useRef(items)
+
+  React.useEffect(() => {
+    if (slideWidth > 0) {
+      if (prevItemsRef.current !== items) {
+        prevItemsRef.current = items
+        translateX.value = -activeIndex * slideWidth
+      } else {
+        translateX.value = withTiming(-activeIndex * slideWidth, { duration: 300 }, (finished) => {
+          if (finished && afterChange) runOnJS(afterChange)(items?.[activeIndex]?.key, activeIndex)
+        })
+      }
+    }
+  }, [activeIndex, slideWidth, items])
+
+  const onLayout = React.useCallback((e) => {
+    setSlideWidth(e.nativeEvent.layout.width)
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }))
+
+  if (!items?.length) return null
+
+  const minTranslate = -(itemsCount - 1) * slideWidth
+  const maxTranslate = 0
+
+  const panGesture = Gesture.Pan()
+    .activeOffsetX([-10, 10])
+    .failOffsetY([-10, 10])
+    .onStart(() => {
+      gestureStartX.value = translateX.value
+      runOnJS(pauseAutoplay)()
+    })
+    .onUpdate((e) => {
+      const raw = gestureStartX.value + e.translationX
+      if (loop) {
+        translateX.value = raw
+      } else {
+        // Rubber band resistance at edges
+        if (raw > maxTranslate) {
+          translateX.value = maxTranslate + (raw - maxTranslate) * 0.3
+        } else if (raw < minTranslate) {
+          translateX.value = minTranslate + (raw - minTranslate) * 0.3
+        } else {
+          translateX.value = raw
+        }
+      }
+    })
+    .onEnd((e) => {
+      const threshold = slideWidth * 0.25
+      let targetIndex = activeIndex
+
+      if (e.translationX < -threshold || e.velocityX < -500) {
+        targetIndex = activeIndex + 1
+      } else if (e.translationX > threshold || e.velocityX > 500) {
+        targetIndex = activeIndex - 1
+      }
+
+      const clamped = clampIndex(targetIndex, itemsCount, loop)
+      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 })
+      runOnJS(goTo)(targetIndex)
+      runOnJS(resumeAutoplay)()
+    })
+
+  const track = (
+    <Animated.View style={[{ flexDirection: 'row', width: slideWidth * itemsCount }, animatedStyle]}>
+      {items.map((item) => (
+        <View key={item.key} style={{ width: slideWidth }}>
+          <SlideContent item={item} />
+        </View>
+      ))}
+    </Animated.View>
+  )
+
+  return (
+    <View hiddenOverflow fullW onLayout={onLayout}>
+      {draggable ? <GestureDetector gesture={panGesture}>{track}</GestureDetector> : track}
+    </View>
+  )
+}

package/src/components/carousel/InfiniteCarousel.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { Carousel } from './Carousel'
+
+function buildItems(value, min, max, renderSlideRef) {
+  const items = []
+  if (min === undefined || value - 1 >= min) {
+    items.push({ key: value - 1, render: () => renderSlideRef.current(value - 1) })
+  }
+  items.push({ key: value, render: () => renderSlideRef.current(value) })
+  if (max === undefined || value + 1 <= max) {
+    items.push({ key: value + 1, render: () => renderSlideRef.current(value + 1) })
+  }
+  return items
+}
+
+export function InfiniteCarousel({ value, onChange, renderSlide, min, max, ...carouselProps }) {
+  const renderSlideRef = React.useRef(renderSlide)
+  renderSlideRef.current = renderSlide
+
+  const [items, setItems] = React.useState(() => buildItems(value, min, max, renderSlideRef))
+  const [activeKey, setActiveKey] = React.useState(value)
+
+  React.useEffect(() => {
+    setItems(buildItems(value, min, max, renderSlideRef))
+    setActiveKey(value)
+  }, [value, min, max])
+
+  const handleChange = React.useCallback((key) => {
+    setActiveKey(key)
+  }, [])
+
+  const handleAfterChange = React.useCallback(
+    (key) => {
+      if (key !== value) onChange?.(key)
+    },
+    [value, onChange]
+  )
+
+  return (
+    <Carousel
+      items={items}
+      activeKey={activeKey}
+      onChange={handleChange}
+      afterChange={handleAfterChange}
+      draggable
+      {...carouselProps}
+    />
+  )
+}

package/src/components/carousel/index.js

@@ -0,0 +1,6 @@
+export * from './CarouselHandler'
+export * from './Carousel'
+export * from './CarouselSlider'
+export * from './CarouselDots'
+export * from './CarouselArrows'
+export * from './InfiniteCarousel'

package/src/components/form/Form.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { FormWrapperComponent } from './FormWrapperComponent'
+import { KeyboardDismissButton } from '../keyboard/KeyboardDismissButton'
 import { LoadingView } from '../state/LoadingView'
 import { useNewForm } from './useNewForm'
 
@@ -24,6 +25,7 @@ export function Form({ form, onSubmit, onValuesChange, initialValues, children,
       <LoadingView active={loading} noWrapper>
         <FormWrapperComponent form={form} onSubmit={onSubmit} gap="md" {...props}>
           {children}
+          <KeyboardDismissButton />
         </FormWrapperComponent>
       </LoadingView>
     </FormContext.Provider>