@sigmela/router 0.0.11 → 0.0.12

package/src/RouterContext.tsx

@@ -1,58 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

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

package/src/TabBar/useTabBar.ts

@@ -1,10 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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