@sigmela/router 0.3.6 → 0.4.0

package/lib/module/Drawer/RenderDrawer.native.js

@@ -1,248 +0,0 @@
-"use strict";
-
-import { StackRenderer } from "../StackRenderer.js";
-import { DrawerContext } from "./DrawerContext.js";
-import { useRouter } from "../RouterContext.js";
-import { Pressable, StyleSheet, View, Text } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo, startTransition } from 'react';
-const EMPTY_HISTORY = [];
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.bezier(0.22, 0.61, 0.36, 1)
-};
-const DrawerStackRenderer = /*#__PURE__*/memo(({
-  stack,
-  appearance
-}) => {
-  const router = useRouter();
-  const stackId = stack.getId();
-
-  // Start with empty history — useEffect populates via startTransition.
-  const [history, setHistory] = useState(EMPTY_HISTORY);
-  useEffect(() => {
-    const update = () => {
-      startTransition(() => {
-        setHistory(router.getStackHistory(stackId));
-      });
-    };
-    const unsub = router.subscribeStack(stackId, update);
-    update();
-    return unsub;
-  }, [router, stackId]);
-  return /*#__PURE__*/_jsx(StackRenderer, {
-    appearance: appearance,
-    stackId: stackId,
-    history: history
-  });
-});
-DrawerStackRenderer.displayName = 'DrawerStackRenderer';
-const DrawerNodeRenderer = /*#__PURE__*/memo(({
-  node,
-  appearance
-}) => {
-  const Renderer = useMemo(() => node.getRenderer(), [node]);
-  return /*#__PURE__*/_jsx(Renderer, {
-    appearance: appearance
-  });
-});
-DrawerNodeRenderer.displayName = 'DrawerNodeRenderer';
-export const RenderDrawer = /*#__PURE__*/memo(({
-  drawer,
-  appearance = {}
-}) => {
-  const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const drawerWidth = drawer.width;
-  const subscribe = useCallback(cb => drawer.subscribe(cb), [drawer]);
-  const snapshot = useSyncExternalStore(subscribe, drawer.getState, drawer.getState);
-  const {
-    tabs,
-    index,
-    config,
-    isOpen
-  } = snapshot;
-
-  // Reanimated shared value for drawer position
-  const translateX = useSharedValue(0);
-  const overlayOpacity = useSharedValue(0);
-  useEffect(() => {
-    translateX.value = withTiming(isOpen ? drawerWidth : 0, TIMING_CONFIG);
-    overlayOpacity.value = withTiming(isOpen ? 0.3 : 0, TIMING_CONFIG);
-  }, [isOpen, drawerWidth, translateX, overlayOpacity]);
-  const drawerStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value - drawerWidth
-    }]
-  }));
-  const mainStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value
-    }]
-  }));
-  const overlayStyle = useAnimatedStyle(() => ({
-    opacity: overlayOpacity.value,
-    pointerEvents: isOpen ? 'auto' : 'none'
-  }));
-  const onItemPress = useCallback(nextIndex => {
-    const targetTab = tabs[nextIndex];
-    if (!targetTab) return;
-    const targetStack = drawer.stacks[targetTab.tabKey];
-    const targetNode = drawer.nodes[targetTab.tabKey];
-    if (nextIndex !== index) {
-      drawer.onIndexChange(nextIndex);
-    }
-    if (targetStack) {
-      const stackId = targetStack.getId();
-      const stackHistory = router.getStackHistory(stackId);
-      if (stackHistory.length === 0) {
-        const firstRoute = targetStack.getFirstRoute();
-        if (firstRoute?.path) {
-          router.navigate(firstRoute.path);
-        }
-      }
-    } else if (targetNode) {
-      const nodeId = targetNode.getId?.();
-      if (nodeId) {
-        const nodeHistory = router.getStackHistory(nodeId);
-        if (nodeHistory.length === 0) {
-          const seed = targetNode.seed?.();
-          if (seed?.path) {
-            const prefix = targetTab.tabPrefix ?? '';
-            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
-            router.navigate(fullPath);
-          }
-        }
-      }
-    }
-    drawer.close();
-  }, [tabs, drawer, index, router]);
-  const handleOverlayPress = useCallback(() => {
-    drawer.close();
-  }, [drawer]);
-  const [visited, setVisited] = useState({});
-  useEffect(() => {
-    const key = tabs[index]?.tabKey;
-    if (key) {
-      startTransition(() => {
-        setVisited(prev => prev[key] ? prev : {
-          ...prev,
-          [key]: true
-        });
-      });
-    }
-  }, [tabs, index]);
-  const CustomDrawer = config.component;
-  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
-    value: drawer,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.container,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.sidebar, {
-          width: drawerWidth
-        }, drawerStyle],
-        children: CustomDrawer ? /*#__PURE__*/_jsx(CustomDrawer, {
-          onItemPress: onItemPress,
-          activeIndex: index,
-          items: tabs,
-          isOpen: isOpen,
-          onClose: handleOverlayPress
-        }) : /*#__PURE__*/_jsx(View, {
-          style: [styles.sidebarContent, {
-            paddingTop: insets.top + 12
-          }],
-          children: tabs.map((tab, i) => {
-            const isActive = i === index;
-            return /*#__PURE__*/_jsx(Pressable, {
-              onPress: () => onItemPress(i),
-              style: [styles.item, isActive && styles.itemActive],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.itemText, isActive && styles.itemTextActive],
-                children: tab.title
-              })
-            }, tab.tabKey);
-          })
-        })
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.overlay, overlayStyle],
-        children: /*#__PURE__*/_jsx(Pressable, {
-          style: StyleSheet.absoluteFill,
-          onPress: handleOverlayPress
-        })
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.main, mainStyle],
-        children: tabs.filter(t => visited[t.tabKey]).map(tab => {
-          const isActive = tab.tabKey === tabs[index]?.tabKey;
-          const stackForTab = drawer.stacks[tab.tabKey];
-          const nodeForTab = drawer.nodes[tab.tabKey];
-          const ScreenForTab = drawer.screens[tab.tabKey];
-          return /*#__PURE__*/_jsx(View, {
-            style: [styles.flex, !isActive && styles.hidden],
-            children: stackForTab ? /*#__PURE__*/_jsx(DrawerStackRenderer, {
-              appearance: appearance,
-              stack: stackForTab
-            }) : nodeForTab ? /*#__PURE__*/_jsx(DrawerNodeRenderer, {
-              appearance: appearance,
-              node: nodeForTab
-            }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
-          }, `drawer-content-${tab.tabKey}`);
-        })
-      })]
-    })
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    overflow: 'hidden'
-  },
-  sidebar: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: 10,
-    backgroundColor: '#ffffff'
-  },
-  sidebarContent: {
-    flex: 1
-  },
-  main: {
-    flex: 1,
-    width: '100%'
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 5,
-    backgroundColor: '#000000'
-  },
-  item: {
-    height: 44,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    marginHorizontal: 12,
-    marginBottom: 4,
-    borderRadius: 10
-  },
-  itemActive: {
-    backgroundColor: 'rgba(201, 204, 209, 0.32)'
-  },
-  itemText: {
-    flex: 1,
-    fontSize: 14,
-    fontWeight: '600'
-  },
-  itemTextActive: {
-    fontWeight: '700'
-  },
-  flex: {
-    flex: 1
-  },
-  hidden: {
-    display: 'none'
-  }
-});

package/lib/module/Drawer/RenderDrawer.web.js

@@ -1,197 +0,0 @@
-"use strict";
-
-import { StackRenderer } from "../StackRenderer.js";
-import { DrawerContext } from "./DrawerContext.js";
-import { useRouter } from "../RouterContext.js";
-import { DrawerIcon } from './DrawerIcon';
-import { useCallback, useSyncExternalStore, memo, useMemo } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const isImageSource = value => {
-  if (value == null) return false;
-  const valueType = typeof value;
-  if (valueType === 'number') return true;
-  if (Array.isArray(value)) return value.length > 0;
-  if (valueType === 'object') {
-    const v = value;
-    if ('uri' in v || 'width' in v || 'height' in v) return true;
-  }
-  return false;
-};
-const toColorString = c => typeof c === 'string' ? c : undefined;
-const DrawerStackRenderer = /*#__PURE__*/memo(({
-  stack,
-  appearance
-}) => {
-  const router = useRouter();
-  const stackId = stack.getId();
-  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
-  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
-  const history = useSyncExternalStore(subscribe, get, get);
-  return /*#__PURE__*/_jsx(StackRenderer, {
-    appearance: appearance,
-    stackId: stackId,
-    history: history
-  });
-});
-DrawerStackRenderer.displayName = 'DrawerStackRenderer';
-const DrawerNodeRenderer = /*#__PURE__*/memo(({
-  node,
-  appearance
-}) => {
-  const Renderer = useMemo(() => node.getRenderer(), [node]);
-  return /*#__PURE__*/_jsx(Renderer, {
-    appearance: appearance
-  });
-});
-DrawerNodeRenderer.displayName = 'DrawerNodeRenderer';
-const joinPrefixAndPath = (prefix, path) => {
-  const base = (prefix ?? '').trim();
-  const child = (path || '/').trim();
-  if (!base) return child || '/';
-  const baseNorm = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
-  if (!child || child === '/') {
-    return baseNorm || '/';
-  }
-  if (child.startsWith('/')) {
-    return `${baseNorm}${child}`;
-  }
-  return `${baseNorm}/${child}`;
-};
-export const RenderDrawer = /*#__PURE__*/memo(({
-  drawer,
-  appearance
-}) => {
-  const router = useRouter();
-  const subscribe = useCallback(cb => drawer.subscribe(cb), [drawer]);
-  const snapshot = useSyncExternalStore(subscribe, drawer.getState, drawer.getState);
-  const {
-    tabs,
-    index,
-    config,
-    isOpen
-  } = snapshot;
-  const focusedTab = tabs[index];
-  const stack = focusedTab ? drawer.stacks[focusedTab.tabKey] : undefined;
-  const node = focusedTab ? drawer.nodes[focusedTab.tabKey] : undefined;
-  const Screen = focusedTab ? drawer.screens[focusedTab.tabKey] : undefined;
-  const onItemClick = useCallback(nextIndex => {
-    const targetTab = tabs[nextIndex];
-    if (!targetTab) return;
-    const targetStack = drawer.stacks[targetTab.tabKey];
-    const targetNode = drawer.nodes[targetTab.tabKey];
-    if (targetStack) {
-      if (nextIndex !== index) {
-        drawer.onIndexChange(nextIndex);
-      }
-      const firstRoutePath = targetStack.getFirstRoute()?.path;
-      if (firstRoutePath) {
-        router.reset(firstRoutePath);
-      }
-    } else if (targetNode) {
-      if (nextIndex !== index) {
-        drawer.onIndexChange(nextIndex);
-      }
-      const seedPath = targetNode.seed?.()?.path;
-      const fallbackFirstPath = targetNode.getNodeRoutes()?.[0]?.path;
-      const path = seedPath ?? fallbackFirstPath ?? '/';
-      const fullPath = joinPrefixAndPath(targetTab.tabPrefix, path);
-      router.reset(fullPath);
-    } else {
-      if (nextIndex !== index) {
-        drawer.onIndexChange(nextIndex);
-      }
-    }
-
-    // Close drawer on mobile after navigation
-    drawer.close();
-  }, [router, drawer, tabs, index]);
-  const handleItemClick = useCallback(e => {
-    const idx = Number(e.currentTarget.dataset.index);
-    onItemClick(idx);
-  }, [onItemClick]);
-  const handleOverlayClick = useCallback(() => {
-    drawer.close();
-  }, [drawer]);
-  const drawerStyle = useMemo(() => {
-    const bg = toColorString(appearance?.tabBar?.backgroundColor);
-    const style = {};
-    if (bg) {
-      style['--drawer-bg'] = bg;
-    }
-    if (drawer.width !== 280) {
-      style['--drawer-width'] = `${drawer.width}px`;
-    }
-    return Object.keys(style).length ? style : undefined;
-  }, [appearance?.tabBar?.backgroundColor, drawer.width]);
-  const titleBaseStyle = useMemo(() => ({
-    fontFamily: appearance?.tabBar?.title?.fontFamily,
-    fontSize: appearance?.tabBar?.title?.fontSize,
-    fontWeight: appearance?.tabBar?.title?.fontWeight,
-    fontStyle: appearance?.tabBar?.title?.fontStyle
-  }), [appearance?.tabBar?.title?.fontFamily, appearance?.tabBar?.title?.fontSize, appearance?.tabBar?.title?.fontWeight, appearance?.tabBar?.title?.fontStyle]);
-  const CustomDrawer = config.component;
-  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
-    value: drawer,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "drawer-container",
-      "data-drawer-open": isOpen ? 'true' : 'false',
-      style: drawerStyle,
-      children: [CustomDrawer ? /*#__PURE__*/_jsx(CustomDrawer, {
-        onItemPress: onItemClick,
-        activeIndex: index,
-        items: tabs,
-        isOpen: isOpen,
-        onClose: handleOverlayClick
-      }) : /*#__PURE__*/_jsx("div", {
-        className: "drawer-sidebar",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "drawer-sidebar-content",
-          children: tabs.map((tab, i) => {
-            const isActive = i === index;
-            const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
-            const title = appearance?.tabBar?.title;
-            const labelColor = isActive ? toColorString(title?.activeColor) ?? toColorString(title?.color) : toColorString(title?.color);
-            const labelStyle = {
-              ...titleBaseStyle,
-              color: labelColor
-            };
-            return /*#__PURE__*/_jsxs("button", {
-              type: "button",
-              "data-index": i,
-              "data-active": isActive ? 'true' : 'false',
-              "aria-current": isActive ? 'page' : undefined,
-              className: `drawer-item${isActive ? ' active' : ''}`,
-              onClick: handleItemClick,
-              children: [/*#__PURE__*/_jsx("div", {
-                className: "drawer-item-icon",
-                children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(DrawerIcon, {
-                  source: tab.icon,
-                  tintColor: iconTint
-                }) : null
-              }), /*#__PURE__*/_jsx("div", {
-                className: "drawer-item-label",
-                style: labelStyle,
-                children: tab.title
-              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
-                className: "drawer-item-badge",
-                children: tab.badgeValue
-              }) : null]
-            }, tab.tabKey);
-          })
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: "drawer-overlay",
-        onClick: handleOverlayClick
-      }), /*#__PURE__*/_jsx("div", {
-        className: "drawer-main",
-        children: stack ? /*#__PURE__*/_jsx(DrawerStackRenderer, {
-          appearance: appearance,
-          stack: stack
-        }) : node ? /*#__PURE__*/_jsx(DrawerNodeRenderer, {
-          appearance: appearance,
-          node: node
-        }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
-      })]
-    })
-  });
-});

package/lib/module/Drawer/useDrawer.js

@@ -1,11 +0,0 @@
-"use strict";
-
-import { useContext } from 'react';
-import { DrawerContext } from "./DrawerContext.js";
-export const useDrawer = () => {
-  const drawer = useContext(DrawerContext);
-  if (!drawer) {
-    throw new Error('useDrawer must be used within a DrawerProvider');
-  }
-  return drawer;
-};

package/lib/module/Navigation.js

@@ -1,79 +0,0 @@
-"use strict";
-
-import { ScreenStackItem } from "./ScreenStackItem/index.js";
-import { RouterContext } from "./RouterContext.js";
-import { ScreenStack } from "./ScreenStack/index.js";
-import { StyleSheet } from 'react-native';
-import { memo, useEffect, useRef, useState, startTransition } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const EMPTY_HISTORY = [];
-function useStackHistory(router, stackId) {
-  const [history, setHistory] = useState(EMPTY_HISTORY);
-  useEffect(() => {
-    if (!stackId) {
-      startTransition(() => {
-        setHistory(EMPTY_HISTORY);
-      });
-      return;
-    }
-    const update = () => {
-      startTransition(() => {
-        setHistory(router.getStackHistory(stackId));
-      });
-    };
-    const unsub = router.subscribeStack(stackId, update);
-    update();
-    return unsub;
-  }, [router, stackId]);
-  return history;
-}
-
-/**
- * Navigation component renders the root and global stacks.
- *
- * Modal stacks (NavigationStack added via addModal) are rendered as regular ScreenStackItems
- * with their component being the StackRenderer that subscribes to its own stack history.
- * This creates a clean recursive structure: stacks render their items, nested stacks
- * (via childNode) render their own items through StackRenderer.
- */
-export const Navigation = /*#__PURE__*/memo(({
-  router,
-  appearance
-}) => {
-  const [root, setRoot] = useState(() => ({
-    rootId: router.getRootStackId()
-  }));
-  useEffect(() => {
-    return router.subscribeRoot(() => {
-      startTransition(() => {
-        setRoot({
-          rootId: router.getRootStackId()
-        });
-      });
-    });
-  }, [router]);
-  const {
-    rootId
-  } = root;
-  const rootTransitionRef = useRef(undefined);
-  rootTransitionRef.current = router.getRootTransition();
-  const rootTransition = rootTransitionRef.current;
-  const rootItems = useStackHistory(router, rootId);
-  return /*#__PURE__*/_jsx(RouterContext.Provider, {
-    value: router,
-    children: /*#__PURE__*/_jsx(ScreenStack, {
-      style: styles.flex,
-      children: rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
-        stackId: rootId,
-        item: item,
-        stackAnimation: rootTransition,
-        appearance: appearance
-      }, `root-${item.key}`))
-    }, rootId ?? 'root')
-  });
-});
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});