@faststore/core 22.42.6

package/src/stories/customizing.stories.mdx

@@ -0,0 +1,113 @@
+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 `store.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

@@ -0,0 +1,65 @@
+import { Description, Meta } from '@storybook/addon-docs'
+import { Callout } from 'src/../.storybook/components'
+
+import ButtonLink from '../components/ui/Button/ButtonLink'
+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.
+
+<ButtonLink
+  variant="tertiary"
+  href="https://nextjs.vtex.app/"
+  data-fs-button-size="small"
+>
+  NextJS Store Starter
+  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+</ButtonLink>
+
+<ButtonLink
+  variant="tertiary"
+  href="https://www.faststore.dev/reference/ui/faststore-ui"
+  data-fs-button-size="small"
+>
+  FastStore UI library
+  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+</ButtonLink>
+
+</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

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

package/src/stories/icons.stories.mdx

@@ -0,0 +1,237 @@
+import {
+  Canvas,
+  Meta,
+  Title,
+  IconGallery,
+  IconItem,
+} from '@storybook/addon-docs'
+
+import Icon from '../components/ui/Icon'
+import { Callout } from 'src/../.storybook/components'
+
+<Meta title="Media/Icons" parameters={{ options: { showToolbar: false } }} />
+
+<header>
+
+# Icons
+
+</header>
+
+This project uses SVGs from <a ahref="https://phosphoricons.com/">Phosphor icons</a>.
+
+<Callout>
+  Icons help build web pages by illustrating concepts and improving website
+  navigation. However, using icons can decrease the page's performance. One
+  option to avoid the decrease of the page's performance is to use SVGs from a
+  single SVG file, located in <code>/static/icons.svg</code>, and load them with
+  the <code>ui/Icon</code>.Please check the{' '}
+  <a href="https://github.com/vtex-sites/nextjs.store#managing-svg-icons">
+    Managing SVG Icons
+  </a>{' '}
+  section on our readme for further instructions.
+</Callout>
+
+| Weights                              |
+| ------------------------------------ |
+| thin, light, regular (default), bold |
+
+| Sizes                              |
+| ---------------------------------- |
+| 16px, 18px, 20px, 32px, 48px, 56px |
+
+<Canvas>
+  <Icon name="ShoppingCart" weight="bold" width="16" height="16" />
+  <Icon name="ShoppingCart" weight="bold" width="18" height="18" />
+  <Icon name="ShoppingCart" weight="bold" width="20" height="20" />
+  <Icon name="ShoppingCart" width="32" height="32" />
+  <Icon name="ShoppingCart" weight="light" width="48" height="48" />
+  <Icon name="ShoppingCart" weight="light" width="56" height="56" />
+</Canvas>
+
+---
+
+## UI Actions
+
+<IconGallery>
+  <IconItem name="X">
+    <Icon name="X" />
+  </IconItem>
+  <IconItem name="Plus">
+    <Icon name="Plus" />
+  </IconItem>
+  <IconItem name="PlusCircle">
+    <Icon name="PlusCircle" />
+  </IconItem>
+  <IconItem name="Minus">
+    <Icon name="Minus" />
+  </IconItem>
+  <IconItem name="MinusCircle">
+    <Icon name="MinusCircle" />
+  </IconItem>
+  <IconItem name="XCircle">
+    <Icon name="XCircle" />
+  </IconItem>
+  <IconItem name="ArrowLeft">
+    <Icon name="ArrowLeft" />
+  </IconItem>
+  <IconItem name="ArrowRight">
+    <Icon name="ArrowRight" />
+  </IconItem>
+  <IconItem name="ArrowUpRight">
+    <Icon name="ArrowUpRight" />
+  </IconItem>
+  <IconItem name="ArrowSquareOut">
+    <Icon name="ArrowSquareOut" />
+  </IconItem>
+  <IconItem name="ArrowElbowDownRight">
+    <Icon name="ArrowElbowDownRight" />
+  </IconItem>
+  <IconItem name="CaretLeft">
+    <Icon name="CaretLeft" />
+  </IconItem>
+  <IconItem name="CaretRight">
+    <Icon name="CaretRight" />
+  </IconItem>
+  <IconItem name="CaretUp">
+    <Icon name="CaretUp" />
+  </IconItem>
+  <IconItem name="CaretDown">
+    <Icon name="CaretDown" />
+  </IconItem>
+  <IconItem name="Ellipsis">
+    <Icon name="Ellipsis" />
+  </IconItem>
+  <IconItem name="Checked">
+    <Icon name="Checked" />
+  </IconItem>
+  <IconItem name="MagnifyingGlass">
+    <Icon name="MagnifyingGlass" />
+  </IconItem>
+  <IconItem name="FadersHorizontal">
+    <Icon name="FadersHorizontal" />
+  </IconItem>
+  <IconItem name="List">
+    <Icon name="List" />
+  </IconItem>
+</IconGallery>
+
+---
+
+## Common Actions
+
+<IconGallery>
+  <IconItem name="User">
+    <Icon name="User" />
+  </IconItem>
+  <IconItem name="Calendar">
+    <Icon name="Calendar" />
+  </IconItem>
+  <IconItem name="ShoppingCart">
+    <Icon name="ShoppingCart" />
+  </IconItem>
+  <IconItem name="MapPin">
+    <Icon name="MapPin" />
+  </IconItem>
+  <IconItem name="Clock">
+    <Icon name="Clock" />
+  </IconItem>
+  <IconItem name="House">
+    <Icon name="House" />
+  </IconItem>
+</IconGallery>
+
+---
+
+## Informative
+
+<IconGallery>
+  <IconItem name="ShieldCheck">
+    <Icon name="ShieldCheck" />
+  </IconItem>
+  <IconItem name="Gift">
+    <Icon name="Gift" />
+  </IconItem>
+  <IconItem name="Storefront">
+    <Icon name="Storefront" />
+  </IconItem>
+  <IconItem name="Medal">
+    <Icon name="Medal" />
+  </IconItem>
+  <IconItem name="CircleWavyCheck">
+    <Icon name="CircleWavyCheck" />
+  </IconItem>
+  <IconItem name="CircleWavyWarning">
+    <Icon name="CircleWavyWarning" />
+  </IconItem>
+  <IconItem name="Headphones">
+    <Icon name="Headphones" />
+  </IconItem>
+  <IconItem name="Truck">
+    <Icon name="Truck" />
+  </IconItem>
+  <IconItem name="Bell">
+    <Icon name="Bell" />
+  </IconItem>
+  <IconItem name="BellRinging">
+    <Icon name="BellRinging" />
+  </IconItem>
+  <IconItem name="Clock">
+    <Icon name="Clock" />
+  </IconItem>
+  <IconItem name="RocketLaunch">
+    <Icon name="RocketLaunch" />
+  </IconItem>
+  <IconItem name="House">
+    <Icon name="House" />
+  </IconItem>
+</IconGallery>
+
+---
+
+## Payment
+
+<IconGallery>
+  <IconItem name="GooglePay">
+    <Icon name="GooglePay" />
+  </IconItem>
+  <IconItem name="ApplePay">
+    <Icon name="ApplePay" />
+  </IconItem>
+  <IconItem name="Diners">
+    <Icon name="Diners" />
+  </IconItem>
+  <IconItem name="EloCard">
+    <Icon name="EloCard" />
+  </IconItem>
+  <IconItem name="Mastercard">
+    <Icon name="Mastercard" />
+  </IconItem>
+  <IconItem name="PayPal">
+    <Icon name="PayPal" />
+  </IconItem>
+  <IconItem name="Stripe">
+    <Icon name="Stripe" />
+  </IconItem>
+  <IconItem name="Visa">
+    <Icon name="Visa" />
+  </IconItem>
+</IconGallery>
+
+---
+
+## Social
+
+<IconGallery>
+  <IconItem name="Instagram">
+    <Icon name="Instagram" />
+  </IconItem>
+  <IconItem name="Pinterest">
+    <Icon name="Pinterest" />
+  </IconItem>
+  <IconItem name="Twitter">
+    <Icon name="Twitter" />
+  </IconItem>
+  <IconItem name="Facebook">
+    <Icon name="Facebook" />
+  </IconItem>
+</IconGallery>

package/src/stories/interactive-controls.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import '/.storybook/storybook.css'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Global Tokens/Interactive Controls"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+<header>
+
+# Interactive Controls
+
+`Tap`, `States` and `Sizing` definitions.
+
+</header>
+
+## Tap
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow token="--fs-control-tap-size" value="var(--fs-spacing-7)" />
+  <TokenRow
+    token="--fs-control-tap-size-smallest"
+    value="calc(var(--fs-control-tap-size) / 2)"
+  />
+  <TokenRow
+    token="--fs-control-min-height"
+    value="var(--fs-control-tap-size)"
+  />
+</TokenTable>
+
+## States
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow
+    token="--fs-control-bkg"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-control-bkg-disabled"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+</TokenTable>

package/src/stories/midnight.stories.mdx

@@ -0,0 +1,56 @@
+import { Description, Meta } from '@storybook/addon-docs'
+
+import { SectionList, SectionItem } from 'src/../.storybook/components'
+
+<Meta
+  title="Theming/Themes/Midnight"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+<header>
+
+# Midnight
+
+A darkmode theme created for testing purposes.
+
+</header>
+
+<section className="sbdocs-section-theme">
+ <div className="sbdocs-section-theme-img">
+   <img
+    src="https://vtexhelp.vtexassets.com/assets/docs/src/midnight___2bb274e36a39ff9c2cfa3dcc740cbfab.png"
+  />
+ </div>
+
+  <article>
+
+## Use `midnight` as your theme
+
+1. Import `midnight.scss` file on `src/pages/_app.tsx`
+
+```jsx
+import '../styles/themes/midnight.scss'
+```
+
+2. Go to `store.config.js` and change the `theme` to your file's name:
+
+```js
+// Theming
+theme: 'midnight',
+```
+
+3. Add the [Raleway](https://fonts.google.com/specimen/Raleway?query=raleway) font on `src/fonts/WebFonts.tsx`
+
+```tsx
+function WebFonts() {
+  return (
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap"
+    />
+  )
+}
+```
+
+  </article>
+</section>

package/src/stories/refinements.stories.mdx

@@ -0,0 +1,96 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import '/.storybook/storybook.css'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Global Tokens/Refinements"
+  parameters={{ options: { showToolbar: false } }}
+/>
+
+<header>
+
+# Refinements
+
+`Transition`, `Borders` and `Shadow` definitions.
+
+</header>
+
+## Transition
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow token="--fs-transition-timing" value=".2s" />
+  <TokenRow token="--fs-transition-property" value="all" />
+  <TokenRow token="--fs-transition-function" value="ease-in-out" />
+</TokenTable>
+
+## Borders
+
+<TokenTable title="Global Token" description="Value">
+  <TokenRow token="--fs-border-radius-small" value="1px" />
+  <TokenRow token="--fs-border-radius" value="2px" />
+  <TokenRow token="--fs-border-radius-medium" value="8px" />
+  <TokenRow token="--fs-border-radius-pill" value="100px" />
+  <TokenRow token="--fs-border-radius-circle" value="100%" />
+  <TokenDivider />
+  <TokenRow token="--fs-border-width" value="1px" />
+  <TokenRow token="--fs-border-width-thick" value="2px" />
+  <TokenRow token="--fs-border-width-thickest" value="3px" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-border-color"
+    value="var(--fs-color-neutral-4)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-hover"
+    value="var(--fs-color-main-3)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-active"
+    value="var(--fs-color-main-2)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-disabled"
+    value="var(--fs-color-neutral-6)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-border-color-light"
+    value="var(--fs-color-neutral-2)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-light-hover"
+    value="var(--fs-color-neutral-3)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-light-active"
+    value="var(--fs-color-neutral-3)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-border-color-light-disabled"
+    value="var(--fs-color-neutral-5)"
+    isColor
+  />
+</TokenTable>
+
+## Shadow
+
+<TokenTable>
+  <TokenRow token="--fs-shadow" value="none" />
+  <TokenRow token="--fs-shadow-darker" value="0 0 10px rgb(0 0 0 / 20%)" />
+  <TokenRow
+    token="--fs-shadow-hover"
+    value="0 0 0 1px var(--fs-color-main-4)"
+  />
+</TokenTable>