@startupjs-ui/draggable 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# 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/draggable
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* 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))
+* **draggable:** refactor Draggable, Droppable, DragDropProvider components ([edf54e1](https://github.com/startupjs/startupjs-ui/commit/edf54e1171f6e89737281d580567b559d585d242))

package/DragDropProvider/index.tsx

@@ -0,0 +1,28 @@
+import React, { type ReactNode } from 'react'
+import { pug, $ } from 'startupjs'
+
+export const DragDropContext = React.createContext<any>({})
+
+export const _PropsJsonSchema = {/* DragDropProviderProps */}
+
+export interface DragDropProviderProps {
+  /** Components rendered inside provider */
+  children?: ReactNode
+}
+
+export default function DragDropProvider ({
+  children
+}: DragDropProviderProps): ReactNode {
+  const $context = $({
+    dropHoverId: '',
+    dragHoverIndex: null,
+    activeData: {},
+    drops: {},
+    drags: {}
+  })
+
+  return pug`
+    DragDropContext.Provider(value=$context)
+      = children
+  `
+}

package/Draggable/index.tsx

@@ -0,0 +1,252 @@
+import React, { useContext, useEffect, useRef, type ReactNode } from 'react'
+import { Animated, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { State, PanGestureHandler } from 'react-native-gesture-handler'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Portal from '@startupjs-ui/portal'
+import { DragDropContext } from '../DragDropProvider'
+import '../index.cssx.styl'
+
+export const _PropsJsonSchema = {/* DraggableProps */}
+
+export interface DraggableProps {
+  /** Content rendered inside draggable item */
+  children?: ReactNode
+  /** Custom styles applied to the draggable item */
+  style?: StyleProp<ViewStyle>
+  /** Drag type (useful for filtering drop targets) */
+  type?: string
+  /** Unique draggable item id */
+  dragId: string
+  /** @private Drop id injected by Droppable */
+  _dropId?: string
+  /** @private Index injected by Droppable */
+  _index?: number
+  /** Called when drag begins */
+  onDragBegin?: (options: {
+    dragId: string
+    dropId: string
+    dropHoverId: string
+    hoverIndex: number
+  }) => void
+  /** Called when drag ends */
+  onDragEnd?: (options: {
+    dragId: string
+    dropId: string
+    dropHoverId: string
+    hoverIndex: number
+  }) => void
+}
+
+function Draggable ({
+  children,
+  style,
+  type,
+  dragId,
+  _dropId,
+  _index,
+  onDragBegin,
+  onDragEnd
+}: DraggableProps): ReactNode {
+  const ref = useRef<any>(null)
+  const $dndContext = useContext(DragDropContext)
+
+  const animateStates = {
+    left: new Animated.Value(0),
+    top: new Animated.Value(0)
+  }
+
+  // init drags.dragId
+  useEffect(() => {
+    $dndContext.drags[dragId].set({ ref, style: {} })
+  }, [ // eslint-disable-line react-hooks/exhaustive-deps
+    dragId,
+    _dropId,
+    _index,
+    $dndContext.drags[dragId].ref.current.get() // eslint-disable-line react-hooks/exhaustive-deps
+  ])
+
+  if (_dropId == null || _index == null) {
+    return pug`
+      View(style=style)= children
+    `
+  }
+
+  const dropId = _dropId
+  const index = _index
+
+  function onHandlerStateChange ({ nativeEvent }: any) {
+    const data = {
+      type,
+      dragId,
+      dropId,
+      dragStyle: { ...StyleSheet.flatten(style) },
+      startPosition: {
+        x: nativeEvent.x,
+        y: nativeEvent.y
+      }
+    }
+
+    if (nativeEvent.state === State.BEGAN) {
+      ref.current.measure((dragX: any, dragY: any, dragWidth: any, dragHeight: any) => {
+        data.dragStyle.height = dragHeight
+
+        $dndContext.drops[dropId].ref.current.get().measure((dx: any, dy: any, dw: any, dropHeight: any) => {
+          // init states
+          $dndContext.drags[dragId].style.set({ display: 'none' })
+          $dndContext.assign({
+            activeData: data,
+            dropHoverId: dropId,
+            dragHoverIndex: index
+          })
+
+          onDragBegin && onDragBegin({
+            dragId: data.dragId,
+            dropId: data.dropId,
+            dropHoverId: dropId,
+            hoverIndex: index
+          })
+        })
+      })
+    }
+
+    if (nativeEvent.state === State.END) {
+      animateStates.left.setValue(0)
+      animateStates.top.setValue(0)
+
+      onDragEnd && onDragEnd({
+        dragId: $dndContext.activeData.dragId.get(),
+        dropId: $dndContext.activeData.dropId.get(),
+        dropHoverId: $dndContext.dropHoverId.get(),
+        hoverIndex: $dndContext.dragHoverIndex.get()
+      })
+
+      // reset states
+      $dndContext.assign({
+        drags: {
+          [dragId]: { style: {} }
+        },
+        activeData: {},
+        dropHoverId: '',
+        dragHoverIndex: null
+      })
+    }
+  }
+
+  function onGestureEvent ({ nativeEvent }: any) {
+    if (!$dndContext.dropHoverId.get()) return
+
+    animateStates.left.setValue(
+      nativeEvent.absoluteX - $dndContext.activeData.startPosition.x.get()
+    )
+    animateStates.top.setValue(
+      nativeEvent.absoluteY - $dndContext.activeData.startPosition.y.get()
+    )
+
+    $dndContext.activeData.x.set(nativeEvent.absoluteX)
+    $dndContext.activeData.y.set(nativeEvent.absoluteY)
+    checkPosition($dndContext.activeData.get())
+  }
+
+  function checkPosition (activeData: any) {
+    $dndContext.drops[dropId].ref.current.get().measure(async (dX: any, dY: any, dWidth: any, dHeight: any, dPageX: any, dPageY: any) => {
+      const positions: any[] = []
+      let startPosition = dPageY
+      let endPosition = dPageY
+
+      const dragsLength = $dndContext.drops[$dndContext.dropHoverId.get()].items.get()?.length || 0
+
+      for (let index = 0; index < dragsLength; index++) {
+        if (!$dndContext.dropHoverId.get()) break
+
+        const iterDragId = $dndContext.drops[$dndContext.dropHoverId.get()].items[index].get()
+
+        await new Promise<void>(resolve => {
+          const currentElement = $dndContext.drags[iterDragId].ref.current.get()
+          if (!currentElement) {
+            positions.push(null)
+            resolve()
+            return
+          }
+          currentElement.measure((x: any, y: any, width: any, height: any, pageX: any, pageY: any) => {
+            if (index === 0) {
+              startPosition = dPageY
+              endPosition = dPageY + y + (height / 2)
+            } else {
+              startPosition = endPosition
+              endPosition = pageY + (height / 2)
+            }
+
+            if (iterDragId === dragId) {
+              positions.push(null)
+            } else {
+              positions.push({ start: startPosition, end: endPosition })
+            }
+
+            resolve()
+          })
+        })
+      }
+
+      positions.push({ start: endPosition, end: dPageY + dHeight })
+
+      for (let index = 0; index < positions.length; index++) {
+        const position = positions[index]
+        if (!position) continue
+
+        if (activeData.y > position.start && activeData.y < position.end) {
+          $dndContext.dragHoverIndex.set(index)
+          break
+        }
+      }
+    })
+  }
+
+  const contextStyle = $dndContext.drags[dragId].style.get() || {}
+  const _style: any = StyleSheet.flatten([style, animateStates])
+
+  const isShowPlaceholder = $dndContext.activeData.get() &&
+    $dndContext.dropHoverId.get() === dropId &&
+    $dndContext.dragHoverIndex.get() === index
+
+  const isShowLastPlaceholder = $dndContext.activeData.get() &&
+    $dndContext.dropHoverId.get() === dropId &&
+    $dndContext.drops[dropId].items.get().length - 1 === index &&
+    $dndContext.dragHoverIndex.get() === index + 1
+
+  const placeholder = pug`
+    View.placeholder(
+      style={
+        height: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.height.get(),
+        marginTop: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.marginTop.get(),
+        marginBottom: $dndContext.activeData.get() && $dndContext.activeData.dragStyle.get() && $dndContext.activeData.dragStyle.marginBottom.get()
+      }
+    )
+  `
+
+  return pug`
+    if isShowPlaceholder
+      = placeholder
+
+    Portal
+      if $dndContext.activeData.dragId.get() === dragId
+        Animated.View(style=[
+          _style,
+          { position: 'absolute', cursor: 'default' }
+        ])= children
+
+    PanGestureHandler(
+      onHandlerStateChange=onHandlerStateChange
+      onGestureEvent=onGestureEvent
+    )
+      Animated.View(
+        ref=ref
+        style=[style, contextStyle]
+      )= children
+
+    if isShowLastPlaceholder
+      = placeholder
+  `
+}
+
+export default observer(themed('Draggable', Draggable), { cache: false })

package/Droppable/index.tsx

@@ -0,0 +1,98 @@
+import React, { useRef, useEffect, useContext, type ReactNode } from 'react'
+import { View, StatusBar, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import { DragDropContext } from '../DragDropProvider'
+
+export const _PropsJsonSchema = {/* DroppableProps */}
+
+export interface DroppableProps {
+  /** Draggable items rendered inside the droppable area */
+  children?: ReactNode
+  /** Custom styles applied to the droppable container */
+  style?: StyleProp<ViewStyle>
+  /** Drop type (useful for filtering drags) */
+  type?: string
+  /** Unique droppable container id */
+  dropId: string
+  /** Called when active drag leaves this droppable */
+  onLeave?: () => void
+  /** Called when active drag enters this droppable */
+  onHover?: () => void
+}
+
+function Droppable ({
+  children,
+  style,
+  type,
+  dropId,
+  onLeave,
+  onHover
+}: DroppableProps): ReactNode {
+  const ref = useRef<any>(null)
+  const $dndContext = useContext(DragDropContext)
+  const $isHover = $(false)
+
+  useEffect(() => {
+    $dndContext.drops[dropId].set({
+      ref,
+      items: React.Children.map(children as any, (child: any) => {
+        return child?.props?.dragId
+      })
+    })
+  }, [children, dropId, $dndContext])
+
+  useEffect(() => {
+    ref.current.measure((x: any, y: any, width: any, height: any, pageX: any, pageY: any) => {
+      if (!$dndContext.activeData.dragId.get() || !$dndContext.dropHoverId.get()) {
+        $isHover.set(false)
+        return
+      }
+
+      const leftBorder = pageX
+      const rightBorder = pageX + width
+      const topBorder = pageY
+      const bottomBorder = pageY + height
+
+      const isHoverUpdate = (
+        $dndContext.activeData.x.get() > leftBorder &&
+        $dndContext.activeData.x.get() < rightBorder &&
+        $dndContext.activeData.y.get() - (StatusBar.currentHeight ?? 0) > topBorder &&
+        $dndContext.activeData.y.get() - (StatusBar.currentHeight ?? 0) < bottomBorder
+      )
+
+      if (isHoverUpdate && !$isHover.get()) {
+        $dndContext.dropHoverId.set(dropId)
+        onHover && onHover() // TODO
+      }
+
+      if (!isHoverUpdate && $isHover.get()) {
+        onLeave && onLeave() // TODO
+      }
+
+      $isHover.set(isHoverUpdate)
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify($dndContext.activeData.get())])
+
+  const modChildren = React.Children.toArray(children).map((child: any, index) => {
+    return React.cloneElement(child, {
+      ...child.props,
+      _dropId: dropId,
+      _index: index
+    })
+  })
+
+  const hasActiveDrag = $dndContext.drops[dropId].items.get()?.includes($dndContext.activeData.dragId.get())
+  const activeStyle = hasActiveDrag ? { zIndex: 9999 } : {}
+  const contextStyle = $dndContext.drops[dropId].style.get() || {}
+
+  return pug`
+    View(
+      ref=ref
+      style=[style, activeStyle, contextStyle]
+    )= modChildren
+  `
+}
+
+export default observer(themed('Droppable', Droppable))

package/README.helpers.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { pug } from 'startupjs'
+import Span from '@startupjs-ui/span'
+import { Draggable, DragDropProvider, Droppable } from './index'
+
+export function DragDropProviderSandbox ({ children, ...props }) {
+  return pug`
+    DragDropProvider(...props)
+      if children
+        = children
+      else
+        Droppable.droppable(dropId='sandbox-drop')
+          Draggable.draggable(dragId='sandbox-drag')
+            Span Drag me
+  `
+}
+
+export function DroppableSandbox (props) {
+  return pug`
+    DragDropProvider
+      Droppable.droppable(...props)
+        Draggable.draggable(dragId='a')
+          Span Item A
+        Draggable.draggable(dragId='b')
+          Span Item B
+  `
+}
+
+export function DraggableSandbox ({ children, ...props }) {
+  return pug`
+    DragDropProvider
+      Droppable.droppable(dropId='sandbox-drop')
+        Draggable.draggable(...props)
+          if children
+            = children
+          else
+            Span Drag me
+  `
+}

package/README.mdx

@@ -0,0 +1,181 @@
+import { useState } from 'react'
+import { pug } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import {
+  Draggable,
+  DragDropProvider,
+  Droppable,
+  _PropsJsonSchema as DraggablePropsJsonSchema
+} from './index'
+import { _PropsJsonSchema as DragDropProviderPropsJsonSchema } from './DragDropProvider'
+import { _PropsJsonSchema as DroppablePropsJsonSchema } from './Droppable'
+import Span from '@startupjs-ui/span'
+import Div from '@startupjs-ui/div'
+import ScrollView from '@startupjs-ui/scroll-view'
+import {
+  DragDropProviderSandbox,
+  DroppableSandbox,
+  DraggableSandbox
+} from './README.helpers'
+import './index.mdx.cssx.styl'
+
+# Draggable
+
+`Draggable` provides simple building blocks for drag & drop on React Native / RN Web:
+
+- `DragDropProvider` stores drag/drop state and exposes it via context
+- `Droppable` marks a drop target and tracks the order of its children
+- `Draggable` handles gestures and renders the dragged item into a `Portal`
+
+```jsx
+import { DragDropProvider, Droppable, Draggable } from 'startupjs-ui'
+```
+
+## How it works
+
+1. Wrap the area with `DragDropProvider`.
+2. Inside it render one or more `Droppable`s with unique `dropId`.
+3. Render `Draggable`s inside each `Droppable`, each with a unique `dragId`.
+4. Update your own data in `onDragEnd` using `{ dragId, dropId, dropHoverId, hoverIndex }`.
+
+## Simple example (reorder in a single list)
+
+```jsx example
+const [items, setItems] = useState([
+  { id: 'a', text: 'First' },
+  { id: 'b', text: 'Second' },
+  { id: 'c', text: 'Third' }
+])
+
+function onDragEnd ({ dragId, dropId, dropHoverId, hoverIndex }) {
+  if (dropId !== dropHoverId) return
+  const fromIndex = items.findIndex(i => i.id === dragId)
+  if (fromIndex === -1) return
+
+  const next = [...items]
+  const [moved] = next.splice(fromIndex, 1)
+  const toIndex = hoverIndex > fromIndex ? hoverIndex - 1 : hoverIndex
+  next.splice(toIndex, 0, moved)
+  setItems(next)
+}
+
+return pug`
+  DragDropProvider
+    Droppable.droppable(dropId='list')
+      each item in items
+        Draggable.draggable(
+          key=item.id
+          dragId=item.id
+          onDragEnd=onDragEnd
+        )
+          Span= item.text
+`
+```
+
+## Multi-column example (move items between columns)
+
+This example implements a small kanban-like board:
+
+- each column is a `Droppable`
+- each card is a `Draggable`
+- `onDragEnd` moves the dragged card to the hovered column and index
+
+```jsx example
+const [data, setData] = useState([
+  {
+    id: '8c778cc6-c1dd-4dde-84a2-e3000fca8ffd',
+    title: 'Plan',
+    items: [
+      { id: '55bd3da0-bed0-451f-8ac3-3b9a19a699fb', text: 'Quarterly newsletter and other' },
+      { id: '8374e61f-0b95-4a4a-8282-48f9316f4157', text: 'Read a book' },
+      { id: '13febede-112d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming laptop' },
+      { id: '11aabadc-113d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming 2' },
+      { id: '12febadc-112d-4d53-8e6f-a83a184e229d', text: 'Buy a new gaming 3' }
+    ]
+  },
+  {
+    id: '2d503db0-c209-4f47-8b6a-96ef3ec6ade7',
+    title: 'WIP',
+    items: [
+      { id: '4174c327-eea0-4ec7-96fa-2dc319c40fd6', text: 'Interview John H.', style: {} },
+      { id: 'a2b3af0e-e482-468e-a681-3ab8303b208f', text: 'Sumbit updates to mobile storefronts', style: {} }
+    ]
+  },
+  {
+    id: 'be64729e-29d8-4399-88cd-f1ee3c48b0d8',
+    title: 'Complete',
+    items: [
+      { id: 'c539db23-77f3-49f8-93f0-2a10f1c1f1b7', text: 'Schedule meeting with Alex', style: {} },
+      { id: 'a0d82bf2-72f4-48ba-9294-b835862519ce', text: 'Homepage refresh', style: {} }
+    ]
+  }
+])
+
+const arrInsertEl = (arr, index, item) => arr.splice(index, 0, item)
+const arrRemoveEl = (arr, index) => arr.splice(index, 1)
+
+function onDragEnd ({
+  dragId,
+  dropId,
+  dropHoverId,
+  hoverIndex
+}) {
+  const dropIndex = data.findIndex(drop => drop.id === dropId)
+  const dropHoverIndex = data.findIndex(drop => drop.id === dropHoverId)
+  const dragIndex = data[dropIndex].items.findIndex(drag => drag.id === dragId)
+
+  const drag = data[dropIndex].items[dragIndex]
+
+  arrInsertEl(data[dropHoverIndex].items, hoverIndex, drag)
+  if (dropHoverId === dropId && hoverIndex < dragIndex) {
+    arrRemoveEl(data[dropIndex].items, dragIndex + 1)
+  } else {
+    arrRemoveEl(data[dropIndex].items, dragIndex)
+  }
+
+  setData([...data])
+}
+
+return pug`
+  DragDropProvider
+    ScrollView(horizontal=true)
+      Div(row)
+        each drop in data
+          Droppable.droppable(
+            key=drop.id
+            dropId=drop.id
+          )
+            each drag in drop.items
+              Draggable.draggable(
+                key=drag.id
+                dragId=drag.id
+                onDragEnd=onDragEnd
+              )
+                Span= drag.text
+`
+```
+
+## Sandbox
+
+### DragDropProvider
+
+<Sandbox
+  Component={DragDropProviderSandbox}
+  propsJsonSchema={DragDropProviderPropsJsonSchema}
+/>
+
+### Droppable
+
+<Sandbox
+  Component={DroppableSandbox}
+  props={{ dropId: 'sandbox-drop' }}
+  propsJsonSchema={DroppablePropsJsonSchema}
+/>
+
+### Draggable
+
+<Sandbox
+  Component={DraggableSandbox}
+  props={{ dragId: 'sandbox-drag' }}
+  propsJsonSchema={DraggablePropsJsonSchema}
+/>

package/index.cssx.styl

@@ -0,0 +1,3 @@
+.placeholder
+  background-color var(--color-bg-main-subtle-alt)
+  border-radius .5u

package/index.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+export { default as DragDropProvider, DragDropContext, type DragDropProviderProps } from './DragDropProvider';
+export { default as Draggable, type DraggableProps, _PropsJsonSchema } from './Draggable';
+export { default as Droppable, type DroppableProps } from './Droppable';
+export { _PropsJsonSchema as DragDropProviderPropsJsonSchema } from './DragDropProvider';
+export { _PropsJsonSchema as DroppablePropsJsonSchema } from './Droppable';

package/index.mdx.cssx.styl

@@ -0,0 +1,15 @@
+.droppable
+  margin-right 2u
+  background-color var(--color-bg-main-subtle)
+  padding 1u
+
+.draggable
+  width 200px
+  background-color var(--color-bg-main-strong)
+  margin-top .5u
+  margin-bottom .5u
+  padding 1u 2u
+  border-width 1px
+  border-style solid
+  border-color var(--color-border-main)
+  radius()

package/index.tsx

@@ -0,0 +1,12 @@
+export {
+  default as DragDropProvider,
+  DragDropContext,
+  type DragDropProviderProps
+} from './DragDropProvider'
+
+export { default as Draggable, type DraggableProps, _PropsJsonSchema } from './Draggable'
+
+export { default as Droppable, type DroppableProps } from './Droppable'
+
+export { _PropsJsonSchema as DragDropProviderPropsJsonSchema } from './DragDropProvider'
+export { _PropsJsonSchema as DroppablePropsJsonSchema } from './Droppable'

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/draggable",
+  "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": "*",
+    "react-native-gesture-handler": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}