@idealyst/navigation 1.0.62 → 1.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -38,8 +38,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.62",
-    "@idealyst/theme": "^1.0.62",
+    "@idealyst/components": "^1.0.64",
+    "@idealyst/theme": "^1.0.64",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",

package/src/examples/ExampleStackRouter.tsx

@@ -5,7 +5,6 @@ import { DatePickerExamples } from "../../../datepicker/src/examples";
 import { Button, Divider, Screen, Text, View } from "../../../components/src";
 import { useNavigator } from "../context";
 import { UnistylesRuntime } from 'react-native-unistyles';
-import { GeneralLayout } from '../layouts/GeneralLayout';
 import { NavigatorParam, RouteParam } from '../routing';
 import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
 
@@ -238,32 +237,6 @@ const HomeScreen = () => {
     )
 };
 
-const WrappedGeneralLayout = (props: any) => {
-
-    const navigator = useNavigator();
-
-    return (
-        <GeneralLayout
-            header={{
-                content: <Text style={{ marginHorizontal: 'auto' }} color="inverse">Stack Router Demo App</Text>,
-            }}
-            sidebar={{
-                enabled: true,
-                collapsible: true,
-                position: 'left',
-                initiallyExpanded: false,
-                content: <Button onPress={() => {
-                    navigator.navigate({
-                        path: "/",
-                        vars: {},
-                    });
-                }}>Home</Button>,
-            }}
-            {...props}>
-        </GeneralLayout>
-    )
-}
-
 const StackRouter: NavigatorParam = {
     path: "/",
     type: 'navigator',

package/src/layouts/index.ts

@@ -1,5 +1,3 @@
-export * from './GeneralLayout';
-export * from './TabBarLayout';
 export { DefaultTabLayout } from './DefaultTabLayout'
 export { DefaultStackLayout } from './DefaultStackLayout'
 export type { TabLayoutProps, StackLayoutProps, TabLayoutComponent, StackLayoutComponent } from '../routing/types' 

package/src/routing/types.ts

@@ -58,6 +58,11 @@ export type NavigatorOptions = {
      * Custom header right component
      */
     headerRight?: React.ComponentType | React.ReactElement;
+    
+    /**
+     * Whether to hide the native React Navigation header (mobile only)
+     */
+    hideNativeHeader?: boolean;
 }
 
 export type BaseNavigatorParam = {

package/src/layouts/DefaultTabLayout.web.tsx

@@ -1,105 +0,0 @@
-import React from 'react'
-import { View, Text, Button, Icon } from '@idealyst/components'
-import { TabLayoutProps } from '../routing/types'
-
-export interface DefaultTabLayoutProps extends TabLayoutProps {
-    currentRoute: React.ComponentType
-    onNavigate: (path: string) => void
-    currentPath: string
-}
-
-/**
- * Default Tab Layout Component for Web
- * Provides a simple tab navigation interface using @idealyst/components
- */
-export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
-    options,
-    routes,
-    currentRoute: CurrentRoute,
-    onNavigate,
-    currentPath
-}) => {
-    return (
-        <View style={{ height: '100vh', flexDirection: 'column' }}>
-            {/* Header */}
-            {options?.headerTitle && (
-                <View style={{ 
-                    padding: 16, 
-                    borderBottomWidth: 1, 
-                    borderBottomColor: '#e0e0e0',
-                    backgroundColor: '#f8f9fa'
-                }}>
-                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
-                            {options.headerLeft && React.createElement(options.headerLeft as any)}
-                            
-                            {typeof options.headerTitle === 'string' ? (
-                                <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
-                                    {options.headerTitle}
-                                </Text>
-                            ) : (
-                                React.createElement(options.headerTitle as any)
-                            )}
-                        </View>
-                        
-                        {options.headerRight && React.createElement(options.headerRight as any)}
-                    </View>
-                </View>
-            )}
-            
-            {/* Tab Navigation */}
-            <View style={{ 
-                padding: 12, 
-                borderBottomWidth: 1, 
-                borderBottomColor: '#e0e0e0',
-                backgroundColor: '#ffffff'
-            }}>
-                <View style={{ flexDirection: 'row', gap: 8 }}>
-                    {routes.map((route) => {
-                        if (route.type !== 'screen') return null
-                        
-                        const isActive = currentPath === (route.path === '/' ? '/' : `/${route.path.replace(/^\//, '')}`)
-                        const screenRoute = route as any
-                        const label = screenRoute.options?.tabBarLabel || screenRoute.options?.title || (route.path === '/' ? 'Home' : route.path)
-                        const icon = screenRoute.options?.tabBarIcon
-                        
-                        return (
-                            <Button
-                                key={route.path}
-                                variant={isActive ? 'contained' : 'outlined'}
-                                intent={isActive ? 'primary' : undefined}
-                                size="small"
-                                onPress={() => onNavigate(route.path)}
-                                style={{ 
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    gap: 6
-                                }}
-                            >
-                                {icon && typeof icon === 'string' && (
-                                    <Icon 
-                                        name={icon as any} 
-                                        size="sm" 
-                                        color={isActive ? 'white' : 'primary'} 
-                                    />
-                                )}
-                                <Text 
-                                    size="small" 
-                                    color={isActive ? 'white' : 'primary'}
-                                    weight={isActive ? 'semibold' : 'medium'}
-                                >
-                                    {label}
-                                </Text>
-                            </Button>
-                        )
-                    })}
-                </View>
-            </View>
-            
-            {/* Content Area */}
-            <View style={{ flex: 1, padding: 20 }}>
-                <CurrentRoute />
-            </View>
-        </View>
-    )
-}

package/src/layouts/GeneralLayout/GeneralLayout.styles.tsx

@@ -1,55 +0,0 @@
-// Simple style objects for the GeneralLayout
-export const generalLayoutStyles = {
-  container: {
-    display: 'flex',
-    width: '100%',
-    height: '100vh',
-    overflow: 'hidden',
-  } as const,
-  
-  headerContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    zIndex: 100,
-  } as const,
-  
-  bodyContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    overflow: 'hidden',
-  } as const,
-  
-  sidebar: {
-    display: 'flex',
-    flexDirection: 'column',
-    transition: 'width 0.3s ease-in-out',
-    overflow: 'hidden',
-    zIndex: 50,
-  } as const,
-  
-  sidebarContent: {
-    flex: 1,
-    overflow: 'auto',
-  } as const,
-  
-  sidebarToggle: {
-    alignSelf: 'flex-end',
-    margin: '8px',
-    marginBottom: '16px',
-  } as const,
-  
-  mainContent: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    order: 2,
-  } as const,
-  
-  contentArea: {
-    flex: 1,
-    overflow: 'auto',
-  } as const,
-};

package/src/layouts/GeneralLayout/GeneralLayout.tsx

@@ -1,143 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { View, Button, Text } from '@idealyst/components';
-import { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';
-import { generalLayoutStyles } from './GeneralLayout.styles';
-
-const GeneralLayout: React.FC<GeneralLayoutProps> = ({
-  children,
-  sidebar = {},
-  header = {},
-  style,
-  testID,
-}) => {
-  // Default sidebar configuration
-  const sidebarConfig: Required<SidebarConfig> = {
-    enabled: true,
-    initiallyExpanded: true,
-    expandedWidth: 280,
-    collapsedWidth: 60,
-    collapsible: true,
-    position: 'left',
-    content: null,
-    style: undefined,
-    ...sidebar,
-  };
-
-  // Default header configuration
-  const headerConfig: Required<HeaderConfig> = {
-    enabled: true,
-    height: 64,
-    content: null,
-    style: undefined,
-    ...header,
-  };
-
-  // State for sidebar expansion
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState(
-    sidebarConfig.initiallyExpanded
-  );
-
-  // Toggle sidebar expansion
-  const toggleSidebar = useCallback(() => {
-    if (sidebarConfig.collapsible) {
-      setIsSidebarExpanded((prev) => !prev);
-    }
-  }, [sidebarConfig.collapsible]);
-
-  // Calculate sidebar width based on expanded state
-  const sidebarWidth = isSidebarExpanded 
-    ? sidebarConfig.expandedWidth 
-    : sidebarConfig.collapsedWidth;
-
-  // Create dynamic styles for sidebar width
-  const sidebarDynamicStyles = {
-    width: sidebarWidth,
-    minWidth: sidebarWidth,
-    maxWidth: sidebarWidth,
-    order: sidebarConfig.position === 'right' ? 3 : 1,
-  };
-
-  // Create dynamic styles for header height
-  const headerDynamicStyles = {
-    height: headerConfig.height,
-    minHeight: headerConfig.height,
-  };
-
-  return (
-    <View 
-      background="transparent"
-      style={[
-        generalLayoutStyles.container,
-        style,
-      ]}
-      testID={testID}
-    >
-      {/* Header */}
-      {headerConfig.enabled && (
-        <View 
-          border="thin"
-          spacing="md"
-          style={[
-            generalLayoutStyles.headerContainer,
-            headerDynamicStyles,
-            headerConfig.style,
-          ]}
-        >
-          {headerConfig.content}
-        </View>
-      )}
-
-      {/* Body Container */}
-      <View style={generalLayoutStyles.bodyContainer}>
-        {/* Sidebar */}
-        {sidebarConfig.enabled && (
-          <View 
-            background="surface"
-            border="thin"
-            spacing="md"
-            style={[
-              generalLayoutStyles.sidebar,
-              sidebarDynamicStyles,
-              sidebarConfig.style,
-            ]}
-          >
-            {/* Sidebar Toggle Button - Positioned within sidebar using flexbox */}
-            {sidebarConfig.collapsible && (
-              <Button
-                onPress={toggleSidebar}
-                variant="outlined"
-                size="small"
-                style={[
-                  generalLayoutStyles.sidebarToggle,
-                  // Align toggle button based on sidebar position
-                  { alignSelf: sidebarConfig.position === 'right' ? 'flex-start' : 'flex-end' }
-                ]}
-              >
-                  {sidebarConfig.position === 'right' 
-                    ? (isSidebarExpanded ? '→' : '←')
-                    : (isSidebarExpanded ? '←' : '→')
-                  }
-              </Button>
-            )}
-
-            {/* Sidebar Content */}
-            <View style={generalLayoutStyles.sidebarContent}>
-              {sidebarConfig.content}
-            </View>
-          </View>
-        )}
-
-        {/* Main Content Area */}
-        <View style={generalLayoutStyles.mainContent}>
-          <View 
-            style={generalLayoutStyles.contentArea}
-          >
-            {children}
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default GeneralLayout;