@umituz/react-native-design-system 1.15.0 → 2.0.0

package/src/theme/hooks/useThemedStyles.ts

@@ -0,0 +1,68 @@
+/**
+ * useThemedStyles Hook
+ * Helper hook for creating StyleSheets with theme support
+ *
+ * Usage:
+ * ```typescript
+ * const createStyles = (theme: Theme) => StyleSheet.create({
+ *   container: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *   }
+ * });
+ *
+ * const Component = () => {
+ *   const styles = useThemedStyles(createStyles);
+ *   return <View style={styles.container} />;
+ * };
+ * ```
+ */
+
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { useTheme } from '../infrastructure/stores/themeStore';
+import type { Theme } from '../core/themes';
+
+type NamedStyles<T> = {
+  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+};
+
+/**
+ * Hook for creating themed styles
+ * Returns memoized styles that update when theme changes
+ */
+export function useThemedStyles<T extends NamedStyles<T>>(
+  createStyles: (theme: Theme) => T,
+): T {
+  const { theme } = useTheme();
+
+  return useMemo(() => createStyles(theme), [theme, createStyles]);
+}
+
+/**
+ * Alternative: Direct StyleSheet creation with theme
+ * Returns memoized styles that update when theme changes
+ */
+export function useThemedStyleSheet<T extends NamedStyles<T>>(
+  styleFactory: (theme: Theme) => T,
+): T {
+  const { theme } = useTheme();
+
+  return useMemo(
+    () => StyleSheet.create(styleFactory(theme)),
+    [theme, styleFactory],
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/theme/index.ts

@@ -0,0 +1,94 @@
+/**
+ * @umituz/react-native-design-system-theme - Public API
+ *
+ * Theme management system for React Native apps
+ * Provides colors, design tokens, and theme state management
+ *
+ * Usage:
+ *   import { useAppDesignTokens, useDesignSystemTheme, lightColors, darkColors } from '@umituz/react-native-design-system-theme';
+ */
+
+// =============================================================================
+// COLOR PALETTE
+// =============================================================================
+
+export {
+  lightColors,
+  darkColors,
+  getColorPalette,
+  withAlpha,
+  type ColorPalette,
+  type ThemeMode,
+} from './core/ColorPalette';
+
+export {
+  applyCustomColors,
+  type CustomThemeColors,
+} from './core/CustomColors';
+
+// =============================================================================
+// BASE TOKENS - Static Design Tokens
+// =============================================================================
+
+export {
+  BASE_TOKENS,
+  BASE_TOKENS as STATIC_TOKENS,
+  spacing,
+  typography,
+  borders,
+  type Spacing,
+  type Typography,
+  type Borders,
+  type BaseTokens,
+  type IconSizes,
+  type Opacity,
+  type AvatarSizes,
+  type ComponentSizes,
+} from './core/BaseTokens';
+
+// =============================================================================
+// TOKEN FACTORY
+// =============================================================================
+
+export {
+  createDesignTokens,
+  type DesignTokens,
+} from './core/TokenFactory';
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+export { useAppDesignTokens } from './hooks/useAppDesignTokens';
+export { useDesignSystemTheme } from './infrastructure/globalThemeStore';
+export { useTheme } from './infrastructure/stores/themeStore';
+export { useThemedStyles, useThemedStyleSheet } from './hooks/useThemedStyles';
+export { useCommonStyles } from './hooks/useCommonStyles';
+
+// =============================================================================
+// THEME OBJECTS
+// =============================================================================
+
+export {
+  lightTheme,
+  darkTheme,
+  createResponsiveValue,
+  type Theme,
+  type ExtendedColorPalette,
+} from './core/themes';
+
+// =============================================================================
+// STORAGE
+// =============================================================================
+
+export { ThemeStorage } from './infrastructure/storage/ThemeStorage';
+
+// =============================================================================
+// NAVIGATION THEME
+// =============================================================================
+
+export {
+  createNavigationTheme,
+  type NavigationTheme,
+} from './core/NavigationTheme';
+

package/src/theme/infrastructure/globalThemeStore.ts

@@ -0,0 +1,69 @@
+/**
+ * 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-theme';
+ * 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';
+import type { ThemeMode } from '../core/ColorPalette';
+import type { CustomThemeColors } from '../core/CustomColors';
+
+interface GlobalThemeStore {
+  /** Current theme mode */
+  themeMode: ThemeMode;
+
+  /** Custom theme colors override */
+  customColors?: CustomThemeColors;
+
+  /** Update theme mode (called by app when theme changes) */
+  setThemeMode: (mode: ThemeMode) => void;
+
+  /** Set custom theme colors (called by app when custom colors change) */
+  setCustomColors: (colors?: CustomThemeColors) => 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: any, get: any) => ({
+  themeMode: 'dark',
+  customColors: undefined,
+  setThemeMode: (mode: ThemeMode) => {
+    // Only update if mode actually changed to prevent unnecessary re-renders
+    const currentMode = get().themeMode;
+    if (currentMode !== mode) {
+      set({ themeMode: mode });
+    }
+  },
+  setCustomColors: (colors?: CustomThemeColors) => {
+    set({ customColors: colors });
+  },
+}));
+
+// Re-export ThemeMode for backward compatibility
+export type { ThemeMode };
+

package/src/theme/infrastructure/storage/ThemeStorage.ts

@@ -0,0 +1,93 @@
+/**
+ * Theme Storage
+ * Persists theme preference using AsyncStorage
+ *
+ * CRITICAL: This is a standalone storage utility for theme package.
+ * Apps should use this for theme persistence.
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { ThemeMode } from '../../core/ColorPalette';
+import { DESIGN_CONSTANTS } from '../../core/constants/DesignConstants';
+
+const STORAGE_KEY = `${DESIGN_CONSTANTS.STORAGE_NAMESPACE}/mode`;
+
+export class ThemeStorage {
+  /**
+   * Get stored theme mode
+   */
+  static async getThemeMode(): Promise<ThemeMode | null> {
+    try {
+      const value = await AsyncStorage.getItem(STORAGE_KEY);
+      if (!value) {
+        return null;
+      }
+
+      // Validate theme mode value
+      if (value === 'light' || value === 'dark') {
+        return value as ThemeMode;
+      }
+
+      if (__DEV__) {
+        console.warn('[ThemeStorage] Invalid theme mode value stored:', value);
+      }
+      return null;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      if (__DEV__) {
+        console.error('[ThemeStorage] Error getting theme mode:', errorMessage);
+      }
+      // Return null instead of throwing to prevent app crashes
+      return null;
+    }
+  }
+
+  /**
+   * Save theme mode
+   */
+  static async setThemeMode(mode: ThemeMode): Promise<void> {
+    try {
+      // Validate input
+      if (!mode || (mode !== 'light' && mode !== 'dark')) {
+        throw new Error(`Invalid theme mode: ${mode}`);
+      }
+
+      await AsyncStorage.setItem(STORAGE_KEY, mode);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      if (__DEV__) {
+        console.error('[ThemeStorage] Error saving theme mode:', errorMessage);
+      }
+      // Re-throw validation errors but swallow storage errors to prevent app crashes
+      if (errorMessage.includes('Invalid theme mode')) {
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * Clear stored theme mode
+   */
+  static async clearThemeMode(): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(STORAGE_KEY);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      if (__DEV__) {
+        console.error('[ThemeStorage] Error clearing theme mode:', errorMessage);
+      }
+      // Don't throw - clearing storage is not critical
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,109 @@
+/**
+ * Theme Store - Zustand State Management
+ *
+ * CRITICAL: NO Context Provider pattern - uses Zustand for global state
+ *
+ * Architecture:
+ * - Zustand for state management (NOT Context API)
+ * - AsyncStorage for persistence via ThemeStorage
+ * - Automatic initialization on app launch
+ * - Syncs with design system global theme store
+ */
+
+import { create } from 'zustand';
+import { lightTheme, darkTheme, type Theme } from '../../core/themes';
+import { ThemeStorage } from '../storage/ThemeStorage';
+import { useDesignSystemTheme } from '../globalThemeStore';
+import type { ThemeMode } from '../../core/ColorPalette';
+
+interface ThemeState {
+  theme: Theme;
+  themeMode: ThemeMode;
+  isDark: boolean;
+  isInitialized: boolean;
+  setThemeMode: (mode: ThemeMode) => Promise<void>;
+  toggleTheme: () => Promise<void>;
+  initialize: () => Promise<void>;
+}
+
+/**
+ * Theme Store - Global state management for theme
+ *
+ * Usage:
+ * ```typescript
+ * import { useTheme } from '@umituz/react-native-design-system-theme';
+ *
+ * const MyComponent = () => {
+ *   const { theme, themeMode, setThemeMode, toggleTheme } = useTheme();
+ *   // ...
+ * };
+ * ```
+ */
+export const useTheme = create<ThemeState>()((set: any, get: any) => ({
+  theme: darkTheme,
+  themeMode: 'dark',
+  isDark: true,
+  isInitialized: false,
+
+  initialize: async () => {
+    try {
+      const savedMode = await ThemeStorage.getThemeMode();
+      if (savedMode) {
+        const theme = savedMode === 'light' ? lightTheme : darkTheme;
+        set({
+          themeMode: savedMode,
+          theme,
+          isDark: savedMode === 'dark',
+          isInitialized: true,
+        });
+
+        // Sync with design system global theme
+        useDesignSystemTheme.getState().setThemeMode(savedMode);
+      } else {
+        // No saved mode - use default 'dark' and sync to design system store
+        set({ isInitialized: true });
+        // Ensure design system store is synced even if no saved mode exists
+        useDesignSystemTheme.getState().setThemeMode('dark');
+      }
+    } catch (error) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) console.error('[ThemeStore] Initialization error:', error);
+      // Silent failure - still mark as initialized to prevent blocking
+      set({ isInitialized: true });
+      // Ensure design system store is synced even on error
+      useDesignSystemTheme.getState().setThemeMode('dark');
+    }
+  },
+
+  setThemeMode: async (mode: ThemeMode) => {
+    try {
+      const theme = mode === 'light' ? lightTheme : darkTheme;
+
+      set({
+        themeMode: mode,
+        theme,
+        isDark: mode === 'dark',
+      });
+
+      await ThemeStorage.setThemeMode(mode);
+
+      // Sync with design system global theme
+      useDesignSystemTheme.getState().setThemeMode(mode);
+    } catch (error) {
+      /* eslint-disable-next-line no-console */
+      if (__DEV__) console.error('[ThemeStore] Error setting theme mode:', error);
+    }
+  },
+
+  toggleTheme: async () => {
+    const { themeMode, setThemeMode } = get();
+    const newMode: ThemeMode = themeMode === 'light' ? 'dark' : 'light';
+    await setThemeMode(newMode);
+  },
+}));
+
+
+
+
+
+

package/src/typography/__tests__/colorValidationUtils.test.ts

@@ -0,0 +1,180 @@
+/**
+ * Tests for color validation utilities
+ */
+
+import {
+  isValidHexColor,
+  isValidRgbColor,
+  isValidHslColor,
+  isValidNamedColor,
+  isValidColor,
+  getColorFormat,
+  normalizeColor,
+} from '../presentation/utils/colorValidationUtils';
+
+describe('isValidHexColor', () => {
+  test('should return true for valid 3-digit hex colors', () => {
+    expect(isValidHexColor('#fff')).toBe(true);
+    expect(isValidHexColor('#000')).toBe(true);
+    expect(isValidHexColor('#abc')).toBe(true);
+    expect(isValidHexColor('#123')).toBe(true);
+  });
+
+  test('should return true for valid 6-digit hex colors', () => {
+    expect(isValidHexColor('#ffffff')).toBe(true);
+    expect(isValidHexColor('#000000')).toBe(true);
+    expect(isValidHexColor('#abcdef')).toBe(true);
+    expect(isValidHexColor('#123456')).toBe(true);
+    expect(isValidHexColor('#FF5733')).toBe(true);
+  });
+
+  test('should return false for invalid hex colors', () => {
+    expect(isValidHexColor('#ff')).toBe(false);
+    expect(isValidHexColor('#ffff')).toBe(false);
+    expect(isValidHexColor('#ggg')).toBe(false);
+    expect(isValidHexColor('ffffff')).toBe(false);
+    expect(isValidHexColor('#12345')).toBe(false);
+  });
+});
+
+describe('isValidRgbColor', () => {
+  test('should return true for valid RGB colors', () => {
+    expect(isValidRgbColor('rgb(255, 0, 0)')).toBe(true);
+    expect(isValidRgbColor('rgb(0, 255, 0)')).toBe(true);
+    expect(isValidRgbColor('rgb(0, 0, 255)')).toBe(true);
+    expect(isValidRgbColor('rgb(128, 128, 128)')).toBe(true);
+  });
+
+  test('should return true for valid RGBA colors', () => {
+    expect(isValidRgbColor('rgba(255, 0, 0, 0.5)')).toBe(true);
+    expect(isValidRgbColor('rgba(0, 255, 0, 1)')).toBe(true);
+    expect(isValidRgbColor('rgba(0, 0, 255, 0)')).toBe(true);
+  });
+
+  test('should return true for RGB colors with percentages', () => {
+    expect(isValidRgbColor('rgb(100%, 0%, 0%)')).toBe(true);
+    expect(isValidRgbColor('rgb(50%, 50%, 50%)')).toBe(true);
+  });
+
+  test('should return false for invalid RGB colors', () => {
+    expect(isValidRgbColor('rgb(256, 0, 0)')).toBe(false);
+    expect(isValidRgbColor('rgb(255, -1, 0)')).toBe(false);
+    expect(isValidRgbColor('rgb(255, 0)')).toBe(false);
+    expect(isValidRgbColor('255, 0, 0')).toBe(false);
+  });
+});
+
+describe('isValidHslColor', () => {
+  test('should return true for valid HSL colors', () => {
+    expect(isValidHslColor('hsl(0, 100%, 50%)')).toBe(true);
+    expect(isValidHslColor('hsl(120, 100%, 50%)')).toBe(true);
+    expect(isValidHslColor('hsl(240, 100%, 50%)')).toBe(true);
+    expect(isValidHslColor('hsl(180, 50%, 50%)')).toBe(true);
+  });
+
+  test('should return true for valid HSLA colors', () => {
+    expect(isValidHslColor('hsla(0, 100%, 50%, 0.5)')).toBe(true);
+    expect(isValidHslColor('hsla(120, 100%, 50%, 1)')).toBe(true);
+    expect(isValidHslColor('hsla(240, 100%, 50%, 0)')).toBe(true);
+  });
+
+  test('should return false for invalid HSL colors', () => {
+    expect(isValidHslColor('hsl(361, 100%, 50%)')).toBe(false);
+    expect(isValidHslColor('hsl(120, 101%, 50%)')).toBe(false);
+    expect(isValidHslColor('hsl(120, 100%, 101%)')).toBe(false);
+    expect(isValidHslColor('hsl(120, 100%)')).toBe(false);
+    expect(isValidHslColor('120, 100%, 50%')).toBe(false);
+  });
+});
+
+describe('isValidNamedColor', () => {
+  test('should return true for valid CSS color names', () => {
+    expect(isValidNamedColor('red')).toBe(true);
+    expect(isValidNamedColor('blue')).toBe(true);
+    expect(isValidNamedColor('green')).toBe(true);
+    expect(isValidNamedColor('transparent')).toBe(true);
+    expect(isValidNamedColor('currentColor')).toBe(true);
+  });
+
+  test('should return false for invalid color names', () => {
+    expect(isValidNamedColor('notacolor')).toBe(false);
+    expect(isValidNamedColor('color123')).toBe(false);
+    expect(isValidNamedColor('')).toBe(false);
+    expect(isValidNamedColor('red-blue')).toBe(false);
+  });
+});
+
+describe('isValidColor', () => {
+  test('should return true for any valid color format', () => {
+    expect(isValidColor('#fff')).toBe(true);
+    expect(isValidColor('#ffffff')).toBe(true);
+    expect(isValidColor('rgb(255, 0, 0)')).toBe(true);
+    expect(isValidColor('rgba(255, 0, 0, 0.5)')).toBe(true);
+    expect(isValidColor('hsl(0, 100%, 50%)')).toBe(true);
+    expect(isValidColor('hsla(0, 100%, 50%, 0.5)')).toBe(true);
+    expect(isValidColor('red')).toBe(true);
+  });
+
+  test('should return false for invalid colors', () => {
+    expect(isValidColor('invalid')).toBe(false);
+    expect(isValidColor('#ggg')).toBe(false);
+    expect(isValidColor('rgb(256, 0, 0)')).toBe(false);
+    expect(isValidColor('')).toBe(false);
+  });
+});
+
+describe('getColorFormat', () => {
+  test('should return correct format for hex colors', () => {
+    expect(getColorFormat('#fff')).toBe('hex');
+    expect(getColorFormat('#ffffff')).toBe('hex');
+  });
+
+  test('should return correct format for RGB colors', () => {
+    expect(getColorFormat('rgb(255, 0, 0)')).toBe('rgb');
+    expect(getColorFormat('rgba(255, 0, 0, 0.5)')).toBe('rgb');
+  });
+
+  test('should return correct format for HSL colors', () => {
+    expect(getColorFormat('hsl(0, 100%, 50%)')).toBe('hsl');
+    expect(getColorFormat('hsla(0, 100%, 50%, 0.5)')).toBe('hsl');
+  });
+
+  test('should return correct format for named colors', () => {
+    expect(getColorFormat('red')).toBe('named');
+    expect(getColorFormat('blue')).toBe('named');
+  });
+
+  test('should return unknown for invalid colors', () => {
+    expect(getColorFormat('invalid')).toBe('unknown');
+    expect(getColorFormat('')).toBe('unknown');
+  });
+});
+
+describe('normalizeColor', () => {
+  test('should convert 3-digit hex to 6-digit', () => {
+    expect(normalizeColor('#fff')).toBe('#ffffff');
+    expect(normalizeColor('#abc')).toBe('#aabbcc');
+    expect(normalizeColor('#123')).toBe('#112233');
+  });
+
+  test('should keep 6-digit hex unchanged', () => {
+    expect(normalizeColor('#ffffff')).toBe('#ffffff');
+    expect(normalizeColor('#abcdef')).toBe('#abcdef');
+  });
+
+  test('should convert to lowercase', () => {
+    expect(normalizeColor('#FFFFFF')).toBe('#ffffff');
+    expect(normalizeColor('#ABCDEF')).toBe('#abcdef');
+    expect(normalizeColor('RED')).toBe('red');
+  });
+
+  test('should return unchanged for invalid colors', () => {
+    expect(normalizeColor('invalid')).toBe('invalid');
+    expect(normalizeColor('')).toBe('');
+  });
+
+  test('should return unchanged for non-hex colors', () => {
+    expect(normalizeColor('rgb(255, 0, 0)')).toBe('rgb(255, 0, 0)');
+    expect(normalizeColor('hsl(0, 100%, 50%)')).toBe('hsl(0, 100%, 50%)');
+  });
+});