Provided Support of default export, multi export, export as service, export as component

.babelrc

@@ -1,9 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [ ["@babel/preset-env", { "modules": false }] , "@babel/preset-react"],
   "comments": false,
   "env": {
     "minify": {
-      "presets": ["@babel/preset-env", ["babel-preset-minify"]],
+      "presets": [["@babel/preset-env", { "modules": false }], ["babel-preset-minify"]],
       "plugins": [["transform-react-remove-prop-types", {
         "mode": "remove",
         "removeImport": true,
@@ -18,4 +18,4 @@
       }]]
     }
   }
-}
+}

.eslintrc.json

@@ -26,4 +26,4 @@
   "parserOptions": {
     "ecmaVersion":"latest"
   }
-}
+}

.github/README.md

@@ -83,18 +83,20 @@ import Share from 'fe-pilot/Share';
 >  <summary>See the list of components</summary>
 >
 >  ###
->  01. :white_check_mark: AutoFillOtp &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md)
->  00. :white_check_mark: ColorPicker&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md)
->  00. :white_check_mark: CopyToClipboard&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md)
->  00. :white_check_mark: FaceDetector&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md)
->  00. :white_check_mark: LiveLocation &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md)
->  00. :white_check_mark: LocateMe &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md)
->  00. :white_check_mark: PhoneBook &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
->  00. :white_check_mark: Scanner &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
->  00. :white_check_mark: Share &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
->  00. :white_check_mark: TextToSpeech &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
->  00. :white_check_mark: VoiceRecognition&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
->  00. :white_check_mark: Vibrate &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)
+>  01. :white_check_mark: &nbsp; [AutoFillOtp](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md)
+>  00. :white_check_mark: &nbsp; [ColorPicker](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md)
+>  00. :white_check_mark: &nbsp; [CopyToClipboard](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md)
+>  00. :white_check_mark: &nbsp; [FaceDetector](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md)
+>  00. :white_check_mark: &nbsp; [LiveLocation](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md)
+>  00. :white_check_mark: &nbsp; [LocateMe](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md)
+>  00. :white_check_mark: &nbsp; [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
+>  00. :white_check_mark: &nbsp; [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
+>  00. :white_check_mark: &nbsp; [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
+>  00. :white_check_mark: &nbsp; [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
+>  00. :white_check_mark: &nbsp; [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
+>  00. :white_check_mark: &nbsp; [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)
+>  00. :white_check_mark: &nbsp; [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md)
+>  00. :white_check_mark: &nbsp; [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md)
 > </details>
 
 ## Online Editor Templates

.github/SETUP.md

@@ -25,13 +25,24 @@ import { TextToSpeechInit, TextToSpeechStart, TextToSpeechStop } from 'fe-pilot/
 
 <PhoneBook />
 <Share />
- <TextToSpeechInit text="Password field is not contained in a form: (More info: ">
+ <TextToSpeech text="Password field is not contained in a form: (More info: ">
   <TextToSpeechStart>Start Icon</TextToSpeechStart>
   <TextToSpeechStop>Stop Icon</TextToSpeechStop>
-</TextToSpeechInit>
+</TextToSpeech>
 ```
 
-#### 4. Hurrah...! Now fe-pilot repo is available inside the node_modules of your project, and waching change in fe-pilot.
+#### 4. Are you getting Error ? continue to step 4. If no error found go to step 5.
+
+**bug:** ```TypeError: Cannot read properties of null (reading 'useState')```<br/>
+**solution**  Go to fe-pilot in terminal and run below command
+
+```js
+npm link {PATH}/{Your Repo}
+```
+
+&nbsp;&nbsp;**Note:** PATH is the location of ```your repo``` folder. ```Your Repo``` is the name of the repo.
+
+#### 5. Hurrah...! Now fe-pilot repo is available inside the node_modules of your project, and waching change in fe-pilot.
 
 
 ## Folder Structure
@@ -40,8 +51,8 @@ fe-pilot
   └── __app
     └── component
       ├──TextToSpeech                (component name)
-      |   ├──TextToSpeech.js         (top level exports/re-exports)
-      |   ├──TextToSpeechInit.js     (parent component)
+      |   ├──index.js                (top level exports/re-exports)
+      |   ├──TextToSpeech.js         (parent component)
       |   ├──TextToSpeechStart.js    (child component)
       |   └──TextToSpeechStop.js     (child component)
 ```
@@ -67,13 +78,13 @@ graph TD;
 
 ```mermaid
 graph TD;
-    Scanner--->CameraClick;
-    Scanner--->CameraClose;
-    Scanner--->CameraFacing;
-    Scanner--->CameraFlash;
-    Scanner--->CameraScanBox;
-    Scanner--->PhoneGallery;
-    Scanner--->StartCamera;
+    Scanner--->ScannerCamera;
+    Scanner--->ScannerClose;
+    Scanner--->ScannerFacing;
+    Scanner--->ScannerFlash;
+    Scanner--->ScannerGallery;
+    Scanner--->ScannerScanBox;
+    Scanner--->ScannerClick;
 ```
 > [!IMPORTANT]
 > Camera component Structure
@@ -82,7 +93,6 @@ graph TD;
 
 ```mermaid
 graph TD;
-    TextToSpeech--->TextToSpeechInit;
     TextToSpeech--->TextToSpeechStart;
     TextToSpeech--->TextToSpeechStop;
 ```
@@ -93,7 +103,6 @@ graph TD;
 
 ```mermaid
 graph TD;
-    VoiceRecognition--->TextToSpeechInit;
     VoiceRecognition--->VoiceRecognitionIcon;
     VoiceRecognition--->VoiceRecognitionModal;
 ```

README.md

@@ -83,19 +83,21 @@ import Share from 'fe-pilot/Share';
 <summary>See the list of components</summary>
 
 ###
-1. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md) AutoFillOtp
-2. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md) ColorPicker
-3. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md) CopyToClipboard
-4. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md) FaceDetector
-5. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md) LiveLocation
-6. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md) LocateMe
-7. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md) PhoneBook
-8. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md) Scanner
-9. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md) Share
-10. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md) TextToSpeech
-11. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md) VoiceRecognition
-12. :white_check_mark: [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md) Vibrate
-></details>
+1. :white_check_mark: &nbsp; [AutoFillOtp](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md)
+2. :white_check_mark: &nbsp; [ColorPicker](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md)
+3. :white_check_mark: &nbsp; [CopyToClipboard](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md)
+4. :white_check_mark: &nbsp; [FaceDetector](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md)
+5. :white_check_mark: &nbsp; [LiveLocation](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md)
+6. :white_check_mark: &nbsp; [LocateMe](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md)
+7. :white_check_mark: &nbsp; [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md)
+8. :white_check_mark: &nbsp; [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md)
+9. :white_check_mark: &nbsp; [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md)
+10. :white_check_mark: &nbsp; [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md)
+11. :white_check_mark: &nbsp; [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md)
+12. :white_check_mark: &nbsp; [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md)
+13. :white_check_mark: &nbsp; [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md)
+14. :white_check_mark: &nbsp; [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md)
+</details>
 
 ## Online Editor Templates
 

__app/component/AutoFillOtp/AutoFillOtp.js

@@ -1,4 +1,14 @@
-import { handleError, handleSuccess } from '../services/handlerService';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
+import Wrapper from '../Wrapper/Wrapper';
+
+const failureMsgDefault = {
+  unSupported: 'AutoFillOtp is not supporting in your device',
+  error: 'Unable to fetch details from AutoFillOtp',
+};
+
+const isBrowserSupport = () => globalThis.OTPCredential;
 
 const abortAutoFill = (abort, time) => {
   setTimeout(() => {
@@ -7,36 +17,67 @@ const abortAutoFill = (abort, time) => {
   }, time * 60 * 1000);
 };
 
-const defaultProps = {
-  successCb: (() => {}),
-  failureCb: (() => {}),
-  successMsg: 'OTP autofilled successfully',
-  failureMsg: {
-    UN_SUPPORTED_FEATURE: 'Your device is not supporting AutofillOTP',
-    ERROR: '',
-  },
+const autoFillOtp = ({
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'OTP autofilled successfully',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+} = {}) => {
+  const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
+
+  const init = () => {
+    if (isBrowserSupport()) {
+      handleLoading({ loadingCb });
+
+      const abort = new AbortController();
+      abortAutoFill(abort, 3);
+      navigator.credentials.get({
+        otp: { transport: ['sms'] },
+        signal: abort.signal,
+      }).then((otp) => {
+        const { code } = otp;
+        handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: code });
+      }).catch((error) => handleError({ msgType: 'ERROR', msg: error, failureCb }));
+    } else {
+      return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
+    }
+    return true;
+  };
+
+  init();
 };
-function AutoFillOtp(props = {}) {
-  const successCb = props.successCb || defaultProps.successCb;
-  const failureCb = props.failureCb || defaultProps.failureCb;
-  const successMsg = props.successMsg || defaultProps.successMsg;
-  const failureMsg = { ...defaultProps.failureMsg, ...props.failureMsg };
-
-  if (AutoFillOtp.isBrowserSupport()) {
-    const abort = new AbortController();
-    abortAutoFill(abort, 3);
-    navigator.credentials.get({
-      otp: { transport: ['sms'] },
-      signal: abort.signal,
-    }).then((otp) => {
-      const { code } = otp;
-      handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: code });
-    }).catch((error) => handleError({ msgType: 'ERROR', msg: error, failureCb }));
-  } else {
-    return handleError({ msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
-  }
+
+function AutoFillOtp({
+  children,
+  successCb,
+  failureCb,
+  loadingCb,
+  successMsg,
+  failureMsg,
+}) {
+  return React.Children.map(children || 'AutoFillOtp', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+    onClick: () => autoFillOtp({
+      successCb,
+      failureCb,
+      loadingCb,
+      successMsg,
+      failureMsg,
+    }),
+  }));
 }
 
-AutoFillOtp.isBrowserSupport = () => globalThis.OTPCredential;
+AutoFillOtp.propTypes = {
+  showForever: PropTypes.bool,
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  loadingCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+};
+
+const WAutoFillOtp = Wrapper(AutoFillOtp, isBrowserSupport);
+
+export { autoFillOtp, WAutoFillOtp as AutoFillOtp };
 
-export default AutoFillOtp;
+export default WAutoFillOtp;

__app/component/AutoFillOtp/index.js

@@ -1,5 +1,2 @@
-import AutoFillOtp from './AutoFillOtp';
-
-export { AutoFillOtp };
-
-export default AutoFillOtp;
+export * from './AutoFillOtp';
+export { default } from './AutoFillOtp';

__app/component/ColorPicker/ColorPicker.js

@@ -1,24 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { handleSuccess, handleError } from '../services/handlerService';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
 import Wrapper from '../Wrapper/Wrapper';
 
 const failureMsgDefault = {
   unSupported: 'Your browser does not support the Color Picker fetaure',
   error: 'Unable to copy color code',
 };
 
-function ColorPicker({
-  successCb,
-  failureCb,
-  successMsg,
-  failureMsg: failureMsgProps,
-  children,
-}) {
+const isBrowserSupport = () => globalThis.EyeDropper;
+
+const colorPicker = ({
+  successCb = () => {},
+  failureCb = () => {},
+  loadingCb = () => {},
+  successMsg = 'Color picked successfully!!',
+  failureMsg: failureMsgProps = { ...failureMsgDefault },
+} = {}) => {
   const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
 
-  const pickColor = () => {
-    if (ColorPicker.isBrowserSupport()) {
+  const init = () => {
+    if (isBrowserSupport()) {
+      handleLoading({ loadingCb });
       const eyeDropper = new globalThis.EyeDropper();
 
       eyeDropper
@@ -33,26 +36,39 @@ function ColorPicker({
     return true;
   };
 
+  init();
+};
+
+function ColorPicker({
+  children,
+  successCb,
+  failureCb,
+  loadingCb,
+  successMsg,
+  failureMsg,
+}) {
   return React.Children.map(children || 'Copy Color', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
-    onClick: pickColor,
-    onKeyDown: pickColor,
+    onClick: () => colorPicker({
+      successCb,
+      failureCb,
+      loadingCb,
+      successMsg,
+      failureMsg,
+    }),
   }));
 }
 
-ColorPicker.isBrowserSupport = () => globalThis.EyeDropper;
-
 ColorPicker.propTypes = {
+  showForever: PropTypes.bool,
   successCb: PropTypes.func,
   failureCb: PropTypes.func,
+  loadingCb: PropTypes.func,
   successMsg: PropTypes.string,
   failureMsg: PropTypes.object,
 };
 
-ColorPicker.defaultProps = {
-  successCb: () => {},
-  failureCb: () => {},
-  successMsg: 'Color picked successfully!!',
-  failureMsg: { ...failureMsgDefault },
-};
+const WColorPicker = Wrapper(ColorPicker, isBrowserSupport);
+
+export { colorPicker, WColorPicker as ColorPicker };
 
-export default Wrapper(ColorPicker);
+export default WColorPicker;

__app/component/ColorPicker/index.js

@@ -1,5 +1,2 @@
-import ColorPicker from './ColorPicker';
-
-export { ColorPicker };
-
-export default ColorPicker;
+export * from './ColorPicker';
+export { default } from './ColorPicker';