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

package/lib/configs/constants.ts

@@ -0,0 +1,273 @@
+export const Colors = {
+  // Blacks and Whites
+  darkgray: '#2E3640',
+  dimgray: '#CFCFCF',
+  gray: '#D0D0D0',
+  transparent: 'transparent',
+  white: '#FFFFFF',
+  whiteice: '#E7EAEE',
+  whitepearl: '#F7F8F9',
+  // Greens
+  darkgreen: '#008A2E',
+  green: '#3FE384',
+  lightergreen: '#F5FEFA',
+  lightgreen: '#64FFA5',
+  midgreen: '#3FE39E',
+  // Blues
+  attentionBlue: '#dbf0fe',
+  blue: '#2A539C',
+  brightblue: '#00D8FF',
+  darkblue: '#515C6F',
+  electricblue: '#3FA5F8',
+  lightblue: '#EFF9FF',
+  mediumblue: '#F2F7FE',
+  midblue: '#727C8E',
+  // Violet
+  brightviolet: '#9980FA',
+  lightviolet: '#FAF9FF',
+  placeboPurple: '#F0ECFE',
+  violet: '#300049',
+  // Reds
+  darkred: '#E60606',
+  lightred: '#FFC1C1',
+  red: '#FD4C4C',
+  // Yellow
+  darkyellow: '#FFBB87',
+  gold: '#D4AF37',
+  lightgold: '#ECDFAA',
+  lightyellow: '#FBFDE9',
+  yellow: '#FDD100',
+};
+
+export const borderRadius = 8;
+
+export const ConstantsWS = Object.freeze({
+  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',
+  NOTIFICATION: 'NOTIFICATION',
+  POSTULATION: 'POSTULATION',
+  RECOMMENDATION: 'RECOMMENDATION',
+  USER: 'USER',
+});
+
+export const HiringStatus = Object.freeze({
+  ARRIVAL_CONFIRMED: 'arrivalConfirmed',
+  CANCELED: 'canceled',
+  DONE: 'done',
+  IN_PROGRESS: 'inProgress',
+  ON_THE_WAY: 'onTheWay',
+  PAYMENT: 'payment',
+  PAYMENT_ERROR: 'paymentError',
+  PENDING: 'pending',
+  UNPAID: 'unpaid',
+});
+
+export const CouponStatus = Object.freeze({
+  DONE: 'DONE',
+  EXPIRED: 'expired',
+  IN_USE: 'inUse',
+  PENDING: 'pending',
+});
+
+export const NotificationsTypes = Object.freeze({
+  /** New hiring is created */
+  NEW_HIRING: 'newHiring',
+  /** Professional accept immediate hiring */
+  HIRING_IMMEDIATE: 'hiringImmediate',
+  /** Professional accept scheduled hiring */
+  HIRING_ACCEPTED: 'hiringAccepted',
+  HIRING_ARRIVAL_CONFIRMED: 'hiringArrivalConfirmed',
+  HIRING_CANCELED: 'hiringCanceled',
+  HIRING_DELAY: 'hiringDelay',
+  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',
+  /** Reminder for the professional to start the path */
+  REMINDER_START_PATH: 'reminderStartPath',
+  /** Reminder for the professional when the start time is passed */
+  REMINDER_DELAYED: 'reminderDelay',
+  /** Reminder for the professional when arrived to mark the arrival confirmed */
+  REMINDER_ARRIVED: 'reminderArrived',
+  /** Reminder for the professional to start the progress */
+  REMINDER_START_PROGRESS: 'reminderStartProgress',
+});
+
+export const MapStyle = [
+  {
+    elementType: 'geometry',
+    stylers: [
+      {
+        color: '#f5f5f5',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.icon',
+    stylers: [
+      {
+        visibility: 'off',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    stylers: [
+      {
+        color: '#616161',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.stroke',
+    stylers: [
+      {
+        color: '#f5f5f5',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'administrative.land_parcel',
+    stylers: [
+      {
+        color: '#bdbdbd',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'poi',
+    stylers: [
+      {
+        color: '#eeeeee',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'poi',
+    stylers: [
+      {
+        color: '#757575',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'poi.park',
+    stylers: [
+      {
+        color: '#e5e5e5',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'poi.park',
+    stylers: [
+      {
+        color: '#9e9e9e',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'road',
+    stylers: [
+      {
+        color: '#ffffff',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'road.arterial',
+    stylers: [
+      {
+        color: '#757575',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'road.highway',
+    stylers: [
+      {
+        color: '#dadada',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'road.highway',
+    stylers: [
+      {
+        color: '#616161',
+      },
+    ],
+  },
+  {
+    elementType: 'labels.text.fill',
+    featureType: 'road.local',
+    stylers: [
+      {
+        color: '#9e9e9e',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'transit.line',
+    stylers: [
+      {
+        color: '#e5e5e5',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'transit.station',
+    stylers: [
+      {
+        color: '#eeeeee',
+      },
+    ],
+  },
+  {
+    elementType: 'geometry',
+    featureType: 'water',
+    stylers: [
+      {
+        color: '#c9c9c9',
+      },
+    ],
+  },
+  {
+    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.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+const useDebounce = (callback: () => void, delay: number | undefined) => {
+  const latestCallback = useRef<() => void>(null);
+  const latestTimeout = useRef<ReturnType<typeof setTimeout>>(null);
+
+  useEffect(() => {
+    latestCallback.current = callback;
+  }, [callback]);
+
+  return () => {
+    if (latestTimeout.current) {
+      clearTimeout(latestTimeout.current);
+    }
+
+    latestTimeout.current = setTimeout(() => {
+      if (latestCallback.current) {
+        latestCallback.current();
+      }
+    }, delay);
+  };
+};
+
+export default useDebounce;

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';

package/metro.config.js

@@ -0,0 +1,11 @@
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+module.exports = withStorybook(defaultConfig, {
+  configPath: path.resolve(__dirname, './.storybook'),
+  enabled: true,
+  useJs: true,
+});