@umituz/react-native-settings 4.20.58 → 4.20.60

package/src/presentation/screens/components/SettingsContent/README.md

@@ -1,404 +1,75 @@
 # Settings Content
 
-Main content composer component that orchestrates all sections of the settings screen including profile, features, identity, support, and footer.
-
-## Features
-
-- **Section Composition**: Orchestrates all settings sections
-- **Profile Header**: Optional user profile display
-- **Custom Sections**: Support for app-specific sections
-- **Feature Sections**: Appearance, language, notifications
-- **Identity Sections**: About and legal information
-- **Support Sections**: Feedback, rating, and FAQs
-- **Empty State**: Graceful handling of empty configuration
-- **Footer**: App version and build information
-
-## Installation
-
-This component is part of `@umituz/react-native-settings`.
-
-## Usage
-
-### Basic Usage
-
-```tsx
-import { SettingsContent } from '@umituz/react-native-settings';
-
-function MySettingsScreen() {
-  const normalizedConfig = {
-    appearance: { config: {} },
-    language: { config: {} },
-    notifications: { config: {} },
-    about: { config: {} },
-    legal: { config: {} },
-    feedback: { config: {} },
-  };
-
-  const features = {
-    appearance: true,
-    language: true,
-    notifications: true,
-    about: true,
-    legal: true,
-    feedback: true,
-  };
-
-  return (
-    <SettingsContent
-      normalizedConfig={normalizedConfig}
-      features={features}
-      showFooter={true}
-      appVersion="1.0.0"
-    />
-  );
-}
-```
-
-## Props
-
-### SettingsContentProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `normalizedConfig` | `NormalizedConfig` | **Required** | Normalized configuration object |
-| `config` | `any` | `undefined` | Raw config object |
-| `features` | `FeatureFlags` | **Required** | Feature visibility flags |
-| `showUserProfile` | `boolean` | `false` | Show user profile header |
-| `userProfile` | `UserProfile` | `undefined` | User profile data |
-| `showFooter` | `boolean` | `true` | Show footer with version |
-| `footerText` | `string` | `undefined` | Custom footer text |
-| `appVersion` | `string` | `undefined` | App version number |
-| `customSections` | `CustomSection[]` | `[]` | Custom settings sections |
-| `showCloseButton` | `boolean` | `false` | Show close button (unused) |
-| `devSettings` | `DevSettingsProps` | `undefined` | Dev settings configuration |
-
-### FeatureFlags
-
-```typescript
-interface FeatureFlags {
-  appearance: boolean;      // Show appearance settings
-  language: boolean;        // Show language selection
-  notifications: boolean;   // Show notification settings
-  about: boolean;           // Show about section
-  legal: boolean;           // Show legal section
-  disclaimer: boolean;      // Show disclaimer
-  userProfile: boolean;     // Show user profile
-  feedback: boolean;        // Show feedback option
-  rating: boolean;          // Show rating option
-  faqs: boolean;            // Show FAQ access
-  subscription: boolean;    // Show subscription option
-  wallet: boolean;          // Show wallet option
-}
-```
-
-## Component Structure
-
-```
-SettingsContent
-├── ProfileSectionLoader        (if showUserProfile)
-├── CustomSettingsList          (if customSections)
-├── Subscription Item           (if features.subscription)
-├── Wallet Item                 (if features.wallet)
-├── FeatureSettingsSection
-│   ├── AppearanceSection       (if features.appearance)
-│   ├── Language Selection      (if features.language)
-│   └── NotificationsSection    (if features.notifications)
-├── IdentitySettingsSection
-│   ├── AboutSection            (if features.about)
-│   └── LegalSection            (if features.legal)
-├── SupportSettingsSection
-│   ├── Feedback                (if features.feedback)
-│   ├── Rating                  (if features.rating)
-│   └── FAQ                     (if features.faqs)
-├── DisclaimerSetting           (if features.disclaimer)
-├── Empty State                 (if no features)
-├── DevSettingsSection          (if devSettings)
-└── SettingsFooter              (if showFooter)
-```
-
-## Examples
-
-### Minimal Settings
-
-```tsx
-function MinimalSettings() {
-  return (
-    <SettingsContent
-      normalizedConfig={{}}
-      features={{}}
-      showFooter={true}
-    />
-  );
-}
-```
-
-### With User Profile
-
-```tsx
-function SettingsWithProfile() {
-  const userProfile = {
-    displayName: 'John Doe',
-    userId: 'user123',
-    avatarUrl: 'https://example.com/avatar.jpg',
-    onPress: () => navigation.navigate('Account'),
-  };
-
-  return (
-    <SettingsContent
-      normalizedConfig={{}}
-      features={{ userProfile: true }}
-      showUserProfile={true}
-      userProfile={userProfile}
-    />
-  );
-}
-```
-
-### Full Featured Settings
-
-```tsx
-function FullSettings() {
-  const normalizedConfig = {
-    appearance: { config: { showThemeSection: true } },
-    language: { config: { route: 'LanguageSelection' } },
-    notifications: { config: { showQuietHours: true } },
-    about: {
-      config: {
-        appName: 'My App',
-        version: '1.0.0',
-        developer: 'My Company',
-      },
-    },
-    legal: {
-      config: {
-        privacyPolicyUrl: 'https://example.com/privacy',
-        termsOfServiceUrl: 'https://example.com/terms',
-      },
-    },
-    subscription: {
-      config: {
-        title: 'Upgrade to Pro',
-        description: 'Get all features',
-        onPress: () => navigation.navigate('Upgrade'),
-      },
-    },
-  };
+## Purpose
 
-  const features = {
-    appearance: true,
-    language: true,
-    notifications: true,
-    about: true,
-    legal: true,
-    disclaimer: true,
-    feedback: true,
-    rating: true,
-    faqs: true,
-    subscription: true,
-  };
-
-  return (
-    <SettingsContent
-      normalizedConfig={normalizedConfig}
-      features={features}
-      showUserProfile={true}
-      userProfile={userProfile}
-      showFooter={true}
-      appVersion="1.0.0"
-    />
-  );
-}
-```
-
-### With Custom Sections
-
-```tsx
-function SettingsWithCustomSections() {
-  const customSections = [
-    {
-      title: 'INTEGRATIONS',
-      items: [
-        {
-          title: 'Google',
-          icon: 'logo-google',
-          onPress: () => manageGoogle(),
-        },
-      ],
-    },
-  ];
-
-  return (
-    <SettingsContent
-      normalizedConfig={{}}
-      features={{}}
-      customSections={customSections}
-    />
-  );
-}
-```
-
-### With Dev Settings
-
-```tsx
-import { DevSettingsSection } from '@umituz/react-native-settings';
-
-function DevelopmentSettings() {
-  return (
-    <SettingsContent
-      normalizedConfig={{}}
-      features={{}}
-      devSettings={{
-        enabled: true,
-        onAfterClear: async () => {
-          await resetApp();
-          Updates.reloadAsync();
-        },
-      }}
-    />
-  );
-}
-```
-
-### Custom Footer Text
-
-```tsx
-function CustomFooterSettings() {
-  return (
-    <SettingsContent
-      normalizedConfig={{}}
-      features={{}}
-      showFooter={true}
-      footerText="© 2025 My Company. All rights reserved."
-    />
-  );
-}
-```
-
-## Empty State
-
-When no features are enabled, shows empty state:
-
-```tsx
-// Renders empty state section
-<SettingsContent
-  normalizedConfig={{}}
-  features={{}}
-/>
-```
-
-Empty state text can be customized via `config.emptyStateText` or translation key `settings.noOptionsAvailable`.
-
-## Sub-Components
-
-### ProfileSectionLoader
-
-Loads and displays user profile header.
-
-```tsx
-<ProfileSectionLoader userProfile={userProfile} />
-```
-
-### CustomSettingsList
-
-Renders custom app-specific sections.
-
-```tsx
-<CustomSettingsList customSections={customSections} />
-```
-
-### Subscription Item
-
-Special item for subscription/upgrade.
-
-```tsx
-<SettingsItemCard
-  title="Upgrade to Pro"
-  description="Get all features"
-  icon="star"
-  onPress={handleUpgrade}
-  sectionTitle="SUBSCRIPTION"
-/>
-```
+Main content composer component that orchestrates all sections of the settings screen including profile, features, identity, support, and footer.
 
-### Wallet Item
+## File Paths
 
-Special item for wallet/payment settings.
+- **Component**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/screens/components/SettingsContent/SettingsContent.tsx`
 
-```tsx
-<WalletSettingsItem
-  config={{
-    title: 'Wallet',
-    description: 'Manage payment',
-    icon: 'wallet',
-    route: 'Wallet',
-  }}
-  t={t}
-/>
-```
+## Strategy
 
-## Feature Detection
+1. **Section Orchestration**: Manages rendering of all settings sections in defined order
+2. **Feature Flags**: Uses feature flags to control section visibility
+3. **Empty State**: Gracefully handles configuration with no enabled features
+4. **Custom Sections**: Supports app-specific custom sections
+5. **Footer Integration**: Includes app version and build information footer
 
-Uses `hasAnyFeatures` to determine if empty state should be shown:
+## Restrictions (Forbidden)
 
-```typescript
-const hasAnyFeatures = useMemo(() =>
-  features.appearance ||
-  features.language ||
-  features.notifications ||
-  features.about ||
-  features.legal ||
-  features.disclaimer ||
-  features.feedback ||
-  features.rating ||
-  features.faqs ||
-  features.subscription ||
-  features.wallet ||
-  customSections.length > 0,
-[features, customSections.length]
-);
-```
+### DO NOT
+- ❌ DO NOT manually render sections individually (use SettingsContent for all)
+- ❌ DO NOT bypass normalized config system
+- ❌ DO NOT modify section order after initial render
 
-## Internationalization
+### NEVER
+- ❌ NEVER pass non-normalized config to SettingsContent
+- ❌ NEVER use SettingsContent without feature detection
+- ❌ NEVER hardcode section visibility
 
-Translation keys used:
+### AVOID
+- ❌ AVOID showing too many sections at once (impacts performance)
+- ❌ AVOID frequent re-renders by keeping config stable
+- ❌ AVOID mixing concerns (keep section logic in section components)
 
-```typescript
-// Section titles
-t("settings.title")
+## Rules (Mandatory)
 
-// Subscription
-t("settings.subscription.title")
-t("settings.subscription.description")
+### ALWAYS
+- ✅ ALWAYS normalize config before passing to SettingsContent
+- ✅ ALWAYS use feature flags to control visibility
+- ✅ ALWAYS provide feature flags from useFeatureDetection hook
+- ✅ MUST handle empty state when no features are enabled
 
-// Wallet
-t("wallet.title")
-t("wallet.description")
+### MUST
+- ✅ MUST maintain section order: Profile → Custom → Features → Identity → Support → Footer
+- ✅ MUST memoize section components for performance
+- ✅ MUST provide translation function via context or props
 
-// Footer
-t("settings.footer.version")
+### SHOULD
+- ✅ SHOULD keep sections focused on specific feature groups
+- ✅ SHOULD use custom sections for app-specific features
+- ✅ SHOULD test with various feature combinations
 
-// Empty state
-t("settings.noOptionsAvailable")
-```
+## AI Agent Guidelines
 
-## Best Practices
+1. **File Reference**: When modifying content structure, refer to `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/screens/components/SettingsContent/SettingsContent.tsx`
+2. **Config Normalization**: Always call `normalizeSettingsConfig()` before passing to component
+3. **Feature Detection**: Always use `useFeatureDetection()` hook to generate feature flags
+4. **Performance**: Component uses useMemo to prevent unnecessary recalculations
+5. **Empty State**: Provide meaningful empty state message via translation key `settings.noOptionsAvailable`
 
-1. **Normalize Config**: Always normalize config before passing
-2. **Feature Flags**: Use feature flags to control visibility
-3. **Order Matters**: Sections render in defined order
-4. **User Profile**: Show profile only for authenticated users
-5. **Footer Info**: Always include app version in footer
-6. **Empty State**: Provide meaningful empty state message
-7. **Dev Settings**: Include dev settings for development builds
-8. **Custom Sections**: Use custom sections for app-specific features
+## Component Reference
 
-## Related
+Sub-components managed:
+- **ProfileSectionLoader**: User profile header (conditional)
+- **CustomSettingsList**: App-specific custom sections
+- **FeatureSettingsSection**: Appearance, Language, Notifications
+- **IdentitySettingsSection**: About, Legal
+- **SupportSettingsSection**: Feedback, Rating, FAQs
+- **SettingsFooter**: App version and build info
 
+Related:
 - **SettingsScreen**: Main screen component
 - **SettingsHeader**: Header component
-- **ProfileSectionLoader**: Profile component
-- **Feature Sections**: Individual section components
-
-## License
-
-MIT
+- **useFeatureDetection**: Hook for feature detection