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

package/lib/components/Button/index.tsx

@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, TouchableOpacity } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import withPreventDoubleClick from './../PreventDoubleClick';
-import style from './style';
-
-import type { ButtonProps } from '../../configs/types';
-
-const Button = ({
-  onPress,
-  disabled,
-  isLoading,
-  bordered,
-  variant = 'primary',
-  size = 'medium',
-  noShadow,
-  style: customStyle,
-  debounceDelay = 0,
-  children,
-}: ButtonProps) => {
-  const [isDisabled, setIsDisabled] = useState<boolean>(disabled || false);
-
-  useEffect(() => setIsDisabled(disabled || false), [disabled]);
-
-  const getSpinnerColor = () => {
-    switch (variant) {
-      case 'primary':
-      case 'inverted':
-      case 'error':
-        return Colors.white;
-      default:
-        return Colors.darkblue;
-    }
-  };
-
-  const handleTap = () => {
-    if (onPress) {
-      onPress();
-    }
-    setIsDisabled(true);
-    setTimeout(() => {
-      setIsDisabled(false);
-    }, debounceDelay);
-  };
-
-  return (
-    <TouchableOpacity
-      style={[
-        style.button,
-        style[variant],
-        style[size],
-        bordered ? style.bordered : {},
-        isDisabled ? style.disabled : {},
-        noShadow ? style.noShadow : {},
-        customStyle,
-      ]}
-      disabled={isLoading || isDisabled}
-      onPress={handleTap}
-    >
-      {isLoading ? <ActivityIndicator color={getSpinnerColor()} size={28} /> : children}
-    </TouchableOpacity>
-  );
-};
-
-export default withPreventDoubleClick(Button);

package/lib/components/Card/index.tsx

@@ -1,33 +0,0 @@
-import type { TouchableOpacityProps, ViewProps } from 'react-native';
-
-import { TouchableOpacity, View } from 'react-native';
-
-import withPreventDoubleClick from '../PreventDoubleClick';
-import style from './style';
-
-import type { CardProps } from '../../configs/types';
-
-const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
-
-const Card = (
-  { children, isButton, onPress, noShadow, style: customStyle }: CardProps,
-  ...props: (TouchableOpacityProps & ViewProps)[]
-) => (
-  <>
-    {isButton ? (
-      <TappedTouchableOpacity
-        onPress={onPress}
-        style={[style.card, customStyle, noShadow ? style.noShadow : {}]}
-        {...props}
-      >
-        {children}
-      </TappedTouchableOpacity>
-    ) : (
-      <View style={[style.card, customStyle, noShadow ? style.noShadow : {}]} {...props}>
-        {children}
-      </View>
-    )}
-  </>
-);
-
-export default Card;

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

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/MenuItem/index.tsx

@@ -1,25 +0,0 @@
-import { Feather } 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 { MenuItemProps } from '../../configs/types';
-
-const MenuItem = ({ icon, text, disabled, onPress, last }: MenuItemProps) => (
-  <TouchableOpacity
-    style={[style.menuItem, last ? style.last : {}, disabled ? style.disabled : {}]}
-    onPress={onPress}
-    disabled={disabled}
-  >
-    <View style={style.left}>
-      {icon}
-      <Text style={style.text}>{text}</Text>
-    </View>
-
-    <Feather name="chevron-right" size={16} color={Colors.darkblue} style={style.rightIcon} />
-  </TouchableOpacity>
-);
-
-export default MenuItem;

package/lib/components/Notification/index.tsx

@@ -1,44 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { TouchableOpacity, View } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import ImageResponsive from '../ImageResponsive';
-import Text from '../Text';
-import style from './style';
-
-import type { NotificationProps } from '../../configs/types';
-
-dayjs.extend(relativeTime);
-
-const Notification = ({
-  first,
-  active,
-  hideAvatar,
-  avatar,
-  title,
-  description,
-  date = dayjs().fromNow(),
-  onPress,
-}: NotificationProps) => (
-  <TouchableOpacity style={[style.container, first ? style.first : {}, active ? style.active : {}]} onPress={onPress}>
-    {!hideAvatar && <ImageResponsive source={avatar} avatar style={style.avatar} />}
-    <View style={style.textContainer}>
-      <View style={style.text}>
-        <View style={style.textInner}>
-          <Text weight="semiBold">{title}</Text>
-          {active && <Ionicons name="ellipse" color={Colors.green} size={12} style={style.icon} />}
-        </View>
-        <Text color="light" size="tiny" style={style.time}>
-          {dayjs(date).fromNow()}
-        </Text>
-      </View>
-      <Text color="light" size="small" ellipsizeMode="tail" numberOfLines={3}>
-        {description}
-      </Text>
-    </View>
-  </TouchableOpacity>
-);
-
-export default Notification;

package/lib/components/PreventDoubleClick/index.tsx

@@ -1,28 +0,0 @@
-import type { ComponentType } from 'react';
-
-import { debounce } from 'lodash';
-import { PureComponent } from 'react';
-
-import type { withPreventDoubleClickProps } from '../../configs/types';
-
-function withPreventDoubleClick<P extends withPreventDoubleClickProps>(WrappedComponent: ComponentType<P>) {
-  class PreventDoubleClick extends PureComponent<P> {
-    debouncedOnPress = () => {
-      if (this.props.onPress) {
-        this.props.onPress();
-      }
-    };
-
-    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
-    static displayName: string;
-
-    render() {
-      return <WrappedComponent {...this.props} onPress={this.onPress} />;
-    }
-  }
-
-  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName || WrappedComponent.name})`;
-  return PreventDoubleClick;
-}
-
-export default withPreventDoubleClick;

package/lib/components/Select/index.tsx

@@ -1,51 +0,0 @@
-import { Feather } from '@expo/vector-icons';
-import { View } from 'react-native';
-import RNPickerSelect from 'react-native-picker-select';
-
-import style from './style';
-
-import type { SelectProps } from '../../configs/types';
-
-const Select = ({
-  disabled,
-  fitToContainer,
-  items = [],
-  onValueChange,
-  placeholder,
-  value = '',
-  variant = 'default',
-}: SelectProps) => (
-  <View style={[style.container, disabled ? style.disabled : {}, fitToContainer ? style.fit : {}]}>
-    <RNPickerSelect
-      value={value}
-      onValueChange={(val) => onValueChange?.(val)}
-      disabled={disabled}
-      placeholder={{
-        label: placeholder,
-        value: '',
-        color: style.placeholderStyle.color,
-      }}
-      items={items}
-      Icon={() => <Feather name="chevron-down" size={24} style={style.iconStyle} />}
-      useNativeAndroidPickerStyle={false}
-      pickerProps={{ mode: 'dropdown', enabled: !disabled, itemStyle: style.itemStyle }}
-      style={{
-        inputIOSContainer: { pointerEvents: 'none', ...style.basicStyle, ...style[`${variant}Container`] },
-        inputAndroidContainer: { ...style.basicStyle, ...style[`${variant}Container`] },
-        inputIOS: {
-          ...style.fontStyle,
-          ...(variant === 'error' ? style.errorFontStyle : {}),
-        },
-        inputAndroid: {
-          ...style.fontStyle,
-          ...(variant === 'error' ? style.errorFontStyle : {}),
-        },
-        placeholder: style.placeholderStyle,
-        chevronUp: style.selectIcon,
-        chevronDown: style.selectIcon,
-      }}
-    />
-  </View>
-);
-
-export default Select;

package/lib/components/Select/style.ts

@@ -1,64 +0,0 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { borderRadius, Colors } from '../../configs/constants';
-
-const { width } = Dimensions.get('window');
-
-export default StyleSheet.create({
-  container: {
-    width: width - 60,
-    position: 'relative',
-  },
-  fit: {
-    width: '100%',
-    position: 'relative',
-  },
-  selectIcon: {
-    marginTop: 20,
-    marginRight: 15,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  basicStyle: {
-    height: 50,
-    width: '100%',
-    borderRadius,
-    borderWidth: 1,
-    paddingHorizontal: 10,
-    backgroundColor: Colors.white,
-    marginVertical: 6,
-  },
-  defaultContainer: {
-    borderColor: Colors.midblue,
-  },
-  completedContainer: {
-    borderColor: Colors.green,
-  },
-  errorContainer: {
-    borderColor: Colors.red,
-  },
-  fontStyle: {
-    flex: 1,
-    color: Colors.darkblue,
-    fontFamily: 'poppins_regular',
-  },
-  errorFontStyle: {
-    color: Colors.red,
-  },
-  placeholderStyle: {
-    fontSize: 14,
-    fontFamily: 'poppins_regular',
-    color: Colors.midblue,
-  },
-  iconStyle: {
-    marginRight: 10,
-    marginTop: 12,
-    color: Colors.darkblue,
-  },
-  itemStyle: {
-    color: Colors.darkblue,
-    fontFamily: 'poppins_regular',
-    fontSize: 16,
-  },
-});