@sigmela/router 0.0.11

package/lib/module/TabBar/RenderTabBar.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { useCallback, useSyncExternalStore, memo, useEffect } from 'react';
+import { Platform } from 'react-native';
+import { StackRenderer } from "../StackRenderer.js";
+import { TabBarContext } from "./TabBarContext.js";
+import { useRouter } from "../RouterContext.js";
+import { BottomTabsScreen, BottomTabs } from 'react-native-screens';
+import { jsx as _jsx } 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') {
+    if ('uri' in value || 'width' in value || 'height' in value) return true;
+    if ('sfSymbolName' in value || 'imageSource' in value || 'templateSource' in value) return false;
+  }
+  return false;
+};
+const buildIOSIcon = value => {
+  if (!value) return undefined;
+  if (typeof value === 'object' && ('sfSymbolName' in value || 'imageSource' in value || 'templateSource' in value)) {
+    return value;
+  }
+  return {
+    templateSource: value
+  };
+};
+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
+  } = snapshot;
+  const {
+    standardAppearance,
+    scrollEdgeAppearance,
+    tabBarItemStyle,
+    tintColor,
+    backgroundColor
+  } = appearance ?? {};
+  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]);
+  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    value: tabBar,
+    children: /*#__PURE__*/_jsx(BottomTabs, {
+      onNativeFocusChange: onNativeFocusChange,
+      tabBarBackgroundColor: backgroundColor,
+      tabBarTintColor: tintColor,
+      tabBarItemTitleFontFamily: tabBarItemStyle?.titleFontFamily,
+      tabBarItemTitleFontSize: tabBarItemStyle?.titleFontSize,
+      tabBarItemTitleFontSizeActive: tabBarItemStyle?.titleFontSizeActive,
+      tabBarItemTitleFontWeight: tabBarItemStyle?.titleFontWeight,
+      tabBarItemTitleFontStyle: tabBarItemStyle?.titleFontStyle,
+      tabBarItemTitleFontColor: tabBarItemStyle?.titleFontColor,
+      tabBarItemTitleFontColorActive: tabBarItemStyle?.titleFontColorActive,
+      tabBarItemIconColor: tabBarItemStyle?.iconColor,
+      tabBarItemIconColorActive: tabBarItemStyle?.iconColorActive,
+      tabBarItemActiveIndicatorColor: tabBarItemStyle?.activeIndicatorColor,
+      tabBarItemActiveIndicatorEnabled: tabBarItemStyle?.activeIndicatorEnabled,
+      tabBarItemRippleColor: tabBarItemStyle?.rippleColor,
+      tabBarItemLabelVisibilityMode: tabBarItemStyle?.labelVisibilityMode
+      // tabBarMinimizeBehavior={}
+      ,
+      children: tabs.map(tab => {
+        const isFocused = tab.tabKey === tabs[index]?.tabKey;
+        const stack = tabBar.stacks[tab.tabKey];
+        const Screen = tabBar.screens[tab.tabKey];
+
+        // Map unified icon to platform-specific props expected by RNS BottomTabsScreen
+        const {
+          icon,
+          selectedIcon,
+          ...restTab
+        } = tab;
+        let mappedTabProps = restTab;
+        if (icon || selectedIcon) {
+          if (Platform.OS === 'android') {
+            mappedTabProps = {
+              ...restTab,
+              ...(isImageSource(icon) ? {
+                iconResource: icon
+              } : null)
+            };
+          } else {
+            mappedTabProps = {
+              ...restTab,
+              ...(icon ? {
+                icon: buildIOSIcon(icon)
+              } : null),
+              ...(selectedIcon ? {
+                selectedIcon: buildIOSIcon(selectedIcon)
+              } : null)
+            };
+          }
+        }
+        return /*#__PURE__*/_jsx(BottomTabsScreen, {
+          scrollEdgeAppearance: scrollEdgeAppearance,
+          standardAppearance: standardAppearance,
+          isFocused: isFocused,
+          ...mappedTabProps,
+          children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
+            stack: stack
+          }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
+        }, tab.tabKey);
+      })
+    })
+  });
+});

package/lib/module/TabBar/TabBar.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Internal representation used by TabBar to support unified icon source while keeping original android props
+
+export class TabBar {
+  screens = {};
+  stacks = {};
+  listeners = new Set();
+  constructor(config = {}) {
+    this.state = {
+      tabs: [],
+      index: 0,
+      config
+    };
+  }
+  addTab(tab) {
+    const {
+      key,
+      ...rest
+    } = tab;
+    const nextIndex = this.state.tabs.length;
+    const tabKey = key ?? `tab-${nextIndex}`;
+    this.state.tabs.push({
+      tabKey,
+      ...rest
+    });
+    if (tab.stack) {
+      this.stacks[tabKey] = tab.stack;
+    } else if (tab.screen) {
+      this.screens[tabKey] = tab.screen;
+    }
+    return this;
+  }
+  setBadge(tabIndex, badge) {
+    this.setState({
+      tabs: this.state.tabs.map((route, index) => index === tabIndex ? {
+        ...route,
+        badgeValue: badge ?? undefined
+      } : route)
+    });
+  }
+  setTabBarConfig(config) {
+    this.setState({
+      config: {
+        ...this.state.config,
+        ...config
+      }
+    });
+  }
+  onIndexChange(index) {
+    this.setState({
+      index
+    });
+  }
+  getState = () => {
+    return this.state;
+  };
+  setState(state) {
+    this.state = {
+      ...this.state,
+      ...state
+    };
+    this.notifyListeners();
+  }
+  notifyListeners() {
+    this.listeners.forEach(listener => listener());
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+}

package/lib/module/TabBar/TabBarContext.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import { createContext } from 'react';
+export const TabBarContext = /*#__PURE__*/createContext(null);

package/lib/module/TabBar/useTabBar.js

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

package/lib/module/createController.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export function createController(controller) {
+  return controller;
+}

package/lib/module/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export { useTabBar } from "./TabBar/useTabBar.js";
+export { TabBar } from "./TabBar/TabBar.js";
+/**
+ * Navigation System
+ */
+
+export { Router } from "./Router.js";
+export { Navigation } from "./Navigation.js";
+export { createController } from "./createController.js";
+export { NavigationStack } from "./NavigationStack.js";
+export { StackRenderer } from "./StackRenderer.js";
+export { useRouter, useCurrentRoute, useParams, useQueryParams, useRoute } from "./RouterContext.js";

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/Navigation.d.ts

@@ -0,0 +1,8 @@
+import { Router } from './Router';
+import type { NavigationAppearance } from './types';
+export interface NavigationProps {
+    router: Router;
+    appearance?: NavigationAppearance;
+}
+export declare const Navigation: import("react").NamedExoticComponent<NavigationProps>;
+//# sourceMappingURL=Navigation.d.ts.map

package/lib/typescript/src/NavigationStack.d.ts

@@ -0,0 +1,30 @@
+import type { ScreenOptions } from './types';
+import { type ComponentWithController, type MixedComponent } from './createController';
+type BuiltRoute = {
+    routeId: string;
+    path: string;
+    match: (path: string) => false | {
+        params: Record<string, any>;
+    };
+    component: React.ComponentType<any>;
+    controller?: ComponentWithController['controller'];
+    options?: ScreenOptions;
+};
+export declare class NavigationStack {
+    private readonly stackId;
+    private readonly routes;
+    private readonly defaultOptions;
+    constructor();
+    constructor(id: string);
+    constructor(defaultOptions: ScreenOptions);
+    constructor(id: string, defaultOptions: ScreenOptions);
+    getId(): string;
+    addScreen(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
+    addModal(path: string, mixedComponent: MixedComponent, options?: ScreenOptions): NavigationStack;
+    getRoutes(): BuiltRoute[];
+    getFirstRoute(): BuiltRoute | undefined;
+    getDefaultOptions(): ScreenOptions | undefined;
+    private extractComponent;
+}
+export {};
+//# sourceMappingURL=NavigationStack.d.ts.map

package/lib/typescript/src/Router.d.ts

@@ -0,0 +1,70 @@
+import { NavigationStack } from './NavigationStack';
+import { TabBar } from './TabBar/TabBar';
+import type { HistoryItem, ScreenOptions, VisibleRoute } from './types';
+type Listener = () => void;
+export interface RouterConfig {
+    root: TabBar | NavigationStack;
+    global?: NavigationStack;
+    screenOptions?: ScreenOptions;
+}
+export type RootTransition = ScreenOptions['stackAnimation'];
+type RouterState = {
+    history: HistoryItem[];
+    activeTabIndex?: number;
+};
+export declare class Router {
+    tabBar: TabBar | null;
+    root: NavigationStack | TabBar | null;
+    global: NavigationStack | null;
+    private readonly listeners;
+    private readonly registry;
+    private state;
+    private readonly routerScreenOptions;
+    private stackSlices;
+    private stackListeners;
+    private activeTabListeners;
+    private stackById;
+    private routeById;
+    private visibleRoute;
+    private rootListeners;
+    private rootTransition?;
+    constructor(config: RouterConfig);
+    navigate: (path: string) => void;
+    replace: (path: string) => void;
+    goBack: () => void;
+    onTabIndexChange: (index: number) => void;
+    setActiveTabIndex: (index: number) => void;
+    ensureTabSeed: (index: number) => void;
+    getState: () => RouterState;
+    subscribe(listener: Listener): () => void;
+    getStackHistory: (stackId: string) => HistoryItem[];
+    subscribeStack: (stackId: string, cb: Listener) => (() => void);
+    getActiveTabIndex: () => number;
+    subscribeActiveTab: (cb: Listener) => (() => void);
+    getRootStackId(): string | undefined;
+    getGlobalStackId(): string | undefined;
+    hasTabBar(): boolean;
+    subscribeRoot(listener: Listener): () => void;
+    private emitRootChange;
+    getRootTransition(): RootTransition | undefined;
+    setRoot(nextRoot: TabBar | NavigationStack, options?: {
+        transition?: RootTransition;
+    }): void;
+    getVisibleRoute: () => VisibleRoute;
+    private recomputeVisibleRoute;
+    private performNavigation;
+    private createHistoryItem;
+    private buildRegistry;
+    private seedInitialHistory;
+    private matchRoute;
+    private generateKey;
+    private parsePath;
+    private applyHistoryChange;
+    private setState;
+    private emit;
+    private getTopForTarget;
+    private mergeOptions;
+    private findStackById;
+}
+export {};
+//# sourceMappingURL=Router.d.ts.map

package/lib/typescript/src/RouterContext.d.ts

@@ -0,0 +1,19 @@
+import type { StackPresentationTypes } from 'react-native-screens';
+import React from 'react';
+import type { Router } from './Router';
+export declare const RouterContext: React.Context<Router | null>;
+type RouteLocalContextValue = {
+    presentation: StackPresentationTypes;
+    params?: Record<string, unknown>;
+    query?: Record<string, unknown>;
+    pattern?: string;
+    path?: string;
+};
+export declare const RouteLocalContext: React.Context<RouteLocalContextValue | null>;
+export declare const useRouter: () => Router;
+export declare const useCurrentRoute: () => import("./types").VisibleRoute;
+export declare function useParams<TParams extends Record<string, unknown> = Record<string, unknown>>(): TParams;
+export declare function useQueryParams<TQuery extends Record<string, unknown> = Record<string, unknown>>(): TQuery;
+export declare function useRoute(): RouteLocalContextValue;
+export {};
+//# sourceMappingURL=RouterContext.d.ts.map

package/lib/typescript/src/ScreenStackItem.d.ts

@@ -0,0 +1,12 @@
+import type { HistoryItem, ScreenOptions, NavigationAppearance } from './types';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface ScreenStackItemProps {
+    item: HistoryItem;
+    stackId?: string;
+    stackAnimation?: ScreenOptions['stackAnimation'];
+    screenStyle?: StyleProp<ViewStyle>;
+    headerAppearance?: NavigationAppearance['header'];
+}
+export declare const ScreenStackItem: import("react").NamedExoticComponent<ScreenStackItemProps>;
+export {};
+//# sourceMappingURL=ScreenStackItem.d.ts.map

package/lib/typescript/src/StackRenderer.d.ts

@@ -0,0 +1,6 @@
+import { NavigationStack } from './NavigationStack';
+export interface StackRendererProps {
+    stack: NavigationStack;
+}
+export declare const StackRenderer: import("react").NamedExoticComponent<StackRendererProps>;
+//# sourceMappingURL=StackRenderer.d.ts.map

package/lib/typescript/src/TabBar/RenderTabBar.d.ts

@@ -0,0 +1,8 @@
+import type { NavigationAppearance } from '../types';
+import type { TabBar } from './TabBar';
+export interface RenderTabBarProps {
+    tabBar: TabBar;
+    appearance?: NavigationAppearance['tabBar'];
+}
+export declare const RenderTabBar: import("react").NamedExoticComponent<RenderTabBarProps>;
+//# sourceMappingURL=RenderTabBar.d.ts.map

package/lib/typescript/src/TabBar/TabBar.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { NavigationStack } from '../NavigationStack';
+import type { TabItem } from '../types';
+import type { ImageSourcePropType } from 'react-native';
+type IOSIconShape = {
+    sfSymbolName: string;
+} | {
+    imageSource: ImageSourcePropType;
+} | {
+    templateSource: ImageSourcePropType;
+};
+type ExtendedIcon = ImageSourcePropType | IOSIconShape;
+type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
+    icon?: ExtendedIcon;
+    selectedIcon?: ExtendedIcon;
+};
+type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
+    stack?: NavigationStack;
+    screen?: React.ComponentType<any>;
+};
+export declare class TabBar {
+    screens: Record<string, React.ComponentType<any>>;
+    stacks: Record<string, NavigationStack>;
+    private listeners;
+    private state;
+    constructor(config?: TabBarConfig);
+    addTab(tab: Omit<TabBarConfig, 'tabKey'> & {
+        key: string;
+    }): TabBar;
+    setBadge(tabIndex: number, badge: string | null): void;
+    setTabBarConfig(config: Partial<TabBarConfig>): void;
+    onIndexChange(index: number): void;
+    getState: () => {
+        tabs: InternalTabItem[];
+        config: TabBarConfig;
+        index: number;
+    };
+    private setState;
+    private notifyListeners;
+    subscribe(listener: () => void): () => void;
+}
+export {};
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/typescript/src/TabBar/TabBarContext.d.ts

@@ -0,0 +1,3 @@
+import { TabBar } from './TabBar';
+export declare const TabBarContext: import("react").Context<TabBar | null>;
+//# sourceMappingURL=TabBarContext.d.ts.map

package/lib/typescript/src/TabBar/useTabBar.d.ts

@@ -0,0 +1,2 @@
+export declare const useTabBar: () => import("./TabBar").TabBar;
+//# sourceMappingURL=useTabBar.d.ts.map

package/lib/typescript/src/createController.d.ts

@@ -0,0 +1,14 @@
+type ControllerPresenter<P = any> = (passProps?: P) => void;
+type ControllerInput<TParams, TQuery> = {
+    params: TParams;
+    query: TQuery;
+};
+export type Controller<TParams = Record<string, unknown>, TQuery = Record<string, unknown>> = (input: ControllerInput<TParams, TQuery>, present: ControllerPresenter) => void;
+export type ComponentWithController = {
+    controller?: Controller<any, any>;
+    component: React.ComponentType<any>;
+};
+export type MixedComponent = ComponentWithController | React.ComponentType<any>;
+export declare function createController<TParams, TQuery = Record<string, unknown>>(controller: Controller<TParams, TQuery>): Controller<TParams, TQuery>;
+export {};
+//# sourceMappingURL=createController.d.ts.map

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,15 @@
+export { useTabBar } from './TabBar/useTabBar';
+export { TabBar } from './TabBar/TabBar';
+export type { NavigationProps } from './Navigation';
+export type { NavigationAppearance } from './types';
+/**
+ * Navigation System
+ */
+export { Router } from './Router';
+export { Navigation } from './Navigation';
+export { createController } from './createController';
+export { NavigationStack } from './NavigationStack';
+export type { HistoryItem } from './types';
+export { StackRenderer } from './StackRenderer';
+export { useRouter, useCurrentRoute, useParams, useQueryParams, useRoute, } from './RouterContext';
+//# sourceMappingURL=index.d.ts.map