@umituz/react-native-design-system 2.6.82 → 2.6.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.82",
+  "version": "2.6.84",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -60,9 +60,11 @@
     "@umituz/react-native-storage": "*",
     "@umituz/react-native-uuid": "*",
     "expo-application": ">=5.0.0",
+    "expo-blur": ">=13.0.0",
     "expo-clipboard": ">=8.0.0",
     "expo-crypto": ">=13.0.0",
     "expo-device": ">=5.0.0",
+    "expo-font": ">=12.0.0",
     "expo-linear-gradient": ">=15.0.0",
     "expo-sharing": ">=12.0.0",
     "react": ">=19.0.0",
@@ -110,10 +112,12 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
     "expo-application": "~5.9.1",
+    "expo-blur": "~14.0.0",
     "expo-clipboard": "~8.0.7",
     "expo-crypto": "~14.0.0",
     "expo-device": "~7.0.2",
     "expo-file-system": "^19.0.21",
+    "expo-font": "~13.0.0",
     "expo-haptics": "~14.0.0",
     "expo-linear-gradient": "~15.0.7",
     "expo-localization": "~16.0.1",

package/src/atoms/GlassView/GlassView.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
+import { BlurView, BlurTint } from 'expo-blur';
+import { useDesignSystemTheme } from '../../theme';
+
+export interface GlassViewProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  intensity?: number;
+  tint?: BlurTint;
+  experimentalBlurMethod?: 'dimezisBlurView' | 'none';
+}
+
+/**
+ * GlassView
+ * 
+ * A wrapper around Expo BlurView to create glassmorphism effects.
+ * Automatically adapts to current theme unless overridden.
+ */
+export const GlassView: React.FC<GlassViewProps> = ({
+  children,
+  style,
+  intensity = 50,
+  tint,
+  experimentalBlurMethod,
+
+}) => {
+  const { themeMode } = useDesignSystemTheme();
+  const isDark = themeMode === 'dark';
+  
+  // Default tint based on theme if not provided
+  // We explicitly cast the default strings to BlurTint to satisfy TS
+  const defaultTint = (isDark ? 'dark' : 'light') as BlurTint;
+  const resolvedTint = tint || defaultTint;
+
+  return (
+    <BlurView
+      intensity={intensity}
+      tint={resolvedTint}
+      style={[styles.container, style]}
+      experimentalBlurMethod={experimentalBlurMethod}
+    >
+      {children}
+    </BlurView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});

package/src/atoms/GlassView/index.ts

@@ -0,0 +1 @@
+export * from './GlassView';

package/src/atoms/index.ts

@@ -116,3 +116,6 @@ export { AtomicStatusBar, type AtomicStatusBarProps } from './status-bar';
 
 // Keyboard Avoiding
 export { AtomicKeyboardAvoidingView, type AtomicKeyboardAvoidingViewProps } from './AtomicKeyboardAvoidingView';
+
+// GlassView
+export { GlassView, type GlassViewProps } from './GlassView';

package/src/exports/atoms.ts

@@ -66,4 +66,6 @@ export {
   type AtomicStatusBarProps,
   AtomicKeyboardAvoidingView,
   type AtomicKeyboardAvoidingViewProps,
+  GlassView,
+  type GlassViewProps,
 } from '../atoms';

package/src/exports/molecules.ts

@@ -163,4 +163,7 @@ export {
   type SplashColors,
   type UseSplashFlowOptions,
   type UseSplashFlowResult,
+  // GlowingCard
+  GlowingCard,
+  type GlowingCardProps,
 } from '../molecules';

package/src/molecules/GlowingCard/GlowingCard.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle, Pressable, GestureResponderEvent } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+
+export interface GlowingCardProps {
+  children: React.ReactNode;
+  glowColor?: string;
+  intensity?: number; // 0 to 1, default 1
+  style?: StyleProp<ViewStyle>;
+  onPress?: (event: GestureResponderEvent) => void;
+  testID?: string;
+}
+
+/**
+ * GlowingCard
+ * 
+ * A card component with a neon-like glow effect using shadows.
+ */
+export const GlowingCard: React.FC<GlowingCardProps> = ({
+  children,
+  glowColor,
+  intensity = 1,
+  style,
+  onPress,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const resolvedColor = glowColor || tokens.colors.primary;
+
+  const shadowStyle: ViewStyle = {
+    shadowColor: resolvedColor,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.6 * intensity,
+    shadowRadius: 10 * intensity,
+    elevation: 8 * intensity, // Android elevation
+    backgroundColor: tokens.colors.surface, // Ensure bg is solid or it looks weird
+    borderRadius: tokens.borders.radius.md,
+    borderColor: resolvedColor,
+    borderWidth: 1,
+  };
+
+  const containerStyle = [
+    styles.container,
+    shadowStyle,
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable 
+        style={({ pressed }) => [
+          containerStyle,
+          pressed && { opacity: 0.9, transform: [{ scale: 0.98 }] }
+        ]} 
+        onPress={onPress}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'visible', // Needed for shadow
+  },
+});

package/src/molecules/GlowingCard/index.ts

@@ -0,0 +1 @@
+export * from './GlowingCard';

package/src/molecules/index.ts

@@ -61,3 +61,6 @@ export * from './countdown';
 
 // Splash
 export * from './splash';
+
+// GlowingCard
+export { GlowingCard, type GlowingCardProps } from './GlowingCard';

package/src/theme/core/CustomColors.ts

@@ -22,6 +22,17 @@ export interface CustomThemeColors {
   accentDark?: string;
   buttonPrimary?: string;
   buttonSecondary?: string;
+  
+  // Background overrides
+  backgroundPrimary?: string;
+  backgroundSecondary?: string;
+  surface?: string;
+  surfaceVariant?: string;
+  
+  // Text overrides
+  textPrimary?: string;
+  textSecondary?: string;
+  textTertiary?: string;
 }
 
 /**
@@ -111,6 +122,37 @@ export const applyCustomColors = (
     result.buttonSecondary = customColors.buttonSecondary;
   }
 
+  // Apply background override
+  if (customColors.backgroundPrimary) {
+    result.backgroundPrimary = customColors.backgroundPrimary;
+    result.background = customColors.backgroundPrimary; // Alias
+  }
+  if (customColors.backgroundSecondary) {
+    result.backgroundSecondary = customColors.backgroundSecondary;
+  }
+  
+  // Apply surface overrides
+  if (customColors.surface) {
+    result.surface = customColors.surface;
+    result.card = customColors.surface; // Alias
+    result.cardBackground = customColors.surface; // Alias
+  }
+  if (customColors.surfaceVariant) {
+    result.surfaceVariant = customColors.surfaceVariant;
+    result.surfaceSecondary = customColors.surfaceVariant; // Alias
+  }
+  
+  // Apply text overrides
+  if (customColors.textPrimary) {
+    result.textPrimary = customColors.textPrimary;
+    result.text = customColors.textPrimary; // Alias
+  }
+  if (customColors.textSecondary) {
+    result.textSecondary = customColors.textSecondary;
+  }
+  if (customColors.textTertiary) {
+    result.textTertiary = customColors.textTertiary;
+  }
+
   return result as ColorPalette;
 };
-

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, ReactNode } from 'react';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useFonts } from 'expo-font';
 import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
 import { useThemeStore } from '../stores/themeStore';
 import { useDesignSystemTheme } from '../globalThemeStore';
@@ -16,6 +17,8 @@ interface DesignSystemProviderProps {
   children: ReactNode;
   /** Custom theme colors to override defaults */
   customColors?: CustomThemeColors;
+  /** Custom fonts to load (name -> source map) */
+  fonts?: Record<string, any>; 
   /** Show loading indicator while initializing (default: true) */
   showLoadingIndicator?: boolean;
   /** Splash screen configuration (used when showLoadingIndicator is true) */
@@ -35,6 +38,7 @@ interface DesignSystemProviderProps {
 export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   children,
   customColors,
+  fonts,
   showLoadingIndicator = true,
   splashConfig,
   loadingComponent,
@@ -44,6 +48,10 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   // ALL HOOKS MUST BE AT THE TOP (Rules of Hooks)
   const [isInitialized, setIsInitialized] = useState(false);
   const [minDisplayTimeMet, setMinDisplayTimeMet] = useState(false);
+  
+  // Load fonts if provided
+  const [fontsLoaded, fontError] = fonts ? useFonts(fonts) : [true, null];
+  
   const initialize = useThemeStore((state) => state.initialize);
   const setCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
 
@@ -66,44 +74,58 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     // Initialize theme store
     initialize()
       .then(() => {
-        if (__DEV__) console.log('[DesignSystemProvider] Initialized successfully - setting isInitialized to true');
+        if (__DEV__) console.log('[DesignSystemProvider] Theme initialized successfully');
         setIsInitialized(true);
-        if (__DEV__) console.log('[DesignSystemProvider] State updated - calling onInitialized callback');
-        onInitialized?.();
       })
       .catch((error) => {
         if (__DEV__) console.error('[DesignSystemProvider] Initialization failed:', error);
-        if (__DEV__) console.log('[DesignSystemProvider] Error occurred - setting isInitialized to true anyway');
         setIsInitialized(true); // Still render app even on error
         onError?.(error);
       });
 
     return () => clearTimeout(displayTimer);
-  }, [initialize, customColors, setCustomColors, onInitialized, onError]);
+  }, [initialize, customColors, setCustomColors, onError]);
+
+  // Handle initialization completion when both theme and fonts are ready
+  useEffect(() => {
+    if (isInitialized && fontsLoaded && minDisplayTimeMet) {
+      if (__DEV__) console.log('[DesignSystemProvider] All systems ready - calling onInitialized');
+      onInitialized?.();
+    }
+  }, [isInitialized, fontsLoaded, minDisplayTimeMet, onInitialized]);
+
+  // Handle font errors
+  useEffect(() => {
+    if (fontError) {
+      if (__DEV__) console.error('[DesignSystemProvider] Font loading failed:', fontError);
+      onError?.(fontError);
+    }
+  }, [fontError, onError]);
 
   // ALL HOOKS ABOVE - NOW SAFE TO USE OTHER LOGIC
 
   if (__DEV__) {
     console.log('[DesignSystemProvider] Component render:', {
       isInitialized,
+      fontsLoaded,
       minDisplayTimeMet,
       showLoadingIndicator,
       hasSplashConfig: !!splashConfig,
-      splashConfigKeys: splashConfig ? Object.keys(splashConfig) : [],
     });
   }
 
   const renderContent = () => {
-    const shouldShowSplash = showLoadingIndicator && (!isInitialized || !minDisplayTimeMet);
+    // Show splash if:
+    // 1. Loading indicator is enabled AND
+    // 2. Either theme not init OR fonts not loaded OR min time not met
+    const shouldShowSplash = showLoadingIndicator && (!isInitialized || !fontsLoaded || !minDisplayTimeMet);
 
     if (__DEV__) {
       console.log('[DesignSystemProvider] renderContent:', {
-        showLoadingIndicator,
-        isInitialized,
-        minDisplayTimeMet,
         shouldShowSplash,
-        hasSplashConfig: !!splashConfig,
-        hasLoadingComponent: !!loadingComponent,
+        isInitialized,
+        fontsLoaded,
+        minDisplayTimeMet
       });
     }