npm package: @magento/ds-livesearch-storefront-utils
Description: The purpose of this project is to provide a dev-ready starting point for developers to implent the search popover. A user of this library should have a magento store instance.
Author: Kathleen Tynan
Latest version: 1.0.8
Deprecated: This project has been renamed. Install using @magento/storefront-search-as-you-type instead.

## Purpose

The purpose of this project is to provide a dev-ready starting point for developers to implement the search popover. A user of this library should have a Commerce store instance.

## Usage

### Setup a livesearch instance

```
const storeDetails: StoreDetailsProps = {
    environmentId: <Storefront_ID>,
    websiteCode: "base",
    storeCode: "main_website_store",
    storeViewCode: "default",
    searchUnitId: searchUnitId,
    config: {
        minQueryLength: 5,
        pageSize: 8,
        currencySymbol: "$",
    },
};
```

```
const searchApi = new LiveSearch(storeDetails);
const { performSearch, pageSize, minQueryLength, currencySymbol } = searchApi;
```

### Popover form react component

```
<FormWithPopover
   performSearch={performSearch}
   submitSearchRedirect={submitSearchRedirect}
   pageSize={pageSize}
   minQueryLength={minQueryLength}
   currencySymbol={currencySymbol}
/>
```

### Popover attached to html component

```
const container = document.getElementById(selectorDetails.resultsSelector);
    ReactDOM.render(
        <AttachedPopover
            performSearch={performSearch}
            pageSize={pageSize}
            minQueryLength={minQueryLength}
            currencySymbol={currencySymbol}
            formSelector={selectorDetails.resultsSelector}
            inputSelector={selectorDetails.inputSelector}
        />,
        container,
    );
```

### Autocomplete hook to create your own popover

```
const {
        active,
        formProps,
        formRef,
        inputProps,
        inputRef,
        loading,
        searchTerm,
        results,
        resultsRef,
        setActive,
        setLoading,
        setResults,
        setSearchTerm,
    } = useAutocomplete(performSearch, minQueryLength);
```

## Available Scripts

You can run a local demo. In the project directory, you can run:

### `yarn dev`

Runs the app in the development mode.<br> Open [http://localhost:3000/v1/index.html](http://localhost:3000/v1/index.html) to view it in the browser.

### `yarn test`

Launches the test runner in the interactive watch mode.<br> See the section about
[running tests](https://jestjs.io/docs/en/webpack) for more
information.

### `yarn run build`

Builds the app for production to the `build` folder.<br> It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br> Your app is ready to be deployed!

See the section about [deployment](https://webpack.js.org/guides/production/) for
more information.

---

### Stories  📚

This repo supports `.story.mdx` and `.story.tsx` stories!

-   `MDX` stories allow you to create documentation for your component while also generating individual stories for each of the component's states that are mentioned within the documentation!

-   `TSX` stories allows you to create stories for different states of your component but no documentation for it.

## Contributing 🙏

1.  **Fork** the repo on GitHub
2.  **Clone** the project to your own machine
3.  **Commit** changes to your own branch
4.  **[Squash](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History#_squashing)** all your commits
5.  **Push** your work back up to your fork
6.  Submit a **Pull request** so that your changes can be reviewed!

## Questions ❓

Feel free to file an issue or send me an email