@holper/react-native-holper-storybook 0.6.96 → 0.6.97

package/lib/components/Button/index.js

@@ -11,8 +11,8 @@ const Button = ({
   disabled,
   isLoading,
   bordered,
-  variant,
-  size,
+  variant = 'primary',
+  size = 'medium',
   noShadow,
   style: customStyle,
   debounceDelay = 0,

package/lib/components/Input/index.js

@@ -5,8 +5,8 @@ import style from './style';
 import { Colors } from '../../configs/constants';
 
 const Input = ({
-  variant,
-  size,
+  variant = 'default',
+  size = 'fixed',
   disabled,
   leftIcon,
   leftIconWide,
@@ -15,7 +15,7 @@ const Input = ({
   count,
   rightIcon,
   value,
-  maxLength,
+  maxLength = 100,
   ...props
 }) => (
   <View style={style.container}>

package/lib/components/InputPin/index.js

@@ -5,22 +5,24 @@ import { times } from 'lodash';
 import Text from '../Text';
 import style from './style';
 
-const InputPin = ({values}) => (
+const InputPin = ({ values = [] }) => (
   <View style={style.container}>
     {times(4, (index) => (
       <View style={style.input} key={`value-${index}`}>
-        <Text size='large' weight='semiBold'>{values[index]}</Text>
+        <Text size='large' weight='semiBold'>
+          {values[index]}
+        </Text>
       </View>
     ))}
   </View>
 );
 
 InputPin.defaultProps = {
-  values: []
+  values: [],
 };
 
 InputPin.propTypes = {
-  values: PropTypes.arrayOf(PropTypes.number)
+  values: PropTypes.arrayOf(PropTypes.number),
 };
 
 export default InputPin;

package/lib/components/NavigationTitle/index.js

@@ -6,27 +6,40 @@ import Text from '../Text';
 import { Colors } from '../../configs/constants';
 import style from './style';
 
-const NavigationTitle = ({type, title, noShadow, xlarge, blockNavigation, onPress}) => (
-  <View style={[
-    style.container,
-    type === 'close' ? style.containerClose : style.containerBack,
-    noShadow ? style.noShadow : {}
-  ]}>
+const NavigationTitle = ({
+  type = 'close',
+  title,
+  noShadow,
+  xlarge,
+  blockNavigation,
+  onPress,
+}) => (
+  <View
+    style={[
+      style.container,
+      type === 'close' ? style.containerClose : style.containerBack,
+      noShadow ? style.noShadow : {},
+    ]}
+  >
     {!blockNavigation && (
       <>
         {type === 'back' && (
           <TouchableOpacity onPress={onPress} style={style.buttonBack}>
-            <Ionicons name='arrow-back-outline' size={20} color={Colors.darkblue} />
+            <Ionicons
+              name='arrow-back-outline'
+              size={20}
+              color={Colors.darkblue}
+            />
           </TouchableOpacity>
         )}
       </>
     )}
     {typeof title === 'string' ? (
-      <Text size={xlarge ? 'extra-large' : 'large'} weight='semiBold'>{title}</Text>
-    ) : (
-      <>
+      <Text size={xlarge ? 'extra-large' : 'large'} weight='semiBold'>
         {title}
-      </>
+      </Text>
+    ) : (
+      <>{title}</>
     )}
     {!blockNavigation && (
       <>
@@ -46,7 +59,7 @@ NavigationTitle.defaultProps = {
   noShadow: false,
   xlarge: false,
   blockNavigation: false,
-  onPress: () => {}
+  onPress: () => {},
 };
 
 NavigationTitle.propTypes = {
@@ -55,7 +68,7 @@ NavigationTitle.propTypes = {
   noShadow: PropTypes.bool,
   xlarge: PropTypes.bool,
   blockNavigation: PropTypes.bool,
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
 };
 
 export default NavigationTitle;

package/lib/components/Notification/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View } from 'react-native';
-import {ImagePropTypes} from 'deprecated-react-native-prop-types';
+import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import Text from '../Text';
 import ImageResponsive from '../ImageResponsive';
 import { Colors } from '../../configs/constants';
@@ -9,32 +9,52 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import moment from 'moment';
 import style from './style';
 
-const Notification = ({ first, active, hideAvatar, avatar, title, description, date, onPress }) => {
-  return(
+const Notification = ({
+  first,
+  active,
+  hideAvatar,
+  avatar,
+  title,
+  description,
+  date = moment().fromNow(),
+  onPress,
+}) => {
+  return (
     <TouchableOpacity
       style={[
         style.container,
         first ? style.first : {},
-        active ? style.active : {}
+        active ? style.active : {},
       ]}
       onPress={onPress}
     >
-      {!hideAvatar && <ImageResponsive source={avatar} avatar style={style.avatar}/>}
+      {!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}/>}
+            {active && (
+              <Ionicons
+                name='ellipse'
+                color={Colors.green}
+                size={12}
+                style={style.icon}
+              />
+            )}
           </View>
-          <Text color='light' size='tiny' style={style.time}>{moment(date).fromNow()}</Text>
+          <Text color='light' size='tiny' style={style.time}>
+            {moment(date).fromNow()}
+          </Text>
         </View>
         <Text color='light' size='small' ellipsizeMode='tail' numberOfLines={3}>
           {description}
         </Text>
       </View>
     </TouchableOpacity>
-  )
-}
+  );
+};
 
 Notification.defaultProps = {
   first: false,
@@ -44,7 +64,7 @@ Notification.defaultProps = {
   title: '',
   description: '',
   date: moment().fromNow(),
-  onPress: () => {}
+  onPress: () => {},
 };
 
 Notification.propTypes = {
@@ -55,7 +75,7 @@ Notification.propTypes = {
   title: PropTypes.string,
   description: PropTypes.string,
   date: PropTypes.instanceOf(moment),
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
 };
 
 export default Notification;

package/lib/components/Select/index.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { View } from "react-native";
-import PropTypes from "prop-types";
-import DropDownPicker from "react-native-dropdown-picker";
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import PropTypes from 'prop-types';
+import DropDownPicker from 'react-native-dropdown-picker';
 import style, {
   includesSelect,
   placeholderStyle,
@@ -9,14 +9,14 @@ import style, {
   listItemContainerStyle,
   selectedItemLabelStyle,
   textStyle,
-} from "./style";
-import { useEffect } from "react";
+} from './style';
+import { useEffect } from 'react';
 
 const Select = ({
   value,
   onValueChange,
-  items,
-  variant,
+  items = [],
+  variant = 'default',
   disabled,
   fitToContainer,
   placeholder,
@@ -50,11 +50,11 @@ const Select = ({
         listItemLabelStyle={listItemLabelStyle}
         listItemContainerStyle={listItemContainerStyle}
         selectedItemLabelStyle={selectedItemLabelStyle}
-        listMode="MODAL"
+        listMode='MODAL'
         textStyle={textStyle}
         dropDownContainerStyle={{
           ...includesSelect[variant],
-          height: "auto",
+          height: 'auto',
         }}
       />
     </View>
@@ -62,8 +62,8 @@ const Select = ({
 };
 
 Select.defaultProps = {
-  variant: "default",
-  placeholder: " ",
+  variant: 'default',
+  placeholder: ' ',
   disabled: false,
   fitToContainer: false,
   onValueChange: () => {},
@@ -72,7 +72,7 @@ Select.defaultProps = {
 };
 
 Select.propTypes = {
-  variant: PropTypes.oneOf(["default", "completed", "error"]),
+  variant: PropTypes.oneOf(['default', 'completed', 'error']),
   placeholder: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   fitToContainer: PropTypes.bool,

package/lib/components/SwipeablePanel/index.js

@@ -1,4 +1,4 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   View,
@@ -8,19 +8,19 @@ import {
   PanResponder,
   TouchableWithoutFeedback,
   Platform,
-  TouchableOpacity
+  TouchableOpacity,
 } from 'react-native';
-import {getStatusBarHeight} from 'react-native-status-bar-height';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import {CountdownCircleTimer} from 'react-native-countdown-circle-timer';
-import {Colors} from '../../configs/constants';
+import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';
+import { Colors } from '../../configs/constants';
 import style from './style';
 
-const {height: screenHeight} = Dimensions.get('window');
+const { height: screenHeight } = Dimensions.get('window');
 
 const STATUS = {
   MEDIUM: 0,
-  LARGE: 1
+  LARGE: 1,
 };
 
 const calcMarginTop = () => {
@@ -32,26 +32,28 @@ const calcMarginTop = () => {
 };
 
 const SwipeablePanel = ({
-                          offset,
-                          maximized,
-                          lockPanel,
-                          autoMaximize,
-                          closeButton,
-                          closeAfterSeconds,
-                          onClose,
-                          avoidScroll,
-                          children
-                        }) => {
-  const LARGE_PANEL_HEIGHT = (screenHeight - offset) - calcMarginTop(); // This is the margin top
+  offset = 0,
+  maximized,
+  lockPanel,
+  autoMaximize,
+  closeButton,
+  closeAfterSeconds = 0,
+  onClose,
+  avoidScroll,
+  children,
+}) => {
+  const LARGE_PANEL_HEIGHT = screenHeight - offset - calcMarginTop(); // This is the margin top
   const MEDIUM_PANEL_HEIGHT = 400; // Fixed height
 
   const [closeButtonClicked, setCloseButtonClicked] = useState(false);
   const [status, setStatus] = useState(STATUS.LARGE);
   const [animatedValueY, setAnimatedValueY] = useState(LARGE_PANEL_HEIGHT);
-  const pan = useRef(new Animated.ValueXY({x: 0, y: LARGE_PANEL_HEIGHT})).current;
+  const pan = useRef(
+    new Animated.ValueXY({ x: 0, y: LARGE_PANEL_HEIGHT })
+  ).current;
 
   useEffect(() => {
-    pan.y.addListener(({value}) => setAnimatedValueY(value));
+    pan.y.addListener(({ value }) => setAnimatedValueY(value));
     _animateTo(maximized ? STATUS.MEDIUM : STATUS.LARGE, true);
     if (autoMaximize) {
       setTimeout(() => _animateTo(STATUS.MEDIUM), 2000);
@@ -71,10 +73,13 @@ const SwipeablePanel = ({
           y: animatedValueY,
         });
 
-        pan.setValue({x: 0, y: 0});
+        pan.setValue({ x: 0, y: 0 });
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (status === STATUS.MEDIUM && Math.abs(pan.y._value) <= pan.y._offset) {
+        if (
+          status === STATUS.MEDIUM &&
+          Math.abs(pan.y._value) <= pan.y._offset
+        ) {
           pan.setValue({
             x: 0,
             y: gestureState.dy,
@@ -91,7 +96,7 @@ const SwipeablePanel = ({
         } else if (gestureState.dy > 100 || gestureState.vy > 0.5) {
           _animateTo(STATUS.MEDIUM);
         }
-      }
+      },
     })
   ).current;
 
@@ -115,7 +120,7 @@ const SwipeablePanel = ({
     setStatus(newStatus);
 
     Animated.spring(pan, {
-      toValue: {x: 0, y: newY},
+      toValue: { x: 0, y: newY },
       tension: 80,
       friction: 25,
       useNativeDriver: true,
@@ -126,16 +131,16 @@ const SwipeablePanel = ({
 
   const renderContent = () => (
     <TouchableWithoutFeedback onPress={() => _animateTo(STATUS.MEDIUM)}>
-      <View style={style.contentContainer}>
-        {children}
-      </View>
+      <View style={style.contentContainer}>{children}</View>
     </TouchableWithoutFeedback>
   );
 
   return (
     <Animated.View style={style.background}>
-      <TouchableWithoutFeedback onPress={() => maximized ? null : _animateTo(STATUS.LARGE)}>
-        <View style={style.backgroundLayer}/>
+      <TouchableWithoutFeedback
+        onPress={() => (maximized ? null : _animateTo(STATUS.LARGE))}
+      >
+        <View style={style.backgroundLayer} />
       </TouchableWithoutFeedback>
       <Animated.View
         style={[
@@ -143,21 +148,24 @@ const SwipeablePanel = ({
           {
             bottom: MEDIUM_PANEL_HEIGHT - 1,
             height: LARGE_PANEL_HEIGHT,
-            transform: pan.getTranslateTransform()
+            transform: pan.getTranslateTransform(),
           },
         ]}
         {...panResponder.panHandlers}
       >
         <View style={style.barContainer}>
-          <View style={style.bar}/>
+          <View style={style.bar} />
         </View>
 
         {closeButton && (
-          <TouchableOpacity onPress={() => {
-            setCloseButtonClicked(true);
-            onClose();
-          }} style={style.closeButton}>
-            <Ionicons name='close-outline' size={20} color={Colors.darkblue}/>
+          <TouchableOpacity
+            onPress={() => {
+              setCloseButtonClicked(true);
+              onClose();
+            }}
+            style={style.closeButton}
+          >
+            <Ionicons name='close-outline' size={20} color={Colors.darkblue} />
           </TouchableOpacity>
         )}
 
@@ -175,8 +183,8 @@ const SwipeablePanel = ({
               size={40}
               strokeWidth={4}
             >
-              {({remainingTime, animatedColor}) => (
-                <Animated.Text style={{color: animatedColor, fontSize: 14}}>
+              {({ remainingTime, animatedColor }) => (
+                <Animated.Text style={{ color: animatedColor, fontSize: 14 }}>
                   {remainingTime}
                 </Animated.Text>
               )}
@@ -185,9 +193,7 @@ const SwipeablePanel = ({
         )}
 
         {avoidScroll ? (
-          <>
-            {renderContent()}
-          </>
+          <>{renderContent()}</>
         ) : (
           <ScrollView
             onTouchStart={() => false}
@@ -199,7 +205,6 @@ const SwipeablePanel = ({
             {renderContent()}
           </ScrollView>
         )}
-
       </Animated.View>
     </Animated.View>
   );
@@ -213,8 +218,7 @@ SwipeablePanel.defaultProps = {
   closeButton: false,
   avoidScroll: false,
   closeAfterSeconds: 0,
-  onClose: () => {
-  }
+  onClose: () => {},
 };
 
 SwipeablePanel.propTypes = {
@@ -225,7 +229,7 @@ SwipeablePanel.propTypes = {
   closeAfterSeconds: PropTypes.number,
   closeButton: PropTypes.bool,
   avoidScroll: PropTypes.bool,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
 };
 
 export default SwipeablePanel;

package/lib/components/Switch/index.js

@@ -3,25 +3,39 @@ import PropTypes from 'prop-types';
 import { Switch as RNSwitch, Platform } from 'react-native';
 import { Colors } from '../../configs/constants';
 
-const Switch = ({ value, size, ...props }) => (
+const Switch = ({ value, size = 'medium', ...props }) => (
   <RNSwitch
     trackColor={{
       false: Colors.lightblue,
-      true: Colors.lightblue
+      true: Colors.lightblue,
     }}
     thumbColor={value ? Colors.green : Colors.midblue}
     ios_backgroundColor={Colors.white}
     value={value}
     style={{
-      transform: [{
-        scaleX: size === 'small' ?
-          (Platform.OS === 'ios' ? .5 : .7) :
-          (Platform.OS === 'ios' ? .7 : .9)
-      }, {
-        scaleY: size === 'small' ?
-          (Platform.OS === 'ios' ? .5 : .7) :
-          (Platform.OS === 'ios' ? .7 : .9)
-      }] }}
+      transform: [
+        {
+          scaleX:
+            size === 'small'
+              ? Platform.OS === 'ios'
+                ? 0.5
+                : 0.7
+              : Platform.OS === 'ios'
+              ? 0.7
+              : 0.9,
+        },
+        {
+          scaleY:
+            size === 'small'
+              ? Platform.OS === 'ios'
+                ? 0.5
+                : 0.7
+              : Platform.OS === 'ios'
+              ? 0.7
+              : 0.9,
+        },
+      ],
+    }}
     {...props}
   />
 );
@@ -30,14 +44,14 @@ Switch.defaultProps = {
   onValueChange: () => {},
   value: false,
   disabled: false,
-  size: 'medium'
+  size: 'medium',
 };
 
 Switch.propTypes = {
   onValueChange: PropTypes.func,
   value: PropTypes.bool,
   disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['medium', 'small'])
+  size: PropTypes.oneOf(['medium', 'small']),
 };
 
 export default Switch;

package/lib/components/Text/index.js

@@ -5,12 +5,12 @@ import { TextPropTypes } from 'deprecated-react-native-prop-types';
 import style from './style';
 
 const Text = ({
-  variant,
-  size,
-  color,
-  weight,
-  align,
-  style: customStyle,
+  variant = 'default',
+  size = 'medium',
+  color = 'dark',
+  weight = 'regular',
+  align = 'left',
+  style: customStyle = {},
   children,
   ...props
 }) => (

package/lib/components/Textarea/index.js

@@ -5,9 +5,9 @@ import { Colors } from '../../configs/constants';
 import style from './style';
 
 const Textarea = ({
-  variant,
+  variant = 'default',
   disabled,
-  numberOfLines,
+  numberOfLines = 4,
   fitToContainer,
   ...props
 }) => (

package/lib/components/TimeOutButton/index.js

@@ -12,7 +12,7 @@ const { width } = Dimensions.get('window');
 const BUTTON_WIDTH = width * 0.6;
 
 const TimeOutButton = forwardRef(
-  ({ onPress, time, warning, children }, ref) => {
+  ({ onPress, time = 3000, warning, children }, ref) => {
     const [elapsedTime, setElapsedTime] = useState(0);
     const [interval, setLocalInterval] = useState();
 

package/lib/components/VirtualKeyboard/index.js

@@ -5,54 +5,69 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import Text from '../Text';
 import style from './style';
 
-const keys = [{
-  key: <Text size='extra-large'>1</Text>,
-  value: 1
-},{
-  key: <Text size='extra-large'>2</Text>,
-  value: 2
-},{
-  key: <Text size='extra-large'>3</Text>,
-  value: 3
-},{
-  key: <Text size='extra-large'>4</Text>,
-  value: 4
-},{
-  key: <Text size='extra-large'>5</Text>,
-  value: 5
-},{
-  key: <Text size='extra-large'>6</Text>,
-  value: 6
-},{
-  key: <Text size='extra-large'>7</Text>,
-  value: 7
-},{
-  key: <Text size='extra-large'>8</Text>,
-  value: 8
-},{
-  key: <Text size='extra-large'>9</Text>,
-  value: 9
-},{
-  key: <Ionicons name='finger-print-outline' style={style.icon} />,
-  value: 'biometrics'
-},{
-  key: <Text size='extra-large'>0</Text>,
-  value: 0
-},{
-  key:  <Ionicons name='backspace-outline' style={style.icon} />,
-  value: 'back'
-}];
+const keys = [
+  {
+    key: <Text size='extra-large'>1</Text>,
+    value: 1,
+  },
+  {
+    key: <Text size='extra-large'>2</Text>,
+    value: 2,
+  },
+  {
+    key: <Text size='extra-large'>3</Text>,
+    value: 3,
+  },
+  {
+    key: <Text size='extra-large'>4</Text>,
+    value: 4,
+  },
+  {
+    key: <Text size='extra-large'>5</Text>,
+    value: 5,
+  },
+  {
+    key: <Text size='extra-large'>6</Text>,
+    value: 6,
+  },
+  {
+    key: <Text size='extra-large'>7</Text>,
+    value: 7,
+  },
+  {
+    key: <Text size='extra-large'>8</Text>,
+    value: 8,
+  },
+  {
+    key: <Text size='extra-large'>9</Text>,
+    value: 9,
+  },
+  {
+    key: <Ionicons name='finger-print-outline' style={style.icon} />,
+    value: 'biometrics',
+  },
+  {
+    key: <Text size='extra-large'>0</Text>,
+    value: 0,
+  },
+  {
+    key: <Ionicons name='backspace-outline' style={style.icon} />,
+    value: 'back',
+  },
+];
 
 const VirtualKeyboard = ({ onPress, hideBiometrics }) => (
   <View style={style.container}>
-    {keys.map(({key, value}) => (
+    {keys.map(({ key, value }) => (
       <TouchableOpacity
         key={`key-${value}`}
         style={style.button}
-        onPress={() => onPress(value === 'biometrics' && hideBiometrics ? null : value)}
+        onPress={() =>
+          onPress(value === 'biometrics' && hideBiometrics ? null : value)
+        }
         disabled={value === 'biometrics' && hideBiometrics}
       >
-        {value === 'biometrics' && hideBiometrics ? <Text>{' '}</Text> : key}
+        {value === 'biometrics' && hideBiometrics ? <Text> </Text> : key}
       </TouchableOpacity>
     ))}
   </View>
@@ -60,12 +75,12 @@ const VirtualKeyboard = ({ onPress, hideBiometrics }) => (
 
 VirtualKeyboard.defaultProps = {
   onPress: () => {},
-  hideBiometrics: false
+  hideBiometrics: false,
 };
 
 VirtualKeyboard.propTypes = {
   onPress: PropTypes.func,
-  hideBiometrics: PropTypes.bool
+  hideBiometrics: PropTypes.bool,
 };
 
 export default VirtualKeyboard;

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.96",
+  "version": "0.6.97",
   "license": "MIT",
   "files": [
     "lib",