@graphcommerce/magento-search 6.2.0-canary.9 → 6.2.0-canary.91

package/CHANGELOG.md

@@ -1,5 +1,189 @@
 # Change Log
 
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+### Patch Changes
+
+- [#2013](https://github.com/graphcommerce-org/graphcommerce/pull/2013) [`c57bdf8a4`](https://github.com/graphcommerce-org/graphcommerce/commit/c57bdf8a4ce936c3eedc4dfada3a464a113ac68a) - Updated @mui and framer-motion packages to latest versions ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 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
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+### Minor Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+### Minor Changes
+
+- [#1962](https://github.com/graphcommerce-org/graphcommerce/pull/1962) [`518b6ca24`](https://github.com/graphcommerce-org/graphcommerce/commit/518b6ca248fc94624dc06eb02de5b3eac0fc9483) - Created a new `<ValidatedPasswordElement/>` which validates according to Magento's validation groups and implement on all locations. Move remaining password fields to `<PasswordElement />` ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+## 6.2.0-canary.17
+
+## 6.2.0-canary.16
+
+### Patch Changes
+
+- [#1930](https://github.com/graphcommerce-org/graphcommerce/pull/1930) [`c8d023e9e`](https://github.com/graphcommerce-org/graphcommerce/commit/c8d023e9e874131cd9f8fe192b1fca5fe1a26ee3) - Fix the close menu on search and add the option to secondary menu items ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 6.2.0-canary.15
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
 ## 6.2.0-canary.9
 
 ## 6.2.0-canary.8

package/components/CategorySearchResult/CategorySearchResult.tsx

@@ -21,7 +21,6 @@ export function CategorySearchResult(props: CategorySearchResultProps) {
       fullWidth
       variant='pill'
       className={classes.root}
-      disableElevation
       endIcon={<IconSvg src={iconChevronRight} size='small' />}
       sx={[
         (theme) => ({
@@ -46,14 +45,14 @@ export function CategorySearchResult(props: CategorySearchResultProps) {
       ]}
     >
       <div>
-        {catProps?.breadcrumbs?.map((breadcrumb) => (
+        {catProps?.breadcrumbs?.map((breadcrumb, index) => (
           <React.Fragment key={breadcrumb?.category_url_path}>
             <Highlight
               key={breadcrumb?.category_url_path}
               text={breadcrumb?.category_name ?? ''}
               highlight={search}
             />
-            {' / '}
+            {(catProps.breadcrumbs?.length ?? 0) > index + 1 && ' / '}
           </React.Fragment>
         ))}
         <Highlight text={catProps?.name ?? ''} highlight={search} />

package/components/CategorySearchResult/CategorySearchResults.tsx

@@ -0,0 +1,11 @@
+import { Box, SxProps, Theme } from '@mui/material'
+
+export type CategorySearchResultsProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+}
+
+export function CategorySearchResults(props: CategorySearchResultsProps) {
+  const { children, sx = [] } = props
+  return <Box sx={sx}>{children}</Box>
+}

package/components/SearchButton/SearchButton.tsx

@@ -1,5 +1,6 @@
 import { iconSearch, responsiveVal, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { TextField, TextFieldProps } from '@mui/material'
 
 export type SearchButtonProps = TextFieldProps

package/components/SearchContext/SearchContext.tsx

@@ -0,0 +1,10 @@
+export type SearchContextProps = React.PropsWithChildren<{
+  serverProps?: unknown
+  // rendersInsideNextjs is needed, because of the InstantSearchSSRProvider data hydration inside the getStaticProps.
+  rendersInsideNextjs?: boolean
+}>
+
+export function SearchContext(props: SearchContextProps) {
+  const { children } = props
+  return <>{children}</>
+}

package/components/SearchForm/SearchForm.tsx

@@ -1,17 +1,10 @@
 import { TextFieldElement, TextFieldElementProps } from '@graphcommerce/ecommerce-ui'
-import {
-  FormRow,
-  iconClose,
-  iconSearch,
-  IconSvg,
-  extendableComponent,
-} from '@graphcommerce/next-ui'
-import { useForm, useFormAutoSubmit } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
-import { Box, IconButton, SxProps, Theme } from '@mui/material'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { FormAutoSubmit, useForm } from '@graphcommerce/react-hook-form'
+import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
+import { SearchFormAdornment } from './SearchFormAdornment'
 
 export type SearchFormProps = {
   totalResults?: number
@@ -22,9 +15,7 @@ export type SearchFormProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'SearchForm' as const
-const parts = ['root', 'totalProducts'] as const
-const { classes } = extendableComponent(name, parts)
+const { classes } = extendableComponent('SearchForm' as const, ['root'] as const)
 
 export function SearchForm(props: SearchFormProps) {
   const searchInputElement = useRef<HTMLInputElement>(null)
@@ -32,78 +23,45 @@ export function SearchForm(props: SearchFormProps) {
   useEffect(() => {
     searchInputElement.current?.focus()
   }, [])
-  const { totalResults = 0, search = '', urlHandle = 'search', textFieldProps, sx = [] } = props
+  const { search = '', urlHandle = 'search', textFieldProps, sx = [] } = props
   const router = useRouter()
 
-  const form = useForm({ mode: 'onChange', defaultValues: { search } })
-  const { handleSubmit, formState, reset, watch, getValues, control } = form
+  const form = useForm({ defaultValues: { search } })
+  const { handleSubmit, setValue, control } = form
 
-  const submit = handleSubmit((formData) => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    router.replace(`/${urlHandle}/${formData.search}`)
-    reset(getValues())
-  })
-  useFormAutoSubmit({ form, submit })
+  const submit = handleSubmit((formData) => router.replace(`/${urlHandle}/${formData.search}`))
 
-  const handleReset = () => {
-    reset({ search: '' })
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    router.replace(`/${urlHandle}`)
-  }
-
-  const endAdornment = !watch('search') ? (
-    <IconButton size='small' aria-label={i18n._(/* i18n */ 'Search')}>
-      <IconSvg src={iconSearch} />
-    </IconButton>
-  ) : (
-    <>
-      {totalResults > 0 && (
-        <Box
-          className={classes.totalProducts}
-          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>
-      )}
-      <IconButton onClick={handleReset} size='small'>
-        <IconSvg src={iconClose} />
-      </IconButton>
-    </>
+  const endAdornment = (
+    <SearchFormAdornment
+      control={form.control}
+      name='search'
+      onReset={() => {
+        setValue('search', '')
+        return submit()
+      }}
+    />
   )
 
   return (
-    <Box
-      className={classes.root}
-      component='form'
-      noValidate
-      onSubmit={submit}
-      onChange={() => {
-        if (watch('search') === '') {
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          router.replace(`/search`)
-        }
-      }}
-      sx={sx}
-    >
-      <FormRow>
-        <TextFieldElement
-          variant='outlined'
-          type='text'
-          name='search'
-          control={control}
-          defaultValue={search}
-          error={formState.isSubmitted && !!formState.errors.search}
-          helperText={formState.isSubmitted && formState.errors.search?.message}
-          InputProps={{ endAdornment }}
-          inputRef={searchInputElement}
-          {...textFieldProps}
-        />
-      </FormRow>
+    <Box className={classes.root} component='form' noValidate onSubmit={submit} sx={sx}>
+      <FormAutoSubmit
+        control={form.control}
+        submit={submit}
+        wait={200}
+        maxWait={400}
+        initialWait={0}
+      />
+      <TextFieldElement
+        variant='outlined'
+        type='text'
+        name='search'
+        color='primary'
+        control={control}
+        InputProps={{ ...textFieldProps?.InputProps, endAdornment }}
+        validation={{ minLength: 3 }}
+        inputRef={searchInputElement}
+        {...textFieldProps}
+      />
     </Box>
   )
 }

package/components/SearchForm/SearchFormAdornment.tsx

@@ -0,0 +1,25 @@
+import { IconSvg, iconSearch, iconClose } from '@graphcommerce/next-ui'
+import { Control, FieldPath, FieldValues, useWatch } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { IconButton } from '@mui/material'
+
+export function SearchFormAdornment<TFieldValues extends FieldValues = FieldValues>(props: {
+  control: Control<TFieldValues>
+  /** Autosubmit only when these field names update */
+  name: FieldPath<TFieldValues>
+
+  onReset?: () => void
+}) {
+  const { name, control, onReset } = props
+  const searchValue = useWatch({ control, name })
+
+  return !searchValue ? (
+    <IconButton size='small' aria-label={i18n._(/* i18n */ 'Search')}>
+      <IconSvg src={iconSearch} />
+    </IconButton>
+  ) : (
+    <IconButton onClick={onReset} size='small'>
+      <IconSvg src={iconClose} />
+    </IconButton>
+  )
+}

package/components/SearchLink/SearchLink.tsx

@@ -7,12 +7,13 @@ import {
 } from '@graphcommerce/next-ui'
 import { Breakpoint, Fab, FabProps, Link, LinkProps } from '@mui/material'
 import { useRouter } from 'next/router'
+import { MouseEventHandler } from 'react'
 import type { SetRequired } from 'type-fest'
 
 export type SearchLinkProps = {
   breakpoint?: Breakpoint
   fab?: FabProps
-} & SetRequired<Pick<LinkProps, 'href' | 'sx' | 'children'>, 'href'>
+} & SetRequired<Pick<LinkProps<'a'>, 'href' | 'sx' | 'children' | 'onClick'>, 'href'>
 
 const name = 'SearchLink' as const
 const parts = ['root', 'text', 'svg'] as const
@@ -26,21 +27,24 @@ const { classes } = extendableComponent(name, parts)
  * ```
  */
 export function SearchLink(props: SearchLinkProps) {
-  const { href, sx = [], children, breakpoint, fab, ...linkProps } = props
+  const { href, sx = [], children, breakpoint, fab, onClick, ...linkProps } = props
   const router = useRouter()
   const fabSize = useFabSize('responsive')
   const { sx: fabSx = [], size, color, ...fabProps } = fab ?? {}
 
+  const handleClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault()
+    onClick?.(e)
+    return router.push(href)
+  }
+
   return (
     <>
       <Link
-        component='button'
+        component='a'
         className={classes.root}
         underline='none'
-        onClick={(e) => {
-          e.preventDefault()
-          return router.push(href)
-        }}
+        onClick={handleClick}
         sx={[
           (theme) => ({
             justifySelf: 'center',
@@ -75,6 +79,7 @@ export function SearchLink(props: SearchLinkProps) {
       </Link>
       {breakpoint && (
         <Fab
+          component='a'
           href={href}
           size={size ?? 'large'}
           color={color ?? 'inherit'}

package/index.ts

@@ -1,7 +1,21 @@
 export * from './components/SearchDivider/SearchDivider'
 export * from './components/NoSearchResults/NoSearchResults'
 export * from './components/CategorySearchResult/CategorySearchResult'
+export * from './components/CategorySearchResult/CategorySearchResults'
 export * from './components/SearchForm/SearchForm'
 export * from './components/SearchLink/SearchLink'
 export * from './CategorySearch.gql'
 export * from './components/SearchButton/SearchButton'
+export * from './components/SearchContext/SearchContext'
+
+export {
+  ProductListSort,
+  ProductListFilters,
+  ProductListCount,
+  ProductListItemsBase,
+  ProductListPagination,
+  ProductListFiltersContainer,
+  ProductListParamsProvider,
+} from '@graphcommerce/magento-product'
+
+export * from '@graphcommerce/magento-product/components/ProductFiltersPro'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.9",
+  "version": "6.2.0-canary.91",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,22 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.9"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.91",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.91",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.91"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.9",
-    "@graphcommerce/graphql": "6.2.0-canary.9",
-    "@graphcommerce/image": "6.2.0-canary.9",
-    "@graphcommerce/next-ui": "6.2.0-canary.9",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.9"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.91",
+    "@graphcommerce/graphql": "6.2.0-canary.91",
+    "@graphcommerce/image": "6.2.0-canary.91",
+    "@graphcommerce/magento-product": "6.2.0-canary.91",
+    "@graphcommerce/next-ui": "6.2.0-canary.91",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.91"
   },
   "peerDependencies": {
-    "@lingui/react": "^3.13.2",
-    "@lingui/core": "^3.13.2",
+    "@lingui/react": "^4.2.1",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/material": "^5.10.16",
     "next": "^13.2.0",
     "react": "^18.2.0",