@graphcommerce/algolia-search 7.0.0-canary.12

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/algolia-search
+
+## 7.0.0-canary.12
+
+### Major Changes
+
+- [#1909](https://github.com/graphcommerce-org/graphcommerce/pull/1909) [`7a1f1bb38`](https://github.com/graphcommerce-org/graphcommerce/commit/7a1f1bb382ece4167bd3816d6f2cc41ffae56710) - New Algolia search package! ([@mikekeehnen](https://github.com/mikekeehnen))

package/Config.graphqls

@@ -0,0 +1,72 @@
+"""
+Type for sortable algolia options
+"""
+input AlgoliaSortableOption {
+  """
+  The label of the index to display
+  """
+  label: String!
+  """
+  The name of the index to target.
+  """
+  value: String!
+}
+
+"""
+Type for conversion of Magento 2 aggregations to Algolia filterable attributes
+"""
+input AlgoliaFilterAttribute {
+  """
+  Stores the default aggregation uid
+  """
+  aggregation: String!
+
+  """
+  Stores the algolia attribute that should be connected to the magento aggregation
+  """
+  toAlgoliaAttribute: String!
+}
+
+"""
+Type for search index config
+"""
+input AlgoliaSearchIndexConfig {
+  """
+  Configure your Algolia Search index for Magento products
+  """
+  searchIndex: String!
+
+  """
+  Configures Algolia filterable attributes
+  """
+  filterAttributes: [AlgoliaFilterAttribute!]
+}
+
+extend input GraphCommerceStorefrontConfig {
+  """
+  Configure your Algolia index configurations
+  """
+  algoliaSearchIndexConfig: [AlgoliaSearchIndexConfig!]!
+
+  """
+  Configure the sortable attributes
+  """
+  sortOptions: [AlgoliaSortableOption!]
+}
+
+extend input GraphCommerceConfig {
+  """
+  Configure your Algolia application ID.
+  """
+  algoliaApplicationId: String!
+
+  """
+  Configure your Algolia Search Only API Key
+  """
+  algoliaSearchOnlyApiKey: String!
+
+  """
+  Configures algolia search debounce time. This will slow down the search response.
+  """
+  algoliaSearchDebounceTime: Int
+}

package/README.md

@@ -0,0 +1,111 @@
+# Algolia Search
+
+Implementation of Algolia Instant Search inside Graphcommerce. Add client or
+server side product, category and pages search to your project!
+
+## Installation
+
+1. Find current version of your `@graphcommerce/next-ui` in your package.json.
+2. `yarn add @graphcommerce/algolia-search@1.2.3` (replace 1.2.3 with the
+   version of the step above)
+
+## Add config values to Graphcommerce configuration
+
+This plugin contains different app and storefront configuration values.
+
+App configuration values:
+
+- algoliaApplicationId
+- algoliaSearchOnlyApiKey
+- algoliaSearchDebounceTime,
+
+Storefront configuration values:
+
+- algoliaSearchIndexConfig (containing a list of the following values)
+  - searchIndex
+  - filterAttributes (containing a list of the following values)
+    - aggregation
+    - toAlgoliaAttribute
+
+## Add server side hydration to Algolia Search
+
+1. Add `react-instantsearch-hooks-server` package to your project
+
+```
+yarn add react-instantsearch-hooks-server
+
+```
+
+or
+
+```
+npm install react-instantsearch-hooks-server
+```
+
+2. Add the new serverState property to the `SearchResultProps` type
+
+```
+type SearchResultProps = DefaultPageQuery &
+  ProductListQuery &
+  ProductFiltersQuery &
+  CategorySearchQuery & {
+   filterTypes: FilterTypes
+   params: ProductListParams
++   serverState?: unknown
+   }
+```
+
+3. Add the `getServerState` method from the `react-instantsearch-hooks-server`
+   package to the imports of your search page
+
+```
+...
+import { getServerState } from 'react-instantsearch-hooks-server'
+...
+```
+
+4. Assign the result of the `getServerState` method to the `serverState`
+   attribute inside of the return statement.
+
+```
+return {
+    props: {
+      ...(await page).data,
+      ...(await products).data,
+      ...(await filters).data,
+      ...(await categories)?.data,
+      ...(await layout)?.data,
+      filterTypes: await filterTypes,
+      params: productListParams,
+      up: { href: '/', title: 'Home' },
+      apolloState: await conf.then(() => client.cache.extract()),
++     serverState: await getServerState(<SearchContext />, {
++      renderToString,
++     }),
+    },
+    revalidate: 60 * 20,
+  }
+```
+
+5. Add the `serverState` to the `SearchContext` component.
+
+```
++ const { products, categories, params, filters, filterTypes, serverState } = props
+  const search = params.url.split('/')[1]
+  const totalSearchResults = (categories?.items?.length ?? 0) + (products?.total_count ?? 0)
+  const noSearchResults = search && (!products || (products.items && products?.items?.length <= 0))
+
+  return (
+    <>
+      <PageMeta
+        title={
+          search
+            ? i18n._(/* i18n */ 'Results for ‘{search}’', { search })
+            : i18n._(/* i18n */ 'Search')
+        }
+        metaRobots={['noindex']}
+        canonical='/search'
+      />
+
++     <SearchContext serverProps={serverState}>
+```

package/components/Chip/FilterChip/RefinementFilterChip.tsx

@@ -0,0 +1,86 @@
+import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { SxProps, Theme } from '@mui/material'
+import Box from '@mui/material/Box'
+import Checkbox from '@mui/material/Checkbox'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import {
+  useClearRefinements,
+  UseClearRefinementsProps,
+  useRefinementList,
+  UseRefinementListProps,
+} from 'react-instantsearch-hooks-web'
+
+const name = 'RefinementFilterChip' as const
+const parts = ['menu', 'item'] as const
+const { classes } = extendableComponent(name, parts)
+
+export interface RefinementFilterChipProps
+  extends Omit<UseRefinementListProps, 'transformItems'>,
+    Omit<UseClearRefinementsProps, 'transformItems'> {
+  transformItems?: UseClearRefinementsProps['transformItems']
+  title: string
+  sx?: SxProps<Theme>
+}
+
+export function RefinementFilterChip(props: RefinementFilterChipProps) {
+  const { title, sx, attribute, transformItems } = props
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { items, refine } = useRefinementList({
+    attribute,
+  })
+  const clearRefinementApi = useClearRefinements({
+    includedAttributes: [attribute],
+    transformItems,
+  })
+  const selectedOptions = items.filter((option) => option.isRefined).map((option) => option.label)
+
+  return (
+    <ChipMenu
+      className={classes.menu}
+      variant='outlined'
+      selected={selectedOptions.length > 0}
+      label={title}
+      selectedLabel={selectedOptions.length ? selectedOptions.join(', ') : title}
+      onDelete={selectedOptions.length > 0 ? () => clearRefinementApi.refine() : undefined}
+      sx={Array.isArray(sx) ? sx : [sx]}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: 'repeat(1, minmax(0, 1fr))', md: 'repeat(2, 1fr)' },
+          columnGap: responsiveVal(2, 10),
+          minWidth: 0,
+        }}
+      >
+        {items.map((option) => (
+          <ListItem className={classes.item} key={option?.value ?? ''} dense>
+            <ListItemText
+              onClick={() => {
+                refine(option?.value)
+              }}
+            >
+              {option?.label} <span>({option?.count})</span>
+              <Checkbox
+                edge='start'
+                checked={option?.isRefined}
+                tabIndex={-1}
+                size='medium'
+                color='primary'
+                disableRipple
+                inputProps={{ 'aria-labelledby': `filter-equal-${attribute}-${option?.value}` }}
+                sx={[
+                  {
+                    padding: 0,
+                    margin: '0 0 0 0',
+                    float: 'right',
+                  },
+                ]}
+              />
+            </ListItemText>
+          </ListItem>
+        ))}
+      </Box>
+    </ChipMenu>
+  )
+}

package/components/Chip/FilterChip/RefinementRangeChip.tsx

@@ -0,0 +1,79 @@
+import { Money } from '@graphcommerce/magento-store'
+import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
+import Box from '@mui/material/Box'
+import Slider from '@mui/material/Slider'
+import { useEffect, useState } from 'react'
+import { useRange, UseRangeProps } from 'react-instantsearch-hooks-web'
+
+export interface RefinementRangeChipProps extends UseRangeProps {
+  attribute: string
+  title: string
+}
+
+const { classes } = extendableComponent('RefinementRangeChip', [
+  'root',
+  'container',
+  'slider',
+] as const)
+
+export function RefinementRangeChip(props: RefinementRangeChipProps) {
+  const { attribute, title } = props
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { range, refine } = useRange({
+    attribute,
+    precision: 2,
+  })
+
+  const numberMin = Number(range.min)
+  const numberMax = Number(range.max)
+
+  const [value, setValue] = useState([numberMin, numberMax])
+
+  useEffect(() => {
+    setValue([numberMin, numberMax])
+  }, [numberMax, numberMin])
+
+  return (
+    <ChipMenu
+      variant='outlined'
+      label={title}
+      className={classes.root}
+      selected={numberMin !== value[0]}
+      labelRight={
+        <>
+          <Money round value={value[0] === 0 ? 0.1 : value[0]} />
+          {' - '}
+          <Money round value={value[1]} />
+        </>
+      }
+      onDelete={() => {
+        refine([undefined, undefined])
+        setValue([numberMin, numberMax])
+      }}
+    >
+      <Box
+        sx={(theme) => ({
+          padding: `${theme.spacings.xxs} ${theme.spacings.xxs} !important`,
+          width: '100%',
+        })}
+        className={classes.container}
+      >
+        <Slider
+          min={range.min}
+          max={range.max}
+          size='large'
+          aria-labelledby='range-slider'
+          value={value}
+          onChange={(_, newValue) => {
+            setValue([newValue[0], newValue[1]])
+          }}
+          onChangeCommitted={(_, newValue) => {
+            refine([Number(newValue[0]), Number(newValue[1])])
+          }}
+          valueLabelDisplay='off'
+          className={classes.slider}
+        />
+      </Box>
+    </ChipMenu>
+  )
+}

package/components/Chip/RenderChip.tsx

@@ -0,0 +1,24 @@
+import { RenderType, TypeRenderer } from '@graphcommerce/next-ui'
+import React from 'react'
+import { RefinementFilterChip, RefinementFilterChipProps } from './FilterChip/RefinementFilterChip'
+import { RefinementRangeChip, RefinementRangeChipProps } from './FilterChip/RefinementRangeChip'
+import { SortChip, SortChipProps } from './SortChip/SortChip'
+
+interface RenderChipProps
+  extends RefinementFilterChipProps,
+    RefinementRangeChipProps,
+    SortChipProps {
+  __typename: string
+}
+
+const renderer: TypeRenderer<{ __typename: string }, Omit<RenderChipProps, '__typename'>> = {
+  FilterEqualTypeInput: RefinementFilterChip,
+  FilterRangeTypeInput: RefinementRangeChip,
+  FilterMatchTypeInput: () => <div>Not implemented</div>,
+  Sort: SortChip,
+}
+
+export function RenderChip(props: RenderChipProps) {
+  const { __typename, ...rest } = props
+  return <RenderType renderer={renderer} __typename={__typename} {...rest} />
+}

package/components/Chip/SortChip/SortChip.tsx

@@ -0,0 +1,85 @@
+import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { SxProps, Theme } from '@mui/material'
+import Box from '@mui/material/Box'
+import Checkbox from '@mui/material/Checkbox'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+
+const name = 'SortChip' as const
+const parts = ['menu', 'item'] as const
+const { classes } = extendableComponent(name, parts)
+
+export type SortByItem = {
+  value: string
+  label: string
+}
+
+export type SortByRenderState = {
+  initialIndex?: string
+  currentRefinement: string
+  options: SortByItem[]
+  refine: (value: string) => void
+  canRefine: boolean
+}
+
+export interface SortChipProps extends SortByRenderState {
+  title: string
+  sx?: SxProps<Theme>
+}
+
+export function SortChip(props: SortChipProps) {
+  const { initialIndex, currentRefinement, options, refine, canRefine, title, sx } = props
+
+  const selectedOption = options.find((option) => option.value === currentRefinement)
+
+  return (
+    <ChipMenu
+      className={classes.menu}
+      variant='outlined'
+      selected={Boolean(selectedOption)}
+      label={title}
+      selectedLabel={selectedOption ? selectedOption.label : title}
+      onDelete={
+        selectedOption ? () => canRefine && refine(initialIndex ?? options[0].value) : undefined
+      }
+      sx={Array.isArray(sx) ? sx : [sx]}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: { xs: 'repeat(1, minmax(0, 1fr))', md: 'repeat(2, 1fr)' },
+          columnGap: responsiveVal(2, 10),
+          minWidth: 0,
+        }}
+      >
+        {options.map((option) => (
+          <ListItem className={classes.item} key={option?.value ?? ''} dense>
+            <ListItemText
+              onClick={() => {
+                refine(option?.value)
+              }}
+            >
+              {option?.label}
+              <Checkbox
+                edge='start'
+                checked={Boolean(options.find((o) => o.value === selectedOption?.value))}
+                tabIndex={-1}
+                size='medium'
+                color='primary'
+                disableRipple
+                inputProps={{ 'aria-labelledby': `sort-${option?.value}` }}
+                sx={[
+                  {
+                    padding: 0,
+                    margin: '0 0 0 0',
+                    float: 'right',
+                  },
+                ]}
+              />
+            </ListItemText>
+          </ListItem>
+        ))}
+      </Box>
+    </ChipMenu>
+  )
+}

package/components/Filters/AlgoliaFilters.tsx

@@ -0,0 +1,70 @@
+import { AlgoliaFilterAttribute } from '@graphcommerce/graphql-mesh'
+import { FilterTypes, ProductFiltersProps } from '@graphcommerce/magento-product'
+import { useMemo } from 'react'
+import { useAlgoliaSearchIndexConfig } from '../../hooks/useAlgoliaSearchIndexConfig'
+import { RenderChip } from '../Chip/RenderChip'
+
+const systemFilters = [
+  { key: 'category_uid', algoliaKey: 'categories.level0' },
+  { key: 'price', algoliaKey: 'price.EUR.default' },
+]
+
+interface FilterWithTypes extends AlgoliaFilterAttribute {
+  type: FilterTypes[number]
+}
+
+export function AlgoliaFilters(props: ProductFiltersProps) {
+  const { filterTypes, aggregations } = props
+
+  const filtersFromConfig = useAlgoliaSearchIndexConfig('_products')?.filterAttributes
+
+  const filters = useMemo(() => {
+    const allValues: FilterWithTypes[] = []
+    const filterTypesKeys = Object.keys(filterTypes)
+    const reducedSystemFilters = systemFilters.filter((sf) =>
+      filterTypesKeys.some((ftk) => sf.key === ftk),
+    )
+    const availableFilters = reducedSystemFilters.filter((rsf) =>
+      aggregations?.some((a) => a?.attribute_code === rsf.key),
+    )
+
+    // Get all items from the system filters and convert them to FilterWithTypes
+    availableFilters.forEach((item) => {
+      allValues.push({
+        aggregation: item.key,
+        toAlgoliaAttribute: item.algoliaKey,
+        type: filterTypes[item.key],
+      })
+    })
+
+    // Get all items from the config and convert them to FilterWithTypes
+    filtersFromConfig?.forEach((af) => {
+      allValues.push({
+        aggregation: af?.aggregation ?? '',
+        toAlgoliaAttribute: af?.toAlgoliaAttribute ?? '',
+        type: filterTypes[af?.aggregation ?? ''],
+      })
+    })
+
+    // Return all values that are included in the default aggregations
+    return allValues
+  }, [aggregations, filterTypes, filtersFromConfig])
+
+  if (!aggregations || !filters) return null
+
+  return (
+    <>
+      {filters.map((v) => (
+        <RenderChip
+          __typename={v.type ?? 'FilterMatchTypeInput'}
+          key={v.aggregation}
+          attribute={v.toAlgoliaAttribute}
+          title={
+            aggregations.find((a) => a?.attribute_code === v.aggregation)?.label ??
+            v.aggregation.charAt(0).toUpperCase() + v.aggregation.slice(1)
+          }
+        />
+      ))}
+    </>
+  )
+}

package/components/Pagination/AlgoliaPagination.tsx

@@ -0,0 +1,30 @@
+import { ProductPaginationProps } from '@graphcommerce/magento-product'
+import { Pagination } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { usePagination } from 'react-instantsearch-hooks-web'
+
+export function AlgoliaPagination({
+  page_info,
+  params,
+  ...paginationProps
+}: ProductPaginationProps) {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { nbPages, refine, currentRefinement } = usePagination()
+
+  const handlePagination = (destinationPage: number) => {
+    refine(destinationPage - 1)
+  }
+
+  return (
+    <Pagination
+      count={nbPages ?? 0}
+      page={currentRefinement + 1}
+      renderLink={(page, icon, btnProps) => (
+        <Box {...btnProps} color='inherit' onClick={() => handlePagination(page)}>
+          {icon}
+        </Box>
+      )}
+      {...paginationProps}
+    />
+  )
+}

package/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,58 @@
+import { Trans } from '@lingui/react'
+import { Box, debounce } from '@mui/material'
+import TextField from '@mui/material/TextField'
+import { ChangeEvent, useCallback, useEffect, useRef } from 'react'
+import { useHits, useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks-web'
+
+type SearchBoxProps = {
+  defaultValue?: string
+} & UseSearchBoxProps
+
+export function SearchBox(props: SearchBoxProps) {
+  const { defaultValue } = props
+  const searchInputElement = useRef<HTMLInputElement>(null)
+
+  const { refine } = useSearchBox()
+  const { results } = useHits()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounceSearch = useCallback(
+    debounce(
+      (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => refine(e.target.value),
+      import.meta.graphCommerce.algoliaSearchDebounceTime ?? 0,
+    ),
+    [refine],
+  )
+
+  useEffect(() => {
+    if (defaultValue) refine(defaultValue)
+  }, [defaultValue, refine])
+
+  const totalResults = results?.nbHits ?? 0
+
+  const endAdornment = (
+    <Box
+      sx={(theme) => ({
+        minWidth: 'max-content',
+        color: theme.palette.text.disabled,
+        paddingRight: '7px',
+      })}
+    >
+      {totalResults === 1 && <Trans id='{totalResults} result' values={{ totalResults }} />}
+      {totalResults > 1 && <Trans id='{totalResults} results' values={{ totalResults }} />}
+    </Box>
+  )
+
+  return (
+    <TextField
+      variant='outlined'
+      type='text'
+      name='search'
+      InputProps={{ endAdornment }}
+      inputRef={searchInputElement}
+      onChange={debounceSearch}
+      fullWidth
+      sx={{ mt: 1 }}
+    />
+  )
+}

package/hooks/useAlgoliaCategoryResults.ts

@@ -0,0 +1,25 @@
+import { useHits } from 'react-instantsearch-hooks-web'
+import { AlgoliaCategoryHit } from '../lib/types'
+
+function hitToCategory(hits: AlgoliaCategoryHit[]) {
+  return hits.map((h) => {
+    const urlSplit = h.url.split('/')
+    const categoryUrl = urlSplit.reduce((prev, curr, currIndex) => {
+      if (currIndex > 2) return `${prev}/${curr}`
+      return ''
+    })
+    const url_key = categoryUrl.substring(0, categoryUrl.length - 5)
+    return {
+      category_uid: h.objectID,
+      category_level: h.level,
+      category_name: h.name,
+      category_url_path: url_key,
+    }
+  })
+}
+
+export function useAlgoliaCategoryResults() {
+  const { hits, results } = useHits<AlgoliaCategoryHit>()
+  const categories = hitToCategory(hits)
+  return { categories, search: results?.query }
+}

package/hooks/useAlgoliaPageResults.ts

@@ -0,0 +1,26 @@
+import { useHits } from 'react-instantsearch-hooks-web'
+import { AlgoliaPageHit } from '../lib/types'
+
+function hitToPage(hits: AlgoliaPageHit[]) {
+  return hits.map((h) => {
+    const urlSplit = h.url.split('/')
+    const url = urlSplit.reduce((prev, curr, currIndex) => {
+      if (currIndex > 2) return `${prev}/${curr}`
+      return ''
+    })
+    return {
+      objectID: h.objectID,
+      name: h.name,
+      slug: h.slug,
+      url,
+      content: h.content,
+      algoliaLastUpdateAtCET: h.algoliaLastUpdateAtCET,
+    } satisfies AlgoliaPageHit
+  })
+}
+
+export function useAlgoliaPageResults() {
+  const { hits, results } = useHits<AlgoliaPageHit>()
+  const pages = hitToPage(hits)
+  return { pages, search: results?.query }
+}

package/hooks/useAlgoliaProductResults.ts

@@ -0,0 +1,59 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CurrencyEnum } from '@graphcommerce/graphql-mesh'
+import { ProductListItemFragment, ProductListItemProps } from '@graphcommerce/magento-product'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { useHits } from 'react-instantsearch-hooks-web'
+import { AlgoliaProductHit } from '../lib/types'
+
+function hitsToProduct(
+  items: AlgoliaProductHit[],
+  currency?: string | null,
+  productUrlSuffix?: string | null,
+) {
+  const mapHits = items.map((item) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const currentCurrency = (currency ?? Object.keys(item.price)[0]) as CurrencyEnum
+    const price = item.price[currentCurrency]
+    const productUrlSplit = item.url.split('/')
+    const productUrl = productUrlSplit[productUrlSplit.length - 1]
+    const url_key = productUrl.substring(0, productUrl.length - (productUrlSuffix?.length ?? 0))
+
+    return {
+      __typename: 'SimpleProduct',
+      uid: item.objectID,
+      small_image: {
+        url: item.image_url,
+      },
+      sku: item.sku,
+      price_range: {
+        minimum_price: {
+          final_price: {
+            value: price.default,
+            currency: currentCurrency,
+          },
+          regular_price: {
+            value: price.default,
+            currency: currentCurrency,
+          },
+        },
+      },
+      rating_summary: item.rating_summary ?? 0,
+      url_key,
+      name: item.name,
+    }
+  }) satisfies Array<ProductListItemFragment & ProductListItemProps>
+
+  return mapHits
+}
+
+export function useAlgoliaProductResults() {
+  const { hits } = useHits<AlgoliaProductHit>()
+  const { data } = useQuery(StoreConfigDocument)
+  const products = hitsToProduct(
+    hits,
+    data?.storeConfig?.base_currency_code,
+    data?.storeConfig?.product_url_suffix,
+  )
+
+  return { products }
+}

package/hooks/useAlgoliaSearchIndexConfig.ts

@@ -0,0 +1,8 @@
+import { storefrontConfig } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+
+export function useAlgoliaSearchIndexConfig(suffix: string) {
+  return storefrontConfig(i18n.locale)?.algoliaSearchIndexConfig.find((ai) =>
+    ai.searchIndex.includes(suffix),
+  )
+}

package/hooks/useSearchRoute.ts

@@ -0,0 +1,6 @@
+import { useRouter } from 'next/router'
+
+export function useSearchRoute() {
+  const router = useRouter()
+  return router.asPath.includes('/search')
+}

package/lib/configuration.ts

@@ -0,0 +1,2 @@
+export const applicationId = import.meta.graphCommerce.algoliaApplicationId ?? ''
+export const searchOnlyApiKey = import.meta.graphCommerce.algoliaSearchOnlyApiKey ?? ''

package/lib/types.ts

@@ -0,0 +1,58 @@
+export type AlgoliaProductHit = {
+  algoliaLastUpdateAtCET: string
+  categories: { [key: string]: string[] }
+  categories_without_path: string[]
+  categoryIds: string[]
+  created_at: string
+  image_url: string
+  name: string
+  objectID: string
+  price: {
+    [key: string]: {
+      default: number
+      default_formated: string
+      default_original_formated: string
+      special_from_date: number
+      special_to_date: string
+    }
+  }
+  price_with_tax: {
+    [key: string]: {
+      default: number
+      default_formated: string
+      default_original_formated: string
+      special_from_date: number
+      special_to_date: string
+    }
+  }
+  rating_summary: number | null
+  sku: string
+  thumbnail_url: string
+  type_id: string
+  url: string
+  visibility_catalog: number
+  visibility_search: number
+  __position: number
+}
+
+export type AlgoliaCategoryHit = {
+  objectID: string
+  name: string
+  path: string
+  product_count: number
+  level: number
+  url: string
+  include_in_menu: number
+  _tags: string[]
+  popularity: number
+  algoliaLastUpdateAtCET: string | Date
+}
+
+export type AlgoliaPageHit = {
+  objectID: string
+  name: string
+  slug: string
+  url: string
+  content: string
+  algoliaLastUpdateAtCET: string
+}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@graphcommerce/algolia-search",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "7.0.0-canary.12",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "7.0.0-canary.12",
+    "@graphcommerce/next-config": "^7.0.0-canary.12",
+    "@graphcommerce/prettier-config-pwa": "7.0.0-canary.12",
+    "@graphcommerce/typescript-config-pwa": "7.0.0-canary.12"
+  },
+  "dependencies": {
+    "@graphcommerce/graphql": "7.0.0-canary.12",
+    "@graphcommerce/ecommerce-ui": "7.0.0-canary.12",
+    "@graphcommerce/magento-search": "7.0.0-canary.12",
+    "@graphcommerce/next-config": "^7.0.0-canary.12",
+    "@graphcommerce/next-ui": "7.0.0-canary.12",
+    "@graphcommerce/magento-product": "7.0.0-canary.12",
+    "@graphcommerce/graphql-mesh": "7.0.0-canary.12",
+    "@graphcommerce/magento-store": "7.0.0-canary.12",
+    "algoliasearch": "^4.15.0",
+    "react-instantsearch-hooks-web": "^6.41.0"
+  },
+  "peerDependencies": {
+    "@lingui/core": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@mui/material": "^5.10.16",
+    "next": "^13.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/AlgoliaCategorySearchResults.tsx

@@ -0,0 +1,45 @@
+import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { Index } from 'react-instantsearch-hooks-web'
+import { useAlgoliaCategoryResults } from '../hooks/useAlgoliaCategoryResults'
+import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
+
+export const component = 'SearchForm'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function CategoryHits() {
+  const { categories, search } = useAlgoliaCategoryResults()
+
+  if (!search || search.length <= 0) return null
+
+  return (
+    <>
+      {categories.map((category) => (
+        <CategorySearchResult
+          breadcrumbs={[category]}
+          search={search}
+          url_path={category.category_url_path}
+        />
+      ))}
+    </>
+  )
+}
+
+function AlgoliaCategorySearchPlugin(props: PluginProps<SearchFormProps>) {
+  const { Prev, ...rest } = props
+  const searchIndex = useAlgoliaSearchIndexConfig('_categories')?.searchIndex
+
+  if (!searchIndex) return <Prev {...rest} />
+
+  return (
+    <>
+      <Prev {...rest} />
+      <Index indexName={searchIndex}>
+        <CategoryHits />
+      </Index>
+    </>
+  )
+}
+
+export const Plugin = AlgoliaCategorySearchPlugin

package/plugins/AlgoliaFiltersPlugin.tsx

@@ -0,0 +1,14 @@
+import { ProductFiltersProps } from '@graphcommerce/magento-product'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { AlgoliaFilters } from '../components/Filters/AlgoliaFilters'
+
+export const component = 'ProductListFiltersSearch'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaFiltersPlugin(props: PluginProps<ProductFiltersProps>) {
+  const { Prev, ...rest } = props
+  return <AlgoliaFilters {...rest} />
+}
+
+export const Plugin = AlgoliaFiltersPlugin

package/plugins/AlgoliaPageSearchResults.tsx

@@ -0,0 +1,52 @@
+import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { Index } from 'react-instantsearch-hooks-web'
+import { useAlgoliaPageResults } from '../hooks/useAlgoliaPageResults'
+import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
+
+export const component = 'SearchForm'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function PageHits() {
+  const { pages, search } = useAlgoliaPageResults()
+
+  if (!search || search.length <= 0) return null
+
+  return (
+    <>
+      {pages.map((page) => (
+        <CategorySearchResult
+          breadcrumbs={[
+            {
+              category_uid: page.objectID,
+              category_level: page.url.split('/').length,
+              category_name: page.name,
+              category_url_path: page.url,
+            },
+          ]}
+          search={search}
+          url_path={page.url}
+        />
+      ))}
+    </>
+  )
+}
+
+function AlgoliaPageSearchPlugin(props: PluginProps<SearchFormProps>) {
+  const { Prev, ...rest } = props
+  const searchIndex = useAlgoliaSearchIndexConfig('_pages')?.searchIndex
+
+  if (!searchIndex) return <Prev {...rest} />
+
+  return (
+    <>
+      <Prev {...rest} />
+      <Index indexName={searchIndex}>
+        <PageHits />
+      </Index>
+    </>
+  )
+}
+
+export const Plugin = AlgoliaPageSearchPlugin

package/plugins/AlgoliaPaginationPlugin.tsx

@@ -0,0 +1,18 @@
+import { ProductPaginationProps } from '@graphcommerce/magento-product'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+import { AlgoliaPagination } from '../components/Pagination/AlgoliaPagination'
+
+export const component = 'ProductListPaginationSearch'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaPaginationPlugin(props: PluginProps<ProductPaginationProps>) {
+  const { Prev, ...rest } = props
+  const router = useRouter()
+  if (!router.asPath.includes('/search')) return <Prev {...props} />
+
+  return <AlgoliaPagination {...rest} />
+}
+
+export const Plugin = AlgoliaPaginationPlugin

package/plugins/AlgoliaProductListCountPlugin.tsx

@@ -0,0 +1,24 @@
+import { ProductCountProps } from '@graphcommerce/magento-product'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { Index, usePagination } from 'react-instantsearch-hooks-web'
+import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
+
+export const component = 'ProductListCountSearch'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaProductListCountPlugin(props: PluginProps<ProductCountProps>) {
+  const { Prev, ...rest } = props
+  const { nbHits } = usePagination()
+  const searchIndex = useAlgoliaSearchIndexConfig('_products')?.searchIndex
+
+  if (!searchIndex) return <Prev {...rest} />
+
+  return (
+    <Index indexName={searchIndex}>
+      <Prev {...rest} total_count={nbHits} />
+    </Index>
+  )
+}
+
+export const Plugin = AlgoliaProductListCountPlugin

package/plugins/AlgoliaProductSearchResultsPlugin.tsx

@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ProductItemsGridProps } from '@graphcommerce/magento-product'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { Index } from 'react-instantsearch-hooks-web'
+import { useAlgoliaProductResults } from '../hooks/useAlgoliaProductResults'
+import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
+
+export const component = 'ProductListItemsSearch'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaProductSearchPlugin(props: PluginProps<ProductItemsGridProps>) {
+  const { Prev, ...rest } = props
+  const { products } = useAlgoliaProductResults()
+  const searchIndex = useAlgoliaSearchIndexConfig('_products')?.searchIndex
+
+  if (!searchIndex) return <Prev {...rest} />
+
+  return (
+    <Index indexName={searchIndex}>
+      <Prev {...rest} items={products} />
+    </Index>
+  )
+}
+
+export const Plugin = AlgoliaProductSearchPlugin

package/plugins/AlgoliaProductSortPlugin.tsx

@@ -0,0 +1,28 @@
+import { ProductFiltersProps } from '@graphcommerce/magento-product'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { storefrontConfig } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { useSortBy } from 'react-instantsearch-hooks-web'
+import { RenderChip } from '../components/Chip/RenderChip'
+
+export const component = 'ProductListSortSearch'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaProductSortPlugin(props: PluginProps<ProductFiltersProps>) {
+  const { Prev, ...rest } = props
+  const sort = useSortBy({
+    items: storefrontConfig(i18n.locale)?.sortOptions ?? [],
+  })
+
+  return (
+    <RenderChip
+      __typename='Sort'
+      title={rest.title ?? i18n._(/* i18n */ 'Sort')}
+      attribute='sort'
+      {...sort}
+    />
+  )
+}
+
+export const Plugin = AlgoliaProductSortPlugin

package/plugins/AlgoliaSearchContextPlugin.tsx

@@ -0,0 +1,32 @@
+import { SearchContextProps } from '@graphcommerce/magento-search'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import algoliasearch from 'algoliasearch/lite'
+import { InstantSearch, InstantSearchSSRProvider } from 'react-instantsearch-hooks-web'
+import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
+import { applicationId, searchOnlyApiKey } from '../lib/configuration'
+
+export const component = 'SearchContext'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+const searchClient = algoliasearch(applicationId, searchOnlyApiKey)
+
+function AlgoliaSearchContextPlugin(props: PluginProps<SearchContextProps>) {
+  const { Prev, serverProps, ...rest } = props
+  const searchIndex = useAlgoliaSearchIndexConfig('_products')?.searchIndex
+
+  if (!searchIndex)
+    throw Error(
+      '(@graphcommerce/algolia-plugin): No search index with "_products" suffix provided. Please add the search index to the Graphcommerce config',
+    )
+
+  return (
+    <InstantSearchSSRProvider {...(typeof serverProps === 'object' ? serverProps : {})}>
+      <InstantSearch searchClient={searchClient} indexName={searchIndex}>
+        <Prev {...rest} />
+      </InstantSearch>
+    </InstantSearchSSRProvider>
+  )
+}
+
+export const Plugin = AlgoliaSearchContextPlugin

package/plugins/AlgoliaSearchFieldPlugin.tsx

@@ -0,0 +1,14 @@
+import { SearchFormProps } from '@graphcommerce/magento-search'
+import { IfConfig, PluginProps } from '@graphcommerce/next-config'
+import { SearchBox } from '../components/SearchBox/SearchBox'
+
+export const component = 'SearchForm'
+export const exported = '@graphcommerce/magento-search'
+export const ifConfig: IfConfig = 'algoliaApplicationId'
+
+function AlgoliaSearchFieldPlugin(props: PluginProps<SearchFormProps>) {
+  const { search } = props
+  return <SearchBox defaultValue={search} />
+}
+
+export const Plugin = AlgoliaSearchFieldPlugin

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}