@umituz/react-native-settings 4.20.58 → 4.20.59

package/src/presentation/navigation/components/README.md

@@ -1,330 +1,105 @@
 # Navigation Components
 
-Screen wrapper components for integrating settings screens into React Navigation with proper props passing and configuration.
-
-## Components
-
-### SettingsScreenWrapper
-
-Wrapper component for the main Settings screen that injects configuration, navigation, and user profile props.
-
-```tsx
-import { SettingsScreenWrapper } from '@umituz/react-native-settings';
+## Purpose
 
-<Stack.Screen
-  name="Settings"
-  component={SettingsScreenWrapper}
-  options={{ headerShown: false }}
-/>
-```
-
-#### Props
-
-Automatically receives and injects:
-- `config`: Settings configuration from navigation params
-- `appInfo`: Application information object
-- `userProfile`: User profile data
-- `customSections`: Custom settings sections
-- `devSettings`: Development settings configuration
-
-### LegalScreenWrapper
-
-Wrapper component for legal screens (Privacy Policy, Terms of Service, etc.) with content and styling configuration.
-
-```tsx
-import { LegalScreenWrapper } from '@umituz/react-native-settings';
-
-<Stack.Screen
-  name="PrivacyPolicy"
-  component={LegalScreenWrapper}
-/>
-```
-
-#### Features
-
-- Dynamic document type from route params
-- Content injection from navigation
-- Custom styling support
-- Title and header configuration
+Screen wrapper components for integrating settings screens into React Navigation with proper props passing and configuration.
 
-### AboutScreenWrapper
+## File Paths
 
-Wrapper component for the About screen with app information and developer details.
+- **Settings Wrapper**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/navigation/components/SettingsScreenWrapper.tsx`
+- **Legal Wrapper**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/navigation/components/LegalScreenWrapper.tsx`
+- **About Wrapper**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/navigation/components/AboutScreenWrapper.tsx`
 
-```tsx
-import { AboutScreenWrapper } from '@umituz/react-native-settings';
+## Strategy
 
-<Stack.Screen
-  name="About"
-  component={AboutScreenWrapper}
-/>
-```
+1. **Props Injection**: Automatically injects configuration and navigation props into screens
+2. **Configuration Management**: Handles all screen configuration centrally
+3. **Type Safety**: Provides TypeScript types for all wrapper props
+4. **Consistency**: Ensures consistent props passing across all screens
+5. **Flexibility**: Supports custom configuration via route params
 
-#### Features
+## Restrictions (Forbidden)
 
-- App information injection
-- Developer details display
-- Contact information handling
-- Version and build number display
+### DO NOT
+- ❌ DO NOT use screen components directly without wrappers
+- ❌ DO NOT manually pass props to screen components
+- ❌ DO NOT create custom screen wrappers without understanding the pattern
 
-## Screen Registration
+### NEVER
+- ❌ NEVER bypass wrappers for "simple" screens
+- ❌ NEVER hardcode configuration in screen components
+- ❌ NEVER use wrappers outside of NavigationContext
 
-### Complete Navigation Setup
+### AVOID
+- ❌ AVOID creating wrapper chains (keep it flat)
+- ❌ AVOID mixing wrapper patterns
+- ❌ AVOID complex prop drilling (wrappers handle this)
 
-```tsx
-import { SettingsStackNavigator } from '@umituz/react-native-settings';
+## Rules (Mandatory)
 
-function App() {
-  const appInfo = {
-    name: 'My App',
-    version: '1.0.0',
-    buildNumber: '100',
-    developer: 'My Company',
-    websiteUrl: 'https://example.com',
-  };
+### ALWAYS
+- ✅ ALWAYS use screen wrappers for all settings screens
+- ✅ ALWAYS pass configuration via initialParams or navigator props
+- ✅ MUST use TypeScript types for wrapper props
+- ✅ MUST keep wrappers focused on props injection only
 
-  return (
-    <NavigationContainer>
-      <SettingsStackNavigator appInfo={appInfo} />
-    </NavigationContainer>
-  );
-}
-```
+### MUST
+- ✅ MUST extract configuration from route.params or navigator props
+- ✅ MUST pass all required props to wrapped screen
+- ✅ MUST handle missing configuration gracefully
 
-### Manual Screen Registration
+### SHOULD
+- ✅ SHOULD keep wrapper logic minimal (props injection only)
+- ✅ SHOULD use consistent naming pattern for wrappers
+- ✅ SHOULD test wrappers with various configurations
 
-```tsx
-import { SettingsScreenWrapper, LegalScreenWrapper, AboutScreenWrapper } from '@umituz/react-native-settings';
+## AI Agent Guidelines
 
-<Stack.Navigator>
-  <Stack.Screen
-    name="Settings"
-    component={SettingsScreenWrapper}
-    options={{
-      headerShown: false,
-      presentation: 'card',
-    }}
-  />
-  <Stack.Screen
-    name="Appearance"
-    component={AppearanceScreen}
-    options={{ title: 'Appearance' }}
-  />
-  <Stack.Screen
-    name="PrivacyPolicy"
-    component={LegalScreenWrapper}
-    options={{ title: 'Privacy Policy' }}
-  />
-  <Stack.Screen
-    name="TermsOfService"
-    component={LegalScreenWrapper}
-    options={{ title: 'Terms of Service' }}
-  />
-  <Stack.Screen
-    name="About"
-    component={AboutScreenWrapper}
-    options={{ title: 'About' }}
-  />
-</Stack.Navigator>
-```
+1. **File Reference**: When modifying wrappers, refer to `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/navigation/components/`
+2. **Wrapper Purpose**: Wrappers exist solely to inject props, not to add functionality
+3. **Config Flow**: Configuration flows from navigator props → route.params → screen props
+4. **Type Safety**: Always use proper TypeScript types for route params
+5. **Minimal Logic**: Keep wrappers simple, avoid complex business logic
 
-## Props Injection
+## Component Reference
 
 ### SettingsScreenWrapper
 
-```typescript
-interface SettingsScreenWrapperProps {
-  route: {
-    params: {
-      config?: SettingsConfig;
-      appInfo?: AppInfo;
-      userProfile?: UserProfile;
-      customSections?: CustomSettingsSection[];
-      devSettings?: DevSettingsProps;
-      showCloseButton?: boolean;
-    };
-  };
-  navigation: any;
-}
-```
-
-### LegalScreenWrapper
+**Purpose**: Wraps main settings screen with configuration and props
 
-```typescript
-interface LegalScreenWrapperProps {
-  route: {
-    params: {
-      documentType: 'privacy-policy' | 'terms-of-service' | 'eula';
-      content?: string;
-      title?: string;
-      styles?: LegalContentStyles;
-    };
-  };
-}
-```
-
-### AboutScreenWrapper
-
-```typescript
-interface AboutScreenWrapperProps {
-  route: {
-    params: {
-      appInfo?: AppInfo;
-      config?: AboutConfig;
-    };
-  };
-}
-```
-
-## Usage Examples
-
-### With Custom Config
-
-```tsx
-function SettingsStack() {
-  const config = {
-    appearance: true,
-    language: true,
-    notifications: 'auto',
-  };
-
-  const userProfile = {
-    displayName: 'John Doe',
-    email: 'john@example.com',
-    avatarUrl: 'https://example.com/avatar.jpg',
-  };
-
-  return (
-    <Stack.Screen
-      name="Settings"
-      component={SettingsScreenWrapper}
-      initialParams={{ config, userProfile }}
-    />
-  );
-}
-```
-
-### With Custom Styling
-
-```tsx
-function PrivacyStack() {
-  const customStyles = {
-    container: { backgroundColor: '#f5f5f5' },
-    content: { fontSize: 16, lineHeight: 24 },
-    header: { color: '#333' },
-  };
-
-  return (
-    <Stack.Screen
-      name="PrivacyPolicy"
-      component={LegalScreenWrapper}
-      initialParams={{
-        documentType: 'privacy-policy',
-        styles: customStyles,
-      }}
-    />
-  );
-}
-```
-
-### With App Information
-
-```tsx
-function AboutStack() {
-  const appInfo = {
-    name: 'My Application',
-    version: '2.0.0',
-    buildNumber: '200',
-    developer: 'My Company LLC',
-    contactEmail: 'support@example.com',
-    websiteUrl: 'https://example.com',
-    websiteDisplay: 'example.com',
-    moreAppsUrl: 'https://example.com/apps',
-  };
-
-  return (
-    <Stack.Screen
-      name="About"
-      component={AboutScreenWrapper}
-      initialParams={{ appInfo }}
-    />
-  );
-}
-```
+**Injected Props**:
+- `config`: Settings configuration
+- `appInfo`: Application information
+- `userProfile`: User profile data
+- `customSections`: Custom settings sections
+- `devSettings`: Development settings configuration
 
-## Navigation Patterns
+**Usage**: Use in Stack.Screen component
 
-### Modal Presentation
+### LegalScreenWrapper
 
-```tsx
-<Stack.Screen
-  name="Settings"
-  component={SettingsScreenWrapper}
-  options={{
-    presentation: 'modal',
-    headerShown: false,
-    cardStyle: { backgroundColor: 'transparent' },
-  }}
-  initialParams={{ showCloseButton: true }}
-/>
-```
+**Purpose**: Wraps legal screens with content and styling configuration
 
-### Custom Header
+**Injected Props**:
+- `documentType`: Type of legal document
+- `content`: Document content
+- `title`: Document title
+- `styles`: Custom styling
 
-```tsx
-<Stack.Screen
-  name="Appearance"
-  component={AppearanceScreen}
-  options={{
-    headerTitle: 'Appearance',
-    headerStyle: { backgroundColor: '#fff' },
-    headerTintColor: '#000',
-    headerTitleStyle: { fontWeight: 'bold' },
-  }}
-/>
-```
+**Usage**: Use for Privacy Policy, Terms of Service, EULA screens
 
-### Nested Navigation
+### AboutScreenWrapper
 
-```tsx
-<Tab.Navigator>
-  <Tab.Screen name="Home" component={HomeScreen} />
-  <Tab.Screen
-    name="Settings"
-    options={{ headerShown: false }}
-  >
-    {() => (
-      <SettingsStack>
-        <Stack.Screen
-          name="Settings"
-          component={SettingsScreenWrapper}
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen
-          name="Appearance"
-          component={AppearanceScreen}
-        />
-      </SettingsStack>
-    )}
-  </Tab.Screen>
-</Tab.Navigator>
-```
+**Purpose**: Wraps about screen with app information
 
-## Best Practices
+**Injected Props**:
+- `appInfo`: Application information object
+- `config`: About screen configuration
 
-1. **Use Wrappers**: Always use screen wrappers for proper props injection
-2. **Type Safety**: Use TypeScript for navigation params
-3. **Initial Params**: Pass configuration via initialParams
-4. **Header Options**: Configure headers appropriately per screen
-5. **Presentation**: Use modal presentation for settings on iOS
-6. **Consistency**: Maintain consistent navigation patterns
+**Usage**: Use for About screen
 
-## Related
+## Related Components
 
-- **SettingsStackNavigator**: Main navigator component
+- **SettingsStackNavigator**: Main navigator that uses these wrappers
 - **Navigation Hooks**: Navigation utility hooks
 - **Screen Components**: Individual screen implementations
-
-## License
-
-MIT