fix(treeshaking): added treeshaking for multiple child component

.eslintrc.json

@@ -20,7 +20,8 @@
     "object-curly-newline": ["off"],
     "react/jsx-fragments": ["off" ],
     "react/jsx-props-no-spreading": ["off"],
-    "func-names": ["off"]
+    "func-names": ["off"],
+    "no-restricted-exports": ["off"]
   },
   "parserOptions": {
     "ecmaVersion":"latest"

.github/COMPONENT.md

@@ -1,2 +1,11 @@
-1. PhoneBook
-2. Share
+01. AutoFillOtp
+02. Bluetooth
+03. CopyToClipboard
+04. LiveLocationTracking
+05. LocateMe
+06. MobileNavBar
+07. PhoneBook
+08. Scanner
+09. Share
+10. TextToSpeech
+11. VoiceRecognition

__app/component/TextToSpeech/TextToSpeech.js

@@ -1,9 +1,9 @@
-import Start from './StartTextToSpeech';
-import Stop from './StopTextToSpeech';
-import Init from './InitTextToSpeech';
+import TextToSpeechStart from './TextToSpeechStart';
+import TextToSpeechStop from './TextToSpeechStop';
+import TextToSpeechInit from './TextToSpeechInit';
 
-export default {
-  Start,
-  Stop,
-  Init,
+export {
+  TextToSpeechStart,
+  TextToSpeechStop,
+  TextToSpeechInit,
 };

__app/component/TextToSpeech/InitTextToSpeech.js → __app/component/TextToSpeech/TextToSpeechInit.js

@@ -4,7 +4,7 @@ import Wrapper from '../Wrapper/Wrapper';
 import textToSpeech from './textToSpeechService';
 import { handleSuccess, handleError } from '../services/handlerService';
 
-function InitTextToSpeech({
+function TextToSpeechInit({
   disbaleToast,
   successCb,
   successMsg,
@@ -16,17 +16,21 @@ function InitTextToSpeech({
   const [isAudioOn, setIsAudioOn] = useState(false);
 
   const handlePlay = async () => {
-    if (InitTextToSpeech.isBrowserSupport()) {
-      setIsAudioOn(true);
+    if (TextToSpeechInit.isBrowserSupport()) {
       if (text) {
+        setIsAudioOn(true);
         try {
           const utteranceCbk = await textToSpeech(text);
-          handleSuccess({ disbaleToast, msgType: 'SUCCESS', msg: successMsg, successCb, data: '' });
-          utteranceCbk.onend = () => setIsAudioOn(false);
+          utteranceCbk.onend = () => {
+            setIsAudioOn(false);
+            handleSuccess({ disbaleToast, msgType: 'SUCCESS', msg: successMsg, successCb, data: text });
+          };
           utteranceCbk.onerror = () => setIsAudioOn(false);
         } catch (error) {
           return handleError({ disbaleToast, msgType: 'ERROR', msg: failureMsg.error, failureCb });
         }
+      } else {
+        return handleError({ disbaleToast, msgType: 'BAD_REQUEST', msg: failureMsg.badRequest, failureCb });
       }
     } else {
       return handleError({ disbaleToast, msgType: 'UN_SUPPORTED_FEATURE', msg: failureMsg.unSupported, failureCb });
@@ -47,17 +51,10 @@ function InitTextToSpeech({
     };
   }, []);
 
-  return isAudioOn ? (
-    React.Children.map(children, (child) => (child.type.name === 'StopTextToSpeech') && React.cloneElement(child, {
-      onClick: handleStop,
-      disbaleToast,
-      successCb,
-      successMsg,
-      failureCb,
-      failureMsg,
-    }))
-  ) : React.Children.map(children, (child) => (child.type.name === 'StartTextToSpeech') && React.cloneElement(child, {
-    onClick: handlePlay,
+  return React.Children.map(children, (child) => React.cloneElement(child, {
+    handleStop,
+    handlePlay,
+    isAudioOn,
     disbaleToast,
     successCb,
     successMsg,
@@ -66,28 +63,29 @@ function InitTextToSpeech({
   }));
 }
 
-InitTextToSpeech.isBrowserSupport = () => globalThis.speechSynthesis
+TextToSpeechInit.isBrowserSupport = () => globalThis.speechSynthesis
   && globalThis.speechSynthesis?.cancel
   && globalThis.speechSynthesis?.speak
   && true;
 
-InitTextToSpeech.propTypes = {
+TextToSpeechInit.propTypes = {
   disbaleToast: PropTypes.bool,
   successCb: PropTypes.func,
   failureCb: PropTypes.func,
   successMsg: PropTypes.string,
   failureMsg: PropTypes.object,
 };
 
-InitTextToSpeech.defaultProps = {
+TextToSpeechInit.defaultProps = {
   disbaleToast: false,
   successCb: () => {},
   failureCb: () => {},
   successMsg: '',
   failureMsg: {
     unSupported: '',
+    badRequest: '',
     error: '',
   },
 };
 
-export default Wrapper(InitTextToSpeech);
+export default Wrapper(TextToSpeechInit);

__app/component/TextToSpeech/TextToSpeechStart.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function TextToSpeechStart({ children, handlePlay, isAudioOn }) {
+  return !isAudioOn && React.Children.map(children || 'Start', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+    onClick: handlePlay,
+    type: 'ttsStart',
+  }));
+}
+
+export default TextToSpeechStart;

__app/component/TextToSpeech/TextToSpeechStop.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function TextToSpeechStop({ children, handleStop, isAudioOn }) {
+  return isAudioOn && React.Children.map(children || 'Stop', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+    onClick: handleStop,
+    type: 'ttsStop',
+  }));
+}
+
+export default TextToSpeechStop;

__app/component/VoiceRecognition/VoiceRecognition.js

@@ -0,0 +1,9 @@
+import VoiceRecognition from './VoiceRecognitionInit';
+import VoiceRecognitionIcon from './VoiceRecognitionIcon';
+import VoiceRecognitionModal from './VoiceRecognitionModal';
+
+export {
+  VoiceRecognition,
+  VoiceRecognitionIcon,
+  VoiceRecognitionModal,
+};

__app/component/VoiceRecognition/VoiceRecognitionIcon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function VoiceRecognitionIcon({ children, onClick }) {
+  return React.Children.map(children || 'Voice Recognition', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+    onClick,
+  }));
+}
+
+export default VoiceRecognitionIcon;

__app/component/VoiceRecognition/VoiceRecognitionInit.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Wrapper from '../Wrapper/Wrapper';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+// import './voiceSearch.css';
+// import Modal from '../../components/Modal/Modal';
+// import VoiceLoader from './VoiceLoader';
+// import LoadingDots from '../../components/LoadingDots/LoadingDots';
+
+function VoiceRecognition({
+  disbaleToast,
+  successCb,
+  successMsg,
+  failureCb,
+  failureMsg,
+  cb,
+  children,
+}) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [voiceText, setVoiceText] = useState('');
+  const [isLoadingDots, setIsLoadingDots] = useState(true);
+
+  const listen = () => {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+
+    recognition.continuous = false;
+    recognition.lang = 'en-US';
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 1;
+    recognition.onresult = (event) => {
+      const text = event.results[0][0].transcript;
+      setVoiceText(text);
+      if (event.results[0].isFinal) {
+        setTimeout(() => {
+          cb(text, true);
+          setModalVisible(false);
+          setVoiceText('');
+        }, 1500);
+      }
+    };
+    recognition.start();
+    recognition.onsoundstart = () => {
+      setIsLoadingDots(false);
+    };
+    recognition.onsoundend = () => {
+      setIsLoadingDots(true);
+    };
+    recognition.onerror = () => {
+      setModalVisible(false);
+    };
+    recognition.onend = () => {
+      recognition.abort();
+      recognition.onresult = () => {};
+      recognition.stop();
+      setTimeout(() => setModalVisible(false), 1500);
+    };
+    setModalVisible(true);
+  };
+
+  return React.Children.map(children, (child) => React.cloneElement(child, {
+    onClick: child.type.name === 'VoiceRecognitionIcon' ? listen : () => {},
+    disbaleToast,
+    successCb,
+    successMsg,
+    failureCb,
+    failureMsg,
+  }));
+}
+
+VoiceRecognition.isBrowserSupport = () => globalThis.speechSynthesis
+  && globalThis.speechSynthesis?.cancel
+  && globalThis.speechSynthesis?.speak
+  && true;
+
+VoiceRecognition.propTypes = {
+  disbaleToast: PropTypes.bool,
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+};
+
+VoiceRecognition.defaultProps = {
+  disbaleToast: false,
+  successCb: () => {},
+  failureCb: () => {},
+  successMsg: '',
+  failureMsg: {
+    unSupported: '',
+    error: '',
+  },
+};
+
+export default Wrapper(VoiceRecognition);
+
+// {
+//   <FontAwesomeIcon icon="fa-solid fa-microphone"
+// size="xl" style={{ color: 'var(--secondary)' }} className="voiceIcon" onClick={listen} />
+
+//     modalVisible ? (
+//       <Modal modalTitle="Listening..." onClickCloseIcon={() =>
+// setModalVisible(false)} titleClasses="listen" modalClass="voice-modal">
+//         <div className="voice-text">{voiceText}</div>
+//         <div className="loading-container">
+//           {isLoadingDots ? <LoadingDots /> : <VoiceLoader />}
+//         </div>
+//       </Modal>
+//     ) : null
+//   }

__app/component/VoiceRecognition/VoiceRecognitionModal.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function VoiceRecognitionModal() {
+  return (
+    <div>VoiceRecognitionModal</div>
+  );
+}

__app/script/generateIndex.js

@@ -31,8 +31,9 @@ components.forEach((component) => {
   const componentDir = path.resolve(`${__dirname}`, `../../${component}`);
   mkdirp(componentDir).then(() => {
     const componentFile = path.resolve(componentDir, 'index.js');
-    // const componentContent = `export { default } from '../__build/${component}';\nexport * from '../__build/${component}';\n`;
-    const componentContent = `import ${component} from '../__build/${component}/${component}';\nexport default ${component};\n`;
+    const componentContent = `export { default } from '../__build/${component}/${component}';\nexport * from '../__build/${component}/${component}';\n`;
+    // const componentContent = `import ${component}
+    // from '../__build/${component}/${component}';\nexport default ${component};\n`;
     fs.writeFile(componentFile, componentContent, (writeFileErr) => {
       if (writeFileErr) throw writeFileErr;
       console.log(color[getRandomInt(color.length)].value, ` ${count + 3}. generated: ${componentFile} \n`);