feat: Price atom

[icazevedo]

What's the purpose of this pull request?

This PR adds the Price atom to our store-ui library.

UI

import { Price } from '@vtex/store-ui'
import { useMemo } from 'react'

function useIntlFormatter(price: number) {
  return useMemo(() => {
    const formattedPrice = new Intl.NumberFormat('en-GB', {
      style: 'currency',
      currency: 'EUR',
    }).format(price)

    return formattedPrice
  }, [price])
}

function useIntlPartsFormatter(price: number) {
  return useMemo(() => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    })
      .formatToParts(price)
      .map((part) => {
        const props = {
          [`data-store-price-${part.type}`]: true,
        } as Record<string, unknown>

        if (part.type === 'integer') {
          props.style = { fontWeight: 700 }
        }

        return (
          <span key={part.type} {...props}>
            {part.value}
          </span>
        )
      })
  }, [price])
}

function customFormatter(price: number) {
  const unformattedPrice = `${price}`
  const formattedPrice = `${unformattedPrice.replace('.', ',')} reais`

  return formattedPrice
}

export default function Prices() {
  return (
    <div className="space-x-2">
      <Price value={32.5} />
      <Price value={32.5} formatter={useIntlFormatter} />
      <Price value={32.5} formatter={useIntlPartsFormatter} />
      <Price value={32.5} formatter={useIntlFormatter} listing />
      <Price value={32.5} formatter={customFormatter} />
    </div>
  )
}

Styling

[data-store-price] {
  padding-right: 50px;
}

[data-store-price][data-listing] {
  text-decoration: line-through;
}

[data-store-price] [data-store-price-integer] {
  font-weight: bold;
}

[netlify]

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 2693909

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/60c8eae974e10d00086da244

😎 Browse the preview: https://deploy-preview-760--storeui.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2693909:

Sandbox	Source
Store UI Typescript	Configuration

[emersonlaurentino]

I don't understand the listing proposal. Can you explain?

[tlgimenes]

Nice work!

[emersonlaurentino]

Great Job @icazevedo 🎉