@graphcommerce/magento-search 9.0.0-canary.116 → 9.0.0-canary.117

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.117
+
+### Minor Changes
+
+- [#2361](https://github.com/graphcommerce-org/graphcommerce/pull/2361) [`9c3149c`](https://github.com/graphcommerce-org/graphcommerce/commit/9c3149cb7550c6bf7de4b8e3bcaabe2f6a70d5c7) - Search overlay package this is compatible with Magento's default search as well as any other implementation like Algolia and Adobe Sensei. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.116
 
 ### Patch Changes

package/components/ProductFiltersPro/ProductFiltersProSearchHeader.tsx

@@ -12,8 +12,7 @@ export type ProductFiltersProSearchHeaderProps = {
   children: React.ReactNode
 }
 
-export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeaderProps) {
-  const { params, children } = props
+export function useSearchResultRemaining(params: ProductListParams) {
   const { form } = useProductFiltersPro()
   const resultSearch = params.search ?? ''
   const targetSearch = useWatch({ control: form.control, name: 'search' }) ?? ''
@@ -22,6 +21,17 @@ export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeader
     ? targetSearch.slice(resultSearch.length)
     : ''
 
+  return {
+    resultSearch,
+    targetSearch,
+    remaining,
+  }
+}
+
+export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeaderProps) {
+  const { params, children } = props
+
+  const { remaining, resultSearch, targetSearch } = useSearchResultRemaining(params)
   if (!resultSearch && !targetSearch) return children
 
   const search = (

package/components/ProductFiltersPro/{ProductFiltersProSearchField.tsx → SearchField.tsx}

@@ -1,4 +1,4 @@
-import { IconSvg, iconSearch, showPageLoadIndicator } from '@graphcommerce/next-ui'
+import { iconSearch, IconSvg, showPageLoadIndicator } from '@graphcommerce/next-ui'
 import type { FabProps } from '@mui/material'
 import { Fab } from '@mui/material'
 import dynamic from 'next/dynamic'
@@ -6,16 +6,18 @@ import { useMemo, useState } from 'react'
 import type { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
 import { useSearchPageAndParam } from './useSearchPageAndParam'
 
-export type ProductFiltersProSearchFieldProps = ProductFiltersProSearchInputProps & {
+export type SearchFieldProps = ProductFiltersProSearchInputProps & {
   fab?: FabProps
+  visible?: boolean
+  searchField?: Record<string, unknown>
 }
 
 const ProductFiltersProSearchInputLazy = dynamic(
   async () => (await import('./ProductFiltersProSearchInput')).ProductFiltersProSearchOutlinedInput,
 )
 
-export function ProductFiltersProSearchField(props: ProductFiltersProSearchFieldProps) {
-  const { fab, formControl } = props
+export function SearchField(props: SearchFieldProps) {
+  const { fab, formControl, visible: incomingVisible } = props
 
   const [searchPage] = useSearchPageAndParam()
   const [expanded, setExpanded] = useState(searchPage)
@@ -23,7 +25,7 @@ export function ProductFiltersProSearchField(props: ProductFiltersProSearchField
     if (!searchPage) setExpanded(searchPage)
   }, [searchPage])
 
-  const visible = expanded || searchPage
+  const visible = incomingVisible || expanded || searchPage
 
   return (
     <>

package/components/SearchFab/SearchFab.tsx

@@ -0,0 +1,24 @@
+import type { FabProps } from '@graphcommerce/next-ui'
+import { Fab, iconSearch } from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import type { SetOptional } from 'type-fest'
+
+export type SearchFabProps = SetOptional<FabProps, 'icon'>
+
+export function SearchFab(props: SearchFabProps) {
+  const { sx, ...fabProps } = props
+  const router = useRouter()
+  return (
+    <Fab
+      color='inherit'
+      size='medium'
+      sx={sx}
+      icon={iconSearch}
+      onClick={async () => {
+        await router.push('/search')
+        globalThis.document.body.querySelector<HTMLInputElement>('[name="search"]')?.focus()
+      }}
+      {...fabProps}
+    />
+  )
+}

package/hooks/useProductList.ts

@@ -6,9 +6,9 @@ import type {
   ProductListQuery,
 } from '@graphcommerce/magento-product'
 import {
+  prefetchProductList,
   ProductFiltersDocument,
   ProductListDocument,
-  prefetchProductList,
   toProductListParams,
   useRouterFilterParams,
 } from '@graphcommerce/magento-product'
@@ -26,14 +26,16 @@ import {
  * - Creates a prefetch function to preload the product list
  */
 export function useProductList<
-  T extends ProductListQuery &
-    ProductFiltersQuery & {
-      params?: ProductListParams
-    },
+  T extends ProductListQuery & ProductFiltersQuery & { params?: ProductListParams },
 >(props: T) {
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplySearchDefaults(params)
-  const result = usePrivateQuery(ProductListDocument, { variables, skip: !shallow }, props)
+  const result = usePrivateQuery(
+    ProductListDocument,
+    { variables: { ...variables }, skip: !shallow },
+    props,
+  )
+
   const filters = usePrivateQuery(
     ProductFiltersDocument,
     { variables: searchDefaultsToProductListFilters(variables), skip: !shallow },

package/index.ts

@@ -1,12 +1,14 @@
 export * from './CategorySearch.gql'
 export * from './components/CategorySearchResult/CategorySearchResult'
 export * from './components/CategorySearchResult/CategorySearchResults'
+export * from './components/CategorySearchResult/CategorySearchResult.gql'
 export * from './components/NoSearchResults/NoSearchResults'
 export * from './components/SearchButton/SearchButton'
 export * from './components/SearchContext/SearchContext'
 export * from './components/SearchDivider/SearchDivider'
 export * from './components/SearchForm/SearchForm'
 export * from './components/SearchLink/SearchLink'
+export * from './components/SearchFab/SearchFab'
 export * from './hooks/useProductList'
 export * from './components/ProductFiltersPro/ProductFiltersProCategorySectionSearch'
 export * from './components/ProductFiltersPro/ProductFiltersProSearchHeader'
@@ -23,4 +25,4 @@ export {
 
 export * from '@graphcommerce/magento-product/components/ProductFiltersPro'
 export * from './utils/productListApplySearchDefaults'
-export * from './components/ProductFiltersPro/ProductFiltersProSearchField'
+export * from './components/ProductFiltersPro/SearchField'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.116",
+  "version": "9.0.0-canary.117",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,22 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.116",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.116",
-    "@graphcommerce/graphql": "^9.0.0-canary.116",
-    "@graphcommerce/image": "^9.0.0-canary.116",
-    "@graphcommerce/magento-product": "^9.0.0-canary.116",
-    "@graphcommerce/magento-store": "^9.0.0-canary.116",
-    "@graphcommerce/next-ui": "^9.0.0-canary.116",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.116",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.116",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.117",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.117",
+    "@graphcommerce/graphql": "^9.0.0-canary.117",
+    "@graphcommerce/image": "^9.0.0-canary.117",
+    "@graphcommerce/magento-product": "^9.0.0-canary.117",
+    "@graphcommerce/magento-store": "^9.0.0-canary.117",
+    "@graphcommerce/next-ui": "^9.0.0-canary.117",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.117",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.117",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
+    "framer-motion": "*",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/tsconfig.json

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

package/utils/productListApplySearchDefaults.ts

@@ -1,5 +1,9 @@
 import { cloneDeep, useQuery } from '@graphcommerce/graphql'
-import type { ProductListParams, ProductListQueryVariables } from '@graphcommerce/magento-product'
+import type {
+  ProductFiltersQueryVariables,
+  ProductListParams,
+  ProductListQueryVariables,
+} from '@graphcommerce/magento-product'
 import type { StoreConfigQuery } from '@graphcommerce/magento-store'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 
@@ -43,7 +47,7 @@ export function productListApplySearchDefaults(
 
 export function searchDefaultsToProductListFilters(
   variables: ProductListQueryVariables | undefined,
-): ProductListQueryVariables {
+): ProductFiltersQueryVariables {
   return {
     ...variables,
     filters: {},