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

package/lib/components/Container/style.ts

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

package/lib/components/CustomChatView/index.tsx

@@ -0,0 +1,65 @@
+import { Alert, Linking, Platform, TouchableOpacity } from 'react-native';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+
+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 || {};
+
+    if (!location) {
+      Alert.alert('Location data is missing.');
+      return null;
+    }
+
+    const mapScheme = Platform.select({
+      ios: 'maps:0,0?q=',
+      android: 'geo:0,0?q=',
+    });
+    const latLng = `${location.latitude},${location.longitude}`;
+    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.');
+    } catch ({ message }) {
+      Alert.alert(message);
+    }
+    return null;
+  };
+
+  if (currentMessage?.location) {
+    return (
+      <TouchableOpacity style={[styles.container, containerStyle]} onPress={openMapAsync}>
+        <MapView
+          style={[styles.mapView, mapViewStyle]}
+          region={{
+            latitude: currentMessage.location.latitude,
+            longitude: currentMessage.location.longitude,
+            latitudeDelta: currentMessage.location.latitudeDelta || 0.0922,
+            longitudeDelta: currentMessage.location.longitudeDelta || 0.0421,
+          }}
+          customMapStyle={MapStyle}
+          provider={PROVIDER_GOOGLE}
+          scrollEnabled={false}
+          zoomEnabled={false}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  return null;
+};
+
+export default CustomChatView;

package/lib/components/CustomChatView/style.ts

@@ -0,0 +1,10 @@
+export default {
+  container: {},
+  mapView: {
+    flexDirection: 'column-reverse',
+    width: 250,
+    height: 150,
+    borderRadius: 13,
+    margin: 3,
+  },
+};

package/lib/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.ts

@@ -0,0 +1,59 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { height, width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingVertical: 30,
+    paddingHorizontal: 15,
+    marginBottom: 10,
+    width,
+  },
+  card: {
+    flex: 1,
+    backgroundColor: Colors.white,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  imageContainer: {
+    width: width - 90,
+    height: height / 2.3,
+  },
+  imageResponsive: {
+    height: undefined,
+    width: undefined,
+    flex: 1,
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: width - 100,
+  },
+  title: {
+    marginVertical: 10,
+  },
+  dotsContainer: {
+    width,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 15,
+    position: 'absolute',
+    bottom: 130,
+  },
+  dot: {
+    color: Colors.gray,
+  },
+  dotSelected: {
+    color: Colors.green,
+  },
+});

package/lib/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/lib/components/DonutCountdown/style.ts

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

package/lib/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.ts

@@ -0,0 +1,25 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  floatingContainer: {
+    flex: 1,
+  },
+  container: {
+    minHeight: 50,
+    width,
+    backgroundColor: Colors.white,
+    paddingTop: 10,
+    paddingBottom: 30,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+  },
+  centered: {
+    alignItems: 'center',
+  },
+});

package/lib/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.ts

@@ -0,0 +1,40 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  footerContainer: {
+    width,
+    height: 70,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  default: {
+    backgroundColor: Colors.white,
+    borderTopColor: Colors.lightblue,
+    borderTopWidth: 1,
+  },
+  inverted: {
+    backgroundColor: Colors.violet,
+  },
+  tab: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badge: {
+    position: 'absolute',
+    top: -5,
+    left: '52%',
+    backgroundColor: Colors.red,
+    height: 18,
+    width: 18,
+    borderRadius: 9,
+    justifyContent: 'center',
+  },
+});

package/lib/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.ts

@@ -0,0 +1,34 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  headerContainer: {
+    width,
+    height: 70,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  default: {
+    backgroundColor: Colors.white,
+    borderBottomColor: Colors.lightblue,
+    borderBottomWidth: 1,
+  },
+  inverted: {
+    backgroundColor: Colors.violet,
+  },
+  imageContainer: {
+    height: 40,
+    flex: 1,
+  },
+  imageResponsive: {
+    height: undefined,
+    width: undefined,
+    flex: 1,
+  },
+});

package/lib/components/ImagePicker/index.tsx

@@ -0,0 +1,18 @@
+import * as ExpoImagePicker from 'expo-image-picker';
+
+const ImagePicker = async (avatar: boolean = false) => {
+  const image = await ExpoImagePicker.launchImageLibraryAsync({
+    mediaTypes: ['images'],
+    allowsEditing: avatar,
+    aspect: [4, 3],
+    quality: 1,
+  });
+
+  if (image.canceled) {
+    return undefined;
+  }
+
+  return image.assets && image.assets.length > 0 ? image.assets[0].uri : undefined;
+};
+
+export default ImagePicker;

package/lib/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/lib/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/lib/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;

package/lib/components/ImageViewer/style.ts

@@ -0,0 +1,38 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width, height } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 35,
+    top: 70,
+    zIndex: 9999,
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.lightblue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  body: {
+    width,
+    height,
+    alignSelf: 'center',
+    position: 'relative',
+  },
+  activityIndicator: {
+    top: height / 2 - 100,
+    left: width / 2 - 20,
+    position: 'absolute',
+  },
+});