@umituz/react-native-settings 5.4.9 → 5.4.11

package/src/infrastructure/services/SettingsService.ts

@@ -1,37 +1,41 @@
 /**
  * Settings Service
  *
- * Orchestrates settings operations using SettingsRepository
+ * Orchestrates settings operations using SettingsRepository.
+ * Refactored to extend BaseService for consistent error handling.
  */
 
 import { SettingsRepository } from '../repositories/SettingsRepository';
+import { BaseService } from '../../core/base/BaseService';
 import type { UserSettings, SettingsResult } from '../../application/ports/ISettingsRepository';
 
-export class SettingsService {
-    private repository: SettingsRepository;
+export class SettingsService extends BaseService {
+  protected serviceName = 'SettingsService';
+  private repository: SettingsRepository;
 
-    constructor() {
-        this.repository = new SettingsRepository();
-    }
+  constructor() {
+    super();
+    this.repository = new SettingsRepository();
+  }
 
-    async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
-        return this.repository.getSettings(userId);
-    }
+  async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
+    return await this.repository.getSettings(userId);
+  }
 
-    async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
-        return this.repository.saveSettings(settings);
-    }
+  async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
+    return await this.repository.saveSettings(settings);
+  }
 
-    async resetSettings(userId: string): Promise<SettingsResult<void>> {
-        return this.repository.deleteSettings(userId);
-    }
+  async resetSettings(userId: string): Promise<SettingsResult<void>> {
+    return await this.repository.deleteSettings(userId);
+  }
 }
 
 let settingsServiceInstance: SettingsService | null = null;
 
 export function getSettingsService(): SettingsService {
-    if (!settingsServiceInstance) {
-        settingsServiceInstance = new SettingsService();
-    }
-    return settingsServiceInstance;
+  if (!settingsServiceInstance) {
+    settingsServiceInstance = new SettingsService();
+  }
+  return settingsServiceInstance;
 }

package/src/presentation/components/GenericModal.tsx

@@ -0,0 +1,208 @@
+/**
+ * GenericModal Component
+ *
+ * Universal modal component that works with ModalConfig.
+ * Replaces all custom modal implementations.
+ *
+ * @example
+ * ```ts
+ * const modal = useModalState();
+ *
+ * return (
+ *   <>
+ *     <Button onPress={() => modal.show(ModalPresets.confirm(...))} />
+ *     <GenericModal state={modal} />
+ *   </>
+ * );
+ * ```
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BaseModal } from '@umituz/react-native-design-system/molecules';
+import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import { useResponsive } from '@umituz/react-native-design-system/responsive';
+import type { ModalState } from '../../core/patterns/Modal/ModalConfig';
+
+export interface GenericModalProps {
+  /**
+   * Modal state from useModalState hook
+   */
+  state: ModalState;
+
+  /**
+   * Custom container style
+   */
+  containerStyle?: object;
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+export const GenericModal: React.FC<GenericModalProps> = ({
+  state,
+  containerStyle,
+  testID = 'generic-modal',
+}) => {
+  const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
+  const { visible, config } = state;
+
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  if (!config) {
+    return null;
+  }
+
+  const {
+    title,
+    subtitle,
+    message,
+    icon,
+    iconColor,
+    header,
+    body,
+    footer,
+    actions = [],
+    dismissible = true,
+    maxWidth,
+  } = config;
+
+  const handleDismiss = () => {
+    if (dismissible) {
+      state.hide();
+    }
+  };
+
+  const modalWidth = maxWidth ?? responsive.maxContentWidth * 0.9;
+
+  return (
+    <BaseModal
+      visible={visible}
+      onClose={handleDismiss}
+    >
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderRadius: tokens.borders.radius.xl,
+            padding: tokens.spacing.lg,
+            maxWidth: modalWidth,
+            width: '90%',
+          },
+          containerStyle,
+        ]}
+        testID={testID}
+      >
+        {/* Custom Header */}
+        {header ? (
+          header
+        ) : (
+          <>
+            {/* Icon */}
+            {icon && (
+              <View style={styles.iconContainer}>
+                <AtomicIcon
+                  name={icon}
+                  size="xl"
+                  color={iconColor as any || 'primary'}
+                />
+              </View>
+            )}
+
+            {/* Title and Subtitle */}
+            {title && (
+              <AtomicText
+                type="headlineMedium"
+                color="onSurface"
+                style={[styles.title, { marginBottom: subtitle ? tokens.spacing.xs : tokens.spacing.md }]}
+              >
+                {title}
+              </AtomicText>
+            )}
+
+            {subtitle && (
+              <AtomicText
+                type="bodyMedium"
+                color="onSurfaceVariant"
+                style={[styles.subtitle, { marginBottom: tokens.spacing.md }]}
+              >
+                {subtitle}
+              </AtomicText>
+            )}
+          </>
+        )}
+
+        {/* Custom Body or Message */}
+        {body ? (
+          body
+        ) : message && (
+          <AtomicText
+            type="bodyMedium"
+            color="onSurfaceVariant"
+            style={[styles.message, { marginBottom: actions.length > 0 ? tokens.spacing.lg : 0 }]}
+          >
+            {message}
+          </AtomicText>
+        )}
+
+        {/* Custom Footer or Actions */}
+        {footer ? (
+          footer
+        ) : actions.length > 0 && (
+          <View style={[styles.buttonContainer, { gap: tokens.spacing.sm }]}>
+            {actions.map((action, index) => (
+              <AtomicButton
+                key={index}
+                variant={action.variant || 'primary'}
+                onPress={async () => {
+                  await action.onPress();
+                  if (dismissible) {
+                    state.hide();
+                  }
+                }}
+                disabled={action.disabled}
+                loading={action.loading}
+                style={styles.button}
+                testID={action.testID}
+              >
+                {action.label}
+              </AtomicButton>
+            ))}
+          </View>
+        )}
+      </View>
+    </BaseModal>
+  );
+};
+
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      alignItems: 'center',
+    },
+    iconContainer: {
+      marginBottom: 16,
+    },
+    title: {
+      textAlign: 'center',
+    },
+    subtitle: {
+      textAlign: 'center',
+    },
+    message: {
+      textAlign: 'center',
+      lineHeight: 24,
+    },
+    buttonContainer: {
+      width: '100%',
+      marginTop: 16,
+    },
+    button: {
+      width: '100%',
+    },
+  });

package/src/presentation/components/GenericScreen.tsx

@@ -0,0 +1,273 @@
+/**
+ * GenericScreen Component
+ *
+ * Universal screen component that works with ScreenConfig.
+ * Handles loading, error, and empty states automatically.
+ *
+ * @example
+ * ```ts
+ * const screenData = useScreenData({ fetch: async () => await api.getData() });
+ *
+ * return (
+ *   <GenericScreen
+ *     data={screenData}
+ *     config={ScreenPresets.default}
+ *   >
+ *     <MyContent data={screenData.data} />
+ *   </GenericScreen>
+ * );
+ * ```
+ */
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
+import {
+  NavigationHeader,
+  useAppNavigation,
+} from '@umituz/react-native-design-system/molecules';
+import {
+  AtomicText,
+  AtomicButton,
+  AtomicSpinner,
+  AtomicIcon,
+} from '@umituz/react-native-design-system/atoms';
+import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import type {
+  ScreenConfig,
+  ScreenData,
+} from '../../core/patterns/Screen/ScreenConfig';
+
+export interface GenericScreenProps<T> {
+  /**
+   * Screen data from useScreenData hook
+   */
+  data: ScreenData<T>;
+
+  /**
+   * Screen configuration
+   */
+  config?: ScreenConfig;
+
+  /**
+   * Content component (renders when data is loaded)
+   */
+  children: React.ReactNode | ((data: T) => React.ReactNode);
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+export function GenericScreen<T>({
+  data,
+  config = {},
+  children,
+  testID = 'generic-screen',
+}: GenericScreenProps<T>) {
+  const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  const {
+    header,
+    loading = {},
+    error = {},
+    empty,
+    layout = {},
+  } = config;
+
+  // Header configuration
+  const showBackButton = header?.showBackButton !== false;
+  const onBackPress = header?.onBackPress || (() => navigation.goBack());
+
+  const navigationHeader = header?.custom ? (
+    header.custom
+  ) : header?.title || showBackButton ? (
+    <NavigationHeader
+      title={header?.title || ''}
+      onBackPress={showBackButton ? onBackPress : undefined}
+    />
+  ) : undefined;
+
+  // Loading state
+  if (data.loading) {
+    return (
+      <ScreenLayout
+        edges={layout.edges || ['top', 'bottom', 'left', 'right']}
+        header={navigationHeader}
+        scrollable={layout.scrollable}
+        keyboardAvoiding={layout.keyboardAvoiding}
+        hideScrollIndicator={layout.hideScrollIndicator}
+        contentContainerStyle={layout.contentContainerStyle}
+        testID={testID}
+      >
+        {loading.custom ? (
+          loading.custom
+        ) : (
+          <View style={styles.centerContainer}>
+            <AtomicSpinner
+              size={loading.size || 'lg'}
+              fullContainer={loading.fullContainer !== false}
+            />
+            {loading.message && (
+              <AtomicText
+                type="bodyMedium"
+                color="onSurfaceVariant"
+                style={styles.stateMessage}
+              >
+                {loading.message}
+              </AtomicText>
+            )}
+          </View>
+        )}
+      </ScreenLayout>
+    );
+  }
+
+  // Error state
+  if (data.error) {
+    return (
+      <ScreenLayout
+        edges={layout.edges || ['top', 'bottom', 'left', 'right']}
+        header={navigationHeader}
+        scrollable={layout.scrollable}
+        keyboardAvoiding={layout.keyboardAvoiding}
+        hideScrollIndicator={layout.hideScrollIndicator}
+        contentContainerStyle={layout.contentContainerStyle}
+        testID={testID}
+      >
+        {error.custom ? (
+          error.custom
+        ) : (
+          <View style={styles.centerContainer}>
+            <AtomicIcon
+              name={error.icon || 'error'}
+              size="xl"
+              color="error"
+              style={styles.stateIcon}
+            />
+            <AtomicText
+              type="headlineMedium"
+              color="onSurface"
+              style={styles.stateTitle}
+            >
+              {error.prefix || 'Error'}
+            </AtomicText>
+            <AtomicText
+              type="bodyMedium"
+              color="onSurfaceVariant"
+              style={styles.stateMessage}
+            >
+              {error.message || data.error}
+            </AtomicText>
+            {error.showRetry && (
+              <AtomicButton
+                variant="outline"
+                onPress={error.onRetry || data.refresh}
+                style={styles.retryButton}
+              >
+                {error.retryText || 'Retry'}
+              </AtomicButton>
+            )}
+          </View>
+        )}
+      </ScreenLayout>
+    );
+  }
+
+  // Empty state
+  if (!data.data && empty) {
+    return (
+      <ScreenLayout
+        edges={layout.edges || ['top', 'bottom', 'left', 'right']}
+        header={navigationHeader}
+        scrollable={layout.scrollable}
+        keyboardAvoiding={layout.keyboardAvoiding}
+        hideScrollIndicator={layout.hideScrollIndicator}
+        contentContainerStyle={layout.contentContainerStyle}
+        testID={testID}
+      >
+        {empty.custom ? (
+          empty.custom
+        ) : (
+          <View style={styles.centerContainer}>
+            {empty.icon && (
+              <AtomicIcon
+                name={empty.icon}
+                size="xl"
+                color="onSurfaceVariant"
+                style={styles.stateIcon}
+              />
+            )}
+            <AtomicText
+              type="headlineMedium"
+              color="onSurface"
+              style={styles.stateTitle}
+            >
+              {empty.message || 'No Data'}
+            </AtomicText>
+            {empty.description && (
+              <AtomicText
+                type="bodyMedium"
+                color="onSurfaceVariant"
+                style={styles.stateMessage}
+              >
+                {empty.description}
+              </AtomicText>
+            )}
+            {empty.actionLabel && empty.onAction && (
+              <AtomicButton
+                variant="outline"
+                onPress={empty.onAction}
+                style={styles.retryButton}
+              >
+                {empty.actionLabel}
+              </AtomicButton>
+            )}
+          </View>
+        )}
+      </ScreenLayout>
+    );
+  }
+
+  // Content
+  return (
+    <ScreenLayout
+      edges={layout.edges || ['top', 'bottom', 'left', 'right']}
+      header={navigationHeader}
+      scrollable={layout.scrollable}
+      keyboardAvoiding={layout.keyboardAvoiding}
+      hideScrollIndicator={layout.hideScrollIndicator}
+      contentContainerStyle={layout.contentContainerStyle}
+      testID={testID}
+    >
+      {typeof children === 'function' ? (children as (data: T) => React.ReactNode)(data.data!) : children}
+    </ScreenLayout>
+  );
+}
+
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    centerContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: 32,
+    },
+    stateIcon: {
+      marginBottom: 16,
+    },
+    stateTitle: {
+      marginBottom: 8,
+      textAlign: 'center',
+    },
+    stateMessage: {
+      textAlign: 'center',
+      marginBottom: 24,
+    },
+    retryButton: {
+      minWidth: 120,
+    },
+  });

package/src/presentation/components/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Presentation Components - Public API
+ *
+ * Shared UI components for the entire application.
+ *
+ * @example
+ * ```ts
+ * import { GenericModal, GenericScreen } from '@/presentation/components';
+ *
+ * const modal = useModalState();
+ * return <GenericModal state={modal} />;
+ * ```
+ */
+
+// =============================================================================
+// MODAL COMPONENTS
+// =============================================================================
+
+export { GenericModal } from './GenericModal';
+export type { GenericModalProps } from './GenericModal';
+
+// =============================================================================
+// SCREEN COMPONENTS
+// =============================================================================
+
+export { GenericScreen } from './GenericScreen';
+export type { GenericScreenProps } from './GenericScreen';

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -3,6 +3,9 @@ import type { StackScreen } from "@umituz/react-native-design-system/molecules";
 import { LanguageSelectionScreen } from "../../../domains/localization";
 import { NotificationSettingsScreen } from "../../../domains/notifications";
 import { SettingsScreen } from "../../screens/SettingsScreen";
+import { DisclaimerScreen } from "../../../domains/disclaimer/presentation/screens/DisclaimerScreen";
+import { FeedbackScreen } from "../../../domains/feedback/presentation/screens/FeedbackScreen";
+import { RatingPromptScreen } from "../../../domains/rating/presentation/screens/RatingPromptScreen";
 
 // AccountScreen is an optional peer — lazy require so the package works without @umituz/react-native-auth
 // Returns null if @umituz/react-native-auth is not installed
@@ -176,6 +179,25 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       }
     });
 
+    // New screens to replace modals
+    const disclaimerScreen = {
+      name: "Disclaimer" as const,
+      component: DisclaimerScreen,
+      options: { headerShown: false },
+    };
+
+    const feedbackScreen = {
+      name: "Feedback" as const,
+      component: FeedbackScreen,
+      options: { headerShown: false },
+    };
+
+    const ratingPromptScreen = {
+      name: "RatingPrompt" as const,
+      component: RatingPromptScreen,
+      options: { headerShown: false },
+    };
+
     return combineScreens(
       baseScreens,
       faqScreen,
@@ -184,7 +206,10 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       languageScreen,
       accountScreen,
       videoTutorialScreen,
-      featureRequestScreen
+      featureRequestScreen,
+      disclaimerScreen,
+      feedbackScreen,
+      ratingPromptScreen
     );
   }, [
     translations,

package/src/presentation/navigation/types.ts

@@ -6,6 +6,9 @@ import type React from 'react';
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
 import type { DevSettingsProps } from "../../domains/dev";
 import type { FAQCategory } from "../../domains/faqs";
+import type { DisclaimerScreenParams } from "../../domains/disclaimer/presentation/screens/DisclaimerScreen";
+import type { FeedbackScreenParams } from "../../domains/feedback/presentation/screens/FeedbackScreen";
+import type { RatingPromptScreenParams } from "../../domains/rating/presentation/screens/RatingPromptScreen";
 
 /**
  * App Info passed from main app (APP_INFO constant)
@@ -48,6 +51,9 @@ export type SettingsStackParamList = {
   Account: undefined;
   VideoTutorial: undefined;
   FeatureRequest: undefined;
+  Disclaimer: DisclaimerScreenParams;
+  Feedback: FeedbackScreenParams;
+  RatingPrompt: RatingPromptScreenParams;
   PasswordPrompt: {
     onComplete: (password: string | null) => void;
     title?: string;