Skip to content

Commit f49ad37

Browse files
Merging all functionality and styling from first branch to main (#1)
* update parcel * autocomplete react component and css pasted in * refactored selection mechanic and css * remove cache and update gitignore * move example into same repo * add pdl library to example * add issues, publish action and pr template * eslint config setup * fixed eslint problems * modify rules * added eslint rules * peerdependencies * fix errors * Update README.md * update readme to correct npm * update gitignore for vscode * fix workflow file * remove needs from action Co-authored-by: vvillait88 <vvillait88@yahoo.com>
1 parent c2953ec commit f49ad37

20 files changed

+12259
-2
lines changed

.eslintrc.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
},
6+
extends: [
7+
'plugin:react/recommended',
8+
'airbnb',
9+
],
10+
parserOptions: {
11+
ecmaFeatures: {
12+
jsx: true,
13+
},
14+
ecmaVersion: 'latest',
15+
sourceType: 'module',
16+
},
17+
plugins: [
18+
'react',
19+
'unused-imports',
20+
],
21+
rules: {
22+
'react/prop-types': 'off',
23+
'react/jsx-filename-extension': 'off',
24+
'jsx-a11y/mouse-events-have-key-events': 'off',
25+
'jsx-a11y/no-static-element-interactions': 'off',
26+
'react/no-array-index-key': 'off',
27+
},
28+
};

.github/ISSUE_TEMPLATE/bug_report.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Describe the bug**
11+
A clear and concise description of what the bug is.
12+
13+
**To Reproduce**
14+
Steps to reproduce the behavior:
15+
16+
**Expected behavior**
17+
A clear and concise description of what you expected to happen.
18+
19+
**Screenshots**
20+
If applicable, add screenshots to help explain your problem.
21+
- pdl-react-autocomplete Library Version
22+
- Node Version
23+
- NPM Version
24+
- React Version
25+
26+
**Additional context**
27+
Add any other context about the problem here.
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
8+
---
9+
10+
**Is your feature request related to a problem? Please describe.**
11+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12+
13+
**Describe the solution you'd like**
14+
A clear and concise description of what you want to happen.
15+
16+
**Describe alternatives you've considered**
17+
A clear and concise description of any alternative solutions or features you've considered.
18+
19+
**Additional context**
20+
Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Description of the change
2+
3+
> Description here
4+
5+
## Type of change
6+
7+
- [ ] Bug fix (non-breaking change that fixes an issue)
8+
- [ ] Chore (cleanup or minor QOL tweak that has little to no impact on functionality)
9+
- [ ] New feature (non-breaking change that adds functionality)
10+
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

.github/workflows/publish.yaml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: Publish Package to NPM
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
jobs:
8+
publish-npm:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v3
12+
- uses: actions/setup-node@v3
13+
with:
14+
node-version: 16
15+
registry-url: https://registry.npmjs.org/
16+
- run: yarn
17+
- run: yarn run pub
18+
env:
19+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ typings/
7474

7575
# parcel-bundler cache (https://parceljs.org/)
7676
.cache
77+
.parcel-cache
7778

7879
# Next.js build output
7980
.next
@@ -102,3 +103,6 @@ dist
102103

103104
# TernJS port file
104105
.tern-port
106+
107+
# VSCode
108+
.vscode

README.md

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,102 @@
1-
# pdl-react-autocomplete
2-
React Component for AutoComplete
1+
<h1 align="center">PDL React Autocomplete</h1>
2+
<p align="center">
3+
<a href="">
4+
<img src="https://img.shields.io/badge/repo%20status-Active-limegreen" alt="Repo Status">
5+
</a>&nbsp;
6+
<a href="https://www.npmjs.com/pdl-react-autocomplete">
7+
<img src="https://img.shields.io/npm/v/pdl-react-autocomplete.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="PDL React Autocomplete" />
8+
</a>&nbsp;
9+
</p>
10+
11+
This library allows users to search the PDL Autocomplete API for valid Search API query values within a specific field along with the number of available records for each suggestion, receive autocompetion suggestions in a drop down of options, and then select a suggestion to be passed into a callback function.
12+
13+
<p align="center">
14+
<img src="https://user-images.githubusercontent.com/103519873/166407827-c554983e-4b8e-4ba7-89a9-b851167f0b47.gif"/>
15+
</p>
16+
17+
For example, a user queries the 'company' field with the text of 'goog' as a search term, and the autocomplete component will show a dropdown of options that most closely match this search, such as 'google'. The user either clicks or uses their keyboard to select 'google', and 'google' gets passed as the argument to a callback function has been passed down to this component as a prop.
18+
19+
## Table of Contents
20+
- [🔧 Installation](#installation)
21+
- [🚀 Usage](#usage)
22+
- [📘 Documentation](#documentation)
23+
24+
## 🔧 Installation <a name="installation"></a>
25+
26+
1. Pull the package from the npm repository:
27+
28+
```bash
29+
yarn add pdl-react-autocomplete
30+
```
31+
or
32+
```bash
33+
npm i pdl-react-autocomplete
34+
```
35+
36+
2. Sign up for a [free PDL API key](https://www.peopledatalabs.com/signup)
37+
38+
## 🚀 Usage <a name="usage"></a>
39+
40+
First, import the component library:
41+
```js
42+
import Autocomplete from 'pdl-react-autocomplete';
43+
```
44+
45+
Then, use the library like any other React component:
46+
```js
47+
return (
48+
<div className="App">
49+
<Autocomplete
50+
field={'company'}
51+
size={5}
52+
onTermSelected={(term) => console.log('onSelectedTerm', term)}
53+
apiKey={'insertKeyHere'}
54+
/>
55+
</div>
56+
);
57+
```
58+
59+
## 📘 Documentation <a name="documentation"></a>
60+
The Autocomplete API endpoint is documented here: https://docs.peopledatalabs.com/docs/autocomplete-api
61+
62+
### Props
63+
1. **field** (required)
64+
- The field input parameter specifies which type of field to run autocomplete for. The fields supported by the Autocomplete API map to a subset of the Person Schema fields.
65+
- The list of all valid arguments is:
66+
1. company
67+
2. country
68+
3. industry
69+
4. location
70+
5. major
71+
6. region
72+
7. role
73+
8. school
74+
9. sub_role
75+
10. skill
76+
11. title
77+
78+
- Each field argument value for the Autocomplete API maps to a specific subset of Person Schema fields. To see the exact mappings, visit the [Autocomplete API Input Parameters](https://docs.peopledatalabs.com/docs/input-parameters-autocomplete-api) documentation
79+
80+
2. **onTermSelected** (required)
81+
- Callback function to be executed on the text of the input, but only as a result of selecting an autocompletion suggestion by mouse click or the 'enter' key.
82+
83+
3. **API Key** (required)
84+
- PDL API Key required to avoid a 401 error.
85+
86+
4. **size**
87+
- Number of results returned for autocompletion. Must be between 1 and 100. Set to 10 by default.
88+
89+
### Styling
90+
Refer to the styles in this [css file](https://github.com/peopledatalabs/pdl-react-autocomplete/blob/first/src/index.css) and override the styling of an existing class by creating a new code block with the same class name, but with the '!important' tag.
91+
```css
92+
.pdl-suggestion {
93+
width: 100%;
94+
padding: .5rem;
95+
justify-content: space-between;
96+
}
97+
98+
/* your styling override */
99+
.pdl-suggestion {
100+
background-color: red !important;
101+
}
102+
```

example/.env.local.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_PDL_API_KEY=...

example/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

example/README.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Getting Started with Create React App
2+
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4+
5+
## Available Scripts
6+
7+
In the project directory, you can run:
8+
9+
### `yarn start`
10+
11+
Runs the app in the development mode.\
12+
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13+
14+
The page will reload when you make changes.\
15+
You may also see any lint errors in the console.
16+
17+
### `yarn test`
18+
19+
Launches the test runner in the interactive watch mode.\
20+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21+
22+
### `yarn build`
23+
24+
Builds the app for production to the `build` folder.\
25+
It correctly bundles React in production mode and optimizes the build for the best performance.
26+
27+
The build is minified and the filenames include the hashes.\
28+
Your app is ready to be deployed!
29+
30+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31+
32+
### `yarn eject`
33+
34+
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
35+
36+
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37+
38+
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39+
40+
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41+
42+
## Learn More
43+
44+
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45+
46+
To learn React, check out the [React documentation](https://reactjs.org/).
47+
48+
### Code Splitting
49+
50+
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51+
52+
### Analyzing the Bundle Size
53+
54+
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55+
56+
### Making a Progressive Web App
57+
58+
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59+
60+
### Advanced Configuration
61+
62+
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63+
64+
### Deployment
65+
66+
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67+
68+
### `yarn build` fails to minify
69+
70+
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

0 commit comments

Comments
 (0)