@umituz/react-native-design-system 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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",

package/src/infrastructure/theme/globalThemeStore.ts

@@ -26,8 +26,7 @@
  */
 
 import { create } from 'zustand';
-
-export type ThemeMode = 'light' | 'dark';
+import type { ThemeMode } from '../../presentation/tokens/core/ColorPalette';
 
 interface GlobalThemeStore {
   /** Current theme mode */
@@ -47,3 +46,6 @@ export const useDesignSystemTheme = create<GlobalThemeStore>((set) => ({
   themeMode: 'light',
   setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
 }));
+
+// Re-export ThemeMode for backward compatibility
+export type { ThemeMode };

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -7,9 +7,9 @@
  * Features:
  * - Platform-specific native pickers (iOS wheel, Android dialog)
  * - Consistent styling with design tokens
- * - Locale-aware date/time formatting (via timezone domain)
+ * - Locale-aware date/time formatting (native Date methods)
  * - Timezone-aware (respects device timezone)
- * - Automatic language integration (changes with app language)
+ * - Automatic language integration (native locale support)
  * - Optional label and error states
  * - Minimum and maximum date constraints
  * - Disabled state support
@@ -47,7 +47,6 @@ import {
 } from 'react-native';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTimezone } from '@domains/timezone';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
@@ -104,7 +103,6 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
   const { height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const { isTabletDevice } = useResponsive();
-  const { formatDate: formatDateTz, formatTime } = useTimezone();
   const [show, setShow] = useState(false);
 
   /**
@@ -128,26 +126,35 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
 
   /**
    * Format date based on mode
-   * Uses timezone domain for locale-aware and timezone-aware formatting
-   * Automatically respects user's selected language and device timezone
+   * Uses native Date formatting (locale-aware)
    */
   const formatDate = (date: Date): string => {
     if (mode === 'time') {
-      // Format time only (e.g., "02:30 PM" in English, "14:30" in Turkish)
-      return formatTime(date);
+      // Format time only
+      return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
     }
     if (mode === 'datetime') {
-      // Format date + time (e.g., "January 15, 2024 02:30 PM")
-      const dateStr = formatDateTz(date, {
+      // Format date + time
+      const dateStr = date.toLocaleDateString([], {
         year: 'numeric',
         month: 'short',
         day: 'numeric',
       });
-      const timeStr = formatTime(date);
+      const timeStr = date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
       return `${dateStr} ${timeStr}`;
     }
-    // Format date only (e.g., "January 15, 2024" in English, "15 Ocak 2024" in Turkish)
-    return formatDateTz(date);
+    // Format date only
+    return date.toLocaleDateString([], {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
   };
 
   /**

package/src/presentation/atoms/AtomicIcon.tsx

@@ -1,29 +1,113 @@
 /**
  * AtomicIcon - Design System Icon Component
  *
- * Simple wrapper around Icon domain for backward compatibility.
- * All icon functionality is provided by @domains/icons.
- *
- * @deprecated Use Icon from @domains/icons directly in new code
+ * Universal icon component using Lucide icons.
+ * Provides semantic color mappings and size presets.
  */
 
 import React from 'react';
-import { Icon, type IconProps } from '@domains/icons';
+import * as LucideIcons from 'lucide-react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 
 /**
- * AtomicIcon Component (Wrapper)
- *
- * This is a simple wrapper around Icon from @domains/icons.
- * It exists for backward compatibility with existing code.
+ * Icon size presets
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Semantic color tokens
+ */
+export type IconColor =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'info'
+  | 'onPrimary'
+  | 'onSurface'
+  | 'textPrimary'
+  | 'textSecondary'
+  | 'textDisabled';
+
+/**
+ * Icon component props
+ */
+export interface IconProps {
+  /** Icon name from Lucide icon set (PascalCase) */
+  name: string;
+  /** Semantic color token */
+  color?: IconColor;
+  /** Size preset */
+  size?: IconSize;
+  /** Custom size override (pixels) */
+  customSize?: number;
+  /** Custom color override (hex) */
+  customColor?: string;
+}
+
+/**
+ * Size mapping (pixels)
+ */
+const sizeMap: Record<IconSize, number> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 32,
+  xxl: 48,
+};
+
+/**
+ * AtomicIcon Component
  *
- * For new code, import Icon directly from @domains/icons
+ * Universal icon component with theme integration
  */
-export const AtomicIcon: React.FC<IconProps> = (props) => {
-  return <Icon {...props} />;
+export const AtomicIcon: React.FC<IconProps> = ({
+  name,
+  color = 'textPrimary',
+  size = 'md',
+  customSize,
+  customColor,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Get icon component from Lucide
+  const IconComponent = (LucideIcons as any)[name];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in Lucide icon set`);
+    return null;
+  }
+
+  // Resolve color from semantic token
+  const resolveColor = (): string => {
+    if (customColor) return customColor;
+
+    const colorMap: Record<IconColor, string> = {
+      primary: tokens.colors.primary,
+      secondary: tokens.colors.secondary,
+      error: tokens.colors.error,
+      warning: tokens.colors.warning,
+      success: tokens.colors.success,
+      info: tokens.colors.info,
+      onPrimary: tokens.colors.onPrimary,
+      onSurface: tokens.colors.onSurface,
+      textPrimary: tokens.colors.textPrimary,
+      textSecondary: tokens.colors.textSecondary,
+      textDisabled: tokens.colors.textDisabled,
+    };
+
+    return colorMap[color];
+  };
+
+  // Resolve size
+  const iconSize = customSize || sizeMap[size];
+
+  return <IconComponent color={resolveColor()} size={iconSize} />;
 };
 
 // Re-export types for backward compatibility
-export type { IconProps as AtomicIconProps } from '@domains/icons';
-export type { IconSize as AtomicIconSize } from '@domains/icons';
-export type { IconColor as AtomicIconColor } from '@domains/icons';
-export type { IconName as AtomicIconName } from '@domains/icons';
+export type AtomicIconProps = IconProps;
+export type AtomicIconSize = IconSize;
+export type AtomicIconColor = IconColor;

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,8 +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 { useDesignSystemTheme } from '../../infrastructure/theme/globalThemeStore';
-import type { ThemeMode } from '../tokens/core/TokenFactory';
 
 export interface ScreenLayoutProps {
   /**
@@ -114,12 +112,6 @@ export interface ScreenLayoutProps {
    */
   keyboardAvoiding?: boolean;
 
-  /**
-   * Theme mode for design tokens
-   * If not provided, uses global theme from useDesignSystemTheme()
-   * Apps should sync their theme with the global store instead of passing this prop
-   */
-  themeMode?: ThemeMode;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -137,13 +129,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
-  themeMode,
 }) => {
-  // Use global theme if themeMode prop not provided
-  const { themeMode: globalTheme } = useDesignSystemTheme();
-  const effectiveTheme = themeMode ?? globalTheme;
-
-  const tokens = useAppDesignTokens(effectiveTheme);
+  // Automatically uses current theme from global store
+  const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;