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

package/lib/components/DeckSwiper/index.js

@@ -0,0 +1,118 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { View, Image } from 'react-native';
+import Swiper from 'react-native-deck-swiper';
+import Entypo from 'react-native-vector-icons/Entypo';
+import Text from '../Text';
+import Button from '../Button';
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+const DeckSwiper = ({ data, inverted, nextText, onChange, onFinish }) => {
+  const swiper = useRef(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);
+          onFinish();
+        }}
+        onSwipedRight={(index) => {
+          setIndex(index - 1);
+          onChange(index - 1);
+        }}
+        onSwipedLeft={(index) => {
+          setIndex(index + 1);
+          onChange(index + 1);
+        }}
+        cardIndex={index}
+        backgroundColor={Colors.white}
+        stackSize={2}
+        verticalSwipe={false}
+        showSecondCard={true}
+        disableRightSwipe={index === 0}
+        goBackToPreviousCardOnSwipeRight={true}
+        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>
+          </>
+        )}
+      </Swiper>
+    </>
+  );
+};
+
+DeckSwiper.defaultProps = {
+  data: [],
+  inverted: false,
+  nextText: ' ',
+  useUri: false,
+  onChange: () => {},
+  onfinish: () => {},
+};
+
+DeckSwiper.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.string,
+      title: PropTypes.string,
+      description: PropTypes.string,
+    })
+  ),
+  inverted: PropTypes.bool,
+  nextText: PropTypes.string,
+  onChange: PropTypes.func,
+  onFinish: PropTypes.func,
+};
+
+export default DeckSwiper;

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

@@ -1,10 +1,9 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import {Dimensions} from 'react-native';
+import {Colors} from '../../configs/constants';
 
-import { Colors } from '../../configs/constants';
+const {height, width} = Dimensions.get('window');
 
-const { height, width } = Dimensions.get('window');
-
-export default StyleSheet.create({
+export default {
   container: {
     position: 'absolute',
     bottom: 0,
@@ -14,7 +13,7 @@ export default StyleSheet.create({
     paddingVertical: 30,
     paddingHorizontal: 15,
     marginBottom: 10,
-    width,
+    width
   },
   card: {
     flex: 1,
@@ -29,17 +28,17 @@ export default StyleSheet.create({
   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,
@@ -51,9 +50,9 @@ export default StyleSheet.create({
     bottom: 130,
   },
   dot: {
-    color: Colors.gray,
+    color: Colors.gray
   },
   dotSelected: {
-    color: Colors.green,
-  },
-});
+    color: Colors.green
+  }
+};

package/lib/components/FlashMessage/index.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { Platform } from "react-native";
+import PropTypes from "prop-types";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import RNFlashMessage, {
+  showMessage,
+  renderFlashMessageIcon,
+} from "react-native-flash-message";
+import { Colors } from "../../configs/constants";
+
+export const customRenderFlashMessageIcon = (
+  icon = "success",
+  style = {},
+  customProps = {}
+) => {
+  switch (icon) {
+    case "success":
+      return (
+        <Ionicons
+          name="checkmark-circle-outline"
+          color={Colors.darkergreen}
+          size={30}
+        />
+      );
+    case "error":
+      return (
+        <Ionicons
+          name="alert-circle-outline"
+          color={Colors.darkerred}
+          size={30}
+        />
+      );
+  }
+
+  // it's good to inherit the original method...
+  return renderFlashMessageIcon(icon, style, customProps);
+};
+
+const statusBarHeight = Platform.OS === "android" ? { statusBarHeight: 5 } : {};
+
+export const sendMessage = ({ variant, message, description }) => {
+  return showMessage({
+    position: "top",
+    message,
+    description,
+    icon: variant,
+    type: variant,
+    backgroundColor:
+      variant === "success" ? Colors.lightergreen : Colors.lightertred,
+    color: variant === "success" ? Colors.darkergreen : Colors.darkerred,
+    hideOnPress: true,
+    duration: 5000,
+    ...statusBarHeight,
+  });
+};
+
+sendMessage.defaultProps = {
+  options: {
+    variant: "success",
+    message: " ",
+    description: " ",
+  },
+};
+
+sendMessage.propTypes = {
+  options: PropTypes.shape({
+    variant: PropTypes.oneOf(["success", "error"]),
+    message: PropTypes.string,
+    description: PropTypes.string,
+  }),
+};
+
+const FlashMessage = () => {
+  return (
+    <RNFlashMessage
+      renderFlashMessageIcon={customRenderFlashMessageIcon}
+      titleStyle={{ fontFamily: "poppins_bold" }}
+      textStyle={{ fontFamily: "poppins_regular" }}
+    />
+  );
+};
+
+export default FlashMessage;

package/lib/components/FloatingContainer/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  View,
+  ScrollView,
+  RefreshControl,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import style from './style';
+
+const FloatingContainer = ({
+  useRefreshControl,
+  onRefresh,
+  isRefreshing,
+  children,
+  floatingComponent,
+  centered,
+  floatingContainerStyle,
+  disableScroll,
+}) => (
+  <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} />
+        ) : null
+      }
+    >
+      {children}
+    </ScrollView>
+    <View style={[style.container, floatingContainerStyle]}>
+      {floatingComponent}
+    </View>
+  </KeyboardAvoidingView>
+);
+
+FloatingContainer.defaultProps = {
+  useRefreshControl: false,
+  isRefreshing: false,
+  centered: false,
+  onRefresh: () => {},
+  children: null,
+  floatingComponent: null,
+  disableScroll: false,
+  floatingContainerStyle: {},
+};
+
+FloatingContainer.propTypes = {
+  useRefreshControl: PropTypes.bool,
+  isRefreshing: PropTypes.bool,
+  centered: PropTypes.bool,
+  onRefresh: PropTypes.func,
+  children: PropTypes.node,
+  floatingComponent: PropTypes.node,
+  disableScroll: PropTypes.bool,
+  floatingContainerStyle: PropTypes.any,
+};
+
+export default FloatingContainer;

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

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

package/lib/components/Footer/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import style from './style';
+
+const Footer = ({ inverted, tabs }) => {
+  const renderTab = () =>
+    tabs.map((tab, index) => (
+      <TouchableOpacity
+        key={`tab-${index}`}
+        style={style.tab}
+        onPress={tab.onPress}
+      >
+        <Ionicons
+          name={tab.icon}
+          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>
+  );
+};
+
+Footer.defaultProps = {
+  inverted: false,
+  tabs: [],
+};
+
+Footer.propTypes = {
+  inverted: PropTypes.bool,
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      onPress: PropTypes.func,
+      text: PropTypes.string,
+      icon: PropTypes.string,
+      badge: PropTypes.number,
+    })
+  ),
+};
+
+export default Footer;

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

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

package/lib/components/Header/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, TouchableOpacity, Image } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+const Header = ({ inverted, logo, right, onMenuPress }) => (
+  <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>
+);
+
+Header.defaultProps = {
+  inverted: false,
+  logo: null,
+  right: null,
+  onMenuPress: () => {},
+};
+
+Header.propTypes = {
+  inverted: PropTypes.bool,
+  logo: PropTypes.any.isRequired,
+  right: PropTypes.node,
+  onMenuPress: PropTypes.func,
+};
+
+export default Header;

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

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

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

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

package/lib/components/ImageResponsive/index.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Image, View } from 'react-native';
+import style from './style';
+
+const ImageResponsive = ({ source, style: customStyle, avatar, ...props }) => {
+  const [width, setWidth] = useState(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>
+  );
+};
+
+ImageResponsive.defaultProps = {
+  style: {},
+  source: null,
+  avatar: false,
+};
+
+ImageResponsive.propTypes = {
+  style: PropTypes.any,
+  source: PropTypes.any.isRequired,
+  avatar: PropTypes.bool,
+};
+
+export default ImageResponsive;

package/lib/components/ImageResponsive/style.js

@@ -0,0 +1,7 @@
+export default {
+  responsiveImage: {
+    height: undefined,
+    width: undefined,
+    flex: 1
+  }
+};

package/lib/components/ImageViewer/index.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  ActivityIndicator,
+  Image,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import ImageResponsive from '../ImageResponsive';
+import { Colors } from '../../configs/constants';
+import style from './style';
+import PropTypes from 'prop-types';
+
+const ImageViewer = ({ source, style: imageStyle, ...props }) => {
+  const [loading, setLoading] = useState(true);
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity onPress={() => setVisible(true)}>
+        <ImageResponsive source={source} style={imageStyle} {...props} />
+      </TouchableOpacity>
+
+      <Modal
+        animationType='slide'
+        transparent={true}
+        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>
+    </>
+  );
+};
+
+ImageViewer.defaultProps = {
+  source: null,
+  style: {},
+};
+
+ImageViewer.propTypes = {
+  source: PropTypes.any.isRequired,
+  style: PropTypes.any,
+};
+
+export default ImageViewer;

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

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