@faststore/core 22.42.6

package/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["@faststore/graphql-utils/babel"]
+}

package/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,8 @@
+package.json
+node_modules/
+public/
+coverage/
+.vscode/
+.cache/
+@generated
+src/typings/

package/.eslintrc

@@ -0,0 +1,21 @@
+{
+  "extends": [
+    "vtex-react/gatsby",
+    "next/core-web-vitals"
+  ],
+  "root": true,
+  "rules": {
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "jsx-a11y/anchor-is-valid": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "ignorePatterns": [
+    "public/~partytown/*",
+    "next-env.d.ts"
+  ]
+}

package/.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Make @vtex-sites/cms-schema default reviewer for all schema changes for CMS
+src/@vtex/gatsby-plugin-cms/ @vtex-sites/cms-schema

package/.github/workflows/release.yml

@@ -0,0 +1,40 @@
+# This Action should run on main branch and verify lint, test, and then publish the version on npm
+name: CD
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Release
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    if: github.repository == 'vtex-sites/nextjs.store' && !startsWith(github.event.head_commit.message, 'chore(release):')
+
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+        with:
+          token: ${{ secrets.VTEX_GITHUB_BOT_TOKEN }}
+          fetch-depth: 2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: 'yarn'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Configure CI Git User
+        run: |
+          git config user.name vtexgithubbot
+          git config user.email vtexgithubbot@github.com
+
+      - name: Install dependencies
+        run: yarn install --verbose
+
+      - name: Release
+        run: yarn release

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

package/.prettierignore

@@ -0,0 +1,8 @@
+package.json
+node_modules/
+public/
+coverage/
+.vscode/
+.cache/
+__generated__
+src/typings/

package/.prettierrc

@@ -0,0 +1 @@
+"@vtex/prettier-config"

package/.release-it.json

@@ -0,0 +1,31 @@
+{
+  "git": {
+    "commitMessage": "chore(release): ${version}"
+  },
+  "npm": {
+    "publish": true
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": {
+        "name": "conventionalcommits",
+        "types": [
+          { "type": "feat", "section": "Features" },
+          { "type": "fix", "section": "Bug Fixes" },
+          { "type": "chore", "section": "Chores" },
+          { "type": "docs", "section": "Documentation" },
+          { "type": "style", "section": "Style changes" },
+          { "type": "refactor", "section": "Refactoring" },
+          { "type": "perf", "section": "Performance" },
+          { "type": "test", "section": "Tests" }
+        ]
+      },
+      "infile": "CHANGELOG.md",
+      "header": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog),\nand this project adheres to [Calendar Versioning](https://calver.org/)."
+    },
+    "@csmith/release-it-calver-plugin": {
+      "format": "yy.0w.minor",
+      "increment": "calendar"
+    }
+  }
+}

package/.storybook/components/BestPractices.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+type BestPracticesProps = {
+  title?: string
+  description?: string
+}
+
+const BestPractices = ({ children }: PropsWithChildren<BestPracticesProps>) => {
+  return (
+    <>
+      <h2 className="sbdocs sbdocs-h2">Best Practices</h2>
+      <section className="sbdocs sbdocs-best-practices">{children}</section>
+    </>
+  )
+}
+
+export default BestPractices

package/.storybook/components/BestPracticesRule.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react'
+
+type BestPracticesRuleProps = {
+  recommendedUsage?: ReactNode
+  discouragedUsage?: ReactNode
+  recommendedDescription: string | ReactNode
+  discouragedDescription: string | ReactNode
+}
+
+const BestPracticesRule = ({
+  recommendedUsage,
+  discouragedUsage,
+  recommendedDescription,
+  discouragedDescription,
+}: BestPracticesRuleProps) => {
+  return (
+    <section className="sbdocs-best-practices-rule">
+      <article>
+        {recommendedUsage && <div>{recommendedUsage}</div>}
+        <article className="sbdocs-best-practices-text">
+          <h3 className="sbdocs sbdocs-h3">
+            <span role="img" aria-label="Check Mark">
+              &#9989;
+            </span>{' '}
+            Do
+          </h3>
+          <p>{recommendedDescription}</p>
+        </article>
+      </article>
+      <article>
+        {discouragedUsage && <div>{discouragedUsage}</div>}
+        <article className="sbdocs-best-practices-text">
+          <h3 className="sbdocs sbdocs-h3">
+            <span aria-label="Cross Mark">&#10060;</span> Don't
+          </h3>
+          <p>{discouragedDescription}</p>
+        </article>
+      </article>
+    </section>
+  )
+}
+
+export default BestPracticesRule

package/.storybook/components/Callout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Callout = ({ children }) => {
+  return (
+    <section className="sbdocs-callout">
+      <span aria-label="Warning">&#x1F4A1;</span>
+      <small>{children}</small>
+    </section>
+  )
+}
+
+export default Callout

package/.storybook/components/SectionItem.tsx

@@ -0,0 +1,44 @@
+import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react'
+
+import ButtonLink from '../../src/components/ui/Button/ButtonLink'
+import Icon from '../../src/components/ui/Icon'
+
+type SectionItemProps = {
+  title: string
+  description: string | ReactNode
+  actionPath?: string
+  containerStyle?: CSSProperties
+}
+
+const SectionItem = ({
+  title,
+  description,
+  children,
+  actionPath,
+  containerStyle,
+  ...otherProps
+}: PropsWithChildren<SectionItemProps>) => {
+  return (
+    <li className="sbdocs-li" {...otherProps}>
+      <div className="sbdocs-div" style={containerStyle}>
+        {children}
+      </div>
+      <article className="sbdocs-list-text">
+        <h3 className="sbdocs sbdocs-h3">{title}</h3>
+        <p className="sbdocs sbdocs-p">{description}</p>
+        {actionPath && (
+          <ButtonLink
+            variant="tertiary"
+            href={actionPath}
+            data-fs-button-size="small"
+          >
+            See more
+            <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+          </ButtonLink>
+        )}
+      </article>
+    </li>
+  )
+}
+
+export default SectionItem

package/.storybook/components/SectionList.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+type SectionListProps = {
+  grid?: 'row' | 'grid'
+  classes?: string
+}
+
+const SectionList = ({
+  children,
+  classes,
+  grid = 'row',
+}: PropsWithChildren<SectionListProps>) => {
+  return (
+    <section className={`${classes} sbdocs-list`}>
+      <ul
+        className={`sbdocs-ul ${
+          grid === 'grid' ? 'sbdocs-ul-grid' : 'sbdocs-ul-row'
+        }`}
+      >
+        {children}
+      </ul>
+    </section>
+  )
+}
+
+export default SectionList

package/.storybook/components/TokenDivider.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const TokenDivider = () => {
+  return (
+    <tr className="token-divider">
+      <td></td>
+      <td></td>
+    </tr>
+  )
+}
+
+export default TokenDivider

package/.storybook/components/TokenRow.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+import { Code } from '@storybook/components'
+
+type TokenRowProps = {
+  token: string
+  value: string
+  isColor?: boolean
+  globalValue?: string
+}
+
+const TokenRow = ({
+  token,
+  value,
+  globalValue,
+  isColor = false,
+}: TokenRowProps) => {
+  return (
+    <tr>
+      <td>
+        <Code>{token}</Code>
+      </td>
+      <td>
+        {isColor && (
+          <div style={{ backgroundColor: globalValue ? globalValue : value }} />
+        )}
+        <Code>{value}</Code>
+      </td>
+    </tr>
+  )
+}
+
+export default TokenRow

package/.storybook/components/TokenTable.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react'
+import { Table } from '@storybook/components'
+
+type TokenTableProps = {
+  title?: string
+  description?: string
+  children: ReactNode
+}
+
+const TokenTable = ({
+  title = 'Local token',
+  description = 'Default value/Global token linked',
+  children,
+}: TokenTableProps) => {
+  return (
+    <Table
+      style={{
+        width: '100%',
+      }}
+      className="sbdocs sbdocs-table"
+    >
+      <thead>
+        <tr>
+          <th>{title}</th>
+          <th>{description}</th>
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </Table>
+  )
+}
+
+export default TokenTable

package/.storybook/components/index.ts

@@ -0,0 +1,8 @@
+export { default as TokenTable } from './TokenTable'
+export { default as TokenRow } from './TokenRow'
+export { default as BestPractices } from './BestPractices'
+export { default as BestPracticesRule } from './BestPracticesRule'
+export { default as TokenDivider } from './TokenDivider'
+export { default as SectionList } from './SectionList'
+export { default as SectionItem } from './SectionItem'
+export { default as Callout } from './Callout'

package/.storybook/main.js

@@ -0,0 +1,59 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+const { resolve } = require('path')
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        outline: false,
+      },
+    },
+    '@storybook/addon-a11y',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5',
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    config.module.rules[0].use[0].options.plugins.push(
+      require.resolve('@faststore/graphql-utils/babel')
+    )
+
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+        configFile: resolve(__dirname, '../tsconfig.json'),
+      }),
+    ]
+
+    // SCSS import and camelCase support for CSS modules
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            modules: {
+              exportLocalsConvention: 'camelCase',
+            },
+          },
+        },
+        {
+          loader: 'sass-loader',
+        },
+      ],
+      include: resolve(__dirname, '../'),
+    })
+
+    return config
+  },
+}

package/.storybook/manager-head.html

@@ -0,0 +1,9 @@
+<style>
+  #storybook-explorer-menu a:hover { background-color: #d8e2ff; }
+
+  #storybook-explorer-menu a[data-selected="true"],
+  #storybook-explorer-menu a[data-selected="true"]:hover {
+    color: #fff;
+    background-color: #001947;
+  }
+</style>

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import customTheme from './theme'
+
+addons.setConfig({
+  theme: customTheme,
+})

package/.storybook/mocks/cart-sidebar.js

@@ -0,0 +1,40 @@
+export const cartItem = {
+  id: '39542524',
+  price: 656.5,
+  listPrice: 892.43,
+  seller: {
+    identifier: '1',
+  },
+  quantity: 1,
+  itemOffered: {
+    sku: '39542524',
+    name: 'pink',
+    gtin: '0001078884042',
+    image: [
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165082/sed.jpg?v=637752996157770000',
+        alternateName: 'accusamus',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165079/quis.jpg?v=637752996135400000',
+        alternateName: 'dolorem',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165080/tempora.jpg?v=637752996141030000',
+        alternateName: 'enim',
+      },
+      {
+        url: 'https://storeframework.vtexassets.com/arquivos/ids/165081/est.jpg?v=637752996144600000',
+        alternateName: 'ea',
+      },
+    ],
+    brand: {
+      name: 'iRobot',
+    },
+    isVariantOf: {
+      productGroupID: '99483893',
+      name: 'Tasty Concrete Computer',
+    },
+    additionalProperty: [],
+  },
+}

package/.storybook/mocks/filter-slider.js

@@ -0,0 +1,59 @@
+export const facets = [
+  {
+    key: 'price',
+    label: 'Preço',
+    min: {
+      selected: 1.67,
+      absolute: 1.67,
+    },
+    max: {
+      selected: 889.53,
+      absolute: 889.53,
+    },
+    __typename: 'StoreFacetRange',
+  },
+  {
+    key: 'category-2',
+    label: 'Categoria',
+    values: [
+      {
+        label: 'Chairs',
+        value: 'chairs',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Desks',
+        value: 'desks',
+        selected: false,
+        quantity: 125,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+  {
+    key: 'brand',
+    label: 'Marca',
+    values: [
+      {
+        label: 'Acer',
+        value: 'acer',
+        selected: true,
+        quantity: 138,
+      },
+      {
+        label: 'Adidas',
+        value: 'adidas',
+        selected: false,
+        quantity: 121,
+      },
+      {
+        label: 'Nike',
+        value: 'nike',
+        selected: false,
+        quantity: 150,
+      },
+    ],
+    __typename: 'StoreFacetBoolean',
+  },
+]

package/.storybook/mocks/index.ts

@@ -0,0 +1,5 @@
+import './searchHistory'
+
+export { product } from './product'
+export { productGridItems } from './productGridItems'
+export { searchTerms } from './searchTerms'

package/.storybook/mocks/product.ts

@@ -0,0 +1,67 @@
+export const product = {
+  id: '99988212',
+  slug: 'apple-magic-mouse-99988212',
+  sku: '99988212',
+  brand: {
+    brandName: 'adidas',
+    name: 'adidas',
+  },
+  name: 'Magic white',
+  gtin: '1503',
+  isVariantOf: {
+    productGroupID: '99995945',
+    name: 'Apple Magic Mouse',
+  },
+  image: [
+    {
+      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',
+    },
+  ],
+  offers: {
+    lowPrice: 950,
+    offers: [
+      {
+        availability: 'https://schema.org/InStock',
+        price: 950,
+        listPrice: 999,
+        quantity: 10000,
+        seller: {
+          identifier: '1',
+        },
+      },
+    ],
+  },
+}