diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..176a458 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 56f6087..84c613f 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -11,13 +11,22 @@ that can be consumed in isolation. ### Tooling -- [PNPM](https://pnpm.io/) to manage packages and dependencies +- [NPM](https://www.npmjs.com/) to manage packages and dependencies ### Commands -**`pnpm install`**: bootstraps the entire project, symlinks all dependencies for +**`npm install`**: bootstraps the entire project, symlinks all dependencies for cross-component development and builds all components. +**`npm start`**: Runs the build and watch command for all component packages. + +**`npm run build`**: run build for all component packages. + +**`npm run test`**: run test for all component packages. + +**`npm run commit`**: to commit the changes. + +**`npm run create --component=Share_TEST`**: to create a component along with necessary files ## Think you found a bug? @@ -27,8 +36,7 @@ link. You may wish to use our starters to help you get going: -- JavaScript Starter: https://codesandbox.io/s/fe-pilotJS -- TypeScript Starter: https://codesandbox.io/s/fe-pilotTs +- JavaScript Starter: https://codesandbox.io/p/sandbox/fe-pilotjs-lts3rg ## Proposing new or changed API? @@ -69,19 +77,22 @@ the following categories: ### Steps to PR -Under Maintenance +1. Fork the fe-pilot repository and clone your fork. -### Tests +2. Create a new branch out of the `main` branch. We follow the convention + `[type/scope]`. For example `fix/share` or `docs/scanner`. `type` + can be either `docs`, `fix`, `feat`, `build`, or any other conventional + commit type. `scope` will be short name that describes the scope of work. -All commits that fix bugs or add features need a test. +3. Make and commit your changes following the + [commit convention](https://github.com/opensrc0/fe-pilot/blob/main/.github/CONTRIBUTING.md#commit-convention). -## Want to write a blog post or tutorial -Under Maintenance +### Tests -## Want to help improve the docs? +All commits that fix bugs or add features need a test. -Under Maintenance +> **Dear fe-pilot team:** Please do not merge code without tests ## License diff --git a/.github/README.md b/.github/README.md index 963bfe9..db6578b 100644 --- a/.github/README.md +++ b/.github/README.md @@ -6,7 +6,7 @@

- Minified Size + Minified Size React Version @@ -40,7 +40,7 @@ A React UI library for Advance Web Features that streamlines the development of 6. 📝 [Contributing](#contributing) 7. ✨ [Contributors](#contributors) 8. ⚖️ [License](#license) - + ## Features - **Web/Mobile Support:** fe-pilot will be helpfull in Large/Mid/Small size of web based applications. - **Ease of Use:** fe-pilot contains a set of components like `Scanner`, `PhoneBook`, `Voice Search`, `Share`, `Live Location Tracking`, `Current Location` that are easy to plug and play. @@ -49,19 +49,19 @@ A React UI library for Advance Web Features that streamlines the development of ## Installation Install `fe-pilot` package using any package manager -###### 1. Package Manager yarn +###### 1. Package Manager yarn ```sh yarn add fe-pilot ``` -###### 2. Package Manager npm -```sh +###### 2. Package Manager npm +```sh npm i fe-pilot --save ``` -###### 3. Package Manager pnpm +###### 3. Package Manager pnpm ```sh pnpm add fe-pilot ``` -###### 4. Package Manager bun +###### 4. Package Manager bun ```sh bun add fe-pilot ``` @@ -72,7 +72,7 @@ bun add fe-pilot ```js import Share from 'fe-pilot/Share'; -

> See the list of components > -> ### +> ### > 01. :white_check_mark: AutoFillOtp             [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md) > 00. :white_check_mark: ColorPicker            [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md) > 00. :white_check_mark: CopyToClipboard  [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md) @@ -104,13 +104,6 @@ import Share from 'fe-pilot/Share'; -#### 2. Stackblitz -- JavaScript Starter: https://stackblitz.com/edit/fe-pilot?file=src%2FApp.jsx - - - -
- ## Demo the features and component 1. https://6jpxdq.csb.app/ > [!IMPORTANT] @@ -119,7 +112,7 @@ import Share from 'fe-pilot/Share';
## Contributing -Feel like contributing? Most welcome! +Feel like contributing? Most welcome! [Setup locally](https://github.com/opensrc0/fe-pilot/blob/HEAD/.github/SETUP.md) to get fe-pilot working on your local machine and [guide lines](https://github.com/opensrc0/fe-pilot/blob/main/.github/CONTRIBUTING.md) to contribute in fe-pilot. ## Contributors diff --git a/.github/SETUP.md b/.github/SETUP.md index 1d3a0bf..53d774f 100644 --- a/.github/SETUP.md +++ b/.github/SETUP.md @@ -3,7 +3,7 @@ Clone the repository and run the following commands from the root directory of f ## Local setup -#### 1. Go to the fe-pilot repo location in your terminal and do +#### 1. Go to the fe-pilot repo location in your terminal and do ``` npm install npm start @@ -37,8 +37,8 @@ import { TextToSpeechInit, TextToSpeechStart, TextToSpeechStop } from 'fe-pilot/ ## Folder Structure ``` fe-pilot - └── __app - └── component + └── __app + └── component ├──TextToSpeech (component name) | ├──TextToSpeech.js (top level exports/re-exports) | ├──TextToSpeechInit.js (parent component) diff --git a/README.md b/README.md index 347d803..39e36ec 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@

- Minified Size + Minified Size React Version @@ -40,7 +40,7 @@ A React UI library for Advance Web Features that streamlines the development of 6. 📝 [Contributing](#contributing) 7. ✨ [Contributors](#contributors) 8. ⚖️ [License](#license) - + ## Features - **Web/Mobile Support:** fe-pilot will be helpfull in Large/Mid/Small size of web based applications. - **Ease of Use:** fe-pilot contains a set of components like `Scanner`, `PhoneBook`, `Voice Search`, `Share`, `Live Location Tracking`, `Current Location` that are easy to plug and play. @@ -49,19 +49,19 @@ A React UI library for Advance Web Features that streamlines the development of ## Installation Install `fe-pilot` package using any package manager -###### 1. Package Manager yarn +###### 1. Package Manager yarn ```sh yarn add fe-pilot ``` -###### 2. Package Manager npm -```sh +###### 2. Package Manager npm +```sh npm i fe-pilot --save ``` -###### 3. Package Manager pnpm +###### 3. Package Manager pnpm ```sh pnpm add fe-pilot ``` -###### 4. Package Manager bun +###### 4. Package Manager bun ```sh bun add fe-pilot ``` @@ -72,7 +72,7 @@ bun add fe-pilot ```js import Share from 'fe-pilot/Share'; -

See the list of components -### -1. :white_check_mark: AutoFillOtp               [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md) -2. :white_check_mark: ColorPicker        [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md) -3. :white_check_mark: CopyToClipboard  [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md) -4. :white_check_mark: FaceDetector        [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md) -5. :white_check_mark: LiveLocation            [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md) -6. :white_check_mark: LocateMe                  [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md) -7. :white_check_mark: PhoneBook              [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md) -8. :white_check_mark: Scanner                     [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md) -9. :white_check_mark: Share                          [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md) -10. :white_check_mark: TextToSpeech         [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md) -11. :white_check_mark: VoiceRecognition  [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md) -12. :white_check_mark: Vibrate                      [Implementation & Structure](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md) +### +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 >

## Online Editor Templates @@ -104,20 +104,13 @@ import Share from 'fe-pilot/Share'; -#### 2. Stackblitz -- JavaScript Starter: https://stackblitz.com/edit/fe-pilot?file=src%2FApp.jsx - - - -
- ## Demo the features and component 1. https://6jpxdq.csb.app/ ## Contributing -Feel like contributing? Most welcome! +Feel like contributing? Most welcome! [Setup locally](https://github.com/opensrc0/fe-pilot/blob/HEAD/.github/SETUP.md) to get fe-pilot working on your local machine and [guide lines](https://github.com/opensrc0/fe-pilot/blob/main/.github/CONTRIBUTING.md) to contribute in fe-pilot. ## Contributors diff --git a/__app/component/FaceDetector/README.md b/__app/component/FaceDetector/README.md index e69de29..0f4aff6 100644 --- a/__app/component/FaceDetector/README.md +++ b/__app/component/FaceDetector/README.md @@ -0,0 +1,8 @@ + + +```mermaid +graph TD; + FaceDetector--->FaceDetectorClose; + FaceDetector--->FaceDetectorFacing; + FaceDetector--->FaceDetectorFlash; +``` diff --git a/__app/component/Scanner/README.md b/__app/component/Scanner/README.md index 8b13789..f46f238 100644 --- a/__app/component/Scanner/README.md +++ b/__app/component/Scanner/README.md @@ -1 +1,12 @@ + +```mermaid +graph TD; + Scanner--->CameraClick; + Scanner--->CameraClose; + Scanner--->CameraFacing; + Scanner--->CameraFlash; + Scanner--->CameraScanBox; + Scanner--->PhoneGallery; + Scanner--->StartCamera; +``` diff --git a/__app/component/TextToSpeech/README.md b/__app/component/TextToSpeech/README.md index 2621bc6..b32b667 100644 --- a/__app/component/TextToSpeech/README.md +++ b/__app/component/TextToSpeech/README.md @@ -1,4 +1,4 @@ -## 1. Happy Flow +## 1. Happy Flow ```js @@ -11,5 +11,10 @@ ``` - - \ No newline at end of file + +```mermaid +graph TD; + TextToSpeech--->TextToSpeechInit; + TextToSpeech--->TextToSpeechStart; + TextToSpeech--->TextToSpeechStop; +``` diff --git a/__app/component/VoiceRecognition/README.md b/__app/component/VoiceRecognition/README.md index b4b842d..cce53f8 100644 --- a/__app/component/VoiceRecognition/README.md +++ b/__app/component/VoiceRecognition/README.md @@ -1,5 +1,5 @@ -## 1. Happy Flow +## 1. Happy Flow ```js @@ -8,5 +8,10 @@ ``` - - \ No newline at end of file + +```mermaid +graph TD; + VoiceRecognition--->TextToSpeechInit; + VoiceRecognition--->VoiceRecognitionIcon; + VoiceRecognition--->VoiceRecognitionModal; +``` diff --git a/__app/component/WhatsappShare/README.md b/__app/component/WhatsappShare/README.md new file mode 100644 index 0000000..ee8a906 --- /dev/null +++ b/__app/component/WhatsappShare/README.md @@ -0,0 +1,43 @@ +## 1. Happy Flow +#### a) Passing child + + + + +## 2. Success: successCb callBack Fn along with success msg + + + + + +> [!Note] +> **successCb** will get an object contains the property **msgType**, **msg**, **data** + +## 3. Failure: failureCb callBack Fn along with failure msg + + + + + +> [!Note] +> **failureCb** will get an object contains the property **msgType**, **msg** + +> [!Important] +Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component + +## 4. Failure: Device don't support the feature and you want to hide the feauture from User + + + + + +> [!Note] +> if **showForever** props value is false, feature will be hidden in case of unSupported by the device + +## 5. Combine with all props + + + + + + \ No newline at end of file diff --git a/__app/component/WhatsappShare/WhatsappShare.js b/__app/component/WhatsappShare/WhatsappShare.js new file mode 100644 index 0000000..b44feaf --- /dev/null +++ b/__app/component/WhatsappShare/WhatsappShare.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { handleSuccess, handleError } from '../services/handlerService'; +import Wrapper from '../Wrapper/Wrapper'; + +const failureMsgDefault = { + unSupported: 'WhatsappShare is not supporting in your device', + badRequest: 'msg is missing', + error: 'Unable to fetch details from WhatsappShare', +}; + +function WhatsappShare({ + successCb, + failureCb, + successMsg, + failureMsg: failureMsgProps, + children, + mobile, + msg, +}) { + const failureMsg = { ...failureMsgDefault, ...failureMsgProps }; + + const getWhatsappShare = () => { + if (mobile) { + window.location.href = `https://wa.me/${mobile}/?text=${msg}`; + handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: msg }); + } else if (msg) { + window.location.href = `https://wa.me/?text=${msg}`; + handleSuccess({ msgType: 'SUCCESSFUL', msg: successMsg, successCb, data: msg }); + } else { + return handleError({ msgType: 'BAD_REQUEST', msg: failureMsg.badRequest, failureCb }); + } + + return true; + }; + + return ( +
+ {React.Children.map(children || 'Whatsapp Share', (child) => React.cloneElement( + typeof child === 'string' ? {child} : child, + { + onClick: getWhatsappShare, + }, + ))} +
+ ); +} + +WhatsappShare.isBrowserSupport = () => globalThis && true; + +WhatsappShare.propTypes = { + successCb: PropTypes.func, + failureCb: PropTypes.func, + successMsg: PropTypes.string, + failureMsg: PropTypes.object, + mobile: PropTypes.number, + msg: PropTypes.string, +}; + +WhatsappShare.defaultProps = { + successCb: () => {}, + failureCb: () => {}, + successMsg: 'WhatsappShare details fetch Successfully', + failureMsg: { ...failureMsgDefault }, + mobile: '', + msg: '', +}; + +export default Wrapper(WhatsappShare); diff --git a/__app/component/WhatsappShare/index.js b/__app/component/WhatsappShare/index.js new file mode 100644 index 0000000..d0e29f0 --- /dev/null +++ b/__app/component/WhatsappShare/index.js @@ -0,0 +1,5 @@ +import WhatsappShare from './WhatsappShare'; + +export { WhatsappShare }; + +export default WhatsappShare; diff --git a/__app/script/boilerPlate.js b/__app/script/boilerPlate.js index 508feb9..5c9b4c7 100644 --- a/__app/script/boilerPlate.js +++ b/__app/script/boilerPlate.js @@ -4,7 +4,18 @@ const fs = require('fs'); const path = require('path'); const { mkdirp } = require('mkdirp'); -const { COMPONENT } = process.env; +const ignoreFiles = [ + '.DS_Store', + 'scripts', + 'utils', + 'WIP-', + 'services', + 'Wrapper', +]; +// generate exports for all platforms +const srcPath = path.resolve(__dirname, '../component'); + +const COMPONENT = process.env.npm_config_component; // const srcPath = path.resolve(__dirname, '__app/component'); const componentDir = path.resolve(`${__dirname}`, `../component/${COMPONENT}`); @@ -34,7 +45,7 @@ function ${COMPONENT}({ }; return ( - React.Children.map(children || 'PhoneBook', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { + React.Children.map(children || '${COMPONENT}', (child) => React.cloneElement(typeof child === 'string' ? {child} : child, { onClick: get${COMPONENT}, })) ); @@ -54,7 +65,7 @@ ${COMPONENT}.defaultProps = { successCb: () => {}, failureCb: () => {}, loadingCb: () => {}, - successMsg: 'Phonebook details fetch Successfully', + successMsg: '${COMPONENT} details fetch Successfully', failureMsg: { ...failureMsgDefault }, }; @@ -67,7 +78,7 @@ export { ${COMPONENT} }; export default ${COMPONENT}; `; - const READMEContent = `## 1. Happy Flow + const READMEContent = `## 1. Happy Flow #### a) Passing child @@ -112,6 +123,17 @@ Failure can happend due to multiple reasons, due to that reason **failureMsg** i `; fs.writeFile((`${componentDir}/${COMPONENT}.js`), componentContent, () => {}); - fs.writeFile((`${componentDir}/index.js`), IndexContent, () => {}); + fs.writeFile((`${componentDir}/index.js`), IndexContent, () => { + const components = fs.readdirSync(srcPath).filter((files) => !ignoreFiles.includes(files) && !files.includes('WIP-')); + let rootIndexImport = ''; + let rootIndexExport = '\nexport {\n'; + components.forEach((component) => { + rootIndexImport += `import ${component} from './${component}';\n`; + rootIndexExport += ` ${component},\n`; + }); + + rootIndexExport += '};\n'; + fs.writeFile((path.resolve(`${__dirname}`, '../../index.js')), rootIndexImport + rootIndexExport, () => {}); + }); fs.writeFile((`${componentDir}/README.md`), READMEContent, () => {}); }); diff --git a/package.json b/package.json index 50a8272..bd0fa76 100644 --- a/package.json +++ b/package.json @@ -5,19 +5,19 @@ "main": "index.js", "scripts": { "test": "echo \"Success: Verified\"", + "precreate": "npm pkg set keywords[].=$npm_config_component", "create": "node ./__app/script/boilerPlate.js", + "postcreate": "npm pkg set files[].=$npm_config_component/", "start": "npm run local", - "local": "npm run local:indexfile && npm run local:component", - "local:indexfile": "node ./__app/script/generateIndex.js", - "local:component": "babel __app/component -d __build --watch", - "prod": "npm run prod:indexfile && npm run prod:componentmin", - "prod:indexfile": "node ./__app/script/generateIndex.js", - "prod:component": "NODE_ENV=production babel __app/component -d __build", - "prod:componentmin": "NODE_ENV=production BABEL_ENV=minify babel __app/component -d __build --out-file-extension .js", + "prelocal": "node ./__app/script/generateIndex.js", + "local": "NODE_ENV=development babel __app/component -d __build --watch", + "preprod": "node ./__app/script/generateIndex.js", + "prod": "NODE_ENV=production BABEL_ENV=minify babel __app/component -d __build --out-file-extension .js", "commit": "npm run lint:check && git-cz", "lint:check": "lint-staged", "lint:fix": "eslint . --fix", - "semantic-release": "semantic-release --branches master" + "semantic-release": "semantic-release --branches master", + "prod:unminified": "NODE_ENV=production babel __app/component -d __build" }, "author": "Himanshu Gupta", "license": "MIT", @@ -59,7 +59,8 @@ "livelocationtracking", "detectmylocation", "colorpicker", - "wakelock" + "wakelock", + "WhatsappShare" ], "config": { "commitizen": { @@ -97,7 +98,8 @@ "TextToSpeech/", "VoiceRecognition/", "Vibrate/", - "ColorPicker/" + "ColorPicker/", + "WhatsappShare/" ], "devDependencies": { "@babel/cli": "^7.23.9",