open-index/open-npm huggingface dataset:
npm package: @groupby/elements-autocomplete
Description: ## Functionality
Author: Groupby Inc
Latest version: 0.2.0

# GroupBy Elements Autocomplete Component

## Functionality

The Autocomplete component displays search terms related to a query term. It also dispatches events whenever these search terms are interacted with.

### Term Selection

At most one term is selected at any given time.
When a term is selected, the `aria-selected` property for the item is set to `true`.

The `selectedIndex` property determines which item is selected;
this value is the 0-based index of the selected item relative to the first item of the entire results.
This property can be set to change the selection.
If the value is outside the range of results (including negative values), no item will be selected.

The read-only `selectedId` property contains the DOM ID of the currently selected item.

The selection can be changed in one of three ways:

* Hovering over a term.
  Hovering over a term will change the selection immediately.
* Using `selectNext()` and `selectPrevious()`.
  These methods will select the next and previous items in the list respectively.
  If the selection falls off one end, it will wrap around to the other end.
* Setting the `selectedIndex` property.
  The item at the index given by `selectedIndex` will be selected.
  If there is no item at that index (i.e. if `selectedIndex` is negative or if
  it is past the end of the list), no items will be selected.

### Recieved Events

This component listens for a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

#### `AUTOCOMPLETE_RESPONSE`

Upon receiving this event, the `gbe-autocomplete` component will populate its `results` property with search terms.

### Dispatched Events

This component dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

#### `AUTOCOMPLETE_ACTIVE_TERM`

This event is dispatched when one of the search terms inside of the `gbe-autocomplete` component is put in the active state or hovered on.

#### `UPDATE_SEARCH_TERM`

This event is dispatched when one of the search terms inside of the `gbe-autocomplete` component is clicked.
It will contain a flag for emitting a new search and an attribute to indicate the origin of the action was SAYT.

## Customizations

- `caption`: Optional attribute to create and populate an `<h3>` tag at the top of the Autocomplete component.
- `group`: Optional attribute to add the `sayt` component to a grouping of related search components. The component will only act on events if they contain the same group name as the component.

## Testing

The test suite for this component is contained in the `test` directory.
To run the tests, navigate to this folder and use one of the following commands based on the desired testing flow:

- To run the tests once:

```sh
yarn test
```

- To run the tests and watch the `src` and `test` directories to rerun the tests after any changes:

```sh
yarn tdd
```

[elements-events]: https://github.com/groupby/elements-events
npm package: @groupby/elements-base
Description: ## Functionality
Author: Groupby Inc
Latest version: 0.1.0

# GroupBy Elements Base

## Functionality

This class extends [LitElement](https://lit-element.polymer-project.org/) and is the class that all components will extend.
Any shared functionality should be contained within this class.

### Dispatching events

This class contains a generic event dispatch function, `dispatchElementsEvent`. The `dispatchElementsEvent` function constructs a CustomEvent with payload properties that are common across the GB Elements components. This function can be used across all components that extend Base to dispatch events.

### Rendering the light DOM

All components that extend `Base` will render in the Light DOM.

## Testing

The test suite for this component is contained in the `test` directory.
To run the tests, navigate to this folder and use one of the following commands based on the desired testing flow:

- To run the tests once:

```sh
yarn test
```

- To run the tests and watch the `src` and `test` directories for changes:

```sh
yarn tdd
```
npm package: @groupby/elements-cache-driver-plugin
Description: This package contains the GroupBy Elements Cache Driver Plugin class.
Author: GroupBy Inc
Latest version: 0.2.0

# GroupBy Elements Cache Plugin

This package contains the GroupBy Elements Cache Driver Plugin class.

## Usage

To use the plugin, simply instantiate it and register it with Core:

```js
const cacheDriverPlugin = new CacheDriverPlugin();
core.register(cacheDriverPlugin);
```

## Events

This plugin listens for and dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

### Received

* `CACHE_REQUEST`: When received, a request to the cache is made and a response is dispatched with the event name provided in the payload of `CACHE_REQUEST`.
  It is recommended to prefix the return event name with the value of `CACHE_RESPONSE_PREFIX`.

### Dispatched

* A cache response event: Dispatched when a `CACHE_REQUEST` is fulfilled.
  The event is dispatched under the name provided by the corresponding `CACHE_REQUEST` payload.

[elements-events]: https://github.com/groupby/elements-events
npm package: @groupby/elements-cache-plugin
Description: This package contains the GroupBy Elements Cache Plugin class.
Author: GroupBy Inc
Latest version: 0.1.0

# GroupBy Elements Cache Plugin

This package contains the GroupBy Elements Cache Plugin class.

## Usage

To use the plugin, simply instantiate it and register it with Core:

```js
const cachePlugin = new CachePlugin();
core.register(cachePlugin);
```

This plugin registers an instance of `Map` that is intended to be used by
other plugins as a cache or other data store. No automatic cache
clearing or expiring is performed.
npm package: @groupby/elements-core
Description: GroupBy Elements Core
Author: GroupBy Inc
Latest version: 0.1.0

# GroupBy Elements Core

This package contains the GB Elements Core class and related plugin interfaces.

## Usage

To use Core, simply instantiate it:

```js
const core = new Core();
```

## Registering a plugin

To register one or more plugins with Core, instantiate the plugins, then
pass them to `Core.register()`:

```js
const core = new Core();
const pluginA = new PluginA();
const pluginB = new PluginB();

core.register([pluginA, pluginB]);
```

A plugin may take configuration options in its constructor. Refer to the
plugin's documentation for details.
npm package: @groupby/elements-dom-events-plugin
Description: This package contains the GB Elements `DomEventsPlugin` class.
Author: GroupBy Inc
Latest version: 0.1.0

# GroupBy Elements DOM Events Plugin

This package contains the GB Elements `DomEventsPlugin` class.

## Usage

To use the `DomEventsPlugin`, first instantiate it and then register it with
the Core entity:

```js
const domEventsPlugin = new DomEventsPlugin(/* options */);
core.register(domEventsPlugin);
```

The plugin's constructor takes an optional options object.
Please refer to the `DomEventsPluginOptions` interface in
[src/dom-events-plugin.ts](src/dom-events-plugin.ts) for more details on
available options.

## Methods
### registerListener()
Use the `registerListener` method to register event listeners. The method
takes an eventName and a callback function.

```js
registerListener(eventName, callback);
```

### unregisterListener()
Use the `unregisterListener` method to unregister event listeners. The method
takes an eventName and a callback function.

```js
unregisterListener(eventName, callback);
```

### dispatchEvent()
Use the `dispatchEvent` method to dispatch events. The method takes an
eventName and an option payload which can be used to send information
with the dispatched event.

```js
dispatchEvent(eventName, payload);
```
npm package: @groupby/elements-product
Description: ```html <gbe-product product="{}"></gbe-product> ```
Author: Groupby Inc
Latest version: 0.1.0

 # GroupBy Elements Product Component

```html
<gbe-product product="{}"></gbe-product>
```

The product component will display information about a given product.

## Functionality

The component takes one `product` attribute (refer to the `ProductModel` instance for the data format).

```js
{
  "title": "Product Name",
  "price": 3.55,
  "productUrl": "http://example.com/img.jpg",
  "imageSrc": "http://example.com/img.jpg",
  "imageAlt": "Alternative image text"
}
```

## Customizations

Optionally the product can use `variants` to display different information based on what variant is selected (refer to the `ProductVariantsModel` instance for the data format).

```js
{
  "variants": {
    "type": "text" // default, can be either "text", "image", "color"
    "items": [
      {
        "text": "Variant Label",
        "product": {
          // Data that will be overwritten in the product component
        }
      }
    ]
  }
}

```

**Any properties that are not identified in the ProductModel, will be rendered as additional `<span>` tags in the component.**


## Testing

The test suite for this component is contained in `test` directory.
To run the tests, navigate to this folder and use one of the following commands based on the desired testing flow:

- To run the tests once:

```sh
yarn test
```

- To run the tests and watch the `src` and `test` directories for changes:

```sh
yarn tdd
```
npm package: @groupby/elements-products
Description: The Products component acts as a wrapper around a series of individual `gbe-product` components. It uses a list of information about products and passes each item to a single product for rendering.
Author: Groupby Inc
Latest version: 0.1.0

# GroupBy Elements Products Component

The Products component acts as a wrapper around a series of individual
`gbe-product` components. It uses a list of information about products
and passes each item to a single product for rendering.

There are three versions of the Products component:
- `gbe-products-base`
- `gbe-products-sayt`
- `gbe-products`

## gbe-products-base

### Functionality

The base component can be used to display product data directly through attributes; however, it does not listen to any events for product data.

**NOTE:** This component is not meant to be used directly, but is provided as an option to extend and create a custom Products component.

### Customization

#### Group

This optional attribute will add a Products component to a grouping of related components that communicate with each other. The component will only act on events if they contain the same group name as the component. It can be used in any of the Products components.

Ex.
```html
<gbe-products group="search-group-1"></gbe-products>
```

**NOTE:** This attribute is unnecessary if there is only one group and sayt pairing and one product search results grid on the webpage.

## gbe-products-sayt

### Functionality

The Sayt version of the Products component is used inside of a Sayt component. It is extended from the `gbe-products-base` component.

This component listens for and dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

### Received Events

#### `SAYT_PRODUCTS_RESPONSE`

Upon receiving this event, the `gbe-products-sayt` component will populate the `products` property and render the data.

## gbe-products

### Functionality

The Search version of the Products component is used to display search results. It is extended from the `gbe-products-base` component.

This component listens for and dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

### Received Events

#### `SEARCH_RESPONSE`

Upon receiving this event, the `gbe-products` component will populate the `products` property and render the data.

## Testing

The test suite for this package is contained in `/packages/web-components/@groupby/elements-products/test`.
To run the tests, navigate to this folder and use one of the following commands based on the desired testing flow:

- To run the tests once:

 ```sh
yarn test
```

- To run the tests on every change:

```sh
yarn tdd
```

[elements-events]: https://github.com/groupby/elements-events
npm package: @groupby/elements-sayt-driver-plugin
Description: This package contains the GB Elements SAYT (Search-as-you-type) Driver plugin.
Author: GroupBy Inc
Latest version: 0.2.0

# GroupBy Elements SAYT Driver Plugin

This package contains the GB Elements SAYT (Search-as-you-type) Driver plugin.

## Prerequisites

This plugin depends on the following plugins:

- `dom_events`
- `sayt`
- `search`

These plugins must be registered either before or in the same batch as
this plugin.

## Usage

To use the plugin, simply instantiate it and register it with Core:

```js
const saytDriverPlugin = new SaytDriverPlugin({});
core.register(saytDriverPlugin);
```

This plugin accepts the following options:
* `productTransformer` (optional)
  * A function that accepts a Record object and returns a transformed product.
    This argument is only necessary if the View Layer is being used.
    More generally, this function is an opportunity to transform the data
    into a useable format for your application's front-end.

## Events

This plugin listens for and dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

### Received

* `AUTOCOMPLETE_REQUEST`: When received, a request to the GroupBy SAYT API is made. An `AUTOCOMPLETE_RESPONSE` event is dispatched with the results. In case of an error, the `AUTOCOMPLETE_ERROR` event is dispatched instead.
* `SAYT_PRODUCTS_REQUEST`: When received, a search request to the GroupBy API is made to receive products. An `SAYT_PRODUCTS_RESPONSE` event is dispatched with the results. In case of an error, the `SAYT_PRODUCTS_ERROR` event is dispatched instead.

### Dispatched

* `AUTOCOMPLETE_RESPONSE`: Dispatched when a Sayt request has completed. Its payload is the result of the request and includes search autocomplete terms.
* `AUTOCOMPLETE_ERROR`: Dispatched when an error has occurred during a Sayt request.
* `SAYT_PRODUCTS_RESPONSE`: Dispatched when a search request has completed. Its payload is the result of the request and includes products that may have been transformed.
* `SAYT_PRODUCTS_ERROR`: Dispatched when an error has occurred during a search request.
* `BEACON_SEARCH`: Dispatched when a search is made sucessfully. Its payload contains the search results and the origin of the action that triggered the search. This can be listened to by built-in or custom trackers.

[elements-events]: https://github.com/groupby/elements-events
npm package: @groupby/elements-sayt-plugin
Description: This package contains the GB Elements SAYT Plugin class.
Author: GroupBy Inc
Latest version: 0.1.1

# GroupBy Elements SAYT Plugin

This package contains the GB Elements SAYT Plugin class.

## Usage

To use the plugin, simply instantiate it and register it with Core:

```js
const saytPlugin = new SaytPlugin(/* options */);
core.register(saytPlugin);
```
The plugin registers an instance of the [Sayt client](https://www.npmjs.com/package/sayt) with Core.

The SaytPlugin constructor can accept options to configure the exposed Sayt client. See the [SaytConfig interface](https://github.com/groupby/sayt-client/blob/develop/src/core/sayt.ts#L77) for available options.
npm package: @groupby/elements-search-box
Description: ## Functionality
Author: Groupby Inc
Latest version: 0.2.0

# GroupBy Elements Search Box Component

## Functionality

The component accepts text input and dispatches events based on input.

This component listens for and dispatches a number of events. These events are defined in the [`@groupby/elements-events`][elements-events] package.

### Received Events

#### `UPDATE_SEARCH_TERM`

This component listens for this event and updates the value property and input box value
with the search term from the event's payload.
Additionally, this event may trigger a search request if the payload contains a trigger.

### Dispatched Events

#### `SEARCHBOX_CLEAR`

Dispatched when a user clicks on the clear button.

#### `SEARCHBOX_CLICK`

Dispatched when a user clicks anywhere within the search box input area.

#### `SEARCHBOX_INPUT`

Dispatched when the value changes inside the search box input.

#### `SEARCH_REQUEST`

Dispatched when a user clicks on the search button or hits `enter` within the search box.
May also be dispatched when receiving an `UPDATE_SEARCH_TERM` event.

## Customizations

The GB Elements Search Box component allows for optional inclusion of a clear button and a search button. Placeholder text within the search box is also customizable.
Users of the component can add the following attributes to the custom element:
- `clearbutton`: adds clear button
- `searchbutton`: adds search button
- `placeholder`: if populated with a string, will replace the default placeholder text in the search box.
- `group`: Optional attribute to add this component to a grouping of related search components. The component will only act on events if they contain the same group name as the component.

## Testing

The test suite for this component is contained in the `test` directory. To run the tests, use the following commands:

- To run the unit tests once:
```sh
yarn test
```
- To run the unit tests and watch the `src` and `test` directories to rerun the tests after any changes:
```sh
yarn tdd
```

- To run the interaction tests once:
```sh
yarn test:interaction
```
- To run the interaction tests and watch the `src` and `test` directories to rerun the tests after any changes:
```sh
yarn tdd:interaction
```

- To run both the unit and interaction tests once:
```sh
yarn test:all
```

[elements-events]: https://github.com/groupby/elements-events
npm package: @groupby/elements-search-driver-plugin
Description: This package contains the GB Elements Search Driver plugin.
Author: GroupBy Inc
Latest version: 0.2.0

# GroupBy Elements Search Driver Plugin

This package contains the GB Elements Search Driver plugin.

## Prerequisites

This plugin depends on the following plugins:

- `dom_events`
- `search`

These plugins must be registered either before or in the same batch as
this plugin.

## Usage

To use the plugin, simply instantiate it and register it with Core:

```js
const searchDriverPlugin = new SearchDriverPlugin();
core.register(searchDriverPlugin);
```

This plugin currently does not accept any options.

## Events

This plugin listens for and dispatches a number of events.
These events are defined in the [`@groupby/elements-events`][elements-events] package.

[elements-events]: https://github.com/groupby/elements-events

### Received

* `SEARCH_REQUEST`: When received, a search request to the GroupBy
  API is made. A `SEARCH_RESPONSE` event is dispatched with the
  results.

### Dispatched

* `SEARCH_RESPONSE`: Dispatched when a search request has
  completed. Its payload is the result of the request.
* `SEARCH_ERROR`: Dispatched when an error has occurred during a
  search request.
* `BEACON_SEARCH`: Dispatched when a search is made sucessfully. 
  Its payload contains the search results and the origin of the action that triggered the search. 
  This is listened to by our `GbTrackerPlugin` and can be listened to by any other custom trackers.