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

package/components/Text/style.ts

@@ -1,101 +0,0 @@
-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/components/Textarea/index.tsx

@@ -1,26 +0,0 @@
-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/components/Textarea/style.ts

@@ -1,38 +0,0 @@
-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/components/TimeOutButton/index.tsx

@@ -1,67 +0,0 @@
-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/components/TimeOutButton/style.ts

@@ -1,42 +0,0 @@
-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/components/Toast/index.tsx

@@ -1,34 +0,0 @@
-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/components/Toast/style.ts

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

package/components/UploadDocument/index.tsx

@@ -1,179 +0,0 @@
-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/components/UploadDocument/style.ts

@@ -1,57 +0,0 @@
-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/components/VirtualKeyboard/index.tsx

@@ -1,75 +0,0 @@
-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/components/VirtualKeyboard/style.ts

@@ -1,25 +0,0 @@
-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/components/index.ts

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