@graphcommerce/magento-search 4.1.7 → 4.1.10

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # Change Log
 
+## 4.1.10
+
+### Patch Changes
+
+- [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+  Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+  All occurences of `<Trans>` and `t` need to be replaced:
+
+  ```tsx
+  import { Trans, t } from '@lingui/macro'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={t`Account ${foo}`}>
+        <Trans>My Translation {foo}</Trans>
+      </div>
+    )
+  }
+  ```
+
+  Needs to be replaced with:
+
+  ```tsx
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+      </div>
+    )
+  }
+  ```
+
+  [More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)
+
+- Updated dependencies [[`50188e378`](https://github.com/graphcommerce-org/graphcommerce/commit/50188e378b4c77561ebc600958ea11cd114fa61a), [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/react-hook-form@3.1.3
+  - @graphcommerce/next-ui@4.7.2
+  - @graphcommerce/graphql@3.1.3
+
+## 4.1.9
+
+### Patch Changes
+
+- Updated dependencies [[`25ef6cf08`](https://github.com/graphcommerce-org/graphcommerce/commit/25ef6cf08c278105307d6f604b7135d637e9046c), [`80e30bb77`](https://github.com/graphcommerce-org/graphcommerce/commit/80e30bb77015755fbc00a7935d590f80c1c1c18c)]:
+  - @graphcommerce/graphql@3.1.2
+  - @graphcommerce/next-ui@4.7.1
+
+## 4.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04)]:
+  - @graphcommerce/next-ui@4.7.0
+
 ## 4.1.7
 
 ### Patch Changes

package/components/NoSearchResults/NoSearchResults.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 
 export type NoSearchResultsProps = { search: string; sx?: SxProps<Theme> }
@@ -26,10 +26,10 @@ export function NoSearchResults(props: NoSearchResultsProps) {
       ]}
     >
       <Typography variant='h5' align='center'>
-        <Trans>We couldn&apos;t find any results for {term}</Trans>
+        <Trans id="We couldn't find any results for {term}" values={{ term }} />
       </Typography>
       <p>
-        <Trans>Try a different search</Trans>
+        <Trans id='Try a different search' />
       </p>
     </Box>
   )

package/components/SearchButton/SearchButton.tsx

@@ -1,5 +1,5 @@
 import { iconSearch, responsiveVal, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { TextField, TextFieldProps } from '@mui/material'
 
 export type SearchButtonProps = TextFieldProps
@@ -22,7 +22,7 @@ export function SearchButton(props: SearchButtonProps) {
       variant='outlined'
       size='small'
       className={classes.root}
-      label={label ?? <Trans>Search...</Trans>}
+      label={label ?? <Trans id='Search...' />}
       id='search-input'
       InputLabelProps={{ shrink: false }}
       InputProps={{

package/components/SearchForm/SearchForm.tsx

@@ -6,7 +6,8 @@ import {
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { useForm, useFormAutoSubmit, useFormMuiRegister } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { Box, IconButton, SxProps, TextField, TextFieldProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 
@@ -60,8 +61,8 @@ export function SearchForm(props: SearchFormProps) {
             paddingRight: '7px',
           })}
         >
-          {totalResults === 1 && <Trans>{totalResults} result</Trans>}
-          {totalResults > 1 && <Trans>{totalResults} results</Trans>}
+          {totalResults === 1 && <Trans id='{totalResults} result' values={{ totalResults }} />}
+          {totalResults > 1 && <Trans id='{totalResults} results' values={{ totalResults }} />}
         </Box>
       )}
       <IconButton onClick={handleReset} size='small'>
@@ -88,7 +89,7 @@ export function SearchForm(props: SearchFormProps) {
         <TextField
           variant='outlined'
           type='text'
-          placeholder={t`Search`}
+          placeholder={i18n._(/* i18n */ `Search`)}
           defaultValue={search}
           error={formState.isSubmitted && !!formState.errors.search}
           helperText={formState.isSubmitted && formState.errors.search?.message}

package/components/SearchLink/SearchLink.tsx

@@ -7,6 +7,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { Link, LinkProps } from '@mui/material'
 import PageLink from 'next/link'
+import { useRouter } from 'next/router'
 import type { SetRequired } from 'type-fest'
 
 export type SearchLinkProps = SetRequired<Pick<LinkProps, 'href' | 'sx' | 'children'>, 'href'>
@@ -24,46 +25,50 @@ const { classes } = extendableComponent(name, parts)
  */
 export function SearchLink(props: SearchLinkProps) {
   const { href, sx = [], children, ...linkProps } = props
+  const router = useRouter()
 
   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>
+    <Link
+      component='button'
+      className={classes.root}
+      underline='none'
+      onClick={(e) => {
+        e.preventDefault()
+        return router.push(href)
+      }}
+      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>
   )
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.7",
+  "version": "4.1.10",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,21 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.1.1",
+    "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/next-ui": "4.6.2",
-    "@graphcommerce/react-hook-form": "3.1.2"
+    "@graphcommerce/next-ui": "4.7.2",
+    "@graphcommerce/react-hook-form": "3.1.3"
   },
   "peerDependencies": {
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/material": "5.5.3",
     "next": "12.1.2",
     "react": "^17.0.2",