@startupjs-ui/drawer 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/drawer
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* **abstract-popover:** refactor AbstractPopover component ([4a19018](https://github.com/startupjs/startupjs-ui/commit/4a190183b9e6903b6758d1d006fce7eca39bce0a))
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **drawer:** refactor Drawer component ([3b9bac2](https://github.com/startupjs/startupjs-ui/commit/3b9bac2b3d15b9b3676e7f2adfe6ca9c6a9e597a))

package/README.mdx

@@ -0,0 +1,206 @@
+import { useState } from 'react'
+import { View, TouchableWithoutFeedback, Text } from 'react-native'
+import { Sandbox } from '@startupjs-ui/docs'
+import { useRouter } from 'expo-router'
+import Drawer, { _PropsJsonSchema as DrawerPropsJsonSchema, useDrawerDismiss } from './index'
+import Div from '@startupjs-ui/div'
+import Button from '@startupjs-ui/button'
+
+# Drawer
+
+Navigation bars are designed to provide links to different parts of your application
+Sidebars provide additional information and dock to the left or right side of the browser window
+```jsx
+import { Drawer } from 'startupjs-ui'
+```
+
+## Initialization
+
+Before use you need to configure [Portal](/docs/components/Portal)
+
+## Simple example
+```jsx example
+const [visible, setVisible] = useState(false)
+
+return (
+  <View>
+    <Drawer
+      visible={visible}
+      style={{ width: 250 }}
+      onDismiss={()=> setVisible(false)}
+    >
+      <View style={{ padding: 16 }}>
+        <Text>Content</Text>
+      </View>
+    </Drawer>
+    <Button
+      style={{ width: 160 }}
+      onPress={()=> setVisible(true)}
+    >Show</Button>
+  </View>
+)
+```
+
+## Position
+Сomponent can be deployed from different directions (left, right, top, buttom)
+```jsx example
+const [visible, setVisible] = useState('')
+
+const data = {
+  left: {
+    name: 'Left',
+    style: { width: 240 }
+  },
+  right: {
+    name: 'Right',
+    style: { width: 240 }
+  },
+  top: {
+    name: 'Up',
+    style: { height: 240 }
+  },
+  bottom: {
+    name: 'Down',
+    style: { height: 240 }
+  }
+}
+
+return (
+  <Div row style={{ width: '100%', flexWrap: 'wrap' }}>
+    {
+      Object.keys(data).map((key, index) => (
+        <View key={index}>
+          <Drawer
+            position={key}
+            style={data[key].style}
+            visible={visible === key}
+            onDismiss={()=> setVisible('')}
+          >
+            <View style={{ padding: 16 }}>
+              <Text>{data[key].name}</Text>
+            </View>
+          </Drawer>
+          <Button
+            onPress={()=> setVisible(key)}
+            style={{ width: 120, marginRight: 16, marginTop: 16 }}
+          >{data[key].name}</Button>
+        </View>
+      ))
+    }
+  </Div>
+)
+```
+
+## Swipe
+The component has support for closing using a swipe
+```jsx example
+const [visible, setVisible] = useState('')
+
+return (
+  <Div row style={{ width: '100%', flexWrap: 'wrap' }}>
+    <Drawer
+      visible={visible === 'zone'}
+      onDismiss={()=> setVisible('')}
+      style={{ width: 250 }}
+      swipeStyle={{ backgroundColor: '#eeeeee' }}
+    />
+    <Button
+      style={{ width: 280, marginRight: 24, marginTop: 16 }}
+      onPress={()=> setVisible('zone')}
+    >Swipe zone</Button>
+    <Drawer
+      visible={visible === 'custom'}
+      onDismiss={()=> setVisible('')}
+      style={{ width: 250 }}
+      swipeStyle={{ backgroundColor: '#eeeeee', width: '30%',
+        height: 100, top: 30 }}
+    />
+    <Button
+      style={{ width: 280, marginTop: 16 }}
+      onPress={()=> setVisible('custom')}
+    >Custom swipe zone</Button>
+  </Div>
+)
+```
+
+## Hook for smooth closing
+If the component has events, before the execution of which the panel must be hidden, e.g. go to another page, and you need it to close smoothly with animation
+There is a hook - `useDrawerDismiss`, into which the default function is passed, which works out for each event `onDismiss`, and additional ones that will be called after it
+```jsx
+import { useDrawerDismiss } from 'startupjs-ui'
+```
+
+```jsx example
+const router = useRouter()
+const [leftDrawer, setLeftDrawer] = useState(false)
+const [rightDrawer, setRightDrawer] = useState(false)
+const [leftVisible, setLeftVisible] = useState(false)
+
+const [onDismiss, setOnDismiss] = useDrawerDismiss({
+  rightDrawer: () => setRightDrawer(true),
+  goToPage: path => router.push(path),
+  default: () => setLeftDrawer(false)
+})
+
+return (
+  <Div row style={{ width: '100%', flexWrap: 'wrap' }}>
+    <Drawer
+      visible={rightDrawer}
+      position='right'
+      onDismiss={()=> setRightDrawer(false)}
+      style={{ width: 240 }}
+    />
+    <Drawer
+      visible={leftVisible}
+      onDismiss={()=> setLeftVisible(false)}
+      style={{ width: 240 }}
+    >
+      <TouchableWithoutFeedback onPress={()=> router.navigate('/docs/components/Button')}>
+        <View>
+          <Text>Open another page</Text>
+        </View>
+      </TouchableWithoutFeedback>
+    </Drawer>
+    <Button
+      onPress={() => setLeftVisible(true)}
+      style={{ width: 280, marginRight: 24, marginTop: 16 }}
+    >No hook</Button>
+    <Drawer
+      visible={leftDrawer}
+      onDismiss={onDismiss}
+      style={{ width: 240 }}
+    >
+      <TouchableWithoutFeedback onPress={()=> setOnDismiss('rightDrawer')}>
+        <View>
+          <Text>Open right Drawer</Text>
+        </View>
+      </TouchableWithoutFeedback>
+      <TouchableWithoutFeedback onPress={()=> setOnDismiss('goToPage', '/docs/components/Button')}>
+        <View>
+          <Text>Open another page</Text>
+         </View>
+      </TouchableWithoutFeedback>
+    </Drawer>
+    <Button
+      onPress={()=> setLeftDrawer(true)}
+      style={{ width: 280, marginRight: 24, marginTop: 16 }}
+    >With hook</Button>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Drawer}
+  propsJsonSchema={DrawerPropsJsonSchema}
+  props={{
+    visible: false,
+    position: 'left',
+    hasOverlay: true,
+    isSwipe: true,
+    showResponder: true,
+    onDismiss: () => undefined,
+    children: <View style={{ padding: 16 }}><Text>Content</Text></View>
+  }}
+/>

package/Swipe.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { PanResponder, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import './index.cssx.styl'
+import type { DrawerAnimateStates } from './animate'
+
+const RESPONDER_STYLES = {
+  left: { right: 0, width: '10%', height: '100%' },
+  right: { left: 0, width: '10%', height: '100%' },
+  bottom: { top: 0, width: '100%', height: '10%' },
+  top: { bottom: 0, width: '100%', height: '10%' }
+} satisfies Record<string, ViewStyle>
+
+interface DrawerSwipeProps {
+  position: 'left' | 'right' | 'top' | 'bottom'
+  contentSize: { width?: number, height?: number }
+  swipeStyle?: StyleProp<ViewStyle>
+  isHorizontal: boolean
+  isSwipe: boolean
+  isInvertPosition: boolean
+  animateStates: DrawerAnimateStates
+  runHide: () => void
+  runShow: () => void
+}
+
+function Swipe ({
+  position,
+  contentSize,
+  swipeStyle,
+  isHorizontal,
+  isSwipe,
+  isInvertPosition,
+  animateStates,
+  runHide,
+  runShow
+}: DrawerSwipeProps): ReactNode {
+  const [startDrag, setStartDrag] = useState<number | null>(null)
+  const [endDrag, setEndDrag] = useState(false)
+  const [offset, setOffset] = useState<number | null>(null)
+
+  const dragZoneValue = useMemo(() => {
+    // 15 percent
+    return isHorizontal
+      ? (((contentSize.width ?? 0) / 100) * 15)
+      : (((contentSize.height ?? 0) / 100) * 15)
+  }, [contentSize, isHorizontal])
+
+  useEffect(() => {
+    if (offset === null) return
+    if (endDrag) {
+      const validOffset = isInvertPosition ? -offset : offset
+
+      if (validOffset >= dragZoneValue) {
+        runHide()
+      } else {
+        runShow()
+      }
+
+      setOffset(null)
+      setStartDrag(null)
+      setEndDrag(false)
+      return
+    }
+
+    if (isInvertPosition && offset < 0) animateStates.position.setValue(offset)
+    if (!isInvertPosition && offset > 0) animateStates.position.setValue(offset)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [offset, endDrag])
+
+  const responder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => false,
+    onPanResponderTerminationRequest: () => false,
+    onShouldBlockNativeResponder: () => false,
+    onStartShouldSetPanResponderCapture: (evt, gestureState) => {
+      return isHorizontal ? (gestureState.dx !== 0) : (gestureState.dy !== 0)
+    },
+    onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
+      return isHorizontal ? (gestureState.dx !== 0) : (gestureState.dy !== 0)
+    },
+    onPanResponderGrant: e => {
+      if (isHorizontal) {
+        setStartDrag(e.nativeEvent.locationX)
+      } else {
+        setStartDrag(e.nativeEvent.locationY)
+      }
+    },
+    onPanResponderMove: (e, gesture) => {
+      if (startDrag) {
+        setOffset(isHorizontal ? gesture.dx : gesture.dy)
+      }
+    },
+    onPanResponderEnd: () => {
+      if (startDrag) setEndDrag(true)
+    }
+  }), [startDrag, isHorizontal])
+
+  const _responder = !isSwipe ? { panHandlers: {} } : responder
+  const _responderStyle = StyleSheet.flatten([
+    RESPONDER_STYLES[position],
+    swipeStyle
+  ])
+
+  return pug`
+    View.responder(..._responder.panHandlers style=_responderStyle)
+  `
+}
+
+export default observer(themed('Drawer', Swipe))

package/animate.ts

@@ -0,0 +1,88 @@
+import { Animated } from 'react-native'
+
+export interface DrawerAnimateStates {
+  opacity: Animated.Value
+  position: Animated.Value
+}
+
+export interface DrawerAnimateParams {
+  width: number
+  height: number
+  animateStates: DrawerAnimateStates
+  hasOverlay: boolean
+  isHorizontal: boolean
+  isInvertPosition: boolean
+  isInit?: boolean
+}
+
+export default {
+  show ({
+    width,
+    height,
+    animateStates,
+    hasOverlay,
+    isHorizontal,
+    isInvertPosition,
+    isInit
+  }: DrawerAnimateParams, callback?: () => void) {
+    if (isInit) {
+      animateStates.position.setValue(
+        isHorizontal
+          ? (isInvertPosition ? -width : width)
+          : (isInvertPosition ? -height : height)
+      )
+    }
+
+    const animations = [
+      Animated.timing(animateStates.position, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: false
+      })
+    ]
+
+    if (hasOverlay) {
+      animations.push(
+        Animated.timing(animateStates.opacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: false
+        })
+      )
+    }
+
+    Animated.parallel(animations).start(callback)
+  },
+
+  hide ({
+    width,
+    height,
+    animateStates,
+    hasOverlay,
+    isHorizontal,
+    isInvertPosition
+  }: DrawerAnimateParams, callback?: () => void) {
+    const animations = [
+      Animated.timing(animateStates.position, {
+        toValue:
+          isHorizontal
+            ? (isInvertPosition ? -width : width)
+            : (isInvertPosition ? -height : height),
+        duration: 200,
+        useNativeDriver: false
+      })
+    ]
+
+    if (hasOverlay) {
+      animations.push(
+        Animated.timing(animateStates.opacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: false
+        })
+      )
+    }
+
+    Animated.parallel(animations).start(callback)
+  }
+}

package/index.cssx.styl

@@ -0,0 +1,38 @@
+.overlayCase
+  width 100%
+  height 100%
+  position absolute
+
+.overlay
+  position absolute
+  width 100%
+  height 100%
+  background-color rgba(0, 0, 0, .5)
+
+.case
+  height 100%
+  width 100%
+
+.area
+  height 100%
+  width 100%
+  position absolute
+
+.contentDefault
+  background-color #ffffff
+  shadow(2)
+
+.fullVertical
+  height 80%
+  width 100%
+
+.fullHorizontal
+  width 80%
+  height 100%
+
+.contentBottom
+  height 60%
+  border-radius 2u 2u 0 0
+
+.responder
+  position absolute

package/index.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ComponentType, type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+export { default as useDrawerDismiss } from './useDrawerDismiss';
+export declare const _PropsJsonSchema: {};
+export interface DrawerProps {
+    /** Custom styles applied to the drawer container */
+    style?: StyleProp<ViewStyle>;
+    /** Root component wrapping the drawer area @default SafeAreaView */
+    AreaComponent?: ComponentType<any>;
+    /** Component used as the drawer content wrapper @default View */
+    ContentComponent?: ComponentType<any>;
+    /** Custom styles applied to the swipe responder zone */
+    swipeStyle?: StyleProp<ViewStyle>;
+    /** Content rendered inside the drawer */
+    children?: ReactNode;
+    /** Controlled visibility flag @default false */
+    visible?: boolean;
+    /** Drawer position relative to the screen @default 'left' */
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    /** Enable swipe-to-close interaction @default true */
+    isSwipe?: boolean;
+    /** Render a dimming overlay behind the drawer @default true */
+    hasOverlay?: boolean;
+    /** Show swipe responder zone @default true */
+    showResponder?: boolean;
+    /** Called after drawer is dismissed (after hide animation completes) */
+    onDismiss: () => void;
+    /** Called after drawer becomes visible (after show animation completes) */
+    onRequestOpen?: () => void;
+}
+declare const _default: ComponentType<DrawerProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,206 @@
+import { useState, useEffect, useRef, type ComponentType, type ReactNode } from 'react'
+import {
+  SafeAreaView,
+  Animated,
+  View,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Portal from '@startupjs-ui/portal'
+import Swipe from './Swipe'
+import animate, { type DrawerAnimateStates } from './animate'
+import './index.cssx.styl'
+
+export { default as useDrawerDismiss } from './useDrawerDismiss'
+
+const POSITION_STYLES = {
+  left: { alignItems: 'flex-start' },
+  right: { alignItems: 'flex-end' },
+  top: { justifyContent: 'flex-start' },
+  bottom: { justifyContent: 'flex-end' }
+} satisfies Record<string, ViewStyle>
+
+const POSITION_NAMES = {
+  left: 'translateX',
+  right: 'translateX',
+  top: 'translateY',
+  bottom: 'translateY'
+} as const
+
+export const _PropsJsonSchema = {/* DrawerProps */}
+
+export interface DrawerProps {
+  /** Custom styles applied to the drawer container */
+  style?: StyleProp<ViewStyle>
+  /** Root component wrapping the drawer area @default SafeAreaView */
+  AreaComponent?: ComponentType<any>
+  /** Component used as the drawer content wrapper @default View */
+  ContentComponent?: ComponentType<any>
+  /** Custom styles applied to the swipe responder zone */
+  swipeStyle?: StyleProp<ViewStyle>
+  /** Content rendered inside the drawer */
+  children?: ReactNode
+  /** Controlled visibility flag @default false */
+  visible?: boolean
+  /** Drawer position relative to the screen @default 'left' */
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  /** Enable swipe-to-close interaction @default true */
+  isSwipe?: boolean
+  /** Render a dimming overlay behind the drawer @default true */
+  hasOverlay?: boolean
+  /** Show swipe responder zone @default true */
+  showResponder?: boolean
+  /** Called after drawer is dismissed (after hide animation completes) */
+  onDismiss: () => void
+  /** Called after drawer becomes visible (after show animation completes) */
+  onRequestOpen?: () => void
+}
+
+// TODO: more test for work responder with ScrollView
+// https://material-ui.com/ru/components/drawers/#%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B0%D1%8F-%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D1%8C
+function Drawer ({
+  style,
+  AreaComponent = SafeAreaView,
+  ContentComponent = View,
+  swipeStyle,
+  children,
+  visible = false,
+  position = 'left',
+  isSwipe = true,
+  hasOverlay = true,
+  showResponder = true,
+  onDismiss,
+  onRequestOpen
+}: DrawerProps): ReactNode {
+  const isHorizontal = position === 'left' || position === 'right'
+  const isInvertPosition = position === 'left' || position === 'top'
+
+  const refContent = useRef<any>(null)
+  const [isShow, setIsShow] = useState(false)
+  const [contentSize, setContentSize] = useState<{ width?: number, height?: number }>({})
+
+  const [animateStates] = useState<DrawerAnimateStates>({
+    opacity: new Animated.Value(visible ? 1 : 0),
+    position: new Animated.Value(0)
+  })
+
+  // -main
+  useEffect(() => {
+    if (visible) {
+      setIsShow(true)
+      setTimeout(() => { void runShow() }, 0)
+    } else {
+      runHide()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible])
+  // -
+
+  async function waitForDrawerRef () {
+    let attempts = 0
+
+    while (attempts < 5) {
+      if (refContent.current) return true
+      await new Promise(resolve => setTimeout(resolve, 30))
+      attempts++
+    }
+
+    return !!refContent.current
+  }
+
+  async function runShow () {
+    await waitForDrawerRef()
+
+    getValidNode(refContent.current).measure((x: number, y: number, width: number, height: number) => {
+      const isInit = !contentSize.width
+      setContentSize({ width, height })
+
+      animate.show({
+        width,
+        height,
+        animateStates,
+        hasOverlay,
+        isHorizontal,
+        isInvertPosition,
+        isInit
+      }, () => {
+        onRequestOpen && onRequestOpen()
+      })
+    })
+  }
+
+  async function runHide () {
+    if (!refContent.current) return
+
+    getValidNode(refContent.current).measure((x: number, y: number, width: number, height: number) => {
+      animate.hide({
+        width,
+        height,
+        animateStates,
+        hasOverlay,
+        isHorizontal,
+        isInvertPosition
+      }, () => {
+        setContentSize({})
+        setIsShow(false)
+        onDismiss()
+      })
+    })
+  }
+
+  const _styleCase = StyleSheet.flatten([
+    POSITION_STYLES[position],
+    { opacity: isShow ? 1 : 0 }
+  ])
+
+  const _styleContent = StyleSheet.flatten([
+    { transform: [{ [POSITION_NAMES[position]]: animateStates.position }] },
+    style
+  ])
+
+  return pug`
+    if isShow
+      Portal
+        AreaComponent.area
+          ContentComponent.case(style=_styleCase)
+            if hasOverlay
+              TouchableWithoutFeedback.overlayCase(onPress=onDismiss)
+                Animated.View.overlay(style={ opacity: animateStates.opacity })
+
+            Animated.View(
+              ref=refContent
+              styleName={
+                contentDefault: isShow,
+                contentBottom: isShow && position === 'bottom',
+                fullHorizontal: isShow && isHorizontal,
+                fullVertical: isShow && !isHorizontal
+              }
+              style=_styleContent
+            )
+              if showResponder
+                Swipe(
+                  position=position
+                  contentSize=contentSize
+                  swipeStyle=swipeStyle
+                  isHorizontal=isHorizontal
+                  isSwipe=isSwipe
+                  isInvertPosition=isInvertPosition
+                  animateStates=animateStates
+                  runHide=runHide
+                  runShow=runShow
+                )
+              = children
+  `
+}
+
+function getValidNode (current: any) {
+  return current?.measure
+    ? current
+    : current?.getNode?.()
+}
+
+export default observer(themed('Drawer', Drawer))

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@startupjs-ui/drawer",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/portal": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/useDrawerDismiss.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+interface DrawerDismissState {
+  tag: string
+  data: any
+}
+
+export interface DrawerDismissCallbacks {
+  default: (data?: any) => void
+  [tag: string]: ((data?: any) => void) | any
+}
+
+export default function useDrawerDismiss (
+  callbacks: DrawerDismissCallbacks
+): [
+    onDismiss: () => void,
+    setOnDismiss: (tag: string, data?: any) => void
+  ] {
+  const [state, setState] = useState<DrawerDismissState>({ tag: 'default', data: null })
+
+  useEffect(() => {
+    if (state.tag !== 'default') {
+      callbacks.default()
+    }
+    // preserve legacy behavior (no dependency array)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  })
+
+  return [
+    () => {
+      callbacks[state.tag]?.(state.data)
+      setState({ tag: 'default', data: null })
+    },
+    (tag, data) => { setState({ tag, data }) }
+  ]
+}