@idealyst/navigation 1.0.0

package/src/layouts/GeneralLayout/GeneralLayout.styles.ts

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

@@ -0,0 +1,144 @@
+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 
+          background="surface"
+          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;

package/src/layouts/GeneralLayout/README.md

@@ -0,0 +1,171 @@
+# GeneralLayout
+
+A flexible layout component that provides a sidebar and header for web applications using the @idealyst/components library.
+
+## Features
+
+- **Collapsible Sidebar**: Expandable and collapsible sidebar with smooth animations
+- **Configurable Header**: Optional header with customizable content and height
+- **Responsive Design**: Adapts to different screen sizes
+- **Theme Integration**: Uses @idealyst/components theme system
+- **Flexible Configuration**: Both sidebar and header can be disabled
+
+## Usage
+
+```tsx
+import { GeneralLayout } from '@idealyst/navigation';
+import { View, Text } from '@idealyst/components';
+
+function App() {
+  return (
+    <GeneralLayout
+      header={{
+        enabled: true,
+        height: 64,
+        content: <Text>My Header Content</Text>,
+      }}
+      sidebar={{
+        enabled: true,
+        initiallyExpanded: true,
+        expandedWidth: 280,
+        collapsedWidth: 60,
+        collapsible: true,
+        position: 'left',
+        content: <Text>My Sidebar Content</Text>,
+      }}
+    >
+      <View>
+        <Text>Main content goes here</Text>
+      </View>
+    </GeneralLayout>
+  );
+}
+```
+
+## Props
+
+### GeneralLayoutProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | The main content to display |
+| `sidebar` | `SidebarConfig` | `{}` | Sidebar configuration object |
+| `header` | `HeaderConfig` | `{}` | Header configuration object |
+| `style` | `any` | - | Additional styles for the layout container |
+| `testID` | `string` | - | Test ID for testing |
+
+### SidebarConfig
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enabled` | `boolean` | `true` | Whether the sidebar is enabled |
+| `initiallyExpanded` | `boolean` | `true` | Whether the sidebar is initially expanded |
+| `expandedWidth` | `number` | `280` | Width of the sidebar when expanded (px) |
+| `collapsedWidth` | `number` | `60` | Width of the sidebar when collapsed (px) |
+| `collapsible` | `boolean` | `true` | Whether the sidebar can be collapsed |
+| `position` | `'left' \| 'right'` | `'left'` | Position of the sidebar |
+| `content` | `ReactNode` | - | Content to display in the sidebar |
+| `style` | `any` | - | Custom styles for the sidebar |
+
+### HeaderConfig
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enabled` | `boolean` | `true` | Whether the header is enabled |
+| `height` | `number` | `64` | Height of the header (px) |
+| `content` | `ReactNode` | - | Content to display in the header |
+| `style` | `any` | - | Custom styles for the header |
+
+## Examples
+
+### Basic Layout with Header and Sidebar
+
+```tsx
+<GeneralLayout
+  header={{
+    content: <Text>My App</Text>,
+  }}
+  sidebar={{
+    content: (
+      <View>
+        <Text>Home</Text>
+        <Text>About</Text>
+      </View>
+    ),
+  }}
+>
+  <View>
+    <Text>Main content</Text>
+  </View>
+</GeneralLayout>
+```
+
+### Layout with Disabled Header
+
+```tsx
+<GeneralLayout
+  header={{ enabled: false }}
+  sidebar={{
+    content: <Text>Navigation items</Text>,
+  }}
+>
+  <View>
+    <Text>Main content</Text>
+  </View>
+</GeneralLayout>
+```
+
+### Layout with Right Sidebar
+
+```tsx
+<GeneralLayout
+  sidebar={{
+    position: 'right',
+    content: <Text>Right sidebar content</Text>,
+  }}
+>
+  <View>
+    <Text>Main content</Text>
+  </View>
+</GeneralLayout>
+```
+
+### Layout with Custom Dimensions
+
+```tsx
+<GeneralLayout
+  header={{
+    height: 80,
+    content: <Text>Tall header</Text>,
+  }}
+  sidebar={{
+    expandedWidth: 320,
+    collapsedWidth: 80,
+    content: <Text>Wide sidebar</Text>,
+  }}
+>
+  <View>
+    <Text>Main content</Text>
+  </View>
+</GeneralLayout>
+```
+
+## Styling
+
+The GeneralLayout uses the @idealyst/components theme system for consistent styling:
+
+- **Background**: Uses `background="surface"` for sidebar and header
+- **Borders**: Uses `border="thin"` for visual separation
+- **Spacing**: Uses `spacing="md"` for consistent padding
+- **Theme Integration**: Automatically inherits theme colors and spacing
+
+## Platform Support
+
+Currently, the GeneralLayout only supports web platforms. React Native support may be added in future versions.
+
+## Implementation Notes
+
+- The layout uses CSS flexbox for responsive behavior
+- Sidebar transitions use CSS animations for smooth expand/collapse
+- Toggle button automatically adjusts position based on sidebar location
+- Theme colors and spacing are applied through the View component variants 

package/src/layouts/GeneralLayout/index.ts

@@ -0,0 +1,2 @@
+export { default as GeneralLayout } from './GeneralLayout';
+export type { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';

package/src/layouts/GeneralLayout/types.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+
+export interface SidebarConfig {
+  /**
+   * Whether the sidebar is enabled
+   */
+  enabled?: boolean;
+  
+  /**
+   * Whether the sidebar is initially expanded
+   */
+  initiallyExpanded?: boolean;
+  
+  /**
+   * Width of the sidebar when expanded
+   */
+  expandedWidth?: number;
+  
+  /**
+   * Width of the sidebar when collapsed
+   */
+  collapsedWidth?: number;
+  
+  /**
+   * Whether the sidebar can be collapsed
+   */
+  collapsible?: boolean;
+  
+  /**
+   * Position of the sidebar
+   */
+  position?: 'left' | 'right';
+  
+  /**
+   * Content to display in the sidebar
+   */
+  content?: ReactNode;
+  
+  /**
+   * Custom styles for the sidebar
+   */
+  style?: any;
+}
+
+export interface HeaderConfig {
+  /**
+   * Whether the header is enabled
+   */
+  enabled?: boolean;
+  
+  /**
+   * Height of the header
+   */
+  height?: number;
+  
+  /**
+   * Content to display in the header
+   */
+  content?: ReactNode;
+  
+  /**
+   * Custom styles for the header
+   */
+  style?: any;
+}
+
+export interface GeneralLayoutProps {
+  /**
+   * The main content to display
+   */
+  children?: ReactNode;
+  
+  /**
+   * Sidebar configuration
+   */
+  sidebar?: SidebarConfig;
+  
+  /**
+   * Header configuration
+   */
+  header?: HeaderConfig;
+  
+  /**
+   * Additional styles for the layout container
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+export interface GeneralLayoutState {
+  /**
+   * Whether the sidebar is currently expanded
+   */
+  isSidebarExpanded: boolean;
+} 

package/src/layouts/index.ts

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

package/src/routing/index.native.tsx

@@ -0,0 +1,2 @@
+export * from './router.native';
+export * from './types';

package/src/routing/index.ts

@@ -0,0 +1,2 @@
+export * from './router.web';
+export * from './types'; 

package/src/routing/index.web.tsx

@@ -0,0 +1,2 @@
+export * from './router.web';
+export * from './types'; 

package/src/routing/router.native.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+
+import { RouteParam } from "./types"
+import { TypedNavigator } from "@react-navigation/native";
+
+export const buildRouter = (routeParam: RouteParam, path: string = '') => {
+    return () => buildNativeRouter(routeParam, path)
+}
+
+/**
+ * Create the router supporting React Navigation
+ * @param routeParam 
+ * @param path 
+ * @param LastNavigator 
+ * @returns 
+ */
+const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNavigator?: TypedNavigator<any>): React.ReactElement => {
+    const nextPath = (routeParam.path ? path + routeParam.path : path) || '';
+    const type = routeParam.layout?.type;
+    console.log('Registered routes', nextPath, routeParam.routes);
+    switch (type) {
+        case 'stack':
+            const Stack = createNativeStackNavigator();
+            return (
+                <Stack.Navigator
+                    screenOptions={{
+                        // Disable screen optimization to ensure theme updates
+                        freezeOnBlur: false,
+                    }}
+                >
+                    <Stack.Screen name={nextPath} component={routeParam.component} />
+                    {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Stack))}
+                </Stack.Navigator>
+            )
+        case 'tab':
+            const Tab = createBottomTabNavigator();
+            return (
+                <Tab.Navigator
+                    screenOptions={{
+                        // Disable screen optimization to ensure theme updates
+                        lazy: false,
+                        freezeOnBlur: false,
+                    }}
+                >
+                    <Tab.Screen name={nextPath} component={routeParam.component} />
+                    {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Tab))}
+                </Tab.Navigator>
+            )
+        case 'drawer':
+            const Drawer = createDrawerNavigator();
+            return (
+                <Drawer.Navigator
+                    screenOptions={{
+                        // Disable screen optimization to ensure theme updates
+                        lazy: false,
+                        freezeOnBlur: false,
+                    }}
+                >
+                    <Drawer.Screen name={nextPath} component={routeParam.component} />
+                    {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Drawer))}
+                </Drawer.Navigator>
+            )
+        case 'modal':
+            if (!LastNavigator) {
+                throw new Error('LastNavigator is required for modal layout');
+            }
+            return (
+                <>
+                    <LastNavigator.Screen options={{ headerShown: false, presentation: 'modal' }} name={nextPath} component={routeParam.component} />
+                    {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
+                </>
+            )
+        case undefined:
+            if (!LastNavigator) {
+                throw new Error('LastNavigator is required for undefined layout');
+            }
+            return (
+                <>
+                    <LastNavigator.Screen name={nextPath} component={routeParam.component} />
+                    {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
+                </>
+            )
+        default:
+            throw new Error(`Unknown layout type: ${type}`);
+    }
+}

package/src/routing/router.web.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Routes, Route, Outlet } from "react-router-dom";
+import { RouteParam } from "./types";
+
+export const buildRouter = (routeParam: RouteParam, path: string = '') => {
+    return () => (
+        <Routes>
+            {buildWebRoutes(routeParam, path)}
+        </Routes>
+    );
+};
+
+/**
+ * Create React Router routes from RouteParam configuration
+ * @param routeParam The route parameter configuration
+ * @param parentPath The parent path for nested routes
+ * @returns Array of React Router Route elements
+ */
+const buildWebRoutes = (routeParam: RouteParam, parentPath: string = ''): React.ReactElement[] => {
+    const routes: React.ReactElement[] = [];
+    const currentPath = routeParam.path ? `${parentPath}${routeParam.path}` : parentPath;
+    
+    // Handle layout wrapping
+    const LayoutComponent = routeParam.layout?.component;
+    const RouteComponent = routeParam.component;
+    
+    if (LayoutComponent && routeParam.routes) {
+        // Create a wrapper component that renders the layout with Outlet
+        const LayoutWrapper: React.FC = () => (
+            <LayoutComponent>
+                <Outlet />
+            </LayoutComponent>
+        );
+        
+        // Create parent route with layout
+        const layoutRoute = (
+            <Route 
+                key={`layout-${currentPath || 'root'}`} 
+                path={currentPath || '/'} 
+                element={<LayoutWrapper />}
+            >
+                {/* Add index route for the main component */}
+                <Route 
+                    index 
+                    element={<RouteComponent />} 
+                />
+                {/* Add nested routes */}
+                {routeParam.routes.reduce((acc, nestedRoute) => {
+                    return acc.concat(buildWebRoutes(nestedRoute, currentPath));
+                }, [] as React.ReactElement[])}
+            </Route>
+        );
+        
+        routes.push(layoutRoute);
+    } else {
+        // Simple route without layout
+        routes.push(
+            <Route 
+                key={currentPath || 'root'} 
+                path={currentPath || '/'} 
+                element={<RouteComponent />} 
+            />
+        );
+        
+        // Handle nested routes without layout
+        if (routeParam.routes) {
+            routeParam.routes.forEach(nestedRoute => {
+                routes.push(...buildWebRoutes(nestedRoute, currentPath));
+            });
+        }
+    }
+    
+    return routes;
+};

package/src/routing/types.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+export type RouteParam = {
+    path?: string;
+    routes?: RouteParam[];
+    component: React.ComponentType;
+    layout?: LayoutParam;
+}
+
+export type LayoutType = 'stack' | 'tab' | 'drawer' | 'modal';
+
+export type LayoutParam = {
+    type: LayoutType;
+    component?: React.ComponentType<{ children?: React.ReactNode }>;
+}