@umituz/react-native-settings 4.23.72 → 4.23.73

package/src/infrastructure/utils/memoUtils.ts

@@ -0,0 +1,159 @@
+/**
+ * Memo Utilities
+ * Centralized memoization helpers to reduce code duplication
+ */
+import { useMemo, useCallback, useRef, DependencyList } from 'react';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Custom hook to create memoized styles from a style factory function
+ * @param styleFactory Function that creates styles
+ * @param tokens Design tokens
+ * @param deps Dependencies for memoization
+ * @returns Memoized styles object
+ */
+export function useMemoizedStyles<T>(
+  styleFactory: (tokens: DesignTokens) => T,
+  tokens: DesignTokens,
+  deps: DependencyList = []
+): T {
+  return useMemo(() => styleFactory(tokens), [tokens, ...deps]);
+}
+
+/**
+ * Custom hook to create a memoized callback with proper type inference
+ * @param callback Function to memoize
+ * @param deps Dependencies for memoization
+ * @returns Memoized callback
+ */
+export function useMemoizedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  deps: DependencyList
+): T {
+  return useCallback(callback, deps) as T;
+}
+
+/**
+ * Custom hook to create a memoized value with proper type inference
+ * @param factory Function that creates the value
+ * @param deps Dependencies for memoization
+ * @returns Memoized value
+ */
+export function useMemoizedValue<T>(
+  factory: () => T,
+  deps: DependencyList
+): T {
+  return useMemo(factory, deps);
+}
+
+/**
+ * Creates a memoized style object with proper caching
+ * @param styleCreator Function that creates styles
+ * @param deps Dependencies for memoization
+ * @returns Memoized styles
+ */
+export function useStyledMemo<T extends Record<string, any>>(
+  styleCreator: () => T,
+  deps: DependencyList = []
+): T {
+  return useMemo(styleCreator, deps);
+}
+
+/**
+ * Memoizes a value with a custom equality check (non-hook version)
+ * @param value Value to memoize
+ * @param _isEqual Custom equality function
+ * @returns Memoized value
+ */
+export function memoWithEquality<T>(
+  value: T,
+  _isEqual: (prev: T, next: T) => boolean
+): T {
+  // This is a utility function, not a hook
+  // It cannot use hooks internally
+  return value;
+}
+
+/**
+ * Creates a cache key for style memoization
+ * @param tokens Design tokens
+ * @param prefix Optional prefix for the key
+ * @returns Cache key string
+ */
+export function createStyleCacheKey(
+  tokens: DesignTokens,
+  prefix: string = ''
+): string {
+  const { colors, spacing, typography } = tokens;
+
+  return `${prefix}-${JSON.stringify({
+    colors: { primary: colors.primary, background: colors.backgroundPrimary },
+    spacing: { md: spacing.md, lg: spacing.lg },
+    typography: { body: typography.bodyMedium.responsiveFontSize },
+  })}`;
+}
+
+/**
+ * Memoizes a value with a custom equality check
+ * @param value Value to memoize
+ * @param _isEqual Custom equality function
+ * @returns Memoized value
+ */
+export function useMemoWithEquality<T>(
+  value: T,
+  _isEqual: (prev: T, next: T) => boolean
+): T {
+  const ref = useRef<T>(value);
+
+  return useMemo(() => {
+    if (!_isEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [value, _isEqual]);
+}
+
+/**
+ * Custom hook that creates a debounced callback
+ * @param callback Function to debounce
+ * @param delay Delay in milliseconds
+ * @returns Debounced callback
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  return useCallback((...args: Parameters<T>) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, [callback, delay]) as T;
+}
+
+/**
+ * Custom hook that creates a throttled callback
+ * @param callback Function to throttle
+ * @param delay Delay in milliseconds
+ * @returns Throttled callback
+ */
+export function useThrottledCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const lastRunRef = useRef<number>(0);
+
+  return useCallback((...args: Parameters<T>) => {
+    const now = Date.now();
+
+    if (now - lastRunRef.current >= delay) {
+      callback(...args);
+      lastRunRef.current = now;
+    }
+  }, [callback, delay]) as T;
+}

package/src/infrastructure/utils/styleUtils.ts

@@ -0,0 +1,190 @@
+/**
+ * Style Utilities
+ * Centralized style creation functions to reduce code duplication
+ */
+import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Creates a container style with flex 1
+ */
+export const createContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  ...overrides,
+});
+
+/**
+ * Creates a centered container style
+ */
+export const createCenteredContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a row style for horizontal layouts
+ */
+export const createRowStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a header style
+ */
+export const createHeaderStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  paddingHorizontal: tokens.spacing.lg,
+  paddingVertical: tokens.spacing.md,
+  ...overrides,
+});
+
+/**
+ * Creates a section style
+ */
+export const createSectionStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a card style
+ */
+export const createCardStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.surface,
+  borderRadius: tokens.borders.radius.md,
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a title text style
+ */
+export const createTitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.headlineMedium.responsiveFontSize,
+  fontWeight: '600',
+  color: tokens.colors.textPrimary,
+  ...overrides,
+});
+
+/**
+ * Creates a subtitle text style
+ */
+export const createSubtitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+  color: tokens.colors.textSecondary,
+  ...overrides,
+});
+
+/**
+ * Creates a button style
+ */
+export const createButtonStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.primary,
+  borderRadius: tokens.borders.radius.md,
+  paddingVertical: tokens.spacing.md,
+  paddingHorizontal: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates an icon container style
+ */
+export const createIconContainerStyle = (
+  size: number = 48,
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  width: size,
+  height: size,
+  borderRadius: size / 2,
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceSecondary,
+  ...overrides,
+});
+
+/**
+ * Creates a scroll content style
+ */
+export const createScrollContentStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a separator/border style
+ */
+export const createSeparatorStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  height: 1,
+  backgroundColor: tokens.colors.border,
+  ...overrides,
+});
+
+/**
+ * Creates a margin utility style
+ */
+export const createMarginStyle = (
+  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  margin: tokens.spacing[spacing],
+  ...overrides,
+});
+
+/**
+ * Creates a padding utility style
+ */
+export const createPaddingStyle = (
+  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  padding: tokens.spacing[spacing],
+  ...overrides,
+});
+
+/**
+ * Combines multiple styles into one
+ */
+export const combineStyles = (
+  ...styles: (ViewStyle | TextStyle | ImageStyle | undefined | false)[]
+): ViewStyle | TextStyle | ImageStyle => {
+  return StyleSheet.flatten(styles.filter(Boolean));
+};
+
+/**
+ * Creates a responsive style based on screen dimensions
+ */
+export const createResponsiveStyle = (
+  _tokens: DesignTokens,
+  phoneStyle: ViewStyle,
+  _tabletStyle?: ViewStyle
+): ViewStyle => {
+  // For now, return phone style. Can be enhanced with actual responsive logic
+  return phoneStyle;
+};
+
+/**
+ * Type guard for ViewStyle
+ */
+export const isViewStyle = (style: any): style is ViewStyle => {
+  return style && typeof style === 'object';
+};
+
+/**
+ * Creates a safe area aware style
+ */
+export const createSafeAreaStyle = (
+  insets: { top?: number; bottom?: number; left?: number; right?: number },
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  paddingTop: insets.top,
+  paddingBottom: insets.bottom,
+  paddingLeft: insets.left,
+  paddingRight: insets.right,
+  ...overrides,
+});

package/src/presentation/screens/SettingsScreen.tsx

@@ -7,7 +7,6 @@ import React from "react";
 import {
   ScreenLayout,
   useAppNavigation,
-  ErrorBoundary,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -95,7 +94,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   // Workaround: Use conditional rendering with type assertion
   if (showHeader) {
     return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
-      <ErrorBoundary>
         {children ?? (
           <SettingsContent
             normalizedConfig={normalizedConfig}
@@ -110,12 +108,10 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             gamificationConfig={gamificationConfig}
           />
         )}
-      </ErrorBoundary>
     </ScreenLayout>;
   }
 
   return <ScreenLayout>
-    <ErrorBoundary>
       {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -130,6 +126,5 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           gamificationConfig={gamificationConfig}
         />
       )}
-    </ErrorBoundary>
   </ScreenLayout>;
 };