@faststore/core 0.3.17 → 2.0.65-alpha.0

package/src/components/skeletons/Skeletons.stories.mdx

@@ -1,177 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-import Skeleton from './Skeleton'
-import FilterSkeleton from './FilterSkeleton'
-import ProductCardSkeleton from './ProductCardSkeleton'
-
-import Icon from 'src/components/ui/Icon'
-
-export const TemplateSkeleton = ({ ...args }) => <Skeleton {...args} />
-
-<Meta
-  component={Skeleton}
-  title="Features/Skeletons/Overview"
-  argTypes={{
-    loading: {
-      control: 'boolean',
-      table: { type: 'boolean', summary: true },
-    },
-    shimmer: {
-      control: 'boolean',
-      table: { type: 'boolean', summary: false },
-    },
-  }}
-/>
-
-<header>
-
-# Skeletons
-
-This feature improves the store's experience and perceived performance through loading placeholders.
-
-</header>
-
-## Overview
-
-`Skeletons` are like an element's or section's wireframe. It's a placeholder
-that simulates the layout of these elements/sections while data is being loaded.
-
-Instead of showing a blank page, displaying `Skeletons` while loading content makes the user feel like the store is more responsive and faster.
-
-Also by using `Skeletons` the store will be less likely to experience [Cumulative Layout Shilf (or CLS)](https://web.dev/i18n/en/cls/).
-
----
-
-## Usage
-
-The `Skeleton` component is used as placeholder for the primitive elements (e.g. texts, buttons), being part of the related components.
-
-`import Skeleton from 'src/components/skeletons/Skeleton'`
-
-<Canvas className="canvas-skeletons">
-  <Story name="Usage" args={{ loading: true, shimmer: false, variant: 'text' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Usage" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-skeleton-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-skeleton-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Text
-
-<Canvas className="canvas-skeletons">
-  <Story name="Text" args={{ loading: true, shimmer: true, variant: 'text' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-text-width" value="100%" />
-  <TokenRow token="--fs-skeleton-text-height" value="var(--fs-spacing-4)" />
-</TokenTable>
-
-### Button
-
-<Canvas className="canvas-skeletons">
-  <Story
-    name="Button"
-    args={{ loading: true, shimmer: true, variant: 'button' }}
-  >
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-button-width" value="var(--fs-spacing-13)" />
-  <TokenRow token="--fs-skeleton-button-height" value="var(--fs-spacing-5)" />
-  <TokenRow token="--fs-skeleton-button-gap" value="var(--fs-spacing-2)" />
-  <TokenRow
-    token="--fs-skeleton-button-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
-### Image
-
-<Canvas className="canvas-skeletons">
-  <Story name="Image" args={{ loading: true, shimmer: true, variant: 'image' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-image-height-mobile" value="45vw" />
-  <TokenRow token="--fs-skeleton-image-height-desktop" value="12.188rem" />
-  <TokenRow
-    token="--fs-skeleton-image-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
-### Badge
-
-<Canvas className="canvas-skeletons">
-  <Story name="Badge" args={{ loading: true, shimmer: true, variant: 'badge' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-badge-height-mobile" value="45%" />
-  <TokenRow
-    token="--fs-skeleton-badge-height-desktop"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-skeleton-badge-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
----
-
-## Components
-
-<SectionList grid="grid" classes="sbdocs-skeletons">
-  <SectionItem
-    title="Filter Skeleton"
-    actionPath="../?path=/docs/features-skeletons-filterskeleton--usage"
-    description={
-      <>
-        Loading placeholder for the <code>Filter</code> used in PLP.
-      </>
-    }
-  >
-    <FilterSkeleton loading />
-  </SectionItem>
-  <SectionItem
-    title="Product Card Skeleton"
-    actionPath="../?path=/docs/features-skeletons-productcardskeleton--usage"
-    description={
-      <>
-        Loading placeholder for the <code>ProductCard</code> used in several
-        sections of the store.
-      </>
-    }
-  >
-    <ProductCardSkeleton variant="wide" displayButton />
-  </SectionItem>
-</SectionList>

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

@@ -1,144 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { Button, LinkButton } from '@faststore/ui'
-
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
-import { RegionalizationModalContent } from 'src/components/regionalization/RegionalizationModal'
-
-import Modal from '.'
-import Icon from '../Icon'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta title="Molecules/Modal" component={Modal} />
-
-export const ModalTemplate = (args) => {
-  const { modal, openModal } = useUI()
-  return (
-    <div>
-      <Button variant="primary" onClick={() => openModal()}>
-        Open Modal
-      </Button>
-      {modal && (
-        <Modal>
-          {({ fadeOut }) => (
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexDirection: 'column',
-                padding: '3rem',
-                backgroundColor: 'white',
-              }}
-            >
-              <h1
-                style={{
-                  fontSize: '2rem',
-                  paddingBottom: '1rem',
-                }}
-              >
-                Hello, i'm a Modal!
-              </h1>
-              <Button onClick={fadeOut}>Close Modal</Button>
-            </div>
-          )}
-        </Modal>
-      )}
-    </div>
-  )
-}
-
-export const Template = (args) => {
-  return (
-    <UIProvider>
-      <ModalTemplate />
-    </UIProvider>
-  )
-}
-
-<header>
-
-# Modal
-
-Modals are dialog windows that sit on top of an application's main view. Once a Modal is open, interactions with the content behind it are blocked.
-
-</header>
-
-## Overview
-
-The `Modal` component uses [FastStore UI Modal](https://www.faststore.dev/reference/ui/molecules/Modal) as base.
-
----
-
-## Usage
-
-`import Modal from 'src/components/ui/Modal'`
-
-<Canvas>
-  <Story name="Overview">{Template.bind({})}</Story>
-</Canvas>
-
----
-
-<TokenTable>
-  <TokenRow token="--fs-modal-position-top" value="30vh" />
-  <TokenRow token="--fs-modal-position-right" value="var(--fs-spacing-4)" />
-  <TokenRow token="--fs-modal-position-left" value="var(--fs-spacing-4)" />
-  <TokenRow
-    token="--fs-modal-max-width"
-    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
-  />
-  <TokenRow token="--fs-modal-min-height" value="var(--fs-spacing-5)" />
-  <TokenRow token="--fs-modal-margin" value="auto" />
-  <TokenRow token="--fs-modal-border-radius" value="var(--fs-spacing-0)" />
-  <TokenDivider />
-  <TokenRow token="--fs-modal-width-tablet" value="calc(100vw / 3)" />
-  <TokenRow
-    token="--fs-modal-min-width-tablet"
-    value="calc(var(--fs-grid-breakpoint-desktop) / 3)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-modal-transition-timing"
-    value="var(--fs-transition-timing)"
-  />
-  <TokenRow token="--fs-modal-transition-property" value="transform" />
-  <TokenRow token="--fs-modal-transition-in-function" value="ease-in" />
-  <TokenRow token="--fs-modal-transition-out-function" value="ease-out" />
-</TokenTable>
-
----
-
-## Use Cases
-
-<section className="sbdocs-list">
-  <ul className="sbdocs-ul-row">
-    <li>
-      <div>
-        <UIProvider>
-          <RegionalizationModalContent onClose={() => {}} />
-        </UIProvider>
-      </div>
-      <article className="sbdocs-list-text">
-        <h3>RegionalizationModal</h3>
-        <p>
-          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
-          <code>RegionalizationBar</code>, shows the user the{' '}
-          <code>RegionalizationInput</code> search.
-        </p>
-        <LinkButton
-          size="small"
-          variant="tertiary"
-          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
-          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-          iconPosition="right"
-        >
-          See more
-        </LinkButton>
-      </article>
-    </li>
-  </ul>
-</section>

package/src/components/ui/Modal/Modal.tsx

@@ -1,43 +0,0 @@
-import type { ModalProps as UIModalProps } from '@faststore/ui'
-import { Modal as UIModal } from '@faststore/ui'
-import type { ReactNode } from 'react'
-
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
-
-import styles from './modal.module.scss'
-
-export type ModalChildrenProps = {
-  fade: 'in' | 'out'
-  fadeOut: () => void
-  fadeIn: () => void
-}
-
-type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
-
-export type ModalProps = Omit<UIModalProps, 'isOpen' | 'children'> & {
-  children: ModalChildrenFunction | ReactNode
-}
-
-function Modal({ className, children, ...props }: ModalProps) {
-  const { closeModal } = useUI()
-  const { fade, fadeOut, fadeIn } = useFadeEffect()
-
-  return (
-    <UIModal
-      onDismiss={fadeOut}
-      onTransitionEnd={() => fade === 'out' && closeModal()}
-      data-fs-modal
-      data-fs-modal-state={fade}
-      className={`${styles.fsModal} ${className}`}
-      {...props}
-      isOpen
-    >
-      {typeof children === 'function'
-        ? children({ fade, fadeOut, fadeIn })
-        : children}
-    </UIModal>
-  )
-}
-
-export default Modal

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

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

package/src/components/ui/Modal/modal.module.scss

@@ -1,46 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-modal {
-  // --------------------------------------------------------
-  // Design Tokens for Modal
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-modal-position-top                          : 30vh;
-  --fs-modal-position-right                        : var(--fs-spacing-4);
-  --fs-modal-position-left                         : var(--fs-spacing-4);
-  --fs-modal-max-width                             : calc(var(--fs-grid-breakpoint-desktop) / 3);
-  --fs-modal-min-height                            : var(--fs-spacing-5);
-  --fs-modal-margin                                : auto;
-
-  --fs-modal-width-tablet                          : calc(100vw / 3);
-  --fs-modal-min-width-tablet                      : calc(var(--fs-grid-breakpoint-desktop) / 3);
-
-  --fs-modal-transition-timing                     : var(--fs-transition-timing);
-  --fs-modal-transition-property                   : transform;
-  --fs-modal-transition-in-function                : ease-in;
-  --fs-modal-transition-out-function               : ease-in;
-
-  position: fixed;
-  top: var(--fs-modal-position-top);
-  right: var(--fs-modal-position-right);
-  left: var(--fs-modal-position-left);
-  max-width: var(--fs-modal-max-width);
-  min-height: var(--fs-modal-min-height);
-  margin: var(--fs-modal-margin);
-
-  @include media(">=tablet") {
-    width: var(--fs-modal-width-tablet);
-    min-width: var(--fs-modal-min-width-tablet);
-  }
-
-  &[data-fs-modal-state="in"] {
-    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
-    transform: translate3d(0, 0, 0);
-  }
-
-  &[data-fs-modal-state="out"] {
-    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
-    transform: translate3d(0, 50%, 0);
-  }
-}

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

@@ -1,105 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { DiscountBadge } from '@faststore/ui'
-import ProductTitle from '.'
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/ProductTitle"
-  component={ProductTitle}
-  argTypes={{
-    title: {
-      control: { type: 'radio' },
-      options: [
-        '<h1>Apple Magic Mouse</h1>',
-        '<h2>Apple Magic Mouse</h2>',
-        '<h3>Apple Magic Mouse</h3>',
-      ],
-      mapping: {
-        '<h1>Apple Magic Mouse</h1>': <h1>Apple Magic Mouse</h1>,
-        '<h2>Apple Magic Mouse</h2>': <h2>Apple Magic Mouse</h2>,
-        '<h3>Apple Magic Mouse</h3>': <h3>Apple Magic Mouse</h3>,
-      },
-      defaultValue: '<h1>Apple Magic Mouse</h1>',
-    },
-    label: {
-      control: { type: 'radio' },
-      options: [
-        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />',
-        '<DiscountBadge listPrice={100} spotPrice={70} size="big" />',
-        '<DiscountBadge listPrice={100} spotPrice={10} size="big" />',
-      ],
-      mapping: {
-        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />': (
-          <DiscountBadge listPrice={100} spotPrice={90} size="big" />
-        ),
-        '<DiscountBadge listPrice={100} spotPrice={70} size="big" />': (
-          <DiscountBadge listPrice={100} spotPrice={70} size="big" />
-        ),
-        '<DiscountBadge listPrice={100} spotPrice={10} size="big" />': (
-          <DiscountBadge listPrice={100} spotPrice={10} size="big" />
-        ),
-      },
-      defaultValue:
-        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />',
-    },
-    refNumber: {
-      defaultValue: '99995945',
-    },
-  }}
-/>
-
-export const Template = (args) => <ProductTitle {...args} />
-
-<header>
-
-# Product Title
-
-The product title that is commonly used on Product Details Page (PDP).
-
-</header>
-
-## Usage
-
-`import ProductTitle from '../components/ui/ProductTitle'`
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-title-text-size"
-    value="var(--fs-text-size-title-product)"
-  />
-  <TokenRow
-    token="--fs-product-title-text-weight"
-    value="var(--fs-text-weight-regular)"
-  />
-  <TokenRow token="--fs-product-title-line-height" value="1.12" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Addendum
-
-<TokenTable>
-  <TokenRow
-    token="--fs-product-title-addendum-margin-top"
-    value="var(--fs-spacing-3)"
-  />
-  <TokenRow
-    token="--fs-product-title-addendum-color"
-    value="var(--fs-color-text-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-product-title-addendum-size"
-    value="var(--fs-text-size-1)"
-  />
-  <TokenRow token="--fs-product-title-addendum-line-height" value="1.7" />
-</TokenTable>

package/src/components/ui/ProductTitle/ProductTitle.tsx

@@ -1,11 +0,0 @@
-import { memo } from 'react'
-import type { ProductTitleProps } from '@faststore/ui'
-import { ProductTitle as UIProductTitle } from '@faststore/ui'
-
-import styles from './product-title.module.scss'
-
-function ProductTitle({ ...otherProps }: ProductTitleProps) {
-  return <UIProductTitle className={styles.fsProductTitle} {...otherProps} />
-}
-
-export default memo(ProductTitle)

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

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

package/src/components/ui/ProductTitle/product-title.module.scss

@@ -1,48 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-title {
-  // --------------------------------------------------------
-  // Design Tokens for ProductTitle
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-title-text-size            : var(--fs-text-size-title-product);
-  --fs-product-title-text-weight          : var(--fs-text-weight-regular);
-  --fs-product-title-line-height          : 1.12;
-
-  --fs-product-title-addendum-margin-top  : var(--fs-spacing-3);
-  --fs-product-title-addendum-color       : var(--fs-color-text-light);
-  --fs-product-title-addendum-size        : var(--fs-text-size-1);
-  --fs-product-title-addendum-line-height : 1.7;
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  [data-fs-product-title-header] {
-    display: flex;
-    column-gap: var(--fs-spacing-2);
-    justify-content: space-between;
-
-    // Title prop
-    &:first-child {
-      font-size: var(--fs-product-title-text-size);
-      font-weight: var(--fs-product-title-text-weight);
-      line-height: var(--fs-product-title-line-height);
-    }
-
-    [data-fs-badge] { white-space: nowrap; }
-
-    @include media(">=tablet", "<notebook") {
-      flex-direction: column;
-      row-gap: var(--fs-spacing-3);
-    }
-  }
-
-  [data-fs-product-title-addendum] {
-    margin-top: var(--fs-product-title-addendum-margin-top);
-    font-size: var(--fs-product-title-addendum-size);
-    line-height: var(--fs-product-title-addendum-line-height);
-    color: var(--fs-product-title-addendum-color);
-  }
-}