@umituz/react-native-design-system 4.27.2 → 4.27.4

package/.agents/workflows/setup-design-system.md

@@ -0,0 +1,46 @@
+---
+description: Sets up or updates the @umituz/react-native-design-system package in a React Native app with its components and tokens.
+---
+
+# Design System Setup Skill
+
+When this workflow/skill is invoked, follow these explicit instructions to configure `@umituz/react-native-design-system`.
+
+## Step 1: Check and Update `package.json`
+- Analyze the project's `package.json`.
+- Check if `@umituz/react-native-design-system` exists.
+  - If missing: Install with `npm install @umituz/react-native-design-system`.
+  - If outdated: Update it to the latest version.
+
+## Step 2: Install Required Peer Dependencies
+The design system heavily relies on Expo modules, Gesture Handler, and core UI dependencies. Check & install missing peer dependencies (use `npx expo install` for Expo packages):
+- `expo-font`, `expo-asset`, `expo-haptics`, `expo-clipboard`, `expo-device`, `expo-network`, `expo-secure-store`
+- `react-native-gesture-handler`
+- `react-native-safe-area-context`
+- `react-native-svg`
+- `@gorhom/portal` (if used in app)
+- `@tanstack/react-query` & `zustand`
+
+// turbo
+## Step 3: Native Setup (If bare React Native)
+If the project structure indicates an iOS build folder is present, run:
+```bash
+cd ios && pod install
+```
+
+## Step 4: Setup Initialization & Boilerplate
+- Locate the main entry point (e.g., `App.tsx`, `app/_layout.tsx`, or a primary wrapper).
+- Wrap the app with `DesignSystemProvider`.
+- **CRITICAL NOTE:** DO NOT use barrel imports (direct `@umituz/react-native-design-system`). Use sub-path imports instead.
+  ```typescript
+  import { DesignSystemProvider } from '@umituz/react-native-design-system/theme';
+
+  // Inside App Root
+  <DesignSystemProvider>
+    {children}
+  </DesignSystemProvider>
+  ```
+- If fonts need to be loaded, ensure the app's loading phase properly waits for `expo-font` before rendering the main UI.
+
+## Step 5: Summary
+Output what was done: the packages updated, peer dependencies installed, and files modified to inject the `DesignSystemProvider`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.2",
+  "version": "4.27.4",
   "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 - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -341,6 +341,7 @@
   "files": [
     "dist",
     "src",
+    ".agents",
     "README.md",
     "LICENSE"
   ]

package/src/atoms/card/AtomicCard.tsx

@@ -182,13 +182,13 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
 
   const paddingValue = getCardPadding(padding, tokens);
 
-  const containerStyle = [
+  const containerStyle = useMemo(() => [
     cardStyles.container,
     { borderRadius: tokens.borders.radius.lg },
     variantStyles.container,
     selected && { borderColor: tokens.colors.primary, borderWidth: 2 },
     style,
-  ];
+  ], [tokens.borders.radius.lg, variantStyles.container, selected, tokens.colors.primary, style]);
 
   const handlePress = (event: GestureResponderEvent) => {
     if (!disabled && onPress) {

package/src/molecules/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
     View,
     TextInput,
@@ -28,6 +28,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     const searchIcon = useIconName('search');
     const closeCircleIcon = useIconName('closeCircle');
 
+    // Memoize hitSlop to prevent object creation on every render
+    const hitSlop = useMemo(() => ({ top: 10, bottom: 10, left: 10, right: 10 }), []);
+
     const handleClear = useCallback(() => {
         onChangeText('');
         onClear?.();
@@ -94,7 +97,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                         <TouchableOpacity
                             onPress={handleClear}
                             style={styles.clearButton}
-                            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                            hitSlop={hitSlop}
                             accessibilityRole="button"
                             accessibilityLabel="Clear search"
                         >

package/src/molecules/calendar/infrastructure/services/CalendarService.ts

@@ -21,6 +21,9 @@ import { DateUtilities } from '../utils/DateUtilities';
  * Follows SOLID principles with composition over inheritance.
  */
 export class CalendarService {
+  // Cache for weekday names to prevent recalculation
+  private static weekdayNamesCache = new Map<string, string[]>();
+
   /**
    * Generate calendar days for a specific month
    */
@@ -96,13 +99,23 @@ export class CalendarService {
   /**
    * Get weekday names
    */
-  static getWeekdayNames(locale?: string): string[] {
+  static getWeekdayNames(locale: string = 'en-US'): string[] {
+    const cacheKey = locale;
+
+    // Return cached result if available
+    if (this.weekdayNamesCache.has(cacheKey)) {
+      return this.weekdayNamesCache.get(cacheKey)!;
+    }
+
+    // Calculate and cache
     const weekdays: string[] = [];
     for (let i = 0; i < 7; i++) {
       const date = new Date();
       date.setDate(date.getDate() - date.getDay() + i);
-      weekdays.push(date.toLocaleDateString(locale ?? undefined, { weekday: 'short' }));
+      weekdays.push(date.toLocaleDateString(locale, { weekday: 'short' }));
     }
+
+    this.weekdayNamesCache.set(cacheKey, weekdays);
     return weekdays;
   }
 

package/src/tanstack/infrastructure/monitoring/DevMonitor.ts

@@ -18,6 +18,7 @@ class DevMonitorClass {
   private statsInterval: ReturnType<typeof setInterval> | null = null;
   private cacheSubscription: (() => void) | null = null;
   private isEnabled: boolean;
+  private maxMetrics: number = 1000; // Prevent unbounded growth
 
   constructor(options: DevMonitorOptions = {}) {
     this.isEnabled = __DEV__ ?? false;
@@ -53,6 +54,14 @@ class DevMonitorClass {
 
     this.metrics.set(queryKeyString, updatedMetrics);
 
+    // Prevent unbounded growth - remove oldest metric if limit exceeded
+    if (this.metrics.size > this.maxMetrics) {
+      const oldestKey = this.metrics.keys().next().value;
+      if (oldestKey) {
+        this.metrics.delete(oldestKey);
+      }
+    }
+
     if (this.options.enableLogging && updatedMetrics.slowFetchCount > 0) {
       const fetchTime = MetricsCalculator.calculateFetchTime(query);
       if (MetricsCalculator.isSlowQuery(fetchTime, this.options.slowQueryThreshold)) {
@@ -177,6 +186,7 @@ class DevMonitorClass {
   clear(): void {
     if (!this.isEnabled) return;
     this.metrics.clear();
+    this.stopStatsLogging();
     if (this.options.enableLogging) {
       DevMonitorLogger.logMethodsCleared();
     }

package/src/utils/hooks/useAsyncOperation.ts

@@ -79,12 +79,14 @@ export function useAsyncOperation<T, E = Error>(
   const operationRef = useRef(operation);
   const errorHandlerRef = useRef(errorHandler);
 
-  // Keep all callback refs in sync with latest values
-  onSuccessRef.current = onSuccess;
-  onErrorRef.current = onError;
-  onFinallyRef.current = onFinally;
-  operationRef.current = operation;
-  errorHandlerRef.current = errorHandler;
+  // Keep all callback refs in sync with latest values - use useEffect to prevent updates on every render
+  useEffect(() => {
+    onSuccessRef.current = onSuccess;
+    onErrorRef.current = onError;
+    onFinallyRef.current = onFinally;
+    operationRef.current = operation;
+    errorHandlerRef.current = errorHandler;
+  }, [onSuccess, onError, onFinally, operation, errorHandler]);
 
   // Cleanup on unmount
   useEffect(() => {