@graphcommerce/docs 4.6.3 → 4.6.6

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # Change Log
 
+## 4.6.6
+
+### Patch Changes
+
+- [#1587](https://github.com/graphcommerce-org/graphcommerce/pull/1587) [`6ce2cbaf2`](https://github.com/graphcommerce-org/graphcommerce/commit/6ce2cbaf2cf27e21b753f7cb71e7e74826294de6) Thanks [@paales](https://github.com/paales)! - fixed typo from grapql to graphql
+
+## 4.6.5
+
+### Patch Changes
+
+- [#1584](https://github.com/graphcommerce-org/graphcommerce/pull/1584) [`f424f3da1`](https://github.com/graphcommerce-org/graphcommerce/commit/f424f3da125d2ec961ae60ebec7a65825710f72c) Thanks [@paales](https://github.com/paales)! - fixed typo from grapql to graphql
+
+## 4.6.4
+
+### Patch Changes
+
+- [#1443](https://github.com/graphcommerce-org/graphcommerce/pull/1443) [`c4c86df1e`](https://github.com/graphcommerce-org/graphcommerce/commit/c4c86df1e8c74956b2ae76ab1a88c496fced4790) Thanks [@timhofman](https://github.com/timhofman)! - Missing or outdated resolutions results in build errors
+
+* [#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)
+
 ## 4.6.3
 
 ### Patch Changes

package/feature-list.md

@@ -218,7 +218,7 @@ Black checkbox is a feature unaffected by GraphCommerce
       average order value.
 - [ ] Show pricing tiers. — [Todo]
 - [x] Present product ratings and reviews.
-- [ ] Provide an option to add products to a wish list. — [Todo]
+- [x] Provide an option to add products to a wish list.
 - [ ] Add Facebook, Twitter, and email links to share products. — [Todo]
 
 ### Checkout

package/framework/translations.md

@@ -26,12 +26,12 @@ msgstr "cancelado"
 
 The msgid is the message being translated. In
 /node_modules/@graphcommerce/magento-cart/components/EmptyCart/EmptyCart.tsx,
-you can see a the first msgid is passed as a propped, wrapped in the `<Trans>`
+you can see that the first msgid is passed as a the id prop to the <Trans>
 component:
 
-```ts
+```tsx
 <FullPageMessage
-  title={<Trans>Your cart is empty</Trans>}
+  title={<Trans id="Your cart is empty" />}
   ...
 >
 ```
@@ -57,20 +57,31 @@ Refresh to see your changes updated
 ## Adding translations to custom component
 
 If you're building a component, you can wrap the strings you want to translate
-in the `<Trans>` jsx macro:
+in the `<Trans>` component:
 
-```ts
+```tsx
 <Typography variant='h3'>
-  <Trans>Call us now</Trans>
+  <Trans id='Call us now' />
 </Typography>
 ```
 
+To translate a string:
+
+```tsx
+<PageMeta title={i18n._(/* i18n */ `Blog`)} />
+```
+
+_The `/* i18n */` comment is required for `lingui extract` to work properly_
+
 Add Linqui to the component's imports:
 
-```ts
-import { t, Trans } from '@lingui/macro'
+```tsx
+import { Trans } from '@lingui/react'
+import { i18n } from '@lingui/core'
 ```
 
+## Generating translation files with all translations
+
 Run `yarn lingui`. All new (missing) translations will be added to translations
 files:
 
@@ -184,11 +195,12 @@ msgstr ""
 
 ```
 
-5. Add your translations ins the newly created .po file. Run the app and use the
+5. Add your translations in the newly created .po file. Run the app and use the
    store switcher to navigate to your new storeview.
-   [Github copilot ↗](https://copilot.github.com/) provides very accurate
-   suggestions in VS Code with the
-   [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
+
+> Tip: [Github copilot ↗](https://copilot.github.com/) provides very accurate
+> suggestions in VS Code with the
+> [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
 
 ### Magento Locale codes
 

package/getting-started/create.md

@@ -47,7 +47,7 @@ If you want to test a GraphCommerce storefront using a pre-configured Magento
 demo store and a pre-configured GraphCMS project with demo content, then you
 need to only install the dependencies. This is the quickest approach.
 
-- Install and use node 14: `nvm install 14 && nvm use 14`
+- Install and use node 14: `nvm install 14` or `nvm use 14`
 - Install yarn: `npm install --global yarn`
 
 ## Step 1: Create a new GraphCommerce app
@@ -65,13 +65,12 @@ https://user-images.githubusercontent.com/1251986/158647122-dc57002f-a9c2-4661-a
 
 ### Download the example
 
-1. `git clone git@github.com:graphcommerce-org/graphcommerce.git`
-2. `mkdir my-project`
-3. `cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce`
-4. `cd my-project`
-5. `cp -R .env.example .env`
-6. `rm CHANGELOG.md`
-7. `rm -rf node_modules && rm -rf .next`
+1. `git clone https://github.com/graphcommerce-org/graphcommerce.git` — clone repository
+2. `mkdir my-project` — create project folder
+3. `cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce` — copy example, delete repo
+4. `cd my-project` — change directory to project folder
+5. `cp -R .env.example .env` — create .env file
+6. `rm CHANGELOG.md` — remove changelog
 
 Edit /package.json. Delete `"scripts": {...}` and rename `scripts_local` to
 `scripts`:

package/getting-started/readme.md

@@ -211,7 +211,7 @@ API. GraphCommerce uses GraphQL Mesh, which adds the ability to add extra
 (micro)services as data sources. In the magento-graphcms example, a headless CMS
 called [GraphCMS](../getting-started/../framework/graphcms.md) is integrated.
 
-By default, the GraphQL Mesh endpoint runs on route /api/grapql. You can query
+By default, the GraphQL Mesh endpoint runs on route /api/graphql. You can query
 both the Magento GraphQL schema and the GraphCMS GraphQL schema. Try out the
 GraphCommerce demo
 [GraphQL Explorer ↗](https://graphcommerce.vercel.app/api/graphql) with the

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "4.6.3",
+  "version": "4.6.6",
   "sideEffects": true,
   "devDependencies": {
-    "@graphcommerce/prettier-config-pwa": "^4.0.5"
+    "@graphcommerce/prettier-config-pwa": "^4.0.6"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/roadmap.md

@@ -10,7 +10,6 @@ The following overview contains the status of items on the GraphCommerce roadmap
 ## In progress
 
 - [ ] Adyen payment service (Braintree, Mollie, already implemented)
-- [ ] Wishlist
 - [ ] PageBuilder support
 - [ ] Fetch Magento image sizes (probe-image-size)
 

package/upgrading.md

@@ -74,7 +74,8 @@ Compare your local /package.json with the example's
    [remove PSP's](./getting-started/create.md#remove-unused-psps) your backend
    doesn't support.
 2. Replace your local `devDependencies` with the example's `devDependencies`
-3. Replace your local `scripts` with the example's `scripts_local`
+3. Replace your local `resolutions` with the example's `resolutions`
+4. Replace your local `scripts` with the example's `scripts_local`
 
 After updating the package.json file, run the following to install the latest
 packages: