Files

CONTRIBUTIONS.md

@@ -0,0 +1,138 @@
+# Contributing to React API Search
+
+Thank you for considering contributing to **React API Search**! We welcome contributions from the community and appreciate your interest in improving this project.
+
+## How to Contribute
+
+There are several ways you can contribute to this project:
+
+1. **Report Bugs**
+2. **Suggest Features**
+3. **Fix Bugs or Implement Features**
+4. **Update Documentation**
+5. **Improve Tests**
+
+# Fork the repository on GitHub and clone it
+
+```bash
+git clone https://github.com/ghosnkarl/react-api-search.git
+cd react-api-search
+```
+
+## Setting Up the Development Environment
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Since the library cannot run as a standalone app, use \`npm link\` to test it in a separate project:
+
+   ```bash
+   npm link
+   ```
+
+3. In your test project (e.g., a React app where you want to test the library), link the library:
+
+   ```bash
+   cd path-to-your-test-project
+   npm link react-api-search
+   ```
+
+4. Now, import the library in your test project and test the functionality.
+
+5. To unlink after testing:
+
+   ```bash
+   npm unlink react-api-search
+   ```
+
+6. To run tests:
+
+   ```bash
+   npm test
+   ```
+
+## Making Changes
+
+1. **Create a new branch**:
+   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.
+
+   ```bash
+   git checkout -b feature-name
+   ```
+
+2. **Make your changes**:
+   Edit the necessary files, and follow the existing code style and conventions.
+
+3. **Write tests** (if applicable):
+   If your change involves new functionality or fixes a bug, please add tests. The project uses [Jest](https://jestjs.io/) for testing.
+
+4. **Commit your changes**:
+   Commit your changes with a clear, concise message that explains the purpose of your modification.
+
+   ```bash
+   git add .
+   git commit -m "Add feature XYZ"
+   ```
+
+5. **Push your changes**:
+   Push your branch to your forked repository.
+
+   ```bash
+   git push origin feature-name
+   ```
+
+6. **Open a Pull Request**:
+   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.
+
+## Code Style
+
+To ensure a consistent code style throughout the project, please follow these guidelines:
+
+- Use **ESLint** and **Prettier** for linting and formatting (both are set up in this project).
+- Use **TypeScript** for type safety.
+- Follow the established pattern of functional components and hooks.
+- Keep code clean and well-commented.
+
+## Writing Tests
+
+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.
+
+- **Unit tests**: For testing individual functions or components.
+- **Integration tests**: For testing how components work together.
+
+To run tests:
+
+```bash
+npm test
+```
+
+## Commit Messages
+
+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.
+
+Example commit message format:
+
+- **feat**: Add new search result feature
+- **fix**: Fix error handling in search results
+- **docs**: Update documentation for new features
+- **chore**: Update dependencies
+
+## Reporting Issues
+
+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:
+
+- A clear description of the problem.
+- Steps to reproduce the issue.
+- Expected vs. actual behavior.
+- Any relevant error messages or logs.
+
+## License
+
+By contributing to this project, you agree that your contributions will be licensed under the project’s [MIT License](LICENSE).
+
+---
+
+Thank you for contributing! Together, we can make **React API Search** even better. 🚀

README.md

@@ -0,0 +1,133 @@
+# React API Search
+
+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.
+
+## Features
+
+- **Debounced Search**: Customizable debounce delay to prevent excessive API calls while typing.
+- **Loading & Error States**: Display loading spinners or error messages while fetching data.
+- **Dropdown Menu**: A dropdown menu that displays search results, with full control over its visibility.
+- **Customizable Styles**: Easily apply custom styles to the container, input field, results list, items, and icons.
+- **Flexible Data Fetching**: Works with any asynchronous data-fetching method.
+- **TypeScript Support**: Fully typed for better development experience and safety.
+
+## Installation
+
+```bash
+npm install react-api-search
+```
+
+or
+
+```bash
+yarn add react-api-search
+```
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import SearchBar from 'react-api-search';
+
+const MyComponent = () => {
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const fetchSearchResults = async (query: string) => {
+    const response = await fetch('https://api.example.com/search?q=${query}');
+    const data = await response.json();
+    return data.results; // return an array of results
+  };
+
+  const renderSearchResult = (item: any) => <div>{item.name}</div>;
+
+  const handleItemSelect = (item: any) => {
+    setSelectedItem(item);
+  };
+
+  return (
+    <div>
+      <SearchBar
+        fetchData={fetchSearchResults}
+        renderItem={renderSearchResult}
+        onSelect={handleItemSelect}
+        placeholder='Search for items...'
+        debounceDelay={300}
+      />
+      {selectedItem && <div>You selected: {selectedItem.name}</div>}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+## Props
+
+| Prop                    | Type                            | Description                                                | Default Value                     |
+| ----------------------- | ------------------------------- | ---------------------------------------------------------- | --------------------------------- |
+| placeholder             | string                          | Placeholder text for the input field.                      | 'Search...'                       |
+| fetchData               | (query: string) => Promise<T[]> | A function that fetches data based on the search query.    | N/A                               |
+| renderItem              | (item: T) => JSX.Element        | A function to render each search result item.              | N/A                               |
+| onSelect                | (item: T) => void               | A callback function triggered when a user selects an item. | undefined                         |
+| loadingElement          | JSX.Element                     | JSX to display while results are loading.                  | `<div>Loading...</div>`           |
+| emptyElement            | JSX.Element                     | JSX to display when no results are found.                  | `<div>No results found</div>`     |
+| errorElement            | JSX.Element                     | JSX to display when an error occurs.                       | `<div>Something went wrong</div>` |
+| debounceDelay           | number                          | The debounce delay in milliseconds.                        | 500                               |
+| containerClassName      | string                          | Custom class for the search bar container.                 | undefined                         |
+| inputClassName          | string                          | Custom class for the input field.                          | undefined                         |
+| dropdownClassName       | string                          | Custom class for the dropdown containing search results.   | undefined                         |
+| itemClassName           | string                          | Custom class for each search result item.                  | undefined                         |
+| hideSearchIcon          | boolean                         | Whether to hide the search icon.                           | false                             |
+| searchIconClassName     | string                          | Custom class for the search icon.                          | undefined                         |
+| closeIconClassName      | string                          | Custom class for the close icon.                           | undefined                         |
+| inputFontColor          | string                          | Font color of the input field.                             | #000                              |
+| inputBorderRadius       | string                          | Border radius of the input field.                          | '8px'                             |
+| inputBorderColor        | string                          | Border color of the input field.                           | #ccc                              |
+| inputFontSize           | string                          | Font size of the input field.                              | '16px'                            |
+| inputHeight             | string                          | Height of the input field.                                 | '45px'                            |
+| inputBackgroundColor    | string                          | Background color of the input field.                       | #fff                              |
+| searchIconColor         | string                          | Color of the search icon.                                  | #888                              |
+| closeIconColor          | string                          | Color of the close icon.                                   | #888                              |
+| dropDownBackgroundColor | string                          | Background color of the dropdown.                          | #fff                              |
+| dropDownBorderColor     | string                          | Border color of the dropdown.                              | #ccc                              |
+| dropDownMaxHeight       | string                          | Maximum height of the dropdown.                            | '60vh'                            |
+| dropDownBorderRadius    | string                          | Border radius of the dropdown.                             | '8px'                             |
+| scrollBarColor          | string                          | Color of the scrollbar inside the dropdown.                | #ccc                              |
+
+## Example
+
+### Basic Example
+
+```tsx
+<SearchBar
+  fetchData={async (query: string) => {
+    const response = await fetch('https://api.example.com/search?q=${query}');
+    return response.json();
+  }}
+  renderItem={(item) => <div>{item.name}</div>}
+  onSelect={(item) => console.log('Selected:', item)}
+  placeholder='Search for items...'
+  loadingElement={<div>Loading...</div>}
+  emptyElement={<div>No results found</div>}
+/>
+```
+
+## License
+
+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.
+
+## Contributing
+
+Contributions are welcome! 🎉
+
+1. Fork the project.
+2. Create a feature branch (git checkout -b feature-name).
+3. Commit your changes (git commit -m 'Add some feature').
+4. Push to the branch (git push origin feature-name).
+5. Open a Pull Request.
+
+For more information, please checkout the [CONTRIBUTIONS](https://github.com/ghosnkarl/react-api-search/blob/files/CONTRIBUTIONS.md) document.
+
+---
+
+**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

@@ -0,0 +1,72 @@
+#!/bin/bash
+
+# Parse command-line arguments
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        -m)
+            if [[ -n "$2" ]]; then
+                COMMIT_MESSAGE="$2"
+                shift
+            else
+                echo "Missing value for -m argument"
+                exit 1
+            fi
+            ;;
+        *)
+            echo "Unknown parameter passed: $1"
+            exit 1
+            ;;
+    esac
+    shift
+done
+
+# Check if the profile argument is provided
+if [[ -z "$COMMIT_MESSAGE" ]]; then
+    echo "Missing -m argument"
+    exit 1
+fi
+
+# Read the contents of version_number.js into a variable
+version_file=$(cat src/version_number.ts)
+
+echo $version_file
+
+# Use a regular expression to extract the version number from the file
+version_regex="const search_bar_version = ['\"]([0-9]+\.[0-9]+\.[0-9]+)['\"]"
+if [[ $version_file =~ $version_regex ]]; then
+  search_bar_version=${BASH_REMATCH[1]}
+else
+  echo "Error: Could not extract version number from version_number.ts"
+  exit 1
+fi
+
+# Use the version number in a command
+echo "The current version is $search_bar_version"
+
+# Create new tag
+TAG_NAME="v$search_bar_version"
+
+# Check if release with tag already exists
+output=$(git ls-remote --tags origin "refs/tags/$TAG_NAME")
+if [[ $output == *"refs/tags/$TAG_NAME"* ]]; then
+    echo "Release $TAG_NAME exists."
+    echo "Please make sure to increase the version number"
+    exit 1
+else
+    echo "Release $TAG_NAME does not exist."
+fi
+
+echo "Creating new release"
+
+npm version $search_bar_version --no-git-tag-version --allow-same-version
+
+# commit changes
+git add .
+git commit -m "R $TAG_NAME: $COMMIT_MESSAGE"
+git push
+
+# create tag and push to remote repository
+git tag -a "$TAG_NAME" -m "Release $TAG_NAME"
+git push origin "$TAG_NAME"
+
+gh release create "$TAG_NAME" --title "Release $TAG_NAME" --notes "$COMMIT_MESSAGE"

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "search-bar-component",
+  "name": "react-api-search",
   "version": "1.0.0",
   "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.",
   "main": "dist/index.js",
@@ -35,7 +35,6 @@
     "typescript": "^5.5.3"
   },
   "dependencies": {
-    "classnames": "^2.5.1",
     "react-icons": "^5.4.0"
   }
 }