@umituz/react-native-design-system 1.0.6 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -31,7 +31,8 @@
     "react-native-reanimated": "~3.10.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@expo/vector-icons": "^14.0.0",
-    "lucide-react-native": "^0.468.0"
+    "lucide-react-native": "^0.468.0",
+    "zustand": "^5.0.2"
   },
   "peerDependenciesMeta": {
     "@react-native-community/datetimepicker": {

package/src/index.ts

@@ -343,3 +343,12 @@ export {
   getOnboardingDescriptionMarginTop,
   DeviceType,
 } from './presentation/utils/responsive';
+
+// =============================================================================
+// THEME MANAGEMENT - Global Theme Store
+// =============================================================================
+
+export {
+  useDesignSystemTheme,
+  type ThemeMode,
+} from './infrastructure/theme/globalThemeStore';

package/src/infrastructure/theme/globalThemeStore.ts

@@ -0,0 +1,49 @@
+/**
+ * Global Theme Store for Design System
+ *
+ * Minimal Zustand store for theme state management.
+ * Apps can sync their theme state with this global store.
+ *
+ * WHY THIS EXISTS:
+ * - ScreenLayout needs to know current theme mode
+ * - Without prop drilling or Context API
+ * - Single source of truth for design system components
+ * - Apps control theme, design system reacts
+ *
+ * USAGE IN APP:
+ * ```typescript
+ * import { useDesignSystemTheme } from '@umituz/react-native-design-system';
+ * import { useTheme } from '@domains/theme';
+ *
+ * // Sync app theme with design system
+ * const { themeMode } = useTheme();
+ * const { setThemeMode } = useDesignSystemTheme();
+ *
+ * useEffect(() => {
+ *   setThemeMode(themeMode);
+ * }, [themeMode]);
+ * ```
+ */
+
+import { create } from 'zustand';
+
+export type ThemeMode = 'light' | 'dark';
+
+interface GlobalThemeStore {
+  /** Current theme mode */
+  themeMode: ThemeMode;
+
+  /** Update theme mode (called by app when theme changes) */
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+/**
+ * Global theme store for design system components
+ *
+ * This is a MINIMAL store - app has the real theme logic.
+ * Design system just mirrors the current theme for its components.
+ */
+export const useDesignSystemTheme = create<GlobalThemeStore>((set) => ({
+  themeMode: 'light',
+  setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
+}));

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,19 +1,17 @@
 /**
  * useAppDesignTokens Hook - Theme-Aware Design Tokens
  *
- * ✅ Accepts optional themeMode parameter
- * ✅ Returns tokens for specified theme (light/dark)
- * ✅ Apps control theme, package provides tokens
+ * ✅ Automatically reads theme from global store
+ * ✅ No parameters needed - fully automatic!
+ * ✅ Returns tokens for current theme (light/dark)
  * ✅ Single source of truth
  *
- * @param themeMode - Optional theme mode ('light' | 'dark'), defaults to 'light'
- *
- * @example Basic usage (light theme)
+ * @example Usage (fully automatic theme-aware)
  * ```typescript
  * import { useAppDesignTokens } from '@umituz/react-native-design-system';
  *
  * const MyComponent = () => {
- *   const tokens = useAppDesignTokens(); // Uses light theme by default
+ *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
  *   return (
  *     <View style={{
  *       backgroundColor: tokens.colors.primary,
@@ -25,29 +23,18 @@
  * };
  * ```
  *
- * @example Theme-aware usage
- * ```typescript
- * import { useAppDesignTokens } from '@umituz/react-native-design-system';
- * import { useTheme } from '@domains/theme';
- *
- * const MyComponent = () => {
- *   const { themeMode } = useTheme(); // Get theme from app's theme system
- *   const tokens = useAppDesignTokens(themeMode); // Pass theme to hook
- *
- *   return (
- *     <View style={{ backgroundColor: tokens.colors.background }}>
- *       <Text style={{ color: tokens.colors.textPrimary }}>
- *         This text color changes with theme!
- *       </Text>
- *     </View>
- *   );
- * };
- * ```
+ * How it works:
+ * - Reads themeMode from global store (useDesignSystemTheme)
+ * - App's theme store syncs to global store automatically
+ * - All components get correct tokens without prop drilling
+ * - Change theme once, everything updates!
  */
 
 import { useMemo } from 'react';
-import { createDesignTokens, type DesignTokens, type ThemeMode } from '../tokens/core/TokenFactory';
+import { createDesignTokens, type DesignTokens } from '../tokens/core/TokenFactory';
+import { useDesignSystemTheme } from '../../infrastructure/theme/globalThemeStore';
 
-export const useAppDesignTokens = (themeMode: ThemeMode = 'light'): DesignTokens => {
+export const useAppDesignTokens = (): DesignTokens => {
+  const { themeMode } = useDesignSystemTheme();
   return useMemo(() => createDesignTokens(themeMode), [themeMode]);
 };

package/src/presentation/organisms/ScreenLayout.tsx

@@ -30,7 +30,6 @@ import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import { SafeAreaView, Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { LoadingState } from '../loading/presentation/components/LoadingState';
-import type { ThemeMode } from '../tokens/core/TokenFactory';
 
 export interface ScreenLayoutProps {
   /**
@@ -113,11 +112,6 @@ export interface ScreenLayoutProps {
    */
   keyboardAvoiding?: boolean;
 
-  /**
-   * Theme mode for design tokens (default: 'light')
-   * Pass 'dark' for dark mode styling
-   */
-  themeMode?: ThemeMode;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -135,9 +129,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
-  themeMode = 'light',
 }) => {
-  const tokens = useAppDesignTokens(themeMode);
+  // Automatically uses current theme from global store
+  const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;