@graphcommerce/algolia-search 6.2.0-canary.67 → 6.2.0-canary.69

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @graphcommerce/algolia-search
 
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+### Minor Changes
+
+- [#1990](https://github.com/graphcommerce-org/graphcommerce/pull/1990) [`0729105cd`](https://github.com/graphcommerce-org/graphcommerce/commit/0729105cdb84b9f73d1fda7dac7daf867f4e0b9b) - Add CategorySearchResults component that can be injected with a plugin instead of SearchForm, fix various styling issues with search ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 6.2.0-canary.67
 
 ## 6.2.0-canary.66

package/components/SearchBox/SearchBox.tsx

@@ -8,7 +8,7 @@ import { useHits, useSearchBox, UseSearchBoxProps } from 'react-instantsearch-ho
 type SearchBoxProps = UseSearchBoxProps & SearchFormProps
 
 export function SearchBox(props: SearchBoxProps) {
-  const { search, textFieldProps } = props
+  const { search, textFieldProps, sx = [] } = props
   const searchInputElement = useRef<HTMLInputElement>(null)
 
   const { refine } = useSearchBox()
@@ -52,7 +52,7 @@ export function SearchBox(props: SearchBoxProps) {
       inputRef={searchInputElement}
       onChange={debounceSearch}
       fullWidth
-      sx={{ mt: 1, mb: 1 }}
+      sx={[{ mt: 1, mb: 1 }, ...(Array.isArray(sx) ? sx : [sx])]}
       {...textFieldProps}
     />
   )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/algolia-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.67",
+  "version": "6.2.0-canary.69",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.67",
-    "@graphcommerce/next-config": "^6.2.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.67"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.69",
+    "@graphcommerce/next-config": "^6.2.0-canary.69",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.69",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.69"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "6.2.0-canary.67",
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.67",
-    "@graphcommerce/magento-search": "6.2.0-canary.67",
-    "@graphcommerce/next-config": "^6.2.0-canary.67",
-    "@graphcommerce/next-ui": "6.2.0-canary.67",
-    "@graphcommerce/magento-product": "6.2.0-canary.67",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.67",
-    "@graphcommerce/magento-store": "6.2.0-canary.67",
+    "@graphcommerce/graphql": "6.2.0-canary.69",
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.69",
+    "@graphcommerce/magento-search": "6.2.0-canary.69",
+    "@graphcommerce/next-config": "^6.2.0-canary.69",
+    "@graphcommerce/next-ui": "6.2.0-canary.69",
+    "@graphcommerce/magento-product": "6.2.0-canary.69",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.69",
+    "@graphcommerce/magento-store": "6.2.0-canary.69",
     "algoliasearch": "^4.15.0",
     "react-instantsearch-hooks-web": "^6.41.0"
   },

package/plugins/AlgoliaCategorySearchResults.tsx

@@ -1,10 +1,10 @@
-import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { CategorySearchResult, CategorySearchResultsProps } 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 component = 'CategorySearchResults'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
@@ -17,6 +17,7 @@ function CategoryHits() {
     <>
       {categories.map((category) => (
         <CategorySearchResult
+          key={category.category_uid}
           breadcrumbs={[category]}
           search={search}
           url_path={category.category_url_path}
@@ -26,19 +27,19 @@ function CategoryHits() {
   )
 }
 
-function AlgoliaCategorySearchPlugin(props: PluginProps<SearchFormProps>) {
-  const { Prev, ...rest } = props
+function AlgoliaCategorySearchPlugin(props: PluginProps<CategorySearchResultsProps>) {
+  const { Prev, children, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_categories')?.searchIndex
 
-  if (!searchIndex) return <Prev {...rest} />
+  if (!searchIndex) return <Prev {...rest}>{children}</Prev>
 
   return (
-    <>
-      <Prev {...rest} />
+    <Prev {...rest}>
+      {children}
       <Index indexName={searchIndex}>
         <CategoryHits />
       </Index>
-    </>
+    </Prev>
   )
 }
 

package/plugins/AlgoliaPageSearchResults.tsx

@@ -1,10 +1,10 @@
-import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { CategorySearchResult, CategorySearchResultsProps } 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 component = 'CategorySearchResults'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
@@ -34,19 +34,19 @@ function PageHits() {
   )
 }
 
-function AlgoliaPageSearchPlugin(props: PluginProps<SearchFormProps>) {
+function AlgoliaPageSearchPlugin(props: PluginProps<CategorySearchResultsProps>) {
   const { Prev, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_pages')?.searchIndex
 
   if (!searchIndex) return <Prev {...rest} />
 
   return (
-    <>
-      <Prev {...rest} />
+    <Prev {...rest}>
+      {rest.children}
       <Index indexName={searchIndex}>
         <PageHits />
       </Index>
-    </>
+    </Prev>
   )
 }
 

package/plugins/AlgoliaProductSearchResultsPlugin.tsx

@@ -5,7 +5,7 @@ import { Index } from 'react-instantsearch-hooks-web'
 import { useAlgoliaProductResults } from '../hooks/useAlgoliaProductResults'
 import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
 
-export const component = 'ProductListItems'
+export const component = 'ProductListItemsBase'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'