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

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%)');
+  });
+});

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

@@ -0,0 +1,185 @@
+/**
+ * Tests for text color utilities
+ */
+
+import { getTextColor } from '../presentation/utils/textColorUtils';
+import type { ColorVariant } from '../domain/entities/TypographyTypes';
+
+import type { DesignTokens } from '@umituz/react-native-design-system-theme';
+
+// Mock design tokens for testing
+const mockTokens: DesignTokens = {
+  colors: {
+    textPrimary: '#000000',
+    textSecondary: '#666666',
+    textTertiary: '#999999',
+    textDisabled: '#CCCCCC',
+    textInverse: '#FFFFFF',
+    onSurface: '#000000',
+    onBackground: '#000000',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#FFFFFF',
+    onSuccess: '#FFFFFF',
+    onError: '#FFFFFF',
+    onWarning: '#000000',
+    onInfo: '#FFFFFF',
+    success: '#4CAF50',
+    error: '#F44336',
+    warning: '#FF9800',
+    info: '#2196F3',
+    primary: '#2196F3',
+    secondary: '#FF9800',
+    tertiary: '#9C27B0',
+    surface: '#FFFFFF',
+    surfaceVariant: '#F5F5F5',
+    background: '#FFFFFF',
+  },
+  typography: {
+    displayLarge: { fontSize: 57, fontWeight: '400' },
+    displayMedium: { fontSize: 45, fontWeight: '400' },
+    displaySmall: { fontSize: 36, fontWeight: '400' },
+    headlineLarge: { fontSize: 32, fontWeight: '400' },
+    headlineMedium: { fontSize: 28, fontWeight: '400' },
+    headlineSmall: { fontSize: 24, fontWeight: '400' },
+    titleLarge: { fontSize: 22, fontWeight: '500' },
+    titleMedium: { fontSize: 16, fontWeight: '500' },
+    titleSmall: { fontSize: 14, fontWeight: '500' },
+    bodyLarge: { fontSize: 16, fontWeight: '400' },
+    bodyMedium: { fontSize: 14, fontWeight: '400' },
+    bodySmall: { fontSize: 12, fontWeight: '400' },
+    labelLarge: { fontSize: 14, fontWeight: '500' },
+    labelMedium: { fontSize: 12, fontWeight: '500' },
+    labelSmall: { fontSize: 11, fontWeight: '500' },
+  },
+  spacing: {},
+  shadows: {},
+  borderRadius: {},
+  iconSizes: {},
+  opacity: {},
+  avatarSizes: {},
+  borders: {},
+};
+
+
+
+describe('getTextColor', () => {
+  test('should throw error when tokens is null', () => {
+    expect(() => getTextColor('textPrimary', null as any)).toThrow(
+      'Invalid design tokens: tokens and tokens.colors are required'
+    );
+  });
+
+  test('should throw error when tokens is undefined', () => {
+    expect(() => getTextColor('textPrimary', undefined as any)).toThrow(
+      'Invalid design tokens: tokens and tokens.colors are required'
+    );
+  });
+
+  test('should throw error when tokens.colors is null', () => {
+    expect(() => getTextColor('textPrimary', { colors: null } as any)).toThrow(
+      'Invalid design tokens: tokens and tokens.colors are required'
+    );
+  });
+
+  test('should return default textPrimary when color is undefined', () => {
+    const result = getTextColor(undefined, mockTokens);
+    expect(result).toBe('#000000');
+  });
+
+  test('should return custom color as-is when not a variant', () => {
+    const customColor = '#FF5722';
+    const result = getTextColor(customColor, mockTokens);
+    expect(result).toBe(customColor);
+  });
+
+  test('should map textPrimary variant correctly', () => {
+    const result = getTextColor('textPrimary', mockTokens);
+    expect(result).toBe('#000000');
+  });
+
+  test('should map textSecondary variant correctly', () => {
+    const result = getTextColor('textSecondary', mockTokens);
+    expect(result).toBe('#666666');
+  });
+
+  test('should map semantic colors correctly', () => {
+    expect(getTextColor('success', mockTokens)).toBe('#4CAF50');
+    expect(getTextColor('error', mockTokens)).toBe('#F44336');
+    expect(getTextColor('warning', mockTokens)).toBe('#FF9800');
+    expect(getTextColor('info', mockTokens)).toBe('#2196F3');
+  });
+
+  test('should map on-colors correctly', () => {
+    expect(getTextColor('onPrimary', mockTokens)).toBe('#FFFFFF');
+    expect(getTextColor('onError', mockTokens)).toBe('#FFFFFF');
+  });
+
+  test('should handle legacy variants correctly', () => {
+    expect(getTextColor('primary', mockTokens)).toBe('#000000'); // Maps to textPrimary
+    expect(getTextColor('secondary', mockTokens)).toBe('#666666'); // Maps to textSecondary
+    expect(getTextColor('surfaceVariant', mockTokens)).toBe('#666666'); // Maps to textSecondary
+  });
+
+  test('should handle empty string', () => {
+    const result = getTextColor('', mockTokens);
+    expect(result).toBe('#000000');
+  });
+
+  test('should handle hex color strings', () => {
+    const hexColor = '#RRGGBB';
+    const result = getTextColor(hexColor, mockTokens);
+    expect(result).toBe(hexColor);
+  });
+
+  test('should handle rgb color strings', () => {
+    const rgbColor = 'rgb(255, 0, 0)';
+    const result = getTextColor(rgbColor, mockTokens);
+    expect(result).toBe(rgbColor);
+  });
+
+  test('should return custom color as-is when not a variant', () => {
+    const customColor = 'unknownVariant';
+    const result = getTextColor(customColor, mockTokens);
+    expect(result).toBe(customColor);
+  });
+
+
+
+
+});
+
+describe('ColorVariant validation', () => {
+  test('should validate all defined color variants', () => {
+    const validVariants: ColorVariant[] = [
+      'textPrimary',
+      'textSecondary',
+      'textTertiary',
+      'textDisabled',
+      'textInverse',
+      'onSurface',
+      'onBackground',
+      'onPrimary',
+      'onSecondary',
+      'onSuccess',
+      'onError',
+      'onWarning',
+      'onInfo',
+      'success',
+      'error',
+      'warning',
+      'info',
+      'primary',
+      'secondary',
+      'tertiary',
+      'disabled',
+      'inverse',
+      'surfaceVariant',
+    ];
+
+    validVariants.forEach(variant => {
+      const result = getTextColor(variant, mockTokens);
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+});