@graphcommerce/magento-product 4.3.2 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Change Log
 
+## 4.3.3
+
+### 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 [[`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/framer-scroller@2.1.10
+  - @graphcommerce/magento-cart@4.2.13
+  - @graphcommerce/magento-store@4.2.2
+  - @graphcommerce/next-ui@4.7.2
+  - @graphcommerce/graphql@3.1.3
+
 ## 4.3.2
 
 ### Patch Changes

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -10,7 +10,7 @@ import {
   extendableComponent,
   AnimatedRow,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
 import PageLink from 'next/link'
@@ -93,7 +93,7 @@ export function ProductAddToCart(
           })}
           {...buttonProps}
         >
-          <Trans>Add to Cart</Trans>
+          <Trans id='Add to Cart' />
         </Button>
         {additionalButtons}
       </Box>
@@ -125,14 +125,15 @@ export function ProductAddToCart(
               color='secondary'
               endIcon={<IconSvg src={iconChevronRight} />}
             >
-              <Trans>View shopping cart</Trans>
+              <Trans id='View shopping cart' />
             </Button>
           </PageLink>
         }
       >
-        <Trans>
-          <strong>{name}</strong> has been added to your shopping cart!
-        </Trans>
+        <Trans
+          id='<0>{name}</0> has been added to your shopping cart!'
+          components={{ 0: <strong /> }}
+        />
       </MessageSnackbar>
     </Box>
   )

package/components/ProductListCount/ProductListCount.tsx

@@ -1,5 +1,5 @@
 import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
 import { ProductListCountFragment } from './ProductListCount.gql'
 
@@ -35,9 +35,9 @@ export function ProductListCount(props: ProductCountProps) {
     >
       <Divider component='div' className={classes.line} />
       <Typography variant='body2' color='text.disabled' className={classes.count}>
-        {total_count === 0 && <Trans>no products</Trans>}
-        {total_count === 1 && <Trans>one product</Trans>}
-        {(total_count ?? 0) > 1 && <Trans>{total_count} products</Trans>}
+        {total_count === 0 && <Trans id='no products' />}
+        {total_count === 1 && <Trans id='one product' />}
+        {(total_count ?? 0) > 1 && <Trans id='{total_count} products' values={{ total_count }} />}
       </Typography>
       <Divider component='div' className={classes.line} />
     </Box>

package/components/ProductListFilters/FilterRangeType.tsx

@@ -2,7 +2,7 @@ import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
@@ -79,16 +79,18 @@ export function FilterRangeType(props: FilterRangeTypeProps) {
 
     if (from === min && to !== max)
       currentLabel = (
-        <Trans>
-          Below <Money round value={Number(currentFilter?.to)} />
-        </Trans>
+        <Trans
+          id='Below <0/>'
+          components={{ 0: <Money round value={Number(currentFilter?.to)} /> }}
+        />
       )
 
     if (from !== min && to === max)
       currentLabel = (
-        <Trans>
-          Above <Money round value={Number(currentFilter?.from)} />
-        </Trans>
+        <Trans
+          id='Above <0/>'
+          components={{ 0: <Money round value={Number(currentFilter?.from)} /> }}
+        />
       )
 
     if (from !== min && to !== max)

package/components/ProductListItem/ProductListItem.tsx

@@ -1,6 +1,6 @@
 import { Image, ImageProps } from '@graphcommerce/image'
 import { responsiveVal, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { ButtonBase, Typography, Box, styled, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -135,7 +135,7 @@ export function ProductListItem(props: ProductListItemProps) {
               }}
               className={`${classes.placeholder} ${classes.image}`}
             >
-              <Trans>No Image</Trans>
+              <Trans id='No Image' />
             </Box>
           )}
 

package/components/ProductListSort/ProductListSort.tsx

@@ -1,7 +1,7 @@
 import { useQuery, cloneDeep } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react'
 import { ListItem, ListItemText, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
@@ -28,7 +28,7 @@ export function ProductListSort(props: ProductListSortProps) {
   const [currentSort = defaultSort] = Object.keys(params.sort)
   const currentOption = sort_fields?.options?.find((option) => option?.value === currentSort)
   const selected = currentSort !== defaultSort
-  const label = <Trans>Sort By</Trans>
+  const label = <Trans id='Sort By' />
 
   const removeFilter = () => {
     const linkParams = cloneDeep(params)

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,24 +12,25 @@
     }
   },
   "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/framer-scroller": "2.1.9",
-    "@graphcommerce/graphql": "3.1.2",
+    "@graphcommerce/framer-scroller": "2.1.10",
+    "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/graphql-mesh": "4.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.12",
-    "@graphcommerce/magento-store": "4.2.1",
-    "@graphcommerce/next-ui": "4.7.1",
+    "@graphcommerce/magento-cart": "4.2.13",
+    "@graphcommerce/magento-store": "4.2.2",
+    "@graphcommerce/next-ui": "4.7.2",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
     "next": "12.1.2",