@faststore/core 22.42.6

package/src/components/search/SearchSuggestions/SearchSuggestions.tsx

@@ -0,0 +1,136 @@
+import { List as UIList } from '@faststore/ui'
+import type { HTMLAttributes } from 'react'
+import { Fragment } from 'react'
+
+import SearchProductCard from 'src/components/search/SearchProductCard'
+import Icon from 'src/components/ui/Icon'
+import Link from 'src/components/ui/Link'
+import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import styles from '../search.module.scss'
+
+function formatSearchTerm(
+  indexSubstring: number,
+  searchTerm: string,
+  suggestion: string
+) {
+  if (indexSubstring === 0) {
+    return searchTerm
+      .split('')
+      .map((char, idx) =>
+        idx === 0 && suggestion.indexOf(char.toUpperCase()) === 0
+          ? char.toUpperCase()
+          : char.toLowerCase()
+      )
+      .join('')
+  }
+
+  return searchTerm.toLowerCase()
+}
+
+function handleSuggestions(suggestion: string, searchTerm: string) {
+  const suggestionSubstring = suggestion
+    .toLowerCase()
+    .split(searchTerm.toLowerCase())
+
+  return (
+    <p>
+      {suggestionSubstring.map((substring, indexSubstring) => (
+        <Fragment key={[substring, indexSubstring].join()}>
+          {substring.length > 0 && (
+            <b data-fs-search-item-bold>
+              {indexSubstring === 0
+                ? substring.charAt(0).toUpperCase() + substring.slice(1)
+                : substring}
+            </b>
+          )}
+          {indexSubstring !== suggestionSubstring.length - 1 &&
+            formatSearchTerm(indexSubstring, searchTerm, suggestion)}
+        </Fragment>
+      ))}
+    </p>
+  )
+}
+
+export interface SearchSuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Term researched.
+   */
+  term?: string
+  /**
+   * Suggestion terms.
+   */
+  terms?: Array<{ value: string }>
+  /**
+   * Array with top search terms.
+   */
+  products?: ProductSummary_ProductFragment[]
+}
+
+function SearchSuggestions({
+  testId = 'suggestions',
+  term = '',
+  terms = [],
+  products = [],
+  ...otherProps
+}: SearchSuggestionsProps) {
+  const { onSearchInputSelection } = useSearchInput()
+
+  return (
+    <section
+      data-testid={testId}
+      data-fs-search
+      className={styles.fsSearch}
+      {...otherProps}
+    >
+      {terms.length > 0 && (
+        <UIList data-fs-search-section="terms">
+          {terms?.map(({ value: suggestion }) => (
+            <li key={suggestion} data-fs-search-item>
+              <Link
+                data-fs-search-item-link
+                href={formatSearchPath(suggestion)}
+                onClick={() => {
+                  onSearchInputSelection?.(
+                    suggestion,
+                    formatSearchPath(suggestion)
+                  )
+                }}
+              >
+                <Icon
+                  name="MagnifyingGlass"
+                  width={18}
+                  height={18}
+                  data-fs-search-item-icon
+                />
+                {handleSuggestions(suggestion, term)}
+              </Link>
+            </li>
+          ))}
+        </UIList>
+      )}
+
+      {products.length > 0 && (
+        <div data-fs-search-section>
+          <div data-fs-search-header>
+            <p data-fs-search-title>Suggested Products</p>
+          </div>
+          <UIList>
+            {products.map((product, index) => (
+              <li key={product.id} data-fs-search-item>
+                <SearchProductCard product={product} index={index} />
+              </li>
+            ))}
+          </UIList>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default SearchSuggestions

package/src/components/search/SearchSuggestions/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchSuggestions'
+export type { SearchSuggestionsProps } from './SearchSuggestions'

package/src/components/search/SearchTop/SearchTop.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { rest } from 'msw'
+
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import { searchTerms } from 'src/../.storybook/mocks'
+
+import SearchTop from './SearchTop'
+import { msw } from '../searchMock'
+
+<Meta component={SearchTop} title="Features/Search/SearchTop" />
+
+export const Template = (args) => (
+  <div
+    style={{
+      maxWidth: '600px',
+      margin: '0 auto',
+      padding: '0 16px',
+      background: 'white',
+    }}
+  >
+    <SearchInputProvider>
+      <SearchTop {...args} />
+    </SearchInputProvider>
+  </div>
+)
+
+<header>
+
+# Search Top
+
+This section displays the most searched terms by customers.
+
+</header>
+
+## Usage
+
+`import SearchTop from 'src/components/search/SearchTop'`
+
+<Canvas>
+  <Story
+    name="default"
+    parameters={{
+      backgrounds: { default: 'dark' },
+      msw,
+    }}
+    argTypes={{
+      testId: {
+        table: {
+          disable: true,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />

package/src/components/search/SearchTop/SearchTop.tsx

@@ -0,0 +1,78 @@
+import { List as UIList } from '@faststore/ui'
+import { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { Badge } from 'src/components/ui/Badge'
+import Link from 'src/components/ui/Link'
+import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput'
+import useTopSearch from 'src/sdk/search/useTopSearch'
+import type { StoreSuggestionTerm } from '@generated/graphql'
+
+import styles from '../search.module.scss'
+
+export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * List of top searched items
+   */
+  topTerms?: StoreSuggestionTerm[]
+}
+
+const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
+  { testId = 'top-search', topTerms, ...otherProps },
+  ref
+) {
+  const { onSearchInputSelection } = useSearchInput()
+  const { terms, isLoading } = useTopSearch(topTerms)
+
+  if (terms.length === 0) {
+    return null
+  }
+
+  return (
+    <section
+      ref={ref}
+      data-testid={testId}
+      data-fs-search-section
+      className={styles.fsSearch}
+      {...otherProps}
+    >
+      {isLoading ? (
+        <p data-fs-search-input-loading-text>Loading...</p>
+      ) : (
+        <>
+          <div data-fs-search-header>
+            <p data-fs-search-title>Top Search</p>
+          </div>
+          <UIList variant="ordered">
+            {terms.map((term, index) => (
+              <li key={term.value} data-fs-search-item>
+                <Link
+                  data-fs-search-item-link
+                  variant="display"
+                  href={formatSearchPath(term.value)}
+                  onClick={() =>
+                    onSearchInputSelection?.(
+                      term.value,
+                      formatSearchPath(term.value)
+                    )
+                  }
+                >
+                  <Badge data-fs-search-badge variant="info">
+                    {index + 1}
+                  </Badge>
+                  {term.value}
+                </Link>
+              </li>
+            ))}
+          </UIList>
+        </>
+      )}
+    </section>
+  )
+})
+
+export default SearchTop

package/src/components/search/SearchTop/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchTop } from './SearchTop'
+export type { SearchTopProps } from './SearchTop'

package/src/components/search/Sort/Sort.tsx

@@ -0,0 +1,42 @@
+import { useSearch } from '@faststore/sdk'
+
+import Select from 'src/components/ui/Select'
+
+const OptionsMap = {
+  price_desc: 'Price, descending',
+  price_asc: 'Price, ascending',
+  orders_desc: 'Top sales',
+  name_asc: 'Name, A-Z',
+  name_desc: 'Name, Z-A',
+  release_desc: 'Release date',
+  discount_desc: 'Discount',
+  score_desc: 'Relevance',
+}
+
+const keys = Object.keys(OptionsMap) as Array<keyof typeof OptionsMap>
+
+function Sort() {
+  const { state, setState } = useSearch()
+
+  return (
+    <Select
+      id="sort-select"
+      className="sort / text__title-mini-alt"
+      label="Sort by"
+      options={OptionsMap}
+      onChange={(e) => {
+        const sort = keys[e.target.selectedIndex]
+
+        setState({
+          ...state,
+          sort,
+          page: 0,
+        })
+      }}
+      value={state.sort}
+      testId="search-sort"
+    />
+  )
+}
+
+export default Sort

package/src/components/search/Sort/index.ts

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

package/src/components/search/search.module.scss

@@ -0,0 +1,101 @@
+.fs-search {
+  // --------------------------------------------------------
+  // Design Tokens for Search
+  // --------------------------------------------------------
+  --fs-search-min-height              : var(--fs-spacing-7);
+
+  // Title
+  --fs-search-title-size              : var(--fs-text-size-lead);
+  --fs-search-title-line-height       : 1.5;
+
+  // Section
+  --fs-search-section-padding         : var(--fs-spacing-1) 0;
+  --fs-search-section-bkg-color       : var(--fs-color-neutral-0);
+  --fs-search-section-border-bottom   : var(--fs-border-width) solid var(--fs-border-color-light);
+
+  // Link
+  --fs-search-item-link-color         : var(--fs-color-text-light);
+  --fs-search-item-link-padding-right : var(--fs-spacing-3);
+  --fs-search-item-link-padding-left  : var(--fs-search-item-link-padding-right);
+
+  // Item
+  --fs-search-item-text-size          : var(--fs-text-size-2);
+  --fs-search-item-line-height        : 1.25;
+  --fs-search-item-bkg-color-hover    : var(--fs-color-tertiary-bkg-hover);
+
+  // Icon
+  --fs-search-item-icon-color         : var(--fs-color-neutral-4);
+  --fs-search-item-icon-margin-right  : var(--fs-spacing-1);
+
+  // Badge
+  --fs-search-badge-margin-right      : var(--fs-spacing-1);
+
+  // Default properties
+  [data-fs-search-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--fs-search-min-height);
+  }
+
+  [data-fs-search-title] {
+    font-size: var(--fs-search-title-size);
+    line-height: var(--fs-search-title-line-height);
+  }
+
+  [data-fs-search-section] {
+    padding: var(--fs-search-section-padding);
+    border-bottom: var(--fs-search-section-border-bottom);
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+
+  [data-fs-search-item-link] {
+    color: var(--fs-search-item-link-color);
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  [data-fs-search-item] {
+    margin-right: calc(-1 * var(--fs-search-item-link-padding-right));
+    margin-left: calc(-1 * var(--fs-search-item-link-padding-right));
+    font-size: var(--fs-search-item-text-size);
+    line-height: var(--fs-search-item-line-height);
+
+    &:hover {
+      background-color: var(--fs-search-item-bkg-color-hover);
+    }
+
+    [data-fs-search-product-card-link], [data-fs-search-item-link] {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-left: var(--fs-search-item-link-padding-left);
+      margin-right: var(--fs-search-item-link-padding-right);
+    }
+
+    [data-fs-search-badge] {
+      margin-right: var(--fs-search-badge-margin-right);
+    }
+
+    [data-fs-search-item-icon] {
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-right: var(--fs-search-item-icon-margin-right);
+      color: var(--fs-search-item-icon-color);
+    }
+  }
+
+  [data-fs-search] {
+    [data-fs-search-item-bold] {
+      font-weight: var(--fs-text-weight-bold);
+      color: var(--fs-color-neutral-7);
+    }
+  }
+}

package/src/components/search/searchMock.ts

@@ -0,0 +1,48 @@
+import { rest } from 'msw'
+
+import { productGridItems, searchTerms } from 'src/../.storybook/mocks'
+
+export const products = productGridItems.map((item) => item.node)
+
+export const msw = {
+  handlers: [
+    rest.get('/api/graphql', (req, res, ctx) => {
+      const {
+        url: { searchParams },
+      } = req
+
+      const operationName = searchParams.get('operationName')
+
+      if (operationName === 'TopSearchSuggestionsQuery') {
+        return res(
+          ctx.json({
+            data: {
+              search: {
+                suggestions: {
+                  terms: searchTerms,
+                },
+              },
+            },
+          })
+        )
+      }
+
+      if (operationName === 'SearchSuggestionsQuery') {
+        return res(
+          ctx.json({
+            data: {
+              search: {
+                suggestions: {
+                  terms: searchTerms,
+                  products,
+                },
+              },
+            },
+          })
+        )
+      }
+
+      return res(ctx.status(400))
+    }),
+  ],
+}

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -0,0 +1,28 @@
+import BannerText from '../BannerText'
+import Newsletter from '../Newsletter'
+import Section from '../Section'
+import styles from './banner-newsletter.module.scss'
+
+function BannerNewsletter() {
+  return (
+    <Section className="layout__content">
+      <div className={styles.fsBannerNewsletter}>
+        <BannerText
+          title="Get to Know Our Next Release"
+          caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisl. "
+          actionLabel="Shop Now"
+          actionPath="/"
+          variant="secondary"
+          colorVariant="light"
+        />
+        <Newsletter
+          title="Get News and Special Offers!"
+          description="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here."
+          card
+        />
+      </div>
+    </Section>
+  )
+}
+
+export default BannerNewsletter

package/src/components/sections/BannerNewsletter/banner-newsletter.module.scss

@@ -0,0 +1,23 @@
+@import "src/styles/scaffold";
+
+.fs-banner-newsletter {
+  margin-bottom: var(--fs-grid-padding);
+
+  [data-fs-banner-text] {
+    border-radius: var(--fs-border-radius);
+  }
+
+  > section {
+    margin-top: 0;
+  }
+
+  @include media(">=notebook") {
+    display: flex;
+    column-gap: var(--fs-grid-gap-3);
+
+    > section {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}