@chem-po/react-native 0.0.51 → 0.0.53

package/src/components/image/ImageViewModal.tsx

@@ -1,319 +0,0 @@
-import { useScreen, useToast } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Image, Modal, Platform, StyleSheet, View } from 'react-native'
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-  Pressable,
-} from 'react-native-gesture-handler'
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { downloadFile } from '../../utils/downloadFile'
-import { LoadingLogo } from '../loading/Loading'
-
-interface ImageViewModalProps {
-  isOpen: boolean
-  onClose: () => void
-  src: string | null
-  filename?: string
-  fileType?: string
-  withDownload?: boolean
-}
-
-export const ImageViewModal: React.FC<ImageViewModalProps> = ({
-  isOpen,
-  onClose,
-  src,
-  filename,
-  fileType,
-  withDownload,
-}) => {
-  const [loading, setLoading] = useState(true)
-  const screenWidth = useScreen(s => s.width)
-  const screenHeight = useScreen(s => s.height)
-  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
-  const { showError, showSuccess } = useToast()
-
-  // Shared values for zoom and pan (reanimated)
-  const scale = useSharedValue(1)
-  const translateX = useSharedValue(0)
-  const translateY = useSharedValue(0)
-
-  // Saved state for gesture handling
-  const savedScale = useSharedValue(1)
-  const savedTranslateX = useSharedValue(0)
-  const savedTranslateY = useSharedValue(0)
-
-  const { height, width } = useMemo(() => {
-    if (loading) return imageSize
-    const ratio = imageSize.width / imageSize.height
-    let h = Math.min(imageSize.height, screenHeight * 0.9)
-    let w = h * ratio
-    if (w > screenWidth * 0.9) {
-      w = Math.min(imageSize.width, screenWidth * 0.9)
-      h = w / ratio
-    }
-    return { height: h, width: w }
-  }, [screenHeight, screenWidth, imageSize, loading])
-
-  const onLoadStart = useCallback(() => setLoading(true), [])
-  const onLoad = useCallback(() => {
-    if (!src) return
-    Image.getSize(src, (width, height) => {
-      setImageSize({ width, height })
-      setLoading(false)
-    })
-  }, [src])
-
-  // Reset zoom and pan when modal opens/closes
-  const resetTransform = useCallback(() => {
-    scale.value = 1
-    translateX.value = 0
-    translateY.value = 0
-    savedScale.value = 1
-    savedTranslateX.value = 0
-    savedTranslateY.value = 0
-  }, [scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY])
-
-  // Reset when modal closes or src changes
-  useEffect(() => {
-    if (!isOpen || !src) {
-      resetTransform()
-    }
-  }, [isOpen, src, resetTransform])
-
-  // Download functionality
-  const handleDownload = useCallback(async () => {
-    if (!src) {
-      showError('Image URL is not available')
-      return
-    }
-    if (!fileType) {
-      showError('File type is not available')
-      return
-    }
-
-    try {
-      const usedName = filename ?? `image_${Date.now()}.jpg`
-
-      await downloadFile(src, usedName, fileType)
-      if (Platform.OS === 'android') {
-        showSuccess('Image downloaded successfully')
-        return
-      }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        console.error('Error downloading image:', error.message)
-      } else {
-        console.error('Error downloading image:', String(error))
-      }
-      showError('Failed to download image')
-    }
-  }, [src, showError, showSuccess, filename, fileType])
-
-  // Pan gesture with worklet
-  const panGesture = Gesture.Pan()
-    .onUpdate(event => {
-      'worklet'
-      // Only allow panning if zoomed in
-      if (savedScale.value > 1) {
-        const newTranslateX = savedTranslateX.value + event.translationX
-        const newTranslateY = savedTranslateY.value + event.translationY
-
-        // Calculate bounds to prevent panning too far
-        const maxTranslateX = (width * savedScale.value - width) / 2
-        const maxTranslateY = (height * savedScale.value - height) / 2
-
-        const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
-        const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
-
-        translateX.value = boundedTranslateX
-        translateY.value = boundedTranslateY
-      }
-    })
-    .onEnd(() => {
-      'worklet'
-      savedTranslateX.value = translateX.value
-      savedTranslateY.value = translateY.value
-    })
-
-  // Pinch gesture with worklet
-  const pinchGesture = Gesture.Pinch()
-    .onUpdate(event => {
-      'worklet'
-      const newScale = savedScale.value * event.scale
-      // Limit zoom between 1x and 5x
-      const boundedScale = Math.max(1, Math.min(5, newScale))
-      scale.value = boundedScale
-
-      // If zooming out to 1x, reset position
-      if (boundedScale <= 1) {
-        translateX.value = 0
-        translateY.value = 0
-      }
-    })
-    .onEnd(() => {
-      'worklet'
-      savedScale.value = scale.value
-      // If scale is close to 1, snap back to 1
-      if (savedScale.value < 1.1) {
-        scale.value = withSpring(1)
-        translateX.value = withSpring(0)
-        translateY.value = withSpring(0)
-        savedScale.value = 1
-        savedTranslateX.value = 0
-        savedTranslateY.value = 0
-      } else {
-        savedTranslateX.value = translateX.value
-        savedTranslateY.value = translateY.value
-      }
-    })
-
-  // Double tap to zoom with worklet
-  const doubleTapGesture = Gesture.Tap()
-    .numberOfTaps(2)
-    .onEnd(() => {
-      'worklet'
-      if (savedScale.value > 1) {
-        // Zoom out
-        scale.value = withSpring(1)
-        translateX.value = withSpring(0)
-        translateY.value = withSpring(0)
-        savedScale.value = 1
-        savedTranslateX.value = 0
-        savedTranslateY.value = 0
-      } else {
-        // Zoom in to 2x
-        scale.value = withSpring(2)
-        savedScale.value = 2
-      }
-    })
-
-  // Combine gestures
-  const combinedGestures = Gesture.Race(
-    doubleTapGesture,
-    Gesture.Simultaneous(panGesture, pinchGesture),
-  )
-
-  // Animated style using reanimated
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { scale: scale.value },
-        { translateX: translateX.value },
-        { translateY: translateY.value },
-      ],
-    }
-  })
-
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
-      <SafeAreaView style={{ flex: 1 }}>
-        <GestureHandlerRootView style={styles.gestureRoot}>
-          <View style={styles.modalOverlay}>
-            <Pressable style={styles.backgroundTouchable} onPress={onClose} />
-            <View style={styles.contentContainer}>
-              <GestureDetector gesture={combinedGestures}>
-                <Animated.View
-                  style={[
-                    styles.imageContainer,
-                    {
-                      width,
-                      height,
-                      opacity: loading ? 0 : 1,
-                    },
-                    animatedStyle,
-                  ]}>
-                  <Image
-                    source={src ? { uri: src } : undefined}
-                    style={styles.image}
-                    onLoadStart={onLoadStart}
-                    onLoad={onLoad}
-                    resizeMode="contain"
-                  />
-                </Animated.View>
-              </GestureDetector>
-
-              {withDownload && (
-                <Pressable style={styles.downloadButton} onPress={() => void handleDownload()}>
-                  <Ionicons name="download" size={24} color="white" />
-                </Pressable>
-              )}
-
-              <Pressable style={styles.closeButton} onPress={onClose}>
-                <Ionicons name="close" size={24} color="white" />
-              </Pressable>
-
-              {loading || !src ? (
-                <View style={styles.loadingContainer}>
-                  <LoadingLogo isLoading={loading} size={70} />
-                </View>
-              ) : null}
-            </View>
-          </View>
-        </GestureHandlerRootView>
-      </SafeAreaView>
-    </Modal>
-  )
-}
-
-const styles = StyleSheet.create({
-  gestureRoot: {
-    flex: 1,
-  },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-  },
-  backgroundTouchable: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 16,
-  },
-  imageContainer: {
-    overflow: 'hidden',
-    borderRadius: 4,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  downloadButton: {
-    position: 'absolute',
-    top: 16,
-    right: 64,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 16,
-    right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingContainer: {
-    ...StyleSheet.absoluteFillObject,
-    pointerEvents: 'none',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -1,8 +0,0 @@
-export * from './box'
-export * from './button'
-export * from './feed'
-export * from './form'
-export * from './image'
-export * from './loading'
-export * from './text'
-export * from './theme'

package/src/components/layout/CollapseHorizontal.tsx

@@ -1,92 +0,0 @@
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-
-export const CollapseHorizontal = ({
-  children,
-  in: isIn,
-  duration = 200,
-  style,
-}: {
-  children: React.ReactNode
-  in: boolean
-  duration?: number
-  style?: StyleProp<ViewStyle>
-}) => {
-  const contentRef = useRef<View>(null)
-  const [contentWidth, setContentWidth] = useState(0)
-  const width = useSharedValue(0)
-  const opacity = useSharedValue(0)
-  const handleLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      setContentWidth(event.nativeEvent.layout.width)
-      // Initialize width if component is initially visible
-      if (isIn && width.value === 0) {
-        width.value = event.nativeEvent.layout.width
-        opacity.value = 1
-      }
-    },
-    [isIn, width, opacity],
-  )
-
-  useLayoutEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.measure((_x, _y, width) => {
-        setContentWidth(width)
-      })
-    }
-  }, [])
-
-  React.useEffect(() => {
-    if (isIn) {
-      // Fade in: width first, then opacity
-      width.value = withTiming(contentWidth, {
-        duration,
-      })
-      opacity.value = withSequence(
-        withTiming(0, { duration: 0 }), // Reset opacity
-        withTiming(1, {
-          duration,
-        }),
-      )
-    } else {
-      // Fade out: opacity first, then width
-      opacity.value = withTiming(0, {
-        duration,
-      })
-      width.value = withSequence(
-        withTiming(width.value, { duration: 0 }), // Ensure we start from current width
-        withTiming(0, {
-          duration,
-        }),
-      )
-    }
-  }, [isIn, contentWidth, duration, width, opacity])
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    width: width.value,
-    opacity: opacity.value,
-  }))
-
-  return (
-    <Animated.View
-      style={[
-        {
-          overflow: 'hidden',
-          pointerEvents: isIn ? 'auto' : 'none',
-        },
-        animatedStyle,
-      ]}>
-      <View style={{ position: 'absolute', width: 'auto' }}>
-        <View style={style} onLayout={handleLayout} ref={contentRef}>
-          {children}
-        </View>
-      </View>
-    </Animated.View>
-  )
-}

package/src/components/loading/CircularProgress.tsx

@@ -1,56 +0,0 @@
-import { useBackgroundColor, useColorModeValue } from '@chem-po/react'
-import React, { useEffect, useRef } from 'react'
-import {
-  ActivityIndicator,
-  ActivityIndicatorProps,
-  Animated,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native'
-
-export interface CircularProgressProps extends ActivityIndicatorProps {
-  trackColor?: string
-  viewStyle?: StyleProp<ViewStyle>
-  visible?: boolean
-}
-
-export const CircularProgress = ({
-  color,
-  trackColor,
-  animating,
-  visible = true,
-  viewStyle,
-  ...props
-}: CircularProgressProps) => {
-  const defaultTrackColor = useColorModeValue('#959595', '#575757')
-  const defaultColor = useBackgroundColor(750)
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.timing(opacity, {
-      toValue: visible ? 1 : 0,
-      duration: 300,
-      useNativeDriver: true,
-    }).start()
-  }, [visible, opacity])
-  return (
-    <Animated.View style={[styles.container, { opacity }, viewStyle]}>
-      <ActivityIndicator
-        color={trackColor ?? defaultTrackColor} // Lighter version of your color
-        style={StyleSheet.absoluteFill}
-        animating={false}
-        {...props}
-      />
-      {/* Spinning circle */}
-      <ActivityIndicator animating={animating} color={color ?? defaultColor} {...props} />
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})

package/src/components/loading/Loading.tsx

@@ -1,146 +0,0 @@
-import { ThemedAsset, useAppAssets, useTheme } from '@chem-po/react'
-import LottieView from 'lottie-react-native'
-import React, { useMemo } from 'react'
-import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
-
-export const LottieLoadingLogo = ({
-  size = 30,
-  isLoading,
-  speed = 2,
-  inFeed,
-  asset,
-}: {
-  size?: number
-  color?: string
-  isLoading: boolean
-  asset: ThemedAsset
-  inFeed?: boolean
-  speed?: number
-}) => {
-  const { colorMode } = useTheme()
-  const animationData = useMemo(
-    () =>
-      inFeed
-        ? (asset.dark ?? asset.default)
-        : colorMode === 'dark'
-          ? (asset.dark ?? asset.default)
-          : asset.default,
-    [asset, inFeed, colorMode],
-  )
-
-  const style = useMemo(
-    () => ({
-      width: size,
-      height: size,
-      opacity: isLoading ? 0.85 : 0,
-    }),
-    [size, isLoading],
-  )
-
-  return <LottieView source={animationData} autoPlay={isLoading} loop speed={speed} style={style} />
-}
-
-const SVGLoadingLogo = ({
-  size = 30,
-  isLoading,
-  asset,
-  inFeed,
-}: {
-  size?: number
-  isLoading: boolean
-  asset: ThemedAsset
-  inFeed?: boolean
-}) => {
-  const { colorMode } = useTheme()
-  const svg = useMemo(
-    () =>
-      inFeed
-        ? (asset.dark ?? asset.default)
-        : colorMode === 'dark'
-          ? (asset.dark ?? asset.default)
-          : asset.default,
-    [asset, inFeed, colorMode],
-  )
-
-  const style = useMemo(
-    () => ({
-      width: size,
-      height: size,
-      opacity: isLoading ? 0.85 : 0,
-    }),
-    [size, isLoading],
-  )
-
-  return <Image source={{ uri: svg }} style={style} />
-}
-
-const LoadingBody = ({ isLoading, size }: { isLoading: boolean; size?: number }) => {
-  const { loading } = useAppAssets()
-  if (loading.lottieJson)
-    return <LottieLoadingLogo isLoading={isLoading} size={size} asset={loading.lottieJson} />
-  if (loading.svg) return <SVGLoadingLogo isLoading={isLoading} size={size} asset={loading.svg} />
-  return null
-}
-
-export const LoadingLogo = ({
-  isLoading,
-  size,
-  inFeed,
-}: {
-  isLoading: boolean
-  size?: number
-  inFeed?: boolean
-}) => {
-  const { loading } = useAppAssets()
-  if (loading.lottieJson)
-    return (
-      <LottieLoadingLogo
-        inFeed={inFeed}
-        isLoading={isLoading}
-        size={size}
-        asset={loading.lottieJson}
-      />
-    )
-  if (loading.svg)
-    return <SVGLoadingLogo inFeed={inFeed} isLoading={isLoading} size={size} asset={loading.svg} />
-  return <Text style={styles.errorText}>ERROR: No loading animation found</Text>
-}
-
-export const Loading = ({
-  text = 'Loading...',
-  inBox,
-  containerStyle,
-}: {
-  text?: string
-  inBox?: boolean
-  containerStyle?: ViewStyle
-}) => {
-  const body = (
-    <View style={[styles.loadingContainer, containerStyle]}>
-      <LoadingBody isLoading />
-      <Text style={styles.loadingText}>{text}</Text>
-    </View>
-  )
-  return inBox ? <View style={styles.boxContainer}>{body}</View> : body
-}
-
-const styles = StyleSheet.create({
-  loadingContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-  },
-  loadingText: {
-    opacity: 0.8,
-    fontSize: 14,
-    marginLeft: 8,
-  },
-  boxContainer: {
-    padding: 16,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
-  errorText: {
-    color: 'red',
-  },
-})