From ba44e3e5cd77d75ba41722da19654556801fc3ae Mon Sep 17 00:00:00 2001 From: Amit Dhamu Date: Fri, 18 Mar 2022 14:53:54 +0000 Subject: [PATCH] v1.0.0 --- README.md | 43 ++++++++++--------- package.json | 11 ++--- public/index.html | 10 ++--- ...chSuggestions.tsx => InputSuggestions.tsx} | 7 +-- ...ons.test.tsx => InputSuggestions.test.tsx} | 28 +++++++----- src/__tests__/styled.test.tsx | 2 +- src/example/App.tsx | 4 +- src/index.ts | 2 +- src/types.ts | 1 + 9 files changed, 57 insertions(+), 51 deletions(-) rename src/{SearchSuggestions.tsx => InputSuggestions.tsx} (95%) rename src/__tests__/{SearchSuggestions.test.tsx => InputSuggestions.test.tsx} (82%) diff --git a/README.md b/README.md index c3be8bb..ec062e1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# React Search Suggestions +# React Input Suggestions
- demo + demo -A React input component with pluggable search suggestions. +A React input component with pluggable search suggestions and autocomplete. Also includes arrow key navigation through results. -[![Build](https://github.com/adhamu/react-search-suggestions/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/adhamu/react-search-suggestions/actions) +[![Build](https://github.com/adhamu/react-input-suggestions/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/adhamu/react-search-suggestions/actions)
@@ -18,17 +18,17 @@ Also includes arrow key navigation through results. ## Installation ```shell -yarn add react-search-suggestions +yarn add react-input-suggestions ``` ## Usage ```jsx import React from 'react' -import { SearchSuggestions } from 'react-search-suggestions' +import { InputSuggestions } from 'react-input-suggestions' const MyComponent = () => ( - { console.log(arg) } const MyComponent = () => ( - ` tag around suggestions | boolean | `false` | N | +| Prop | Description | Type | Default | Required? | +| ------------------- | -------------------------------------------------------------------------------------- | ------------------ | ----------- | --------- | +| `suggestions` | A collection of HTML elements or React components used for search suggestions | React.ReactNode[] | | Y | +| `id` | ID for entire component | string | `undefined` | N | +| `type` | Input type | 'search' \| 'text' | `search` | N | +| `className` | Optional class name to style component | string | `''` | N | +| `name` | Input name | string | `'q'` | N | +| `placeholder` | Input placeholder | string | `'Search'` | N | +| `autoFocus` | Input autoFocus | boolean | `false` | N | +| `onChange` | Input onChange handler | function | `undefined` | N | +| `withStyles` | Basic styling for the component | boolean | `false` | N | +| `highlightKeywords` | Highlight letters that match search term by wrapping a `` tag around suggestions | boolean | `false` | N | ## Styling By default, the component comes with almost no styles. Given the semantic nature of the markup, it is quite easy to target these with CSS. As mentioned above, you can provide a `className` to the component for this. -Alternatively, you can set the `withStyles` prop to `true` to achieve some very basic styling. An example of this can be seen on [GitHub Pages](http://adhamu.github.io/react-search-suggestions/). +Alternatively, you can set the `withStyles` prop to `true` to achieve some very basic styling. An example of this can be seen on [GitHub Pages](http://adhamu.github.io/react-input-suggestions/). **Important**: The `:focus` attribute on each top level element's search suggestion is what powers the active state of a selected element. Refer to the [HTML Structure](#html-structure) above to correctly determine any CSS selectors. diff --git a/package.json b/package.json index da12cfb..9761f8a 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,20 @@ { - "name": "react-search-suggestions", + "name": "react-input-suggestions", "version": "1.0.0", - "description": "A React input component with pluggable search suggestions.", + "description": "A React input component with pluggable suggestions and autocomplete", "keywords": [ "react", - "autcomplete", + "autocomplete", "search", "suggestions", "typescript", "arrow key navigation", - "esbuild" + "esbuild", + "input" ], "repository": { "type": "git", - "url": "https://github.com/adhamu/react-search-suggestions" + "url": "https://github.com/adhamu/react-input-suggestions" }, "license": "MIT", "author": "Amit Dhamu ", diff --git a/public/index.html b/public/index.html index d1468cb..0ffd9db 100644 --- a/public/index.html +++ b/public/index.html @@ -2,9 +2,9 @@ - React Search Suggestions + React Input Suggestions - + @@ -21,10 +21,6 @@ margin-bottom: 1.5rem; } - .searchSuggestions ul { - top: calc(100% - 3px); - } - mark { background: transparent; font-weight: bold; @@ -34,7 +30,7 @@ -

React Search Suggestions

+

React Input Suggestions

diff --git a/src/SearchSuggestions.tsx b/src/InputSuggestions.tsx similarity index 95% rename from src/SearchSuggestions.tsx rename to src/InputSuggestions.tsx index 2421705..36e0d9a 100644 --- a/src/SearchSuggestions.tsx +++ b/src/InputSuggestions.tsx @@ -6,8 +6,9 @@ import { getElementText, wrapElementText } from './elementText' import { Styled } from './styled' import { useSuggestions } from './useSuggestions' -const SearchSuggestions = ({ +const InputSuggestions = ({ suggestions, + type = 'search', name = 'q', placeholder = 'Search', autoFocus = false, @@ -37,7 +38,7 @@ const SearchSuggestions = ({ ( @@ -12,7 +12,7 @@ const suggestions = ['reddit', 'facebook', 'twitter'].map(word => ( )) -describe('SearchSuggestions', () => { +describe('InputSuggestions', () => { const mockGetElementText = jest.spyOn(elementText, 'getElementText') const mockWrapElementText = jest.spyOn(elementText, 'wrapElementText') @@ -20,7 +20,7 @@ describe('SearchSuggestions', () => { describe('renders correctly with default options', () => { beforeEach(() => { - render() + render() }) it('has the correct type', () => { @@ -75,15 +75,21 @@ describe('SearchSuggestions', () => { }) describe('renders correctly with custom options', () => { + it('has the correct type', () => { + render() + + expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text') + }) + it('sets the name attribute', () => { - render() + render() expect(screen.getByRole('searchbox')).toHaveAttribute('name', 'search') }) it('sets the placeholder attribute', () => { render( - @@ -96,14 +102,14 @@ describe('SearchSuggestions', () => { }) it('sets autoFocus', () => { - render() + render() expect(screen.getByRole('searchbox')).toHaveFocus() }) it('sets an ID', () => { const { container } = render( - + ) // eslint-disable-next-line testing-library/no-node-access @@ -112,7 +118,7 @@ describe('SearchSuggestions', () => { it('sets a className', () => { const { container } = render( - + ) // eslint-disable-next-line testing-library/no-node-access @@ -120,7 +126,7 @@ describe('SearchSuggestions', () => { }) it('calls wrapElementText when highlightKeywords provided', () => { - render() + render() userEvent.type(screen.getByRole('searchbox'), 't') @@ -132,7 +138,7 @@ describe('SearchSuggestions', () => { const mockOnChange = jest.fn() render( - + ) expect(mockOnChange).not.toHaveBeenCalled() @@ -144,7 +150,7 @@ describe('SearchSuggestions', () => { }) it('shows filtered search suggestions based on input entered', () => { - render() + render() expect(screen.queryByRole('list')).not.toBeInTheDocument() diff --git a/src/__tests__/styled.test.tsx b/src/__tests__/styled.test.tsx index 5f2205f..46448c9 100644 --- a/src/__tests__/styled.test.tsx +++ b/src/__tests__/styled.test.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react' import { Styled } from '../styled' -describe('Search Suggestion Styles', () => { +describe('Input Suggestion Styles', () => { it('has the correct styles without theme', () => { const { container } = render(Hello world) diff --git a/src/example/App.tsx b/src/example/App.tsx index 6ea4b94..962e82f 100644 --- a/src/example/App.tsx +++ b/src/example/App.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { SearchSuggestions } from '..' +import { InputSuggestions } from '..' const suggestions = [ 'polite', @@ -60,7 +60,7 @@ const suggestions = [ )) const App = (): JSX.Element => ( -