@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -0,0 +1,186 @@
+/**
+ * Custom Colors Section Component
+ * Single Responsibility: Render custom color picker section
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
+import { ColorPicker } from "./ColorPicker";
+import {
+  DEFAULT_PRIMARY_COLORS,
+  DEFAULT_SECONDARY_COLORS,
+  DEFAULT_ACCENT_COLORS,
+} from "../../data/colorPalettes";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+import type { CustomThemeColors } from "../../types";
+
+export interface ColorFieldConfig {
+  key: keyof CustomThemeColors;
+  label: string;
+  defaultColor: string;
+  colorPalette: string[];
+}
+
+export interface CustomColorsSectionProps {
+  tokens: DesignTokens;
+  localCustomColors: CustomThemeColors;
+  onColorChange: (key: keyof CustomThemeColors, color: string) => void;
+  onResetColors: () => void;
+  title?: string;
+  description?: string;
+  resetButtonText?: string;
+  colorFields?: ColorFieldConfig[];
+  showResetButton?: boolean;
+}
+
+const DEFAULT_COLOR_FIELDS: ColorFieldConfig[] = [
+  {
+    key: "primary",
+    label: "Primary Color",
+    defaultColor: "#007AFF",
+    colorPalette: DEFAULT_PRIMARY_COLORS.colors,
+  },
+  {
+    key: "secondary",
+    label: "Secondary Color", 
+    defaultColor: "#8E8E93",
+    colorPalette: DEFAULT_SECONDARY_COLORS.colors,
+  },
+  {
+    key: "accent",
+    label: "Accent Color",
+    defaultColor: "#FF6B6B",
+    colorPalette: DEFAULT_ACCENT_COLORS.colors,
+  },
+  {
+    key: "buttonPrimary",
+    label: "Button Primary",
+    defaultColor: "#007AFF",
+    colorPalette: DEFAULT_PRIMARY_COLORS.colors,
+  },
+  {
+    key: "buttonSecondary",
+    label: "Button Secondary",
+    defaultColor: "#8E8E93",
+    colorPalette: DEFAULT_SECONDARY_COLORS.colors,
+  },
+];
+
+export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
+  tokens,
+  localCustomColors,
+  onColorChange,
+  onResetColors,
+  title,
+  description,
+  resetButtonText,
+  colorFields = DEFAULT_COLOR_FIELDS,
+  showResetButton = true,
+}) => {
+  // Memoize styles to prevent unnecessary re-creation
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  // Memoize hasCustomColors check to prevent unnecessary re-renders
+  const hasCustomColors = useMemo(() => 
+    Object.keys(localCustomColors).length > 0,
+    [localCustomColors]
+  );
+
+  // Memoize color fields to prevent unnecessary re-renders
+  const colorFieldsMemo = useMemo(() => colorFields, [colorFields]);
+
+  // Stable callback for color change to prevent infinite re-renders
+  const handleColorChange = useCallback((key: keyof CustomThemeColors, color: string) => {
+    try {
+      onColorChange(key, color);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[CustomColorsSection] Failed to change color:", error);
+      }
+    }
+  }, [onColorChange]);
+
+  // Stable callback for reset to prevent infinite re-renders
+  const handleResetColors = useCallback(() => {
+    try {
+      onResetColors();
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[CustomColorsSection] Failed to reset colors:", error);
+      }
+    }
+  }, [onResetColors]);
+
+  // Memoize color pickers to prevent unnecessary re-renders
+  const colorPickers = useMemo(() => {
+    return colorFieldsMemo.map((field) => (
+      <ColorPicker
+        key={field.key}
+        label={field.label}
+        value={localCustomColors[field.key] || field.defaultColor}
+        onValueChange={(color) => handleColorChange(field.key, color)}
+        colors={field.colorPalette}
+      />
+    ));
+  }, [colorFieldsMemo, localCustomColors, handleColorChange]);
+
+  // Memoize reset button to prevent unnecessary re-renders
+  const resetButton = useMemo(() => {
+    if (!showResetButton || !hasCustomColors) return null;
+    
+    return (
+      <AtomicButton variant="outline" size="sm" onPress={handleResetColors}>
+        {resetButtonText}
+      </AtomicButton>
+    );
+  }, [showResetButton, hasCustomColors, resetButtonText, handleResetColors]);
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.sectionHeader}>
+        <View style={styles.titleContainer}>
+          <AtomicText
+            type="titleMedium"
+            color="primary"
+            style={styles.sectionTitle}
+          >
+            {title}
+          </AtomicText>
+          <AtomicText
+            type="bodySmall"
+            color="secondary"
+            style={styles.sectionDescription}
+          >
+            {description}
+          </AtomicText>
+        </View>
+        {resetButton}
+      </View>
+
+      {colorPickers}
+    </View>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    section: {
+      marginBottom: tokens.spacing.xl,
+    },
+    sectionHeader: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      marginBottom: tokens.spacing.md,
+    },
+    titleContainer: {
+      flex: 1,
+    },
+    sectionTitle: {
+      marginBottom: tokens.spacing.xs,
+    },
+    sectionDescription: {
+      marginBottom: tokens.spacing.md,
+    },
+  });

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -0,0 +1,110 @@
+/**
+ * Theme Mode Section Component
+ * Single Responsibility: Render theme mode selection section
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { ThemeOption } from "./ThemeOption";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../../types";
+
+export interface ThemeOptionConfig {
+  mode: ThemeMode;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  features: string[];
+}
+
+export interface ThemeModeSectionProps {
+  tokens: DesignTokens;
+  themeMode: ThemeMode;
+  onThemeSelect: (mode: ThemeMode) => void;
+  title?: string;
+  description?: string;
+  themes?: ThemeOptionConfig[];
+}
+
+export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
+  tokens,
+  themeMode,
+  onThemeSelect,
+  title,
+  description,
+  themes,
+}) => {
+  // Memoize styles to prevent unnecessary re-creation
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  // Stable callback for theme selection to prevent infinite re-renders
+  const handleThemeSelect = useCallback((mode: ThemeMode) => {
+    try {
+      onThemeSelect(mode);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[ThemeModeSection] Failed to select theme:", error);
+      }
+    }
+  }, [onThemeSelect]);
+
+  // Memoize theme options
+  const themeOptions = useMemo(() => {
+    // If no themes provided, we shouldn't render anything or maybe we assume the parent MUST provide them.
+    // To be safe and "Package Driven", we require the consumer to provide the content.
+    if (!themes || themes.length === 0) return null;
+
+    return themes.map((theme) => (
+      <ThemeOption
+        key={theme.mode}
+        mode={theme.mode}
+        title={theme.title}
+        subtitle={theme.subtitle || ""}
+        description={theme.description || ""}
+        features={theme.features}
+        isSelected={themeMode === theme.mode}
+        onSelect={() => handleThemeSelect(theme.mode)}
+      />
+    ));
+  }, [themes, themeMode, handleThemeSelect]);
+
+  if (!themeOptions) return null;
+
+  return (
+    <View style={styles.section}>
+      {!!title && (
+        <AtomicText
+          type="titleMedium"
+          color="primary"
+          style={styles.sectionTitle}
+        >
+          {title}
+        </AtomicText>
+      )}
+      {!!description && (
+        <AtomicText
+          type="bodyMedium"
+          color="secondary"
+          style={styles.sectionDescription}
+        >
+          {description}
+        </AtomicText>
+      )}
+      {themeOptions}
+    </View>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    section: {
+      marginBottom: tokens.spacing.xl,
+    },
+    sectionTitle: {
+      marginBottom: tokens.spacing.xs,
+    },
+    sectionDescription: {
+      marginBottom: tokens.spacing.md,
+    },
+  });

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -0,0 +1,138 @@
+/**
+ * Theme Option Component
+ *
+ * Theme mode selection option (Light/Dark)
+ * Single Responsibility: Render theme option UI
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../../types";
+
+interface ThemeOptionProps {
+  mode: ThemeMode;
+  title: string;
+  subtitle: string;
+  description: string;
+  features: string[];
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export const ThemeOption: React.FC<ThemeOptionProps> = ({
+  mode,
+  title,
+  subtitle,
+  description,
+  features,
+  isSelected,
+  onSelect,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const styles = getStyles(tokens);
+  const iconName = mode === "dark" ? "moon-outline" : mode === "light" ? "sunny-outline" : "desktop-outline";
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, isSelected && styles.selectedContainer]}
+      onPress={onSelect}
+    >
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon name={iconName} customSize={24} customColor={tokens.colors.primary} />
+        </View>
+        <View style={styles.textContainer}>
+          <AtomicText type="titleLarge" color="primary">
+            {title}
+          </AtomicText>
+          <AtomicText type="bodyMedium" color="secondary">
+            {subtitle}
+          </AtomicText>
+        </View>
+        <AtomicIcon
+          name={isSelected ? "checkmark-circle-outline" : "ellipse-outline"}
+          customSize={24}
+          customColor={isSelected ? tokens.colors.primary : tokens.colors.secondary}
+        />
+      </View>
+
+      <AtomicText
+        type="bodyMedium"
+        color="secondary"
+        style={styles.description}
+      >
+        {description}
+      </AtomicText>
+
+      <View style={styles.featuresContainer}>
+        <AtomicText
+          type="labelLarge"
+          color="primary"
+          style={styles.featuresTitle}
+        >
+          Features
+        </AtomicText>
+        {features.map((feature, index) => (
+          <AtomicText
+            key={index}
+            type="bodySmall"
+            color="secondary"
+            style={styles.feature}
+          >
+            • {feature}
+          </AtomicText>
+        ))}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      borderWidth: 2,
+      borderColor: tokens.colors.border,
+    },
+    selectedContainer: {
+      borderColor: tokens.colors.primary,
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: 12,
+    },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: `${tokens.colors.primary}15`,
+      justifyContent: "center",
+      alignItems: "center",
+      marginRight: 12,
+    },
+    textContainer: {
+      flex: 1,
+    },
+    description: {
+      marginBottom: 12,
+      lineHeight: 20,
+    },
+    featuresContainer: {
+      backgroundColor: `${tokens.colors.primary}08`,
+      borderRadius: 8,
+      padding: 12,
+    },
+    featuresTitle: {
+      marginBottom: 8,
+    },
+    feature: {
+      marginBottom: 4,
+      lineHeight: 18,
+    },
+  });

package/src/domains/appearance/presentation/components/index.ts

@@ -0,0 +1,6 @@
+export { ThemeOption } from "./ThemeOption";
+export { ColorPicker } from "./ColorPicker";
+export { AppearanceHeader } from "./AppearanceHeader";
+export { ThemeModeSection, type ThemeOptionConfig } from "./ThemeModeSection";
+export { CustomColorsSection, type ColorFieldConfig } from "./CustomColorsSection";
+export { AppearancePreview, type PreviewColorItem } from "./AppearancePreview";

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -0,0 +1,226 @@
+/**
+ * Appearance Screen
+ *
+ * Screen for managing appearance settings including theme mode and custom colors
+ * Single Responsibility: Presentation orchestration only
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { useAppearance, useAppearanceActions } from "../../hooks";
+import {
+  AppearanceHeader,
+  ThemeModeSection,
+  CustomColorsSection,
+  AppearancePreview,
+} from "../components";
+
+import type { AppearanceTexts } from "../../types";
+
+export interface AppearanceScreenProps {
+  /** Texts for localization */
+  texts?: AppearanceTexts;
+
+  /**
+   * Custom header component to override default header
+   */
+  headerComponent?: React.ReactNode;
+
+  /**
+   * Show/hide theme mode section
+   */
+  showThemeSection?: boolean;
+
+  /**
+   * Show/hide custom colors section
+   */
+  showColorsSection?: boolean;
+
+  /**
+   * Show/hide preview section
+   */
+  showPreviewSection?: boolean;
+
+  /**
+   * Custom container style
+   */
+  containerStyle?: any;
+
+  /**
+   * Custom content container style
+   */
+  contentContainerStyle?: any;
+}
+
+export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
+  texts,
+  headerComponent,
+  showThemeSection = true,
+  showColorsSection = true,
+  showPreviewSection = true,
+  containerStyle,
+  contentContainerStyle,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const { themeMode } = useAppearance();
+  const {
+    localCustomColors,
+    handleThemeSelect,
+    handleColorChange,
+    handleResetColors,
+  } = useAppearanceActions();
+
+  // Memoize styles to prevent unnecessary re-creation
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  // Memoize header to prevent unnecessary re-renders
+  const headerComponentMemo = useMemo(() => {
+    return (
+      headerComponent || (
+        <AppearanceHeader
+          tokens={tokens}
+          title={texts?.title}
+          subtitle={texts?.subtitle}
+        />
+      )
+    );
+  }, [headerComponent, tokens, texts?.title, texts?.subtitle]);
+
+  // Stable callback for color change to prevent infinite re-renders
+  const stableHandleColorChange = useCallback(
+    (key: keyof typeof localCustomColors, color: string) => {
+      handleColorChange(key, color);
+    },
+    [handleColorChange]
+  );
+
+  // Memoize sections to prevent unnecessary re-renders
+  const themeSectionMemo = useMemo(() => {
+    if (!showThemeSection) return null;
+
+    // Construct themes from texts prop
+    // This adheres to "Package Driven Design" where content is driven by the consumer (App)
+    const themes = [];
+
+    // We only add the theme option if the corresponding text config is provided
+    if (texts?.lightMode) {
+      themes.push({
+        mode: 'light' as const,
+        title: texts.lightMode.title,
+        subtitle: texts.lightMode.subtitle,
+        description: texts.lightMode.description,
+        features: texts.lightMode.features
+      });
+    }
+
+    if (texts?.darkMode) {
+      themes.push({
+        mode: 'dark' as const,
+        title: texts.darkMode.title,
+        subtitle: texts.darkMode.subtitle,
+        description: texts.darkMode.description,
+        features: texts.darkMode.features
+      });
+    }
+
+    // If no texts provided, themes array is empty, section will return null.
+    // This forces the consuming app to provide the texts.
+
+    return (
+      <ThemeModeSection
+        tokens={tokens}
+        themeMode={themeMode}
+        onThemeSelect={handleThemeSelect}
+        title={texts?.themeSectionTitle}
+        description={texts?.themeSectionDescription}
+        themes={themes.length > 0 ? themes : undefined}
+      />
+    );
+  }, [
+    showThemeSection,
+    tokens,
+    themeMode,
+    handleThemeSelect,
+    texts?.themeSectionTitle,
+    texts?.themeSectionDescription,
+    texts?.lightMode,
+    texts?.darkMode,
+  ]);
+
+  const colorsSectionMemo = useMemo(() => {
+    if (!showColorsSection) return null;
+
+    return (
+      <CustomColorsSection
+        tokens={tokens}
+        localCustomColors={localCustomColors}
+        onColorChange={stableHandleColorChange}
+        onResetColors={handleResetColors}
+        title={texts?.colorsSectionTitle}
+        description={texts?.colorsSectionDescription}
+        resetButtonText={texts?.resetButtonText}
+      />
+    );
+  }, [
+    showColorsSection,
+    tokens,
+    localCustomColors,
+    stableHandleColorChange,
+    handleResetColors,
+    texts?.colorsSectionTitle,
+    texts?.colorsSectionDescription,
+    texts?.resetButtonText,
+  ]);
+
+  const previewSectionMemo = useMemo(() => {
+    if (!showPreviewSection) return null;
+
+    return (
+      <AppearancePreview
+        tokens={tokens}
+        localCustomColors={localCustomColors}
+        title={texts?.previewSectionTitle}
+        description={texts?.previewSectionDescription}
+      />
+    );
+  }, [
+    showPreviewSection,
+    tokens,
+    localCustomColors,
+    texts?.previewSectionTitle,
+    texts?.previewSectionDescription,
+  ]);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews={true} // Performance optimization for long lists
+        scrollEventThrottle={16} // 60fps throttling
+      >
+        {headerComponentMemo}
+        {themeSectionMemo}
+        {colorsSectionMemo}
+        {previewSectionMemo}
+      </ScrollView>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.backgroundPrimary,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+    },
+  });

package/src/domains/appearance/presentation/screens/index.ts

@@ -0,0 +1,2 @@
+export { AppearanceScreen } from "./AppearanceScreen";
+export type { AppearanceScreenProps } from "./AppearanceScreen";