yext / search-ui-react Goto Github PK

View Code? Open in Web Editor NEW

9.0 7.0 9.0 35.23 MB

License: Other

JavaScript 0.40% TypeScript 99.08% HTML 0.09% CSS 0.08% Shell 0.35%

search-ui-react's Introduction

search-ui-react

A library of React Components for powering Yext Search integrations.

See the full documentation here.

Getting Started

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

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:

npx install-peerdeps @yext/search-ui-react

The command will work with Yarn so long as NPM 6+ is installed on the machine.

Once the library and its peer dependencies are installed, our React Components should be nested inside the SearchHeadlessProvider. SearchHeadlessProvider requires a SearchHeadless instance, which is created using provideHeadless(...) with the appropriate credentials:

import { provideHeadless, SearchHeadlessProvider } from '@yext/search-headless-react';
import { SearchBar, UniversalResults, VerticalConfigMap } from '@yext/search-ui-react';
import { v4 as uuidv4 } from 'uuid';

const config = {
  apiKey: '<apiKey>',
  experienceKey: '<experienceKey>',
  locale: 'en',
  experienceVersion: 'PRODUCTION',
}

const searcher = provideHeadless(config);

searcher.setSessionTrackingEnabled(true);
let sessionId = window.sessionStorage.getItem('sessionId');
if (!sessionId) {
  sessionId = uuidv4();
  window.sessionStorage.setItem('sessionId', sessionId);
}
searcher.setSessionId(sessionId);

const verticalConfigMap: VerticalConfigMap = {
  help_articles: {
    label: "Help Articles"
  }
}

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

export default App;

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

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

Compatibility Notes

This library and its dependencies use optional chaining and other modern TS syntax that is not inherently supported by Webpack <5 (e.g. via create-react-app@4). Additional Babel plugins are needed for transpiling if using legacy versions.

search-ui-react's People

Contributors

Stargazers

Watchers

Forkers

isabella232 alextaing volkanakbayir apav-dev baigel1 justinrich8 cpyext zeta-ohashi nmanu1

search-ui-react's Issues

SearchBar autocomplete dropdown text alignment and icon size issue

In my project, I am using the SearchBar component and its default autocomplete functionality. As you can see from the attached image, when the autocomplete result is longer than a certain length and part of the result is matched by the query string, the text on the 2nd line of the result does not left align like the first line does. The magnifying glass icon is also a different size than the results that take up one line.

I believe this is an issue with the behavior of the underlying renderHighlightedValue function that is utilized by the autocomplete dropdown component.

Ability to Customize Labels for StandardFacets Component

Description

More and more users are asking us how to customize labels on their facets/filters. At the moment, we don’t have a way to do this, yet it’s a feature I think more and more people will want to use. The default label name uses the field display value from the KG, which I think is a good default value, but we should allow users to change it as the display value can often be confusing.

For example, label names often come from linked entities or values like “price.value”, and seeing a label name of price.value is a strange end-user experience.

Screenshots

Files

The main component this enhancement would improve would be the StandardFacets component, which you can find at the following path: yext/search-ui-react/src/components/StandardFacets.tsx (https://github.com/yext/search-ui-react/blob/main/src/components/StandardFacets.tsx)

Methods

The main way we have discussed adding this functionality is by introducing decorated actions, so that when a particular function is run e.g. executeFilterSearch, we can intercept the function call and edit the data with the desired label names.
Another idea would be to add a new prop that allows the end user to override the default label names.

No example provided on how to use customCssClasses for the <SearchBar/> component

Hi,

I want to customise the SearchBar. But there is no documentation on what should be the object to be passed on to the customCssClasses prop. For e.g. I want to hide the yext icon. How can I do that?

TIA.

Can't hide the Yext Logo in the SearchBar component

The customCssClasses prop exposed by the SearchBar component does not provide a way to hide the Yext icon. At minimum, we should offer a way to hide this icon but I think we should remove it from the library completely.

StaticFilters don't support labels

Would like the ability to pass a label along with the value for the filterOptions on StaticFilters. The issue we are having is when pulling in data from WordPress, categories are being stored in the entity type as category ids and we want the StaticFilters to display the category names.

https://hitchhikers.yext.com/docs/search/facets-and-filters/

`lodash/isEqual` is not listed as a dependency

search-ui-react/src/utils/filterutils.tsx

Line 2 in 21087c8

import isEqual from 'lodash/isEqual';

lodash/isEqual is missing from the dependencies list in package.json. It is listed in devDependencies, but it is not a dev-only dependency.

Ability to pass a ref through a search bar component

Could we add the option to pass a ref through the search bar component to the search bar input? This functions based on the input can be set up through ref and not class

Link component currently does this https://github.com/yext/js/blob/main/packages/sites-components/src/components/link/link.tsx#L23

Circular dependency

Getting a circular dependency error when compiling, just pasting in the basic example from https://hitchhikers.yext.com/docs/search/searchbar-react-component. Node v16.13.1

...
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
Error when using sourcemap for reporting an error: Can't resolve original location of error.
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
Error when using sourcemap for reporting an error: Can't resolve original location of error.
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
Error when using sourcemap for reporting an error: Can't resolve original location of error.
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
Circular dependency: node_modules/@yext/search-ui-react/lib/esm/utils/filterutils.js -> node_modules/@yext/search-ui-react/lib/esm/models/NumberRangeFilter.js -> node_modules/@yext/search-ui-react/lib/esm/utils/filterutils.js```

Support React 18

This project currently supports React 16 and 17. React 18 was released on 29 Mar 2022.

Support for React 18 would allow using these Search UI components in projects built using React 18. Many projects started within the past year and a half are most likely using React 18 and can not take advantage of this library.

Universal recent searches persisting across experiences

Search UI React utilizes local storage to persist local search history for the SearchBar component across sessions. The problem is that all universal searches are saved with the key __yxt_recent_searches_universal__. This means that if you go from universal search on one site to another, you'll see the searches from site 1 appear on site 2.

My suggestion would be to change the key to __yxt_recent_searches_universal__[SEARCH_EXPERIENCE_KEY]

Since the library does not have widespread usage at this point, only devs like myself who develop multiple projects at once using Search UI React are going to notice this issue, but still seems like something that should be addressed. This could be an issue if someone is trying to demo multiple sites with Universal Search implemented with Search UI React.

Compile issues when importing package

Hello! I'm attempting to install this package via npm and import it into my project. (Node v12.22.6/React 16.14)
import { SearchBar, UniversalResults } from '@yext/search-ui-react';

After importing there seems to be a compilation error(s) pointing to a dependency:

./node_modules/@reach/auto-id/dist/reach-auto-id.mjs 28:23
Module parse failed: Unexpected token (28:23)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   if (maybeReactUseId !== void 0) {
|     let generatedId = maybeReactUseId();
>     return providedId ?? generatedId;
|   }
|

I've also tested this with a new create react app test project (node v14.17/React 16.14) with same error.
Although compiling nullish coalescing should likely be handled by this package, I've tried to handle this and compile on our project's side in various ways with no success.

Are there additional dependency considerations?

Lock react-collapsed on 3.6

react-collapsed 3.7 introduces a dependency on react 18 which we do not yet support.

Ability to add translations / custom text for hardcoded text used in components.

Description

Some components in this library include hardcoded text that is not customizable without forking the component. Customization is important in cases where a client wants to add translations for this text. The only workaround at the moment is to fork the component locally and then customize it there, which is not desirable when the easy solution would be to have a way to override the text.

Example

One component that has hardcoded text is the StandardFacets component, which internally calls the FilterGroup component. FilterGroup has the "Show More" and "Show Less" hardcoded texts that I would like to be able to add translations for, but can't without forking the component.

WCAG Searchbar issue

The default searchbar is causing a wcag error when used in the locator because of a "Missing form label"

Link to example site: https://v10trunk-local-bumpertobumper-ca.preview.pagescdn.com/en/search

[help wanted] Issues with CRA & React 16

This package is not compiling when added to a new CRA project using React 16.14.

Using Node LTS 18.16.0 & NPM 9.5.1 We get the following error

Attempted import error: 'useId' is not exported from 'react' (imported as 'useId').

Started a new react app via npx create-react-app my-app with Node v18.16.0
deleted the node_modules folder and package-lock.json file
Updated package.json dependency versions and added Yext packages.

"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@yext/search-ui-react": "^1.1.0",
"@yext/search-headless-react": "^2.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

Updated index.js to adapt back to React 16

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const root = document.getElementById('root');
ReactDOM.render(
    <App />,
    root
);

Ran npm run build
Error happens