@faststore/core 22.42.6

package/src/sdk/ui/useOnClickOutside.ts

@@ -0,0 +1,39 @@
+import type { RefObject } from 'react'
+import { useEffect } from 'react'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Handler = (event: any) => void
+
+export default function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: Handler
+) {
+  useEffect(
+    () => {
+      const listener: Handler = (event) => {
+        if (!ref.current || ref.current.contains(event.target)) {
+          return
+        }
+
+        handler(event)
+      }
+
+      document.addEventListener('mousedown', listener)
+      document.addEventListener('touchstart', listener)
+
+      return () => {
+        document.removeEventListener('mousedown', listener)
+        document.removeEventListener('touchstart', listener)
+      }
+    },
+    /**
+     * Add ref and handler to effect dependencies.
+     * It's worth noting that because passed in handler is a new
+     * function on every render that will cause this effect
+     * callback/cleanup to run every render. It's not a big deal
+     * but to optimize you can wrap handler in useCallback before
+     * passing it into this hook.
+     */
+    [ref, handler]
+  )
+}

package/src/sdk/ui/useScrollDirection.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export default function useScrollDirection() {
+  const [scrollDirection, setScrollDirection] = useState<string>('')
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    let lastScrollY = window.scrollY
+
+    const updateScrollDirection = () => {
+      const { scrollY } = window
+      const direction = scrollY > lastScrollY ? 'down' : 'up'
+
+      if (
+        !isPending &&
+        direction !== scrollDirection &&
+        (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)
+      ) {
+        startTransition(() => setScrollDirection(direction))
+      }
+
+      lastScrollY = scrollY > 0 ? scrollY : 0
+    }
+
+    window.addEventListener('scroll', updateScrollDirection)
+
+    return () => window.removeEventListener('scroll', updateScrollDirection)
+  }, [isPending, scrollDirection])
+
+  return scrollDirection
+}

package/src/sdk/useStore.ts

@@ -0,0 +1,24 @@
+import { createBaseStore } from '@faststore/sdk'
+import { useSyncExternalStore } from 'react'
+import type { Store } from '@faststore/sdk'
+
+export const useStore = <T>(store: Store<T>) =>
+  useSyncExternalStore(store.subscribe, store.read, store.readInitial)
+
+type CB<T> = (val: T) => Promise<T | null>
+
+export const createValidationStore = <T>(cb: CB<T>) => {
+  const store = createBaseStore(false)
+
+  const onValidate = async (val: T) => {
+    try {
+      store.set(true)
+
+      return await cb(val)
+    } finally {
+      store.set(false)
+    }
+  }
+
+  return [store, onValidate] as [Store<boolean>, CB<T>]
+}

package/src/server/cms.ts

@@ -0,0 +1,66 @@
+import ClientCMS from '@vtex/client-cms'
+import type { Locator, ContentData } from '@vtex/client-cms'
+
+import config from '../../store.config'
+
+export const clientCMS = new ClientCMS({
+  workspace: config.api.workspace,
+  tenant: config.api.storeId,
+})
+
+type Options =
+  | Locator
+  | {
+      contentType: string
+      filters?: Record<string, string>
+    }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isLocator = (x: any): x is Locator =>
+  typeof x.contentType === 'string' &&
+  (typeof x.releaseId === 'string' || typeof x.documentId === 'string')
+
+export const getPage = async <T extends ContentData>(options: Options) => {
+  const result = await (isLocator(options)
+    ? clientCMS.getCMSPage(options).then((page) => ({ data: [page] }))
+    : clientCMS.getCMSPagesByContentType(options.contentType, options.filters))
+
+  const pages = result.data
+
+  if (!pages[0]) {
+    throw new Error(
+      `Missing content on the CMS for content type ${
+        options.contentType
+      }. Add content before proceeding. Context: ${JSON.stringify(
+        options,
+        null,
+        2
+      )}`
+    )
+  }
+
+  if (pages.length !== 1) {
+    throw new Error(
+      `Multiple content defined on the CMS for content type ${
+        options.contentType
+      }. Remove duplicated content before proceeding. Context: ${JSON.stringify(
+        options,
+        null,
+        2
+      )}`
+    )
+  }
+
+  return pages[0] as T
+}
+
+export type PageContentType = ContentData & {
+  settings: {
+    seo: {
+      slug: string
+      title: string
+      description: string
+      canonical?: string
+    }
+  }
+}

package/src/server/index.ts

@@ -0,0 +1,105 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { FormatErrorHandler } from '@envelop/core'
+import {
+  envelop,
+  useAsyncSchema,
+  useExtendContext,
+  useMaskedErrors,
+} from '@envelop/core'
+import { useGraphQlJit } from '@envelop/graphql-jit'
+import { useParserCache } from '@envelop/parser-cache'
+import { useValidationCache } from '@envelop/validation-cache'
+import { getContextFactory, getSchema, isFastStoreError } from '@faststore/api'
+import { GraphQLError } from 'graphql'
+import type { Maybe, Options as APIOptions, CacheControl } from '@faststore/api'
+
+import persisted from '../../@generated/graphql/persisted.json'
+import storeConfig from '../../store.config'
+
+interface ExecuteOptions<V = Record<string, unknown>> {
+  operationName: string
+  variables: V
+  query?: string | null
+}
+
+const persistedQueries = new Map(Object.entries(persisted))
+
+const apiOptions: APIOptions = {
+  platform: storeConfig.platform as APIOptions['platform'],
+  account: storeConfig.api.storeId,
+  environment: storeConfig.api.environment as APIOptions['environment'],
+  hideUnavailableItems: storeConfig.api.hideUnavailableItems,
+  channel: storeConfig.session.channel,
+  locale: storeConfig.session.locale,
+  flags: {
+    enableOrderFormSync: true,
+  },
+}
+
+export const apiSchema = getSchema(apiOptions)
+
+const apiContextFactory = getContextFactory(apiOptions)
+
+const formatError: FormatErrorHandler = (err) => {
+  if (err instanceof GraphQLError && isFastStoreError(err.originalError)) {
+    return err
+  }
+
+  console.error(err)
+
+  return new GraphQLError('Sorry, something went wrong.')
+}
+
+const getEnvelop = async () =>
+  envelop({
+    plugins: [
+      useAsyncSchema(apiSchema),
+      useExtendContext(apiContextFactory),
+      useMaskedErrors({ formatError }),
+      useGraphQlJit(),
+      useValidationCache(),
+      useParserCache(),
+    ],
+  })
+
+const envelopPromise = getEnvelop()
+
+export const execute = async <V extends Maybe<{ [key: string]: unknown }>, D>(
+  options: ExecuteOptions<V>,
+  envelopContext = { headers: {} }
+): Promise<{
+  data: D
+  errors: unknown[]
+  extensions: { cacheControl?: CacheControl }
+}> => {
+  const { operationName, variables, query: maybeQuery } = options
+  const query = maybeQuery ?? persistedQueries.get(operationName)
+
+  if (query == null) {
+    throw new Error(`No query found for operationName: ${operationName}`)
+  }
+
+  const enveloped = await envelopPromise
+  const {
+    parse,
+    contextFactory,
+    execute: run,
+    schema,
+  } = enveloped(envelopContext)
+
+  const contextValue = await contextFactory(envelopContext)
+
+  const { data, errors } = (await run({
+    schema,
+    document: parse(query),
+    variableValues: variables,
+    contextValue,
+    operationName,
+  })) as { data: D; errors: unknown[] }
+
+  return {
+    data,
+    errors,
+    extensions: { cacheControl: contextValue.cacheControl },
+  }
+}

package/src/stories/brandless.stories.mdx

@@ -0,0 +1,85 @@
+import { Description, Meta } from '@storybook/addon-docs'
+
+import ButtonLink from '../components/ui/Button/ButtonLink'
+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.
+
+<ButtonLink
+  variant="tertiary"
+  href="../?path=/docs/theming-customizing--page"
+  data-fs-button-size="small"
+>
+  Customizing your store
+  <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+</ButtonLink>
+
+</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

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

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