@umituz/react-native-settings 4.20.58 → 4.20.60

package/src/presentation/screens/components/sections/FeatureSettingsSection/README.md

@@ -2,214 +2,125 @@
 
 Section component that displays appearance, language, and notification settings in the main settings screen.
 
-## Features
+## Purpose
 
-- **Appearance Settings**: Theme and color customization
-- **Language Selection**: Language picker with current display
-- **Notification Settings**: Push notification preferences
-- **Conditional Rendering**: Shows only enabled features
-- **Internationalization**: Full i18n support
+Provides a unified section component that aggregates multiple feature-related settings (appearance, language, notifications) into a single, configurable display area with conditional rendering based on feature flags.
 
-## Installation
+## File Paths
 
-This component is part of `@umituz/react-native-settings`.
-
-## Usage
-
-### Basic Usage
-
-```tsx
-import { FeatureSettingsSection } from '@umituz/react-native-settings';
-
-function MySettingsScreen() {
-  const normalizedConfig = {
-    appearance: { config: {} },
-    language: { config: { route: 'LanguageSelection' } },
-    notifications: { config: {} },
-  };
-
-  const features = {
-    appearance: true,
-    language: true,
-    notifications: true,
-  };
-
-  return (
-    <FeatureSettingsSection
-      normalizedConfig={normalizedConfig}
-      features={features}
-    />
-  );
-}
+```
+src/presentation/screens/components/sections/FeatureSettingsSection/
+├── index.ts                    # Main section component
+└── README.md                   # This file
 ```
 
-## Props
+## Strategy
 
-### FeatureSettingsSectionProps
+1. **Conditional Rendering**: Show only enabled features based on feature flags
+2. **Composition**: Compose multiple domain-specific sections into one
+3. **Configuration Driven**: Use normalized config to determine section behavior
+4. **Feature Detection**: Automatically detect available features
+5. **Internationalization**: Full i18n support for all text
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `normalizedConfig` | `NormalizedConfig` | **Required** | Normalized settings configuration |
-| `features` | `FeatureFlags` | **Required** | Feature visibility flags |
+## Restrictions
 
-### FeatureFlags
+### DO NOT
 
-```typescript
-interface FeatureFlags {
-  appearance: boolean;  // Show appearance section
-  language: boolean;    // Show language selection
-  notifications: boolean; // Show notification settings
-}
-```
+- ❌ DO NOT hardcode feature visibility; use feature flags
+- ❌ DO NOT mix concerns; delegate to domain sections
+- ❌ DO NOT assume all features are enabled
+- ❌ DO NOT include business logic in this component
+- ❌ DO NOT duplicate section implementations
 
-## Component Structure
+### NEVER
 
-```
-FeatureSettingsSection
-├── AppearanceSection     (if features.appearance)
-│   ├── Theme Mode
-│   └── Custom Colors
-├── Language Selection    (if features.language)
-│   └── Current Language Display
-└── NotificationsSection (if features.notifications)
-    ├── Push Notifications
-    ├── Quiet Hours
-    └── Notification Categories
-```
+- ❌ NEVER bypass feature detection
+- ❌ EVER hardcode navigation routes
+- ❌ EVER assume config is always valid
+- ❌ EVER render sections that are disabled
 
-## Examples
+### AVOID
 
-### All Features Enabled
+- ❌ AVOID complex state management; lift to parent
+- ❌ AVOID deep component nesting
+- ❌ AVOID duplicating translation keys
+- ❌ AVOID tight coupling to specific domains
 
-```tsx
-function FullSettingsScreen() {
-  const config = {
-    appearance: { config: { showThemeSection: true } },
-    language: { config: { route: 'LanguageSelection' } },
-    notifications: { config: { showQuietHours: true } },
-  };
+## Rules
 
-  const features = {
-    appearance: true,
-    language: true,
-    notifications: true,
-  };
+### ALWAYS
 
-  return <FeatureSettingsSection normalizedConfig={config} features={features} />;
-}
-```
+- ✅ ALWAYS normalize config before passing to sections
+- ✅ ALWAYS use feature detection for conditional rendering
+- ✅ ALWAYS provide translation keys for all text
+- ✅ ALWAYS respect feature flags
+- ✅ ALWAYS delegate to domain-specific components
 
-### Appearance Only
+### MUST
 
-```tsx
-function AppearanceOnlyScreen() {
-  const config = {
-    appearance: { config: { showColorsSection: false } },
-  };
+- ✅ MUST validate config before rendering
+- ✅ MUST handle missing features gracefully
+- ✅ MUST provide navigation for interactive items
+- ✅ MUST maintain consistent styling
 
-  const features = {
-    appearance: true,
-    language: false,
-    notifications: false,
-  };
+### SHOULD
 
-  return <FeatureSettingsSection normalizedConfig={config} features={features} />;
-}
-```
+- ✅ SHOULD use lazy loading for sections
+- ✅ SHOULD provide loading states
+- ✅ SHOULD handle errors gracefully
+- ✅ SHOULD maintain consistent spacing
 
-### With Custom Language Route
-
-```tsx
-function CustomLanguageScreen() {
-  const config = {
-    language: {
-      config: {
-        route: 'CustomLanguagePicker',
-        showFlags: true,
-      },
-    },
-  };
-
-  const features = {
-    appearance: false,
-    language: true,
-    notifications: false,
-  };
-
-  return <FeatureSettingsSection normalizedConfig={config} features={features} />;
-}
-```
+## AI Agent Guidelines
 
-## Sub-Components
+1. **When adding new features**: Add feature detection and conditional rendering
+2. **When modifying layout**: Maintain consistent spacing and alignment
+3. **When updating translations**: Add all required translation keys
+4. **When debugging**: Check feature flags and normalized config
+5. **When adding sections**: Follow existing section composition pattern
 
-### AppearanceSection
+## Component Reference
 
-Theme and appearance settings from Appearance domain.
+### FeatureSettingsSection
 
-```tsx
-<AppearanceSection
-  config={{
-    title: "Appearance",
-    description: "Customize your experience",
-    showThemeSection: true,
-    showColorsSection: true,
-  }}
-  sectionTitle="APPEARANCE"
-/>
-```
+Main section component that displays multiple feature settings.
 
-### Language Selection
+**Location**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/screens/components/sections/FeatureSettingsSection/index.tsx`
 
-Language picker item with current language display.
-
-```tsx
-<SettingsItemCard
-  title="Language"
-  description="🇺🇸 English"
-  icon="globe-outline"
-  onPress={() => navigation.navigate('LanguageSelection')}
-  sectionTitle="LANGUAGE"
-/>
-```
+**Props**:
+- `normalizedConfig: NormalizedConfig` - Normalized settings configuration
+- `features: FeatureFlags` - Feature visibility flags
 
-### NotificationsSection
-
-Notification settings from notifications domain.
-
-```tsx
-<NotificationsSection
-  config={{
-    title: "Notifications",
-    description: "Manage your preferences",
-    showQuietHours: true,
-  }}
-/>
-```
+**Sub-Components**:
+- AppearanceSection (if features.appearance)
+- Language Selection (if features.language)
+- NotificationsSection (if features.notifications)
 
 ## Feature Detection
 
 Features are detected using `useFeatureDetection` hook:
+- Returns: `{ appearance: boolean, language: boolean, notifications: boolean }`
+- Checks config availability and route definitions
 
-```tsx
-const features = useFeatureDetection(normalizedConfig, navigation);
-// Returns: { appearance: boolean, language: boolean, notifications: boolean }
-```
-
-## Internationalization
+## Configuration Structure
 
-All text uses translation keys:
+### NormalizedConfig
 
 ```typescript
-// Appearance
-t("settings.appearance.title")
-t("settings.appearance.description")
+interface NormalizedConfig {
+  appearance?: { config: AppearanceConfig };
+  language?: { config: LanguageConfig };
+  notifications?: { config: NotificationsConfig };
+}
+```
 
-// Language
-t("settings.languageSelection.title")
+### FeatureFlags
 
-// Notifications
-t("settings.notifications.title")
-t("settings.notifications.description")
+```typescript
+interface FeatureFlags {
+  appearance: boolean;
+  language: boolean;
+  notifications: boolean;
+}
 ```
 
 ## Best Practices
@@ -221,12 +132,6 @@ t("settings.notifications.description")
 5. **Feature Flags**: Use feature flags to control visibility
 6. **Lazy Loading**: Load sections only when needed
 
-## Related
-
-- **Appearance Domain**: Theme customization
-- **Localization**: Language management
-- **Notifications**: Notification preferences
-
 ## License
 
 MIT

package/src/presentation/screens/components/sections/IdentitySettingsSection/README.md

@@ -2,324 +2,67 @@
 
 Section component that displays user identity-related settings including About and Legal information.
 
-## Features
+## Purpose
 
-- **About Section**: App information, version, developer details
-- **Legal Section**: Privacy policy, terms of service, legal documents
-- **Conditional Rendering**: Shows only enabled sections
-- **Internationalization**: Full i18n support
+Provides a dedicated section for user identity settings, organizing app information (About) and legal documentation (Privacy Policy, Terms of Service) into a cohesive user interface. Enables conditional rendering of these sections based on feature flags.
 
-## Installation
+## File Paths
 
-This component is part of `@umituz/react-native-settings`.
+- **Component**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/screens/components/sections/IdentitySettingsSection/IdentitySettingsSection.tsx`
+- **About Domain**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domain/about/`
+- **Legal Domain**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domain/legal/`
 
-## Usage
+## Strategy
 
-### Basic Usage
+1. **Conditional Rendering**: Render AboutSection and LegalSection only when their respective feature flags are enabled
+2. **Domain Separation**: Delegate About section rendering to About domain components and Legal section to Legal domain components
+3. **Configuration Normalization**: Accept normalized configuration objects to ensure consistent data structure across features
+4. **Internationalization Support**: Use translation keys for all user-facing text to support multiple languages
+5. **Flexible Legal Documents**: Support both URL-based and inline content for legal documents
 
-```tsx
-import { IdentitySettingsSection } from '@umituz/react-native-settings';
+## Restrictions
 
-function MySettingsScreen() {
-  const normalizedConfig = {
-    about: { config: {} },
-    legal: { config: {} },
-  };
+- ❌ DO NOT hardcode legal document URLs or content within the component
+- ❌ DO NOT render sections that are disabled in feature flags
+- ❌ NEVER bypass the normalized configuration structure
+- ❌ AVOID adding non-identity related features to this section
+- ❌ DO NOT duplicate About or Legal domain logic within this component
+- ❌ NEVER assume all features are enabled; always check feature flags
+- ❌ AVOID mixing identity settings with other feature categories
 
-  const features = {
-    about: true,
-    legal: true,
-  };
+## Rules
 
-  return (
-    <IdentitySettingsSection
-      normalizedConfig={normalizedConfig}
-      features={features}
-    />
-  );
-}
-```
+- ✅ MUST receive both normalizedConfig and features as required props
+- ✅ ALWAYS delegate to AboutSection component for About feature rendering
+- ✅ ALWAYS delegate to LegalSection component for Legal feature rendering
+- ✅ MUST support internationalization for all text content
+- ✅ SHOULD maintain separation of concerns between About and Legal features
+- ✅ MUST handle cases where one or both features are disabled
+- ✅ ALWAYS use translation keys for consistent localization
+- ✅ MUST preserve the order: About section first, then Legal section
 
-## Props
+## AI Agent Guidelines
 
-### IdentitySettingsSectionProps
+When working with IdentitySettingsSection:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `normalizedConfig` | `NormalizedConfig` | **Required** | Normalized settings configuration |
-| `features` | `FeatureFlags` | **Required** | Feature visibility flags |
+1. **Adding Identity Features**: Only add features that relate to user identity (About, Legal, Account, Profile). Do not add non-identity features.
 
-### FeatureFlags
+2. **Configuration Structure**: Always use the normalized configuration format. Do not introduce new configuration shapes without updating the normalization logic.
 
-```typescript
-interface FeatureFlags {
-  about: boolean;  // Show about section
-  legal: boolean;  // Show legal section
-}
-```
+3. **Feature Flag Logic**: When adding new sub-features, implement corresponding feature flags to control visibility.
 
-## Component Structure
+4. **Domain Delegation**: Always delegate rendering to domain-specific components (AboutSection, LegalSection). Do not reimplement domain logic.
 
-```
-IdentitySettingsSection
-├── AboutSection      (if features.about)
-│   ├── App Information
-│   ├── Version
-│   ├── Developer
-│   └── Contact
-└── LegalSection      (if features.legal)
-    ├── Privacy Policy
-    ├── Terms of Service
-    └── EULA (if provided)
-```
+5. **Translation Keys**: When adding new text elements, always define translation keys in the i18n configuration files.
 
-## Examples
+6. **Ordering**: Maintain consistent ordering of sections. About should precede Legal for better user experience.
 
-### All Identity Features
+7. **Documentation**: Update the domain component README files (About, Legal) when making changes to their interfaces.
 
-```tsx
-function FullIdentitySettings() {
-  const normalizedConfig = {
-    about: {
-      config: {
-        appName: 'My App',
-        version: '1.0.0',
-        developer: 'My Company',
-      },
-    },
-    legal: {
-      config: {
-        privacyPolicyUrl: 'https://example.com/privacy',
-        termsOfServiceUrl: 'https://example.com/terms',
-      },
-    },
-  };
+8. **Testing**: Test both enabled and disabled states for each feature flag combination.
 
-  const features = {
-    about: true,
-    legal: true,
-  };
-
-  return (
-    <IdentitySettingsSection
-      normalizedConfig={normalizedConfig}
-      features={features}
-    />
-  );
-}
-```
-
-### About Only
-
-```tsx
-function AboutOnlySettings() {
-  const normalizedConfig = {
-    about: {
-      config: {
-        appName: 'My App',
-        version: '1.0.0',
-        showDeveloper: true,
-        showContact: true,
-      },
-    },
-  };
-
-  const features = {
-    about: true,
-    legal: false,
-  };
-
-  return (
-    <IdentitySettingsSection
-      normalizedConfig={normalizedConfig}
-      features={features}
-    />
-  );
-}
-```
-
-### Legal Only
-
-```tsx
-function LegalOnlySettings() {
-  const normalizedConfig = {
-    legal: {
-      config: {
-        showPrivacy: true,
-        showTerms: true,
-        showEula: false,
-      },
-    },
-  };
-
-  const features = {
-    about: false,
-    legal: true,
-  };
-
-  return (
-    <IdentitySettingsSection
-      normalizedConfig={normalizedConfig}
-      features={features}
-    />
-  );
-}
-```
-
-### With Custom Configuration
-
-```tsx
-function CustomIdentitySettings() {
-  const normalizedConfig = {
-    about: {
-      config: {
-        appName: 'Custom App',
-        version: '2.0.0',
-        developer: 'Custom Developer',
-        websiteUrl: 'https://custom.com',
-        supportEmail: 'support@custom.com',
-      },
-    },
-    legal: {
-      config: {
-        privacyPolicyContent: 'Our privacy policy...',
-        termsOfServiceContent: 'Our terms...',
-      },
-    },
-  };
-
-  return (
-    <IdentitySettingsSection
-      normalizedConfig={normalizedConfig}
-      features={{ about: true, legal: true }}
-    />
-  );
-}
-```
-
-## Sub-Components
-
-### AboutSection
-
-From About domain, displays app information.
-
-```tsx
-<AboutSection
-  config={{
-    appName: 'My App',
-    version: '1.0.0',
-    developer: 'My Company',
-    contactEmail: 'support@example.com',
-    websiteUrl: 'https://example.com',
-  }}
-  sectionTitle="ABOUT"
-/>
-```
-
-**AboutSection Props:**
-
-- `appName`: Application name
-- `version`: App version
-- `buildNumber`: Build number
-- `developer`: Developer/company name
-- `contactEmail`: Support email
-- `websiteUrl`: Website URL
-- `actions`: Press handlers for email/website
-
-### LegalSection
-
-From Legal domain, displays legal document links.
-
-```tsx
-<LegalSection
-  config={{
-    title: 'Legal',
-    description: 'Important information',
-    privacyPolicyUrl: 'https://example.com/privacy',
-    termsOfServiceUrl: 'https://example.com/terms',
-    eulaUrl: 'https://example.com/eula',
-  }}
-  sectionTitle="LEGAL"
-/>
-```
-
-**LegalSection Props:**
-
-- `privacyPolicyUrl`: Privacy policy URL or content
-- `termsOfServiceUrl`: Terms URL or content
-- `eulaUrl`: EULA URL or content (optional)
-- `onPrivacyPress`: Custom privacy handler
-- `onTermsPress`: Custom terms handler
-- `onEulaPress`: Custom EULA handler
-
-## Configuration
-
-### About Configuration
-
-```typescript
-interface AboutConfig {
-  appName?: string;
-  version?: string;
-  buildNumber?: string;
-  developer?: string;
-  contactEmail?: string;
-  websiteUrl?: string;
-  websiteDisplay?: string;
-  moreAppsUrl?: string;
-  actions?: {
-    onEmailPress?: () => void;
-    onWebsitePress?: () => void;
-    onMoreAppsPress?: () => void;
-  };
-}
-```
-
-### Legal Configuration
-
-```typescript
-interface LegalConfig {
-  privacyPolicyUrl?: string;
-  termsOfServiceUrl?: string;
-  eulaUrl?: string;
-  privacyPolicyContent?: string;
-  termsOfServiceContent?: string;
-  eulaContent?: string;
-  onPrivacyPress?: () => void;
-  onTermsPress?: () => void;
-  onEulaPress?: () => void;
-}
-```
-
-## Internationalization
-
-Translation keys used:
-
-```typescript
-// About
-t("settings.about.title")
-t("settings.about.description")
-
-// Legal
-t("settings.legal.title")
-t("settings.legal.description")
-```
-
-## Best Practices
-
-1. **Separate Concerns**: Keep identity settings separate from other features
-2. **Consistent Order**: About first, then Legal
-3. **Navigation**: Provide proper navigation handlers
-4. **URL Handling**: Handle both URLs and inline content
-5. **Translation**: Use translation keys for all text
-6. **Contact Info**: Always include contact information in About
-7. **Legal Docs**: Include all required legal documents
-
-## Related
+## Related Components
 
 - **About Domain**: App information features
 - **Legal Domain**: Legal document features
 - **Feature Settings**: Other setting sections
-
-## License
-
-MIT