@umituz/react-native-design-system 2.6.47 → 2.6.49

package/package.json

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

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -1,7 +1,7 @@
 /**
  * AtomicSkeleton - Skeleton Loader Component
  *
- * Skeleton placeholder loader with shimmer animation for loading states.
+ * Skeleton placeholder loader for loading states.
  * 
  * @example
  * ```tsx
@@ -22,24 +22,12 @@
  * ```
  */
 
-import React, { useEffect } from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withRepeat,
-  withSequence,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle, type DimensionValue } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
 
-const AnimatedView = (Animated as any).createAnimatedComponent(View);
-
-const SHIMMER_DURATION = 1200;
-
 export interface AtomicSkeletonProps {
   /** Skeleton pattern preset */
   pattern?: SkeletonPattern;
@@ -49,63 +37,32 @@ export interface AtomicSkeletonProps {
   count?: number;
   /** Custom container style */
   style?: StyleProp<ViewStyle>;
-  /** Disable shimmer animation */
-  disableAnimation?: boolean;
   /** Test ID for testing */
   testID?: string;
 }
 
 /**
- * Skeleton loader component with shimmer animation
+ * Skeleton loader component
  * 
  * Provides visual feedback during content loading with customizable patterns
  */
 const SkeletonItem: React.FC<{
   config: SkeletonConfig;
   baseColor: string;
-  highlightColor: string;
-  disableAnimation: boolean;
   multiplier: number;
-}> = ({ config, baseColor, highlightColor, disableAnimation, multiplier }) => {
-  const opacity = useSharedValue(0);
-
-  useEffect(() => {
-    if (disableAnimation) return;
-
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(1, { duration: SHIMMER_DURATION / 2, easing: Easing.ease }),
-        withTiming(0, { duration: SHIMMER_DURATION / 2, easing: Easing.ease })
-      ),
-      -1,
-      false
-    );
-  }, [opacity, disableAnimation]);
+}> = ({ config, baseColor, multiplier }) => {
+  const itemStyles = StyleSheet.create({
+    item: {
+      ...styles.skeleton,
+      width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
+      height: config.height ? config.height * multiplier : undefined,
+      borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
+      marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
+      backgroundColor: baseColor,
+    },
+  });
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: disableAnimation
-      ? baseColor
-      : opacity.value === 0
-        ? baseColor
-        : highlightColor,
-    opacity: disableAnimation ? 1 : 0.5 + opacity.value * 0.5,
-  }));
-
-  return (
-    <AnimatedView
-      style={[
-        styles.skeleton,
-        {
-          width: typeof config.width === 'number' ? config.width * multiplier : config.width,
-          height: config.height ? config.height * multiplier : undefined,
-          borderRadius: config.borderRadius ? config.borderRadius * multiplier : undefined,
-          marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
-          backgroundColor: baseColor,
-        },
-        animatedStyle,
-      ]}
-    />
-  );
+  return <View style={itemStyles.item} />;
 };
 
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
@@ -113,7 +70,6 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   custom,
   count = 1,
   style,
-  disableAnimation = false,
   testID,
 }) => {
   const tokens = useAppDesignTokens();
@@ -128,8 +84,6 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
           key={`skeleton-${index}-${configIndex}`}
           config={config}
           baseColor={tokens.colors.surfaceSecondary}
-          highlightColor={tokens.colors.border}
-          disableAnimation={disableAnimation}
           multiplier={tokens.spacingMultiplier}
         />
       ))}

package/src/index.ts

@@ -378,24 +378,6 @@ export {
   type StackNavigationOptions,
   type TabLabelProps,
   type TabBarConfig,
-  // Celebration
-  CelebrationModal,
-  CelebrationModalContent,
-  CelebrationFireworksOverlay,
-  useCelebrationState,
-  useCelebrationModalAnimation,
-  FireworksConfigService,
-  DEFAULT_FIREWORKS_COLORS,
-  DEFAULT_FIREWORKS_CONFIG,
-  type CelebrationConfig,
-  type CelebrationAction,
-  type ThemeColors,
-  type CelebrationFireworksConfig,
-  type UseCelebrationStateReturn,
-  type UseCelebrationModalAnimationReturn,
-  type CelebrationModalProps,
-  type CelebrationModalContentProps,
-  type CelebrationFireworksOverlayProps,
   // Long Press Menu
   type MenuAction,
   type MenuActionTypeValue,
@@ -441,20 +423,6 @@ export {
   type SplashColors,
   type UseSplashFlowOptions,
   type UseSplashFlowResult,
-  // Animation
-  Animated,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
-  withSequence,
-  withRepeat,
-  runOnJS,
-  cancelAnimation,
-  Easing,
-  type SharedValue,
-  type WithTimingConfig,
-  type WithSpringConfig,
 } from './molecules';
 
 // =============================================================================

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -1,192 +1,113 @@
-import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
-import { StyleSheet } from 'react-native';
-import {
-  BottomSheetModal as GorhomBottomSheetModal,
-  BottomSheetView,
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-} from '@gorhom/bottom-sheet';
+import React, { forwardRef, useImperativeHandle, useState, useCallback } from 'react';
+import { Modal, View, StyleSheet, Pressable, Platform } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
-import type {
-  BottomSheetConfig,
-  BottomSheetModalRef,
-  BottomSheetModalProps,
-} from '../types/BottomSheet';
-import { BottomSheetUtils } from '../types/BottomSheet';
+import { useSafeAreaInsets } from '../../../safe-area';
+import { getResponsiveBottomSheetLayout } from '../../../responsive';
+import type { BottomSheetModalRef, BottomSheetModalProps } from '../types/BottomSheet';
 
-export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>((props, ref) => {
-  const {
-    children,
-    preset = 'medium',
-    snapPoints: customSnapPoints,
-    initialIndex,
-    enableBackdrop = true,
-    backdropAppearsOnIndex,
-    backdropDisappearsOnIndex,
-    keyboardBehavior = 'interactive',
-    enableHandleIndicator = true,
-    enablePanDownToClose = true,
-    enableDynamicSizing = false,
-    onChange,
-    onDismiss,
-    backgroundColor,
-  } = props;
+declare const __DEV__: boolean;
 
-  const tokens = useAppDesignTokens();
-  const modalRef = useRef<GorhomBottomSheetModal>(null);
+export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>(
+  (props, ref) => {
+    const {
+      children,
+      preset = 'medium',
+      onDismiss,
+      backgroundColor,
+    } = props;
 
-  const config: BottomSheetConfig = useMemo(() => {
-    if (customSnapPoints) {
-      return BottomSheetUtils.createConfig({
-        snapPoints: customSnapPoints,
-        initialIndex,
-        enableBackdrop,
-        backdropAppearsOnIndex,
-        backdropDisappearsOnIndex,
-        keyboardBehavior,
-        enableHandleIndicator,
-        enablePanDownToClose,
-        enableDynamicSizing,
-      });
-    }
-    return BottomSheetUtils.getPreset(preset);
-  }, [preset, customSnapPoints, initialIndex, enableBackdrop, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior, enableHandleIndicator, enablePanDownToClose, enableDynamicSizing]);
+    const [visible, setVisible] = useState(false);
+    const tokens = useAppDesignTokens();
+    const insets = useSafeAreaInsets();
+    const { maxHeight, borderRadius } = getResponsiveBottomSheetLayout();
 
-  const renderBackdrop = useCallback(
-    (backdropProps: BottomSheetBackdropProps) =>
-      enableBackdrop ? (
-        <BottomSheetBackdrop
-          {...backdropProps}
-          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
-          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
-          opacity={0.5}
-          pressBehavior="close"
-        />
-      ) : null,
-    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
-  );
+    const PRESET_HEIGHTS = {
+      small: maxHeight * 0.35,
+      medium: maxHeight * 0.6,
+      large: maxHeight * 0.85,
+      full: maxHeight,
+      custom: maxHeight * 0.6,
+    };
 
-  const handleSheetChange = useCallback(
-    (index: number) => {
-      if (__DEV__) {
-        console.log('[BottomSheetModal] onChange triggered', { index });
-      }
-      onChange?.(index);
-      if (index === -1) onDismiss?.();
-    },
-    [onChange, onDismiss]
-  );
+    const sheetHeight = PRESET_HEIGHTS[preset] || PRESET_HEIGHTS.medium;
 
-  useImperativeHandle(ref, () => ({
-    present: () => {
-      if (__DEV__) {
-        console.log('[BottomSheetModal] present() called', {
-          refExists: !!modalRef.current,
-          hasPresentMethod: typeof modalRef.current?.present === 'function',
-          refType: typeof modalRef.current,
-          refKeys: modalRef.current ? Object.keys(modalRef.current) : []
-        });
-      }
-      
-      try {
-        if (!modalRef.current) {
-          if (__DEV__) console.error('[BottomSheetModal] modalRef.current is null!');
-          return;
-        }
-        
-        if (typeof modalRef.current.present !== 'function') {
-          if (__DEV__) console.error('[BottomSheetModal] present is not a function!', typeof modalRef.current.present);
-          return;
-        }
-        
-        if (__DEV__) console.log('[BottomSheetModal] Calling modalRef.current.present()...');
-        modalRef.current.present();
-        if (__DEV__) console.log('[BottomSheetModal] modalRef.current.present() executed');
-        
-        // Fallback: Also try snapToIndex as a workaround
-        setTimeout(() => {
-          if (modalRef.current && typeof modalRef.current.snapToIndex === 'function') {
-            if (__DEV__) console.log('[BottomSheetModal] Fallback: calling snapToIndex(0)');
-            modalRef.current.snapToIndex(0);
-          }
-        }, 50);
-      } catch (error) {
-        if (__DEV__) console.error('[BottomSheetModal] Error calling present():', error);
-      }
-    },
-    dismiss: () => {
-      if (__DEV__) console.log('[BottomSheetModal] dismiss() called');
-      modalRef.current?.dismiss();
-    },
-    snapToIndex: (index: number) => {
-      if (__DEV__) console.log('[BottomSheetModal] snapToIndex called', { index });
-      modalRef.current?.snapToIndex(index);
-    },
-    snapToPosition: (pos: string | number) => modalRef.current?.snapToPosition(pos),
-    expand: () => modalRef.current?.expand(),
-    collapse: () => modalRef.current?.collapse(),
-  }));
+    const present = useCallback(() => {
+      if (__DEV__) console.log('[BottomSheetModal] Opening');
+      setVisible(true);
+    }, []);
 
-  React.useEffect(() => {
-    if (__DEV__) {
-      console.log('[BottomSheetModal] Component mounted', {
-        hasModalRef: !!modalRef.current,
-        snapPoints: config.snapPoints,
-        preset
-      });
-    }
-  }, []);
+    const dismiss = useCallback(() => {
+      if (__DEV__) console.log('[BottomSheetModal] Closing');
+      setVisible(false);
+      onDismiss?.();
+    }, [onDismiss]);
 
-  React.useEffect(() => {
-    if (__DEV__) {
-      console.log('[BottomSheetModal] modalRef updated', {
-        hasModalRef: !!modalRef.current,
-      });
-    }
-  }, [modalRef.current]);
+    useImperativeHandle(ref, () => ({
+      present,
+      dismiss,
+      snapToIndex: (index: number) => {
+        if (index >= 0) present();
+        else dismiss();
+      },
+      snapToPosition: () => present(),
+      expand: () => present(),
+      collapse: () => dismiss(),
+    }));
 
-  return (
-    <GorhomBottomSheetModal
-      ref={modalRef}
-      index={-1}
-      snapPoints={config.snapPoints}
-      enableDynamicSizing={false}
-      backdropComponent={renderBackdrop}
-      keyboardBehavior={config.keyboardBehavior}
-      enableHandlePanningGesture={config.enableHandleIndicator}
-      enablePanDownToClose={config.enablePanDownToClose ?? true}
-      onChange={handleSheetChange}
-      onDismiss={onDismiss}
-      onAnimate={(fromIndex, toIndex) => {
-        if (__DEV__) {
-          console.log('[BottomSheetModal] onAnimate', { fromIndex, toIndex });
-        }
-      }}
-      backgroundStyle={[styles.background, { backgroundColor: backgroundColor || tokens.colors.surface }]}
-      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
-      enableOverDrag={false}
-    >
-      <BottomSheetView style={styles.contentContainer}>
-        {children}
-      </BottomSheetView>
-    </GorhomBottomSheetModal>
-  );
-});
+    const styles = StyleSheet.create({
+      overlay: {
+        flex: 1,
+        backgroundColor: tokens.colors.modalOverlay,
+        justifyContent: 'flex-end',
+      },
+      container: {
+        height: sheetHeight,
+        backgroundColor: backgroundColor || tokens.colors.surface,
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
+        paddingBottom: Math.max(insets.bottom, 8),
+        ...Platform.select({
+          ios: {
+            shadowColor: tokens.colors.black,
+            shadowOffset: { width: 0, height: -4 },
+            shadowOpacity: 0.15,
+            shadowRadius: 12,
+          },
+          android: {
+            elevation: 8,
+          },
+        }),
+      },
+      handle: {
+        width: 40,
+        height: 4,
+        backgroundColor: tokens.colors.border,
+        borderRadius: 2,
+        alignSelf: 'center',
+        marginTop: 12,
+        marginBottom: 8,
+      },
+    });
 
-BottomSheetModal.displayName = 'BottomSheetModal';
-
-const styles = StyleSheet.create({
-  background: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
-  handleIndicator: {
-    width: 40,
-    height: 4,
-    borderRadius: 2,
-  },
-  contentContainer: {
-    flex: 1,
-  },
-});
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="slide"
+        onRequestClose={dismiss}
+        statusBarTranslucent
+      >
+        <Pressable style={styles.overlay} onPress={dismiss}>
+          <View style={styles.container}>
+            <Pressable onPress={(e) => e.stopPropagation()}>
+              <View style={styles.handle} />
+              {children}
+            </Pressable>
+          </View>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
 
+BottomSheetModal.displayName = 'BottomSheetModal';

package/src/molecules/bottom-sheet/components/SafeBottomSheetModalProvider.tsx

@@ -1,21 +1,15 @@
 import React, { ReactNode } from 'react';
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
-interface SafeBottomSheetModalProviderProps {
+export interface SafeBottomSheetModalProviderProps {
   children: ReactNode;
 }
 
+/**
+ * SafeBottomSheetModalProvider
+ * 
+ * Simple wrapper for backward compatibility.
+ * No longer uses @gorhom/bottom-sheet provider.
+ */
 export const SafeBottomSheetModalProvider = ({ children }: SafeBottomSheetModalProviderProps) => {
-  React.useEffect(() => {
-    if (__DEV__) {
-      console.log('[SafeBottomSheetModalProvider] Mounted and providing context');
-    }
-  }, []);
-
-  if (__DEV__) {
-    console.log('[SafeBottomSheetModalProvider] Rendering');
-  }
-
-  return <BottomSheetModalProvider>{children}</BottomSheetModalProvider>;
+  return <>{children}</>;
 };
-

package/src/molecules/index.ts

@@ -39,12 +39,6 @@ export * from './swipe-actions';
 // Navigation
 export * from './navigation';
 
-// Celebration
-export * from './celebration';
-
-// Animation
-export * from './animation';
-
 // Long Press Menu
 export * from './long-press-menu';
 

package/src/molecules/animation/core/AnimationCore.ts

@@ -1,29 +0,0 @@
-/**
- * Animation Core Exports
- * 
- * Re-exports react-native-reanimated for centralized usage.
- * All packages should use this instead of importing directly.
- */
-
-export {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    withSpring,
-    withSequence,
-    withRepeat,
-    runOnJS,
-    cancelAnimation,
-    Easing,
-} from 'react-native-reanimated';
-
-// Re-export Animated namespace
-import Animated from 'react-native-reanimated';
-export { Animated };
-
-// Re-export types
-export type {
-    SharedValue,
-    WithTimingConfig,
-    WithSpringConfig,
-} from 'react-native-reanimated';

package/src/molecules/animation/domain/entities/Animation.ts

@@ -1,81 +0,0 @@
-/**
- * Animation Domain Entity
- *
- * Core animation types and configurations for React Native.
- * Wraps react-native-reanimated and react-native-gesture-handler.
- */
-
-import type { WithSpringConfig, WithTimingConfig } from 'react-native-reanimated';
-
-/**
- * Animation timing configuration
- */
-export type AnimationTimingConfig = WithTimingConfig & {
-    duration?: number;
-};
-
-/**
- * Animation spring configuration
- */
-export type AnimationSpringConfig = WithSpringConfig & {
-    damping?: number;
-    stiffness?: number;
-    mass?: number;
-};
-
-/**
- * Animation preset types
- */
-export enum AnimationPreset {
-    FADE_IN = 'fadeIn',
-    FADE_OUT = 'fadeOut',
-    SLIDE_IN_UP = 'slideInUp',
-    SLIDE_IN_DOWN = 'slideInDown',
-    SLIDE_IN_LEFT = 'slideInLeft',
-    SLIDE_IN_RIGHT = 'slideInRight',
-    SCALE_IN = 'scaleIn',
-    SCALE_OUT = 'scaleOut',
-    BOUNCE = 'bounce',
-    SHAKE = 'shake',
-}
-
-/**
- * Gesture type
- */
-export enum GestureType {
-    TAP = 'tap',
-    PAN = 'pan',
-    PINCH = 'pinch',
-    ROTATION = 'rotation',
-    LONG_PRESS = 'longPress',
-}
-
-/**
- * Animation easing functions
- */
-export enum AnimationEasing {
-    LINEAR = 'linear',
-    EASE_IN = 'easeIn',
-    EASE_OUT = 'easeOut',
-    EASE_IN_OUT = 'easeInOut',
-    BOUNCE = 'bounce',
-    ELASTIC = 'elastic',
-}
-
-/**
- * Animation constants
- */
-export const ANIMATION_CONSTANTS = {
-    DURATION: {
-        INSTANT: 0,
-        FAST: 200,
-        NORMAL: 300,
-        SLOW: 500,
-        VERY_SLOW: 1000,
-    },
-    SPRING: {
-        DAMPING: 10,
-        STIFFNESS: 100,
-        MASS: 1,
-    },
-} as const;

package/src/molecules/animation/domain/entities/Fireworks.ts

@@ -1,44 +0,0 @@
-/**
- * Fireworks Domain Entity
- *
- * Types and constants for fireworks particle system
- */
-
-/**
- * Particle configuration
- */
-export interface ParticleConfig {
-  x: number;
-  y: number;
-  color: string;
-  size: number;
-  velocityX: number;
-  velocityY: number;
-  life: number;
-  decay: number;
-}
-
-/**
- * Fireworks configuration
- */
-export interface FireworksConfig {
-  particleCount?: number;
-  colors: string[]; // Required - colors must be provided by consumer
-  duration?: number;
-  particleSize?: number;
-  spread?: number;
-}
-
-/**
- * Fireworks constants
- */
-export const FIREWORKS_CONSTANTS = {
-  DEFAULT_PARTICLE_COUNT: 50,
-  DEFAULT_DURATION: 2000,
-  DEFAULT_PARTICLE_SIZE: 4,
-  DEFAULT_SPREAD: 100,
-  DEFAULT_COLORS: [] as string[], // Colors should be provided by consumer
-  GRAVITY: 0.3,
-  DECAY_RATE: 0.02,
-} as const;
-