@holper/react-native-holper-storybook 0.6.102 → 0.7.1

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.js → 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/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.js → 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/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.js → 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/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.js → 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 → 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/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.js → style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width, height } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   container: {
     backgroundColor: 'rgba(0,0,0,0.9)',
     flex: 1,
@@ -34,4 +35,4 @@ export default {
     left: width / 2 - 20,
     position: 'absolute',
   },
-};
+});

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

@@ -1,8 +1,9 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { View, TextInput, Text } from 'react-native';
-import style from './style';
+import { Text, TextInput, View } from 'react-native';
+
 import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { InputProps } from '../../configs/types';
 
 const Input = ({
   variant = 'default',
@@ -17,7 +18,7 @@ const Input = ({
   value,
   maxLength = 100,
   ...props
-}) => (
+}: InputProps) => (
   <View style={style.container}>
     {showLabel && <Text style={style.label}>{label}</Text>}
     <View style={style.inputWrapper}>
@@ -58,32 +59,4 @@ const Input = ({
   </View>
 );
 
-Input.defaultProps = {
-  variant: 'default',
-  disabled: false,
-  leftIcon: null,
-  leftIconWide: false,
-  showLabel: false,
-  label: '',
-  count: false,
-  rightIcon: null,
-  value: '',
-  maxLength: 100,
-  size: 'fixed',
-};
-
-Input.propTypes = {
-  variant: PropTypes.oneOf(['default', 'completed', 'error']),
-  size: PropTypes.oneOf(['fixed', 'fit']),
-  disabled: PropTypes.bool,
-  leftIcon: PropTypes.node,
-  leftIconWide: PropTypes.bool,
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  count: PropTypes.bool,
-  rightIcon: PropTypes.node,
-  value: PropTypes.string,
-  maxLength: PropTypes.number,
-};
-
 export default Input;

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

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   container: {
     marginVertical: 8,
   },
@@ -80,23 +81,11 @@ export default {
     paddingRight: 2,
     borderRightWidth: 1,
   },
-  rightIconContainer: {
-    position: 'absolute',
-    right: 10,
-    top: 10,
-    height: 42,
-    justifyContent: 'center',
-  },
   count: {
     textAlign: 'right',
     fontSize: 12,
     color: Colors.gray,
     fontFamily: 'poppins_regular',
-    fixedSize: {
-      width: width - 80,
-    },
-    fitSize: {
-      width: '100%',
-    },
-  },
-};
+    width: '100%',
+  },
+});

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

@@ -1,15 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
 import { times } from 'lodash';
+import { View } from 'react-native';
+
 import Text from '../Text';
 import style from './style';
 
-const InputPin = ({ values = [] }) => (
+import type { InputPinProps } from '../../configs/types';
+
+const InputPin = ({ values = [] }: InputPinProps) => (
   <View style={style.container}>
     {times(4, (index) => (
       <View style={style.input} key={`value-${index}`}>
-        <Text size='large' weight='semiBold'>
+        <Text size="large" weight="semiBold">
           {values[index]}
         </Text>
       </View>
@@ -17,12 +18,4 @@ const InputPin = ({ values = [] }) => (
   </View>
 );
 
-InputPin.defaultProps = {
-  values: [],
-};
-
-InputPin.propTypes = {
-  values: PropTypes.arrayOf(PropTypes.number),
-};
-
 export default InputPin;