[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Failure/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Failure extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="failure"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <path
            d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.5 10.1L10.1 11.5L8 9.4L5.9 11.5L4.5 10.1L6.6 8L4.5 5.9L5.9 4.5L8 6.6L10.1 4.5L11.5 5.9L9.4 8L11.5 10.1Z"
            fill={color}
          />
        ) : (
          <>
            <path
              d="M5.6 0L3.5 2.1L1.4 0L0 1.4L2.1 3.5L0 5.6L1.4 7L3.5 4.9L5.6 7L7 5.6L4.9 3.5L7 1.4L5.6 0Z"
              transform="translate(4.5 4.5)"
              fill={color}
            />
            <path
              d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14Z"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Failure.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Failure.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Failure

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Download/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 16,
}

class Download extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="download" size={newSize} block={block} viewBox="0 0 14 16">
        <path
          d="M6.4 12C6.7 12 6.9 11.9 7.1 11.7L12.8 6L11.4 4.6L7.4 8.6V0H5.4V8.6L1.4 4.6L2.38419e-08 6L5.7 11.7C5.9 11.9 6.1 12 6.4 12Z"
          transform="translate(0.599976)"
          fill={color}
        />
        <path d="M14 0H0V2H14V0Z" transform="translate(0 14)" fill={color} />
      </Svg>
    )
  }
}

Download.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Download.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Download

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/CaretLeft/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 10,
  height: 14,
}

class CaretLeft extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="caret-left" size={newSize} block={block} viewBox="0 0 10 14">
        <path
          d="M7.72356 8.48154C7.32958 8.89452 6.67042 8.89452 6.27644 8.48154L0 1.90235L1.81481 0L7 5.43529L12.1852 0L14 1.90235L7.72356 8.48154Z"
          transform="translate(9.23999) rotate(90)"
          fill={color}
        />
      </Svg>
    )
  }
}

CaretLeft.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

CaretLeft.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default CaretLeft

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Bold/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Bold extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="bold"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <path
          fill={color}
          d="M43.06677,30.83765v-0.24634c5.05432-1.65662,10.10852-6.04956,10.10852-13.92456 C53.17529,8.4646,49.19739,2,35.02649,2H8v6l3.26491,1.0883C12.89828,9.63276,14,11.16131,14,12.88304v38.23392 c0,1.72172-1.10172,3.25028-2.73509,3.79473L8,56v6h26.28088c13.01013,0,22.62268-4.22766,22.62268-16.49219 C56.90356,37.22119,52.51404,31.91736,43.06677,30.83765z M26,10h7c4.97058,0,9,4.02942,9,9s-4.02942,9-9,9h-7V10z M35,54h-9V36h9 c4.97058,0,9,4.02942,9,9S39.97058,54,35,54z"
        />
      </Svg>
    )
  }
}

Bold.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Bold.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Bold

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/CaretRight/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 10,
  height: 14,
}

class CaretRight extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="caret-right" size={newSize} block={block} viewBox="0 0 10 14">
        <path
          d="M7.72356 8.48154C7.32958 8.89452 6.67042 8.89452 6.27644 8.48154L0 1.90235L1.81481 0L7 5.43529L12.1852 0L14 1.90235L7.72356 8.48154Z"
          transform="translate(0 14) rotate(-90)"
          fill={color}
        />
      </Svg>
    )
  }
}

CaretRight.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

CaretRight.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default CaretRight

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/ShoppingCart/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 44,
  height: 44,
}

class ShoppingCart extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="shopping-cart"
        size={newSize}
        block={block}
        viewBox="0 0 32 30">
        <path
          d="M8 30C9.65685 30 11 28.6569 11 27C11 25.3431 9.65685 24 8 24C6.34315 24 5 25.3431 5 27C5 28.6569 6.34315 30 8 30Z"
          fill={color}
        />
        <path
          d="M27 30C28.6569 30 30 28.6569 30 27C30 25.3431 28.6569 24 27 24C25.3431 24 24 25.3431 24 27C24 28.6569 25.3431 30 27 30Z"
          fill={color}
        />
        <path
          d="M28 22H7C6.505 22 6.084 21.638 6.011 21.148L3.139 2H0V0H4C4.495 0 4.916 0.362 4.989 0.852L5.611 5H31C31.3 5 31.583 5.134 31.773 5.366C31.963 5.597 32.039 5.902 31.98 6.196L28.98 21.196C28.887 21.664 28.477 22 28 22Z"
          fill={color}
        />
      </Svg>
    )
  }
}

ShoppingCart.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

ShoppingCart.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ShoppingCart

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Copy/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 18,
}

class Copy extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="copy" size={newSize} block={block} viewBox="0 0 18 18">
        <path
          d="M6.4 0H9.2C10.3046 0 11.2 0.895431 11.2 2V9.2C11.2 10.3046 10.3046 11.2 9.2 11.2H2C0.89543 11.2 0 10.3046 0 9.2V6.4"
          transform="translate(5.80005 12.2) rotate(-90)"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
        <path
          d="M9.2 0H2C0.895431 0 0 0.89543 0 2V9.2C0 10.3046 0.89543 11.2 2 11.2H9.2C10.3046 11.2 11.2 10.3046 11.2 9.2V2C11.2 0.895431 10.3046 0 9.2 0Z"
          transform="translate(1 17) rotate(-90)"
          stroke={color}
          strokeWidth="2"
          strokeMiterlimit="10"
          strokeLinecap="square"
        />
      </Svg>
    )
  }
}

Copy.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Copy.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Copy

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/ExternalLink/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class ExternalLink extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="external-link" size={newSize} block={block}>
        <path
          d="M8.7 0H1.7V2H6.3L1.90735e-07 8.3L1.4 9.7L7.7 3.4V8H9.7V1C9.7 0.4 9.3 0 8.7 0Z"
          transform="translate(6.30005)"
          fill={color}
        />
        <path
          d="M14 15H1C0.4 15 0 14.6 0 14V1C0 0.4 0.4 0 1 0H5V2H2V13H13V10H15V14C15 14.6 14.6 15 14 15Z"
          transform="translate(0 1)"
          fill={color}
        />
      </Svg>
    )
  }
}

ExternalLink.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

ExternalLink.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ExternalLink

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Text/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Text extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="text"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <path
          fill={color}
          d="M58,2H6C5.448,2,5,2.448,5,3v12c0,0.552,0.448,1,1,1h2c0.265,0,0.52-0.105,0.707-0.293L14.414,10H27v42.586 l-5.707,5.707C21.105,58.48,21,58.735,21,59v2c0,0.552,0.448,1,1,1h20c0.552,0,1-0.448,1-1v-2c0-0.265-0.105-0.52-0.293-0.707 L37,52.586V10h12.465l3.703,5.555C53.354,15.833,53.666,16,54,16h4c0.552,0,1-0.448,1-1V3C59,2.448,58.552,2,58,2z"
        />
      </Svg>
    )
  }
}

Text.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Text.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Text

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Columns/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBaseDimensions = {
  width: 16,
  height: 18,
}

class Columns extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBaseDimensions, size)
    return (
      <Svg name="columns" size={newSize} block={block}>
        <path d="M1 4H15V15H1V4Z" stroke={color} strokeWidth="2" />
        <path
          d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V5H0V1Z"
          fill={color}
        />
        <line
          x1="8.11133"
          y1="4.70586"
          x2="8.11133"
          y2="14.1176"
          stroke={color}
          strokeWidth="2"
        />
      </Svg>
    )
  }
}

Columns.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Columns.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Columns

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/TableFilter/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 13,
  height: 12,
}

class TableFilter extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="table-filter" size={newSize} block={block} viewBox="0 0 13 12">
        <path
          d="M10.7042 0H8.56339V2H6.42255V4H12.8451V2H10.7042V0Z"
          fill={color}
        />
        <path d="M10.7042 5H8.56335V12H10.7042V5Z" fill={color} />
        <path d="M0 10H2.14085V12H4.28169V10H6.42253V8H0V10Z" fill={color} />
        <path d="M4.28171 0H2.14087V7H4.28171V0Z" fill={color} />
      </Svg>
    )
  }
}

TableFilter.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

TableFilter.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default TableFilter

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Filter/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

class Filter extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const iconBase = {
      width: solid ? 16 : 18,
      height: solid ? 16 : 21,
    }
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="filter"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}
        viewBox={solid ? '0 0 16 18' : '0 0 18 21'}>
        {solid ? (
          <path
            d="M15 0H1C0.4 0 0 0.4 0 1V3C0 3.3 0.1 3.6 0.4 3.8L6 8.5V15C6 15.4 6.2 15.8 6.6 15.9C6.7 16 6.9 16 7 16C7.3 16 7.5 15.9 7.7 15.7L9.7 13.7C9.9 13.5 10 13.3 10 13V8.5L15.6 3.8C15.9 3.6 16 3.3 16 3V1C16 0.4 15.6 0 15 0Z"
            fill={color}
          />
        ) : (
          <path
            d="M16 3.16441C16 3.45327 15.8751 3.72803 15.6574 3.91794L10.1204 8.74873C9.90269 8.93864 9.77778 9.21339 9.77778 9.50226V16.5773C9.77778 16.9536 9.56663 17.2979 9.23135 17.4686L7.67579 18.2602C7.0105 18.5988 6.22222 18.1155 6.22222 17.369V9.50226C6.22222 9.21339 6.09731 8.93864 5.87964 8.74873L0.342585 3.91794C0.124915 3.72803 0 3.45327 0 3.16441V1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V3.16441Z"
            transform="translate(1 1)"
            stroke={color}
            strokeWidth="2"
            strokeMiterlimit="10"
            strokeLinecap="square"
          />
        )}
      </Svg>
    )
  }
}

Filter.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Filter.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Filter

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Save/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Save extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="save" size={newSize} block={block}>
        <path
          d="M11.7 0.3C11.5 0.1 11.3 0 11 0H10V3C10 3.6 9.6 4 9 4H4C3.4 4 3 3.6 3 3V0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H15C15.6 16 16 15.6 16 15V5C16 4.7 15.9 4.5 15.7 4.3L11.7 0.3ZM13 14H3V11C3 10.4 3.4 10 4 10H12C12.6 10 13 10.4 13 11V14Z"
          fill={color}
        />
        <path d="M2 0H0V3H2V0Z" transform="translate(7)" fill={color} />
      </Svg>
    )
  }
}

Save.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Save.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Save

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Check/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 12,
  height: 12,
}

class Check extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="check" size={newSize} block={block} viewBox="0 0 12 12">
        <path
          d="M10.8 4.4L9.4 3L5.4 7L3.4 5L2 6.4L5.4 9.8L10.8 4.4Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Check.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Check.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Check

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Help/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Help extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="help"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <path
            d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 13C7.4 13 7 12.6 7 12C7 11.4 7.4 11 8 11C8.6 11 9 11.4 9 12C9 12.6 8.6 13 8 13ZM9.5 8.4C9 8.7 9 8.8 9 9V10H7V9C7 7.7 7.8 7.1 8.4 6.7C8.9 6.4 9 6.3 9 6C9 5.4 8.6 5 8 5C7.6 5 7.3 5.2 7.1 5.5L6.6 6.4L4.9 5.4L5.4 4.5C5.9 3.6 6.9 3 8 3C9.7 3 11 4.3 11 6C11 7.4 10.1 8 9.5 8.4Z"
            fill={color}
          />
        ) : (
          <>
            <path
              d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14Z"
              fill={color}
            />
            <path
              d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2Z"
              transform="translate(7 11)"
              fill={color}
            />
            <path
              d="M2.2 2.5C2.4 2.2 2.7 2 3.1 2C3.7 2 4.1 2.4 4.1 3C4.1 3.3 4 3.4 3.5 3.7C2.9 4.1 2.1 4.7 2.1 6V7H4.1V6C4.1 5.8 4.1 5.7 4.6 5.4C5.2 5 6.1 4.4 6.1 3C6.1 1.3 4.8 0 3.1 0C2 0 1 0.6 0.5 1.5L9.53674e-08 2.4L1.7 3.4L2.2 2.5Z"
              transform="translate(4.90002 3)"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Help.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Help.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Help

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Clock/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Clock extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="clock" size={newSize} block={block}>
        <path
          d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14Z"
          fill={color}
        />
        <path d="M2 0H0V5H5V3H2V0Z" transform="translate(7 4)" fill={color} />
      </Svg>
    )
  }
}

Clock.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Clock.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Clock

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Upload/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 16,
}

class Upload extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="upload" size={newSize} block={block} viewBox="0 0 14 16">
        <path
          d="M5.4 3.4V12H7.4V3.4L11.4 7.4L12.8 6L7.1 0.3C6.7 -0.1 6.1 -0.1 5.7 0.3L2.38419e-08 6L1.4 7.4L5.4 3.4Z"
          transform="translate(0.599976)"
          fill={color}
        />
        <path d="M14 0H0V2H14V0Z" transform="translate(0 14)" fill={color} />
      </Svg>
    )
  }
}

Upload.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Upload.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Upload

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/UnorderedList/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class UnorderedList extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="unorderedList"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <circle fill={color} cx="8" cy="12" r="6" />
        <circle fill={color} cx="8" cy="32" r="6" />
        <circle fill={color} cx="8" cy="52" r="6" />
        <path d="M61,13H21a1,1,0,0,1,0-2H61a1,1,0,0,1,0,2Z" fill={color} />
        <path d="M46,33H21a1,1,0,0,1,0-2H46a1,1,0,0,1,0,2Z" fill={color} />
        <path d="M61,53H21a1,1,0,0,1,0-2H61a1,1,0,0,1,0,2Z" fill={color} />
      </Svg>
    )
  }
}

UnorderedList.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

UnorderedList.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default UnorderedList

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Plus/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 20,
  height: 20,
}

class Plus extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="plus"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}
        viewBox="0 0 20 20">
        {solid ? (
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M13.6569 13.6569C16.7811 10.5326 16.7811 5.46735 13.6569 2.34316C10.5327 -0.781032 5.46739 -0.781075 2.34316 2.34316C-0.781075 5.46739 -0.781032 10.5327 2.34316 13.6569C5.46735 16.7811 10.5326 16.7811 13.6569 13.6569ZM8.00006 6.58567L10.8285 3.75724L12.2427 5.17159L9.41423 8.00001L12.2427 10.8284L10.8285 12.2425L8.00001 9.41423L5.15726 12.257L3.74309 10.8426L6.58576 7.99997L3.74313 5.15734L5.15747 3.74309L8.00006 6.58567Z"
            transform="translate(10.1006 -1.31372) rotate(45)"
            fill={color}
          />
        ) : (
          <>
            <circle cx="8" cy="8" r="7" stroke="#3F3F40" strokeWidth="2" />
            <path
              d="M4.5 7H7V4.5C7 4.22386 7.22386 4 7.5 4H8.5C8.77614 4 9 4.22386 9 4.5V7H11.5C11.7761 7 12 7.22386 12 7.5V8.5C12 8.77614 11.7761 9 11.5 9H9V11.5C9 11.7761 8.77614 12 8.5 12H7.5C7.22386 12 7 11.7761 7 11.5V9H4.5C4.22386 9 4 8.77614 4 8.5V7.5C4 7.22386 4.22386 7 4.5 7Z"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Plus.defaultProps = {
  color: 'currentColor',
  size: 20,
  solid: false,
  block: false,
}

Plus.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Plus

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/ArrowDown/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 17,
  height: 16,
}

class ArrowDown extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="arrow-down" size={newSize} block={block} viewBox="0 0 17 16">
        <path
          d="M8.39162 16C8.78498 16 9.04721 15.8667 9.30945 15.6L16.7832 8L14.9476 6.13333L9.70281 11.4667V0H7.08043V11.4667L1.83567 6.13333L3.12612e-08 8L7.47379 15.6C7.73602 15.8667 7.99826 16 8.39162 16Z"
          fill={color}
        />
      </Svg>
    )
  }
}

ArrowDown.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

ArrowDown.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ArrowDown

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/icon/Grid/index.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Grid extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="grid" size={newSize} block={block}>
        <path
          d="M6 0H1C0.4 0 0 0.4 0 1V6C0 6.6 0.4 7 1 7H6C6.6 7 7 6.6 7 6V1C7 0.4 6.6 0 6 0Z"
          fill={color}
        />
        <path
          d="M15 0H10C9.4 0 9 0.4 9 1V6C9 6.6 9.4 7 10 7H15C15.6 7 16 6.6 16 6V1C16 0.4 15.6 0 15 0Z"
          fill={color}
        />
        <path
          d="M6 9H1C0.4 9 0 9.4 0 10V15C0 15.6 0.4 16 1 16H6C6.6 16 7 15.6 7 15V10C7 9.4 6.6 9 6 9Z"
          fill={color}
        />
        <path
          d="M15 9H10C9.4 9 9 9.4 9 10V15C9 15.6 9.4 16 10 16H15C15.6 16 16 15.6 16 15V10C16 9.4 15.6 9 15 9Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Grid.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Grid.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Grid

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BarChart/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import {
  BarChart as BarChartBase,
  Bar,
  CartesianGrid,
  XAxis,
  YAxis,
  ResponsiveContainer,
  Tooltip,
} from 'recharts'
import PropTypes from 'prop-types'

import { getChartDefaultProps, getBarDefaultProps } from '../helpers'
import { BAR_GAP, Layout, chartDefaultConfig } from './constants'
import { colors, tooltipProps } from '../commonProps'

type Props = {
  barProps: BarProps
}

const BarChart: FC<Props & BaseChartProps> = ({
  config,
  xAxisKey,
  data,
  yAxisKey,
  barProps,
}) => {
  const { configs } = getChartDefaultProps(config, chartDefaultConfig)
  const { barConfigs } = getBarDefaultProps(barProps)
  const dataKey = barConfigs.layout == Layout.HORIZONTAL ? yAxisKey : xAxisKey

  return (
    <ResponsiveContainer {...configs.container}>
      <BarChartBase data={data} barCategoryGap={BAR_GAP} {...barConfigs}>
        <CartesianGrid {...configs.grid} />
        <XAxis dataKey={xAxisKey} dy={-5} {...configs.xAxis} />
        <YAxis dataKey={yAxisKey} dy={10} {...configs.yAxis} />
        <Tooltip {...tooltipProps} />
        <Bar dataKey={dataKey} fill={colors[1]} radius={[3, 3, 0, 0]} />
      </BarChartBase>
    </ResponsiveContainer>
  )
}

BarChart.propTypes = {
  /** The source data, in which each element is an object. */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /** The key of x-axis which is corresponding to the data. */
  xAxisKey: PropTypes.string,

  /** The key of y-axis which is corresponding to the data. */
  yAxisKey: PropTypes.string,

  /** The schema prop changes some styles of the chart.
   * This prop should be given as an object. Check an example [here](/#/Components/Charts/LineChart?id=chart-config)*/
  config: PropTypes.shape({
    xAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    yAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    container: PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
    grid: PropTypes.shape({
      horizontal: PropTypes.bool,
      vertical: PropTypes.bool,
    }),
  }),

  /** An object that will change specific bar props, like the orientation */
  barProps: PropTypes.object,
}

export default BarChart

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BarChart/sampleData.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
const data = [
  {
    name: 'Home Page',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Product Page',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Search Page',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Skus Page',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Admin Page',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
]

export default data

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BarChart/README.md from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```markdown
#### The bar charts shows the data as rectangular bars. They express quantities through a bar's length, using a common baseline. The bar charts are more effective to compare discrete categories, change over time and make a ranking.

```js
const data = require('./sampleData').default;

  <BarChart
    data={data}
    xAxisKey='name'
    yAxisKey='pv'
    config={{
      container: { height: '100%', width: '100%'}
    }}
  />
```

### 👍 Dos
- Start at the zero baseline.

### 👎 Don'ts
- Rotate bar labels
- Use bar chart like an histogram

### Orientation
The bars can be plotted horizontally or vertically. To do this, use the prop `barProps` and set the `layout` key, according do you want. In recharts, the things are switched, so take careful with this.

- Horizontal: `{layout: 'vertical'}`
```js
const data = require('./sampleData').default;
const CustomizedLabel = (props) => {
  const {
    x, y, fill, payload,
  } = props
  const value = (typeof payload.value) == 'string' ?
  payload.value.split(' ')[0]: payload.value

  return (
    <text x={x/16} y={y} fill={fill} fontSize={14}>
      {value}
    </text>
  )
};
  <BarChart
    data={data}
    xAxisKey='pv'
    yAxisKey='name'
    config={{
      container: { height: '60%', width: '60%'},
      xAxis: {type: 'number'},
      yAxis: {type: 'category', tick: <CustomizedLabel/>}
    }}
    barProps={{layout: 'vertical'}}
  />
```

- Vertical: `{layout: 'horizontal'}`
```js
const data = require('./sampleData').default;

  <BarChart
    data={data}
    xAxisKey='name'
    yAxisKey='pv'
    config={{
      container: {height: '60%', width: '60%'},
      xAxis: {type: 'category'},
      yAxis: {type: 'number'}
    }}
    barProps={{layout: 'horizontal'}}
  />

```
**OBS:** To correctly change the orientation, set both axis types.
For default, xAxis is a `category` and yAxis is a `number`

```js static
  <BarChart
    data={data}
    xAxisKey='name'
    yAxisKey='pv'
    config={{
      xAxis: {type: 'category'},
      yAxis: {type: 'number'}
    }}
    barProps={{layout: 'horizontal'}}
  />
```
### Chart Config

You also can change the axis, grid and the size of the container like the `LineChart`. Follow the same instructions, described [here](/#/Components/Charts/LineChart?id=chart-config).

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BarChart/constants.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const BAR_GAP = '20%'

export enum Layout {
  VERTICAL = 'vertical',
  HORIZONTAL = 'horizontal',
}

export const defaultProps: DefaultBarProps = {
  layout: Layout.HORIZONTAL,
}

export const chartDefaultConfig: ChartConfig = {
  xAxis: {
    axisLine: true,
    tickLine: false,
    tickMargin: 5,
    type: 'category',
    tick: true,
    hide: false,
  },
  yAxis: {
    axisLine: true,
    tickLine: false,
    tickMargin: 10,
    type: 'number',
    tick: true,
    hide: false,
  },
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BubbleChart/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import PropTypes from 'prop-types'

import ScatterChart from '../ScatterChart'

const BubbleChart: FC<BaseChartProps> = props => <ScatterChart {...props} />

BubbleChart.propTypes = {
  /** The source data, in which each element is an object. */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /** The config prop changes some styles of the chart. This prop should be given as an object.*/
  config: PropTypes.shape({
    xAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    yAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    container: PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
    grid: PropTypes.shape({
      horizontal: PropTypes.bool,
      vertical: PropTypes.bool,
    }),
  }),

  /** The key of x-axis which is corresponding to the data. */
  xAxisKey: PropTypes.string.isRequired,

  /** The keys of y-axis which is corresponding to the data. */
  yAxisKey: PropTypes.string.isRequired,

  /** The key of y-axis which is corresponding to the data, it measures size of dot. */
  zAxisKey: PropTypes.string.isRequired,
}

export default BubbleChart

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/BubbleChart/README.md from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```markdown
#### The Bubble Charts shows the data as points like the Scatter Plot. However, unlike a Scatter Plot, each plotted point has a third measure representing the area of its circle. They are effective to compare and show the relationships between the circles, by the use of positioning and proportions.

```js
const data = [
  { x: 100, y: 200, z: 140 },
  { x: 120, y: 100, z: 270 },
  { x: 170, y: 300, z: 100 },
  { x: 140, y: 250, z: 80 },
  { x: 150, y: 500, z: 300 },
  { x: 110, y: 280, z: 1400 },
];

<BubbleChart
  config={{container: {width: '100%', height: '100%'}}}
  data={data}
  xAxisKey='x'
  yAxisKey='y'
  zAxisKey='z'
/>
```

### 👍 Dos
- Use legends to show how different bubble sizes correspond with values of your third variable.

### 👎 Don'ts
- Don't use a bubble chart with large datasets, too many bubbles can make the chart hard to read.

### Chart Config

You also can change the axis, grid, and the size of the container like the `LineChart`. Follow the same instructions, described [here](/#/Components/Charts/LineChart?id=chart-config).
```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/LineChart/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import zipWith from 'lodash/zipWith'
import curry from 'lodash/curry'
import {
  Line,
  LineChart as LineChartBase,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  ResponsiveContainer,
  TooltipFormatter,
} from 'recharts'
import PropTypes from 'prop-types'
import uuid from 'uuid'

import { colors, tooltipProps } from '../commonProps'
import { getChartDefaultProps, getLineDefaultProps } from '../helpers'

interface Props {
  tooltipFormatter: TooltipFormatter
  lineProps: LineProps
}

const renderLine = (lineConfigs, key, color) => (
  <Line key={uuid()} dataKey={key} stroke={color} {...lineConfigs} />
)

const LineChart: FC<Props & BaseChartProps> = ({
  data,
  dataKeys,
  xAxisKey,
  config,
  tooltipFormatter,
  lineProps,
}) => {
  const { configs } = getChartDefaultProps(config)
  const { lineConfigs } = getLineDefaultProps(lineProps)

  return (
    <ResponsiveContainer {...configs.container}>
      <LineChartBase data={data}>
        <CartesianGrid {...configs.grid} />
        <XAxis dataKey={xAxisKey} {...configs.xAxis} />
        <YAxis {...configs.yAxis} />
        <Tooltip formatter={tooltipFormatter} {...tooltipProps} />
        {zipWith(dataKeys, colors, curry(renderLine)(lineConfigs))}
      </LineChartBase>
    </ResponsiveContainer>
  )
}

LineChart.propTypes = {
  /** The source data, in which each element is an object. */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /** The keys or getter of a group of data which should be unique in a LineChart. */
  dataKeys: PropTypes.arrayOf(PropTypes.string).isRequired,

  /** The key of x-axis which is corresponding to the data. */
  xAxisKey: PropTypes.string.isRequired,

  /** The formatter function of value in tooltip. If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "key" */
  tooltipFormatter: PropTypes.func,

  /** The config prop changes some styles of the chart. This prop should be given as an object.*/
  config: PropTypes.shape({
    xAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    yAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    container: PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
    grid: PropTypes.shape({
      horizontal: PropTypes.bool,
      vertical: PropTypes.bool,
    }),
  }),

  /** The interpolation defines how data points should be connected when creating a path.*/
  lineProps: PropTypes.object,
}

export default LineChart

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/LineChart/sampleData.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
const data = [
  {
    hour: '0h',
    customers: 4000,
    orders: 2400,
    totalSpent: 2400,
  },
  {
    hour: '1h',
    customers: 3000,
    orders: 1398,
    totalSpent: 2210,
  },
  {
    hour: '2h',
    customers: 2000,
    orders: 9800,
    totalSpent: 2290,
  },
  {
    hour: '3h',
    customers: 2780,
    orders: 3908,
    totalSpent: 2000,
  },
  {
    hour: '4h',
    customers: 1890,
    orders: 4800,
    totalSpent: 2181,
  },
  {
    hour: '5h',
    customers: 2390,
    orders: 3800,
    totalSpent: 2500,
  },
  {
    hour: '6h',
    customers: 3490,
    orders: 4300,
    totalSpent: 2100,
  },
]

export default data

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/LineChart/multilineSample.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
const data = [
  {
    name: 'a',
    uv: 4000,
    pv: 2400,
    amt: 2400,
    gte: 3000,
    yaw: 8000,
  },
  {
    name: 'b',
    uv: 3000,
    pv: 1398,
    amt: 2210,
    gte: 1000,
    yaw: 1200,
  },
  {
    name: 'c',
    uv: 2000,
    pv: 9800,
    amt: 2290,
    gte: 4150,
    yaw: 3500,
  },
  {
    name: 'd',
    uv: 2780,
    pv: 3908,
    amt: 2000,
    gte: 2250,
    yaw: 7000,
  },
  {
    name: 'e',
    uv: 1890,
    pv: 4800,
    amt: 2181,
    gte: 2160,
    yaw: 8456,
  },
  {
    name: 'g',
    uv: 3490,
    pv: 4300,
    amt: 2100,
    gte: 2000,
    yaw: 6570,
  },
]

export default data

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/LineChart/README.md from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```markdown
#### The line chart shows the data as a data points connected by a line. They are useful to analyze changes over the time, comparisons, and trends.

```js
  const sampleData = require('./sampleData').default;
  const keys = ['customers', 'orders', 'totalSpent'];
  const mapper = {
    'customers': 'Customers',
    'orders': 'Orders',
    'totalSpent': 'Total Spent'
  }
  const formatter = (value, name) => {
    if(name == 'totalSpent')
        value = `$${value}`
    return [value, mapper[name]]

  }
  <LineChart
    data={sampleData}
    dataKeys={keys}
    xAxisKey='hour'
    tooltipFormatter={formatter}
  />
```

### 👍 Dos
- Use grids to help your audience trace their finger
from the data to the axis.
- Use axis labels clearly and concise, so, you might be want to abbreviate sometimes.

### 👎 Don'ts
-  Avoid spaghetti chart(don't use more than 4 lines)
```jsx noeditor
const sampleData = require('./multilineSample').default;
const keys = ['uv', 'pv', 'amt', 'gte', 'yaw'];
const customConfig = {container: { height: '40%', width: '40%'}};
<LineChart
  data={sampleData}
  dataKeys={keys}
  xAxisKey='name'
  config={customConfig}
/>
```
- Avoid the grid from visually competing with the data.

# Chart config
The config prop is common to all the charts, and defines the style of the chart. This should be given as an object with styles defined for `axis`, `grid`, `container`, according to your needs.

```js noeditor static
const config = {
  container:{
    height: 300,
    width: '100%'
  },
  xAxis: {
    axisLine: false,
    tickLine: false,
    hide: false
  },
  yAxis: {
    axisLine: false,
    tickLine: false,
    hide: false
  },
  grid: {
    horizontal: false,
    vertical: false,
  }
};
```

#### xAxis or yAxis
This axis property is responsible to change the visual appearance of the axis in the chart.

- `tickLine`: If set true, axis tick lines will be drawn.
- `axisLine`: If set true, axis line will be drawn.
- `hide`: If set true, the axis does not display in the chart.
- `tick`: Renders a label of the axis. If you pass your component instance, it will receive
the props needed to render the label, like the `x` and `y` position of the tick in the line axis, the `payload` which represents the data
and the `fill` the label color. As you can see below:

```js
const CustomizedLabel = (props) => {
  const {
    x, y, fill, payload,
  } = props

  return (<text x={x} y={y} fill={fill} textAnchor="middle">{`${payload.value.toUpperCase()}`}</text>)
};

const sampleData = require('./sampleData').default;
const keys = ['customers'];

<LineChart
  data={sampleData}
  dataKeys={keys}
  xAxisKey='hour'
  config={{
    xAxis:{tick: <CustomizedLabel />}
  }}
/>
```

#### grid
The grid property is responsible to show a grid inside the chart.

- `horizontal`: If set to `true`, horizontal grid lines will be drawn.
- `vertical`: If set to `true`, vertical grid lines will be drawn.

```js
const sampleData = require('./sampleData').default;
const keys = ['customers'];

<LineChart
  data={sampleData}
  dataKeys={keys}
  xAxisKey='hour'
  config={{
    xAxis:{tick: true},
    grid: {vertical: true, horizontal: true}
  }}
/>
```

#### container
The container property is responsible to define the size of the box that will render the chart.

- `height`: The percentage value of the chart's width or a fixed width.
- `width`: The percentage value of the chart's width or a fixed height.

```js
const sampleData = require('./sampleData').default;
const keys = ['customers'];

<LineChart
  data={sampleData}
  dataKeys={keys}
  xAxisKey='hour'
  config={{
    xAxis: {tick: true},
    grid: {vertical: false, horizontal: false}
  }}
/>
```

### Line props

- `type`: The interpolation type of line.
```js
const sampleData = require('./sampleData').default;
const keys = ['customers'];

const Dropdown = require('../../Dropdown/index.js').default;
const options = [
  { value: 'basis', label: 'Basis' },
  { value: 'basisClosed', label: 'Basis Closed' },
  { value: 'basisOpen', label: 'Basis Open' },
  { value: 'linear', label: 'Linear' },
  { value: 'linearClosed', label: 'Linear Closed' },
  { value: 'natural', label: 'Natural' },
  { value: 'monotoneX', label: 'MonotoneX' },
  { value: 'monotoneY', label: 'MonotoneY' },
  { value: 'monotone', label: 'Monotone' },
  { value: 'step', label: 'Step' },
  { value: 'stepBefore', label: 'Step Before' },
  { value: 'stepAfter', label: 'Step After' },
]

class InterpolationExample extends React.Component {
  constructor() {
    super();
    this.state = {
      interpolation: "monotone",
    };
  }
  render() {
    return (

        <Dropdown
          label="Interpolation"
          size="small"
          options={options}
          value={this.state.interpolation}
          onChange={(event) => {
            this.setState({interpolation: event.target.value})
          }}
        />

        <LineChart
          data={sampleData}
          dataKeys={keys}
          xAxisKey='hour'
          config={{
            grid: {vertical: false, horizontal: false}
          }}
          lineProps={{type: this.state.interpolation}}
        />

    )
  }
}

<InterpolationExample/>
```

### Formatting values on the tooltip

The formatter prop takes a `function` which will be used to render each content of tooltip. If you want to customize the content of your tooltip, make sure that your function follows this signature:

```js noeditor static
const mapper = {
  'customers': 'Customers',
  'orders': 'Orders',
  'totalSpent': 'Total Spent'
}

const formatter = (value, name) => {
  if(name == 'totalSpent')
    value = `$${value}`
  return [value, mapper[name]]
}

const formatter2 = (value, name) => {
  return mapper[name]
}
```

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/LineChart/constants.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const defaultProps: DefaultLineProps = {
  type: 'monotone',
  strokeWidth: 3,
  dot: false,
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/ScatterChart/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import {
  ScatterChart as ScatterChartBase,
  XAxis,
  YAxis,
  Tooltip,
  Scatter,
  CartesianGrid,
  ResponsiveContainer,
  ZAxis,
} from 'recharts'
import PropTypes from 'prop-types'
import uuid from 'uuid'

import { commonDefaultProps } from './constants'
import { getChartDefaultProps, getRangeOfZAxis } from '../helpers'
import { colors } from '../commonProps'

const CustomTooltip = props => {
  return props.payload.map(item => (
    <p key={uuid()}>{`${item.dataKey}: ${item.value}`}</p>
  ))
}

const ScatterChart: FC<BaseChartProps> = ({
  data,
  config,
  xAxisKey,
  yAxisKey,
  zAxisKey,
}) => {
  const { configs } = getChartDefaultProps(config, commonDefaultProps)

  return (
    <ResponsiveContainer {...configs.container}>
      <ScatterChartBase data={data}>
        <CartesianGrid {...configs.grid} />
        <XAxis dataKey={xAxisKey} {...configs.xAxis} />
        <YAxis dataKey={yAxisKey} {...configs.yAxis} />
        {zAxisKey && (
          <ZAxis dataKey={zAxisKey} range={getRangeOfZAxis(zAxisKey, data)} />
        )}
        <Tooltip cursor={false} content={<CustomTooltip />} />
        <Scatter fill={colors[0]} />
      </ScatterChartBase>
    </ResponsiveContainer>
  )
}

ScatterChart.propTypes = {
  /** The source data, in which each element is an object. */
  data: PropTypes.arrayOf(PropTypes.object).isRequired,

  /** The config prop changes some styles of the chart. This prop should be given as an object.*/
  config: PropTypes.shape({
    xAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    yAxis: PropTypes.shape({
      axisLine: PropTypes.bool,
      tickLine: PropTypes.bool,
      tick: PropTypes.bool,
      hide: PropTypes.bool,
    }),
    container: PropTypes.shape({
      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
    grid: PropTypes.shape({
      horizontal: PropTypes.bool,
      vertical: PropTypes.bool,
    }),
  }),

  /** The key of x-axis which is corresponding to the data. */
  xAxisKey: PropTypes.string.isRequired,

  /** The keys of y-axis which is corresponding to the data. */
  yAxisKey: PropTypes.string.isRequired,

  /** The keys or getter of a group of data which should be unique in a ScatterChart. */
  dataKeys: PropTypes.arrayOf(PropTypes.string).isRequired,

  /** The key of y-axis which is corresponding to the data, it measures size of dot. */
  zAxisKey: PropTypes.string.isRequired,
}

export default ScatterChart

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/ScatterChart/README.md from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```markdown
#### The Scatter charts shows the data as a collection of points, they are useful to detect if there's a relationship or correlation of multiple variables.

```js
const data = [
  { x: 100, y: 200, z: 200 },
  { x: 120, y: 100, z: 260 },
  { x: 170, y: 300, z: 400 },
  { x: 140, y: 250, z: 280 },
  { x: 150, y: 400, z: 500 },
  { x: 110, y: 280, z: 200 },
];

<ScatterChart
  config={{ container: { width: '100%', height: '100%' } }}
  data={data}
  xAxisKey='x'
  yAxisKey='y'
/>
```

### Chart Config

You also can change the axis, grid and the size of the container like the `LineChart`. Follow the same instructions, described [here](/#/Components/Charts/LineChart?id=chart-config).

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Charts/ScatterChart/constants.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const commonDefaultProps = {
  grid: {
    horizontal: true,
    vertical: false,
  },
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import ButtonGroup from './ButtonGroup'
import InputSearch, { InputSearchProps } from './InputSearch'
import InputAutocomplete from './InputAutocomplete'
import { AutocompleteInputProps } from '../../AutocompleteInput'
import { ORDER_CLASSNAMES, NAMESPACES } from '../constants'
import ActionBar from '../ActionBar'
import { ToolbarProvider } from './context'
import { useTestingContext } from '../context'

interface Composites {
  InputSearch: FC<InputSearchProps>
  ButtonGroup: FC
  InputAutocomplete: FC<AutocompleteInputProps>
}

const Toolbar: FC & Composites = ({ children }) => {
  const { testId } = useTestingContext()

  const toolbarTestId = `${testId}__toolbar`
  const positionFixer =
    React.Children.count(children) > 1 ? null : (
      <div className={ORDER_CLASSNAMES.TOOLBAR_CHILD.POSITION_FIXER} />
    )

  return (
    <ActionBar
      id={NAMESPACES.TOOLBAR.CONTAINER}
      testId={toolbarTestId}
      order={ORDER_CLASSNAMES.TOOLBAR}
      className="flex flex-row flex-wrap w-100 justify-between">
      <ToolbarProvider testId={toolbarTestId}>
        {children}
        {positionFixer}
      </ToolbarProvider>
    </ActionBar>
  )
}

Toolbar.InputSearch = InputSearch
Toolbar.ButtonGroup = ButtonGroup
Toolbar.InputAutocomplete = InputAutocomplete

export default Toolbar

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonGroup.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import classNames from 'classnames'

import { ButtonProps } from './Button'
import ButtonColumns, { ButtonColumnsProps } from './ButtonColumns'
import ButtonDensity, { ButtonDensityProps } from './ButtonDensity'
import ButtonDownload from './ButtonDownload'
import ButtonUpload from './ButtonUpload'
import ButtonExtraActions, {
  ButtonExtraActionsProps,
} from './ButtonExtraActions'
import ButtonNewLine, { ButtonNewLineProps } from './ButtonNewLine'
import { NAMESPACES, ORDER_CLASSNAMES } from '../constants'
import { useToolbarContext, ButtonGroupProvider } from './context'

const getButton = (type: ButtonType, props: Props) => {
  switch (type) {
    case ButtonType.Columns: {
      return (
        <span
          className={ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.COLUMNS}>
          <ButtonColumns {...(props as ButtonColumnsProps)} />
        </span>
      )
    }
    case ButtonType.Density: {
      return (
        <span
          className={ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.DENSITY}>
          <ButtonDensity {...(props as ButtonDensityProps)} />
        </span>
      )
    }
    case ButtonType.Download: {
      return (
        <span
          className={
            ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.DOWNLOAD
          }>
          <ButtonDownload {...(props as ButtonProps)} />
        </span>
      )
    }
    case ButtonType.Upload: {
      return (
        <span
          className={ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.UPLOAD}>
          <ButtonUpload {...(props as ButtonProps)} />
        </span>
      )
    }
    case ButtonType.ExtraActions: {
      return (
        <span
          className={
            ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.EXTRA_ACTIONS
          }>
          <ButtonExtraActions {...(props as ButtonExtraActionsProps)} />
        </span>
      )
    }
    case ButtonType.NewLine: {
      return (
        <span
          className={ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP_CHILD.NEWLINE}>
          <ButtonNewLine {...(props as ButtonNewLineProps)} />
        </span>
      )
    }
    default: {
      return null
    }
  }
}

const getComponent = (type: ButtonType) => {
  return (props: Props) => getButton(type, props)
}

const ButtonGroup: FC & Composites = ({ children }) => {
  const { testId } = useToolbarContext()
  const buttonGroupTestId = `${testId}__button-group`
  return (
    <div
      id={NAMESPACES.TOOLBAR.BUTTON_GROUP}
      data-testid={buttonGroupTestId}
      className={classNames(
        ORDER_CLASSNAMES.TOOLBAR_CHILD.BUTTON_GROUP,
        'flex flex-row flex-wrap items-center'
      )}>
      <ButtonGroupProvider testId={buttonGroupTestId}>
        {children}
      </ButtonGroupProvider>
    </div>
  )
}

enum ButtonType {
  Columns,
  Density,
  Download,
  Upload,
  ExtraActions,
  NewLine,
}

type Composites = {
  Columns: FC<ButtonColumnsProps>
  Density: FC<ButtonDensityProps>
  Download: FC<ButtonProps>
  Upload: FC<ButtonProps>
  ExtraActions: FC<ButtonExtraActionsProps>
  NewLine: FC<ButtonNewLineProps>
}

type Props =
  | ButtonProps
  | ButtonColumnsProps
  | ButtonDensityProps
  | ButtonExtraActionsProps
  | ButtonNewLineProps

ButtonGroup.Columns = getComponent(ButtonType.Columns)
ButtonGroup.Density = getComponent(ButtonType.Density)
ButtonGroup.Download = getComponent(ButtonType.Download)
ButtonGroup.Upload = getComponent(ButtonType.Upload)
ButtonGroup.ExtraActions = getComponent(ButtonType.ExtraActions)
ButtonGroup.NewLine = getComponent(ButtonType.NewLine)

export default ButtonGroup

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonColumns.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import Toggle from '../../Toggle/index'
import IconColumns from '../../icon/Columns/index'
import usePopoverMenu, { Item, Box, Alignment } from './PopoverMenu'
import Button, { IconSize } from './Button'
import { NAMESPACES } from '../constants'
import useTableVisibility from '../hooks/useTableVisibility'
import { useButtonGroupContext } from './context'

const COLUMNS_BOX = {
  MAX_HEIGHT: 192,
  WIDTH: 292,
  ITEM_HEIGHT: 36,
}

const ButtonColumns: FC<ButtonColumnsProps> = ({
  label,
  showAllLabel,
  hideAllLabel,
  alignMenu,
  disabled,
  visibility,
}) => {
  const { buttonRef, boxVisible, toggleBox } = usePopoverMenu()
  const { testId } = useButtonGroupContext()
  const columnsTestId = `${testId}__columns`

  const {
    hiddenColumns,
    hideAllColumns,
    showAllColumns,
    toggleColumn,
    columns,
  } = visibility

  const height = Math.min(
    columns.length * COLUMNS_BOX.ITEM_HEIGHT,
    COLUMNS_BOX.MAX_HEIGHT
  )

  const boxProps = {
    height,
    alignMenu,
    width: COLUMNS_BOX.WIDTH,
    groupActions: [
      { id: 1, label: showAllLabel, onClick: showAllColumns },
      { id: 2, label: hideAllLabel, onClick: hideAllColumns },
    ],
  }

  return (
    <Button
      id={NAMESPACES.TOOLBAR.BUTTON_COLUMNS}
      testId={columnsTestId}
      title={label}
      ref={buttonRef}
      onClick={toggleBox}
      icon={<IconColumns size={IconSize.Medium} />}
      disabled={disabled}>
      {boxVisible && (
        <Box {...boxProps} testId={columnsTestId}>
          {columns.map((column, index) => {
            const { id, title } = column
            const togglerFn = () => toggleColumn(id)
            const isVisible = !hiddenColumns.includes(id)
            return (
              <Item key={index} onClick={togglerFn}>
                {title}
                <Toggle checked={isVisible} onChange={togglerFn} />
              </Item>
            )
          })}
        </Box>
      )}
    </Button>
  )
}

export type ButtonColumnsProps = {
  label: string
  showAllLabel: string
  hideAllLabel: string
  alignMenu: Alignment
  disabled: boolean
  visibility: ReturnType<typeof useTableVisibility>
}

export default ButtonColumns

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/InputAutocomplete.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import classNames from 'classnames'

import { NAMESPACES, ORDER_CLASSNAMES } from '../constants'
import AutocompleteInput, {
  AutocompleteInputProps,
} from '../../AutocompleteInput'
import { useToolbarContext } from './context'

const InputAutocomplete: FC<AutocompleteInputProps> = props => {
  const { testId } = useToolbarContext()
  return (
    <span
      className={classNames(ORDER_CLASSNAMES.TOOLBAR_CHILD.INPUT, 'w-40')}
      id={NAMESPACES.TOOLBAR.INPUT_SEARCH}
      data-testid={`${testId}__input-autocomplete`}>
      <AutocompleteInput {...props} />
    </span>
  )
}

export default InputAutocomplete

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonNewLine.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import ActionMenu from '../../ActionMenu/index.js'
import ButtonGroup from '../../ButtonGroup/index.js'
import IconPlus from '../../icon/Plus/index.js'
import Button, {
  ButtonProps,
  ButtonVariation,
  ButtonSize,
  IconSize,
} from './Button'
import { NAMESPACES } from '../constants'
import { MenuAction } from './PopoverMenu'
import { useButtonGroupContext } from './context'

const ButtonNewLine: FC<ButtonNewLineProps> = ({ actions, ...buttonProps }) => {
  const namespace = NAMESPACES.TOOLBAR.BUTTON_NEWLINE
  const { testId } = useButtonGroupContext()
  const newlineTestId = `${testId}__new-line`
  return actions ? (
    <ButtonGroup
      buttons={[
        <Button
          isActiveOfGroup
          id={namespace}
          testId={newlineTestId}
          key={namespace}
          isGrouped
          isFirstOfGroup
          variation={ButtonVariation.Primary}
          icon={<IconPlus solid size={IconSize.Light} />}
          {...buttonProps}
        />,
        <ActionMenu
          isActiveOfGroup
          id={`${namespace}__action-menu`}
          testId={`${newlineTestId}__action-menu`}
          key="actions-button"
          buttonProps={buttonProps}
          options={actions}
        />,
      ]}
    />
  ) : (
    <Button
      id={NAMESPACES.TOOLBAR.BUTTON_NEWLINE}
      testId={newlineTestId}
      icon={<IconPlus solid size={IconSize.Light} />}
      variation={ButtonVariation.Primary}
      {...buttonProps}
    />
  )
}

ButtonNewLine.defaultProps = {
  size: ButtonSize.Small,
}

export type ButtonNewLineProps = ButtonProps & {
  actions: Array<MenuAction>
}

export default ButtonNewLine

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonUpload.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import IconUpload from '../../icon/Upload/index.js'
import { NAMESPACES } from '../constants'
import Button, { IconSize, ButtonProps } from './Button'
import { useButtonGroupContext } from './context'

const ButtonUpload: FC<ButtonProps> = props => {
  const { testId } = useButtonGroupContext()
  return (
    <Button
      id={NAMESPACES.TOOLBAR.BUTTON_UPLOAD}
      testId={`${testId}__upload`}
      icon={<IconUpload size={IconSize.Heavy} />}
      {...props}
    />
  )
}

export default ButtonUpload

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonDensity.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import IconDensity from '../../icon/Density/index.js'
import { NAMESPACES } from '../constants'
import Button, { IconSize } from './Button'
import usePopoverMenu, { Box, Item, Alignment } from './PopoverMenu'
import useTableMeasures, {
  Density,
  DENSITY_OPTIONS,
} from '../hooks/useTableMeasures'
import { useButtonGroupContext } from './context'

const FIELDS_ITEM_HEIGHT = 36
const BOX_HEIGHT = DENSITY_OPTIONS.length * FIELDS_ITEM_HEIGHT

const ButtonDensity: FC<ButtonDensityProps> = ({
  label,
  handleCallback,
  disabled,
  alignMenu,
  density,
  ...options
}) => {
  const { currentDensity, setCurrentDensity } = density
  const { buttonRef, toggleBox, setBoxVisible, boxVisible } = usePopoverMenu()
  const { testId } = useButtonGroupContext()
  const densityTestId = `${testId}__density`

  return (
    <Button
      id={NAMESPACES.TOOLBAR.BUTTON_DENSITY}
      testId={densityTestId}
      title={label}
      ref={buttonRef}
      onClick={toggleBox}
      icon={<IconDensity size={IconSize.Medium} />}
      disabled={disabled}>
      {boxVisible && (
        <Box testId={densityTestId} height={BOX_HEIGHT} alignMenu={alignMenu}>
          {DENSITY_OPTIONS.map((key: Density, index) => {
            const isKeySelected = currentDensity === key
            return (
              <Item
                key={index}
                isSelected={isKeySelected}
                onClick={() => {
                  setCurrentDensity(key)
                  setBoxVisible(false)
                  handleCallback && handleCallback(key)
                }}>
                {options[`${key}Label`]}
              </Item>
            )
          })}
        </Box>
      )}
    </Button>
  )
}

export type ButtonDensityProps = {
  density: ReturnType<typeof useTableMeasures>
  label: string
  compactLabel: string
  regularLabel: string
  comfortableLabel: string
  handleCallback: Function
  alignMenu: Alignment
  disabled: boolean
}

export default ButtonDensity

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonExtraActions.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import ActionMenu from '../../ActionMenu/index'
import IconOptionsDots from '../../icon/OptionsDots/index'
import { NAMESPACES } from '../constants'
import { MenuAction, Alignment } from './PopoverMenu'
import { ButtonVariation, ButtonSize } from './Button'
import { useButtonGroupContext } from './context'

const ButtonExtraActions: FC<ButtonExtraActionsProps> = ({
  label,
  size,
  actions,
}) => {
  const { testId } = useButtonGroupContext()
  return (
    <div title={label} className="mh2 order-4">
      <ActionMenu
        hideCaretIcon
        buttonProps={{
          variation: ButtonVariation.Tertiary,
          id: NAMESPACES.TOOLBAR.BUTTON_EXTRA_ACTIONS,
          testId: `${testId}__extra-actions`,
          icon: (
            <span className="c-on-base">
              <IconOptionsDots />
            </span>
          ),
          size: size,
        }}
        options={actions.map(action => {
          return {
            label: action.label,
            onClick: action.onClick,
          }
        })}
      />
    </div>
  )
}

ButtonExtraActions.defaultProps = {
  size: ButtonSize.Small,
}

export type ButtonExtraActionsProps = {
  label?: string
  actions: Array<MenuAction>
  alignMenu?: Alignment
  isLoading?: boolean
  size?: ButtonSize
}

export default ButtonExtraActions

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/ButtonDownload.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

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

import IconDownload from '../../icon/Download/index.js'
import { NAMESPACES } from '../constants'
import Button, { IconSize, ButtonProps } from './Button'
import { useButtonGroupContext } from './context'

const ButtonDownload: FC<ButtonProps> = props => {
  const { testId } = useButtonGroupContext()
  return (
    <Button
      id={NAMESPACES.TOOLBAR.BUTTON_DOWNLOAD}
      testId={`${testId}__download`}
      icon={<IconDownload size={IconSize.Heavy} />}
      {...props}
    />
  )
}

export default ButtonDownload

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/InputSearch.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, FormEvent, InputHTMLAttributes } from 'react'

import Input from '../../InputSearch/index'
import { NAMESPACES, ORDER_CLASSNAMES } from '../constants'
import { useToolbarContext } from './context'

export type InputSearchProps = InputHTMLAttributes<HTMLInputElement> & {
  onSubmit: (event: FormEvent<HTMLFormElement>) => void
}

const InputSearch: FC<InputSearchProps> = ({ onSubmit, ...inputProps }) => {
  const { testId } = useToolbarContext()
  return (
    <form
      id={NAMESPACES.TOOLBAR.INPUT_SEARCH}
      data-testid={`${testId}__search-form`}
      className={ORDER_CLASSNAMES.TOOLBAR_CHILD.INPUT}
      onSubmit={onSubmit}>
      <Input testId={`${testId}__search-form__input`} {...inputProps} />
    </form>
  )
}

export default InputSearch

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/context.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useContext, createContext } from 'react'

import { E2ETestable } from '../types'

const ToolbarContext = createContext<E2ETestable>(null)
const ButtonGroupContext = createContext<E2ETestable>(null)

export const ToolbarProvider: FC<E2ETestable> = ({ children, testId }) => {
  return (
    <ToolbarContext.Provider value={{ testId }}>
      {children}
    </ToolbarContext.Provider>
  )
}

export const ButtonGroupProvider: FC<E2ETestable> = ({ children, testId }) => {
  return (
    <ButtonGroupContext.Provider value={{ testId }}>
      {children}
    </ButtonGroupContext.Provider>
  )
}

export function useToolbarContext() {
  const context = useContext(ToolbarContext)
  if (!context) {
    throw new Error('Do not use Toolbar composites outside of context')
  }
  return context
}

export function useButtonGroupContext() {
  const context = useContext(ButtonGroupContext)
  if (!context) {
    throw new Error('Do not use ButtonGroup composites outside of context')
  }
  return context
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/PopoverMenu.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  useRef,
  useState,
  FC,
  useLayoutEffect,
  useCallback,
} from 'react'
import classnames from 'classnames'

import Button from '../../Button/index.js'
import { E2ETestable } from '../types'

export default function usePopoverMenu() {
  const [boxVisible, setBoxVisible] = useState(false)
  const buttonRef = useRef(null)

  const handleOutsideClick = (e: Event) =>
    buttonRef &&
    buttonRef.current &&
    e.target instanceof Node &&
    !buttonRef.current.contains(e.target) &&
    setBoxVisible(false)

  useLayoutEffect(() => {
    if (boxVisible) {
      document.addEventListener('mousedown', handleOutsideClick)
    }
    return () => document.removeEventListener('mousedown', handleOutsideClick)
  }, [boxVisible])

  const toggleBox = useCallback(() => {
    setBoxVisible(!boxVisible)
  }, [boxVisible])

  return { boxVisible, setBoxVisible, buttonRef, toggleBox }
}

export const Box: FC<BoxProps> = ({
  alignMenu,
  height,
  width,
  noMargin,
  borderClasses,
  groupActions,
  testId,
  children,
}) => {
  const isAlignRight = alignMenu === Alignment.Right
  const className = classnames(
    `absolute z-999 shadow-4 ${borderClasses || 'b--muted-4 br2 ba'}`,
    {
      'right-0': isAlignRight,
      'left-0': !isAlignRight,
      'mt2 mh2': !noMargin,
    }
  )
  return (
    <div
      data-testid={`${testId}__box`}
      className={className}
      style={{
        width: width,
      }}>
      <div className="w-100 b2 br2 bg-base">
        {groupActions && (
          <div
            data-testid={`${testId}__box__group-actions`}
            className="flex inline-flex bb b--muted-4 w-100 justify-center pv4">
            {groupActions.map(action => (
              <div
                className="mh2"
                key={action.id}
                data-testid={`${testId}__group-actions--${action.id}`}>
                <Button
                  variation="secondary"
                  size="small"
                  // eslint-disable-next-line react/jsx-handler-names
                  onClick={action.onClick}>
                  {action.label}
                </Button>
              </div>
            ))}
          </div>
        )}
        <div
          data-testid={`${testId}__box__items`}
          className="overflow-auto"
          style={{ height: height }}>
          {children}
        </div>
      </div>
    </div>
  )
}

export const Item: FC<ItemProps> = ({ isSelected, onClick, children }) => {
  const containerClassName = classnames(
    'flex justify-between ph6 pv3 pointer hover-bg-muted-5 bl bw1',
    {
      'b--emphasis': isSelected,
      'b--transparent': !isSelected,
    }
  )
  const className = classnames('w-100 flex justify-between', {
    fw5: isSelected,
  })
  return (
    <div className={containerClassName} onClick={onClick}>
      <span className={className}>{children}</span>
    </div>
  )
}

type BoxProps = E2ETestable & {
  height?: string | number
  width?: string | number
  alignMenu?: Alignment
  noMargin?: boolean
  borderClasses?: string
  groupActions?: Array<MenuAction>
}

type ItemProps = {
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  isSelected?: boolean
}

export type MenuAction = {
  label: string
  onClick: Function
  toggle?: {
    checked: boolean
    semantic: boolean
  }
  id?: number | string
}

export enum Alignment {
  Left = 'left',
  Right = 'right',
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/Toolbar/Button.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { forwardRef, ReactNode } from 'react'
import classNames from 'classnames'

import ButtonWithIcon from '../../ButtonWithIcon/index.js'
import { E2ETestable } from '../types'

const ICON_OPTICAL_COMPENSATION = { marginTop: 1.5 }

type Ref = HTMLDivElement

const Button = forwardRef<Ref, ButtonProps>(
  (
    {
      id,
      title,
      disabled,
      onClick,
      icon,
      isLoading,
      children,
      label,
      variation,
      isActiveOfGroup,
      isGrouped,
      isFirstOfGroup,
      size,
      testId,
    },
    ref
  ) => {
    const isTertiary = variation === ButtonVariation.Tertiary

    const iconClass = classNames('mh2', {
      'c-on-base': isTertiary && !disabled,
      'c-muted-2': disabled,
    })

    const labelClass = classNames({
      'c-on-base': isTertiary && !disabled,
      'c-muted-2': disabled,
    })

    return (
      <div
        id={`${id}__container`}
        data-testid={`${testId}__container`}
        title={title}
        ref={ref}
        className={classNames('relative', { mh2: isTertiary })}>
        <ButtonWithIcon
          icon={
            <span className={iconClass} style={ICON_OPTICAL_COMPENSATION}>
              {icon}
            </span>
          }
          testId={testId}
          isGrouped={isGrouped}
          isFirstOfGroup={isFirstOfGroup}
          isActiveOfGroup={isActiveOfGroup}
          disabled={disabled}
          isLoading={isLoading}
          variation={variation}
          size={size}
          onClick={onClick}>
          {label && <span className={labelClass}>{label}</span>}
        </ButtonWithIcon>
        {children}
      </div>
    )
  }
)

export enum ButtonVariation {
  Primary = 'primary',
  Secondary = 'secondary',
  Tertiary = 'tertiary',
}

export enum ButtonSize {
  Small = 'small',
  Regular = 'regular',
  Large = 'large',
}

export enum IconSize {
  Heavy = 13,
  Medium = 14,
  Light = 16,
}

export type ButtonProps = E2ETestable & {
  id?: string
  label?: string
  onClick?: Function
  isLoading?: boolean
  disabled?: boolean
  size?: ButtonSize
  icon?: unknown
  title?: string
  variation?: ButtonVariation
  isActiveOfGroup?: boolean
  isGrouped?: boolean
  isFirstOfGroup?: boolean
  children?: ReactNode
}

Button.defaultProps = {
  variation: ButtonVariation.Tertiary,
  isActiveOfGroup: false,
  isGrouped: false,
  isFirstOfGroup: false,
  size: ButtonSize.Small,
}

export default Button

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/BulkActions/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import classNames from 'classnames'

import { ORDER_CLASSNAMES, NAMESPACES } from '../constants'
import Actions from './Actions'
import Tail from './Tail'
import useTableMotion from '../hooks/useTableMotion'
import ActionBar from '../ActionBar'

const BULK_ACTIONS_HEIGHT = 56

const DEFAULT_TRANSITION = {
  duration: 200,
  func: 'ease-in-out',
  delay: 0,
  optimize: false,
}

const TRANSITIONS = [
  {
    prop: 'height',
    ...DEFAULT_TRANSITION,
  },
  {
    prop: 'padding',
    ...DEFAULT_TRANSITION,
  },
]

const BulkActions: FC<BulkActionsProps> & Composites = ({
  active = false,
  children,
}) => {
  const motion = useTableMotion(TRANSITIONS)
  const positionFixer =
    React.Children.count(children) > 1 ? null : (
      <div className={ORDER_CLASSNAMES.BULK_CHILD.POSITION_FIXER} />
    )
  return (
    <ActionBar
      id={NAMESPACES.BULK_ACTIONS}
      order={ORDER_CLASSNAMES.BULK}
      className={classNames(
        'flex flex-row justify-between bg-action-primary c-on-action-primary br3 br--top ph4',
        {
          pv4: active,
        }
      )}
      style={{
        height: active ? BULK_ACTIONS_HEIGHT : 0,
        overflow: active ? 'auto' : 'hidden',
        ...motion,
      }}
      noMargin>
      {children}
      {positionFixer}
    </ActionBar>
  )
}

export type BulkActionsProps = {
  active: boolean
}

type Composites = {
  Actions: FC
  Tail: FC
}

BulkActions.Actions = Actions
BulkActions.Tail = Tail

export default BulkActions

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/BulkActions/Actions.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import classNames from 'classnames'

import Button from '../../Button'
import ActionMenu from '../../ActionMenu'
import { MenuAction } from '../Toolbar/PopoverMenu'
import { ORDER_CLASSNAMES } from '../constants'

const ACTION_MARGIN = 'mr4'

export default function Actions({ children }) {
  const className = classNames(
    'flex flex-row',
    ORDER_CLASSNAMES.BULK_CHILD.ACTIONS
  )
  return <div className={className}>{children}</div>
}

Actions.Primary = Primary
Actions.Secondary = Secondary

function Primary({ label, onClick }: PrimaryProps) {
  const className = classNames(
    ACTION_MARGIN,
    ORDER_CLASSNAMES.BULK_CHILD.ACTIONS_CHILD.PRIMARY
  )
  return (
    <div className={className}>
      <Button variation="secondary" size="small" onClick={onClick}>
        {label}
      </Button>
    </div>
  )
}

function Secondary({ label, actions, onActionClick }: SecondaryProps) {
  const className = classNames(
    ACTION_MARGIN,
    ORDER_CLASSNAMES.BULK_CHILD.ACTIONS_CHILD.SECONDARY
  )
  return (
    <div className={className}>
      <ActionMenu
        label={label}
        buttonProps={{ variation: 'secondary', size: 'small' }}
        options={actions.map(el => ({
          label: el.label,
          onClick: () => onActionClick(el),
        }))}
      />
    </div>
  )
}

type PrimaryProps = {
  label: string
  onClick: () => void
}

type SecondaryProps = {
  label: string
  actions: Array<MenuAction>
  onActionClick: (el: MenuAction) => void
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/BulkActions/Tail.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import classNames from 'classnames'

import ButtonWithIcon from '../../ButtonWithIcon'
import Close from '../../icon/Close'
import Button from '../../Button'
import { ORDER_CLASSNAMES } from '../constants'

export default function Tail({ children }) {
  const className = classNames(
    'tr flex flex-row items-center',
    ORDER_CLASSNAMES.BULK_CHILD.RIGHT
  )
  return <div className={className}>{children}</div>
}

Tail.Info = Info
Tail.Toggle = Toggle
Tail.Dismiss = Dismiss

function Dismiss({ onClick }: { onClick: () => void }) {
  return <ButtonWithIcon icon={<Close />} onClick={onClick} />
}

function Info({ children }) {
  return <span className="mr4 c-muted-4">{children}</span>
}

function Toggle({ children, button, active }) {
  const { onClick, text } = button
  return (
    <span className="mr2">
      {active ? (
        children
      ) : (
        <Button onClick={onClick}>
          <span className="ttu">{text}</span>
        </Button>
      )}
    </span>
  )
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/hooks/useTableMotion.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useState, useEffect, useMemo } from 'react'
import throttle from 'lodash/throttle'

const defaultTransition: Transition[] = [
  {
    prop: 'all',
    duration: 200,
    func: 'ease-in-out',
    delay: 0,
    optimize: false,
  },
]

export default function useTableMotion(transitions = defaultTransition) {
  const reducedMotion = useReducedMotion()
  const motion = useMemo(() => {
    if (reducedMotion) return {}

    const draftTransitions = transitions.reduce((acc, transition, index) => {
      const { prop, duration, func, delay } = transition
      const draftTransition = `${prop} ${duration}ms ${func} ${delay}ms`
      return index === 0 ? draftTransition : `${acc}, ${draftTransition}`
    }, '')

    const draftWillChange = transitions.reduce(
      (acc, transition) => {
        const { prop, optimize } = transition
        const skip = !optimize || acc.props.includes(prop)
        const firstItem = acc.props.length === 0
        return skip
          ? acc
          : {
              willChange: firstItem ? prop : `${acc.willChange}, ${prop}`,
              props: [...acc.props, prop],
            }
      },
      {
        willChange: '',
        props: [],
      }
    )

    const noOptimizations = draftWillChange.props.length === 0
    const optimization = noOptimizations
      ? {}
      : { willChange: draftWillChange.willChange }

    return {
      ...optimization,
      transition: draftTransitions,
    }
  }, [reducedMotion, transitions])

  return motion
}

function useReducedMotion(init = false) {
  const [reduced, setReduced] = useState(init)
  useEffect(() => {
    const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
    setReduced(mql.matches)
    const handleChange = () => {
      setReduced(mql.matches)
    }
    mql.addEventListener('change', throttle(handleChange, 200))
    return () => {
      mql.removeEventListener('change', handleChange)
    }
  }, [])
  return reduced
}

type Transition = {
  prop: string
  duration: number
  func: string
  delay: number
  optimize?: boolean
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/hooks/useTableSort.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useReducer } from 'react'

enum SortOrder {
  ASC = 'ASC',
  DSC = 'DSC',
}

type State = {
  order?: SortOrder
  by?: string
}

enum ActionType {
  SortASC = 'SORT_ASC',
  SortDSC = 'SORT_DSC',
  Clear = 'CLEAR',
}

type Action = {
  type: ActionType
  payload?: {
    id: string
  }
}

const initialState: State = {
  by: null,
  order: null,
}

export default function useTableSort() {
  const [sorted, dispatch] = useReducer(reducer, initialState)

  const sortASC = (id: string) =>
    dispatch({ type: ActionType.SortASC, payload: { id } })

  const sortDSC = (id: string) =>
    dispatch({ type: ActionType.SortDSC, payload: { id } })

  const clear = () => dispatch({ type: ActionType.Clear })

  const sort = (id: string) => {
    const { by, order } = sorted
    if (!by || by !== id) {
      sortASC(id)
    } else {
      const sortFn = order === SortOrder.ASC ? sortDSC : sortASC
      sortFn(id)
    }
  }

  return {
    sorted,
    clear,
    sort,
  }
}

function reducer(state: State, action: Action) {
  switch (action.type) {
    case ActionType.SortASC: {
      const { id } = action.payload
      return {
        by: id,
        order: SortOrder.ASC,
      }
    }
    case ActionType.SortDSC: {
      const { id } = action.payload
      return {
        by: id,
        order: SortOrder.DSC,
      }
    }
    case ActionType.Clear: {
      return initialState
    }
    default:
      return state
  }
}

```


[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-on-localhost/src/monobloco/components/new/Styleguide/components/EXPERIMENTAL_Table/hooks/useTableProportion.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMemo } from 'react'

import { Column } from '../types'

export default function useTableProportion({ columns, ratio }: ProportionData) {
  const calculatedWidths = useMemo(() => calculateWidths(columns, ratio), [
    columns,
    ratio,
  ])

  const sizedColumns = useMemo(
    () => columns.map((col, i) => ({ ...col, width: calculatedWidths[i] })),
    [calculatedWidths, columns]
  )

  return {
    sizedColumns,
  }
}

function calculateWidths(columns: Array<Column>, ratio: Array<number>) {
  const slicedRatio = ratio.slice(0, columns.length)
  const sum = (acc: number, num: number) => acc + num
  const ratioSum = slicedRatio.reduce(sum, 0)
  const fullPortion = 100
  const minPortion = fullPortion / ratioSum
  return slicedRatio.map(value => `${value * minPortion}%`)
}

type ProportionData = {
  columns: Array<Column>
  ratio: Array<number>
}

```