@faststore/core 2.0.101-alpha.0 → 2.0.103-alpha.0

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

@@ -1,173 +0,0 @@
-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>

package/src/components/ui/ImageGallery/ImageGallerySelector.tsx

@@ -1,121 +0,0 @@
-import {
-  Button as UIButton,
-  Icon,
-  IconButton as UIIconButton,
-} from '@faststore/ui'
-import { useRef } from 'react'
-import { useInView } from 'react-intersection-observer'
-
-import { Image } from 'src/components/ui/Image'
-import styles from 'src/components/ui/ImageGallery/image-gallery-selector.module.scss'
-
-import type { ImageElementData } from './ImageGallery'
-
-interface Props {
-  images: ImageElementData[]
-  onSelect: React.Dispatch<React.SetStateAction<number>>
-  currentImageIdx: number
-}
-
-const SCROLL_MARGIN_VALUE = 400
-
-const moveScroll = (container: HTMLDivElement | null, value: number) => {
-  if (container) {
-    if (container.scrollHeight > container.clientHeight) {
-      // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
-      container.style.overflow = 'auto'
-      window.requestAnimationFrame(() =>
-        container.scrollTo({ top: value, behavior: 'smooth' })
-      )
-      setTimeout(() => (container.style.overflow = 'hidden'), 2000)
-    } else {
-      container.scrollLeft += value
-    }
-  }
-}
-
-const hasScroll = (container: HTMLDivElement | null): boolean => {
-  if (container) {
-    return (
-      container.scrollHeight > container.clientHeight ||
-      container.scrollWidth > container.clientWidth
-    )
-  }
-
-  return false
-}
-
-function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
-  const elementsRef = useRef<HTMLDivElement>(null)
-  const elementHasScroll = hasScroll(elementsRef.current)
-  const { ref: firstImageRef, inView: firstImageInView } = useInView({
-    threshold: 1,
-  })
-
-  const { ref: lastImageRef, inView: lastImageInView } = useInView({
-    threshold: 1,
-  })
-
-  return (
-    <section
-      data-fs-image-gallery-selector
-      className={styles.fsImageGallerySelector}
-      aria-roledescription="carousel"
-      aria-label="Product images"
-    >
-      {elementHasScroll && !firstImageInView && (
-        <UIIconButton
-          data-fs-image-gallery-selector-control-button
-          aria-label="backward slide image selector"
-          icon={<Icon name="ArrowLeft" width={24} height={24} />}
-          onClick={() => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)}
-        />
-      )}
-      <div data-fs-image-gallery-selector-elements ref={elementsRef}>
-        {images.map((image, idx) => {
-          const ref =
-            idx === 0
-              ? firstImageRef
-              : idx === images.length - 1
-              ? lastImageRef
-              : null
-
-          return (
-            <UIButton
-              key={idx}
-              aria-label={`${image.alternateName} - Image ${idx + 1} of ${
-                images.length
-              }`}
-              onClick={() => onSelect(idx)}
-              data-fs-image-gallery-selector-thumbnail={
-                idx === currentImageIdx ? 'selected' : 'true'
-              }
-            >
-              <Image
-                onLoadingComplete={(img) => {
-                  if (ref) ref(img)
-                }}
-                src={image.url}
-                alt={image.alternateName}
-                loading={idx === 0 ? 'eager' : 'lazy'}
-                sizes="(max-width: 72px) 25vw, 30vw"
-                width={72}
-                height={72}
-              />
-            </UIButton>
-          )
-        })}
-      </div>
-      {elementHasScroll && !lastImageInView && (
-        <UIIconButton
-          data-fs-image-gallery-selector-control-button
-          aria-label="forward slide image selector"
-          icon={<Icon name="ArrowLeft" width={24} height={24} />}
-          onClick={() => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)}
-        />
-      )}
-    </section>
-  )
-}
-
-export default ImageGallerySelector

package/src/components/ui/ImageGallery/ImageZoom.tsx

@@ -1,12 +0,0 @@
-import type { PropsWithChildren } from 'react'
-
-interface ImageZoomProps {
-  helpMessage?: string
-  zoomFactor?: number
-}
-
-const ImageZoom = ({ children }: PropsWithChildren<ImageZoomProps>) => {
-  return <> {children} </>
-}
-
-export default ImageZoom

package/src/components/ui/ImageGallery/image-gallery-selector.module.scss

@@ -1,137 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-image-gallery-selector {
-  // --------------------------------------------------------
-  // Design Tokens for Image Gallery Selector
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-image-gallery-selector-max-height                        : 33.125rem;   // 530px
-
-  // Elements
-  --fs-image-gallery-selector-elements-gap                      : var(--fs-spacing-1);
-  --fs-image-gallery-selector-elements-gap-notebook             : var(--fs-spacing-2);
-  --fs-image-gallery-selector-elements-padding                  : var(--fs-spacing-0);
-
-  // Thumbnail
-  --fs-image-gallery-selector-thumbnail-width-mobile            : var(--fs-spacing-8);
-  --fs-image-gallery-selector-thumbnail-width-notebook          : var(--fs-spacing-10);
-  --fs-image-gallery-selector-thumbnail-border-radius           : var(--fs-border-radius);
-  --fs-image-gallery-selector-thumbnail-selected-border-color   : var(--fs-border-color-active);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-height: var(--fs-image-gallery-selector-max-height);
-
-  @include media(">=notebook") {
-    flex-direction: column;
-    grid-row: 1;
-    justify-content: space-between;
-  }
-
-  [data-fs-image-gallery-selector-elements] {
-    display: flex;
-    column-gap: var(--fs-image-gallery-selector-elements-gap);
-    padding: var(--fs-image-gallery-selector-elements-padding);
-    overflow-x: auto;
-    scroll-behavior: smooth;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    @include media(">=notebook") {
-      flex-direction: column;
-      row-gap: var(--fs-image-gallery-selector-elements-gap-notebook);
-      overflow-y: hidden;
-    }
-  }
-
-  [data-fs-image-gallery-selector-thumbnail] {
-    flex-shrink: 0;
-    width: var(--fs-image-gallery-selector-thumbnail-width-mobile);
-    padding: 0;
-    overflow: hidden;
-    background-color: transparent;
-    border: var(--fs-border-width-thick) solid transparent;
-    border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
-    transition: all var(--fs-transition-timing) var(--fs-transition-function);
-
-    &:hover:not([data-fs-image-gallery-selector-thumbnail="selected"]) {
-      border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
-    }
-
-    &[data-fs-image-gallery-selector-thumbnail="selected"] {
-      border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
-      box-shadow: 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline);
-    }
-
-    [data-fs-image] {
-      border: var(--fs-border-width-thick) solid var(--fs-color-body-bkg);
-      border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
-    }
-
-    @include focus-ring-visible;
-
-    @include media(">=notebook") {
-      width: var(--fs-image-gallery-selector-thumbnail-width-notebook);
-    }
-  }
-
-  [data-fs-image-gallery-selector-control-button] {
-    position: absolute;
-    z-index: 1;
-    color: var(--fs-color-text-display);
-    background: linear-gradient(90deg, var(--fs-color-body-bkg) 55%, transparent);
-    background-color: transparent;
-    border: none;
-    border-radius: var(--fs-border-radius-circle);
-
-    &:hover {
-      color: var(--fs-color-text-display);
-    }
-
-    [data-fs-icon]span {
-      display: flex;
-      height: fit-content;
-      padding: var(--fs-spacing-1);
-      background-color: var(--fs-control-bkg);
-      border-radius: var(--fs-border-radius-circle);
-      box-shadow: var(--fs-shadow);
-    }
-
-    @include media("<notebook") {
-      height: 100%;
-
-      &:first-child {
-        left: 0;
-      }
-
-      &:last-child {
-        right: 0;
-        transform: scaleX(-1);
-      }
-    }
-
-    @include media(">=notebook") {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      background: linear-gradient(180deg, var(--fs-color-body-bkg) 55%, transparent);
-
-      [data-fs-icon]span {
-        transform: rotate(90deg);
-      }
-
-      &:last-child {
-        bottom: 0;
-        transform: scaleY(-1);
-      }
-    }
-  }
-}

package/src/components/ui/ImageGallery/image-gallery.module.scss

@@ -1,56 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-image-gallery {
-  // --------------------------------------------------------
-  // Design Tokens for Image Gallery
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-image-gallery-width                     : calc(100% + (2 * var(--fs-grid-padding)));
-
-  --fs-image-gallery-gap-mobile                : var(--fs-spacing-2);
-  --fs-image-gallery-gap-notebook              : var(--fs-spacing-3);
-
-  // Current Selected Image
-  --fs-image-gallery-current-border-radius     : var(--fs-border-radius);
-  --fs-image-gallery-current-height            : 33.125rem;   // 530px
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  left: calc(-1 * var(--fs-grid-padding));
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--fs-image-gallery-gap-mobile);
-  width: var(--fs-image-gallery-width);
-
-  @include media(">=tablet") {
-    left: 0;
-    width: 100%;
-
-    > [data-fs-image] {
-      grid-column: 2 / span 7;
-      border-radius: var(--fs-image-gallery-current-border-radius);
-    }
-  }
-
-  @include media(">=notebook") {
-    >[data-fs-image] {
-      height: var(--fs-image-gallery-current-height);
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-image-gallery="with-selector"] {
-    @include media(">=notebook") {
-      display: grid;
-      grid-template-columns: repeat(8, 1fr);
-      column-gap: var(--fs-image-gallery-gap-notebook);
-    }
-  }
-}