Skip to content

Commit b9f3ad3

Browse files
ghosnkarlghosnkarl
authored
Merge pull request #1 from ghosnkarl/files
Files
2 parents a988d34 + 69b7fef commit b9f3ad3

File tree

9 files changed

+464
-75
lines changed

9 files changed

+464
-75
lines changed

‎CONTRIBUTIONS.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# Contributing to React API Search
2+
3+
Thank you for considering contributing to **React API Search**! We welcome contributions from the community and appreciate your interest in improving this project.
4+
5+
## How to Contribute
6+
7+
There are several ways you can contribute to this project:
8+
9+
1. **Report Bugs**
10+
2. **Suggest Features**
11+
3. **Fix Bugs or Implement Features**
12+
4. **Update Documentation**
13+
5. **Improve Tests**
14+
15+
# Fork the repository on GitHub and clone it
16+
17+
```bash
18+
git clone https://github.com/ghosnkarl/react-api-search.git
19+
cd react-api-search
20+
```
21+
22+
## Setting Up the Development Environment
23+
24+
1. Install dependencies:
25+
26+
```bash
27+
npm install
28+
```
29+
30+
2. Since the library cannot run as a standalone app, use \`npm link\` to test it in a separate project:
31+
32+
```bash
33+
npm link
34+
```
35+
36+
3. In your test project (e.g., a React app where you want to test the library), link the library:
37+
38+
```bash
39+
cd path-to-your-test-project
40+
npm link react-api-search
41+
```
42+
43+
4. Now, import the library in your test project and test the functionality.
44+
45+
5. To unlink after testing:
46+
47+
```bash
48+
npm unlink react-api-search
49+
```
50+
51+
6. To run tests:
52+
53+
```bash
54+
npm test
55+
```
56+
57+
## Making Changes
58+
59+
1. **Create a new branch**:
60+
Always create a new branch for your changes. Use a descriptive name for the branch that reflects the feature or bug you're working on.
61+
62+
```bash
63+
git checkout -b feature-name
64+
```
65+
66+
2. **Make your changes**:
67+
Edit the necessary files, and follow the existing code style and conventions.
68+
69+
3. **Write tests** (if applicable):
70+
If your change involves new functionality or fixes a bug, please add tests. The project uses [Jest](https://jestjs.io/) for testing.
71+
72+
4. **Commit your changes**:
73+
Commit your changes with a clear, concise message that explains the purpose of your modification.
74+
75+
```bash
76+
git add .
77+
git commit -m "Add feature XYZ"
78+
```
79+
80+
5. **Push your changes**:
81+
Push your branch to your forked repository.
82+
83+
```bash
84+
git push origin feature-name
85+
```
86+
87+
6. **Open a Pull Request**:
88+
Go to the [GitHub repository](https://github.com/ghosnkarl/react-api-search) and open a pull request (PR). Describe the changes you've made and the reason for them.
89+
90+
## Code Style
91+
92+
To ensure a consistent code style throughout the project, please follow these guidelines:
93+
94+
- Use **ESLint** and **Prettier** for linting and formatting (both are set up in this project).
95+
- Use **TypeScript** for type safety.
96+
- Follow the established pattern of functional components and hooks.
97+
- Keep code clean and well-commented.
98+
99+
## Writing Tests
100+
101+
The project uses [Jest](https://jestjs.io/) for testing. If you are adding new features or fixing bugs, please write tests to cover those changes.
102+
103+
- **Unit tests**: For testing individual functions or components.
104+
- **Integration tests**: For testing how components work together.
105+
106+
To run tests:
107+
108+
```bash
109+
npm test
110+
```
111+
112+
## Commit Messages
113+
114+
We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) convention for commit messages. This makes it easier to generate changelogs and understand the history of the project.
115+
116+
Example commit message format:
117+
118+
- **feat**: Add new search result feature
119+
- **fix**: Fix error handling in search results
120+
- **docs**: Update documentation for new features
121+
- **chore**: Update dependencies
122+
123+
## Reporting Issues
124+
125+
If you find a bug or issue, please report it by opening a new issue in the [Issues section](https://github.com/ghosnkarl/react-api-search/issues) of the repository. When submitting an issue, please provide:
126+
127+
- A clear description of the problem.
128+
- Steps to reproduce the issue.
129+
- Expected vs. actual behavior.
130+
- Any relevant error messages or logs.
131+
132+
## License
133+
134+
By contributing to this project, you agree that your contributions will be licensed under the project’s [MIT License](LICENSE).
135+
136+
---
137+
138+
Thank you for contributing! Together, we can make **React API Search** even better. 🚀

‎README.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# React API Search
2+
3+
A highly customizable, debounce-enabled, and fully-featured React API Search component designed to fetch and display search results asynchronously. Ideal for scenarios where the search query is used to fetch data from APIs or databases, with built-in support for loading, error handling, and no-result states.
4+
5+
## Features
6+
7+
- **Debounced Search**: Customizable debounce delay to prevent excessive API calls while typing.
8+
- **Loading & Error States**: Display loading spinners or error messages while fetching data.
9+
- **Dropdown Menu**: A dropdown menu that displays search results, with full control over its visibility.
10+
- **Customizable Styles**: Easily apply custom styles to the container, input field, results list, items, and icons.
11+
- **Flexible Data Fetching**: Works with any asynchronous data-fetching method.
12+
- **TypeScript Support**: Fully typed for better development experience and safety.
13+
14+
## Installation
15+
16+
```bash
17+
npm install react-api-search
18+
```
19+
20+
or
21+
22+
```bash
23+
yarn add react-api-search
24+
```
25+
26+
## Usage
27+
28+
```tsx
29+
import React, { useState } from 'react';
30+
import SearchBar from 'react-api-search';
31+
32+
const MyComponent = () => {
33+
const [selectedItem, setSelectedItem] = useState(null);
34+
35+
const fetchSearchResults = async (query: string) => {
36+
const response = await fetch('https://api.example.com/search?q=${query}');
37+
const data = await response.json();
38+
return data.results; // return an array of results
39+
};
40+
41+
const renderSearchResult = (item: any) => <div>{item.name}</div>;
42+
43+
const handleItemSelect = (item: any) => {
44+
setSelectedItem(item);
45+
};
46+
47+
return (
48+
<div>
49+
<SearchBar
50+
fetchData={fetchSearchResults}
51+
renderItem={renderSearchResult}
52+
onSelect={handleItemSelect}
53+
placeholder='Search for items...'
54+
debounceDelay={300}
55+
/>
56+
{selectedItem && <div>You selected: {selectedItem.name}</div>}
57+
</div>
58+
);
59+
};
60+
61+
export default MyComponent;
62+
```
63+
64+
## Props
65+
66+
| Prop | Type | Description | Default Value |
67+
| ----------------------- | ------------------------------- | ---------------------------------------------------------- | --------------------------------- |
68+
| placeholder | string | Placeholder text for the input field. | 'Search...' |
69+
| fetchData | (query: string) => Promise<T[]> | A function that fetches data based on the search query. | N/A |
70+
| renderItem | (item: T) => JSX.Element | A function to render each search result item. | N/A |
71+
| onSelect | (item: T) => void | A callback function triggered when a user selects an item. | undefined |
72+
| loadingElement | JSX.Element | JSX to display while results are loading. | `<div>Loading...</div>` |
73+
| emptyElement | JSX.Element | JSX to display when no results are found. | `<div>No results found</div>` |
74+
| errorElement | JSX.Element | JSX to display when an error occurs. | `<div>Something went wrong</div>` |
75+
| debounceDelay | number | The debounce delay in milliseconds. | 500 |
76+
| containerClassName | string | Custom class for the search bar container. | undefined |
77+
| inputClassName | string | Custom class for the input field. | undefined |
78+
| dropdownClassName | string | Custom class for the dropdown containing search results. | undefined |
79+
| itemClassName | string | Custom class for each search result item. | undefined |
80+
| hideSearchIcon | boolean | Whether to hide the search icon. | false |
81+
| searchIconClassName | string | Custom class for the search icon. | undefined |
82+
| closeIconClassName | string | Custom class for the close icon. | undefined |
83+
| inputFontColor | string | Font color of the input field. | #000 |
84+
| inputBorderRadius | string | Border radius of the input field. | '8px' |
85+
| inputBorderColor | string | Border color of the input field. | #ccc |
86+
| inputFontSize | string | Font size of the input field. | '16px' |
87+
| inputHeight | string | Height of the input field. | '45px' |
88+
| inputBackgroundColor | string | Background color of the input field. | #fff |
89+
| searchIconColor | string | Color of the search icon. | #888 |
90+
| closeIconColor | string | Color of the close icon. | #888 |
91+
| dropDownBackgroundColor | string | Background color of the dropdown. | #fff |
92+
| dropDownBorderColor | string | Border color of the dropdown. | #ccc |
93+
| dropDownMaxHeight | string | Maximum height of the dropdown. | '60vh' |
94+
| dropDownBorderRadius | string | Border radius of the dropdown. | '8px' |
95+
| scrollBarColor | string | Color of the scrollbar inside the dropdown. | #ccc |
96+
97+
## Example
98+
99+
### Basic Example
100+
101+
```tsx
102+
<SearchBar
103+
fetchData={async (query: string) => {
104+
const response = await fetch('https://api.example.com/search?q=${query}');
105+
return response.json();
106+
}}
107+
renderItem={(item) => <div>{item.name}</div>}
108+
onSelect={(item) => console.log('Selected:', item)}
109+
placeholder='Search for items...'
110+
loadingElement={<div>Loading...</div>}
111+
emptyElement={<div>No results found</div>}
112+
/>
113+
```
114+
115+
## License
116+
117+
This project is licensed under the MIT License. See the [LICENSE](https://github.com/ghosnkarl/react-api-search/blob/main/LICENSE) file for more information.
118+
119+
## Contributing
120+
121+
Contributions are welcome! 🎉
122+
123+
1. Fork the project.
124+
2. Create a feature branch (git checkout -b feature-name).
125+
3. Commit your changes (git commit -m 'Add some feature').
126+
4. Push to the branch (git push origin feature-name).
127+
5. Open a Pull Request.
128+
129+
For more information, please checkout the [CONTRIBUTIONS](https://github.com/ghosnkarl/react-api-search/blob/files/CONTRIBUTIONS.md) document.
130+
131+
---
132+
133+
**Note**: This component uses TypeScript and provides full type safety. It can be easily integrated into any TypeScript or JavaScript-based React project.

‎createRelease.sh‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
#!/bin/bash
2+
3+
# Parse command-line arguments
4+
while [[ "$#" -gt 0 ]]; do
5+
case $1 in
6+
-m)
7+
if [[ -n "$2" ]]; then
8+
COMMIT_MESSAGE="$2"
9+
shift
10+
else
11+
echo "Missing value for -m argument"
12+
exit 1
13+
fi
14+
;;
15+
*)
16+
echo "Unknown parameter passed: $1"
17+
exit 1
18+
;;
19+
esac
20+
shift
21+
done
22+
23+
# Check if the profile argument is provided
24+
if [[ -z "$COMMIT_MESSAGE" ]]; then
25+
echo "Missing -m argument"
26+
exit 1
27+
fi
28+
29+
# Read the contents of version_number.js into a variable
30+
version_file=$(cat src/version_number.ts)
31+
32+
echo $version_file
33+
34+
# Use a regular expression to extract the version number from the file
35+
version_regex="const search_bar_version = ['\"]([0-9]+\.[0-9]+\.[0-9]+)['\"]"
36+
if [[ $version_file =~ $version_regex ]]; then
37+
search_bar_version=${BASH_REMATCH[1]}
38+
else
39+
echo "Error: Could not extract version number from version_number.ts"
40+
exit 1
41+
fi
42+
43+
# Use the version number in a command
44+
echo "The current version is $search_bar_version"
45+
46+
# Create new tag
47+
TAG_NAME="v$search_bar_version"
48+
49+
# Check if release with tag already exists
50+
output=$(git ls-remote --tags origin "refs/tags/$TAG_NAME")
51+
if [[ $output == *"refs/tags/$TAG_NAME"* ]]; then
52+
echo "Release $TAG_NAME exists."
53+
echo "Please make sure to increase the version number"
54+
exit 1
55+
else
56+
echo "Release $TAG_NAME does not exist."
57+
fi
58+
59+
echo "Creating new release"
60+
61+
npm version $search_bar_version --no-git-tag-version --allow-same-version
62+
63+
# commit changes
64+
git add .
65+
git commit -m "R $TAG_NAME: $COMMIT_MESSAGE"
66+
git push
67+
68+
# create tag and push to remote repository
69+
git tag -a "$TAG_NAME" -m "Release $TAG_NAME"
70+
git push origin "$TAG_NAME"
71+
72+
gh release create "$TAG_NAME" --title "Release $TAG_NAME" --notes "$COMMIT_MESSAGE"

‎package-lock.json‎

Lines changed: 2 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "search-bar-component",
2+
"name": "react-api-search",
33
"version": "1.0.0",
44
"description": "SearchBarComponent is a customizable and responsive search bar component for React applications. It provides a flexible, debounced search experience, ideal for integrating search functionality into your app. The component supports dynamic fetching of search results from a remote source, rendering custom items, and handling loading states, empty results, and error handling.",
55
"main": "dist/index.js",
@@ -35,7 +35,6 @@
3535
"typescript": "^5.5.3"
3636
},
3737
"dependencies": {
38-
"classnames": "^2.5.1",
3938
"react-icons": "^5.4.0"
4039
}
4140
}

0 commit comments

Comments
 (0)