@neko-os/ui 0.0.6 → 0.0.8

package/src/components/structure/bottomDrawer/native/utils.js

@@ -0,0 +1,58 @@
+export function normalizeSnapPoints(snapPoints, screenHeight) {
+  return snapPoints.map((point) => {
+    if (typeof point === 'string' && point.endsWith('%')) {
+      const percentage = parseFloat(point) / 100;
+      return screenHeight * percentage;
+    }
+    return point;
+  });
+}
+
+export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0) {
+  'worklet';
+  // Reduced velocity impact for more stable snapping
+  const velocityImpact = velocity * 0.03;
+  const adjustedPosition = currentPosition + velocityImpact;
+
+  let closestIndex = 0;
+  let minDistance = Math.abs(snapPoints[0] - adjustedPosition);
+
+  for (let i = 1; i < snapPoints.length; i++) {
+    const distance = Math.abs(snapPoints[i] - adjustedPosition);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestIndex = i;
+    }
+  }
+
+  // Increased velocity thresholds for more resistance
+  // Only change snap points with strong swipe gestures
+
+  // Bias towards opening more when swiping up very fast
+  if (velocity < -1500 && closestIndex < snapPoints.length - 1) {
+    closestIndex++;
+  }
+  // Bias towards closing when swiping down very fast
+  else if (velocity > 1500 && closestIndex > 0) {
+    closestIndex--;
+  }
+
+  // Add hysteresis: prefer staying at current position unless moved significantly
+  // This prevents accidental snap point changes
+  if (snapPoints.length > 1) {
+    const currentSnapDistance = minDistance;
+    // Require at least 20% of the distance between snap points to change
+    const snapPointSpacing = Math.abs(snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]);
+    if (currentSnapDistance < snapPointSpacing * 0.2) {
+      // Stay at current snap point unless moved significantly
+      return closestIndex;
+    }
+  }
+
+  return closestIndex;
+}
+
+export function clamp(value, min, max) {
+  'worklet';
+  return Math.min(Math.max(value, min), max);
+}

package/src/components/structure/bottomDrawer/web/BottomDrawer.js

@@ -0,0 +1,3 @@
+import { Drawer } from '../../drawer'
+
+export const BottomDrawer = (props) => <Drawer height={400} {...props} />

package/src/components/structure/drawer/Drawer.js

@@ -0,0 +1,5 @@
+import { Modal } from '../modal/Modal'
+
+export function Drawer(props) {
+  return <Modal position="bottom" {...props} />
+}

package/src/components/structure/drawer/Drawer.native.js

@@ -0,0 +1,3 @@
+import { BottomDrawer } from '../bottomDrawer/native/BottomDrawer'
+
+export const Drawer = BottomDrawer

package/src/components/structure/drawer/index.js

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

package/src/components/structure/index.js

@@ -1,8 +1,13 @@
 export * from './Accordion'
 export * from './AccordionGroup'
 export * from './View'
+export * from './GradientView'
+export * from './BlurView'
 export * from './SafeAreaView'
 export * from './Card'
 export * from './Row'
 export * from './Col'
+export * from './modal'
+export * from './drawer'
+export * from './bottomDrawer'
 export * from './popover/Popover'

package/src/components/structure/modal/Modal.js

@@ -0,0 +1,84 @@
+import { pipe } from 'ramda'
+
+import { AnimatedView } from '../../animations/AnimatedView'
+import { ModalBackdrop } from './ModalBackdrop'
+import { ModalContent } from './ModalContent'
+import { ModalFooter } from './ModalFooter'
+import { ModalHeader } from './ModalHeader'
+import { Portal } from '../../helpers/Portal'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { position }]) => {
+  let radiusKey = 'br'
+  let height = undefined
+  if (position === 'bottom') {
+    radiusKey = 'borderRadiusT'
+    height = '95%'
+  } else if (position === 'top') {
+    radiusKey = 'borderRadiusB'
+    height = '95%'
+  } else if (position === 'right') {
+    radiusKey = 'borderRadiusL'
+    height = '100%'
+  } else if (position === 'left') {
+    radiusKey = 'borderRadiusR'
+    height = '100%'
+  }
+
+  return {
+    maxWidth: '100%',
+    maxHeight: !position && '95%',
+    height,
+    scale: !position,
+    fade: !!position,
+    slide: position && { from: position },
+    [radiusKey]: 'xl',
+    bg: 'overlayBG',
+    overflow: 'hidden',
+    shadow: true,
+  }
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  width = 500,
+  children,
+  header,
+  footer,
+  noLayout,
+  disableOutsideClick,
+  ...rootProps
+}) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Modal'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, headerProps, footerProps, position, ...props } = formattedProps
+
+  let content = children
+  if (!noLayout) {
+    content = (
+      <>
+        <ModalHeader title={title} onClose={onClose} {...headerProps}>
+          {header}
+        </ModalHeader>
+        <ModalContent {...contentProps}>{children}</ModalContent>
+        <ModalFooter {...footerProps}>{footer}</ModalFooter>
+      </>
+    )
+  }
+
+  return (
+    <Portal>
+      <ModalBackdrop open={open} onClose={!disableOutsideClick && onClose} position={position}>
+        <AnimatedView className="neko-modal" open={open} width={width} {...props} onPress={(e) => e.stopPropagation()}>
+          {content}
+        </AnimatedView>
+      </ModalBackdrop>
+    </Portal>
+  )
+}

package/src/components/structure/modal/Modal.native.js

@@ -0,0 +1,83 @@
+import { Modal as RNModal, ScrollView } from 'react-native'
+import { pipe } from 'ramda'
+
+import { ModalBackdrop } from './ModalBackdrop'
+import { ModalContent } from './ModalContent'
+import { ModalFooter } from './ModalFooter'
+import { ModalHeader } from './ModalHeader'
+import { Pressable } from '../../actions/Pressable'
+import { View } from '../View'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  maxWidth: '90%',
+  maxHeight: '90%',
+  scale: true,
+  br: 'xl',
+  bg: 'overlayBG',
+  overflow: 'hidden',
+  shadow: true,
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  width = 500,
+  children,
+  header,
+  footer,
+  noLayout,
+  disableOutsideClick,
+  ...rootProps
+}) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Modal'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, headerProps, footerProps, ...props } = formattedProps
+
+  let content = children
+  if (!noLayout) {
+    content = (
+      <>
+        <ModalHeader title={title} onClose={onClose} {...headerProps}>
+          {header}
+        </ModalHeader>
+        <ScrollView>
+          <ModalContent {...contentProps}>{children}</ModalContent>
+        </ScrollView>
+        <ModalFooter {...footerProps}>{footer}</ModalFooter>
+      </>
+    )
+  }
+
+  return (
+    <RNModal
+      animationType="fade"
+      transparent
+      visible={open}
+      onRequestClose={onClose}
+      allowSwipeDismissal
+      navigationBarTranslucent
+      statusBarTranslucent
+    >
+      <ModalBackdrop open={open} useSimpleView>
+        <Pressable
+          onPress={!disableOutsideClick ? onClose : undefined}
+          absolute
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          pointerEvents="box-only"
+        />
+        <View width={width} {...props} zIndex={10}>
+          {content}
+        </View>
+      </ModalBackdrop>
+    </RNModal>
+  )
+}

package/src/components/structure/modal/ModalBackdrop.js

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AnimatedView } from '../../animations/AnimatedView'
+import { SafeAreaView } from '../SafeAreaView'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { position }]) => {
+  let justify = 'center'
+  let align = 'center'
+  if (position === 'bottom') {
+    justify = 'flex-end'
+  } else if (position === 'top') {
+    justify = 'flex-top'
+  } else if (position === 'left') {
+    align = 'flex-start'
+  } else if (position === 'right') {
+    align = 'flex-end'
+  }
+
+  return {
+    fixed: true,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justify,
+    align,
+    lazy: true,
+    unmountOnClose: true,
+    fade: true,
+    zIndex: 500,
+    bg: 'backdrop_op70',
+  }
+}
+
+export function ModalBackdrop({ open, onClose, children, useSimpleView, ...rootProps }) {
+  const modalRef = React.useRef()
+  const [{}, props] = pipe(
+    useThemeComponentModifier('ModalBackdrop'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (useSimpleView) {
+    return (
+      <SafeAreaView className="neko-modal-backdrop" {...props}>
+        {children}
+      </SafeAreaView>
+    )
+  }
+
+  return (
+    <AnimatedView open={open} className="neko-modal-backdrop" onPress={onClose} {...props}>
+      {children}
+    </AnimatedView>
+  )
+}

package/src/components/structure/modal/ModalContent.js

@@ -0,0 +1,28 @@
+import { pipe } from 'ramda'
+
+import { View } from '../View'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  fullW: true,
+  flex: true,
+  // fullH: true,
+  scrollY: true,
+  padding: 'md',
+}
+
+export function ModalContent({ children, ...rootProps }) {
+  const [{}, props] = pipe(
+    useThemeComponentModifier('ModalContent'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (!children) return false
+
+  return (
+    <View className="neko-modal-content" {...props}>
+      {children}
+    </View>
+  )
+}

package/src/components/structure/modal/ModalFooter.js

@@ -0,0 +1,31 @@
+import { pipe } from 'ramda'
+
+import { View } from '../View'
+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 }, _]) => ({
+  borderT: true,
+  paddingH: sizeCode,
+  paddingV: moveScale(sizeCode, -2),
+  minHeight: moveScale(sizeCode, 1),
+  centerV: true,
+})
+
+export function ModalFooter({ children, ...rootProps }) {
+  const [{}, props] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('ModalFooter'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (!children) return false
+
+  return (
+    <View className="neko-modal-footer" {...props}>
+      {children}
+    </View>
+  )
+}

package/src/components/structure/modal/ModalHeader.js

@@ -0,0 +1,50 @@
+import { pipe } from 'ramda'
+
+import { Icon } from '../../presentation/Icon'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../View'
+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 }, _]) => ({
+  centerV: true,
+  paddingH: sizeCode,
+  paddingV: moveScale(sizeCode, -2),
+  minHeight: moveScale(sizeCode, 1),
+  gap: 'md',
+  borderB: true,
+  justify: 'space-between',
+
+  titleProps: {
+    strong: true,
+  },
+})
+
+export function ModalHeader({ onClose, title, children, ...rootProps }) {
+  const [{}, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('ModalHeader'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { titleProps, ...props } = formattedProps
+
+  if (!title && !children) return false
+
+  return (
+    <View className="neko-modal-header" {...props} row>
+      {title && <Text {...titleProps}>{title}</Text>}
+
+      {children}
+
+      {!!onClose && (
+        <Link onPress={onClose} padding="sm" marginR={-10}>
+          <Icon name="close-line" />
+        </Link>
+      )}
+    </View>
+  )
+}

package/src/components/structure/modal/handler/ModalsHandler.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { Modal } from '../Modal'
+import { useResponsiveValue } from '../../../../responsive/responsiveHooks'
+
+const ModalsContext = React.createContext(null)
+
+export const useModals = () => React.useContext(ModalsContext) || {}
+
+let idCounter = 0
+
+export function useModalOpener() {
+  const { add, remove, close } = useModals()
+  const open = (init) => {
+    const key = ++idCounter
+
+    const onClose = () => close(key)
+    const params = { onClose, key }
+
+    const data = init(params)
+
+    add(key, { onClose, ...data, open: true })
+    return params
+  }
+
+  return {
+    open,
+  }
+}
+
+export function ModalsHandler({ children }) {
+  const width = useResponsiveValue({ sm: '100%', df: 400 })
+  const [modals, setModals] = React.useState([])
+
+  const add = React.useCallback((key, data) => {
+    setModals((prev) => [...prev, { key, ...data }])
+  }, [])
+
+  const remove = React.useCallback((key) => {
+    setModals((prev) => prev.filter((p) => p.key !== key))
+  }, [])
+
+  const close = React.useCallback((key) => {
+    setModals((items) => items.map((i) => (i.key === key ? { ...i, open: false } : i)))
+    setTimeout(() => remove(key), 600)
+  }, [])
+
+  const value = React.useMemo(() => ({ add, remove, close }), [add, remove, close])
+
+  return (
+    <ModalsContext.Provider value={value}>
+      {children}
+
+      {modals?.map?.(({ key, content, ...item }) => (
+        <Modal key={key} {...item}>
+          {content}
+        </Modal>
+      ))}
+    </ModalsContext.Provider>
+  )
+}

package/src/components/structure/modal/index.js

@@ -0,0 +1,6 @@
+export * from './handler/ModalsHandler'
+export * from './Modal'
+export * from './ModalContent'
+export * from './ModalHeader'
+export * from './ModalFooter'
+export * from './ModalBackdrop'

package/src/components/structure/overlay/OverlayWrapper.js

@@ -43,7 +43,7 @@ export function OverlayWrapper({ children, triggerRect, placement, onClickOutsid
       top={pos.y}
       left={pos.x}
       zIndex={9999}
-      pointerEvents="none"
+      ointerEvents="none"
       {...props}
     >
       {children}

package/src/components/structure/popover/Popover.js

@@ -1,7 +1,9 @@
 import React from 'react'
 
+import { BottomDrawer } from '../bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
+import { useResponsiveValue } from '../../../responsive'
 
 export function Popover({
   renderContent,
@@ -12,8 +14,10 @@ export function Popover({
   children,
   parentWidth,
   parentMinWidth,
+  useBottomDrawer = {},
   ...props
 }) {
+  const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
   const { onOpen, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
 
@@ -53,17 +57,39 @@ export function Popover({
       ),
       triggerRect,
       placement,
-      options: { dismissOnClickOutside: !!click },
+      options: { dismissOnClickOutside: click || focus },
     })
   }
 
   React.useEffect(() => () => onClose(), [])
 
+  if (shouldUseDrawer) {
+    return <DrawerPopover content={content} renderContent={renderContent} children={children} {...props} />
+  }
+
   const child = React.Children.only(children)
   let childProps = { ref, onClick: show }
 
   if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose }
-  if (focus) childProps = { ref, onFocus: show, onBlur: onClose }
+  if (focus) childProps = { ref, onFocus: show }
 
   return React.cloneElement(child, childProps)
 }
+
+function DrawerPopover({ children, content, renderContent, snapPoints, ...props }) {
+  const [open, setOpen] = React.useState(false)
+  const onClose = () => setOpen(false)
+
+  const child = React.Children.only(children)
+  let childProps = { onClick: () => setOpen(true) }
+
+  return (
+    <>
+      {React.cloneElement(child, childProps)}
+
+      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+        {renderContent({ onClose })}
+      </BottomDrawer>
+    </>
+  )
+}

package/src/components/structure/popover/Popover.native.js

@@ -1,17 +1,34 @@
 import { Modal, TouchableWithoutFeedback } from 'react-native'
 import React from 'react'
 
+import { BottomDrawer } from '../bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { View } from '../View'
 import { calculatePosition } from '../overlay/calculatePosition'
+import { useResponsiveValue } from '../../../responsive'
 
-export function Popover({ content, placement = 'bottom', children, ...props }) {
+export function Popover({
+  content,
+  renderContent,
+  placement = 'bottom',
+  children,
+  useBottomDrawer = {},
+  snapPoints,
+  ...props
+}) {
+  const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
-  const [visible, setVisible] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
   const [triggerRect, setTriggerRect] = React.useState(null)
   const [position, setPosition] = React.useState(null)
 
-  const show = () => {
+  renderContent = renderContent || (() => content)
+
+  const onOpen = () => {
+    if (shouldUseDrawer) {
+      setOpen(true)
+      return
+    }
     if (ref.current) {
       ref.current.measureInWindow((x, y, width, height) => {
         setTriggerRect({
@@ -22,29 +39,41 @@ export function Popover({ content, placement = 'bottom', children, ...props }) {
           width,
           height,
         })
-        setVisible(true)
+        setOpen(true)
       })
     }
   }
 
-  const hide = () => {
-    setVisible(false)
+  const onClose = () => {
+    setOpen(false)
     setTriggerRect(null)
     setPosition(null)
   }
 
-  return (
-    <>
+  children = React.cloneElement(React.Children.only(children), {
+    onPress: onOpen,
+  })
+
+  if (shouldUseDrawer) {
+    return (
       <View ref={ref}>
-        {React.cloneElement(React.Children.only(children), {
-          onPress: show,
-        })}
+        {children}
+
+        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+          {renderContent({ onClose: onClose })}
+        </BottomDrawer>
       </View>
+    )
+  }
+
+  return (
+    <>
+      <View ref={ref}>{children}</View>
 
-      {visible && (
-        <Modal transparent visible={visible} animationType="fade" onRequestClose={hide}>
+      {open && (
+        <Modal transparent visible={open} animationType="fade" onRequestClose={onClose}>
           <View fullW flex fullH bg="bg_op50">
-            <TouchableWithoutFeedback onPress={hide}>
+            <TouchableWithoutFeedback onPress={onClose}>
               <View style={{ flex: 1 }}>
                 {triggerRect && (
                   <View
@@ -61,7 +90,7 @@ export function Popover({ content, placement = 'bottom', children, ...props }) {
                     }}
                   >
                     <PopoverContent placement={placement} {...props}>
-                      {content}
+                      {renderContent({ onClose: onClose })}
                     </PopoverContent>
                   </View>
                 )}

package/src/modifiers/animations/animatedEffects.js

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { useApplyStyles } from '../applyStyles'
 import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
 import { useSlideEffect } from './slideEffect'
 
 export function useAnimatedEffects([values, { open, onClose, lazy = false, unmountOnClose = false, ...props }]) {
@@ -41,6 +42,7 @@ export function useAnimatedEffects([values, { open, onClose, lazy = false, unmou
   return pipe(
     useFadeEffect, //
     useSlideEffect,
+    useScaleEffect,
     useApplyStyles({ transition: transitions.join(',') })
   )([
     {