@sigmela/router 0.0.14 → 0.0.15

package/lib/module/StackRenderer.js

@@ -1,8 +1,8 @@
 "use strict";
 
 import { memo, useCallback, useSyncExternalStore } from 'react';
-import { ScreenStackItem } from "./ScreenStackItem.js";
-import { ScreenStack } from 'react-native-screens';
+import { ScreenStackItem } from "./ScreenStackItem/index.js";
+import { ScreenStack } from "./ScreenStack/index.js";
 import { useRouter } from "./RouterContext.js";
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,13 +16,13 @@ export const StackRenderer = /*#__PURE__*/memo(({
   const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
   const historyForThisStack = useSyncExternalStore(subscribe, get, get);
   return /*#__PURE__*/_jsx(ScreenStack, {
-    style: [styles.flex, appearance?.screenStyle],
+    style: [styles.flex, appearance?.screen],
     children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
       appearance: appearance,
       stackId: stackId,
       item: item
-    }, item.key))
-  });
+    }, `stack-renderer-${item.key}`))
+  }, `stack-${stackId}`);
 });
 const styles = StyleSheet.create({
   flex: {

package/lib/module/TabBar/RenderTabBar.native.js

@@ -0,0 +1,224 @@
+"use strict";
+
+import { StackRenderer } from "../StackRenderer.js";
+import { TabBarContext } from "./TabBarContext.js";
+import { useRouter } from "../RouterContext.js";
+import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
+import { Platform, StyleSheet, View } from 'react-native';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Helpers outside render to avoid re-creation
+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;
+    if ('sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v) return false;
+  }
+  return false;
+};
+const isRNSIcon = value => {
+  if (value == null || typeof value !== 'object') return false;
+  const v = value;
+  return 'sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v;
+};
+const buildIOSIcon = value => {
+  if (!value) return undefined;
+  if (isRNSIcon(value)) return value;
+  return {
+    templateSource: value
+  };
+};
+
+// Map unified tab icon props to RNS BottomTabsScreen platform-specific props
+const getTabIcon = tab => {
+  const {
+    icon,
+    selectedIcon
+  } = tab;
+  if (icon || selectedIcon) {
+    if (Platform.OS === 'android' && isImageSource(icon)) {
+      return {
+        iconResource: icon
+      };
+    }
+    return {
+      selectedIcon: buildIOSIcon(selectedIcon),
+      icon: buildIOSIcon(icon)
+    };
+  }
+  return undefined;
+};
+export const RenderTabBar = /*#__PURE__*/memo(({
+  tabBar,
+  appearance = {}
+}) => {
+  const router = useRouter();
+  const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
+  const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
+  const {
+    tabs,
+    index,
+    config
+  } = snapshot;
+  const {
+    iconColor,
+    iconColorActive,
+    androidActiveIndicatorEnabled,
+    androidActiveIndicatorColor,
+    androidRippleColor,
+    labelVisibilityMode,
+    title,
+    backgroundColor,
+    badgeBackgroundColor,
+    iOSShadowColor
+  } = appearance?.tabBar ?? {};
+  useEffect(() => {
+    router.ensureTabSeed(index);
+  }, [index, router]);
+  const onNativeFocusChange = useCallback(event => {
+    const tabKey = event.nativeEvent.tabKey;
+    const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
+    router.onTabIndexChange(tabIndex);
+  }, [tabs, router]);
+  const onTabPress = useCallback(nextIndex => {
+    router.onTabIndexChange(nextIndex);
+  }, [router]);
+  const containerProps = {
+    tabBarBackgroundColor: backgroundColor,
+    tabBarItemTitleFontFamily: title?.fontFamily,
+    tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontWeight: title?.fontWeight,
+    tabBarItemTitleFontStyle: title?.fontStyle,
+    tabBarItemTitleFontColor: title?.color,
+    tabBarItemTitleFontColorActive: title?.activeColor,
+    tabBarItemIconColor: iconColor,
+    tabBarItemIconColorActive: iconColorActive,
+    tabBarItemActiveIndicatorColor: androidActiveIndicatorColor,
+    tabBarItemActiveIndicatorEnabled: androidActiveIndicatorEnabled,
+    tabBarItemRippleColor: androidRippleColor,
+    tabBarItemLabelVisibilityMode: labelVisibilityMode
+  };
+  const iosState = {
+    tabBarItemTitleFontFamily: title?.fontFamily,
+    tabBarItemTitleFontSize: title?.fontSize,
+    tabBarItemTitleFontWeight: title?.fontWeight,
+    tabBarItemTitleFontStyle: title?.fontStyle,
+    tabBarItemTitleFontColor: title?.color,
+    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
+    tabBarItemTitleFontColorActive: title?.color,
+    tabBarItemIconColorActive: iconColorActive,
+    tabBarItemIconColor: iconColor
+  };
+  const iosAppearance = Platform.select({
+    default: undefined,
+    ios: {
+      tabBarBackgroundColor: backgroundColor,
+      tabBarShadowColor: iOSShadowColor,
+      compactInline: {
+        normal: iosState
+      },
+      stacked: {
+        normal: iosState
+      },
+      inline: {
+        normal: iosState
+      }
+    }
+  });
+
+  // If a custom component is provided, render it instead of default native BottomTabs
+  const CustomTabBar = config.component;
+
+  // Track visited tabs to lazily mount on first visit and keep mounted afterwards
+  const [visited, setVisited] = useState({});
+  useEffect(() => {
+    const key = tabs[index]?.tabKey;
+    if (key) {
+      setVisited(prev => prev[key] ? prev : {
+        ...prev,
+        [key]: true
+      });
+    }
+  }, [tabs, index]);
+  if (CustomTabBar) {
+    return /*#__PURE__*/_jsx(ScreenStackItem, {
+      screenId: "root-tabbar",
+      headerConfig: {
+        hidden: true
+      },
+      style: StyleSheet.absoluteFill,
+      stackAnimation: "slide_from_right",
+      children: /*#__PURE__*/_jsxs(TabBarContext.Provider, {
+        value: tabBar,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.flex,
+          children: tabs.filter(t => visited[t.tabKey]).map(tab => {
+            const isActive = tab.tabKey === tabs[index]?.tabKey;
+            const stackForTab = tabBar.stacks[tab.tabKey];
+            const ScreenForTab = tabBar.screens[tab.tabKey];
+            return /*#__PURE__*/_jsx(View, {
+              style: [styles.flex, !isActive && styles.hidden],
+              children: stackForTab ? /*#__PURE__*/_jsx(StackRenderer, {
+                appearance: appearance,
+                stack: stackForTab
+              }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
+            }, `tab-content-${tab.tabKey}`);
+          })
+        }), /*#__PURE__*/_jsx(CustomTabBar, {
+          onTabPress: onTabPress,
+          activeIndex: index,
+          tabs: tabs
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(ScreenStackItem, {
+    screenId: "root-tabbar",
+    headerConfig: {
+      hidden: true
+    },
+    style: StyleSheet.absoluteFill,
+    stackAnimation: "slide_from_right",
+    children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
+      value: tabBar,
+      children: /*#__PURE__*/_jsx(BottomTabs, {
+        onNativeFocusChange: onNativeFocusChange,
+        ...containerProps,
+        children: tabs.map(tab => {
+          const isFocused = tab.tabKey === tabs[index]?.tabKey;
+          const stack = tabBar.stacks[tab.tabKey];
+          const Screen = tabBar.screens[tab.tabKey];
+          const icon = getTabIcon(tab);
+          return /*#__PURE__*/_jsx(BottomTabsScreen, {
+            scrollEdgeAppearance: iosAppearance,
+            standardAppearance: iosAppearance,
+            isFocused: isFocused,
+            tabKey: tab.tabKey,
+            title: tab.title,
+            badgeValue: tab.badgeValue,
+            specialEffects: tab.specialEffects,
+            selectedIcon: icon?.selectedIcon,
+            iconResource: icon?.iconResource,
+            icon: icon?.icon,
+            children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
+              appearance: appearance,
+              stack: stack
+            }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
+          }, tab.tabKey);
+        })
+      })
+    })
+  });
+});
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  hidden: {
+    display: 'none'
+  }
+});

package/lib/module/TabBar/RenderTabBar.web.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import { StackRenderer } from "../StackRenderer.js";
+import { TabBarContext } from "./TabBarContext.js";
+import { useRouter } from "../RouterContext.js";
+import { TabIcon } from './TabIcon';
+import { useCallback, useSyncExternalStore, memo, useEffect, 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;
+
+//
+
+export const RenderTabBar = /*#__PURE__*/memo(({
+  tabBar,
+  appearance
+}) => {
+  const router = useRouter();
+  const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
+  const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
+  const {
+    tabs,
+    index,
+    config
+  } = snapshot;
+  useEffect(() => {
+    router.ensureTabSeed(index);
+  }, [index, router]);
+  const focusedTab = tabs[index];
+  const stack = focusedTab ? tabBar.stacks[focusedTab.tabKey] : undefined;
+  const Screen = focusedTab ? tabBar.screens[focusedTab.tabKey] : undefined;
+  const onTabClick = useCallback(nextIndex => {
+    const targetTab = tabs[nextIndex];
+    if (!targetTab) return;
+    const targetStack = tabBar.stacks[targetTab.tabKey];
+    if (targetStack) {
+      // Prefer last visited route in the target stack; otherwise first route
+      const stackId = targetStack.getId();
+      const history = router.getStackHistory(stackId);
+      const last = history.length ? history[history.length - 1] : undefined;
+      const toPath = last?.path ?? targetStack.getFirstRoute()?.path;
+      if (toPath) {
+        const currentPath = router.getVisibleRoute()?.path;
+        if (nextIndex === index && toPath === currentPath) return;
+        // Use replace to avoid duplicating history entries when switching tabs
+        router.replace(toPath, true);
+        return;
+      }
+    }
+
+    // Fallback: just switch tab index (no history push if there is no path)
+    router.onTabIndexChange(nextIndex);
+  }, [router, tabBar, tabs, index]);
+  const tabBarStyle = useMemo(() => {
+    const tabBarBg = toColorString(appearance?.tabBar?.backgroundColor);
+    return tabBarBg ? {
+      backgroundColor: tabBarBg
+    } : undefined;
+  }, [appearance?.tabBar?.backgroundColor]);
+  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]);
+
+  // If a custom component is provided, render it instead of the default web tab bar
+  const CustomTabBar = config.component;
+  return /*#__PURE__*/_jsx("div", {
+    className: "screen-stack-item",
+    "data-presentation": "push",
+    "data-phase": "active",
+    children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
+      value: tabBar,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "tab-stacks-container",
+        children: [stack ? /*#__PURE__*/_jsx(StackRenderer, {
+          appearance: appearance,
+          stack: stack
+        }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
+          onTabPress: onTabClick,
+          activeIndex: index,
+          tabs: tabs
+        }) : /*#__PURE__*/_jsx("div", {
+          className: "tab-bar",
+          style: tabBarStyle,
+          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", {
+              "data-index": i,
+              className: `tab-item${isActive ? ' active' : ''}`,
+              onClick: () => onTabClick(i),
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "tab-item-icon",
+                children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(TabIcon, {
+                  source: tab.icon,
+                  tintColor: iconTint
+                }) : null
+              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
+                className: "tab-item-label-badge",
+                children: tab.badgeValue
+              }) : null, /*#__PURE__*/_jsx("div", {
+                className: "tab-item-label",
+                style: labelStyle,
+                children: tab.title
+              })]
+            }, tab.tabKey);
+          })
+        })]
+      })
+    })
+  });
+});

package/lib/module/TabBar/TabIcon.web.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { memo } from 'react';
+import { Image } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const resolveImageUri = source => {
+  if (!source) return undefined;
+  const resolved = typeof Image.resolveAssetSource === 'function' ? Image.resolveAssetSource(source) : undefined;
+  if (resolved?.uri) return resolved.uri;
+  if (Array.isArray(source)) {
+    const first = source[0];
+    if (first && typeof first === 'object' && 'uri' in first) return first.uri;
+  }
+  if (typeof source === 'object' && source && 'uri' in source) return source.uri;
+  return undefined;
+};
+export const TabIcon = /*#__PURE__*/memo(({
+  source,
+  tintColor
+}) => {
+  const iconUri = resolveImageUri(source);
+  const useMask = Boolean(tintColor && iconUri);
+  if (useMask && iconUri) {
+    const maskStyle = {
+      backgroundColor: tintColor,
+      WebkitMaskImage: `url(${iconUri})`,
+      maskImage: `url(${iconUri})`,
+      WebkitMaskSize: 'contain',
+      maskSize: 'contain',
+      WebkitMaskRepeat: 'no-repeat',
+      maskRepeat: 'no-repeat',
+      WebkitMaskPosition: 'center',
+      maskPosition: 'center'
+    };
+    return /*#__PURE__*/_jsx("div", {
+      style: maskStyle
+    });
+  }
+  return /*#__PURE__*/_jsx(Image, {
+    source: source
+  });
+});

package/lib/module/TabBar/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { RenderTabBar } from './RenderTabBar';

package/lib/module/styles.css

@@ -0,0 +1,139 @@
+
+
+:root {
+  --tabs-transition: .2s ease-in-out;
+  --transition-standard-easing: cubic-bezier(.4, .0, .2, 1);
+  --transition-standard-in-time: .3s;
+  --transition-standard-out-time: .25s;
+
+  --transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);
+  --transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);
+
+  --background-color-true: #181818;
+
+  --background-color: var(--background-color-true);
+}
+
+
+body {
+  margin: 0;
+  padding: 0;
+ }
+
+.screen-stack {
+  min-width: 100%;
+  width: 100%;
+  display: flex;
+  position: relative;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.screen-stack > .screen-stack-item {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  font-size: 24px;
+  display: none;
+  overflow: hidden;
+}
+
+.screen-stack > .screen-stack-item.active {
+  display: flex;
+}
+
+.screen-stack[data-animation="navigation"].animating > .screen-stack-item {
+  transition: transform var(--transition-standard-in), filter var(--transition-standard-in);
+}
+
+.screen-stack[data-animation="navigation"].animating.backwards > .screen-stack-item {
+  transition: transform var(--transition-standard-out), filter var(--transition-standard-out);
+}
+
+.screen-stack[data-animation="modal"].animating > .screen-stack-item {
+  transition: transform var(--transition-standard-in), filter var(--transition-standard-in);
+}
+
+.screen-stack[data-animation="modal"].animating.backwards > .screen-stack-item {
+  transition: transform var(--transition-standard-out), filter var(--transition-standard-out);
+}
+
+.tab-stacks-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 100vhd;
+}
+
+.tab-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  height: 49px;
+}
+
+.tab-item {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 4px 0 2px;
+  height: 100%;
+  color: inherit;
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.tab-item:focus {
+  outline: none;
+}
+
+.tab-item-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-item-icon > * {
+  width: 24px;
+  height: 24px;
+  display: block;
+  object-fit: contain;
+}
+
+.tab-item-label {
+  font-size: 11px;
+  line-height: 12px;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+  margin-top: 2px;
+}
+
+.tab-item-label-badge {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(10px);
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 9999px;
+  background-color: #dc3545;
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}