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

package/lib/components/Text/style.ts

@@ -0,0 +1,101 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+export default StyleSheet.create({
+  //  colors
+  dark: {
+    color: Colors.darkblue,
+  },
+  light: {
+    color: Colors.dimgray,
+  },
+  lighter: {
+    color: Colors.lightblue,
+  },
+  white: {
+    color: Colors.white,
+  },
+  green: {
+    color: Colors.green,
+  },
+  red: {
+    color: Colors.red,
+  },
+  yellow: {
+    color: Colors.yellow,
+  },
+  violet: {
+    color: Colors.violet,
+  },
+  brightblue: {
+    color: Colors.brightblue,
+  },
+  lightgold: {
+    color: Colors.lightgold,
+  },
+  darkyellow: {
+    color: Colors.darkyellow,
+  },
+  gold: {
+    color: Colors.gold,
+  },
+  brightviolet: {
+    color: Colors.brightviolet,
+  },
+  electricblue: {
+    color: Colors.electricblue,
+  },
+  midgreen: {
+    color: Colors.midgreen,
+  },
+  // variants
+  lowercase: {
+    textTransform: 'lowercase',
+  },
+  uppercase: {
+    textTransform: 'uppercase',
+  },
+  // sizes
+  tiny: {
+    fontSize: 10,
+  },
+  small: {
+    fontSize: 12,
+  },
+  medium: {
+    fontSize: 14,
+  },
+  large: {
+    fontSize: 18,
+  },
+  'extra-large': {
+    fontSize: 24,
+  },
+  huge: {
+    fontSize: 40,
+  },
+  // Weights
+  regular: {
+    fontFamily: 'poppins_regular',
+  },
+  bold: {
+    fontFamily: 'poppins_bold',
+  },
+  semiBold: {
+    fontFamily: 'poppins_semiBold',
+  },
+  // Align
+  left: {
+    textAlign: 'left',
+  },
+  center: {
+    textAlign: 'center',
+  },
+  right: {
+    textAlign: 'right',
+  },
+  justify: {
+    textAlign: 'justify',
+  },
+});

package/lib/components/Textarea/index.tsx

@@ -0,0 +1,26 @@
+import { TextInput } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { TextareaProps } from '../../configs/types';
+
+const Textarea = ({ variant = 'default', disabled, numberOfLines = 4, fitToContainer, ...props }: TextareaProps) => (
+  <TextInput
+    style={[
+      style.textarea,
+      fitToContainer ? style.fitToContainer : style.textAreaDefaultWidth,
+      { height: numberOfLines * 25 },
+      style[variant],
+      disabled ? style.disabled : {},
+    ]}
+    multiline
+    editable={!disabled}
+    numberOfLines={numberOfLines}
+    textAlignVertical="top"
+    placeholderTextColor={Colors.midblue}
+    {...props}
+  />
+);
+
+export default Textarea;

package/lib/components/Textarea/style.ts

@@ -0,0 +1,38 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  textarea: {
+    borderRadius,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+    backgroundColor: Colors.white,
+    textAlignVertical: 'center',
+    marginVertical: 6,
+  },
+  textAreaDefaultWidth: {
+    width: width - 80,
+  },
+  fitToContainer: {
+    width: '100%',
+  },
+  default: {
+    borderColor: Colors.midblue,
+  },
+  completed: {
+    borderColor: Colors.green,
+  },
+  error: {
+    borderColor: Colors.red,
+    color: Colors.red,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/lib/components/TimeOutButton/index.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+
+import style from './style';
+
+import type { TimeOutButtonProps } from '../../configs/types';
+
+const { width } = Dimensions.get('window');
+const BUTTON_WIDTH = width * 0.6;
+
+const TimeOutButton = forwardRef(({ onPress, time = 3000, warning, children }: TimeOutButtonProps, ref) => {
+  const [elapsedTime, setElapsedTime] = useState<number>(0);
+  const [interval, setLocalInterval] = useState<NodeJS.Timeout | undefined>(undefined);
+
+  useEffect(() => {
+    let isCancelled = false;
+    const timer = setInterval(() => {
+      if (!isCancelled) {
+        setElapsedTime((prevElapsedTime) => prevElapsedTime + 1);
+      }
+    }, 1);
+    setLocalInterval(timer);
+
+    return () => {
+      clearInterval(timer);
+      isCancelled = true;
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    onStop() {
+      clearInterval(interval);
+    },
+  }));
+
+  const watchInterval = () => {
+    if (elapsedTime >= time) {
+      clearInterval(interval);
+      if (onPress) onPress();
+    }
+
+    return elapsedTime <= time ? (BUTTON_WIDTH * (time - elapsedTime)) / time : BUTTON_WIDTH;
+  };
+
+  const checkWarningPercent = () => (elapsedTime <= time ? time * 0.3 > time - elapsedTime : false);
+
+  const onLocalPress = () => {
+    setElapsedTime(time);
+    clearInterval(interval);
+    if (onPress) onPress();
+  };
+
+  return (
+    <TouchableOpacity style={[style.button, style.buttonBg]} onPress={onLocalPress}>
+      <View
+        style={[
+          style.button,
+          warning ? (checkWarningPercent() ? style.buttonOverlayWarning : style.buttonOverlay) : style.buttonOverlay,
+          { width: watchInterval() },
+        ]}
+      />
+      {children}
+    </TouchableOpacity>
+  );
+});
+
+export default TimeOutButton;

package/lib/components/TimeOutButton/style.ts

@@ -0,0 +1,42 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  // Default button shape
+  button: {
+    margin: 8,
+    height: 50,
+    overflow: 'hidden',
+  },
+  // Button background
+  buttonBg: {
+    borderRadius: 10,
+    width: width * 0.6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    borderWidth: 1,
+    borderColor: Colors.lightgreen,
+    backgroundColor: Colors.lightgreen,
+    shadowColor: Colors.lightgreen,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 3,
+    elevation: 5,
+  },
+  // Button overlays
+  buttonOverlay: {
+    position: 'absolute',
+    left: -10,
+    backgroundColor: Colors.green,
+  },
+  buttonOverlayWarning: {
+    position: 'absolute',
+    left: -10,
+    backgroundColor: Colors.red,
+  },
+});

package/lib/components/Toast/index.tsx

@@ -0,0 +1,34 @@
+import { Ionicons } from '@expo/vector-icons';
+import { toast, Toaster } from 'sonner-native';
+
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { ToastMessageProps } from '../../configs/types';
+
+const Toast = () => (
+  <Toaster
+    autoWiggleOnUpdate="toast-change"
+    closeButton
+    duration={3000}
+    icons={{
+      error: <Ionicons name="alert-circle-outline" color={Colors.darkred} size={30} />,
+      success: <Ionicons name="checkmark-circle-outline" color={Colors.darkgreen} size={30} />,
+    }}
+    pauseWhenPageIsHidden
+    position="top-center"
+    richColors
+    swipeToDismissDirection="up"
+    visibleToasts={4}
+    toastOptions={{
+      titleStyle: style.titleStyle,
+      descriptionStyle: style.descriptionStyle,
+    }}
+  />
+);
+
+export const sendMessage = ({ variant, message, description }: ToastMessageProps) => {
+  toast[variant](message, { description });
+};
+
+export default Toast;

package/lib/components/Toast/style.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  titleStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_semiBold',
+  },
+  descriptionStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_regular',
+  },
+});

package/lib/components/UploadDocument/index.tsx

@@ -0,0 +1,179 @@
+import * as ExpoImagePicker from 'expo-image-picker';
+import * as MediaLibrary from 'expo-media-library';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Platform, TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import Button from '../Button';
+import ConfirmationModal from '../ConfirmationModal';
+import ImagePicker from '../ImagePicker';
+import ImageViewer from '../ImageViewer';
+import TakePicture from '../TakePicture';
+import Text from '../Text';
+import style from './style';
+
+import type { UploadDocumentProps } from '../../configs/types';
+
+const iOS = Platform.OS === 'ios';
+
+const UploadDocument = ({
+  title,
+  description,
+  icon,
+  completed,
+  isAvatarPicker,
+  uploadButtonText,
+  reUploadButtonText,
+  mediaModal,
+  takePicture,
+  inverted,
+  onSelectImage,
+  file,
+  onPermissionDenied,
+}: UploadDocumentProps) => {
+  const [showMediaModal, setShowMediaModal] = useState<boolean>(false);
+  const [showCamera, setShowCamera] = useState<boolean>(false);
+  const [image, setImage] = useState<string | { uri: string }>();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    (async () => {
+      if (iOS) {
+        await MediaLibrary.requestPermissionsAsync();
+      } else {
+        await ExpoImagePicker.getMediaLibraryPermissionsAsync();
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (!image) {
+      setImage(file);
+    }
+  }, [file, image]);
+
+  interface PickUploadMethodParams {
+    method: 'camera' | 'gallery' | string;
+  }
+
+  interface GalleryPermissionResult {
+    status: string;
+  }
+
+  const pickUploadMethod = async (method: PickUploadMethodParams['method']): Promise<void> => {
+    setShowMediaModal(false);
+
+    switch (method) {
+      case 'camera':
+        setTimeout(async () => {
+          setShowCamera(true);
+        }, 500);
+        break;
+      case 'gallery':
+        setTimeout(async () => {
+          const { status: galleryStatus }: GalleryPermissionResult = iOS
+            ? await MediaLibrary.requestPermissionsAsync()
+            : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
+
+          if (galleryStatus !== 'granted' && iOS) {
+            if (onPermissionDenied) {
+              onPermissionDenied();
+            }
+            return;
+          }
+
+          const pickedImage = await ImagePicker(isAvatarPicker);
+          if (pickedImage !== undefined) {
+            selectImage(pickedImage);
+          }
+        }, 500);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const selectImage = (selectedImage: any) => {
+    setImage(selectedImage);
+    if (onSelectImage) {
+      onSelectImage(selectedImage);
+    }
+  };
+
+  return (
+    <View style={[style.container, completed ? style.containerCompleted : {}]}>
+      {image ? (
+        <View style={style.uploadedContainer}>
+          <View>
+            <ImageViewer
+              source={{
+                uri: typeof image === 'object' ? image.uri : image,
+              }}
+              style={style.image}
+              resizeMode="cover"
+              avatar
+              onLoadEnd={() => setLoading(false)}
+            />
+            {loading && <ActivityIndicator style={style.imageSpinner} animating={loading} color={Colors.darkblue} />}
+          </View>
+          <View style={style.reUploadButtons}>
+            <Text style={style.titleUploaded} numberOfLines={1} ellipsizeMode="tail">
+              {title}
+            </Text>
+            <TouchableOpacity onPress={() => setShowMediaModal(true)}>
+              <Text size="tiny" style={style.reUpload}>
+                {reUploadButtonText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : (
+        <View style={style.noUploaded}>
+          {icon}
+          <Text size="large" style={style.title} numberOfLines={1} ellipsizeMode="tail">
+            {title}
+          </Text>
+          <Text size="small" style={style.description}>
+            {description}
+          </Text>
+          <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => setShowMediaModal(true)}>
+            <Text color="white">{uploadButtonText}</Text>
+          </Button>
+        </View>
+      )}
+
+      <ConfirmationModal
+        visible={showMediaModal}
+        inverted={inverted}
+        title={mediaModal.title}
+        onConfirm={() => pickUploadMethod('camera')}
+        confirmText={mediaModal.confirmText}
+        onCancel={() => pickUploadMethod('gallery')}
+        cancelText={mediaModal.cancelText}
+        onClose={() => setShowMediaModal(false)}
+      >
+        <Text>{mediaModal.description}</Text>
+      </ConfirmationModal>
+
+      <TakePicture
+        visible={showCamera}
+        cameraErrorMessage={takePicture.cameraErrorMessage}
+        requestPermissionsMessage={takePicture.requestPermissionsMessage}
+        processingPictureMessage={takePicture.processingPictureMessage}
+        repeatPictureText={takePicture.repeatPictureText}
+        usePictureText={takePicture.usePictureText}
+        avatar={isAvatarPicker}
+        onClose={(selectedImage) => {
+          if (selectedImage) {
+            selectImage(selectedImage);
+          }
+          setTimeout(() => {
+            setShowCamera(false);
+          }, 0);
+        }}
+      />
+    </View>
+  );
+};
+
+export default UploadDocument;

package/lib/components/UploadDocument/style.ts

@@ -0,0 +1,57 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderColor: Colors.dimgray,
+    borderRadius: 15,
+    width: width - 80,
+    padding: 15,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  containerCompleted: {
+    borderColor: Colors.green,
+  },
+  noUploaded: {
+    alignItems: 'center',
+  },
+  title: {
+    marginTop: 5,
+  },
+  titleUploaded: {
+    marginTop: 5,
+    width: width - 225,
+  },
+  description: {
+    marginBottom: 20,
+  },
+  uploadedContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  image: {
+    width: 100,
+    height: 100,
+    borderColor: Colors.dimgray,
+    borderWidth: 1,
+  },
+  imageSpinner: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  reUpload: {
+    textDecorationLine: 'underline',
+  },
+  reUploadButtons: {
+    marginLeft: 15,
+  },
+});

package/lib/components/VirtualKeyboard/index.tsx

@@ -0,0 +1,75 @@
+import { Ionicons } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import Text from '../Text';
+import style from './style';
+
+import type { VirtualKeyboardProps } from '../../configs/types';
+
+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 }: VirtualKeyboardProps) => (
+  <View style={style.container}>
+    {keys.map(({ key, value }) => (
+      <TouchableOpacity
+        key={`key-${value}`}
+        style={style.button}
+        onPress={() => onPress(value === 'biometrics' && hideBiometrics ? null : value)}
+        disabled={value === 'biometrics' && hideBiometrics}
+      >
+        {value === 'biometrics' && hideBiometrics ? <Text> </Text> : key}
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+export default VirtualKeyboard;

package/lib/components/VirtualKeyboard/style.ts

@@ -0,0 +1,25 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    width,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  button: {
+    width: width / 3.3,
+    height: width / 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    color: Colors.darkblue,
+    opacity: 0.6,
+    fontSize: 34,
+  },
+});

package/lib/components/index.ts

@@ -0,0 +1,29 @@
+export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as ConfirmationModal } from './ConfirmationModal';
+export { default as Container } from './Container';
+export { default as CustomChatView } from './CustomChatView';
+export { default as DeckSwiper } from './DeckSwiper';
+export { default as DonutCountdown } from './DonutCountdown';
+export { default as FloatingContainer } from './FloatingContainer';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as ImagePicker } from './ImagePicker';
+export { default as ImageResponsive } from './ImageResponsive';
+export { default as ImageViewer } from './ImageViewer';
+export { default as Input } from './Input';
+export { default as InputPin } from './InputPin';
+export { default as MenuItem } from './MenuItem';
+export { default as NavigationTitle } from './NavigationTitle';
+export { default as Notification } from './Notification';
+export { default as withPreventDoubleClick } from './PreventDoubleClick';
+export { default as Select } from './Select';
+export { default as SwipeablePanel } from './SwipeablePanel';
+export { default as Switch } from './Switch';
+export { default as TakePicture } from './TakePicture';
+export { default as Text } from './Text';
+export { default as Textarea } from './Textarea';
+export { default as TimeOutButton } from './TimeOutButton';
+export { sendMessage, default as Toast } from './Toast';
+export { default as UploadDocument } from './UploadDocument';
+export { default as VirtualKeyboard } from './VirtualKeyboard';