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

package/stories/UploadDocument.stories.tsx

@@ -0,0 +1,179 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Alert } from 'react-native';
+
+import { UploadDocument } from '../components';
+import { Colors } from '../configs/constants';
+
+export default {
+  title: 'UploadDocument',
+  component: UploadDocument,
+};
+
+export const Default = {
+  render: () => (
+    <UploadDocument
+      title="Foto frontal"
+      description="Foto frontal de su cedula de identidad"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir documento"
+      icon={<Ionicons name="image-outline" color={Colors.darkblue} size={50} />}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={() => {}}
+    />
+  ),
+};
+
+export const AvatarType = {
+  render: () => (
+    <UploadDocument
+      title="Avatar"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir avatar"
+      icon={<Ionicons name="happy-outline" color={Colors.darkblue} size={50} />}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={() => {}}
+      isAvatarPicker
+    />
+  ),
+};
+
+export const PreloadedFile = {
+  render: () => (
+    <UploadDocument
+      title="Foto frontal"
+      description="Foto frontal de su cedula de identidad"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir documento"
+      icon={<Ionicons name="image-outline" color={Colors.darkblue} size={50} />}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={() => {}}
+      file="https://picsum.photos/200?random=1"
+    />
+  ),
+};
+
+const CompletedComponent = () => {
+  const [value, setValue] = useState<string>();
+
+  return (
+    <UploadDocument
+      title="Foto frontal"
+      description="Foto frontal de su cedula de identidad"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir documento"
+      icon={<Ionicons name="image-outline" color={Colors.darkblue} size={50} />}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={setValue}
+      completed={value !== null}
+    />
+  );
+};
+
+export const Completed = {
+  render: CompletedComponent,
+};
+
+export const Inverted = {
+  render: () => (
+    <UploadDocument
+      inverted
+      title="Foto frontal"
+      description="Foto frontal de su cedula de identidad"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir documento"
+      icon={<Ionicons name="image-outline" color={Colors.darkblue} size={50} />}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={() => {}}
+    />
+  ),
+};
+
+export const PermissionDenied = {
+  render: () => (
+    <UploadDocument
+      title="Foto frontal"
+      description="Foto frontal de su cedula de identidad"
+      uploadButtonText="Subir"
+      reUploadButtonText="Volver a subir documento"
+      icon={<Ionicons name="image-outline" color={Colors.darkblue} size={50} />}
+      onPermissionDenied={() => {
+        Alert.alert('Permission denied', 'Permission denied');
+      }}
+      mediaModal={{
+        title: 'Seleccionar origen',
+        description: 'Selecione desde donde desea cargar el archivo',
+        confirmText: 'Cámara',
+        cancelText: 'Galería',
+      }}
+      takePicture={{
+        cameraErrorMessage: 'No access to the camera',
+        requestPermissionsMessage: 'Grant access to the camera',
+        processingPictureMessage: 'Processing',
+        repeatPictureText: 'Repeat',
+        usePictureText: 'Use',
+      }}
+      onSelectImage={() => {}}
+    />
+  ),
+};

package/stories/VirtualKeyboard.stories.tsx

@@ -0,0 +1,14 @@
+import { VirtualKeyboard } from '../components';
+
+export default {
+  title: 'Virtual Keyboard',
+  component: VirtualKeyboard,
+};
+
+export const Default = {
+  render: () => <VirtualKeyboard onPress={() => {}} />,
+};
+
+export const HideBiometrics = {
+  render: () => <VirtualKeyboard onPress={() => {}} hideBiometrics />,
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    /* Bundler */
+    "jsx": "preserve",
+    "allowJs": true,
+    "resolveJsonModule": true,
+
+    /* Linting */
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "useUnknownInCatchVariables": false
+  },
+  "extends": "expo/tsconfig.base"
+}

package/utilities/ScrollView.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { ScrollView } from 'react-native';
+
+interface ScrollViewProps {
+  children: ReactNode;
+  styles?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export default ({ children, styles, contentContainerStyle }: ScrollViewProps) => (
+  <ScrollView
+    style={[{ paddingVertical: 42, paddingHorizontal: 20, flex: 1 }, styles]}
+    contentContainerStyle={contentContainerStyle}
+  >
+    {children}
+  </ScrollView>
+);

package/utilities/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollView } from './ScrollView';
+export { lightOrDark } from './utils';

package/utilities/utils.ts

@@ -0,0 +1,29 @@
+export const lightOrDark = (color: any) => {
+  let r: number, g: number, b: number;
+  // Check the format of the color, HEX or RGB?
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If RGB --> Convert it to HEX: http://gist.github.com/983661
+    color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+
+    r = Math.floor(color / (256 * 256));
+    g = Math.floor(color / 256) % 256;
+    b = color % 256;
+  }
+
+  // HSP equation from http://alienryderflex.com/hsp.html
+  const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 127.5) {
+    return 'light';
+  } else {
+    return 'dark';
+  }
+};

package/lib/components/Button/index.js

@@ -1,104 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity, ActivityIndicator } from 'react-native';
-import withPreventDoubleClick from './../PreventDoubleClick';
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-const Button = ({
-  onPress,
-  disabled,
-  isLoading,
-  bordered,
-  variant = 'primary',
-  size = 'medium',
-  noShadow,
-  style: customStyle,
-  debounceDelay = 0,
-  children,
-}) => {
-  const [isDisabled, setIsDisabled] = useState(disabled);
-
-  useEffect(() => setIsDisabled(disabled), [disabled]);
-
-  const getSpinnerColor = () => {
-    switch (variant) {
-      case 'primary':
-      case 'inverted':
-      case 'error':
-        return Colors.white;
-      default:
-        return Colors.darkblue;
-    }
-  };
-
-  const handleTap = () => {
-    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>
-  );
-};
-
-Button.defaultProps = {
-  children: null,
-  disabled: false,
-  isLoading: false,
-  bordered: false,
-  noShadow: false,
-  variant: 'primary',
-  size: 'medium',
-  style: {},
-  onPress: () => {},
-  debounceDelay: 0,
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  bordered: PropTypes.bool,
-  noShadow: PropTypes.bool,
-  variant: PropTypes.oneOf([
-    'brightblue',
-    'brightviolet',
-    'darkyellow',
-    'dim',
-    'electricblue',
-    'error',
-    'inverted',
-    'light',
-    'lightgreen',
-    'primary',
-    'secondary',
-  ]),
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
-  style: PropTypes.any,
-  onPress: PropTypes.func,
-  debounceDelay: PropTypes.number,
-};
-
-export default withPreventDoubleClick(Button);

package/lib/components/Card/index.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, TouchableOpacity } from 'react-native';
-import withPreventDoubleClick from '../PreventDoubleClick';
-import style from './style';
-
-const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
-
-const Card = (
-  { children, isButton, onPress, noShadow, style: customStyle },
-  ...props
-) => (
-  <>
-    {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>
-    )}
-  </>
-);
-
-Card.defaultProps = {
-  style: {},
-  children: null,
-  isButton: false,
-  noShadow: false,
-  onPress: () => {},
-};
-
-Card.propTypes = {
-  style: PropTypes.any,
-  children: PropTypes.node,
-  isButton: PropTypes.bool,
-  noShadow: PropTypes.bool,
-  onPress: PropTypes.func,
-};
-
-export default Card;

package/lib/components/DeckSwiper/index.js

@@ -1,118 +0,0 @@
-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/FlashMessage/index.js

@@ -1,81 +0,0 @@
-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.darkblue}
-          size={30}
-        />
-      );
-    case 'error':
-      return (
-        <Ionicons
-          name='alert-circle-outline'
-          color={Colors.darkblue}
-          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.green : Colors.lightred,
-    color: Colors.darkblue,
-    hideOnPress: true,
-    ...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

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