open-index/open-npm huggingface dataset:
npm package: @strawberrydigital/ecom-data-layers
Description: A library for implementing event-driven GTM data layers with a focus on ecommerce projects.
Author: Strawberry
Latest version: 1.10.5

# Usage

## Registering Event Listeners

You can register event listeners using an array of objects when initialising the TagManager library:

```json
[
  {
    "event": "gtmEventName",
    "listener": "event:fired",
    "dataSource": "event"
  },
  {
    "event": "gtmEventName2",
    "listener": "product:viewed",
    "dataSource": "[data-gtm-product]"
  }
]
```

| Option   | Description |
| ----- | --- |
| `event` | The name of the event in Google Tag Manager.
| `listener` | The event to listen for on the page. For example, you may fire a `cart:added` event when a product is added to the cart. |
| `dataSource` | Where the data for the dataLayer is going to come from. Use `"event"` to get the data from the event's detail, or you can use a selector to get the data from a |

### Using the event data source

Use the event data source to get the data to be pushed to the datalayer from the event itself.

For example, let's say you fire this CustomEvent:

```javascript
dispatch(new CustomEvent('cart:added', {
    detail: {
        productId: 12345,
        title: 'Plain White Tee',
        price: 1699
    }
}));
```

The data pushed to the data layer would be

```json
{
  "productId": 12345,
  "title": "Plain White Tee",
  "price": 1699
}
```

### Using the event data source with a callback

If you want to use an event's detail as a data source, but the detail from the event isn't quite in the format you need
it, you can specify a callback to manipulate the data before it's pushed to the data layer.

Using the example from above, you could do the following to manipulate the price:

```javascript
{
    "event": "addToCart",
    "listener": "cart:added",
    "dataSource": data => {
        ...data,
        price: Number(data.price / 100).toFixed(2) // "16.99"
    }
}
```

### Using a selector as a data source

If the data you'll be pushing to the data layer is static, you can instead pass a selector as a `dataSource` value.

Consider this event listener:

```json
{
  "event": "pageView",
  "listener": "DOMContentLoaded",
  "dataSource": "[data-gtm-page]"
}
```

In the template, you can set up the data layer object within a JSON script tag:

```html

<script data-gtm-page type="application/json">
    {
        title: "Meet the Team",
        page_language: "en",
        logged_in_status: true,
        customer_id: 1
    }
</script>
```

## Initialise the TagManager

```typescript
// Example
new TagManager([
    {
        event: "searchOpen",
        listener: "search:opened",
        dataSource: "event",
    },
    {
        event: "productView",
        listener: "pdp:viewed",
        dataSource: "[data-gtm-product]"
    }
]);
```
npm package: @strawberrydigital/eslint-config
Description: Strawberry's ESLint config.
Author: Strawberry
Latest version: 1.0.0

# @strawberrydigital/eslint-config

This package provides Strawberry's .eslintrc as a shared npm module. It extends and tweaks [airbnb's shared config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base). This package will also configure and run Prettier if it is installed on a project.

## Installation
Install with yarn:
```shell
$ yarn add --dev eslint prettier @strawberrydigital/eslint-config
```

or install with npm:
```shell
$ npm install --save-dev eslint prettier @strawberrydigital/eslint-config
```

## Usage
Add the preset to your eslint config file (`.eslintrc`, `.eslintrc.js`, etc.):
```json
{
    "extends": ["@strawberrydigital/eslint-config"]
}
```

Add your `.prettierrc` config (take the one from this repo if you like):
```json
{
    "arrowParens": "avoid",
    "singleQuote": true,
    "tabWidth": 4
}
```

Add a linting script to your `package.json`:
```json
{
    "scripts": {
        "lint:scripts": "eslint --ext .js,.vue ."
    }
}
```
npm package: @strawberrydigital/stylelint-config
Description: Strawberry's Stylelint config.
Author: Strawberry
Latest version: 1.0.0

# @strawberrydigital/stylelint-config

This package provides Strawberry's .stylelintrc as a shared npm module.

## Installation
Install with yarn:
```shell
$ yarn add --dev stylelint @strawberrydigital/stylelint-config
```

or install with npm:
```shell
$ npm install --save-dev stylelint @strawberrydigital/stylelint-config
```

## Usage
Add the preset to your styleslint config file (`.stylelintrc`, `stylelint.config.js`, etc.):
```json
{
    "extends": ["@strawberrydigital/stylelint-config"]
}
```

Add a linting script to your `package.json`:
```json
{
    "scripts": {
        "lint:styles": "stylelint **/*.scss"
    }
}
```

Run script with yarn:
```shell
$ yarn lint:styles
```

or run with npm:
```shell
$ npm run lint:styles
```