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

package/components/DeckSwiper/index.tsx

@@ -1,90 +0,0 @@
-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/components/DeckSwiper/style.ts

@@ -1,59 +0,0 @@
-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/components/DonutCountdown/index.tsx

@@ -1,86 +0,0 @@
-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

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

package/components/FloatingContainer/index.tsx

@@ -1,35 +0,0 @@
-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/components/FloatingContainer/style.ts

@@ -1,25 +0,0 @@
-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/components/Footer/index.tsx

@@ -1,35 +0,0 @@
-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/components/Footer/style.ts

@@ -1,40 +0,0 @@
-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/components/Header/index.tsx

@@ -1,21 +0,0 @@
-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/components/Header/style.ts

@@ -1,34 +0,0 @@
-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/components/ImagePicker/index.tsx

@@ -1,18 +0,0 @@
-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/components/ImageResponsive/index.tsx

@@ -1,24 +0,0 @@
-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

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

package/components/ImageViewer/index.tsx

@@ -1,36 +0,0 @@
-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/components/ImageViewer/style.ts

@@ -1,38 +0,0 @@
-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',
-  },
-});

package/components/Input/index.tsx

@@ -1,62 +0,0 @@
-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',
-  size = 'fixed',
-  disabled,
-  leftIcon,
-  leftIconWide,
-  showLabel,
-  label,
-  count,
-  rightIcon,
-  value,
-  maxLength = 100,
-  ...props
-}: InputProps) => (
-  <View style={style.container}>
-    {showLabel && <Text style={style.label}>{label}</Text>}
-    <View style={style.inputWrapper}>
-      <TextInput
-        style={[
-          style.input,
-          style[variant],
-          style[`${size}Size`],
-          leftIcon ? style.leftIcon : {},
-          leftIconWide ? style.leftIconWide : {},
-          disabled ? style.disabled : {},
-        ]}
-        editable={!disabled}
-        allowFontScaling={false}
-        placeholderTextColor={Colors.midblue}
-        value={value}
-        maxLength={maxLength}
-        {...props}
-      />
-      {leftIcon && (
-        <View
-          style={[
-            style.leftIconContainer,
-            leftIconWide ? style.leftWideIconContainer : {},
-            disabled ? style.disabled : {},
-          ]}
-        >
-          {leftIcon}
-        </View>
-      )}
-      {rightIcon && <View style={style.rightIconContainer}>{rightIcon}</View>}
-    </View>
-    {count && (
-      <Text style={style.count}>
-        {value?.length || 0}/{maxLength}
-      </Text>
-    )}
-  </View>
-);
-
-export default Input;