@umituz/react-native-design-system 4.23.110 → 4.23.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.110",
+  "version": "4.23.112",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/exception/ErrorBoundary.tsx

@@ -0,0 +1,101 @@
+/**
+ * ErrorBoundary Component
+ * React 19 compatible error boundary for catching rendering errors
+ */
+
+import React, { Component, ReactNode } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.props.onError?.(error, errorInfo);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.error("[ErrorBoundary] Error caught:", error);
+      console.error("[ErrorBoundary] Error info:", errorInfo);
+    }
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Something went wrong</Text>
+          <Text style={styles.message}>
+            {this.state.error?.message || "An unexpected error occurred"}
+          </Text>
+          <TouchableOpacity style={styles.button} onPress={this.handleReset}>
+            <Text style={styles.buttonText}>Try Again</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    backgroundColor: "#FFFFFF",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 12,
+    color: "#000000",
+  },
+  message: {
+    fontSize: 16,
+    textAlign: "center",
+    marginBottom: 24,
+    color: "#666666",
+    paddingHorizontal: 20,
+  },
+  button: {
+    backgroundColor: "#007AFF",
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

package/src/exception/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Exception handling exports
+ * Error boundaries and error handling utilities
+ */
+
+export { ErrorBoundary } from "./ErrorBoundary";
+export type { ErrorBoundaryProps } from "./ErrorBoundary";

package/src/index.ts

@@ -58,9 +58,9 @@ export * from "./organisms";
 export * from "./safe-area";
 
 // =============================================================================
-// EXCEPTION EXPORTS (DISABLED FOR REACT 19 COMPATIBILITY)
+// EXCEPTION EXPORTS
 // =============================================================================
-// export * from "./exception";
+export * from "./exception";
 
 // =============================================================================
 // INFINITE SCROLL EXPORTS

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -49,6 +49,7 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const initialize = useTheme((state) => state.initialize);
   const setCustomColors = useTheme((state) => state.setCustomColors);
   const setDefaultColors = useTheme((state) => state.setDefaultColors);
+  const setDefaultThemeMode = useTheme((state) => state.setDefaultThemeMode);
   const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
   const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 
@@ -68,6 +69,8 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
       setGlobalCustomColors(customColors);
     }
 
+    // Set default theme mode BEFORE initialize
+    setDefaultThemeMode(initialThemeMode);
     setGlobalThemeMode(initialThemeMode);
 
     initialize()

package/src/theme/infrastructure/stores/themeStore.ts

@@ -17,6 +17,7 @@ interface ThemeState {
   themeMode: ThemeMode;
   customColors?: CustomThemeColors;
   defaultColors?: CustomThemeColors;
+  defaultThemeMode: ThemeMode;
   isDark: boolean;
   isInitialized: boolean;
 }
@@ -25,6 +26,7 @@ interface ThemeActions {
   setThemeMode: (mode: ThemeMode) => Promise<void>;
   setCustomColors: (colors?: CustomThemeColors) => Promise<void>;
   setDefaultColors: (colors: CustomThemeColors) => void;
+  setDefaultThemeMode: (mode: ThemeMode) => void;
   resetToDefaults: () => Promise<void>;
   toggleTheme: () => Promise<void>;
   initialize: () => Promise<void>;
@@ -36,17 +38,18 @@ let themeInitInProgress = false;
 export const useTheme = createStore<ThemeState, ThemeActions>({
   name: 'theme-store',
   initialState: {
-    theme: lightTheme,
-    themeMode: 'light',
+    theme: darkTheme,
+    themeMode: 'dark',
     customColors: undefined,
     defaultColors: undefined,
-    isDark: false,
+    defaultThemeMode: 'dark',
+    isDark: true,
     isInitialized: false,
   },
   persist: false,
   actions: (set, get) => ({
     initialize: async () => {
-      const { isInitialized, customColors: currentColors } = get();
+      const { isInitialized, customColors: currentColors, defaultThemeMode } = get();
       if (isInitialized || themeInitInProgress) return;
 
       themeInitInProgress = true;
@@ -57,7 +60,7 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
           ThemeStorage.getCustomColors(),
         ]);
 
-        const mode = savedMode || 'light';
+        const mode = savedMode || defaultThemeMode;
         const theme = mode === 'light' ? lightTheme : darkTheme;
         // Only use savedColors if they exist, otherwise keep current (prop-based) colors
         const colors = savedColors !== undefined ? savedColors : currentColors;
@@ -75,7 +78,7 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
         dsTheme.setCustomColors(colors);
       } catch {
         set({ isInitialized: true });
-        useDesignSystemTheme.getState().setThemeMode('light');
+        useDesignSystemTheme.getState().setThemeMode(defaultThemeMode);
       } finally {
         themeInitInProgress = false;
       }
@@ -107,13 +110,18 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       set({ defaultColors: colors });
     },
 
+    setDefaultThemeMode: (mode: ThemeMode) => {
+      set({ defaultThemeMode: mode });
+    },
+
     resetToDefaults: async () => {
-      const { defaultColors } = get();
-      set({ themeMode: 'light', theme: lightTheme, isDark: false, customColors: defaultColors });
+      const { defaultColors, defaultThemeMode } = get();
+      const theme = defaultThemeMode === 'light' ? lightTheme : darkTheme;
+      set({ themeMode: defaultThemeMode, theme, isDark: defaultThemeMode === 'dark', customColors: defaultColors });
       await ThemeStorage.clearThemeMode();
       await ThemeStorage.clearCustomColors();
       const dsTheme = useDesignSystemTheme.getState();
-      dsTheme.setThemeMode('light');
+      dsTheme.setThemeMode(defaultThemeMode);
       dsTheme.setCustomColors(defaultColors);
     },