@umituz/react-native-settings 5.4.8 → 5.4.10

package/src/presentation/components/GenericScreen.tsx

@@ -0,0 +1,278 @@
+/**
+ * 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, TouchableOpacity } 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}
+      actions={header?.actions?.map((action) => ({
+        icon: action.icon,
+        onPress: action.onPress,
+        testID: action.testID,
+      }))}
+    />
+  ) : 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/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -1,103 +0,0 @@
-/**
- * Disclaimer Modal Component
- * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
- */
-
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system/atoms';
-import { BaseModal } from '@umituz/react-native-design-system/molecules';
-import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
-
-export interface DisclaimerModalProps {
-  visible: boolean;
-  title: string;
-  content: string;
-  onClose: () => void;
-}
-
-export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
-  visible,
-  title,
-  content,
-  onClose,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={styles.modalContentWrapper}>
-        {/* Modal Header */}
-        <View
-          style={[
-            styles.modalHeader,
-            { borderBottomColor: tokens.colors.border },
-          ]}
-        >
-          <AtomicText type="headlineMedium" color="primary">
-            {title}
-          </AtomicText>
-          <TouchableOpacity
-            onPress={onClose}
-            testID="close-disclaimer-modal"
-          >
-            <AtomicIcon name="close" color="primary" size="md" />
-          </TouchableOpacity>
-        </View>
-
-        {/* Scrollable Content */}
-        <ScrollView
-          style={styles.modalContent}
-          contentContainerStyle={styles.modalContentContainer}
-        >
-          <AtomicText
-            type="bodyMedium"
-            color="textPrimary"
-            style={styles.modalText}
-          >
-            {content}
-          </AtomicText>
-        </ScrollView>
-      </View>
-    </BaseModal>
-  );
-};
-
-
-const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    modalContainer: {
-      flex: 1,
-    },
-    modalContentWrapper: {
-      flex: 1,
-    },
-    modalHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 20,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-    },
-
-    modalContent: {
-      flex: 1,
-    },
-
-    modalContentContainer: {
-      padding: 20,
-    },
-
-    modalText: {
-      lineHeight: 24,
-      fontSize: 15, // or tokens.typography.bodyMedium.responsiveFontSize
-    },
-  });

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -1,99 +0,0 @@
-/**
- * Feedback Modal Component
- * Modal wrapper for providing feedback
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
-import { BaseModal } from "@umituz/react-native-design-system/molecules";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { FeedbackForm } from "./FeedbackForm";
-import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
-import type { FeedbackFormProps } from "./FeedbackFormProps";
-
-export interface FeedbackModalProps {
-    visible: boolean;
-    onClose: () => void;
-    onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
-    initialType?: FeedbackType;
-    isSubmitting?: boolean;
-    title?: string;
-    subtitle?: string;
-    texts: FeedbackFormProps['texts'];
-}
-
-export const FeedbackModal: React.FC<FeedbackModalProps> = ({
-    visible,
-    onClose,
-    onSubmit,
-    initialType,
-    isSubmitting,
-    title,
-    subtitle,
-    texts,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-
-    const header = (
-        <View style={styles.header}>
-            <View style={styles.headerText}>
-                {title && <AtomicText style={{ fontSize: 20, fontWeight: '600' }}>{title}</AtomicText>}
-                {subtitle && <AtomicText style={{ fontSize: 14, marginTop: 4 }}>{subtitle}</AtomicText>}
-            </View>
-            <TouchableOpacity
-                onPress={onClose}
-                style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
-            >
-                <AtomicIcon name="close" size="sm" color="onSurface" />
-            </TouchableOpacity>
-        </View>
-    );
-
-    return (
-        <BaseModal visible={visible} onClose={onClose}>
-            <ScreenLayout
-                header={header}
-                scrollable={true}
-                edges={[]}
-                keyboardAvoiding={true}
-                contentContainerStyle={styles.content}
-                hideScrollIndicator={false}
-            >
-                <FeedbackForm
-                    onSubmit={onSubmit}
-                    initialType={initialType}
-                    isSubmitting={isSubmitting}
-                    texts={texts}
-                />
-            </ScreenLayout>
-        </BaseModal>
-    );
-};
-
-
-const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    header: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: 16,
-        borderBottomWidth: 1,
-    },
-    headerText: {
-        flex: 1,
-    },
-    closeButton: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    content: {
-        padding: 20,
-    },
-});

package/src/domains/rating/presentation/components/RatingPromptModal.tsx

@@ -1,152 +0,0 @@
-/**
- * Rating Prompt Modal
- * 2-step rating prompt: Custom modal → Native review prompt
- */
-
-import React from "react";
-import { Modal, View, StyleSheet } from "react-native";
-import { AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useResponsive } from "@umituz/react-native-design-system/responsive";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import type { RatingTranslations } from "../../domain/entities/RatingConfig";
-
-export interface RatingPromptModalProps {
-  visible: boolean;
-  onPositive: () => void;
-  onNegative: () => void;
-  onLater: () => void;
-  onDismiss: () => void;
-  translations?: RatingTranslations;
-  appName?: string;
-}
-
-export const RatingPromptModal: React.FC<RatingPromptModalProps> = ({
-  visible,
-  onPositive,
-  onNegative,
-  onLater,
-  onDismiss,
-  translations,
-  appName = "this app",
-}) => {
-  const tokens = useAppDesignTokens();
-  const responsive = useResponsive();
-
-  const defaultTranslations: RatingTranslations = {
-    title: translations?.title ?? "Enjoying the app?",
-    message:
-      translations?.message ??
-      `If you love using ${appName}, would you mind taking a moment to rate it?`,
-    positiveButton: translations?.positiveButton ?? "Yes, I love it!",
-    negativeButton: translations?.negativeButton ?? "Not really",
-    laterButton: translations?.laterButton ?? "Maybe later",
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-      onRequestClose={onDismiss}
-      statusBarTranslucent
-    >
-      <View
-        style={[
-          styles.overlay,
-          { backgroundColor: "rgba(0, 0, 0, 0.5)" },
-        ]}
-      >
-        <View
-          style={[
-            styles.container,
-            {
-              backgroundColor: tokens.colors.surface,
-              borderRadius: tokens.borders.radius.xl,
-              padding: tokens.spacing.lg,
-              maxWidth: responsive.maxContentWidth * 0.85,
-              width: "90%",
-            },
-          ]}
-        >
-          <View style={styles.iconContainer}>
-            <AtomicIcon name="star" size="xl" color="primary" />
-          </View>
-
-          <AtomicText
-            type="headlineMedium"
-            color="onSurface"
-            style={[
-              styles.title,
-              { marginBottom: tokens.spacing.sm },
-            ]}
-          >
-            {defaultTranslations.title}
-          </AtomicText>
-
-          <AtomicText
-            type="bodyMedium"
-            color="onSurfaceVariant"
-            style={[
-              styles.message,
-              { marginBottom: tokens.spacing.lg },
-            ]}
-          >
-            {defaultTranslations.message}
-          </AtomicText>
-
-          <View style={[styles.buttonContainer, { gap: tokens.spacing.sm }]}>
-            <AtomicButton
-              variant="primary"
-              onPress={onPositive}
-              style={styles.button}
-            >
-              {defaultTranslations.positiveButton}
-            </AtomicButton>
-
-            <AtomicButton
-              variant="outline"
-              onPress={onNegative}
-              style={styles.button}
-            >
-              {defaultTranslations.negativeButton}
-            </AtomicButton>
-
-            <AtomicButton
-              variant="text"
-              onPress={onLater}
-              style={styles.button}
-            >
-              {defaultTranslations.laterButton}
-            </AtomicButton>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  container: {
-    alignItems: "center",
-  },
-  iconContainer: {
-    marginBottom: 16,
-  },
-  title: {
-    textAlign: "center",
-  },
-  message: {
-    textAlign: "center",
-  },
-  buttonContainer: {
-    width: "100%",
-  },
-  button: {
-    width: "100%",
-  },
-});