@umituz/react-native-settings 4.20.58 → 4.20.59

package/src/domains/about/README.md

@@ -1,445 +1,90 @@
 # About Domain
 
-The About domain provides components and utilities for displaying app information, user details, version info, and contact information in your React Native app.
-
-## Features
-
-- **App Information Display**: Show app name, version, and build number
-- **Contact Information**: Display developer, email, and website details
-- **Customizable Actions**: Handle taps on email, website, and other links
-- **Localized Texts**: Support for custom labels and messages
-- **Loading & Error States**: Built-in loading and error handling
-- **Fully Typed**: Complete TypeScript support
-
-## Installation
-
-This domain is part of `@umituz/react-native-settings`. Install the package to use it:
-
-```bash
-npm install @umituz/react-native-settings
-```
-
-## Components
-
-### AboutScreen
-
-The main screen component for displaying app information.
-
-```tsx
-import { AboutScreen } from '@umituz/react-native-settings';
-
-function MyAboutScreen() {
-  const config = {
-    appName: 'My App',
-    version: '1.0.0',
-    buildNumber: '100',
-    developer: 'Acme Inc',
-    contactEmail: 'support@acme.com',
-    websiteUrl: 'https://acme.com',
-    actions: {
-      onEmailPress: () => Linking.openURL('mailto:support@acme.com'),
-      onWebsitePress: () => Linking.openURL('https://acme.com'),
-    },
-    texts: {
-      versionPrefix: 'Version',
-      contact: 'Contact Us',
-      developer: 'Developer',
-      email: 'Email',
-      website: 'Website',
-    },
-  };
-
-  return <AboutScreen config={config} />;
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `config` | `AboutConfig` | **Required** | Configuration object with app info |
-| `containerStyle` | `ViewStyle` | `undefined` | Custom container style |
-| `headerStyle` | `ViewStyle` | `undefined` | Custom header style |
-| `titleStyle` | `TextStyle` | `undefined` | Custom title style |
-| `versionStyle` | `TextStyle` | `undefined` | Custom version style |
-| `showHeader` | `boolean` | `true` | Show app header with name and version |
-| `headerComponent` | `ReactNode` | `undefined` | Custom header component |
-| `footerComponent` | `ReactNode` | `undefined` | Custom footer component |
-| `testID` | `string` | `undefined` | Test ID for E2E testing |
-
-### AboutContent
-
-Displays the list of about items organized in sections.
-
-```tsx
-import { AboutContent } from '@umituz/react-native-settings';
-
-function MyAboutContent() {
-  const appInfo = {
-    appName: 'My App',
-    version: '1.0.0',
-    developer: 'Acme Inc',
-    contactEmail: 'support@acme.com',
-  };
-
-  const config = {
-    actions: {
-      onEmailPress: () => console.log('Email pressed'),
-    },
-  };
-
-  return <AboutContent appInfo={appInfo} config={config} />;
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `appInfo` | `AppInfo` | **Required** | App information to display |
-| `config` | `AboutConfig` | **Required** | Configuration for actions |
-
-### AboutSection
-
-Renders a section of related about items.
-
-```tsx
-import { AboutSection } from '@umituz/react-native-settings';
-
-function ContactSection() {
-  const items = [
-    {
-      title: 'Developer',
-      value: 'Acme Inc',
-    },
-    {
-      title: 'Email',
-      value: 'support@acme.com',
-      onPress: () => Linking.openURL('mailto:support@acme.com'),
-    },
-  ];
-
-  return <AboutSection title="Contact" items={items} />;
-}
-```
-
-### AboutSettingItem
-
-Individual setting item with title, value, and optional press handler.
-
-```tsx
-import { AboutSettingItem } from '@umituz/react-native-settings';
-
-function EmailItem() {
-  return (
-    <AboutSettingItem
-      title="Email"
-      value="support@acme.com"
-      onPress={() => Linking.openURL('mailto:support@acme.com')}
-      showChevron={true}
-    />
-  );
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | **Required** | Item title |
-| `value` | `string` | `undefined` | Item value to display |
-| `onPress` | `() => void` | `undefined` | Press handler |
-| `showChevron` | `boolean` | `false` | Show navigation chevron |
-| `testID` | `string` | `undefined` | Test ID for testing |
-
-### AboutHeader
-
-Header component displaying app name and version.
-
-```tsx
-import { AboutHeader } from '@umituz/react-native-settings';
-
-function MyAboutHeader() {
-  const appInfo = {
-    appName: 'My App',
-    version: '1.0.0',
-  };
-
-  return <AboutHeader appInfo={appInfo} />;
-}
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `appInfo` | `AppInfo` | **Required** | App information |
-| `containerStyle` | `ViewStyle` | `undefined` | Custom container style |
-| `titleStyle` | `TextStyle` | `undefined` | Custom title style |
-| `versionStyle` | `TextStyle` | `undefined` | Custom version style |
-| `versionPrefix` | `string` | `'Version'` | Version label prefix |
-
-## Hooks
-
-### useAboutInfo
-
-Hook for managing About information with reactive state management.
-
-```tsx
-import { useAboutInfo } from '@umituz/react-native-settings';
-
-function MyAboutComponent() {
-  const {
-    appInfo,
-    loading,
-    error,
-    initialize,
-    update,
-    updateAppInfo,
-    refresh,
-    reset,
-  } = useAboutInfo({
-    autoInit: true,
-    initialConfig: {
-      appName: 'My App',
-      version: '1.0.0',
-    },
-  });
-
-  if (loading) return <Text>Loading...</Text>;
-  if (error) return <Text>Error: {error}</Text>;
-
-  return (
-    <View>
-      <Text>{appInfo?.appName}</Text>
-      <Text>{appInfo?.version}</Text>
-    </View>
-  );
-}
-```
-
-#### Return Value
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `appInfo` | `AppInfo \| null` | Current app information |
-| `loading` | `boolean` | Loading state |
-| `error` | `string \| null` | Error message if any |
-| `initialize` | `(config) => Promise<void>` | Initialize with config |
-| `update` | `(config) => Promise<void>` | Update with new config |
-| `updateAppInfo` | `(updates) => Promise<void>` | Partial update |
-| `refresh` | `() => Promise<void>` | Refresh from storage |
-| `reset` | `() => void` | Reset state |
-
-## Types
-
-### AppInfo
-
-```typescript
-interface AppInfo {
-  appName: string;
-  version: string;
-  buildNumber?: string;
-  developer?: string;
-  contactEmail?: string;
-  websiteUrl?: string;
-  websiteDisplay?: string;
-  moreAppsUrl?: string;
-}
-```
-
-### AboutConfig
-
-```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;
-  };
-  texts?: {
-    versionPrefix?: string;
-    contact?: string;
-    developer?: string;
-    email?: string;
-    website?: string;
-    more?: string;
-    moreApps?: string;
-    loading?: string;
-    errorPrefix?: string;
-    noInfo?: string;
-  };
-}
-```
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { AboutScreen } from '@umituz/react-native-settings';
-
-export default function App() {
-  return (
-    <View style={{ flex: 1 }}>
-      <AboutScreen
-        config={{
-          appName: 'My Awesome App',
-          version: '2.1.0',
-          buildNumber: '210',
-          developer: 'My Company',
-          contactEmail: 'hello@mycompany.com',
-          websiteUrl: 'https://mycompany.com',
-          actions: {
-            onEmailPress: () => {
-              // Handle email press
-              Linking.openURL('mailto:hello@mycompany.com');
-            },
-            onWebsitePress: () => {
-              // Handle website press
-              Linking.openURL('https://mycompany.com');
-            },
-          },
-        }}
-      />
-    </View>
-  );
-}
-```
-
-### Custom Styling
-
-```tsx
-import { AboutScreen } from '@umituz/react-native-settings';
-
-function StyledAboutScreen() {
-  return (
-    <AboutScreen
-      config={{ /* ... */ }}
-      containerStyle={{ backgroundColor: '#f5f5f5' }}
-      headerStyle={{ paddingVertical: 24 }}
-      titleStyle={{ fontSize: 28, fontWeight: 'bold' }}
-      versionStyle={{ fontSize: 16, color: '#666' }}
-    />
-  );
-}
-```
-
-### Custom Header and Footer
-
-```tsx
-import { AboutScreen } from '@umituz/react-native-settings';
-
-function CustomAboutScreen() {
-  return (
-    <AboutScreen
-      config={{ /* ... */ }}
-      showHeader={false}
-      headerComponent={
-        <View style={{ padding: 20, alignItems: 'center' }}>
-          <Image source={logo} style={{ width: 80, height: 80 }} />
-          <Text>My Custom Header</Text>
-        </View>
-      }
-      footerComponent={
-        <View style={{ padding: 20, alignItems: 'center' }}>
-          <Text>Made with ❤️</Text>
-        </View>
-      }
-    />
-  );
-}
-```
-
-### Using the Hook
-
-```tsx
-import { useAboutInfo } from '@umituz/react-native-settings';
-
-function AboutManager() {
-  const { appInfo, updateAppInfo } = useAboutInfo({
-    autoInit: true,
-    initialConfig: {
-      appName: 'My App',
-      version: '1.0.0',
-    },
-  });
-
-  const handleUpdate = async () => {
-    await updateAppInfo({
-      version: '1.0.1',
-      developer: 'New Developer',
-    });
-  };
-
-  return (
-    <View>
-      <Text>App: {appInfo?.appName}</Text>
-      <Text>Version: {appInfo?.version}</Text>
-      <Button title="Update" onPress={handleUpdate} />
-    </View>
-  );
-}
-```
-
-## Architecture
-
-The About domain follows a clean architecture pattern:
-
-```
-src/domains/about/
-├── domain/              # Domain entities and interfaces
-│   ├── entities/       # AppInfo entity
-│   └── repositories/   # Repository interfaces
-├── infrastructure/      # Implementation details
-│   └── repositories/   # AboutRepository implementation
-├── presentation/        # UI components
-│   ├── screens/        # AboutScreen
-│   ├── components/     # AboutContent, AboutHeader, etc.
-│   └── hooks/          # useAboutInfo hook
-└── utils/              # Utility functions and factories
-```
-
-## Best Practices
-
-1. **Always provide a config**: The `AboutConfig` is required for proper initialization
-2. **Handle actions**: Implement press handlers for email, website, and other interactive elements
-3. **Provide localized texts**: Use the `texts` property to support multiple languages
-4. **Use the hook for dynamic updates**: The `useAboutInfo` hook is ideal for scenarios where app info changes
-5. **Test with testIDs**: All components support `testID` prop for E2E testing
-
-## Testing
-
-```tsx
-import { render } from '@testing-library/react-native';
-import { AboutScreen } from '@umituz/react-native-settings';
-
-describe('AboutScreen', () => {
-  it('displays app name and version', () => {
-    const { getByText } = render(
-      <AboutScreen
-        config={{
-          appName: 'Test App',
-          version: '1.0.0',
-        }}
-      />
-    );
-
-    expect(getByText('Test App')).toBeTruthy();
-    expect(getByText('Version 1.0.0')).toBeTruthy();
-  });
-});
-```
+## Purpose
+
+Provides components and utilities for displaying app information, user details, version info, and contact information in your React Native app.
+
+## File Paths
+
+**Components:**
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/screens/AboutScreen.tsx`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/components/AboutContent.tsx`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/components/AboutHeader.tsx`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/components/AboutSection.tsx`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/components/AboutSettingItem.tsx`
+
+**Hooks:**
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/presentation/hooks/useAboutInfo.ts`
+
+**Domain:**
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/domain/entities/AppInfo.ts`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/domain/repositories/IAboutRepository.ts`
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/infrastructure/repositories/AboutRepository.ts`
+
+**Utils:**
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/utils/aboutFactory.ts`
+
+**Index:**
+- `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/about/index.ts`
+
+## Strategy
+
+1. **Centralized Information Management**: Use `useAboutInfo` hook to manage app information state consistently across the app
+2. **Modular Components**: Compose About screens using individual components (AboutHeader, AboutSection, AboutSettingItem) for flexibility
+3. **Repository Pattern**: Abstract data access through IAboutRepository interface for testability and future extensibility
+4. **Factory Pattern**: Use `aboutFactory` to create and configure About entities with validation
+5. **Localization Support**: Configure texts for internationalization through the `texts` property in AboutConfig
+
+## Restrictions (Forbidden)
+
+### DO NOT
+- ❌ DO NOT hardcode app information directly in components - always use the repository and hooks
+- ❌ DO NOT bypass the repository pattern when accessing About data
+- ❌ DO NOT modify AppInfo entities directly without using the provided update methods
+- ❌ DO NOT use AboutScreen components without providing proper configuration
+
+### NEVER
+- ❌ NEVER use About components without providing required configuration (config prop)
+- ❌ NEVER expose sensitive information (API keys, secrets) in app information
+- ❌ NEVER skip validation when updating app information through the repository
+- ❌ NEVER use AboutScreen in production without proper error handling
+
+### AVOID
+- ❌ AVOID creating custom About components when existing components can be configured
+- ❌ AVOID mixing app information logic with UI components directly
+- ❌ AVOID storing large data objects (images, binary data) in AppInfo
+- ❌ AVOID using AboutScreen without handling loading and error states
+
+## Rules
+
+### ALWAYS
+- ✅ ALWAYS provide a valid AboutConfig when using AboutScreen or AboutContent
+- ✅ ALWAYS use the `useAboutInfo` hook for dynamic About information management
+- ✅ ALWAYS handle press actions (email, website) with proper URL validation
+- ✅ ALWAYS include testID props for E2E testing on interactive components
+- ✅ ALWAYS use the repository pattern for data access instead of direct storage access
+
+### MUST
+- ✅ MUST provide action handlers for interactive elements (email, website, more apps)
+- ✅ MUST handle loading and error states when using useAboutInfo hook
+- ✅ MUST validate URLs before opening them in Linking API
+- ✅ MUST provide localized texts for multi-language support
+- ✅ MUST use TypeScript types from the domain (AppInfo, AboutConfig)
+
+### SHOULD
+- ✅ SHOULD provide custom header and footer components for branded experiences
+- ✅ SHOULD implement proper error handling for URL opening failures
+- ✅ SHOULD use semantic versioning for version display
+- ✅ SHOULD include accessibility labels for all interactive elements
+- ✅ SHOULD provide meaningful descriptions for contact information
+
+## AI Agent Guidelines
+
+1. **Component Selection**: Always recommend AboutScreen for full About screens, AboutContent for sections within other screens, and AboutSettingItem for individual settings
+2. **Data Management**: Always use useAboutInfo hook for state management, never manage state locally
+3. **Configuration**: Always use AboutConfig interface for type-safe configuration - never use partial configs
+4. **File Location**: When updating About logic, modify files in `/src/domains/about/` directory following the existing architecture
+5. **Testing**: Always include testID props and ensure all interactive elements are testable
 
 ## Related