@idealyst/navigation 1.0.49 → 1.0.51

package/src/layouts/TabBarLayout/TabBarLayout.styles.ts

@@ -0,0 +1,142 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const tabBarLayoutStyles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: theme.colors.surface,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    paddingHorizontal: theme.spacing?.md,
+    zIndex: 10,
+    web: {
+      backgroundColor: '#ffffff', // Light background for web
+      borderBottomColor: '#e0e0e0', // Light border for web
+    },
+  },
+  
+  headerContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  
+  headerRightContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing?.sm,
+  },
+  
+  headerTabs: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing?.xs,
+  },
+  
+  bodyContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  
+  mainContent: {
+    flex: 1,
+  },
+  
+  contentArea: {
+    flex: 1,
+  },
+  
+  tabBarBottom: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.surface,
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.border,
+    paddingTop: 6,
+    paddingHorizontal: 0,
+    web: {
+      backgroundColor: '#ffffff', // Light background for web
+      borderTopColor: '#e0e0e0', // Light border for web
+    },
+  },
+  
+  tabButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 4,
+    minHeight: 49,
+  },
+  
+  tabButtonHeader: {
+    flex: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: theme.spacing?.xs,
+    paddingHorizontal: theme.spacing?.md,
+    borderRadius: theme.radius?.md,
+    minHeight: 36,
+  },
+  
+  tabButtonActive: {
+    // Let native platform handle active state styling
+  },
+  
+  tabButtonDisabled: {
+    opacity: 0.5,
+  },
+  
+  tabIconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  
+  tabIcon: {
+    width: 24,
+    height: 24,
+  },
+  
+  tabLabel: {
+    fontSize: 10,
+    marginTop: 2,
+    color: theme.colors.onSurface,
+    textAlign: 'center',
+  },
+  
+  tabLabelHeader: {
+    fontSize: 14,
+    marginLeft: theme.spacing?.xs,
+    color: theme.colors.onSurface,
+  },
+  
+  tabLabelActive: {
+    color: theme.colors.primary,
+    fontWeight: '600',
+  },
+  
+  tabBadge: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    backgroundColor: theme.colors.error,
+    borderRadius: 10,
+    minWidth: 16,
+    height: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 4,
+  },
+  
+  tabBadgeText: {
+    color: theme.colors.onError,
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+}));

package/src/layouts/TabBarLayout/TabBarLayout.web.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button, Icon, Pressable } from '@idealyst/components';
+import { TabBarLayoutProps, TabBarConfig, TabButtonProps } from './types';
+import { tabBarLayoutStyles } from './TabBarLayout.styles';
+
+const DEFAULT_AUTO_BREAKPOINT = 768;
+
+// Web doesn't need safe area insets
+const useSafeAreaInsets = () => ({ top: 0, bottom: 0, left: 0, right: 0 });
+
+const WebHeader: React.FC<{
+  config: any;
+  styles: any;
+  showTabsInHeader: boolean;
+  tabBarConfig: TabBarConfig;
+  insets: any;
+}> = ({ config, styles, showTabsInHeader, tabBarConfig, insets }) => {
+  const handleBackPress = () => {
+    if (config.onBackPress) {
+      config.onBackPress();
+    } else {
+      // Web history back
+      window.history.back();
+    }
+  };
+
+  const headerDynamicStyles = {
+    height: config.height,
+    minHeight: config.height,
+    paddingTop: config.enabled ? insets.top : 0,
+  };
+
+  return (
+    <View 
+      style={[
+        styles.headerContainer,
+        headerDynamicStyles,
+        config.style,
+      ]}
+    >
+      <View style={styles.headerContent}>
+        {/* Custom content overrides native elements */}
+        {config.content ? (
+          config.content
+        ) : (
+          <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+            {/* Back Button */}
+            {config.showBackButton && (
+              <Button
+                variant="text"
+                onPress={handleBackPress}
+                style={{ marginRight: 8, minWidth: 'auto' }}
+              >
+                <Icon name="arrow-left" size="lg" color="primary" />
+              </Button>
+            )}
+            
+            {/* Title */}
+            {config.title && (
+              <Text 
+                size="large" 
+                weight="semibold"
+                style={{ flex: 1 }}
+              >
+                {config.title}
+              </Text>
+            )}
+          </View>
+        )}
+      </View>
+      
+      <View style={styles.headerRightContent}>
+        {/* Tabs in header for wide screens */}
+        {showTabsInHeader && tabBarConfig.items.length > 0 && (
+          <TabBar config={tabBarConfig} position="header" />
+        )}
+        
+        {/* Additional right content */}
+        {config.rightContent}
+      </View>
+    </View>
+  );
+};
+
+const TabButton: React.FC<TabButtonProps> = ({ item, isActive, onPress, position }) => {
+  const styles = tabBarLayoutStyles;
+  const isHeader = position === 'header';
+  
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={item.disabled}
+      style={[
+        isHeader ? styles.tabButtonHeader : styles.tabButton,
+        isActive && styles.tabButtonActive,
+        item.disabled && styles.tabButtonDisabled,
+      ]}
+    >
+      <View style={styles.tabIconContainer}>
+        {item.icon && (
+          typeof item.icon === 'string' ? (
+            <Icon name={item.icon as any} size={isHeader ? "lg" : "md"} color={isActive ? 'primary' : 'secondary'} />
+          ) : (
+            item.icon
+          )
+        )}
+        {item.badge !== undefined && (
+          <View style={styles.tabBadge}>
+            <Text style={styles.tabBadgeText}>
+              {typeof item.badge === 'number' && item.badge > 99 ? '99+' : item.badge}
+            </Text>
+          </View>
+        )}
+      </View>
+      {(!isHeader || (isHeader && item.label)) && (
+        <Text 
+          size={isHeader ? "medium" : "small"}
+          color={isActive ? 'primary' : 'secondary'}
+          style={isHeader ? { marginLeft: 8 } : { marginTop: 2, textAlign: 'center', fontSize: 10 }}
+        >
+          {item.label}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+const TabBar: React.FC<{
+  config: TabBarConfig;
+  position: 'bottom' | 'header';
+}> = ({ config, position }) => {
+  const styles = tabBarLayoutStyles;
+  
+  if (config.renderTabBar) {
+    return (
+      <>
+        {config.renderTabBar({
+          items: config.items,
+          activeTab: config.activeTab,
+          onTabSelect: config.onTabSelect,
+          position,
+        })}
+      </>
+    );
+  }
+  
+  const containerStyle = position === 'header' 
+    ? styles.headerTabs 
+    : [styles.tabBarBottom, config.style];
+  
+  return (
+    <View style={containerStyle}>
+      {config.items.map((item) => {
+        if (item.renderTab) {
+          return (
+            <React.Fragment key={item.id}>
+              {item.renderTab({
+                item,
+                isActive: item.id === config.activeTab,
+                onPress: () => config.onTabSelect?.(item.id),
+                position,
+              })}
+            </React.Fragment>
+          );
+        }
+        
+        return (
+          <TabButton
+            key={item.id}
+            item={item}
+            isActive={item.id === config.activeTab}
+            onPress={() => config.onTabSelect?.(item.id)}
+            position={position}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const TabBarLayout: React.FC<TabBarLayoutProps> = ({
+  children,
+  tabBar = {},
+  header = {},
+  style,
+  testID,
+}) => {
+  const styles = tabBarLayoutStyles;
+  const insets = useSafeAreaInsets();
+  const [screenWidth, setScreenWidth] = useState(() => window.innerWidth);
+  
+  // Default tab bar configuration
+  const tabBarConfig = {
+    items: [],
+    activeTab: undefined,
+    onTabSelect: undefined,
+    position: 'auto' as const,
+    autoBreakpoint: DEFAULT_AUTO_BREAKPOINT,
+    style: undefined,
+    tabStyle: undefined,
+    showLabels: true,
+    renderTabBar: undefined,
+    ...tabBar,
+  };
+  
+  // Default header configuration
+  const headerConfig = {
+    enabled: true,
+    height: 64,
+    title: undefined,
+    showBackButton: false,
+    onBackPress: undefined,
+    content: null,
+    rightContent: null,
+    style: undefined,
+    showTabs: true,
+    native: true,
+    ...header,
+  };
+  
+  // Update screen width on window resize
+  useEffect(() => {
+    const updateDimensions = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    
+    window.addEventListener('resize', updateDimensions);
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, []);
+  
+  // Determine actual tab position
+  const actualTabPosition = (() => {
+    if (tabBarConfig.position === 'auto') {
+      // On web, use header tabs for wide screens
+      return screenWidth >= tabBarConfig.autoBreakpoint ? 'header' : 'bottom';
+    }
+    return tabBarConfig.position;
+  })();
+  
+  const showTabsInHeader = actualTabPosition === 'header' && headerConfig.showTabs;
+  const showTabsAtBottom = actualTabPosition === 'bottom';
+  
+  // Create dynamic styles for bottom tab bar (no safe area needed on web)
+  const tabBarBottomStyles = {
+    paddingBottom: 0,
+  };
+  
+  return (
+    <View 
+      style={[
+        styles.container,
+        style,
+      ]}
+      testID={testID}
+    >
+      {/* Header */}
+      {headerConfig.enabled && (
+        <WebHeader 
+          config={headerConfig}
+          styles={styles}
+          showTabsInHeader={showTabsInHeader}
+          tabBarConfig={tabBarConfig}
+          insets={insets}
+        />
+      )}
+      
+      {/* Main Content Area */}
+      <View style={styles.bodyContainer}>
+        <View style={styles.mainContent}>
+          <View style={styles.contentArea}>
+            {children}
+          </View>
+        </View>
+      </View>
+      
+      {/* Bottom Tab Bar */}
+      {showTabsAtBottom && tabBarConfig.items.length > 0 && (
+        <View style={tabBarBottomStyles}>
+          <TabBar config={tabBarConfig} position="bottom" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default TabBarLayout;

package/src/layouts/TabBarLayout/index.native.ts

@@ -0,0 +1,2 @@
+export { default as TabBarLayout } from './TabBarLayout.native';
+export * from './types';

package/src/layouts/TabBarLayout/index.ts

@@ -0,0 +1,2 @@
+export { default as TabBarLayout } from './TabBarLayout';
+export * from './types';

package/src/layouts/TabBarLayout/index.web.ts

@@ -0,0 +1,2 @@
+export { default as TabBarLayout } from './TabBarLayout';
+export * from './types';

package/src/layouts/TabBarLayout/types.ts

@@ -0,0 +1,176 @@
+import { ReactNode } from 'react';
+
+export interface TabBarItem {
+  /**
+   * Unique identifier for the tab
+   */
+  id: string;
+  
+  /**
+   * Display label for the tab
+   */
+  label: string;
+  
+  /**
+   * Icon for the tab (can be a component or icon name)
+   */
+  icon?: ReactNode | string;
+  
+  /**
+   * Badge content to display on the tab
+   */
+  badge?: string | number;
+  
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Custom render function for the tab button
+   */
+  renderTab?: (props: TabButtonProps) => ReactNode;
+}
+
+export interface TabButtonProps {
+  item: TabBarItem;
+  isActive: boolean;
+  onPress: () => void;
+  position: 'bottom' | 'header';
+}
+
+export interface TabBarConfig {
+  /**
+   * Array of tab items
+   */
+  items: TabBarItem[];
+  
+  /**
+   * Currently active tab ID
+   */
+  activeTab?: string;
+  
+  /**
+   * Callback when tab is selected
+   */
+  onTabSelect?: (tabId: string) => void;
+  
+  /**
+   * Position of tab bar
+   * - 'bottom': Traditional mobile tab bar at bottom
+   * - 'header': Tabs integrated into header (for wider screens)
+   * - 'auto': Automatically choose based on screen width
+   */
+  position?: 'bottom' | 'header' | 'auto';
+  
+  /**
+   * Breakpoint for auto position switching (default: 768px)
+   */
+  autoBreakpoint?: number;
+  
+  /**
+   * Custom styles for tab bar container
+   */
+  style?: any;
+  
+  /**
+   * Custom styles for tab buttons
+   */
+  tabStyle?: any;
+  
+  /**
+   * Whether to show labels with icons
+   */
+  showLabels?: boolean;
+  
+  /**
+   * Custom component for rendering tab bar
+   */
+  renderTabBar?: (props: TabBarRenderProps) => ReactNode;
+}
+
+export interface TabBarRenderProps {
+  items: TabBarItem[];
+  activeTab?: string;
+  onTabSelect?: (tabId: string) => void;
+  position: 'bottom' | 'header';
+}
+
+export interface TabBarHeaderConfig {
+  /**
+   * Whether the header is enabled
+   */
+  enabled?: boolean;
+  
+  /**
+   * Height of the header
+   */
+  height?: number;
+  
+  /**
+   * Header title (native-style)
+   */
+  title?: string;
+  
+  /**
+   * Whether to show back button (auto-detected from navigation stack)
+   */
+  showBackButton?: boolean;
+  
+  /**
+   * Custom back button handler (overrides native navigation)
+   */
+  onBackPress?: () => void;
+  
+  /**
+   * Content to display in the header (left side) - overrides native elements
+   */
+  content?: ReactNode;
+  
+  /**
+   * Content to display on the right side of header
+   */
+  rightContent?: ReactNode;
+  
+  /**
+   * Custom styles for the header
+   */
+  style?: any;
+  
+  /**
+   * Whether to show tabs in header (when position is 'header')
+   */
+  showTabs?: boolean;
+  
+  /**
+   * Use native header styling (platform-specific)
+   */
+  native?: boolean;
+}
+
+export interface TabBarLayoutProps {
+  /**
+   * The main content to display
+   */
+  children?: ReactNode;
+  
+  /**
+   * Tab bar configuration
+   */
+  tabBar?: TabBarConfig;
+  
+  /**
+   * Header configuration
+   */
+  header?: TabBarHeaderConfig;
+  
+  /**
+   * Additional styles for the layout container
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/layouts/index.ts

@@ -1 +1,2 @@
-export * from './GeneralLayout'; 
+export * from './GeneralLayout';
+export * from './TabBarLayout';