@graphcommerce/docs 5.2.0-canary.2 → 5.2.0-canary.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 5.2.0-canary.3
+
+### Minor Changes
+
+- [#1766](https://github.com/graphcommerce-org/graphcommerce/pull/1766) [`e34169ee2`](https://github.com/graphcommerce-org/graphcommerce/commit/e34169ee2e0fdc052ff589ceca0bc67557584c1f) - Upgraded to Next.js 13
+
+  - NextLink integrates the next/link functionality with @mui/material's Link and ButtonBase (and all it's derivatives) components.
+  - NextLink automatically adds `target="_blank"` when the href is external.
+  - NextLink makes all relative href absolute. `href="my-page"` will be rendered as `href="/my-page"`.
+
+  Upgrade instructions: https://www.graphcommerce.org/docs/framework/links#upgrading-from-nextjs-12 ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1766](https://github.com/graphcommerce-org/graphcommerce/pull/1766) [`c408c0a88`](https://github.com/graphcommerce-org/graphcommerce/commit/c408c0a8836c3ef1f54527b503d1d62855f08d3c) - Added Magento configuration section to the docs ([@paales](https://github.com/paales))
+
 ## 5.2.0-canary.2
 
 ## 5.2.0-canary.1

package/framework/links.md

@@ -0,0 +1,122 @@
+# Handling links in GraphCommerce
+
+GraphCommerce integrates the next/link functionality with @mui/material's Link
+and ButtonBase (and all it's derivatives) components with NextLink. There is no
+need to wrap a Link component with next/link anymore.
+
+NextLink automatically adds `target="_blank"` when the href is external.
+
+NextLink makes all relative href absolute. `<Link href="my-page"/>` will be
+rendered as `<Link href="/my-page"/>`.
+
+## Usage
+
+Using NextLink is as simple as using the Link/Button component from
+@mui/material.
+
+### Basic usage
+
+```tsx
+import { Link, Fab, Button } from '@mui/material'
+
+function MyComponent() {
+  return (
+    <>
+      <Link href='/about'>About</Link>
+      <Button href='/bla'>Styled as a button</Button>
+      <Link href='https://www.graphcommerce.org/'>GraphCommerce©</Link>
+    </>
+  )
+}
+```
+
+### Using next/link's props or relative URL's
+
+If you want to use props of next/link and satisfy typescript you need to provide
+`component={NextLink}`.
+
+```tsx
+import { Link } from '@mui/material'
+import { NextLink } from '@graphcommerce/next-ui'
+
+function MyComponent() {
+  return (
+    <Link href='subpage' relative component={NextLink} prefetch={false}>
+      About
+    </Link>
+  )
+}
+```
+
+### Using next/link with a custom component
+
+```tsx
+import { Chip } from '@mui/material'
+import { NextLink } from '@graphcommerce/next-ui'
+
+function MyComponent() {
+  return <Chip component={NextLink} href={`/${url}`} label={'my label'} />
+}
+```
+
+## Upgrading from Next.js 12
+
+Before Next.js 13, the next/link component needed to wrap a Material-UI Link
+component;
+
+```tsx
+import PageLink from 'next/link'
+import { Link } from '@mui/material'
+
+function MyComponent() {
+  return (
+    <PageLink href='/about' passHref>
+      <Link>About</Link>
+    </PageLink>
+  )
+}
+```
+
+To upgrade this component to Next.js 13, you can remove the PageLink component.
+
+```tsx
+import { Link } from '@mui/material'
+
+function MyComponent() {
+  return <Link href='/about'>About</Link>
+}
+```
+
+### Upgrading a Link that uses next/link props
+
+```tsx
+import PageLink from 'next/link'
+import { Link } from '@mui/material'
+
+function MyComponent() {
+  return (
+    <PageLink href='/about' passHref prefetch={false}>
+      <Link>Link without prefetch</Link>
+    </PageLink>
+  )
+}
+```
+
+```tsx
+import { Link } from '@mui/material'
+import { NextLink } from '@graphcommerce/next-ui'
+
+function MyComponent() {
+  return (
+    <>
+      <Link href='/about' component={NextLink} prefetch={false}>
+        Link without prefetch
+      </Link>
+    </>
+  )
+}
+```
+
+## Further reading
+
+-

package/magento/readme.md

@@ -7,6 +7,49 @@ menu: Overview
 To integrate with Magento, most of the functionality should work out-of-the box
 if Magento exposes a working GraphQL API.
 
+## Magento configuration
+
+### Configure Base Link Url to get emails working
+
+Configure the Base Link Url's to match your GraphCommerce frontend URL per
+storeview with the locale included. e.g. `https://graphcommerce.vercel.app/nl/`
+
+Unsecure:
+`Stores -> Configuration -> General -> Web -> Base URLs -> Base Link Url`
+
+Secure:
+`Stores -> Configuration -> General -> Web -> Base URLs (secure) -> Base Link Url`
+
+### Configure Base Link Url with 'Add Store Code to Urls' enabled:
+
+If you are including the store code in the URL you can configure the above on
+the website scope without the locale added.
+
+To properly redirect to the actual URL used in the fontend add redirects to
+next.config.js:
+
+```js
+/** @type {import('next').NextConfig} */
+const config = {
+  async redirects() {
+    return [
+      { source: '/b2b_nl/:path*', destination: '/nl/:path*', permanent: false },
+      { source: '/b2b_en/:path*', destination: '/en/:path*', permanent: false },
+    ]
+  },
+}
+```
+
+### Configure the address lines to fix the checkout
+
+Set the number of address lines to 3. (default is 2)
+
+For Magento Open Source:
+`Stores -> Configuration -> Customers -> Customer Configuration -> Name and address options`
+
+For Adobe Commerce:
+`Stores -> Attributes -> Customer Address -> street -> Lines Count`
+
 ## Optional packages
 
 - [Store Pickup / MSI](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-cart-pickup)

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "5.2.0-canary.2",
+  "version": "5.2.0-canary.3",
   "sideEffects": true,
   "devDependencies": {
-    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.2"
+    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.3"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }