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

package/lib/configs/{constants.js → constants.ts}

@@ -1,77 +1,79 @@
 export const Colors = {
   // Blacks and Whites
+  darkgray: '#2E3640',
+  dimgray: '#CFCFCF',
+  gray: '#D0D0D0',
   transparent: 'transparent',
   white: '#FFFFFF',
-  gray: '#D0D0D0',
-  dimgray: '#CFCFCF',
-  darkgray: '#2E3640',
   whiteice: '#E7EAEE',
   whitepearl: '#F7F8F9',
   // Greens
+  darkgreen: '#008A2E',
+  green: '#3FE384',
   lightergreen: '#F5FEFA',
   lightgreen: '#64FFA5',
   midgreen: '#3FE39E',
-  green: '#3FE384',
   // Blues
-  lightblue: '#EFF9FF',
-  electricblue: '#3FA5F8',
-  midblue: '#727C8E',
-  darkblue: '#515C6F',
+  attentionBlue: '#dbf0fe',
+  blue: '#2A539C',
   brightblue: '#00D8FF',
+  darkblue: '#515C6F',
+  electricblue: '#3FA5F8',
+  lightblue: '#EFF9FF',
   mediumblue: '#F2F7FE',
-  blue: '#2A539C',
-  attentionBlue: '#dbf0fe',
+  midblue: '#727C8E',
   // Violet
-  lightviolet: '#FAF9FF',
   brightviolet: '#9980FA',
-  violet: '#300049',
+  lightviolet: '#FAF9FF',
   placeboPurple: '#F0ECFE',
+  violet: '#300049',
   // Reds
+  darkred: '#E60606',
   lightred: '#FFC1C1',
   red: '#FD4C4C',
   // Yellow
-  lightyellow: '#FBFDE9',
-  yellow: '#FDD100',
   darkyellow: '#FFBB87',
-  lightgold: '#ECDFAA',
   gold: '#D4AF37',
+  lightgold: '#ECDFAA',
+  lightyellow: '#FBFDE9',
+  yellow: '#FDD100',
 };
 
 export const borderRadius = 8;
 
 export const ConstantsWS = Object.freeze({
-  HIRING: 'HIRING',
   CANCELED: 'CANCELED',
   CANCELED_BY_PROFESSIONAL: 'CANCELED_BY_PROFESSIONAL',
+  CHAT: 'CHAT',
+  CLOSED: 'CLOSED',
+  HIRING: 'HIRING',
+  ISSUE: 'ISSUE',
+  MAP: 'MAP',
   NOT_CONFIRMED: 'NOT_CONFIRMED',
   NOT_STARTED: 'NOT_STARTED',
-  POSTULATION: 'POSTULATION',
   NOTIFICATION: 'NOTIFICATION',
-  CHAT: 'CHAT',
-  MAP: 'MAP',
+  POSTULATION: 'POSTULATION',
   RECOMMENDATION: 'RECOMMENDATION',
-  ISSUE: 'ISSUE',
-  CLOSED: 'CLOSED',
   USER: 'USER',
 });
 
 export const HiringStatus = Object.freeze({
-  PENDING: 'pending',
-  ON_THE_WAY: 'onTheWay',
   ARRIVAL_CONFIRMED: 'arrivalConfirmed',
+  CANCELED: 'canceled',
+  DONE: 'done',
   IN_PROGRESS: 'inProgress',
+  ON_THE_WAY: 'onTheWay',
   PAYMENT: 'payment',
   PAYMENT_ERROR: 'paymentError',
-  DONE: 'done',
-  CANCELED: 'canceled',
+  PENDING: 'pending',
   UNPAID: 'unpaid',
 });
 
 export const CouponStatus = Object.freeze({
-  PENDING: 'pending',
-  IN_USE: 'inUse',
-  EXPIRED: 'expired',
   DONE: 'DONE',
+  EXPIRED: 'expired',
+  IN_USE: 'inUse',
+  PENDING: 'pending',
 });
 
 export const NotificationsTypes = Object.freeze({
@@ -80,22 +82,22 @@ export const NotificationsTypes = Object.freeze({
   /** Professional accept immediate hiring */
   HIRING_IMMEDIATE: 'hiringImmediate',
   /** Professional accept scheduled hiring */
-  HIRING_SCHEDULED: 'hiringScheduled',
   HIRING_ACCEPTED: 'hiringAccepted',
-  HIRING_CANCELED: 'hiringCanceled',
-  HIRING_ON_THE_WAY: 'hiringOnTheWay',
   HIRING_ARRIVAL_CONFIRMED: 'hiringArrivalConfirmed',
-  HIRING_IN_PROGRESS: 'hiringInProgress',
-  HIRING_DONE: 'hiringDone',
+  HIRING_CANCELED: 'hiringCanceled',
   HIRING_DELAY: 'hiringDelay',
-  HIRING_DELAY_TRAFFIC: 'hiringDelayTraffic',
   HIRING_DELAY_ACCIDENT: 'hiringDelayAccident',
+  HIRING_DELAY_TRAFFIC: 'hiringDelayTraffic',
   HIRING_DELAY_WORK: 'hiringDelayWork',
+  HIRING_DONE: 'hiringDone',
   HIRING_EXTRA_TASK: 'hiringExtraTask',
   HIRING_EXTRA_TASK_ACCEPTED: 'hiringExtraTaskAccepted',
   HIRING_EXTRA_TASK_REJECTED: 'hiringExtraTaskRejected',
+  HIRING_IN_PROGRESS: 'hiringInProgress',
+  HIRING_ON_THE_WAY: 'hiringOnTheWay',
   HIRING_PAYMENT_REJECTED: 'hiringPaymentRejected',
   HIRING_RATING: 'hiringRating',
+  HIRING_SCHEDULED: 'hiringScheduled',
   NEW_MESSAGE: 'newMessage',
   /** Reminder for the client to open the door */
   REMINDER_OPEN_DOOR: 'reminderOpenDoor',
@@ -143,8 +145,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'administrative.land_parcel',
     elementType: 'labels.text.fill',
+    featureType: 'administrative.land_parcel',
     stylers: [
       {
         color: '#bdbdbd',
@@ -152,8 +154,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'poi',
     elementType: 'geometry',
+    featureType: 'poi',
     stylers: [
       {
         color: '#eeeeee',
@@ -161,8 +163,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'poi',
     elementType: 'labels.text.fill',
+    featureType: 'poi',
     stylers: [
       {
         color: '#757575',
@@ -170,8 +172,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'poi.park',
     elementType: 'geometry',
+    featureType: 'poi.park',
     stylers: [
       {
         color: '#e5e5e5',
@@ -179,8 +181,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'poi.park',
     elementType: 'labels.text.fill',
+    featureType: 'poi.park',
     stylers: [
       {
         color: '#9e9e9e',
@@ -188,8 +190,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'road',
     elementType: 'geometry',
+    featureType: 'road',
     stylers: [
       {
         color: '#ffffff',
@@ -197,8 +199,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'road.arterial',
     elementType: 'labels.text.fill',
+    featureType: 'road.arterial',
     stylers: [
       {
         color: '#757575',
@@ -206,8 +208,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'road.highway',
     elementType: 'geometry',
+    featureType: 'road.highway',
     stylers: [
       {
         color: '#dadada',
@@ -215,8 +217,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'road.highway',
     elementType: 'labels.text.fill',
+    featureType: 'road.highway',
     stylers: [
       {
         color: '#616161',
@@ -224,8 +226,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'road.local',
     elementType: 'labels.text.fill',
+    featureType: 'road.local',
     stylers: [
       {
         color: '#9e9e9e',
@@ -233,8 +235,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'transit.line',
     elementType: 'geometry',
+    featureType: 'transit.line',
     stylers: [
       {
         color: '#e5e5e5',
@@ -242,8 +244,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'transit.station',
     elementType: 'geometry',
+    featureType: 'transit.station',
     stylers: [
       {
         color: '#eeeeee',
@@ -251,8 +253,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'water',
     elementType: 'geometry',
+    featureType: 'water',
     stylers: [
       {
         color: '#c9c9c9',
@@ -260,8 +262,8 @@ export const MapStyle = [
     ],
   },
   {
-    featureType: 'water',
     elementType: 'labels.text.fill',
+    featureType: 'water',
     stylers: [
       {
         color: '#9e9e9e',

package/lib/configs/types.ts

@@ -0,0 +1,326 @@
+import type { Dayjs } from 'dayjs';
+import type { ReactNode } from 'react';
+import type {
+  ImageProps,
+  ImageSourcePropType,
+  SwitchProps as RNSwitchProps,
+  TextProps as RNTextProps,
+  StyleProp,
+  TextInputProps,
+} from 'react-native';
+
+export interface withPreventDoubleClickProps {
+  onPress?: VoidFunction;
+  [key: string]: any; // Allow additional props to be passed
+}
+
+export interface ButtonProps {
+  children: ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
+  bordered?: boolean;
+  noShadow?: boolean;
+  variant?:
+    | 'brightblue'
+    | 'brightviolet'
+    | 'darkyellow'
+    | 'dim'
+    | 'electricblue'
+    | 'error'
+    | 'inverted'
+    | 'light'
+    | 'lightgreen'
+    | 'primary'
+    | 'secondary';
+  size?: 'tiny' | 'small' | 'medium' | 'fit' | 'icon';
+  style?: StyleProp<any>;
+  onPress?: VoidFunction;
+  debounceDelay?: number;
+}
+
+export interface CardProps extends ButtonProps {
+  style?: StyleProp<any>;
+  children: ReactNode;
+  isButton?: boolean;
+  noShadow?: boolean;
+  onPress?: VoidFunction;
+}
+
+export interface ConfirmationModalProps {
+  visible?: boolean;
+  title?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onCancel?: VoidFunction;
+  onConfirm?: VoidFunction;
+  onClose?: VoidFunction | null;
+  alertMode?: boolean;
+  closeButton?: boolean;
+  infoMode?: boolean;
+  inverted?: boolean;
+  isPrime?: boolean;
+  children: ReactNode | null;
+}
+
+export interface TextProps extends RNTextProps {
+  children: ReactNode;
+  variant?: 'default' | 'lowercase' | 'uppercase';
+  size?: 'tiny' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+  color?:
+    | 'brightblue'
+    | 'brightviolet'
+    | 'dark'
+    | 'darkyellow'
+    | 'electricblue'
+    | 'gold'
+    | 'green'
+    | 'light'
+    | 'lighter'
+    | 'lightgold'
+    | 'midgreen'
+    | 'red'
+    | 'violet'
+    | 'white'
+    | 'yellow';
+  weight?: 'regular' | 'bold' | 'semiBold';
+  align?: 'left' | 'center' | 'right' | 'justify';
+  style?: StyleProp<any>;
+}
+
+export interface ContainerProps {
+  fullScreen?: boolean;
+  enableScroll?: boolean;
+  style?: StyleProp<any>;
+  scrollStyle?: StyleProp<any>;
+  children: ReactNode;
+  [key: string]: any; // Allow additional props to be passed
+}
+
+export interface CustomChatViewProps {
+  currentMessage?: {
+    location?: {
+      latitude: number;
+      longitude: number;
+      latitudeDelta?: number;
+      longitudeDelta?: number;
+    };
+    user?: {
+      name: string;
+    };
+  };
+  containerStyle?: StyleProp<any>;
+  mapViewStyle?: StyleProp<any>;
+}
+
+export interface FloatingContainerProps {
+  useRefreshControl?: boolean;
+  onRefresh?: VoidFunction;
+  isRefreshing?: boolean;
+  children?: ReactNode;
+  floatingComponent?: ReactNode;
+  centered?: boolean;
+  floatingContainerStyle?: StyleProp<any>;
+  disableScroll?: boolean;
+}
+
+export interface FooterProps {
+  inverted?: boolean;
+  tabs: Array<{
+    onPress: VoidFunction;
+    text: string;
+    icon: string;
+    badge?: number;
+  }>;
+}
+
+export interface HeaderProps {
+  inverted?: boolean;
+  logo: ImageSourcePropType | undefined;
+  right?: ReactNode;
+  onMenuPress?: VoidFunction;
+}
+
+export interface ImageResponsiveProps extends ImageProps {
+  source: ImageSourcePropType | undefined;
+  style?: StyleProp<any>;
+  avatar?: boolean;
+}
+
+export interface ImageViewerProps extends ImageResponsiveProps {
+  source: ImageSourcePropType | undefined;
+  style?: StyleProp<any>;
+}
+
+export interface InputProps extends TextInputProps {
+  variant?: 'default' | 'completed' | 'error';
+  size?: 'fixed' | 'fit';
+  disabled?: boolean;
+  leftIcon?: ReactNode;
+  leftIconWide?: boolean;
+  showLabel?: boolean;
+  label?: string;
+  count?: boolean;
+  rightIcon?: ReactNode;
+  value?: string;
+  maxLength?: number;
+}
+
+export interface InputPinProps {
+  values?: Array<number | string>;
+}
+
+export interface MenuItemProps {
+  icon?: ReactNode;
+  text?: string | ReactNode;
+  last?: boolean;
+  disabled?: boolean;
+  onPress?: VoidFunction;
+}
+
+export interface NavigationTitleProps {
+  type?: 'close' | 'back';
+  title?: string | ReactNode;
+  noShadow?: boolean;
+  xlarge?: boolean;
+  blockNavigation?: boolean;
+  onPress?: VoidFunction;
+}
+
+export interface NotificationProps {
+  first?: boolean;
+  active?: boolean;
+  hideAvatar?: boolean;
+  avatar?: ImageSourcePropType | undefined;
+  title?: string;
+  description?: string;
+  date?: Dayjs | string;
+  onPress?: VoidFunction;
+}
+
+export interface SwitchProps extends RNSwitchProps {
+  value?: boolean;
+  size?: 'medium' | 'small';
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+export interface ConfirmPictureModalProps {
+  visible: boolean;
+  avatar?: boolean;
+  repeatPictureText: string;
+  usePictureText: string;
+  image?: ImageSourcePropType | undefined | null;
+  onRepeatPhoto: VoidFunction;
+  onUsePhoto: VoidFunction;
+}
+
+export interface TakePictureProps {
+  visible: boolean;
+  onClose: (image?: string) => void;
+  avatar?: boolean;
+  cameraErrorMessage: string;
+  requestPermissionsMessage: string;
+  processingPictureMessage: string;
+  repeatPictureText: string;
+  usePictureText: string;
+}
+
+export interface TextareaProps extends TextInputProps {
+  variant?: 'default' | 'completed' | 'error';
+  disabled?: boolean;
+  numberOfLines?: number;
+  fitToContainer?: boolean;
+}
+
+export interface TimeOutButtonProps {
+  children: ReactNode;
+  time?: number; // Time in milliseconds
+  warning?: boolean; // If true, shows a warning overlay
+  onPress?: VoidFunction; // Function to call when the button is pressed
+}
+
+export interface UploadDocumentProps {
+  title?: string;
+  description?: string;
+  uploadButtonText?: string;
+  reUploadButtonText?: string;
+  completed?: boolean;
+  inverted?: boolean;
+  isAvatarPicker?: boolean;
+  icon?: ReactNode;
+  onSelectImage?: (image: string) => void;
+  file?: string;
+  onPermissionDenied?: VoidFunction;
+  mediaModal: {
+    title: string;
+    confirmText: string;
+    cancelText: string;
+    description: string;
+  };
+  takePicture: {
+    cameraErrorMessage: string;
+    requestPermissionsMessage: string;
+    processingPictureMessage: string;
+    repeatPictureText: string;
+    usePictureText: string;
+  };
+}
+
+export interface VirtualKeyboardProps {
+  onPress: (value: string | number | null) => void;
+  hideBiometrics?: boolean;
+}
+
+export interface SelectProps {
+  variant?: 'default' | 'error' | 'completed';
+  placeholder: string;
+  disabled?: boolean;
+  fitToContainer?: boolean;
+  onValueChange?: (value: string) => void;
+  value?: string | number;
+  items?: Array<{
+    label: string;
+    value: string | number;
+  }>;
+}
+
+export interface SwipeablePanelProps {
+  offset?: number;
+  maximized?: boolean;
+  lockPanel?: boolean;
+  autoMaximize?: boolean;
+  closeAfterSeconds?: number;
+  closeButton?: boolean;
+  avoidScroll?: boolean;
+  onClose?: VoidFunction;
+  children?: ReactNode;
+}
+
+export interface DonutCountdownProps {
+  bgColor?: string;
+  color?: string;
+  duration?: number;
+  onComplete?: VoidFunction;
+  radius?: number;
+  strokeWidth?: number;
+  textColor?: string;
+  textSize?: 'small' | 'medium' | 'large';
+}
+
+export interface DeckSwiperProps {
+  data?: Array<{
+    image: ImageSourcePropType;
+    title: string;
+    description: string;
+  }>;
+  inverted?: boolean;
+  nextText?: string;
+  onChange?: (index: number) => void;
+  onFinish?: () => void;
+}
+
+export interface ToastMessageProps {
+  variant: 'success' | 'error';
+  message: string;
+  description?: string;
+}

package/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useDebounce } from './useDebounce';
+export { default as useLoadFonts } from './useLoadFonts';

package/lib/hooks/{useDebounce.js → useDebounce.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-const useDebounce = (callback, delay) => {
-  const latestCallback = useRef();
-  const latestTimeout = useRef();
+const useDebounce = (callback: () => void, delay: number | undefined) => {
+  const latestCallback = useRef<() => void>(null);
+  const latestTimeout = useRef<ReturnType<typeof setTimeout>>(null);
 
   useEffect(() => {
     latestCallback.current = callback;
@@ -14,7 +14,9 @@ const useDebounce = (callback, delay) => {
     }
 
     latestTimeout.current = setTimeout(() => {
-      latestCallback.current();
+      if (latestCallback.current) {
+        latestCallback.current();
+      }
     }, delay);
   };
 };

package/lib/hooks/useLoadFonts.tsx

@@ -0,0 +1,13 @@
+import { useFonts } from 'expo-font';
+
+const useLoadFonts = () => {
+  const [loaded, error] = useFonts({
+    poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
+    poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
+    poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf'),
+  });
+
+  return { error, loaded };
+};
+
+export default useLoadFonts;

package/lib/index.js

@@ -1,3 +1,4 @@
-export {asyncLoadFont} from './configs/loadFonts';
-export {Colors, MapStyle, ConstantsWS, HiringStatus, CouponStatus, NotificationsTypes} from './configs/constants';
 export * from './components';
+export { Colors, ConstantsWS, CouponStatus, HiringStatus, MapStyle, NotificationsTypes } from './configs/constants';
+export * from './configs/types';
+export { useDebounce, useLoadFonts } from './hooks';