@sigmela/router 0.0.11

package/src/RouterContext.tsx

@@ -0,0 +1,58 @@
+import type { StackPresentationTypes } from 'react-native-screens';
+import React, { createContext, useContext } from 'react';
+import type { Router } from './Router';
+
+export const RouterContext = createContext<Router | null>(null);
+
+type RouteLocalContextValue = {
+  presentation: StackPresentationTypes;
+  params?: Record<string, unknown>;
+  query?: Record<string, unknown>;
+  pattern?: string;
+  path?: string;
+};
+export const RouteLocalContext = createContext<RouteLocalContextValue | null>(
+  null
+);
+
+export const useRouter = (): Router => {
+  const ctx = useContext(RouterContext);
+  if (ctx == null) {
+    throw new Error('useRouter must be used within RouterContext.Provider');
+  }
+  return ctx;
+};
+
+export const useCurrentRoute = () => {
+  const router = useRouter();
+  const subscribe = React.useCallback(
+    (cb: () => void) => router.subscribe(cb),
+    [router]
+  );
+  const get = React.useCallback(() => router.getVisibleRoute(), [router]);
+  return React.useSyncExternalStore(subscribe, get, get);
+};
+
+export function useParams<
+  TParams extends Record<string, unknown> = Record<string, unknown>,
+>(): TParams {
+  const local = React.useContext(RouteLocalContext);
+  return (local?.params ?? {}) as TParams;
+}
+
+export function useQueryParams<
+  TQuery extends Record<string, unknown> = Record<string, unknown>,
+>(): TQuery {
+  const local = React.useContext(RouteLocalContext);
+  return (local?.query ?? {}) as TQuery;
+}
+
+export function useRoute(): RouteLocalContextValue {
+  const local = React.useContext(RouteLocalContext);
+
+  if (!local) {
+    throw new Error('useRoute must be used within RouterLocalContext.Provider');
+  }
+
+  return local;
+}

package/src/ScreenStackItem.tsx

@@ -0,0 +1,64 @@
+import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
+import { RouteLocalContext, useRouter } from './RouterContext';
+import type { HistoryItem, ScreenOptions, NavigationAppearance } from './types';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { memo } from 'react';
+
+interface ScreenStackItemProps {
+  item: HistoryItem;
+  stackId?: string;
+  stackAnimation?: ScreenOptions['stackAnimation'];
+  screenStyle?: StyleProp<ViewStyle>;
+  headerAppearance?: NavigationAppearance['header'];
+}
+
+export const ScreenStackItem = memo<ScreenStackItemProps>(
+  ({ item, stackId, stackAnimation, screenStyle }) => {
+    const router = useRouter();
+
+    const onDismissed = () => {
+      if (stackId) {
+        const history = router.getStackHistory(stackId);
+        const topKey = history.length ? history[history.length - 1]?.key : null;
+        if (topKey && topKey === item.key) {
+          router.goBack();
+        }
+      }
+    };
+
+    const value = {
+      presentation: item.options?.stackPresentation ?? 'push',
+      params: item.params,
+      query: item.query,
+      pattern: item.pattern,
+      path: item.path,
+    };
+
+    const { header, ...screenProps } = item.options || {};
+    // Merge global header appearance with per-screen header options
+    // const mergedHeader = {
+    //   ...(headerAppearance ?? {}),
+    //   ...(header ?? {}),
+    // } as any;
+    // Hide header by default if not specified
+    const headerConfig = header ?? { hidden: true };
+
+    // console.log('headerConfig', headerAppearance, item.key);
+    return (
+      <RNSScreenStackItem
+        key={item.key}
+        screenId={item.key}
+        onDismissed={onDismissed}
+        style={StyleSheet.absoluteFill}
+        contentStyle={screenStyle}
+        headerConfig={headerConfig}
+        {...screenProps}
+        stackAnimation={stackAnimation ?? item.options?.stackAnimation}
+      >
+        <RouteLocalContext.Provider value={value}>
+          <item.component {...(item.passProps || {})} />
+        </RouteLocalContext.Provider>
+      </RNSScreenStackItem>
+    );
+  }
+);

package/src/StackRenderer.tsx

@@ -0,0 +1,41 @@
+import { memo, useCallback, useSyncExternalStore } from 'react';
+import { ScreenStackItem } from './ScreenStackItem';
+import { NavigationStack } from './NavigationStack';
+import { ScreenStack } from 'react-native-screens';
+import { useRouter } from './RouterContext';
+import type { HistoryItem } from './types';
+import { StyleSheet } from 'react-native';
+
+export interface StackRendererProps {
+  stack: NavigationStack;
+}
+
+export const StackRenderer = memo<StackRendererProps>(({ stack }) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(
+    (cb: () => void) => router.subscribeStack(stackId, cb),
+    [router, stackId]
+  );
+  const get = useCallback(
+    () => router.getStackHistory(stackId),
+    [router, stackId]
+  );
+  const historyForThisStack: HistoryItem[] = useSyncExternalStore(
+    subscribe,
+    get,
+    get
+  );
+
+  return (
+    <ScreenStack style={styles.flex}>
+      {historyForThisStack.map((item) => (
+        <ScreenStackItem key={item.key} item={item} stackId={stackId} />
+      ))}
+    </ScreenStack>
+  );
+});
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

package/src/TabBar/RenderTabBar.tsx

@@ -0,0 +1,154 @@
+import { useCallback, useSyncExternalStore, memo, useEffect } from 'react';
+import { type NativeSyntheticEvent, Platform } from 'react-native';
+import type { NavigationAppearance } from '../types';
+import { StackRenderer } from '../StackRenderer';
+import { TabBarContext } from './TabBarContext';
+import { useRouter } from '../RouterContext';
+import type { TabBar } from './TabBar';
+import {
+  type NativeFocusChangeEvent,
+  BottomTabsScreen,
+  BottomTabs,
+} from 'react-native-screens';
+
+export interface RenderTabBarProps {
+  tabBar: TabBar;
+  appearance?: NavigationAppearance['tabBar'];
+}
+
+// Helpers outside render to avoid re-creation
+const isImageSource = (value: any) => {
+  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: any) => {
+  if (!value) return undefined;
+  if (
+    typeof value === 'object' &&
+    (('sfSymbolName' in value ||
+      'imageSource' in value ||
+      'templateSource' in value) as any)
+  ) {
+    return value;
+  }
+  return { templateSource: value } as any;
+};
+
+export const RenderTabBar = memo<RenderTabBarProps>(
+  ({ tabBar, appearance }) => {
+    const router = useRouter();
+    const subscribe = useCallback(
+      (cb: () => void) => 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: NativeSyntheticEvent<NativeFocusChangeEvent>) => {
+        const tabKey = event.nativeEvent.tabKey;
+        const tabIndex = tabs.findIndex((route) => route.tabKey === tabKey);
+        router.onTabIndexChange(tabIndex);
+      },
+      [tabs, router]
+    );
+
+    return (
+      <TabBarContext.Provider value={tabBar}>
+        <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={}
+        >
+          {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 as any;
+
+            let mappedTabProps: any = 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 (
+              <BottomTabsScreen
+                scrollEdgeAppearance={scrollEdgeAppearance}
+                standardAppearance={standardAppearance}
+                isFocused={isFocused}
+                key={tab.tabKey}
+                {...mappedTabProps}
+              >
+                {stack ? (
+                  <StackRenderer stack={stack} />
+                ) : Screen ? (
+                  <Screen />
+                ) : null}
+              </BottomTabsScreen>
+            );
+          })}
+        </BottomTabs>
+      </TabBarContext.Provider>
+    );
+  }
+);

package/src/TabBar/TabBar.ts

@@ -0,0 +1,106 @@
+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;
+
+// Internal representation used by TabBar to support unified icon source while keeping original android props
+type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
+  icon?: ExtendedIcon;
+  selectedIcon?: ExtendedIcon;
+};
+
+type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
+  stack?: NavigationStack;
+  screen?: React.ComponentType<any>;
+};
+export class TabBar {
+  public screens: Record<string, React.ComponentType<any>> = {};
+  public stacks: Record<string, NavigationStack> = {};
+  private listeners: Set<() => void> = new Set();
+
+  private state: {
+    tabs: InternalTabItem[];
+    config: TabBarConfig;
+    index: number;
+  };
+
+  constructor(config: TabBarConfig = {}) {
+    this.state = {
+      tabs: [],
+      index: 0,
+      config,
+    };
+  }
+
+  public addTab(tab: Omit<TabBarConfig, 'tabKey'> & { key: string }): TabBar {
+    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;
+  }
+
+  public setBadge(tabIndex: number, badge: string | null): void {
+    this.setState({
+      tabs: this.state.tabs.map((route, index) =>
+        index === tabIndex
+          ? { ...route, badgeValue: badge ?? undefined }
+          : route
+      ),
+    });
+  }
+
+  public setTabBarConfig(config: Partial<TabBarConfig>): void {
+    this.setState({
+      config: {
+        ...this.state.config,
+        ...config,
+      },
+    });
+  }
+
+  public onIndexChange(index: number) {
+    this.setState({ index });
+  }
+
+  public getState = () => {
+    return this.state;
+  };
+
+  private setState(state: Partial<typeof this.state>): void {
+    this.state = {
+      ...this.state,
+      ...state,
+    };
+    this.notifyListeners();
+  }
+
+  private notifyListeners(): void {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  public subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+}

package/src/TabBar/TabBarContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { TabBar } from './TabBar';
+
+export const TabBarContext = createContext<TabBar | null>(null);

package/src/TabBar/useTabBar.ts

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

package/src/createController.ts

@@ -0,0 +1,27 @@
+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 function createController<TParams, TQuery = Record<string, unknown>>(
+  controller: Controller<TParams, TQuery>
+) {
+  return controller;
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+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';