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

package/lib/components/VirtualKeyboard/{style.ts → style.js}

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

package/lib/components/index.js

@@ -0,0 +1,28 @@
+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 DeckSwiper } from "./DeckSwiper";
+export { default as FlashMessage, sendMessage } from "./FlashMessage";
+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 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 { default as UploadDocument } from "./UploadDocument";
+export { default as VirtualKeyboard } from "./VirtualKeyboard";
+export { default as withPreventDoubleClick } from "./PreventDoubleClick";
+export { default as CustomChatView } from "./CustomChatView";

package/lib/configs/constants.js

@@ -0,0 +1,276 @@
+export const Colors = {
+  // Blacks and Whites
+  transparent: "transparent",
+  white: "#FFFFFF",
+  gray: "#D0D0D0",
+  dimgray: "#CFCFCF",
+  darkgray: "#2E3640",
+  whiteice: "#E7EAEE",
+  whitepearl: "#F7F8F9",
+  // Greens
+  lightergreen: "#F5FEFA",
+  lightgreen: "#64FFA5",
+  midgreen: "#3FE39E",
+  green: "#3FE384",
+  darkgreen: "#007A55",
+  darkergreen: "#004F3B",
+  // Blues
+  lightblue: "#EFF9FF",
+  electricblue: "#3FA5F8",
+  midblue: "#727C8E",
+  darkblue: "#515C6F",
+  brightblue: "#00D8FF",
+  mediumblue: "#F2F7FE",
+  blue: "#2A539C",
+  attentionBlue: "#dbf0fe",
+  // Violet
+  lightviolet: "#FAF9FF",
+  brightviolet: "#9980FA",
+  violet: "#300049",
+  placeboPurple: "#F0ECFE",
+  // Reds
+  lightertred: "#FFCCD3",
+  lightred: "#FFC1C1",
+  red: "#FD4C4C",
+  darkred: "#C70036",
+  darkerred: "#8B0836",
+  // Yellow
+  lightyellow: "#FBFDE9",
+  yellow: "#FDD100",
+  darkyellow: "#FFBB87",
+  lightgold: "#ECDFAA",
+  gold: "#D4AF37",
+};
+
+export const borderRadius = 8;
+
+export const ConstantsWS = Object.freeze({
+  HIRING: "HIRING",
+  CANCELED: "CANCELED",
+  CANCELED_BY_PROFESSIONAL: "CANCELED_BY_PROFESSIONAL",
+  NOT_CONFIRMED: "NOT_CONFIRMED",
+  NOT_STARTED: "NOT_STARTED",
+  POSTULATION: "POSTULATION",
+  NOTIFICATION: "NOTIFICATION",
+  CHAT: "CHAT",
+  MAP: "MAP",
+  RECOMMENDATION: "RECOMMENDATION",
+  ISSUE: "ISSUE",
+  CLOSED: "CLOSED",
+  USER: "USER",
+});
+
+export const HiringStatus = Object.freeze({
+  PENDING: "pending",
+  ON_THE_WAY: "onTheWay",
+  ARRIVAL_CONFIRMED: "arrivalConfirmed",
+  IN_PROGRESS: "inProgress",
+  PAYMENT: "payment",
+  PAYMENT_ERROR: "paymentError",
+  DONE: "done",
+  CANCELED: "canceled",
+  UNPAID: "unpaid",
+});
+
+export const CouponStatus = Object.freeze({
+  PENDING: "pending",
+  IN_USE: "inUse",
+  EXPIRED: "expired",
+  DONE: "DONE",
+});
+
+export const NotificationsTypes = Object.freeze({
+  /** New hiring is created */
+  NEW_HIRING: "newHiring",
+  /** 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_DELAY: "hiringDelay",
+  HIRING_DELAY_TRAFFIC: "hiringDelayTraffic",
+  HIRING_DELAY_ACCIDENT: "hiringDelayAccident",
+  HIRING_DELAY_WORK: "hiringDelayWork",
+  HIRING_EXTRA_TASK: "hiringExtraTask",
+  HIRING_EXTRA_TASK_ACCEPTED: "hiringExtraTaskAccepted",
+  HIRING_EXTRA_TASK_REJECTED: "hiringExtraTaskRejected",
+  HIRING_PAYMENT_REJECTED: "hiringPaymentRejected",
+  HIRING_RATING: "hiringRating",
+  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",
+      },
+    ],
+  },
+  {
+    featureType: "administrative.land_parcel",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#bdbdbd",
+      },
+    ],
+  },
+  {
+    featureType: "poi",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#eeeeee",
+      },
+    ],
+  },
+  {
+    featureType: "poi",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#757575",
+      },
+    ],
+  },
+  {
+    featureType: "poi.park",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#e5e5e5",
+      },
+    ],
+  },
+  {
+    featureType: "poi.park",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#9e9e9e",
+      },
+    ],
+  },
+  {
+    featureType: "road",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#ffffff",
+      },
+    ],
+  },
+  {
+    featureType: "road.arterial",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#757575",
+      },
+    ],
+  },
+  {
+    featureType: "road.highway",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#dadada",
+      },
+    ],
+  },
+  {
+    featureType: "road.highway",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#616161",
+      },
+    ],
+  },
+  {
+    featureType: "road.local",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#9e9e9e",
+      },
+    ],
+  },
+  {
+    featureType: "transit.line",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#e5e5e5",
+      },
+    ],
+  },
+  {
+    featureType: "transit.station",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#eeeeee",
+      },
+    ],
+  },
+  {
+    featureType: "water",
+    elementType: "geometry",
+    stylers: [
+      {
+        color: "#c9c9c9",
+      },
+    ],
+  },
+  {
+    featureType: "water",
+    elementType: "labels.text.fill",
+    stylers: [
+      {
+        color: "#9e9e9e",
+      },
+    ],
+  },
+];

package/lib/configs/loadFonts.js

@@ -0,0 +1,11 @@
+import * as Font from 'expo-font';
+
+export const asyncLoadFont = Font.loadAsync({
+  poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
+  poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
+  poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf')
+});
+
+export const loadFonts = [
+  asyncLoadFont
+];

package/lib/hooks/index.js

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

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

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

package/lib/index.js

@@ -1,4 +1,3 @@
+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/package.json

@@ -1,104 +1,90 @@
 {
-  "version": "0.7.1",
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
+  "version": "0.8.0",
   "license": "MIT",
   "files": [
     "lib",
     "index.js"
   ],
-  "packageManager": "yarn@4.5.0",
-  "homepage": "https://github.com/holperapp/holper-storybook",
+  "homepage": "https://bitbucket.org/d4fitwearapps/holper-storybook",
   "repository": {
     "type": "git",
-    "url": "https://github.com/holperapp/holper-storybook.git"
+    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook.git"
   },
   "bugs": {
-    "url": "https://github.com/holperapp/holper-storybook/issues",
+    "url": "https://bitbucket.org/d4fitwearapps/holper-storybook/issues",
     "email": "d4fitwear@gmail.com"
   },
   "scripts": {
-    "start": "expo start",
+    "start": "npx expo start",
     "build-dev": "eas build --profile development",
+    "build-preview": "eas build --profile preview",
+    "eject": "expo eject",
     "clear": "watchman watch-del-all",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "lint:debug": "TIMING=all eslint -c ./eslint.config.mjs --debug",
-    "lint:fix": "eslint -c ./eslint.config.mjs --fix",
-    "lint": "eslint -c ./eslint.config.mjs",
-    "format:check": "prettier . --check --config prettier.config.mjs",
-    "format": "prettier . --write --config prettier.config.mjs",
-    "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo start --android",
-    "storybook:generate": "sb-rn-get-stories -js",
-    "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo start --ios",
-    "storybook:publish": "./build.sh",
-    "storybook:start": "cross-env STORYBOOK_ENABLED='true' expo start",
-    "type:check": "tsc --extendedDiagnostics",
-    "verify:fix": "yarn lint:fix && yarn format && yarn type:check",
-    "verify": "yarn lint && yarn format:check && yarn type:check"
+    "storybook": "start-storybook -p 7007",
+    "storybook-publish": "./build.sh"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~5.0.4",
-    "@expo/vector-icons": "^14.1.0",
-    "@react-native-picker/picker": "2.11.1",
-    "@types/react": "~19.0.10",
-    "dayjs": "^1.11.13",
-    "expo": "^53.0.19",
-    "expo-camera": "~16.1.10",
-    "expo-constants": "~17.1.7",
-    "expo-dev-client": "~5.2.4",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "expo": "~53.0.24",
+    "expo-asset": "~11.1.7",
+    "expo-camera": "~16.1.11",
     "expo-font": "~13.3.2",
+    "expo-image": "~2.4.1",
     "expo-image-manipulator": "~13.1.7",
     "expo-image-picker": "~16.1.4",
-    "expo-media-library": "~17.1.7",
-    "expo-splash-screen": "~0.30.10",
-    "lodash": "^4.17.21",
+    "expo-status-bar": "~2.2.3",
+    "moment": "^2.30.1",
+    "prop-types": "^15.8.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-deck-swiper": "^2.0.18",
+    "react-native": "0.79.6",
+    "react-native-countdown-circle-timer": "^3.2.1",
+    "react-native-deck-swiper": "^2.0.16",
+    "react-native-dropdown-picker": "^5.4.6",
+    "react-native-flash-message": "^0.4.2",
     "react-native-maps": "1.20.1",
-    "react-native-picker-select": "^9.3.1",
-    "react-native-screens": "~4.11.1",
-    "react-native-web": "^0.20.0",
-    "sonner-native": "^0.21.0"
+    "react-native-maps-directions": "1.9.0",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-status-bar-height": "^2.6.0",
+    "react-native-svg": "15.11.2",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "^0.20.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/plugin-transform-class-static-block": "^7.27.1",
-    "@eslint/js": "^9.31.0",
-    "@gorhom/bottom-sheet": "^4.6.4",
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-native-community/slider": "4.5.6",
-    "@storybook/addon-ondevice-actions": "^8.3.5",
-    "@storybook/addon-ondevice-controls": "^8.3.5",
-    "@storybook/react-native": "^8.3.5",
-    "@types/lodash": "^4.17.20",
+    "@babel/core": "^7.23.9",
+    "@babel/traverse": "^7.26.9",
+    "@storybook/addon-actions": "^7.6.11",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.6.11",
+    "@storybook/addon-ondevice-actions": "^7.6.11",
+    "@storybook/addon-ondevice-knobs": "^7.6.11",
+    "@storybook/preview-api": "^7.6.11",
+    "@storybook/react-native": "^6.5.7",
+    "@storybook/react-native-server": "^6.5.8",
     "babel-loader": "^9.1.3",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.30.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-perfectionist": "^4.15.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.3.0",
-    "lint-staged": "^16.1.2",
-    "prettier": "^3.6.2",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-svg": "15.11.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.37.0"
+    "expo-dev-client": "~5.2.4"
+  },
+  "peerDependencies": {
+    "expo-camera": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-native": ">=0.71.0"
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,json,css,md}": [
-      "eslint --fix",
-      "prettier --write"
-    ]
+  "expo": {
+    "doctor": {
+      "reactNativeDirectoryCheck": {
+        "exclude": [
+          "react-native-maps",
+          "react-native-maps-directions",
+          "react-native-status-bar-height"
+        ],
+        "listUnknownPackages": false
+      }
+    }
   }
 }

package/{README.md → readme.md}

@@ -8,29 +8,31 @@ To: `"main": "lib/index.js",`
 
 And revert the change after publish.
 
+
+
 #### Publish the library for npm
 
 Run the command: `npm publish` this will build the lib before publishing.
 
 #### How to set up
-
-`import { useLoadFonts } from  from 'react-native-holper-storybook';` and call the `useLoadFonts` function in your app entry point.
+`import { asyncLoadFont } from  from 'react-native-holper-storybook';` and call the `asyncLoadFont` function in your app entry point.
 
 ```
-import { useEffect, useState } from 'react';
-import { useLoadFonts } from 'react-native-holper-storybook';
+import React, { useEffect, useState } from 'react';
+import { asyncLoadFont } from 'react-native-holper-storybook';
 
 export default function App() {
-  const { loaded, error } = useLoadFonts();
+  const [fontsLoaded, setFontsLoaded] = useState(false);
 
   useEffect(() => {
-    if (loaded || error) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded, error]);
-
-  if (!loaded && !error) {
-    return null;
+    (async function() {
+      await asyncLoadFont;
+      setFontsLoaded(true);
+    })();
+  }, []);
+
+  if (!fontsLoaded) {
+    return <View/>;
   }
 
   return (
@@ -39,26 +41,25 @@ export default function App() {
 }
 ```
 
-#### Using Toast
-
-This library uses https://github.com/gunnartorfis/sonner-native, in order to use it, include `<Toaster />` in you root component.
+#### Using FlashMessage
+This library uses https://www.npmjs.com/package/react-native-flash-message, in order to use it, include `<FlashMessage/>` in you root component.
 
 ```
 import React from 'react';
 import { View } from 'react-native';
-import { Toaster } from 'react-native-holper-storybook';
+import { FlashMessage } from 'react-native-holper-storybook';
 
 export default function App() {
   return (
     <View>
         ...
-        <Toaster />
+        <FlashMessage />
     </View>
   );
 }
 ```
 
-#### Sending a messages
+###### Sending a messages
 
 ```
 import React from 'react';
@@ -78,4 +79,4 @@ export default MyComponent = () => {
     </View>
   );
 }
-```
+```

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Chromatic
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.