@graphcommerce/docs 6.1.1-canary.5 → 6.2.0-canary.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
+## 6.2.0-canary.8
+
+## 6.2.0-canary.7
+
+## 6.2.0-canary.6
+
 ## 6.1.1-canary.5
 
 ## 6.1.1-canary.4

package/contributing.md

@@ -98,6 +98,7 @@ need to sign the CLA once.
 - Changeset is available
 - Eslint must not report any errors in the changed files
 - Eslint should not give any warnings in the changed files
+- Bundle size should not increase significantly
 - Lingui translations must be
   [generated](https://www.graphcommerce.org/docs/framework/translations#generating-translation-files-with-all-translations)
   and translated

package/framework/config.md

@@ -90,6 +90,8 @@ Examples:
 
 The HyGraph endpoint.
 
+> Read-only endpoint that allows low latency and high read-throughput content delivery.
+
 Project settings -> API Access -> High Performance Read-only Content API
 
 #### `magentoEndpoint: String!`
@@ -109,6 +111,15 @@ Due to a limitation of the GraphQL API it is not possible to determine if a cart
 
 When Magento's StoreConfig adds this value, this can be replaced.
 
+#### `compare: Boolean`
+
+Use compare functionality
+
+#### `compareVariant: [CompareVariant](#CompareVariant)`
+
+By default the compare feature is denoted with a 'compare icon' (2 arrows facing one another).
+This may be fine for experienced users, but for more clarity it's also possible to present the compare feature as a checkbox accompanied by the 'Compare' label
+
 #### `customerRequireEmailConfirmation: Boolean`
 
 Due to a limitation in the GraphQL API of Magento 2, we need to know if the
@@ -149,6 +160,40 @@ The Google Tagmanager ID to be used on the site.
 
 This value is required even if you are configuring different values for each locale.
 
+#### `hygraphWriteAccessEndpoint: String`
+
+Content API. **Only used for migrations.**
+
+> Regular read & write endpoint that allows querying and mutating data in your project.
+
+Project settings -> API Access -> Content API
+
+#### `hygraphWriteAccessToken: String`
+
+Hygraph Management SDK Authorization Token. **Only used for migrations.**
+
+Project settings -> API Access -> Permanent Auth Tokens
+
+1. Click  'Add token' and give it a name, something like 'GraphCommerce Write Access Token' and keep stage on 'Published'.
+2. Under 'Management API', click 'Yes, Initialize defaults'
+3. Click 'Edit Permissions' and enable: 'Update' and 'Delete' permissions for 'models', 'enumerations', 'fields', 'components' and 'sources'
+  - Update existing models
+  - Delete existing models
+  - Update existing fields
+  - Delete existing fields
+  - Update existing enumerations
+  - Delete existing enumerations
+  - Update existing components
+  - Delete existing components
+  - Update remote sources
+  - Delete remote sources
+
+```
+GC_HYGRAPH_WRITE_ACCESS_ENDPOINT="https://...hygraph.com/v2/..."
+GC_HYGRAPH_WRITE_ACCESS_TOKEN="AccessTokenFromHygraph"
+yarn graphcommerce hygraph-migrate
+```
+
 #### `legacyProductRoute: Boolean`
 
 On older versions of GraphCommerce products would use a product type specific route.

package/framework/plugins-react.md

@@ -1,7 +1,7 @@
-# Plugins React
+# Plugins GraphCommerce
 
-GraphCommerce's React plugin system allows you to extend GraphCommerce's
-built-in components with your own logic.
+GraphCommerce's plugin system allows you to extend GraphCommerce's built-in
+components or functions with your own logic.
 
 - No runtime overhead: The plugin system is fully implemented in webpack and
 - Easy plugin creation: Configuration should happen in the plugin file, not a
@@ -10,13 +10,30 @@ built-in components with your own logic.
 
 ## What is a plugin
 
-A plugin is a way to modify React Components by wrapping them, without having to
-modify the code directly.
+A plugin is a way to modify React Components or a Function by wrapping them,
+without having to modify the code directly.
 
 For the M2 people: Think of around plugins, but without configuration files and
 no performance penalty.
 
-## How do I write a plugin?
+GraphCommerce has two kinds of plugins, React Component plugins and Function
+
+React Component plugins, which can be used to:
+
+- Pass props to components
+- Place your own components before the original component
+- Place your own components after the original component
+- Skip rendering of the original component conditionally
+
+Function plugins, which can be used to:
+
+- Call a function before the original function
+- Call a function after the original function
+- Modify the return value of a function
+- Modify the arguments of a function
+- Skip calling the original function conditionally
+
+## How do I write a React Component plugin?
 
 In this example we're going to add some text to list items, just like the text
 ‘BY GC’ that can seen in the demo on
@@ -26,14 +43,14 @@ In this example we're going to add some text to list items, just like the text
    contents:
 
    ```tsx
-   import type { ProductListItemProps } from '@graphcommerce/magento-product'
-   import type { PluginProps } from '@graphcommerce/next-config'
+   import type { ProductListItem } from '@graphcommerce/magento-product'
+   import type { ReactPlugin } from '@graphcommerce/next-config'
    import { Typography } from '@mui/material'
 
    export const component = 'ProductListItem' // Component to extend, required
    export const exported = '@graphcommerce/magento-product' // Location where the component is exported, required
 
-   function AwesomeProductListItem(props: PluginProps<ProductListItemProps>) {
+   const ListPlugin: ReactPlugin<typeof ProductListItem> = (props) => {
      // Prev in this case is ProductListItem, you should be able to see this if you log it.
      const { Prev, ...rest } = props
      return (
@@ -47,7 +64,7 @@ In this example we're going to add some text to list items, just like the text
        />
      )
    }
-   export const Plugin = AwesomeProductListItem // An export with the name Plugin, required
+   export const Plugin = ListPlugin // An export with the name Plugin, required
    ```
 
 2. Trigger the 'interceptor generation' so GraphCommerce knows of the existence
@@ -56,10 +73,20 @@ In this example we're going to add some text to list items, just like the text
    and save the file
 
    If everything went as expected you should see `Plugin!` below the product
-   name.
+   name. If that doesn't work try restarting the dev server.
 
 3. Happy programming!
 
+4. You can enable debug mode in your graphcommerce.config.js:
+
+   ```js
+   const config = {
+     debug: {
+       pluginStatus: true,
+     },
+   }
+   ```
+
 ## How does it work?
 
 After the creation of the plugin file GraphCommerce will create an interceptor
@@ -108,7 +135,7 @@ When opening the React debugger you can see the plugin wrapped.
 
 GraphCommerce uses a custom Webpack plugin to load the plugins. The plugin does
 a glob search for plugin folders in each GraphCommerce related pacakge:
-`${packageLocation}/plugins/**/*.tsx`
+`${packageLocation}/plugins/**/*.{ts|tsx}`
 
 Package locations are the root and all packages with `graphcommerce` in the name
 (This means all `@graphcommerce/*` packages and
@@ -125,7 +152,7 @@ work for other things such as:
 - Googletagmanager
 - Googleanalytics
 - Google recaptcha
-- Compare functionality?
+- Compare functionality
 - Wishlist functionality?
 - Abstraction between GraphCommerce and Backends? (Magento, BigCommerce,
   CommerceTools, etc.)

package/getting-started/graphcms-component.md

@@ -155,7 +155,7 @@ fragment Banner on Banner {
 - In /components/GraphCMS/RowRenderer.graphql, add the fragment:
 
 ```graphql
-fragment RowRenderer on Page {
+fragment RowRenderer on Page @inject(into: ["HygraphPage"]) {
   content {
     __typename
     ... on Node {

package/package.json

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

package/roadmap.md

@@ -15,14 +15,25 @@ The following overview contains the status of items on the GraphCommerce roadmap
 
 ## In progress
 
-- [ ] Redesigned layered navigation for mobile and desktop
-- [ ] GA4 datalayer implementation
-- [ ] Paypal Express payment service (Multisafepay, Braintree, Mollie already
-      implemented)
-- [ ] Adyen payment service
+- [ ] Algolia implementation
+- [ ] Dynamic Row based content
+- [ ] Product compare functionality
+- [ ] Edge runtime for GraphQL Mesh and Streaming SSR rendering
+- [ ] Global store messages
 
 ## Just released
 
+[See all releases](https://github.com/graphcommerce-org/graphcommerce/releases?q=prerelease%3Afalse+&expanded=true)
+
+- [x] Google Tagmanager 4 datalayer implementation
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/googleanalytics)
+- [x] Paypal Express payment service
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-payment-paypal)
+- [x] Adyen payment service
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/magento-payment-adyen)
+- [x] Postcode check integration
+      [docs ↗](https://github.com/graphcommerce-org/graphcommerce/tree/main/packages/address-fields-nl)
+- [x] Redesigned layered navigation for mobile and desktop
 - [x] Crosssells overlay after adding a product to cart
 - [x] Bundle product
       [example ↗](https://graphcommerce.vercel.app/nl/p/giftcard-bundle-gc-570)
@@ -40,15 +51,16 @@ The following overview contains the status of items on the GraphCommerce roadmap
 
 ## Planned
 
-- [ ] Store locator
-- [ ] Adyen payment service
-- [ ] Buckaroo payment service
-- [ ] Fetch Magento image sizes (probe-image-size)
-- [ ] Postcode check integration
-- [ ] Windows support
+- [ ] Redesigned cart
+- [ ] Product thumbnail carousel
+- [ ] React Server Components integration
 
 ## Future
 
+- [ ] Fetch Magento image sizes (probe-image-size)
+- [ ] Windows support
+- [ ] Store locator
+- [ ] Buckaroo payment service
 - [ ] `magento` example without Hygraph
 - [ ] PageBuilder support