Skip to content

Commit

Permalink
v1.0.0 (#306)
Browse files Browse the repository at this point in the history
## Library Overview
This library provides a set of React Components to integrate Yext Search onto your site. These Components are easily incorporated into a new or existing React application. They are powered by an instance of [Search Headless](https://github.com/yext/search-headless), provided to them via the `SearchHeadlessProvider`: 

```tsx
import { SearchHeadlessProvider, provideHeadless } from '@yext/search-headless-react';
import { SearchBar, UniversalResults } from '@yext/search-ui-react';

const config = {
  apiKey: '<apiKey>',
  experienceKey: '<experienceKey>',
  locale: 'en',
  experienceVersion: 'PRODUCTION',
}
const searcher = provideHeadless(config);

function App() {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      <SearchBar />
      <UniversalResults />
    </SearchHeadlessProvider>
  );
}

export default App;
```

Using this Headless instance, Components perform actions such as setting a filter or executing a search. Component `State` is also connected to the relevant portions of Headless `State`. 

### Included Components 

The following Components are made available by the library:
- [Search Bar](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.searchbar.md)
- [Universal Results](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.universalresults.md)
- [Vertical Results](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.verticalresults.md)
- [Direct Answer](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.directanswer.md)
- [Filter Search](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.filtersearch.md)
- [Standard Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.standardfacets.md)
- [Static Filters](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.staticfilters.md)
- [Spell Check](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.spellcheck.md)
- [Alternative Verticals](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.alternativeverticals.md)
- [Applied Filters](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.appliedfilters.md)
- [Hierarchical Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.hierarchicalfacets.md)
- [Location Bias](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.locationbias.md)
- [Numerical Facets](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.numericalfacets.md)
- [Results Count](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.resultscount.md)
- [Pagination](https://github.com/yext/search-ui-react/blob/main/docs/search-ui-react.pagination.md)

To explore these Components individually, you can access our [Component Sandbox](https://storybook.hitchhikers.yext.com). 

## Using the Library

If you are using NPM 7+, you can install the components with the following command:

```bash
npm install @yext/search-ui-react
```
The @yext/search-headless-react peer dependency will be automatically installed.

If you are using NPM 6 or Yarn, you can install the library and its peer dependencies with this command:
```bash
npx install-peerdeps @yext/search-ui-react
```
The command will work with Yarn so long as NPM 6+ is installed on the machine.

### Tailwind

The library uses Tailwind to provide minimal, out-of-the-box styling of the Components. 

To use the Component Library's Styling without adding Tailwind to your project, add the following import: 

```tsx
import '@yext/search-ui-react/bundle.css'
```

If you have Tailwind already, you can add our styles to your `tailwind.config.js`:

```tsx
const { ComponentsContentPath } = require('@yext/search-ui-react');
module.exports = {
  content: [ ComponentsContentPath ],
  // ... the rest of your tailwind config
};
```
  • Loading branch information
yen-tt authored Sep 8, 2022
1 parent e37168f commit 7a139fb
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 32 deletions.
6 changes: 3 additions & 3 deletions THIRD-PARTY-NOTICES
Original file line number Diff line number Diff line change
Expand Up @@ -758,7 +758,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The following NPM package may be included in this product:

- @yext/search-core@2.0.0-alpha.221
- @yext/search-core@2.0.0

This package contains the following license and notice below:

Expand Down Expand Up @@ -802,7 +802,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The following NPM package may be included in this product:

- @yext/search-headless-react@2.0.0-alpha.158
- @yext/search-headless-react@2.0.0

This package contains the following license and notice below:

Expand Down Expand Up @@ -846,7 +846,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The following NPM package may be included in this product:

- @yext/search-headless@2.0.0-alpha.136
- @yext/search-headless@2.0.0

This package contains the following license and notice below:

Expand Down
52 changes: 26 additions & 26 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@yext/search-ui-react",
"version": "1.0.0-alpha.301",
"version": "1.0.0",
"description": "A library of React Components for powering Yext Search integrations",
"author": "slapshot@yext.com",
"license": "BSD-3-Clause",
Expand Down Expand Up @@ -73,7 +73,7 @@
"@typescript-eslint/eslint-plugin": "^5.16.0",
"@typescript-eslint/parser": "^5.16.0",
"@yext/eslint-config-slapshot": "^0.5.0",
"@yext/search-headless-react": "2.0.0-alpha.158",
"@yext/search-headless-react": "^2.0.0",
"axe-playwright": "^1.1.11",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.3",
Expand All @@ -91,7 +91,7 @@
"typescript": "~4.4.3"
},
"peerDependencies": {
"@yext/search-headless-react": "2.0.0-alpha.158",
"@yext/search-headless-react": "^2.0.0",
"react": "^16.14 || ^17 || ^18"
},
"jest": {
Expand Down

0 comments on commit 7a139fb

Please sign in to comment.