@faststore/core 3.0.38 → 3.0.40

package/src/components/search/searchMock.ts

@@ -1,48 +0,0 @@
-import { rest } from 'msw'
-
-import { productGridItems, searchTerms } from 'src/../.storybook/mocks'
-
-export const products = productGridItems.map((item) => item.node)
-
-export const msw = {
-  handlers: [
-    rest.get('/api/graphql', (req, res, ctx) => {
-      const {
-        url: { searchParams },
-      } = req
-
-      const operationName = searchParams.get('operationName')
-
-      if (operationName === 'TopSearchSuggestionsQuery') {
-        return res(
-          ctx.json({
-            data: {
-              search: {
-                suggestions: {
-                  terms: searchTerms,
-                },
-              },
-            },
-          })
-        )
-      }
-
-      if (operationName === 'SearchSuggestionsQuery') {
-        return res(
-          ctx.json({
-            data: {
-              search: {
-                suggestions: {
-                  terms: searchTerms,
-                  products,
-                },
-              },
-            },
-          })
-        )
-      }
-
-      return res(ctx.status(400))
-    }),
-  ],
-}

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

@@ -1,197 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import Breadcrumb from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta component={Breadcrumb} title="Molecules/Breadcrumb" />
-
-export const breadcrumbList = [
-  { item: 'technology', name: 'Technology', position: 1 },
-  {
-    item: 'technology/electronics',
-    name: 'Electronics',
-    position: 2,
-  },
-  {
-    item: 'technology/electronics/audio-and-video',
-    name: 'Audio & Video',
-    position: 3,
-  },
-  {
-    item: 'technology/electronics/audio-and-video/headphones',
-    name: 'Headphones',
-    position: 4,
-  },
-]
-
-export const Template = (args) => <Breadcrumb {...args} />
-
-<header>
-
-# Breadcrumb
-
-Breadcrumbs indicate the user's location in a website hierarchy, facilitating the navigation to previous page levels.
-
-</header>
-
-## Overview
-
-The `Breadcrumb` component uses [FastStore UI Breadcrumb](https://www.faststore.dev/reference/ui/molecules/Breadcrumb) as base.
-
-<Canvas isColumn>
-  <Story name="overview" args={{ breadcrumbList }}>
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-with-dropdown"
-    args={{
-      breadcrumbList: [
-        ...breadcrumbList,
-        {
-          item: 'technology/electronics/audio-and-video/headphones/headphonesaedle-vk1-headphone',
-          name: 'Aedle VK-1 L Headphone',
-          position: 5,
-        },
-      ],
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Breadcrumb from 'src/components/ui/Breadcrumb'`
-
-<Canvas>
-  <Story name="default" args={{ breadcrumbList }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-margin-left"
-    value="calc(-1 * var(--fs-spacing-1))"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### List Item
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-list-item-padding"
-    value="var(--fs-spacing-0)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-list-item-last-text-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-breadcrumb-list-item-max-width-mobile" value="30%" />
-</TokenTable>
-
-### Link
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-link-color-visited"
-    value="var(--fs-color-link)"
-    isColor
-  />
-</TokenTable>
-
-### Link Home
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-link-home-padding"
-    value="var(--fs-spacing-1)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-link-home-border-radius"
-    value="var(--fs-border-radius-circle)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-link-home-hover-bkg-color"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-breadcrumb-link-home-color"
-    value="var(--fs-color-text)"
-    isColor
-  />
-</TokenTable>
-
-### Divider
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-divider-height"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenRow
-    token="--fs-breadcrumb-divider-margin"
-    value="var(--fs-spacing-1)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-divider-border-left-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-breadcrumb-divider-border-left-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-</TokenTable>
-
-### Dropdown Button
-
-<TokenTable>
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-margin-left"
-    value="var(--fs-breadcrumb-margin-left)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-color"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-border-radius"
-    value="var(--fs-spacing-0)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-  <TokenRow
-    token="--fs-breadcrumb-dropdown-button-transition-function"
-    value="var(--fs-transition-function)"
-  />
-</TokenTable>

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

@@ -1,272 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Link from '.'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Atoms/Link"
-  component={Link}
-  argTypes={{
-    href: {
-      type: { name: 'string', required: true },
-    },
-    ref: { table: { disable: true } },
-    as: { table: { disable: true } },
-    children: { table: { disable: true } },
-    replace: { table: { disable: true } },
-    scroll: { table: { disable: true } },
-    shallow: { table: { disable: true } },
-    passHref: { table: { disable: true } },
-    prefetch: { table: { disable: true } },
-    locale: { table: { disable: true } },
-    legacyBehavior: { table: { disable: true } },
-  }}
-/>
-
-export const Template = ({ children, ...args }) => (
-  <Link {...args}>{children}</Link>
-)
-
-<header>
-
-# Link
-
-The Link component behaves as a regular anchor tag `<a />`, but can be used as any HTML tag.
-
-</header>
-
-## Overview
-
-The `Link` component uses [FastStore UI Link](https://www.faststore.dev/reference/ui/atoms/Link) and [Next.js Link](https://nextjs.org/docs/api-reference/next/link) as base.
-
-Internally, the `Link` component handles client-side navigation through the Next.js `Link`, so all the Next.js `Link` attributes can be used for this case.
-
-<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-3)' }}>
-  <Story
-    name="overview-default"
-    args={{
-      href: '#',
-      children: 'Default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-inverse"
-    args={{
-      href: '#',
-      inverse: true,
-      children: 'Inverse',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-display"
-    args={{
-      href: '#',
-      variant: 'display',
-      children: 'Display',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-inline"
-    args={{
-      href: '#',
-      variant: 'inline',
-      children: 'Inline',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="overview-footer"
-    args={{
-      href: '#',
-      variant: 'footer',
-      children: 'Footer',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Link from '../components/ui/Link'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      href: '#',
-      children: 'Link',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-link-min-width" value="auto" />
-  <TokenRow token="--fs-link-min-height" value="var(--fs-link-min-width)" />
-  <TokenRow
-    token="--fs-link-padding"
-    value="var(--fs-spacing-2) var(--fs-spacing-0)"
-  />
-  <TokenRow token="--fs-link-border-radius" value="var(--fs-border-radius)" />
-  <TokenDivider />
-  <TokenRow token="--fs-link-text-line-height" value="1.5" />
-  <TokenRow token="--fs-link-text-color" value="var(--fs-color-link)" isColor />
-  <TokenRow
-    token="--fs-link-text-color-visited"
-    value="var(--fs-color-link-visited)"
-    isColor
-  />
-  <TokenRow token="--fs-link-text-decoration" value="none" />
-  <TokenRow token="--fs-link-text-decoration-hover" value="underline" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-link-transition-function"
-    value="var(--fs-transition-function)"
-  />
-  <TokenRow
-    token="--fs-link-transition-property"
-    value="var(--fs-transition-property)"
-  />
-  <TokenRow
-    token="--fs-link-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Inverse
-
-<Canvas style={{ backgroundColor: 'var(--fs-color-neutral-7)' }}>
-  <Story
-    name="link-inverse"
-    args={{
-      href: '#',
-      inverse: true,
-      children: 'Link Inverse',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-link-inverse-text-color"
-    value="var(--fs-color-link-inverse)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-link-inverse-text-color-visited"
-    value="var(--fs-link-inverse-text-color)"
-    globalValue="var(--fs-color-link-inverse)"
-    isColor
-  />
-</TokenTable>
-
-### Display
-
-<Canvas>
-  <Story
-    name="link-display"
-    args={{
-      href: '#',
-      variant: 'display',
-      children: 'Link Display',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-link-display-text-line-height"
-    value="var(--fs-link-text-line-height)"
-  />
-  <TokenRow
-    token="--fs-link-display-text-color"
-    value="var(--fs-color-text-display)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-link-display-text-color-visited"
-    value="var(--fs-link-display-text-color)"
-    globalValue="var(--fs-color-text-display)"
-    isColor
-  />
-</TokenTable>
-
-### Inline
-
-<Canvas>
-  <Story
-    name="link-inline"
-    args={{
-      href: '#',
-      variant: 'inline',
-      children: 'Link Inline',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-link-inline-padding" value="0" />
-  <TokenRow token="--fs-link-inline-text-decoration" value="underline" />
-  <TokenRow
-    token="--fs-link-inline-text-color"
-    value="var(--fs-link-text-color)"
-    globalValue="var(--fs-color-link)"
-    isColor
-  />
-</TokenTable>
-
-### Footer
-
-<Canvas>
-  <Story
-    name="link-footer"
-    args={{
-      href: '#',
-      variant: 'footer',
-      children: 'Link Footer',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-link-footer-text-size" value="var(--fs-text-size-1)" />
-  <TokenRow
-    token="--fs-link-footer-text-color"
-    value="var(--fs-color-info-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-link-footer-padding"
-    value="var(--fs-spacing-1) var(--fs-spacing-0)"
-  />
-</TokenTable>

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

@@ -1,66 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import ProductDetailsContent from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Organisms/ProductDetailsContent"
-  component={ProductDetailsContent}
-  argTypes={{
-    initiallyExpanded: { defaultValue: 'first' },
-  }}
-/>
-
-export const TemplateProvider = (args) => {
-  return <ProductDetailsContent {...args} />
-}
-
-export const CustomLabelsTemplateProvider = (args) => {
-  return (
-    <ProductDetailsContent
-      labels={{
-        description: 'Product description',
-        about: 'Product specifications',
-        highlights: 'Highlights',
-        learnMore: 'More',
-      }}
-    />
-  )
-}
-
-<header>
-
-# Product Details Content
-
-This component is used to show information related to a product
-
-</header>
-
-## Overview
-
-The `ProductDetailsContent` component uses [Accordion](/docs/molecules-accordion-overview--default-story), [FastStore UI Table](https://www.faststore.dev/reference/ui/molecules/Table), and [FastStore UI List](https://www.faststore.dev/reference/ui/molecules/List) as base.
-
----
-
-## Usage
-
-`import ProductDetailsContent from 'src/components/sections/ProductDetailsContent'`
-
-<Canvas>
-  <Story name="default">{TemplateProvider.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
----
-
-## Variants
-
-### Custom labels for each article
-
-<Canvas>
-  <Story name="customLabels">{CustomLabelsTemplateProvider.bind({})}</Story>
-</Canvas>

package/src/components/ui/SkuSelector/Selectors.stories.mdx

@@ -1,86 +0,0 @@
-import { useState } from 'react'
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Selectors from '.'
-
-<Meta title="Molecules/SkuSelector/Selectors" component={Selectors} />
-
-<header>
-
-# Selectors
-
-Component used for controlling behavior and the SKUs selection of the `SkuSelector`.
-
-</header>
-
-## Overview
-
-The `Selectors` component is responsible for rendering `SkuSelector` according to the kind of variants available for each product.
-
-It also handles the general `SkuSelector` behavior, like navigating between SKUs and managing the combination between available SKUs for each variant.
-
----
-
-## Usage
-
-The code snippet below is an example of what `Selectors` props should look like, but remember that this info comes from the API when the product has available SKU variants.
-
-`import Selectors from 'src/components/ui/SkuSelector'`
-
-<Canvas withSource="open" className="no-code">
-  <Story
-    name="overview"
-    decorators={[
-      (Story) => (
-        <div style={{ display: 'none' }}>
-          <Story />
-        </div>
-      ),
-    ]}
-  >
-    <Selectors
-      activeVariations={{
-        Color: 'White',
-        Size: '42',
-      }}
-      slugsMap={{
-        'Color-Pink-Size-42': 'classic-shoes-37',
-        'Color-White-Size-42': 'classic-shoes-36',
-        'Color-White-Size-41': 'classic-shoes-310124175',
-      }}
-      dominantVariation: 'Color'
-      availableVariations={{
-        Size: [
-          {
-            src: '/',
-            label: '42',
-            value: '42',
-            alt: 'Size 42',
-          },
-          {
-            src: '/',
-            label: '41',
-            value: '41',
-            alt: 'Size 41',
-          },
-        ],
-        Color: [
-          {
-            src: '/',
-            label: 'Pink',
-            value: 'Pink',
-            alt: 'Color Pink',
-          },
-          {
-            src: '/',
-            label: 'White',
-            value: 'White',
-            alt: 'Color White',
-          },
-        ],
-      }}
-    />
-  </Story>
-</Canvas>
-
-<ArgsTable of={Selectors} />