[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/docs/README.md from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/store-icons) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

# Store Icons

[![Build Status](https://travis-ci.org/vtex-apps/store-icons.svg?branch=master)](https://travis-ci.org/vtex-apps/store-icons)

Store Icons are sets of icons tailored for store UI.
The Store Icons are implemented using SVG fragment identifiers, which reference specific portions or elements within an SVG document. Leveraging SVG fragment identifiers makes it easier to link directly to and highlight particular sections or areas within the SVG document, facilitating navigation and interaction.

Render SDK serves all store icons, and with the HTML tag `<use>`, you can render a fragment from the icon pack. For more information on the complete list of fragment SVG's, access the [Icon Pack List](https://developers.vtex.com/docs/apps/vtex.store-icons/iconpack).

## Table of Contents

- [Store Icons](#store-icons)
  - [Description](#description)
  - [Release schedule](#release-schedule)
  - [Table of Contents](#table-of-contents)
  - [Concept](#concept)
  - [Usage](#usage)
    - [Dedicated Icon](#dedicated-icon)
    - [Generic Icon](#generic-icon)
  - [Icons](#icons)
    - [Props](#props)
    - [Icons List](#icons-list)
      - [Brand](#brand)
      - [High Priority Actions](#high-priority-actions)
      - [Middle Priority Actions](#middle-priority-actions)
      - [Informational](#informational)
      - [Navigation](#navigation)
      - [Status Indicators](#status-indicators)
  - [Customize](#customize)
    - [Overwriting the default IconPack](#overwriting-the-default-iconpack)
    - [Nomenclature](#nomenclature)
      - [Icon Intention](#icon-intention)
  - [Troubleshooting](#troubleshooting)
  - [Contributing](#contributing)
  - [Tests](#tests)

## Usage

Add into the dependencies of your `manifest.json` and use it as an `npm` module:

```json
"dependencies": {
  "vtex.store-icons": "0.x"
}
```
There are two ways for using the available icons:

- **Developing a store's theme:**
Use the `icon` block to render the desired icon. This block functions similarly to other blocks and anticipates the receipt of props as specified by its associated [API](#props).

- **Creating custom components:**
if you are creating custom components and wish to utilize the icons provided here, please follow the instructions below.

### Dedicated Icon

Import the desired icon and use it into your code, for example:

```js
import { IconMenu } from 'vtex.store-icons'

const YourComponent = (props) => <IconMenu />
```

You can see [here](#icon-list) a list of every available icon.

### Generic Icon

The API provides a generic icon, The `Icon` component. You can choose from any other icon passing only the `id` from the respective one you want to add.

For example:

```js
import { Icon } from 'vtex.store-icons'

const YourComponent = (props) => <Icon id="hpa-cart" />
```

⚠ This component is meant to be used on icons there aren't common throughout the store. Choose [`dedicated`](#dedicated-icon) components whenever possible.

## Icons

### Props

Any icon can receive the following props:

| Property        | Description                                | Type      | Default value |
| --------------- | ------------------------------------------ | --------- | ------------- |
| id              | The ID for the desired icon                | `String`  | ''            |
| size            | Desired size                               | `Number`  | 16            |
| isActive        | desc                                       | `Boolean` | true          |
| activeClassName | The className it should have if active     | `String`  | 🚫            |
| mutedClassName  | The className it should have if not active | `String`  | 🚫            |

Obs: **...props**: It is important to notice that any other `<svg>` prop passed will work with an icon as well.

#### Enhanced Props

Some components support modifiers. These are props that define the icon type, orientation, state or shape.

| Modifier    | Possible values             |
| ----------- | --------------------------- |
| type        | `filled` `line` `outline`   |
| orientation | `up` `down` `left` `right`  |
| state       | `on` `off`                  |
| shape       | `square` `rounded` `circle` |

### Icon List

#### Brand

| Component                                                                                | id       | Type | Orientation | State | Shape                       |
| -------------------------------------------------------------------------------------------- | -------- | ---- | ----------- | ----- | --------------------------- |
| [IconSocial](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSocial.js) | `social` | 🚫   | 🚫          | 🚫    | square \| rounded \| circle |

#### High Priority Actions

| Component                                                                                | id                | Type | Orientation | State | Shape |
| ------------------------------------------------------------------------------------------------------------ | ----------------- | ---- | ----------- | ----- | ----- |
| [IconArrowBack](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconArrowBack.js)           | `arrow-back`      | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconAssistantSales](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconAssistantSales.js) | `assistant-sales` | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconProfile](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconProfile.js)               | `profile`         | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconCart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCart.js)                     | `cart`            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconSearch](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSearch.js)                 | `search`          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconDelete](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconDelete.js)                 | `delete`          | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconMenu](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMenu.js)                     | `menu`            | 🚫   | 🚫          | 🚫    | 🚫    |
| [IconLocationMarker](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconLocationMarker.js) | `location-marker` | 🚫   | 🚫          | 🚫    | 🚫    |

#### Medium Priority Actions

| Component                                                                                | id            | Type                      | Orientation | State     | Shape |
| ---------------------------------------------------------------------------------------------------- | ------------- | ------------------------- | ----------- | --------- | ----- |
| [IconEyesight](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconEyesight.js)     | `eyesight`    | filled \| outline         | 🚫          | on \| off | 🚫    |
| [IconMinus](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconMinus.js)           | `minus`       | filled \| outline \| line | 🚫          | 🚫 brands |
| [IconPlus](https://github.com/vtex-apps/store-icons/blobrandseact/IconPlus.js)                       | `plus`        | filled \| outline \| line | 🚫          | 🚫        | 🚫    | brands |
| [IconSingleItem](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSingleItem.js) | `single-item` | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconList](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconList.js)             | `list`        | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconGallery](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGallery.js)       | `gallery`     | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconRemove](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconRemove.js)         | `remove`      | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconSwap](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconSwap.js)             | `swap`        | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconHeart](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconHeart.js)           | `heart`       | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconGlobe](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconGlobe.js)           | `globe`       | 🚫                        | 🚫          | 🚫        | 🚫    |
| [IconBookmark](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconBookmark.js)     | `bookmark`    | filled \| outline         | 🚫          | 🚫        | 🚫    |
| [IconPlay](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconPlay.js)             | `play`        | filled \| outline         | 🚫          | 🚫        | 🚫    |
| [IconPause](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconPause.js)           | `pause`       | filled \| outline         | 🚫          | 🚫        | 🚫    |

#### Navigation

| Component                                                                                | id      | Type | Orientation                 | State | Shape |
| ------------------------------------------------------------------------------------------ | ------- | ---- | --------------------------- | ----- | ----- |
| [IconCaret](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCaret.js) | `caret` | 🚫   | up \| down \| left \| right | 🚫    | 🚫    | true \| false |

#### Status Indicators

| Component                                                                                | id           | Type                      | Orientation | State | Shape |
| -------------------------------------------------------------------------------------------------- | ------------ | ------------------------- | ----------- | ----- | ----- |
| [IconClose](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconClose.js)         | `close`      | filled \| outline         | 🚫          | 🚫    | 🚫    |
| [IconCheck](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconCheck.js)         | `check`      | filled \| outline \| line | 🚫          | 🚫    | 🚫    |
| [IconVolumeOn](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconVolumeOn.js)   | `volume-on`  | filled \| outline \| line | 🚫          | 🚫    | 🚫    |
| [IconVolumeOff](https://github.com/vtex-apps/store-icons/blob/feature/docs/react/IconVolumeOff.js) | `volume-off` | filled \| outline \| line | 🚫          | 🚫    | 🚫    |

## Customize

In the [usage](#usage) section, we discuss two ways of using icons. These ways extend to customization, so, prefer to change an existing Icon so that you can use the [dedicated](#dedicated-icon) version. You can check how to override and name icons below.

### Overwriting the default IconPack

As mentioned before, all icon IDs are stored at the [iconpack.svg](https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md) file. You can overwrite the default one by:

1. On your [`store-theme`](https://github.com/vtex-apps/store-theme/tree/master/styles) create a new folder called `iconpacks`

2. Create a file called `iconpack.svg`

3. Declare your icon IDs (use the default `iconpack` as an example in how to do that properly).

### Nomenclature

The naming convention is: [`intention`](#icon-intention)-[`id`](#icon-list)--[`?modifiers`](#enhanced-props)

Where the `modifiers` follows the rule:
`?type`--`?orientation`--`?state`--`?shape`

**🤓 ? stands for optional inputs**

#### Icon Intention

`bnd` **Brand** - Display logos, brands or advertisements.

`hpa` **High priority actions** - Actions that are important to the global context.

`mpa` **Mild priority actions** - Actions that are important only to the current component context.

`inf` **Informational** - Represents information display or actions that, when triggered, reveal further details about the current context.

`nav` **Navigation** - Actions that triggers navigation.

`sti` **Status indicators** - Indicates the current item/component semantic status.

## CSS Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles          |
| -------------------- |
| 'arrowBackIcon'      |
| 'assistantSalesIcon' |
| 'caretIcon'          |
| 'cartIcon'           |
| 'checkIcon'          |
| 'closeIcon'          |
| 'deleteIcon'         |
| 'equalsIcon'         |
| 'eyeSightIcon'       |
| 'filterIcon'         |
| 'globeIcon'          |
| 'gridIcon'           |
| 'heartIcon'          |
| 'homeIcon'           |
| 'inlineGridIcon'     |
| 'locationInputIcon'  |
| 'locationMarkerIcon' |
| 'menuIcon'           |
| 'minusIcon'          |
| 'plusIcon'           |
| 'profileIcon'        |
| 'removeIcon'         |
| 'searchIcon'         |
| 'singleGridIcon'     |
| 'socialIcon'         |
| 'starIcon'           |
| 'swapIcon'           |
| 'playIcon'           |
| 'pauseIcon'          |
| 'fullscreenIcon'     |
| 'volumeOnIcon'       |
| 'volumeOffIcon'      |

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconMinus.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconMinus = (props: IconProps) => {
  return <Icon id="nav-minus" handle="minusIcon" {...props} />
}

export default IconMinus

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconHeart.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconHeart = (props: IconProps) => {
  return <Icon id="mpa-heart" handle="heartIcon" {...props} />
}

export default IconHeart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconPlus.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconPlus = (props: IconProps) => {
  return <Icon id="nav-plus" handle="plusIcon" {...props} />
}

export default IconPlus

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconSingleGrid.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconSingleGrid = (props: IconProps) => {
  return <Icon id="mpa-single-item" handle="singleGridIcon" {...props} />
}

export default IconSingleGrid

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconCaret.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import classnames from 'classnames'
import Icon from './components/Icon'
import { getOrientation } from './utils/helpers'

const IconCaret = ({ orientation, thin = false, ...props }: CaretProps) => {
  const orientationModifier = getOrientation(orientation)
  const id: string = classnames({
    [`nav-thin-caret${orientationModifier}`]: thin,
    [`nav-caret${orientationModifier}`]: !thin,
  })
  return <Icon id={id} handle="caretIcon" {...props} />
}

export default IconCaret

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconPause.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconPause = (props: IconProps) => {
  return <Icon id="mpa-pause" handle="pauseIcon" {...props} />
}

export default IconPause

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconExpand.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconExpand = (props: IconProps) => {
  return <Icon id="mpa-expand" handle="expandIcon" {...props} />
}

export default IconExpand

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconVolumeOn.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconVolumeOn = (props: IconProps) => {
  return <Icon id="sti-volume-on" handle="volumeOnIcon" {...props} />
}

export default IconVolumeOn

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconLocationMarker.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconLocationMarker = (props: IconProps) => {
  return (
    <Icon id="hpa-location-marker" handle="locationMarkerIcon" {...props} />
  )
}

export default IconLocationMarker

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconInlineGrid.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconInlineGrid = (props: IconProps) => {
  return <Icon id="mpa-list-items" handle="inlineGridIcon" {...props} />
}

export default IconInlineGrid

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconCart.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconCart = (props: IconProps) => {
  return <Icon id="hpa-cart" handle="cartIcon" {...props} />
}

export default IconCart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconEyeSight.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'
import { getType, getState } from './utils/helpers'

const IconEyeSight = ({ type, state, ...props }: EnhancedIconProps) => {
  const typeModifier = getType(type, 'filled, outline')
  const stateModifier = getState(state)
  return (
    <Icon
      id={`mpa-eyesight${typeModifier}${stateModifier}`}
      handle="eyeSightIcon"
      {...props}
    />
  )
}

export default IconEyeSight

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconGlobe.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconGlobe = (props: IconProps) => {
  return <Icon id="mpa-globe" handle="globeIcon" {...props} />
}

export default IconGlobe

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconBookmark.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'
import { getType } from './utils/helpers'

const IconBoomark = ({ type = 'outline', ...props }: EnhancedIconProps) => {
  const typeModifier = getType(type, 'filled, outline')
  return <Icon id={`mpa-bookmark${typeModifier}`} {...props} />
}

export default IconBoomark

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconEquals.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconEquals = (props: IconProps) => {
  return <Icon id="sti-equals" handle="equalsIcon" {...props} />
}

export default IconEquals

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/Icon.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import Icon from './components/Icon'

export default Icon

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconSearch.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconSearch = (props: IconProps) => {
  return <Icon id="hpa-search" handle="searchIcon" {...props} />
}

export default IconSearch

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconHome.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconHome = (props: IconProps) => {
  return <Icon id="nav-home" handle="homeIcon" {...props} />
}

export default IconHome

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconClose.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'
import { getType } from './utils/helpers'

const IconClose = ({ type = 'filled', ...props }: EnhancedIconProps) => {
  const typeModifier = getType(type)
  return <Icon handle="closeIcon" id={`sti-close${typeModifier}`} {...props} />
}

export default IconClose

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconGrid.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconGrid = (props: IconProps) => {
  return <Icon id="mpa-gallery" handle="gridIcon" {...props} />
}

export default IconGrid

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconCheck.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { getType } from './utils/helpers'

import Icon from './components/Icon'

const IconCheck = ({ type, ...props }: EnhancedIconProps) => {
  const typeModifier = getType(type)
  return <Icon handle="checkIcon" id={`sti-check${typeModifier}`} {...props} />
}

export default IconCheck

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconDelete.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconDelete = (props: IconProps) => {
  return <Icon id="hpa-delete" handle="deleteIcon" {...props} />
}

export default IconDelete

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconSwap.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconSwap = (props: IconProps) => {
  return <Icon id="mpa-swap" handle="swapIcon" {...props} />
}

export default IconSwap

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconArrowBack.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconArrowBack = (props: IconProps) => {
  return <Icon id="hpa-arrow-back" handle="arrowBackIcon" {...props} />
}

export default IconArrowBack

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconMenu.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconMenu = (props: IconProps) => {
  return <Icon id="hpa-hamburguer-menu" handle="menuIcon" {...props} />
}

export default IconMenu

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconRemove.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconRemove = (props: IconProps) => {
  return <Icon id="mpa-remove" handle="removeIcon" {...props} />
}

export default IconRemove

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconFilter.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconFilter = (props: IconProps) => {
  return <Icon id="mpa-filter-settings" handle="filterIcon" {...props} />
}

export default IconFilter

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/package.json from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.store-icons",
  "version": "0.18.1",
  "description": "React components that encapsules store icons",
  "scripts": {
    "pretest": "yarn",
    "test": "vtex-test-tools test",
    "test:watch": "vtex-test-tools test --watch",
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json './**/*.ts'"
  },
  "files": [
    "react"
  ],
  "dependencies": {
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.9",
    "@types/node": "^11.10.0",
    "@types/ramda": "^0.25.51",
    "@types/react": "^16.8.6",
    "@vtex/test-tools": "^1.1.0",
    "babel-preset-react-app": "^7.0.2",
    "tslint": "^5.11.0",
    "tslint-config-vtex": "^2.0.0",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.8.3"
  },
  "resolutions": {
    "babel-core": "^7.0.0-bridge.0"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconAssistantSales.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconAssistantSales = (props: IconProps) => {
  return <Icon id="hpa-telemarketing" handle="assistantSalesIcon" {...props} />
}

export default IconAssistantSales

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconSocial.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'
import { getShape } from './utils/helpers'

interface Props extends EnhancedIconProps {
  readonly network: string
  readonly background: string
}

const IconSocial = ({ network, size, background, shape, ...props }: Props) => {
  const { wrapperProps, reducedIconSize } = getShape(size!, background, shape)

  return (
    <span {...wrapperProps}>
      <Icon
        id={`bnd-${network}`}
        handle="socialIcon"
        size={reducedIconSize}
        {...props}
      />
    </span>
  )
}

IconSocial.defautProps = {
  size: 16,
  viewBox: '0 0 16 16',
}

export default IconSocial

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconVolumeOff.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconVolumeOff = (props: IconProps) => {
  return <Icon id="sti-volume-off" handle="volumeOffIcon" {...props} />
}

export default IconVolumeOff

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconStar.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconStar = (props: IconProps) => {
  return <Icon id="inf-star" handle="starIcon" {...props} />
}

export default IconStar

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconProfile.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconProfile = (props: IconProps) => {
  return <Icon id="hpa-profile" handle="profileIcon" {...props} />
}

export default IconProfile

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconPlay.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconPlay = (props: IconProps) => {
  return <Icon id="mpa-play" handle="playIcon" {...props} />
}

export default IconPlay

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/IconLocationInput.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Icon from './components/Icon'

const IconLocationInput = (props: IconProps) => {
  return <Icon id="mpa-location-input" handle="locationInputIcon" {...props} />
}

export default IconLocationInput

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/store/interfaces.json from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "icon": {
    "component": "Icon"
  },
  "icon-arrow-back": {
    "component": "IconArrowBack"
  },
  "icon-assistant-sales": {
    "component": "IconAssistantSales"
  },
  "icon-caret": {
    "component": "IconCaret"
  },
  "icon-cart": {
    "component": "IconCart"
  },
  "icon-check": {
    "component": "IconCheck"
  },
  "icon-close": {
    "component": "IconClose"
  },
  "icon-delete": {
    "component": "IconDelete"
  },
  "icon-equals": {
    "component": "IconEquals"
  },
  "icon-eye-sight": {
    "component": "IconEyeSight"
  },
  "icon-filter": {
    "component": "IconFilter"
  },
  "icon-globe": {
    "component": "IconGlobe"
  },
  "icon-grid": {
    "component": "IconGrid"
  },
  "icon-heart": {
    "component": "IconHeart"
  },
  "icon-home": {
    "component": "IconHome"
  },
  "icon-inline-grid": {
    "component": "IconInlineGrid"
  },
  "icon-location-input": {
    "component": "IconLocationInput"
  },
  "icon-location-marker": {
    "component": "IconLocationMarker"
  },
  "icon-menu": {
    "component": "IconMenu"
  },
  "icon-minus": {
    "component": "IconMinus"
  },
  "icon-plus": {
    "component": "IconPlus"
  },
  "icon-profile": {
    "component": "IconProfile"
  },
  "icon-remove": {
    "component": "IconRemove"
  },
  "icon-search": {
    "component": "IconSearch"
  },
  "icon-single-grid": {
    "component": "IconSingleGrid"
  },
  "icon-social": {
    "component": "IconSocial"
  },
  "icon-star": {
    "component": "IconStar"
  },
  "icon-swap": {
    "component": "IconSwap"
  },
  "icon-bookmark": {
    "component": "IconBookmark"
  },
  "icon-expand": {
    "component": "IconExpand"
  },
  "icon-volume-on": {
    "component": "IconVolumeOn"
  },
  "icon-volume-off": {
    "component": "IconVolumeOff"
  },
  "icon-play": {
    "component": "IconPlay"
  },
  "icon-pause": {
    "component": "IconPause"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/docs/script/scrap-svg.js from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```javascript
const cheerio = require('cheerio');
const fs = require('fs');
const path = require('path');

const PRODUCTION_ICON_PACK = path.join(__dirname, '..', '..', 'styles', 'iconpacks', 'iconpack.svg')

const body = fs.readFileSync(PRODUCTION_ICON_PACK)

const $ = cheerio.load(body);
const svgs = {}

$('g').toArray().map(element => {
  let id = element.attribs.id.trim()
  let htmlG = $(`#${id}`).html().trim().replace(new RegExp('currentColor', 'g'), '#000000')
  svgs[id] = htmlG
  let template = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
      <g id="${id}">
        ${htmlG}
      </g>
    </svg>`

  fs.writeFileSync(path.join(__dirname, '..', id + '.svg'), template)
})

const BASELINE_PATH = path.join(__dirname, 'baseline.md')
const ICONPACK_PATH = path.join(__dirname, '..', 'ICONPACK.md')

fs.copyFile(BASELINE_PATH, ICONPACK_PATH, (err) => {
  if (err) throw err
  for (id in svgs) {
    fs.appendFileSync(ICONPACK_PATH, `| ![](docs/${id}.svg)  | ${id} | \n`)
  }
})
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/typings/global.d.ts from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface IconProps {
  readonly id: string
  readonly handle: string
  readonly isActive?: boolean
  readonly size?: number
  readonly viewBox?: string
  readonly activeClassName?: string
  readonly mutedClassName?: string
}

interface EnhancedIconProps extends IconProps {
  readonly orientation?: string
  readonly state?: string
  readonly shape?: string
  readonly type?: string
}

interface CaretProps extends EnhancedIconProps {
  readonly thin?: boolean
}

interface Enhancement {
  id: string
  modifier: string
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/utils/helpers.ts from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { contains, find, propEq } from 'ramda'
import { ORIENTATIONS, SHAPES, STATES, TYPES } from './enhancements'

/**
 * Get the modifer from any collection matching the rule collection{id, modifier}
 * @param {*} id
 * @param {*} collection
 */
export const getModifier = (collection: Enhancement[], id?: string) => {
  const foundItem = find(propEq('id', id), collection)
  return !!foundItem ? foundItem.modifier : id
}

/**
 * Get a subset of the collections with given ids (passed with commas)
 * @param {*} tokens
 * @param {*} collection
 */
export const getSubset = (tokens: string, collection: Enhancement[]) => {
  const ids = tokens.split(',').join('')
  return collection.filter((item: any) => contains(item.id, ids))
}

/**
 * Get enhancement modifier
 * @param enhancementList list of enhancements
 * @param enhancement desired enhancement
 * @param supported all supported enhancement list
 */
export const getEnhancement = (
  enhancementList: Enhancement[],
  enhancement?: string,
  supported?: string
) => {
  const supportedEnhancements = !!supported
    ? getSubset(supported, enhancementList)
    : enhancementList
  const modifier = getModifier(supportedEnhancements, enhancement)
  return modifier
}

/**
 * Get orientation modifier
 * @param orientation desired orientation
 * @param supported suported orientations
 */
export const getOrientation = (orientation?: string, supported?: string) =>
  getEnhancement(ORIENTATIONS, orientation, supported)

/**
 * Get type modifier
 * @param type desired type
 * @param supported suported types
 */
export const getType = (type?: string, supported?: string) =>
  getEnhancement(TYPES, type, supported)

/**
 * Get state modifier
 * @param state desirend state
 * @param supported suported states
 */
export const getState = (state?: string, supported?: string) =>
  getEnhancement(STATES, state, supported)

/**
 * Get shape modifier
 * @param size icon size
 * @param background background color
 * @param shape desired shape
 * @param supported suported shapes
 */
export const getShape = (
  size: number,
  background: string,
  shape?: string,
  supported?: string
) => {
  const REDUCTION_PERCENTAGE = 0.4
  const getReduction = (size: number) => size * REDUCTION_PERCENTAGE
  const modifiers = getEnhancement(SHAPES, shape, supported)
  const reduction = getReduction(size)
  const padding = reduction / 2
  const reducedIconSize = size - reduction

  const wrapperProps = [
    { className: `${modifiers} flex` },
    { style: { padding, backgroundColor: background } },
  ]

  return { wrapperProps, reducedIconSize }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/utils/enhancements.ts from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const SHAPES = [
  {
    id: 'square',
    modifier: 'br1',
  },
  {
    id: 'rounded',
    modifier: 'br3',
  },
  {
    id: 'circle',
    modifier: 'br-100',
  },
]

export const ORIENTATIONS = [
  {
    id: 'up',
    modifier: '--up',
  },
  {
    id: 'down',
    modifier: '--down',
  },
  {
    id: 'right',
    modifier: '--right',
  },
  {
    id: 'left',
    modifier: '--left',
  },
]

export const STATES = [
  {
    id: 'on',
    modifier: '--on',
  },
  {
    id: 'off',
    modifier: '--off',
  },
]

export const TYPES = [
  {
    id: 'filled',
    modifier: '--filled',
  },
  {
    id: 'outline',
    modifier: '--outline',
  },
  {
    id: 'line',
    modifier: '--line',
  },
]

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/components/Icon.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

import Svg from './Svg'
import Use from './Use'

const CSS_HANDLES = [
  'arrowBackIcon',
  'assistantSalesIcon',
  'caretIcon',
  'cartIcon',
  'checkIcon',
  'closeIcon',
  'deleteIcon',
  'equalsIcon',
  'expandIcon',
  'eyeSightIcon',
  'filterIcon',
  'globeIcon',
  'gridIcon',
  'heartIcon',
  'homeIcon',
  'inlineGridIcon',
  'locationInputIcon',
  'locationMarkerIcon',
  'menuIcon',
  'minusIcon',
  'plusIcon',
  'profileIcon',
  'removeIcon',
  'searchIcon',
  'singleGridIcon',
  'socialIcon',
  'starIcon',
  'swapIcon',
  'playIcon',
  'pauseIcon',
  'volumeOnIcon',
  'volumeOffIcon',
] as const

const Icon = ({
  id,
  handle,
  isActive,
  size,
  viewBox,
  activeClassName,
  mutedClassName,
}: IconProps) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <Svg
      fill="none"
      width={size}
      height={size}
      viewBox={viewBox}
      className={`${isActive ? activeClassName || '' : mutedClassName || ''} ${
        handles[handle] || ''
      }`}
    >
      <Use id={id} />
    </Svg>
  )
}

Icon.defaultProps = {
  isActive: true,
  size: 16,
  viewBox: '0 0 16 16',
}

export default Icon

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/components/Use.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  id: string
}

const Use = ({ id }: Props) => <use href={`#${id}`} xlinkHref={`#${id}`} />

export default Use

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/components/Svg.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { ReactNode } from 'react'

interface Props {
  readonly fill?: string
  readonly width?: number
  readonly height?: number
  readonly viewBox?: string
  readonly className?: string
  readonly xmlns?: string
  readonly xmlnsXlink?: string
  readonly children?: ReactNode
}

const Svg = ({ children, ...props }: Props) => <svg {...props}>{children}</svg>

Svg.defaultProps = {
  xmlns: 'http://www.w3.org/2000/svg',
  xmlnsXlink: 'http://www.w3.org/1999/xlink',
}

export default Svg

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/__tests__/Svg.test.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import Svg from '../components/Svg'

describe('Svg', () => {
  it('should match snapshot', () => {
    const component = render(
      <Svg fill="black">
        <path />
      </Svg>
    ).asFragment()
    expect(component).toMatchSnapshot()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/__tests__/Icon.test.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import Icon from '../components/Icon'

describe('Icon', () => {
  it('should match snapshot', () => {
    const component = render(<Icon id="tst-snapshot" size={20} />).asFragment()
    expect(component).toMatchSnapshot()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/__tests__/Use.test.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import Use from '../components/Use'

describe('Use', () => {
  it('should match snapshot', () => {
    const component = render(
      <svg>
        <Use id="tst-snapshot" />
      </svg>
    ).asFragment()
    expect(component).toMatchSnapshot()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/__tests__/Enhancements.test.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import {
  getSubset,
  getShape,
  getOrientation,
  getState,
  getType,
} from '../utils/helpers'
import { SHAPES, ORIENTATIONS } from '../utils/enhancements'

describe('Enhancements', () => {
  it('should allow supported enhancements', () => {
    const shapes = getSubset('square', SHAPES)
    const orientations = getSubset('down, right', ORIENTATIONS)

    expect(shapes).toEqual([
      {
        id: 'square',
        modifier: 'br1',
      },
    ])

    expect(orientations).toEqual([
      {
        id: 'down',
        modifier: '--down',
      },
      {
        id: 'right',
        modifier: '--right',
      },
    ])
  })

  it('should get the correct shape', () => {
    const square = getShape(16, 'red', 'square')
    const rounded = getShape(20, 'green', 'rounded')
    const circle = getShape(24, 'blue', 'circle')

    expect(square.reducedIconSize).toBeLessThan(16)
    expect(rounded.reducedIconSize).toBeLessThan(20)
    expect(circle.reducedIconSize).toBeLessThan(24)

    expect(square.wrapperProps).toHaveLength(2)
    expect(rounded.wrapperProps).toHaveLength(2)
    expect(circle.wrapperProps).toHaveLength(2)

    expect(square.wrapperProps[0].className).toContain('br1')
    expect(rounded.wrapperProps[0].className).toContain('br3')
    expect(circle.wrapperProps[0].className).toContain('br-100')

    expect(square.wrapperProps[1].style!.backgroundColor).toEqual('red')
    expect(rounded.wrapperProps[1].style!.backgroundColor).toEqual('green')
    expect(circle.wrapperProps[1].style!.backgroundColor).toEqual('blue')
  })

  it('should get the correct orientation', () => {
    const up = getOrientation('up')
    const down = getOrientation('down')
    const left = getOrientation('left')
    const right = getOrientation('right')

    expect(up).toEqual('--up')
    expect(down).toEqual('--down')
    expect(left).toEqual('--left')
    expect(right).toEqual('--right')
  })

  it('should get the correct state', () => {
    const on = getState('on')
    const off = getState('off')

    expect(on).toEqual('--on')
    expect(off).toEqual('--off')
  })

  it('should get the correct type', () => {
    const filled = getType('filled')
    const outline = getType('outline')
    const line = getType('line')

    expect(filled).toEqual('--filled')
    expect(outline).toEqual('--outline')
    expect(line).toEqual('--line')
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-icons/react/testUtils/setupTests.tsx from the store-icons VTEX app.

[Assistant]
Here's the implementation:

```tsx
// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import 'react-testing-library/cleanup-after-each'

// this adds jest-dom's custom assertions
import 'jest-dom/extend-expect'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of buybox-graphql/docs/README.md from the buybox-graphql VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Buybox GraphQL

> ⚠ This app is no longer maintained by VTEX. This means support and maintenance are no longer provided.

This app exports a GraphQL schema to sort sellers on [buybox-context](https://github.com/vtex-apps/buybox-context).

### Installation

To use it in your app, add the following dependency in the `manifest.json` file:
```json
  "dependencies": {
    "vtex.buybox-graphql": "0.x"
  }
```

> This app is used on [buybox-context](https://github.com/vtex-apps/buybox-context), but do you may then use it in your front end component as well.

To resolve this query, you must have installed in your workspace an app that implements the GraphQL interface. Currently, those are the available resolvers:

- [buybox-resolver](https://github.com/vtex-apps/buybox-resolver)

> 📣 Having zero or more than one resolver installed will result in an error.

### Examples

Using this resolver do you can provide informations about the `Product` and `Shipping` to get an array with sorted sellers. The array returned is a list of `sellerId`.

```graphql
query SortSellersProtocol {
  sortSellers(skuId: "33", postalCode: "00000000", country: "BRA", salesChannel: 1) {
    sellers
  }
}
```

This returns sellers id's inside the `Product`. Here's a possible response for the execution of this query:

```graphql
{
  "data": {
    "sortSellers": {
      sellers: ["seller1", "seller3", "seller4", "otherSeller"]
    }
  }
}
```

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of buybox-graphql/graphql/schema.graphql from the buybox-graphql VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  sortSellers(
    skuId: ID!
    salesChannel: Int
    country: String
    postalCode: String
  ): SortedSellers @cacheControl(scope: SEGMENT, maxAge: SHORT) @withSegment
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of buybox-graphql/node/package.json from the buybox-graphql VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "buybox-graphql",
  "description": "Don't delete this file, it's necessary to generate the TypeScript types of the GraphQL"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/service.json from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "sendAntifraudData": {
      "path": "/fake-antifraud/transactions",
      "public": true
    },
    "listManifest": {
      "path": "/fake-antifraud/manifest",
      "public": true
    },
    "getAntifraudStatus": {
      "path": "/fake-antifraud/transactions/:transactionId",
      "public": true
    },
    "preAnalysis": {
      "path": "/fake-antifraud/pre-analysis",
      "public": true
    },
    "changeTransactionStatus": {
      "path": "/fake-antifraud/transactions/:transactionId/:newStatus",
      "public": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/types.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface Minicart {
  buyer: Buyer
  shipping: Shipping
  items: Item[]
  listRegistry?: ListRegistry
}

interface Buyer {
  id: string
  firstName: string
  lastName: string
  document: string
  documentType: string
  email: string
  phone: string
  address: Address
}

interface Shipping {
  value: number
  estimatedDate: string
  address: Address
}

interface Item {
  id: string
  name: string
  price: number
  quantity: number
  deliveryType: string
  deliverySlaInMinutes: number
  categoryId: number
  categoryName: string
  discount: string
  sellerId: string
  taxValue: number
}

interface ListRegistry {
  name: string
  deliveryToOwner: boolean
}

export interface Payments {
  id: string
  method: string
  name: string
  value: number
  currencyIso4217: string
  installments: number
  details: PaymentsDetails
}

interface PaymentsDetails {
  bin: string
  lastDigits: string
  holder: string
}

interface Address {
  country: string
  street: string
  number: string
  complement: string
  neighborhood: string
  postalCode: string
  city: string
  state: string
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/package.json from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0",
    "uuid": "^8.3.2",
    "@vtex/clients": "^2.19.4"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@types/uuid": "^8.3.4",
    "@vtex/api": "6.45.21",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.2.0"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/index.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { ClientsConfig, ServiceContext, RecorderState } from '@vtex/api'
import { method, Service } from '@vtex/api'

import { Clients } from './clients'
import { getAntifraudStatus } from './middlewares/getAntifraudStatus'
import { listManifest } from './middlewares/listManifest'
import { preAnalysis } from './middlewares/preAnalysis'
import { sendAntifraudData } from './middlewares/sendAntifraudData'
import { Minicart, Payments } from './types'

const TIMEOUT_MS = 800

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
  },
}

declare global {
  type Context = ServiceContext<Clients, AntifraudRequestState>

  interface AntifraudRequestState extends RecorderState {
    reference: string
    id: string
    value: string
    ip: string
    deviceFingerprint?: string
    store: string
    miniCart: Minicart
    payments: Payments
    hook: string
    transactionStartDate: string
  }
}

export default new Service({
  clients,
  routes: {
    sendAntifraudData: method({
      POST: [sendAntifraudData],
    }),
    listManifest: method({
      GET: [listManifest],
    }),
    getAntifraudStatus: method({
      GET: [getAntifraudStatus],
    }),
    preAnalysis: method({
      POST: [preAnalysis],
    }),
  },
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/clients/index.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'
import { vbaseFor } from '@vtex/clients'

export const TRANSACTION_BUCKET = 'transaction'

export interface AntifraudTransactionResponse {
  id: string
  tid: string
  status: string
  score: number | null
  analysisType: string
  responses: Record<string, string>
  code: string
  message: string
  _metadata?: Record<string, any>
}

export const AntifraudTransactionsStorage = vbaseFor<
  string,
  AntifraudTransactionResponse
>(TRANSACTION_BUCKET)
export type AntifraudTransactionsStorage = InstanceType<
  typeof AntifraudTransactionsStorage
>

export class Clients extends IOClients {
  public get antifraudTransactionStorage() {
    return this.getOrSet(
      'antifraudTransactionStorage',
      AntifraudTransactionsStorage
    )
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/middlewares/preAnalysis.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { UserInputError } from '@vtex/api'
import { json } from 'co-body'
import { v4 as uuidv4 } from 'uuid'

import { AntifraudTransactionResponse } from '../clients'
import { approvedRequest, deniedRequest } from './utils'

export async function preAnalysis(ctx: Context, next: () => Promise<any>) {
  ctx.state = await json(ctx.req)

  const { id, miniCart } = ctx.state
  const tid = uuidv4()

  let response: AntifraudTransactionResponse

  switch (miniCart?.buyer?.firstName) {
    case 'Error500':
      throw new Error('Invalid transaction')
    case 'Error400':
      throw new UserInputError('Invalid transaction')
    case 'Risky':
      response = deniedRequest(id, tid)
      break
    default:
      response = approvedRequest(id, tid)
      break
  }

  ctx.body = response
  ctx.status = 200
  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/middlewares/utils.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AntifraudTransactionResponse } from '../clients'

export const approvedRequest = (id: string, tid: string, code?: string) => {
  return {
    id,
    tid,
    status: 'approved',
    code: code ?? '2000',
    message: 'Low risk of fraud',
    analysisType: 'automatic',
    score: 5.01,
    responses: {
      customIdentifier: 'test',
    },
  }
}

export const receivedRequest = (id: string, tid: string, code?: string) => {
  return {
    id,
    tid,
    status: 'received',
    code: code ?? '2001',
    message: 'Low risk of fraud',
    analysisType: 'automatic',
    score: 5.01,
    responses: {
      customIdentifier: 'test',
    },
  }
}

export const deniedRequest = (id: string, tid: string, code?: string) => {
  return {
    id,
    tid,
    status: 'denied',
    code: code ?? '4001',
    message: 'Extremely risky',
    analysisType: 'automatic',
    score: 99.01,
    responses: {
      customIdentifier: 'test',
    },
  }
}

export const getTransactionStatus = (
  transaction: AntifraudTransactionResponse
): AntifraudTransactionResponse => {
  const firstPaymentLastFourDigits =
    transaction._metadata?.payments[0]?.details?.lastDigits

  const { _metadata, ...transactionResponse } = transaction

  if (transaction.status !== 'received' && transaction.status !== 'undefined') {
    return transactionResponse
  }

  if (firstPaymentLastFourDigits === '1234') {
    return deniedRequest(transaction.id, transaction.tid)
  }

  if (transaction._metadata?.counter === 5) {
    return approvedRequest(transaction.id, transaction.tid)
  }

  return transactionResponse
}

const lastCharFromString = (item: string) => {
  return item.charAt(item.length - 1)
}

export const handleTestSuiteTransaction = (id: string, tid: string) => {
  if (lastCharFromString(id) === '1') {
    return approvedRequest(id, tid)
  }

  if (lastCharFromString(id) === '2') {
    return deniedRequest(id, tid)
  }

  if (lastCharFromString(id) === '3' || lastCharFromString(id) === '5') {
    return approvedRequest(id, tid, 'async')
  }

  if (lastCharFromString(id) === '4' || lastCharFromString(id) === '6') {
    return deniedRequest(id, tid, 'async')
  }

  return receivedRequest(id, tid)
}

export const possibleStatus = ['received', 'undefined', 'approved', 'denied']

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/middlewares/getAntifraudStatus.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { UserInputError } from '@vtex/api'

import { TRANSACTION_BUCKET } from '../clients'
import { getTransactionStatus, handleTestSuiteTransaction } from './utils'

export async function getAntifraudStatus(
  ctx: Context,
  next: () => Promise<any>
) {
  const { antifraudTransactionStorage } = ctx.clients
  const { transactionId } = ctx.vtex.route.params
  const headers = ctx.header

  if (typeof transactionId !== 'string') {
    throw new UserInputError(
      'The transactionId route parameter must be a string'
    )
  }

  const transaction = await antifraudTransactionStorage.get(transactionId)

  const transactionStatus = getTransactionStatus(transaction)

  const isTestSuite = headers['x-provider-api-is-testsuite'] === 'true'

  ctx.status = 200
  ctx.set('Cache-Control', 'no-cache, no-store')

  if (isTestSuite) {
    const antifraudTransaction = handleTestSuiteTransaction(
      transaction.id,
      transaction.tid
    )

    if (
      antifraudTransaction.code === 'async' &&
      transaction.status === 'received'
    ) {
      await antifraudTransactionStorage.saveJSON(
        TRANSACTION_BUCKET,
        transactionId,
        {
          ...antifraudTransaction,
        }
      )
      transaction.status = 'undefined'

      ctx.body = transaction
      await next()

      return
    }

    ctx.body = antifraudTransaction
    await next()

    return
  }

  if (transactionStatus.status === 'received') {
    transactionStatus.status = 'undefined'
  }

  if (!isTestSuite) {
    antifraudTransactionStorage.saveJSON(TRANSACTION_BUCKET, transactionId, {
      ...transactionStatus,
      _metadata: {
        counter: (transaction._metadata?.counter as number) + 1,
        payments: transaction._metadata?.payments,
      },
    })
  }

  delete transactionStatus._metadata

  ctx.body = transactionStatus

  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/middlewares/sendAntifraudData.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { UserInputError } from '@vtex/api'
import { json } from 'co-body'
import { v4 as uuidv4 } from 'uuid'

import { AntifraudTransactionResponse, TRANSACTION_BUCKET } from '../clients'
import { approvedRequest, deniedRequest, receivedRequest } from './utils'

export async function sendAntifraudData(
  ctx: Context,
  next: () => Promise<any>
) {
  const headers = ctx.header
  ctx.state = await json(ctx.req)

  const isTestSuite = headers['x-provider-api-is-testsuite'] === 'true'

  const { antifraudTransactionStorage } = ctx.clients

  const { id, miniCart, payments } = ctx.state
  const tid = uuidv4()

  if (isTestSuite) {
    const testSuiteTransaction = receivedRequest(id, tid)
    ctx.body = testSuiteTransaction
    ctx.status = 200

    await antifraudTransactionStorage.saveJSON(TRANSACTION_BUCKET, id, {
      ...testSuiteTransaction,
      _metadata: {
        counter: 1,
        payments,
      },
    })

    await next()
    return
  }

  let response: AntifraudTransactionResponse

  switch (miniCart?.buyer?.firstName) {
    case 'Error500':
      throw new Error('Invalid transaction')
    case 'Error400':
      throw new UserInputError('Invalid transaction')
    case 'NotRisky':
      response = approvedRequest(id, tid)
      break
    case 'Risky':
      response = deniedRequest(id, tid)
      break
    default:
      response = receivedRequest(id, tid)
      break
  }

  const transaction = {
    ...response,
    _metadata: {
      counter: 1,
      payments,
    },
  }

  await antifraudTransactionStorage.saveJSON(
    TRANSACTION_BUCKET,
    id,
    transaction
  )

  ctx.body = response
  ctx.status = 200
  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of antifraud-provider-example/node/middlewares/listManifest.ts from the antifraud-provider-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function listManifest(ctx: Context, next: () => Promise<any>) {
  ctx.body = {
    customFields: [
      {
        name: 'Test 1',
        type: 'text',
      },
      {
        name: 'Test select',
        type: 'select',
        options: [
          {
            text: 'Test select 1',
            value: 'Test select 1',
          },
          {
            text: 'Test select 1',
            value: 'Test select 2',
          },
        ],
      },
    ],
  }
  ctx.status = 200
  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/docs/README.md from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Events Example

App in VTEX IO designed to send events using a time interval and IO's Events system.

### How it works?

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/service.json from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 128,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 10,
  "workers": 4,
  "routes": {
    "notify": {
      "path": "/_v/app/events-example-publisher/notify",
      "public": true
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/package.json from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "jwt-decode": "^3.1.2"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/node": "12.x",
    "@vtex/api": "6.45.12",
    "eslint": "^6.3.0",
    "eslint-config-vtex": "^11.0.0",
    "prettier": "^1.18.2",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && eslint -c .eslintrc.json --fix './**/*.ts'"
  },
  "version": "0.7.2"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/constants.ts from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const ENABLED_GLOBALLY = true

export const EVENT_EXAMPLE = 'random-number-generated'

export const TIME_INTERVAL = 10

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/index.ts from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  Service,
  IOClients,
  ParamsContext,
  ServiceContext,
  RecorderState,
  method,
} from '@vtex/api'
import { createSendEvent } from './routes/notify'

const TREE_SECONDS_MS = 3 * 1000
const CONCURRENCY = 10

declare global {
  type Context = ServiceContext<IOClients, State>

  interface State extends RecorderState {
    code: number
  }
}

export default new Service<IOClients, State, ParamsContext>({
  clients: {
    options: {
      events: {
        //Informações opcionais
        exponentialTimeoutCoefficient: 2,
        exponentialBackoffCoefficient: 2,
        initialBackoffDelay: 50,
        retries: 1,
        timeout: TREE_SECONDS_MS,
        concurrency: CONCURRENCY,
      },
    },
  },
  routes: {
    notify: method({
      POST: [createSendEvent]
    }),
  },
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/utils/randomNumber.ts from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```typescript
export function getRandomNumber() {
  return Math.round(Math.random() * 100)
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of events-example-publisher/node/routes/notify.ts from the events-example-publisher VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { getRandomNumber } from '../utils/randomNumber'

export async function createSendEvent(ctx: Context) {
  const random = getRandomNumber().toString()
  await ctx.clients.events.sendEvent('', 'random-number-generated', {
    random
  })
  ctx.status = 200
  ctx.body = 'Evento disparado com o payload ' + random
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/messages/pt.json from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/messages/en.json from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "test",
  "store/test": "test"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/messages/es.json from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/docs/README.md from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Responsive Layout
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Responsive Layout allows you to declare layout structures that will only be rendered in a specific screen-size breakpoint.

![responsive-layout-gif](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-responsive-layout-0.gif)

This app defines and exports four blocks:

- `responsive-layout.desktop`
- `responsive-layout.mobile`
- `responsive-layout.tablet`
- `responsive-layout.phone`

Each block has `composition: children`, which means that it expects to receive an array of `children` blocks for rendering if the current screen-size is right for its breakpoint.

## Configuration

1. Import the Responsive Layout app to your theme dependencies in the `manifest.json`. For example:

```json
  "dependencies": {
    "vtex.responsive-layout": "0.x"
  }
```

2. Add the `responsive-layout` block to your theme. For example:

```json
  "store.custom#about-us": {
    "blocks": [
      "responsive-layout.desktop",
      "responsive-layout.tablet",
      "responsive-layout.phone"
    ]
  },

  "responsive-layout.desktop": {
    "children": ["rich-text#desktop"]
  },
  "responsive-layout.tablet": {
    "children": ["rich-text#tablet"]
  },
  "responsive-layout.phone": {
    "children": ["rich-text#phone"]
  },

  "rich-text#desktop": {
    "props": {
      "text": "# This will only show up on desktop.",
      "blockClass": "title"
    }
  },
  "rich-text#tablet": {
    "props": {
      "text": "# This will only show up on tablet.",
      "blockClass": "title"
    }
  },
  "rich-text#phone": {
    "props": {
      "text": "# This will only show up on phone.",
      "blockClass": "title"
    }
  },
```

Note that you could use _any_ array of blocks as `children`, given that they are allowed by the `block` that is directly above `responsive-layout`.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://gabenna.io"><img src="https://avatars1.githubusercontent.com/u/4580524?v=4" width="100px;" alt=""/><br /><sub><b>Micael Pereira</b></sub></a><br /><a href="https://github.com/vtex-apps/responsive-layout/commits?author=micas06gua" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/ResponsiveLayoutDummy.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
const ResponsiveLayoutDummy = () => {
  console.error(
    'You are inserting the `responsive-layout` block directly. Please use `responsive-layout.desktop`, `responsive-layout.mobile`, `responsive-layout.tablet` or `responsive-layout.phone` instead.'
  )

  return null
}

export default ResponsiveLayoutDummy

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/ResponsiveLayoutDesktop.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { useDevice } from 'vtex.device-detector'

const ResponsiveLayoutDesktop: FC = ({ children }) => {
  const { device } = useDevice()

  return device === 'desktop' ? <Fragment>{children}</Fragment> : null
}

export default ResponsiveLayoutDesktop

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/package.json from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "react": "^16.8.6",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.6",
    "react-intl": "^2.9.0"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.2",
    "@types/react": "^16.8.22",
    "@types/react-intl": "^2.3.18",
    "@vtex/test-tools": "^0.3.2",
    "@vtex/tsconfig": "^0.2.0",
    "eslint": "5.x",
    "eslint-config-vtex-react": "^5.0.1",
    "prettier": "^1.18.2",
    "typescript": "3.7.3"
  },
  "version": "0.1.4"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/ResponsiveLayoutTablet.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { useDevice } from 'vtex.device-detector'

const ResponsiveLayoutTablet: FC = ({ children }) => {
  const { device } = useDevice()

  return device === 'tablet' ? <Fragment>{children}</Fragment> : null
}

export default ResponsiveLayoutTablet

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/ResponsiveLayoutPhone.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { useDevice } from 'vtex.device-detector'

const ResponsiveLayoutPhone: FC = ({ children }) => {
  const { device } = useDevice()

  return device === 'phone' ? <Fragment>{children}</Fragment> : null
}

export default ResponsiveLayoutPhone

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/ResponsiveLayoutMobile.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, FC } from 'react'
import { useDevice } from 'vtex.device-detector'

const ResponsiveLayoutMobile: FC = ({ children }) => {
  const { isMobile } = useDevice()

  return isMobile ? <Fragment>{children}</Fragment> : null
}

export default ResponsiveLayoutMobile

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/store/interfaces.json from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "responsive-layout": {
    "component": "ResponsiveLayoutDummy"
  },
  "responsive-layout.desktop": {
    "component": "ResponsiveLayoutDesktop",
    "composition": "children",
    "device": "desktop"
  },
  "responsive-layout.mobile": {
    "component": "ResponsiveLayoutMobile",
    "composition": "children",
    "device": "mobile"
  },
  "responsive-layout.tablet": {
    "component": "ResponsiveLayoutTablet",
    "composition": "children",
    "device": "tablet"
  },
  "responsive-layout.phone": {
    "component": "ResponsiveLayoutPhone",
    "composition": "children",
    "device": "phone"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/typings/vtex.render-runtime.d.ts from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint @typescript-eslint/no-explicit-any: 0 */
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ReactElement } from 'react'

  export interface RenderContextProps {
    runtime: {
      account: string
    }
  }

  export interface InjectedRuntime {
    runtime: RenderRuntime
  }

  interface Pages {
    [name: string]: Page
  }

  interface Route {
    domain: string
    blockId: string
    canonicalPath?: string
    id: string
    params: Record<string, string>
    path: string
    title?: string
  }

  interface Culture {
    availableLocales: string[]
    locale: string
    language: string
    country: string
    currency: string
  }

  export interface RenderRuntime {
    account: string
    accountId: string
    appsEtag: string
    workspace: string
    disableSSR: boolean
    hints: {
      desktop: boolean
      mobile: boolean
      phone: boolean
      tablet: boolean
    }
    page: string
    route: Route
    version: string
    culture: Culture
    pages: Pages
    preview: boolean
    production: boolean
    publicEndpoint: string
    renderMajor: number
    query?: Record<string, string>
    start: boolean
    runtimeMeta: {
      version: string
      config?: any
    }
    settings: {
      [app: string]: any
    }
    segmentToken: string
    rootPath?: string
    workspaceCookie: string
    hasNewExtensions: boolean
  }

  export const Link: any
  export const NoSSR: any
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: any
  export const Helmet: any
  export const useRuntime: () => RenderRuntime
  export const ExtensionPoint: any
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of responsive-layout/react/__tests__/index.test.tsx from the responsive-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of recommendation-shelf/messages/pt.json from the recommendation-shelf VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.recommendation-shelf": "Vitrine de Recomendação",
  "admin/editor.recommendation-shelf.description": "A Vitrine de Recomendação é um componente que exibe uma coleção de itens recomendados ao usuário com base em diversos algoritmos e dados de contexto.",
  "admin/editor.recommendation-shelf.title": "Título da Vitrine",
  "admin/editor.recommendation-shelf.campaign-vrn": "VRN da Campanha",
  "admin/editor.recommendation-shelf.display-title": "Mostrar Título",
  "admin/editor.recommendation-shelf.items-context": "Contexto dos Itens",
  "admin/editor.recommendation-shelf.items-context.description": "De onde recuperar os itens que serão usados como contexto na requisição de recomendação",
  "admin/editor.recommendation-shelf.items-context.cart": "Carrinho",
  "admin/editor.recommendation-shelf.items-context.pdp": "Página de Produto"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of recommendation-shelf/messages/en.json from the recommendation-shelf VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.recommendation-shelf": "Recommendation Shelf",
  "admin/editor.recommendation-shelf.description": "Recommendation Shelf is a component that displays a collection of items that are recommended to the user based on various algorithms and context data.",
  "admin/editor.recommendation-shelf.title": "Shelf title",
  "admin/editor.recommendation-shelf.campaign-vrn": "Campaign VRN",
  "admin/editor.recommendation-shelf.display-title": "Display title",
  "admin/editor.recommendation-shelf.items-context": "Items Context",
  "admin/editor.recommendation-shelf.items-context.description": "From where to retrieve the items that will be used as context in the Recommendation request",
  "admin/editor.recommendation-shelf.items-context.cart": "Cart",
  "admin/editor.recommendation-shelf.items-context.pdp": "Product Page"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of recommendation-shelf/messages/context.json from the recommendation-shelf VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.recommendation-shelf": "Recommendation Shelf",
  "admin/editor.recommendation-shelf.description": "Recommendation Shelf is a component that displays a collection of items that are recommended to the user based on various algorithms and context data.",
  "admin/editor.recommendation-shelf.title": "Shelf title",
  "admin/editor.recommendation-shelf.campaign-vrn": "Campaign VRN",
  "admin/editor.recommendation-shelf.display-title": "Display title",
  "admin/editor.recommendation-shelf.items-context": "Items Context",
  "admin/editor.recommendation-shelf.items-context.description": "From where to retrieve the items that will be used as context in the Recommendation request",
  "admin/editor.recommendation-shelf.items-context.cart": "Cart",
  "admin/editor.recommendation-shelf.items-context.pdp": "Product Page"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of recommendation-shelf/messages/es.json from the recommendation-shelf VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.recommendation-shelf": "Estantería de recomendaciones",
  "admin/editor.recommendation-shelf.description": "La estantería de recomendaciones es un componente que muestra una colección de artículos recomendados al usuario según varios algoritmos y datos de contexto.",
  "admin/editor.recommendation-shelf.title": "Título de la estantería",
  "admin/editor.recommendation-shelf.campaign-vrn": "Campaña VRN",
  "admin/editor.recommendation-shelf.display-title": "Mostrar título",
  "admin/editor.recommendation-shelf.items-context": "Contexto de los artículos",
  "admin/editor.recommendation-shelf.items-context.description": "Contexto de los artículos",
  "admin/editor.recommendation-shelf.items-context.cart": "Carrito",
  "admin/editor.recommendation-shelf.items-context.pdp": "Página de producto"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of recommendation-shelf/docs/README.md from the recommendation-shelf VTEX app.

[Assistant]
Here's the implementation:

```markdown
> 📢 Use this project, [contribute](https://github.com/vtex-apps/recommendation-shelf) to it, or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Recommendation Shelf

> ⚠ This app is currently under development and research by the VTEX Search and Personalization team. During this phase, it should only be installed on selected accounts participating in the closed beta phase of the [Product Recommendations](https://help.vtex.com/en/tutorial/product-recommendations-beta--2QIexbD2FSXBxELUnFtg7g) feature. For other accounts, installing this app will not have any effect. If you want to adopt this feature for your business, please contact [our Support](https://support.vtex.com/hc/en-us/requests).

The Recommendation Shelf app is a store component that displays a collection of products using recommendation strategies.

![recommendation-shelf](https://cdn.jsdelivr.net/gh/vtex-apps/recommendation-shelf@master/docs/shelf.png)

> ℹ Learn more about [Product Recommendations](https://help.vtex.com/en/tutorial/product-recommendations-beta--2QIexbD2FSXBxELUnFtg7g).

## Before you begin

Most recommendation strategies rely on user navigation data as input. Therefore, your store must be configured with our pixel for the `recommendation-shelf` to work properly. This configuration is managed by the VTEX team, so please wait for our confirmation before proceeding with the integration.

## Installation

This app uses our store builder with the blocks architecture. To learn more about Store Builder, [click here.](https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder#structuring-and-configuring-our-store-with-object-object)

Follow these steps to use the Recommendation Shelf app in your store:

1. Add the app as a dependency in your store theme. In your `manifest.json` file, add the following to the `dependencies` section:

   ```json
   "dependencies": {
     "vtex.recommendation-shelf": "2.x"
   }
   ```

2. Add the `recommendation-shelf` block into your app theme where you want the shelf to appear.

3. Customize the behavior of the shelf block.

   The example below shows the following configuration of the `recommendation-shelf` block and its supporting blocks:

   - It creates a `recommendation-shelf#visual-similarity` block that uses the "VISUAL_SIMILARITY" recommendation strategy and sets the shelf title to "Similar items".
   - It defines a `list-context.product-list-static` block, which includes the `product-summary.shelf` block and a child slider layout.
   - It configures the `slider-layout#recommendation-slider` block to control how many items are shown per page on desktop, tablet, and phone, and enables infinite scrolling.

   Example:

   ```json
   "recommendation-shelf#visual-similarity": {
     "blocks": ["list-context.product-list-static"],
     "props": {
       "campaignVrn": "vrn:recommendations:biggy:rec-similar-v2:00318b68-cb1b-4d5a-8b0f-cc7fbcdd014b",
       "title": "Similar items"
     }
   },
   "list-context.product-list-static": {
     "blocks": [
       "product-summary.shelf"
     ],
     "children": [
       "slider-layout#recommendation-slider"
     ]
   },
   "slider-layout#recommendation-slider": {
     "props": {
       "itemsPerPage": {
         "desktop": 5,
         "tablet": 3,
         "phone": 2
       },
       "infinite": true
     }
   }
   ```

4. Customize the product summary (optional).

   The Recommendation Shelf relies on the `slider-layout` and `product-summary.shelf` components. You can further customize the shelf by creating a custom product summary, for example:

   ```json
   "product-summary.shelf#custom": {
     "children": [
       "product-summary-name",
       "product-summary-description",
       "product-summary-image",
       "product-summary-price",
       "product-summary-sku-selector",
       "product-summary-buy-button"
     ]
   }
   ```

   For more information, see the [Product Summary API configuration](https://github.com/vtex-apps/product-summary/blob/master/README.md#configuration).

### Configuration

You can configure the `recommendation-shelf` block in your theme app using the following props:

### Props

Configure the `recommendation-shelf` block using the following properties:

| Prop name      | Type      | Description                                                                                | Default value |
| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `title`        | `string`  | Shelf title displayed to users.                                                                                | -             |
| `campaignVrn`  | `string`  | VRN identifier for the recommendation campaign.                                                                                | -             |
| `displayTitle` | `boolean` | Whether to show the shelf title (`true`) or hide it (`false`).                                                                            | `true`        |
| `itemsContext` | `array`   | Context source for items in the recommendation request (`PDP` or `CART`). Useful for enabling shelves on the cart page with `CROSS_SELL`. | `['PDP']`     |

## Recommendation strategies

Below are the available recommendation strategies that can be used to fetch product suggestions:

| `strategy`          | Description                                                                               | Pages           |
| ------------------- | ----------------------------------------------------------------------------------------- | --------------- |
| `TOP_ITEMS`         | Returns the most bought products in the store.                                            | Any             |
| `PERSONALIZED`      | Returns recommended products based on the last products clicked by the user in the store. | Any             |
| `LAST_SEEN`         | Returns recommended products based on the last products viewed by the user in the store.  | Any             |
| `CROSS_SELL`        | Returns complementary products related to the current product or the items in the cart.   | Any             |
| `VISUAL_SIMILARITY` | Returns products considered visually similar to the current product.                      | `store.product` |
| `SIMILAR_ITEMS`     | Returns products considered most similar to the current product.                          | `store.product` |

## Troubleshooting

Check if others have encountered similar issues [here](https://github.com/vtex-apps/recommendation-shelf/issues). Feel free to [open issues](https://github.com/vtex-apps/recommendation-shelf/issues/new) or contribute with pull requests.

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```