@graphcommerce/magento-search 4.0.3 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Change Log
 
+## 4.1.0
+
+### Minor Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d)
+  Thanks [@paales](https://github.com/paales)! - `<SearchLink />` a more lightweight (less js)
+  alternative for `<SearchButton />`
+
+### Patch Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0)
+  Thanks [@paales](https://github.com/paales)! - Renamed SvgIcon to IconSvg to prevent collisions
+  with MUI
+
+* [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)
+  Thanks [@paales](https://github.com/paales)! - added responsive size to the Fab component
+
+* Updated dependencies
+  [[`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0),
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d),
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)]:
+  - @graphcommerce/next-ui@4.2.0
+
 ## 4.0.3
 
 ### Patch Changes

package/{CategorySearchResult/index.tsx → components/CategorySearchResult/CategorySearchResult.tsx}

@@ -1,4 +1,4 @@
-import { Highlight, iconChevronRight, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
+import { Highlight, iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Button, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
@@ -13,17 +13,17 @@ const name = 'CategorySearchResult' as const
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
-export default function CategorySearchResult(props: CategorySearchResultProps) {
+export function CategorySearchResult(props: CategorySearchResultProps) {
   const { search = '', sx = [], ...catProps } = props
 
   return (
-    <PageLink href={`/${catProps?.url_path ?? ''}`}>
+    <PageLink href={`/${catProps?.url_path ?? ''}`} passHref>
       <Button
         fullWidth
         variant='contained'
         className={classes.root}
         disableElevation
-        endIcon={<SvgIcon src={iconChevronRight} size='small' />}
+        endIcon={<IconSvg src={iconChevronRight} size='small' />}
         sx={[
           (theme) => ({
             background: theme.palette.background.default,

package/{NoSearchResults/index.tsx → components/NoSearchResults/NoSearchResults.tsx}

@@ -8,7 +8,7 @@ const name = 'NoSearchResults' as const
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
-export default function NoSearchResults(props: NoSearchResultsProps) {
+export function NoSearchResults(props: NoSearchResultsProps) {
   const { search, sx = [] } = props
 
   const term = `'${search}'`

package/{SearchButton/index.tsx → components/SearchButton/SearchButton.tsx}

@@ -1,4 +1,4 @@
-import { iconSearch, responsiveVal, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
+import { iconSearch, responsiveVal, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -9,7 +9,11 @@ const name = 'SearchButton' as const
 const parts = ['root', 'inputRoot'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function SearchButton(props: SearchButtonProps) {
+/**
+ * @deprecated The use of `SearchButton` is not advised. It will import lots of things from
+ *   `@mui/material`. Use the <SearchLink /> component instead.
+ */
+export function SearchButton(props: SearchButtonProps) {
   const { InputProps, label, fullWidth = false, sx = [], ...textFieldProps } = props
   const classes = withState({ fullWidth })
 
@@ -23,7 +27,7 @@ export default function SearchButton(props: SearchButtonProps) {
       InputLabelProps={{ shrink: false }}
       InputProps={{
         readOnly: true,
-        endAdornment: <SvgIcon src={iconSearch} size='medium' />,
+        endAdornment: <IconSvg src={iconSearch} size='medium' />,
         classes: { root: classes.inputRoot },
         ...InputProps,
       }}

package/{SearchDivider/index.tsx → components/SearchDivider/SearchDivider.tsx}

@@ -1,10 +1,8 @@
 import { styled } from '@mui/material'
 
-const SearchDivider = styled('div', { name: 'SearchDivider' })(({ theme }) => ({
+export const SearchDivider = styled('div', { name: 'SearchDivider' })(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   width: '100%',
   marginTop: theme.spacings.md,
   marginBottom: theme.spacings.md,
 }))
-
-export default SearchDivider

package/{SearchForm/index.tsx → components/SearchForm/SearchForm.tsx}

@@ -2,7 +2,7 @@ import {
   FormRow,
   iconClose,
   iconSearch,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { useForm, useFormAutoSubmit, useFormMuiRegister } from '@graphcommerce/react-hook-form'
@@ -23,7 +23,7 @@ const name = 'SearchForm' as const
 const parts = ['root', 'totalProducts'] as const
 const { classes } = extendableComponent(name, parts)
 
-export default function SearchForm(props: SearchFormProps) {
+export function SearchForm(props: SearchFormProps) {
   const { totalResults = 0, search = '', urlHandle = 'search', textFieldProps, sx = [] } = props
   const router = useRouter()
 
@@ -47,7 +47,7 @@ export default function SearchForm(props: SearchFormProps) {
 
   const endAdornment = !watch('search') ? (
     <IconButton size='small'>
-      <SvgIcon src={iconSearch} />
+      <IconSvg src={iconSearch} />
     </IconButton>
   ) : (
     <>
@@ -65,7 +65,7 @@ export default function SearchForm(props: SearchFormProps) {
         </Box>
       )}
       <IconButton onClick={handleReset} size='small'>
-        <SvgIcon src={iconClose} />
+        <IconSvg src={iconClose} />
       </IconButton>
     </>
   )

package/components/SearchLink/SearchLink.tsx

@@ -0,0 +1,69 @@
+import {
+  iconSearch,
+  responsiveVal,
+  IconSvg,
+  extendableComponent,
+  useFabSize,
+} from '@graphcommerce/next-ui'
+import { Link, LinkProps } from '@mui/material'
+import PageLink from 'next/link'
+import { SetRequired } from 'type-fest'
+
+export type SearchLinknProps = SetRequired<LinkProps, 'href'>
+
+const name = 'SearchLink' as const
+const parts = ['root', 'text', 'svg'] as const
+const { classes } = extendableComponent(name, parts)
+
+/**
+ * Usage:
+ *
+ * ```tsx
+ * const MyComponent = () => <SearchLink href='/search' />
+ * ```
+ */
+export function SearchLink(props: SearchLinknProps) {
+  const { href, sx = [], children, ...linkProps } = props
+
+  const fabSize = useFabSize('responsive')
+
+  return (
+    <PageLink href={href} passHref>
+      <Link
+        className={classes.root}
+        underline='none'
+        sx={[
+          (theme) => ({
+            justifySelf: 'center',
+            // @todo make abstract, this is the size of a responsive Fab minus the icon size, divided by 2.
+            marginRight: `calc(${fabSize} / 4)`,
+            width: responsiveVal(64, 172),
+            borderRadius: 2,
+            typography: 'body2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: theme.spacings.xs,
+            color: 'text.secondary',
+            border: 1,
+            borderColor: 'divider',
+            py: 1,
+            px: 1.5,
+            '&:hover': {
+              borderColor: 'text.secondary',
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        {...linkProps}
+      >
+        <div className={classes.text}>{children ?? <>&nbsp;</>}</div>
+        <IconSvg
+          src={iconSearch}
+          className={classes.svg}
+          sx={{ color: 'text.primary', fontSize: '1.4em' }}
+        />
+      </Link>
+    </PageLink>
+  )
+}

package/index.ts

@@ -1,15 +1,7 @@
-export { default as SearchDivider } from './SearchDivider'
-
-export { default as NoSearchResults } from './NoSearchResults'
-export * from './NoSearchResults'
-
-export { default as CategorySearchResult } from './CategorySearchResult'
-export * from './CategorySearchResult'
-
-export { default as SearchForm } from './SearchForm'
-export * from './SearchForm'
-
-export { default as SearchButton } from './SearchButton'
-export * from './SearchButton'
-
+export * from './components/SearchDivider/SearchDivider'
+export * from './components/NoSearchResults/NoSearchResults'
+export * from './components/CategorySearchResult/CategorySearchResult'
+export * from './components/SearchForm/SearchForm'
+export * from './components/SearchLink/SearchLink'
 export * from './Search.gql'
+export * from './components/SearchButton/SearchButton'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,8 +20,9 @@
   "dependencies": {
     "@graphcommerce/graphql": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
-    "@graphcommerce/next-ui": "^4.1.2",
-    "@graphcommerce/react-hook-form": "^3.0.3"
+    "@graphcommerce/next-ui": "^4.2.0",
+    "@graphcommerce/react-hook-form": "^3.0.3",
+    "type-fest": "^2.12.0"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",

package/CategorySearchResult/chevron_right.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>desktop_chevron_Right</title>
-    <g id="desktop_chevron_Right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="chevron-right" transform="translate(16.500000, 16.000000) scale(-1, 1) translate(-16.500000, -16.000000) translate(13.000000, 9.000000)" stroke="#000000" stroke-width="1.6">
-            <polyline id="Path-2-Copy" points="7 0 0 7 7 14"></polyline>
-        </g>
-    </g>
-</svg>