@faststore/core 2.0.151-alpha.0 → 2.0.153-alpha.0

package/src/stories/brandless.stories.mdx

@@ -1,87 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs'
-
-import { LinkButton } from '@faststore/ui'
-
-import Icon from '../components/ui/Icon'
-
-<Meta
-  title="Theming/Brandless"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header className="sbdocs-hero">
-
-# Brandless
-
-This themeable structure is made of two complementary layers: a useful and assorted library of templates for the components and sections, alongside a comprehensive set of design tokens to further customize them.
-
-<LinkButton
-  size="small"
-  variant="tertiary"
-  href="../?path=/docs/theming-customizing--page"
-  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-  iconPosition="right"
->
-  Customizing your store
-</LinkButton>
-
-</header>
-
-**Structural Styles**, the first layer, has foundational styles that lay things out in common design patterns for different use cases. It also covers a component's fundamental interactions, like showing/hiding a dropdown or moving a toggle’s knob to make it active.
-
-The second, **Theme**, is where the branding lives and what truly differentiates one UI from another. Graphic elements—like typography (and type scale), colors, imagery, borders, spacing, & more—are controlled by design tokens that a developer can easily tweak to create a unique look and feel.
-
-<img
-  src="https://vtexhelp.vtexassets.com/assets/docs/src/theming-intro___1d021c8548ba2338faba6dd2995bf7ce.png"
-  align="right"
-  style={{ width: '70%', display: 'block', margin: '0 auto' }}
-/>
-
-Additional styles can be added to overwrite what was set in the Structure and/or Theme, reaching a state of total flexibility and freedom. Lastly, the developer can throw away all existing FastStore CSS altogether and build it from scratch.
-
----
-
-## Theming architecture
-
-Starting from the bottom up, we have the components: fully-featured UI blocks that belong to a larger whole system. The components have their own CSS that defines their overall appearance and how things are arranged; these scoped stylesheets are the Templates. The Templates' visual properties are tied to local variables—design tokens—that draw the final picture of the component; these local, scoped variables, on the other hand, are tied to global tokens, which form the Theme.
-
-<img
-  src="https://vtexhelp.vtexassets.com/assets/docs/src/theming-architecture___f965569346d8d7d6a3de1f020f06ac99.png"
-  align="center"
-  style={{ width: '80%', display: 'block', margin: '0 auto' }}
-/>
-
----
-
-## Design tokens naming scheme
-
-### Scoped Tokens (components)
-
-All components' design tokens must follow a strict scheme to achieve predictability and cohesiveness. The tokens parts must tell:
-
-- **Namespacing**: Where this token is coming from (is it a global or a component's local part);
-- **Component**: Their semantic meaning;
-- **Type**: What property type it affects;
-- **Category** Which category of this type is going to be affected;
-- **State**: Their interactive state.
-
-![Naming scheme](https://vtexhelp.vtexassets.com/assets/docs/src/theming-naming-1___32778b6c40f12a94ac4a54a90879aeef.png)
-
-If needed, we can use other additional incrementation to the token's name, such as:
-
-- **Hierarchy**: Define its tier;
-- **Nested Element**: To sytle elements contained inside the component;
-- **Variant**: What differentiate it from the default;
-- **Situation**: When they should be used;
-
-![Naming scheme 2](https://vtexhelp.vtexassets.com/assets/docs/src/theming-naming-2___4668c9e8da8bec361681d41b6a2e7266.png)
-
-### Theme (or global design tokens)
-
-Global design tokens are parameters that affect all UI look 'n' feel. They are the main configuration file of a Theme. It's constituted of three main groups:
-
-1. Branding Core
-2. UI Essentials
-3. Refinements
-
-![Theme architecture](https://vtexhelp.vtexassets.com/assets/docs/src/theming-global-tokens___e4e339f287113ecae974234ecbad1bff.png)

package/src/stories/changelog-template.stories.mdx

@@ -1,10 +0,0 @@
-import { Description } from '@storybook/addon-docs'
-import { Meta } from '@storybook/addon-docs'
-import Changelog from '../../CHANGELOG.md'
-
-<Meta
-  title="Releases/Changelog"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<Description>{Changelog}</Description>

package/src/stories/colors.stories.mdx

@@ -1,306 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-import '/.storybook/storybook.css'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Global Tokens/Colors"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Colors
-
-The store palette with all the tones needed.
-
-</header>
-
-<ColorPalette>
-  <ColorItem
-    title="Main"
-    colors={{
-      '--fs-color-main-0': '#f1f2f3',
-      '--fs-color-main-1': '#e3e6e8',
-      '--fs-color-main-2': '#00419e',
-      '--fs-color-main-3': '#002c71',
-      '--fs-color-main-4': '#002155',
-    }}
-  />
-  <ColorItem
-    title="Accent"
-    colors={{
-      '--fs-color-accent-0': '#f1f2f3',
-      '--fs-color-accent-1': '#e3e6e8',
-      '--fs-color-accent-2': '#74808b',
-      '--fs-color-accent-3': '#5d666f',
-      '--fs-color-accent-4': '#171a1c',
-    }}
-  />
-  <ColorItem
-    title="Neutral"
-    colors={{
-      '--fs-color-neutral-0': '#ffffff',
-      '--fs-color-neutral-1': '#f1f2f3',
-      '--fs-color-neutral-2': '#e3e6e8',
-      '--fs-color-neutral-3': '#c7ccd1',
-      '--fs-color-neutral-4': '#9099a2',
-      '--fs-color-neutral-5': '#74808b',
-      '--fs-color-neutral-6': '#5d666f',
-      '--fs-color-neutral-7': '#171a1c',
-    }}
-  />
-</ColorPalette>
-
----
-
-## Semantical tokens
-
-### Hierarchy
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow
-    token="--fs-color-primary-text"
-    value="var(--fs-color-text-inverse)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-primary-bkg"
-    value="var(--fs-color-main-2)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-primary-bkg-hover"
-    value="var(--fs-color-main-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-primary-bkg-active"
-    value="var(--fs-color-main-4)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-primary-bkg-light"
-    value="var(--fs-color-main-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-primary-bkg-light-active"
-    value="var(--fs-color-main-1)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-secondary-text"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow token="--fs-color-secondary-bkg" value="transparent" isColor />
-  <TokenRow
-    token="--fs-color-secondary-bkg-hover"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-secondary-bkg-active"
-    value="var(--fs-color-main-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-secondary-bkg-light"
-    value="var(--fs-color-main-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-secondary-bkg-light-active"
-    value="var(--fs-color-secondary-bkg-light)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-tertiary-text"
-    value="var(--fs-color-link)"
-    isColor
-  />
-  <TokenRow token="--fs-color-tertiary-bkg" value="transparent" isColor />
-  <TokenRow
-    token="--fs-color-tertiary-bkg-hover"
-    value="var(--fs-color-main-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-tertiary-bkg-active"
-    value="var(--fs-color-main-1)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-tertiary-bkg-light"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-tertiary-bkg-light-active"
-    value="var(--fs-color-tertiary-bkg-light)"
-    isColor
-  />
-</TokenTable>
-
-### Components & States
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow
-    token="--fs-color-body-bkg"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-action-text"
-    value="var(--fs-color-text-inverse)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-action-bkg"
-    value="var(--fs-color-accent-4)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-action-bkg-hover"
-    value="var(--fs-color-accent-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-action-bkg-active"
-    value="var(--fs-color-accent-2)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-action-bkg-light"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-action-bkg-light-active"
-    value="var(--fs-color-tertiary-bkg-light)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-color-link" value="var(--fs-color-main-2)" isColor />
-  <TokenRow
-    token="--fs-color-link-hover"
-    value="var(--fs-color-main-2)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-link-active"
-    value="var(--fs-color-main-4)"
-    isColor
-  />
-  <TokenRow token="--fs-color-link-visited" value="#6058ba" isColor />
-  <TokenRow
-    token="--fs-color-link-inverse"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-color-text" value="var(--fs-color-neutral-7)" isColor />
-  <TokenRow
-    token="--fs-color-text-light"
-    value="var(--fs-color-neutral-6)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-text-inverse"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-text-display"
-    value="var(--fs-color-neutral-7)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-color-focus-ring" value="#8db6fa" isColor />
-  <TokenRow token="--fs-color-focus-ring-outline" value="#8db6fa80" isColor />
-  <TokenRow token="--fs-color-focus-ring-danger" value="#e1adad" isColor />
-</TokenTable>
-
-### Situations
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-color-success-text" value="#1e493b" isColor />
-  <TokenRow token="--fs-color-success-bkg" value="#b3ebd5" isColor />
-  <TokenRow
-    token="--fs-color-success-border"
-    value="var(--fs-color-success-text)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-warning-text"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow token="--fs-color-warning-bkg" value="#fdec8d" isColor />
-  <TokenRow
-    token="--fs-color-warning-border"
-    value="var(--fs-color-warning-text)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-color-danger-text" value="#cb4242" isColor />
-  <TokenRow
-    token="--fs-color-danger-bkg"
-    value="var(--fs-color-focus-ring-danger)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-danger-border"
-    value="var(--fs-color-danger-text)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-color-info-text" value="var(--fs-color-text)" isColor />
-  <TokenRow
-    token="--fs-color-info-bkg"
-    value="var(--fs-color-main-1)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-highlighted-text"
-    value="var(--fs-color-text-display)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-highlighted-bkg"
-    value="var(--fs-color-accent-0)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-neutral-text"
-    value="var(--fs-color-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-neutral-bkg"
-    value="var(--fs-color-neutral-1)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-color-disabled-text"
-    value="var(--fs-color-neutral-6)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-color-disabled-bkg"
-    value="var(--fs-color-neutral-2)"
-    isColor
-  />
-</TokenTable>

package/src/stories/customizing.stories.mdx

@@ -1,113 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs'
-
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-<Meta
-  title="Theming/Customizing"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header className="sbdocs-hero">
-
-# Customizing
-
-**Design tokens** are parameters that affect all UI look 'n' feel and they are the **main configuration** file of a Theme. Component-specific tokens often inherit from global tokens but are named specifically to apply those tokens in component development.
-
-</header>
-
-## Global Tokens
-
-FastStore uses a default theme called `Brandless`, which provides structural styles for your components and pages. Please read <a href="../?path=/docs/theming-brandless--page">Brandless's page</a> to further information about our themeable architecture.
-
-Its presets are defined on `src/styles/global/tokens.scss` and it's separated in these main areas:
-
-<SectionList grid="grid" classes="sbdocs-tokens-links">
-  <SectionItem
-    title="Colors"
-    actionPath="../?path=/docs/global-tokens-colors--page"
-    description={<>The store palette with all the tones needed.</>}
-  >
-    <FooterLinks />
-  </SectionItem>
-  <SectionItem
-    title="Typography"
-    actionPath="../?path=/docs/global-tokens-typography--page"
-    description={
-      <>
-        A standard scale and basic definitions for your text:{' '}
-        <code>font family</code>,<code>weight</code> and <code>sizes</code>.
-      </>
-    }
-  >
-    <IncentivesFooter />
-  </SectionItem>
-  <SectionItem
-    title="Spacing"
-    actionPath="../?path=/docs/global-tokens-spacing--page"
-    description={
-      <>
-        All tokens used for spacings on the store: <code>padding</code>,{' '}
-        <code>margins</code> and <code>sizes</code>. It's also used as base for
-        grid tokens.
-      </>
-    }
-  >
-    <FooterLinks />
-  </SectionItem>
-  <SectionItem
-    title="Grid & Layout"
-    actionPath="../?path=/docs/global-tokens-grid-layout--page"
-    description={
-      <>
-        <code>Padding</code>, <code>Container</code>, <code>Gaps</code> and{' '}
-        <code>Breakpoints</code> definitions.
-      </>
-    }
-  >
-    <IncentivesFooter />
-  </SectionItem>
-  <SectionItem
-    title="Interactive Controls"
-    actionPath="../?path=/docs/global-tokens-interactive-controls--page"
-    description={
-      <>
-        <code>Tap</code>, <code>States</code> and <code>Sizing</code>{' '}
-        definitions.
-      </>
-    }
-  >
-    <FooterLinks />
-  </SectionItem>
-  <SectionItem
-    title="Refinements"
-    actionPath="../?path=/docs/global-tokens-refinements--page"
-    description={
-      <>
-        <code>Transition</code>, <code>Borders</code> and <code>Shadow</code>{' '}
-        definitions.
-      </>
-    }
-  >
-    <IncentivesFooter />
-  </SectionItem>
-</SectionList>
-
----
-
-## Build your new theme
-
-1. Create a new `.scss` file on `src/styles/themes` and overwrite the tokens you want: e.g. `my-theme.scss`
-2. Import `my-theme.scss` file on `src/pages/_app.tsx`
-
-```jsx
-import '../styles/themes/my-theme.scss'
-```
-
-3. Go to `faststore.config.js` and change the `theme` to your file's name:
-
-```js
-// Theming
-theme: 'my-theme',
-```
-
-If you want, you can work on `custom-theme.scss` file that's ready to use. Also, we provide two themes as examples: [soft-blue](?path=/docs/theming-themes-soft-blue--page) and [midnight](?path=/docs/theming-themes-midnight--page).

package/src/stories/getting-started.stories.mdx

@@ -1,68 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs'
-import { Callout } from 'src/../.storybook/components'
-
-import { LinkButton } from '@faststore/ui'
-
-import Icon from '../components/ui/Icon'
-
-<Meta
-  title="Getting Started"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header className="sbdocs-hero">
-
-# Getting Started
-
-FastStore NextJS Starter's components library is an ecommerce-focused library **created by VTEX** that provides best-of-breed components, blazing-fast performance, and a frictionless development experience to create storefronts using FastStore UI library as base.
-
-<LinkButton
-  size="small"
-  variant="tertiary"
-  href="https://nextjs.vtex.app/"
-  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-  iconPosition="right"
->
-  NextJS Store Starter
-</LinkButton>
-
-<LinkButton
-  size="small"
-  variant="tertiary"
-  href="https://www.faststore.dev/reference/ui/faststore-ui"
-  icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-  iconPosition="right"
->
-  FastStore UI library
-</LinkButton>
-
-</header>
-
-<Callout>
-  When trying to switch between
-  <code>Sandbox</code> and <code>Docs</code> tabs, the <code>Sandbox</code> tab might
-  not be working properly, try to refresh the page after switching tabs. It seems
-  to be a <a href="https://github.com/storybookjs/storybook/issues/17625">
-    bug in the Storybook
-  </a>.
-</Callout>
-
-## Sections
-
-This product is designed and built following the **Atomic Design pattern**. Atomic Design breaks user interfaces hierarchically into smaller and simpler components. In this Storybook, we organized our components in the following groups:
-
-- Atoms
-- Molecules
-- Organisms
-- Features: group of components related to a specific feature, such as `Regionalization`.
-
----
-
-## Subsections
-
-Also, on the component's pages we use the following terms:
-
-- `Compound Components`: list components that compound it.
-- `Related Components`: list components that are related.
-- `Use Cases/Examples`: list examples of where the components are applied.
-- `Components`: list components that are part of a Feature.

package/src/stories/grid-layout.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-import '/.storybook/storybook.css'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Global Tokens/Grid & Layout"
-  parameters={{ options: { showToolbar: false } }}
-/>
-
-<header>
-
-# Grid & Layout
-
-`Padding`, `Container`, `Gaps` and `Breakpoints` definitions.
-
-</header>
-
-## Padding
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-grid-padding" value="var(--fs-spacing-3)" />
-</TokenTable>
-
-## Container
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-grid-max-width" value="var(--fs-spacing-3)" />
-</TokenTable>
-
-## Gaps
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-grid-gap-0" value="var(--fs-spacing-1)" />
-  <TokenRow token="--fs-grid-gap-1" value="var(--fs-spacing-2)" />
-  <TokenRow token="--fs-grid-gap-2" value="var(--fs-spacing-3)" />
-  <TokenRow token="--fs-grid-gap-3" value="var(--fs-spacing-4)" />
-  <TokenRow token="--fs-grid-gap-4" value="var(--fs-spacing-5)" />
-</TokenTable>
-
-## Breakpoints
-
-<TokenTable title="Global Token" description="Value">
-  <TokenRow token="--fs-grid-breakpoint-phone" value="320px" />
-  <TokenRow token="--fs-grid-breakpoint-phonemid" value="375px" />
-  <TokenRow token="--fs-grid-breakpoint-tablet" value="768px" />
-  <TokenRow token="--fs-grid-breakpoint-notebook" value="1280px" />
-  <TokenRow token="--fs-grid-breakpoint-desktop" value="1440px" />
-</TokenTable>