@holper/react-native-holper-storybook 0.6.101 → 0.7.0

package/{lib/components/Container/index.js → components/Container/index.tsx}

@@ -1,14 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Keyboard, ScrollView, TouchableWithoutFeedback, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-  TouchableWithoutFeedback,
-  Keyboard,
-  ScrollView,
-  View,
-} from 'react-native';
+
 import style from './style';
 
+import type { ContainerProps } from '../../configs/types';
+
 const Container = ({
   fullScreen = true,
   enableScroll,
@@ -16,16 +12,13 @@ const Container = ({
   scrollStyle,
   children,
   ...props
-}) => (
-  <SafeAreaView
-    {...props}
-    style={[fullScreen ? style.fullScreen : {}, customStyle]}
-  >
+}: ContainerProps) => (
+  <SafeAreaView {...props} style={[fullScreen ? style.fullScreen : {}, customStyle]}>
     {enableScroll ? (
       <ScrollView
         contentContainerStyle={scrollStyle}
         showsVerticalScrollIndicator={false}
-        keyboardDismissMode='on-drag'
+        keyboardDismissMode="on-drag"
       >
         {children}
       </ScrollView>
@@ -37,18 +30,4 @@ const Container = ({
   </SafeAreaView>
 );
 
-Container.defaultProps = {
-  fullScreen: true,
-  enableScroll: false,
-  style: {},
-  scrollStyle: {},
-};
-
-Container.propTypes = {
-  fullScreen: PropTypes.bool,
-  enableScroll: PropTypes.bool,
-  style: PropTypes.any,
-  scrollStyle: PropTypes.any,
-};
-
 export default Container;

package/{lib/components/Container/style.js → components/Container/style.ts}

@@ -1,12 +1,13 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   fullScreen: {
     flex: 1,
     width,
-    backgroundColor: Colors.white
-  }
-};
+    backgroundColor: Colors.white,
+  },
+});

package/{lib/components/CustomChatView/index.js → components/CustomChatView/index.tsx}

@@ -1,43 +1,47 @@
-import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
-import PropTypes from "prop-types";
-import React from "react";
-import { Platform, TouchableOpacity, Alert, Linking } from "react-native";
-import { MapStyle } from "../../configs/constants";
-import styles from "./style";
+import { Alert, Linking, Platform, TouchableOpacity } from 'react-native';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
 
-const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
+import { MapStyle } from '../../configs/constants';
+import styles from './style';
+
+import type { CustomChatViewProps } from '../../configs/types';
+
+const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }: CustomChatViewProps) => {
   const openMapAsync = async () => {
-    const { location = {} } = currentMessage;
+    const { location } = currentMessage || {};
+
+    if (!location) {
+      Alert.alert('Location data is missing.');
+      return null;
+    }
 
     const mapScheme = Platform.select({
-      ios: "maps:0,0?q=",
-      android: "geo:0,0?q=",
+      ios: 'maps:0,0?q=',
+      android: 'geo:0,0?q=',
     });
     const latLng = `${location.latitude},${location.longitude}`;
-    const label = `${currentMessage.user.name}`;
+    const label = `${currentMessage?.user?.name ?? ''}`;
 
     const url = Platform.select({
       ios: `${mapScheme}${label}@${latLng}`,
       android: `${mapScheme}${latLng}(${label})`,
-    });
+    }) as string;
 
     try {
       const supported = await Linking.canOpenURL(url);
       if (supported) {
         return Linking.openURL(url);
       }
-      Alert.alert("Opening the map is not supported.");
+      Alert.alert('Opening the map is not supported.');
     } catch ({ message }) {
       Alert.alert(message);
     }
+    return null;
   };
 
-  if (currentMessage.location) {
+  if (currentMessage?.location) {
     return (
-      <TouchableOpacity
-        style={[styles.container, containerStyle]}
-        onPress={openMapAsync}
-      >
+      <TouchableOpacity style={[styles.container, containerStyle]} onPress={openMapAsync}>
         <MapView
           style={[styles.mapView, mapViewStyle]}
           region={{
@@ -58,16 +62,4 @@ const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
   return null;
 };
 
-CustomChatView.propTypes = {
-  currentMessage: PropTypes.object,
-  containerStyle: PropTypes.object,
-  mapViewStyle: PropTypes.object,
-};
-
-CustomChatView.defaultProps = {
-  currentMessage: {},
-  containerStyle: {},
-  mapViewStyle: {},
-};
-
 export default CustomChatView;

package/{lib/components/CustomChatView/style.js → components/CustomChatView/style.ts}

@@ -1,7 +1,7 @@
 export default {
   container: {},
   mapView: {
-    flexDirection: "column-reverse",
+    flexDirection: 'column-reverse',
     width: 250,
     height: 150,
     borderRadius: 13,

package/components/DeckSwiper/index.tsx

@@ -0,0 +1,90 @@
+import { Entypo } from '@expo/vector-icons';
+import { useRef, useState } from 'react';
+import { Image, View } from 'react-native';
+import Swiper from 'react-native-deck-swiper';
+
+import { Colors } from '../../configs/constants';
+import Button from '../Button';
+import Text from '../Text';
+import style from './style';
+
+import type { DeckSwiperProps } from '../../configs/types';
+
+const DeckSwiper = ({ data = [], inverted, nextText, onChange, onFinish }: DeckSwiperProps) => {
+  const swiper = useRef<Swiper<(typeof data)[0]>>(null);
+  const [finished, setFinished] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  const renderDots = () =>
+    data?.map((d, i) => (
+      <Entypo name="dot-single" size={36} key={`dot-${i}`} style={style[index === i ? 'dotSelected' : 'dot']} />
+    ));
+
+  return (
+    <>
+      <Swiper
+        ref={swiper}
+        cards={data}
+        renderCard={(card) => {
+          if (!card) {
+            return null;
+          }
+          return (
+            <View style={style.card}>
+              <View style={style.imageContainer}>
+                <Image
+                  style={style.imageResponsive}
+                  source={card.image}
+                  progressiveRenderingEnabled
+                  resizeMode="contain"
+                />
+              </View>
+              <View style={style.textContainer}>
+                <Text size="extra-large" style={style.title}>
+                  {card.title}
+                </Text>
+                <Text size="large" align="center">
+                  {card.description}
+                </Text>
+              </View>
+            </View>
+          );
+        }}
+        onSwipedAll={() => {
+          setFinished(true);
+          if (onFinish) {
+            onFinish();
+          }
+        }}
+        onSwipedRight={(i) => {
+          setIndex(i - 1);
+          onChange?.(i - 1);
+        }}
+        onSwipedLeft={(i) => {
+          setIndex(i + 1);
+          onChange?.(i + 1);
+        }}
+        cardIndex={index}
+        backgroundColor={Colors.white}
+        stackSize={2}
+        verticalSwipe={false}
+        showSecondCard
+        disableRightSwipe={index === 0}
+        goBackToPreviousCardOnSwipeRight
+        childrenOnTop
+      />
+      {!finished && (
+        <>
+          <View style={style.dotsContainer}>{renderDots()}</View>
+          <View style={style.container}>
+            <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => swiper.current?.swipeLeft()}>
+              <Text color="white">{nextText}</Text>
+            </Button>
+          </View>
+        </>
+      )}
+    </>
+  );
+};
+
+export default DeckSwiper;

package/{lib/components/DeckSwiper/style.js → components/DeckSwiper/style.ts}

@@ -1,9 +1,10 @@
-import {Dimensions} from 'react-native';
-import {Colors} from '../../configs/constants';
+import { Dimensions, StyleSheet } from 'react-native';
 
-const {height, width} = Dimensions.get('window');
+import { Colors } from '../../configs/constants';
 
-export default {
+const { height, width } = Dimensions.get('window');
+
+export default StyleSheet.create({
   container: {
     position: 'absolute',
     bottom: 0,
@@ -13,7 +14,7 @@ export default {
     paddingVertical: 30,
     paddingHorizontal: 15,
     marginBottom: 10,
-    width
+    width,
   },
   card: {
     flex: 1,
@@ -28,17 +29,17 @@ export default {
   imageResponsive: {
     height: undefined,
     width: undefined,
-    flex: 1
+    flex: 1,
   },
   textContainer: {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    width: width - 100
+    width: width - 100,
   },
   title: {
-    marginVertical: 10
+    marginVertical: 10,
   },
   dotsContainer: {
     width,
@@ -50,9 +51,9 @@ export default {
     bottom: 130,
   },
   dot: {
-    color: Colors.gray
+    color: Colors.gray,
   },
   dotSelected: {
-    color: Colors.green
-  }
-};
+    color: Colors.green,
+  },
+});

package/components/DonutCountdown/index.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import styles from './style';
+
+import type { DonutCountdownProps } from '../../configs/types';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const DonutCountdown = ({
+  bgColor = Colors.dimgray,
+  color = Colors.green,
+  duration = 10,
+  onComplete = () => {},
+  radius = 60,
+  strokeWidth = 10,
+  textColor = Colors.darkgray,
+  textSize = 'medium',
+}: DonutCountdownProps) => {
+  const circumference = 2 * Math.PI * radius;
+  const halfCircle = radius + strokeWidth;
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const [timeLeft, setTimeLeft] = useState(duration);
+
+  useEffect(() => {
+    // Animate from 0 to 1
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: duration * 1000,
+      useNativeDriver: true,
+    }).start(onComplete);
+
+    // Countdown timer
+    const interval = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, circumference],
+  });
+
+  return (
+    <View style={{ width: radius * 2, height: radius * 2 }}>
+      <Svg width={radius * 2} height={radius * 2} viewBox={`0 0 ${halfCircle * 2} ${halfCircle * 2}`}>
+        {/* Background circle */}
+        <Circle cx="50%" cy="50%" r={radius} stroke={bgColor} strokeWidth={strokeWidth} fill="none" />
+        {/* Animated circle */}
+        <AnimatedCircle
+          cx="50%"
+          cy="50%"
+          r={radius}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={`${circumference}, ${circumference}`}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${halfCircle} ${halfCircle})`}
+        />
+      </Svg>
+
+      {/* Centered countdown text */}
+      <View style={[StyleSheet.absoluteFillObject, styles.center]}>
+        <Text weight="semiBold" size={textSize} style={{ color: textColor }}>
+          {timeLeft}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default DonutCountdown;

package/components/DonutCountdown/style.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/components/FloatingContainer/index.tsx

@@ -0,0 +1,35 @@
+import { KeyboardAvoidingView, Platform, RefreshControl, ScrollView, View } from 'react-native';
+
+import style from './style';
+
+import type { FloatingContainerProps } from '../../configs/types';
+
+const FloatingContainer = ({
+  useRefreshControl,
+  onRefresh,
+  isRefreshing,
+  children,
+  floatingComponent,
+  centered,
+  floatingContainerStyle,
+  disableScroll,
+}: FloatingContainerProps) => (
+  <KeyboardAvoidingView style={style.floatingContainer} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+    <ScrollView
+      contentContainerStyle={centered ? style.centered : {}}
+      fadingEdgeLength={150}
+      keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator={false}
+      scrollEnabled={!disableScroll}
+      keyboardDismissMode="on-drag"
+      refreshControl={
+        useRefreshControl ? <RefreshControl refreshing={!!isRefreshing} onRefresh={onRefresh} /> : undefined
+      }
+    >
+      {children}
+    </ScrollView>
+    <View style={[style.container, floatingContainerStyle]}>{floatingComponent}</View>
+  </KeyboardAvoidingView>
+);
+
+export default FloatingContainer;

package/{lib/components/FloatingContainer/style.js → components/FloatingContainer/style.ts}

@@ -1,11 +1,12 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   floatingContainer: {
-    flex: 1
+    flex: 1,
   },
   container: {
     minHeight: 50,
@@ -19,6 +20,6 @@ export default {
     alignSelf: 'center',
   },
   centered: {
-    alignItems: 'center'
-  }
-};
+    alignItems: 'center',
+  },
+});

package/components/Footer/index.tsx

@@ -0,0 +1,35 @@
+import { Ionicons } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import style from './style';
+
+import type { FooterProps } from '../../configs/types';
+
+const Footer = ({ inverted, tabs }: FooterProps) => {
+  const renderTab = () =>
+    tabs.map((tab, index) => (
+      <TouchableOpacity key={`tab-${index}`} style={style.tab} onPress={tab.onPress}>
+        <Ionicons
+          name={tab.icon as keyof typeof Ionicons.glyphMap}
+          size={20}
+          color={inverted ? Colors.white : Colors.darkblue}
+        />
+        <Text color={inverted ? 'white' : 'dark'} size="small">
+          {tab.text}
+        </Text>
+        {tab.badge && tab.badge > 0 && (
+          <View style={style.badge}>
+            <Text color="white" size="tiny" weight="semiBold" align="center">
+              {tab.badge > 9 ? '+9' : tab.badge}
+            </Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    ));
+
+  return <View style={[style.footerContainer, style[inverted ? 'inverted' : 'default']]}>{renderTab()}</View>;
+};
+
+export default Footer;

package/{lib/components/Footer/style.js → components/Footer/style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   footerContainer: {
     width,
     height: 70,
@@ -36,4 +37,4 @@ export default {
     borderRadius: 9,
     justifyContent: 'center',
   },
-};
+});

package/components/Header/index.tsx

@@ -0,0 +1,21 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Image, TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { HeaderProps } from '../../configs/types';
+
+const Header = ({ inverted, logo, right, onMenuPress }: HeaderProps) => (
+  <View style={[style.headerContainer, style[inverted ? 'inverted' : 'default']]}>
+    <TouchableOpacity onPress={onMenuPress}>
+      <Ionicons name="menu-outline" size={30} color={inverted ? Colors.white : Colors.darkblue} />
+    </TouchableOpacity>
+    <View style={style.imageContainer}>
+      <Image style={style.imageResponsive} source={logo} progressiveRenderingEnabled resizeMode="contain" />
+    </View>
+    {right}
+  </View>
+);
+
+export default Header;

package/{lib/components/Header/style.js → components/Header/style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   headerContainer: {
     width,
     height: 70,
@@ -30,4 +31,4 @@ export default {
     width: undefined,
     flex: 1,
   },
-};
+});

package/{lib/components/ImagePicker/index.js → components/ImagePicker/index.tsx}

@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
 import * as ExpoImagePicker from 'expo-image-picker';
 
-const ImagePicker = async (avatar) => {
+const ImagePicker = async (avatar: boolean = false) => {
   const image = await ExpoImagePicker.launchImageLibraryAsync({
     mediaTypes: ['images'],
     allowsEditing: avatar,
@@ -10,18 +9,10 @@ const ImagePicker = async (avatar) => {
   });
 
   if (image.canceled) {
-    return;
+    return undefined;
   }
 
-  return image.assets[0].uri;
-};
-
-ImagePicker.defaultProps = {
-  avatar: false,
-};
-
-ImagePicker.propTypes = {
-  avatar: PropTypes.bool,
+  return image.assets && image.assets.length > 0 ? image.assets[0].uri : undefined;
 };
 
 export default ImagePicker;

package/components/ImageResponsive/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Image, View } from 'react-native';
+
+import style from './style';
+
+import type { ImageResponsiveProps } from '../../configs/types';
+
+const ImageResponsive = ({ source, style: customStyle, avatar, ...props }: ImageResponsiveProps) => {
+  const [width, setWidth] = useState<number>(100);
+
+  return (
+    <View style={[customStyle, avatar ? { borderRadius: width / 2, overflow: 'hidden' } : {}]}>
+      <Image
+        style={style.responsiveImage}
+        source={source}
+        resizeMode={avatar ? 'cover' : 'contain'}
+        onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
+        {...props}
+      />
+    </View>
+  );
+};
+
+export default ImageResponsive;

package/components/ImageResponsive/style.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  responsiveImage: {
+    height: undefined,
+    width: undefined,
+    flex: 1,
+  },
+});

package/components/ImageViewer/index.tsx

@@ -0,0 +1,36 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { ActivityIndicator, Modal, TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import ImageResponsive from '../ImageResponsive';
+import style from './style';
+
+import type { ImageViewerProps } from '../../configs/types';
+
+const ImageViewer = ({ source, style: imageStyle, ...props }: ImageViewerProps) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [visible, setVisible] = useState<boolean>(false);
+
+  return (
+    <>
+      <TouchableOpacity onPress={() => setVisible(true)}>
+        <ImageResponsive source={source} style={imageStyle} {...props} />
+      </TouchableOpacity>
+
+      <Modal animationType="slide" transparent visible={visible} onRequestClose={() => {}}>
+        <View style={style.container}>
+          <TouchableOpacity onPress={() => setVisible(false)} style={style.closeIcon}>
+            <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
+          </TouchableOpacity>
+
+          <ImageResponsive source={source} style={style.body} onLoadEnd={() => setLoading(false)} />
+
+          {loading && <ActivityIndicator style={style.activityIndicator} />}
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageViewer;