@faststore/core 22.42.6

package/src/components/ui/Gift/Gift.stories.mdx

@@ -0,0 +1,99 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import Gift from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { product } from 'src/../.storybook/mocks'
+
+<Meta
+  title="Molecules/Gift"
+  argTypes={{
+    icon: { control: { disable: true } },
+  }}
+  component={Gift}
+/>
+
+export const Template = (args) => <Gift product={product} {...args} />
+
+<header>
+
+# Gift
+
+It displays an additional item to purchase as a gift.
+
+</header>
+
+## Overview
+
+The `Gift` component uses [FastStore UI Gift](https://www.faststore.dev/reference/ui/molecules) as base.
+
+---
+
+## Usage
+
+`import Gift from '../components/ui/Gift'`
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />
+
+<TokenTable>
+  <TokenRow token="--fs-gift-height" value="var(--fs-spacing-12)" />
+  <TokenDivider />
+  <TokenRow token="--fs-gift-border-width" value="var(--fs-border-width)" />
+  <TokenRow
+    token="--fs-gift-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow token="--fs-gift-border-radius" value="var(--fs-border-radius)" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Content
+
+<TokenTable>
+  <TokenRow
+    token="--fs-gift-content-padding"
+    value="var(--fs-gift-gap) var(--fs-gift-gap) var(--fs-gift-gap) 0"
+  />
+  <TokenRow token="--fs-gift-content-row-gap" value="var(--fs-spacing-0)" />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-gift-title-line-height" value="1.25" />
+  <TokenRow token="--fs-gift-title-size" value="var(--fs-text-size-body)" />
+  <TokenRow
+    token="--fs-gift-title-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>
+
+### Icon
+
+<TokenTable>
+  <TokenRow token="--fs-gift-icon-size" value="1.75rem" />
+  <TokenRow token="--fs-gift-icon-padding" value="var(--fs-spacing-0)" />
+  <TokenRow
+    token="--fs-gift-icon-color"
+    value="var(--fs-gift-title-color)"
+    globalValue="var(--fs-color-text)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-gift-icon-bkg-color"
+    value="var(--fs-color-body-bkg)"
+    isColor
+  />
+</TokenTable>

package/src/components/ui/Gift/Gift.tsx

@@ -0,0 +1,76 @@
+import {
+  Gift as UIGift,
+  GiftImage as UIGiftImage,
+  GiftContent as UIGiftContent,
+} from '@faststore/ui'
+import type { GiftProps } from '@faststore/ui'
+
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import Icon from 'src/components/ui/Icon'
+import Price from 'src/components/ui/Price'
+import { Badge } from 'src/components/ui/Badge'
+import { Image } from 'src/components/ui/Image'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import styles from './gift.module.scss'
+
+export type Props = GiftProps & {
+  /**
+   * Product to be showed as `Gift`.
+   */
+  product: ProductSummary_ProductFragment
+  /**
+   * Additional message in the title
+   */
+  titleMessage?: string
+  /**
+   * Badge's label
+   */
+  badgeLabel?: string
+}
+
+function Gift({
+  product,
+  titleMessage = 'Get a',
+  badgeLabel = 'Free',
+  ...otherProps
+}: Props) {
+  const {
+    isVariantOf,
+    image: [img],
+    offers: {
+      offers: [{ listPrice }],
+    },
+  } = product
+
+  return (
+    <UIGift
+      className={styles.fsGift}
+      icon={<Icon name="Tag" width={18} height={18} />}
+      {...otherProps}
+    >
+      <UIGiftImage>
+        <Image src={img.url} alt={img.alternateName} width={89} height={89} />
+      </UIGiftImage>
+      <UIGiftContent>
+        <h3 data-fs-gift-product-title>
+          {titleMessage} {isVariantOf.name}
+        </h3>
+        <span data-fs-gift-product-summary>
+          <Price
+            value={listPrice}
+            formatter={useFormattedPrice}
+            testId="list-price"
+            data-value={listPrice}
+            variant="listing"
+            classes="text__legend"
+            SRText="Original price:"
+          />
+          <Badge>{badgeLabel}</Badge>
+        </span>
+      </UIGiftContent>
+    </UIGift>
+  )
+}
+
+export default Gift

package/src/components/ui/Gift/gift.module.scss

@@ -0,0 +1,94 @@
+@import "src/styles/scaffold";
+
+.fs-gift {
+  // --------------------------------------------------------
+  // Design Tokens for Gift
+  // --------------------------------------------------------
+
+  // Default properties
+
+  --fs-gift-height                         : var(--fs-spacing-12);
+
+  --fs-gift-border-width                   : var(--fs-border-width);
+  --fs-gift-border-color                   : var(--fs-border-color-light);
+  --fs-gift-border-radius                  : var(--fs-border-radius);
+
+  // Content
+  --fs-gift-content-padding                : var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-gift-content-row-gap                : var(--fs-spacing-0);
+
+  // Title
+  --fs-gift-title-line-height              : 1.25;
+  --fs-gift-title-size                     : var(--fs-text-size-body);
+  --fs-gift-title-color                    : var(--fs-color-text);
+
+  // Icon
+  --fs-gift-icon-size                      : 1.75rem; // 28px
+  --fs-gift-icon-padding                   : var(--fs-spacing-0);
+  --fs-gift-icon-color                     : var(--fs-gift-title-color);
+  --fs-gift-icon-bkg-color                 : var(--fs-color-body-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+
+  [data-fs-gift-wrapper] {
+    display: grid;
+    grid-template-columns: var(--fs-gift-height) repeat(4, 1fr);
+    align-items: flex-start;
+    height: var(--fs-gift-height);
+    overflow: hidden;
+    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
+    border-radius: var(--fs-gift-border-radius);
+  }
+
+  [data-fs-gift-image] {
+    height: 100%;
+    overflow: hidden;
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  [data-fs-gift-content] {
+    display: grid;
+    grid-column: 2 / span 4;
+    row-gap: var(--fs-gift-content-row-gap);
+    padding: var(--fs-gift-content-padding);
+  }
+
+  [data-fs-gift-product-title] {
+    font-size: var(--fs-gift-title-size);
+    line-height: var(--fs-gift-title-line-height);
+    color: var(--fs-gift-title-color);
+
+    @include truncate-title;
+  }
+
+  [data-fs-gift-product-summary] {
+    display: flex;
+    align-items: center;
+
+    [data-fs-badge] {
+      margin-left: var(--fs-spacing-1);
+    }
+  }
+
+  [data-fs-gift-icon] {
+    position: absolute;
+    top: calc(-1 * var(--fs-gift-icon-size) / 2);
+    left: calc(-1 * var(--fs-gift-icon-size) / 2);
+    width: var(--fs-gift-icon-size);
+    height: var(--fs-gift-icon-size);
+    padding: var(--fs-gift-icon-padding);
+    color: var(--fs-gift-icon-color);
+    background-color: var(--fs-gift-icon-bkg-color);
+    border: var(--fs-gift-border-width) solid var(--fs-gift-border-color);
+    border-radius: var(--fs-border-radius-circle);
+  }
+}

package/src/components/ui/Gift/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Gift'
+export type { Props } from './Gift'

package/src/components/ui/Icon/Icon.tsx

@@ -0,0 +1,35 @@
+import type { SVGProps } from 'react'
+
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold'
+
+const mapWeightToValue: Record<IconWeight, number> = {
+  bold: 24,
+  regular: 16,
+  light: 12,
+  thin: 8,
+}
+
+interface Props extends SVGProps<SVGSVGElement> {
+  /**
+   * Symbol id from element to render. Take a look at `/static/icons.svg`.
+   *
+   * Example: <Icon name="Bell" />
+   */
+  name: string
+  /**
+   * SVG weight.
+   *
+   * @default 'regular'
+   */
+  weight?: IconWeight
+}
+
+function Icon({ name, weight = 'regular', ...otherProps }: Props) {
+  return (
+    <svg {...otherProps} strokeWidth={mapWeightToValue[weight]}>
+      <use href={`/icons.svg#${name}`} />
+    </svg>
+  )
+}
+
+export default Icon

package/src/components/ui/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from './Icon'

package/src/components/ui/Image/Image.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, memo } from 'react'
+import Head from 'next/head'
+
+import { useImage } from './useImage'
+import type { ImageOptions } from './useImage'
+
+// React still don't have imageSizes declared on its types. Somehow,
+// it generated the right html
+declare module 'react' {
+  interface ImgHTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    fetchpriority?: string
+  }
+
+  interface LinkHTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    imageSizes?: string
+    fetchpriority?: string
+  }
+}
+
+interface Props extends ImageOptions {
+  preload?: boolean
+  fetchPriority?: string
+}
+
+// TODO: Replace this component by next/image
+const Image = forwardRef<HTMLImageElement, Props>(
+  ({ preload = false, fetchPriority, ...otherProps }, ref) => {
+    const imgProps = useImage(otherProps)
+    const { src, sizes = '100vw', srcSet } = imgProps
+
+    return (
+      <>
+        {preload && (
+          <Head>
+            <link
+              as="image"
+              rel="preload"
+              href={src}
+              imageSrcSet={srcSet}
+              imageSizes={sizes}
+              fetchpriority={fetchPriority}
+            />
+          </Head>
+        )}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          ref={ref}
+          data-fs-image
+          {...imgProps}
+          alt={imgProps.alt}
+          fetchpriority={fetchPriority}
+        />
+      </>
+    )
+  }
+)
+
+Image.displayName = 'Image'
+export default memo(Image)

package/src/components/ui/Image/index.ts

@@ -0,0 +1 @@
+export { default as Image } from './Image'

package/src/components/ui/Image/thumborUrlBuilder.ts

@@ -0,0 +1,101 @@
+export type FilterValue = boolean | string | string[] | number[]
+
+export interface Box {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+export interface ThumborOptions {
+  flipHorizontal?: boolean
+  flipVertical?: boolean
+  trim?: boolean
+  fitIn?: boolean
+  horizontalAlign?: 'left' | 'center' | 'right'
+  verticalAlign?: 'top' | 'middle' | 'bottom'
+  smart?: boolean
+  filters?: Record<string, FilterValue>
+  manualCrop?: Box | false
+}
+
+const THUMBOR_SERVER = 'https://assets.vtex.app'
+
+const cropSection = ({ left, top, right, bottom }: Box) =>
+  `${left}x${top}:${right}x${bottom}`
+
+function filtersURIComponent(filters: Record<string, FilterValue>) {
+  const elements = ['filters']
+
+  Object.keys(filters).forEach((name) => {
+    const parameters = filters[name]
+    let stringParameters
+
+    // If we have several parameters, they were passed as an array
+    // and now they need to be comma separated, otherwise there is just one to convert to a string
+    if (Array.isArray(parameters)) {
+      stringParameters = parameters.join(',')
+    }
+    // If true, we don't even need to do anything, we just have an empty string and insert ()
+    // Ex: {grayscale: true} => grayscale()
+    else if (parameters === true) {
+      stringParameters = ''
+    } else {
+      stringParameters = String(parameters)
+    }
+
+    elements.push(`${name}(${stringParameters})`)
+  })
+
+  return elements.join(':')
+}
+
+export const urlBuilder = (baseUrl: string, options: ThumborOptions) => {
+  const preSizeComponents = [THUMBOR_SERVER, 'unsafe']
+  const postSizeComponents: string[] = []
+
+  // Add the trim parameter after unsafe if appliable
+  options.trim && preSizeComponents.push('trim')
+
+  // Add the crop parameter if any
+  options.manualCrop && preSizeComponents.push(cropSection(options.manualCrop))
+
+  // Add the fit-in parameter after crop if appliable
+  options.fitIn && preSizeComponents.push('fit-in')
+
+  // Adds the horizontal alignement after the size
+  postSizeComponents.push(options.horizontalAlign ?? 'center')
+
+  // Adds the vertical alignement after the size
+  postSizeComponents.push(options.verticalAlign ?? 'middle')
+
+  // Adds the smart parameter if appliable
+  options.smart && postSizeComponents.push('smart')
+
+  // Compile the filters and add them right before the URI
+  const { filters } = options
+
+  filters && postSizeComponents.push(filtersURIComponent(filters))
+
+  // Finally, adds the real image uri
+  postSizeComponents.push(encodeURIComponent(baseUrl))
+
+  return (width: number, height: number) => {
+    // Adds the final size parameter
+    let finalSize = ''
+
+    if (options.flipHorizontal) {
+      finalSize += '-'
+    }
+
+    finalSize += `${width}x`
+
+    if (options.flipVertical) {
+      finalSize += '-'
+    }
+
+    finalSize += `${height}`
+
+    return [...preSizeComponents, finalSize, ...postSizeComponents].join('/')
+  }
+}

package/src/components/ui/Image/useImage.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react'
+import type { ImgHTMLAttributes } from 'react'
+
+import { urlBuilder } from './thumborUrlBuilder'
+import type { ThumborOptions } from './thumborUrlBuilder'
+
+export interface ImageOptions extends ImgHTMLAttributes<HTMLImageElement> {
+  src: string
+  width: number
+  height: number
+  options?: ThumborOptions
+}
+
+const FACTORS = [1, 2, 3]
+const LARGE_FACTOR = FACTORS[FACTORS.length - 1]
+
+export const useImage = ({
+  src: baseUrl,
+  width,
+  height,
+  options = {},
+  ...rest
+}: ImageOptions): ImgHTMLAttributes<HTMLImageElement> => {
+  const { srcSet, src } = useMemo(() => {
+    const builder = urlBuilder(baseUrl, options)
+
+    const srcs = FACTORS.map((factor) => {
+      const rescaledWidth = width * factor
+
+      return `${builder(rescaledWidth, height * factor)} ${rescaledWidth}w`
+    })
+
+    return {
+      src: builder(width * LARGE_FACTOR, height * LARGE_FACTOR),
+      srcSet: srcs.join(', '),
+    }
+  }, [height, options, baseUrl, width])
+
+  return {
+    src,
+    srcSet,
+    width: `${width}px`,
+    height: `${height}px`,
+    ...rest,
+  }
+}

package/src/components/ui/ImageGallery/ImageGallery.stories.mdx

@@ -0,0 +1,173 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { ImageGallery } from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta title="Organisms/ImageGallery" />
+
+export const Template = () => {
+  const productImages = [
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000',
+      alternateName: 'Magicwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000',
+      alternateName: 'magicbox',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000',
+      alternateName: 'magicblackwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000',
+      alternateName: 'magiccombo',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000',
+      alternateName: 'magicback',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000',
+      alternateName: 'magictable',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000',
+      alternateName: 'magichand',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000',
+      alternateName: 'magicstyle',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000',
+      alternateName: 'magicscale',
+    },
+  ]
+  return <ImageGallery images={productImages} />
+}
+
+export const TemplateWithoutSelector = () => {
+  const productImages = [
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000',
+      alternateName: 'Magicwhite',
+    },
+  ]
+  return <ImageGallery images={productImages} />
+}
+
+<header>
+
+# Image Gallery
+
+An `ImageGallery` is used when you want to display a series of photos in a gallery on a post or page.
+
+</header>
+
+## Overview
+
+According to the quantity of `Image` to be displayed, the `ImageGallerySelector` will be displayed.
+
+---
+
+## Usage
+
+`import { ImageGallery } from 'src/components/ui/ImageGallery'`
+
+<Canvas className="sbdocs-image-gallery">
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-width"
+    value="calc(100% + (2 * var(--fs-grid-padding)))"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-image-gallery-gap-mobile" value="var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-image-gallery-gap-notebook"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Current Selected Image
+
+<TokenTable>
+  <TokenRow token="--fs-image-gallery-current-height" value="33.125rem" />
+  <TokenRow
+    token="--fs-image-gallery-current-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Selector
+
+<TokenTable>
+  <TokenRow token="--fs-image-gallery-selector-max-height" value="33.125rem" />
+</TokenTable>
+
+### Selector Elements
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-gap"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-gap-notebook"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-padding"
+    value="var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### Selector Thumbnail
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-width-mobile"
+    value="3.5rem"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-width-notebook"
+    value="4.5rem"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-selected-border-color"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### With Selector (More than 1 Image)
+
+<Canvas className="sbdocs-image-gallery">
+  <Story name="overview-default">{Template.bind({})}</Story>
+</Canvas>
+
+### Without Selector
+
+<Canvas className="sbdocs-image-gallery">
+  <Story name="overview-default-2">{TemplateWithoutSelector.bind({})}</Story>
+</Canvas>