@graphcommerce/docs 8.1.0-canary.9 → 9.0.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+### Patch Changes
+
+- [#2242](https://github.com/graphcommerce-org/graphcommerce/pull/2242) [`a4cce76`](https://github.com/graphcommerce-org/graphcommerce/commit/a4cce76ca37af2bec604e953ada4bb11bd91f55d) - Add option to show an extended version of the pagination component. Configurable via the "productListPaginationVariant" key in your graphcommerce.config.js
+  COMPACT means: "< Page X of Y >"
+  EXTENDED means: "< 1 2 ... [5] ... 10 11 >" ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ### Patch Changes

package/framework/config.md

@@ -109,10 +109,20 @@ GraphQL Magento endpoint.
 Examples:
 - https://magento2.test/graphql
 
+#### magentoVersion: number (required)
+
+Version of the Magento backend.
+
+Values: 245, 246, 247 for Magento 2.4.5, 2.4.6, 2.4.7 respectively.
+
 #### storefront: [GraphCommerceStorefrontConfig](#GraphCommerceStorefrontConfig)[] (required)
 
 All storefront configuration for the project
 
+#### breadcrumbs: boolean = `false`
+
+Configuration for the SidebarGallery component
+
 #### cartDisplayPricesInclTax: boolean
 
 Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.
@@ -159,16 +169,24 @@ Determines if, after adding a cross-sell item to the cart, the user should be re
 
 Default: 'false'
 
-#### customerRequireEmailConfirmation: boolean
+#### customerAddressNoteEnable: boolean
+
+Enables the shipping notes field in the checkout
+
+#### customerCompanyFieldsEnable: boolean
 
-Due to a limitation in the GraphQL API of Magento 2, we need to know if the
-customer requires email confirmation.
+Enables company fields inside the checkout:
+- Company name
+- VAT ID
 
-This value should match Magento 2's configuration value for
-`customer/create_account/confirm` and should be removed once we can query
+#### customerDeleteEnabled: boolean
+
+Enable customer account deletion through the account section
 
 #### dataLayer: [DatalayerConfig](#DatalayerConfig)
 
+Datalayer config
+
 #### debug: [GraphCommerceDebugConfig](#GraphCommerceDebugConfig)
 
 Debug configuration for GraphCommerce
@@ -283,6 +301,13 @@ SIDEBAR: Will be rendered as a sidebar on desktop and horizontal chips on mobile
 
 Product filters with better UI for mobile and desktop.
 
+#### productListPaginationVariant: COMPACT | EXTENDED = `COMPACT`
+
+Pagination variant for the product listings.
+
+COMPACT means: "< Page X of Y >"
+EXTENDED means: "< 1 2 ... 4 [5] 6 ... 10 11 >"
+
 #### productRoute: string
 
 By default we route products to /p/[url] but you can change this to /product/[url] if you wish.
@@ -372,6 +397,12 @@ Examples:
 
 Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.
 
+#### customerCompanyFieldsEnable: boolean
+
+Enables company fields inside the checkout:
+- Company name
+- VAT ID
+
 #### defaultLocale: boolean
 
 There can only be one entry with defaultLocale set to true.

package/framework/icons.md

@@ -160,13 +160,11 @@ imported from there (the `<IconSvg>` component will convert the relative path to
 an absolute path)
 
 ```tsx
-...
+//...
 import customIcon from './my-custom-icon.svg'
 
-...
-return (
-  <IconSvg src={iconSucustomIconpport} size='large' />
-)
+//...
+return <IconSvg src={customIcon} size='large' />
 ```
 
 To use a custom icon in your component, follow the same steps as described in
@@ -177,27 +175,23 @@ the [previous paragraph](#using-a-different-icon-from-the-icon-pack).
 
 ## Using a different icon pack
 
-To override all or multiple icons with your own, add an icon override array to
-/theme.ts:
+To override all or multiple icons with your own, you can write a replace plugin
+to achieve this:
 
 ```tsx
-// /components/theme.ts
-import { iconCart, iconChat } from '@graphcommerce/next-ui'
+// /plugins/icons/Icons.ts
+import { PluginConfig } from '@graphcommerce/next-config'
+import iconBasket from './basket.svg'
 import customCartIcon from './my-custom-cart-icon.svg'
 import customChatIcon from './my-custom-chat-icon.svg'
 
-// ...
-const createOverrides = (theme: Theme): Components => ({
-  //... other component styling
+export const config: PluginConfig = {
+  type: 'replace',
+  module: '@graphcommerce/next-ui',
+}
 
-  IconSvg: {
-    overrides: [
-      [iconCart, customCartIcon],
-      [iconChat, customChatIcon],
-    ],
-  },
-})
-// ...
+export const iconShoppingBag = iconBasket
+export const iconChart = iconBasket
 ```
 
 All icons must meet the svg specifications as described above

package/framework/plugins-graphql.md

@@ -41,7 +41,7 @@ query ProductList(
 }
 
 # Fragment used for a ProductListItem used when rendering any listing
-fragment ProductListItem on ProductInterface @injectable {
+fragment ProductListItem on ProductInterface {
   uid
   ...ProductLink
   sku
@@ -59,8 +59,8 @@ fragment ProductListItem on ProductInterface @injectable {
 
 ## How to modify an existing query?
 
-Some Fragments inside GraphCommerce have been marked as `@injectable` which
-allows you to inject our own fields in the fragments.
+Fragments inside GraphCommerce allows you to inject our own fields in the
+fragments.
 
 ```graphql
 fragment MyCustomFragment on ProductInterface

package/framework/preview-mode.md

@@ -0,0 +1,31 @@
+# Preview mode
+
+GraphCommerce implements Next.js' preview mode which allows you to view the
+realtime data from Magento and Hygraph.
+
+You can select whether to view Hygraph content in the DRAFT of PUBLISHED stage
+(or other if configured).
+
+You can Revalidate / Regenerate a page to make sure it is always up to date when
+viewing.
+
+It bypasses all caches from Next.js, Magento and Hygraph (this means that
+Preview Mode is expdcted to be slower but does show your changes directly).
+
+## Accessing preview mode
+
+To enter preview mode press `ALT + Backtick` (\`) on your keyboard. This will
+open the preview mode toolbar on the bottom of the screen.
+
+![Toolbar requesting secret](https://github.com/graphcommerce-org/graphcommerce/assets/1244416/5064dbf0-e491-4d14-9c44-17754941d193)
+
+Fill in the secret and press the chevron button to enter preview mode.
+
+You are now greeted with the preview mode toolbar:
+
+![Scherm­afbeelding 2024-07-04 om 21 09 58](https://github.com/graphcommerce-org/graphcommerce/assets/1244416/f6a2224b-ad0a-429d-bd1b-ad924a3f81e5)
+
+## Enabling preview mode
+
+Configure the `previewSecret` in your `graphcommerce.config.js` file to enable
+preview mode.

package/framework/static-generation.md

@@ -43,8 +43,10 @@ data needed to render the layout (header, footer, menu etc.)
 
 export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
  ...
-
-  const layout = staticClient.query({ query: LayoutDocument, fetchPolicy: 'cache-first' })
+  const layout = staticClient.query({
+    query: LayoutDocument,
+    fetchPolicy: cacheFirst(staticClient),
+  })
 
   return {
     props: {

package/framework/theming.md

@@ -246,6 +246,12 @@ width, borderRadius and margin. Performance-wise, font-size and line-height
 should not be scaled with responsiveVal. To learn more, look into
 [responsive font sizes](../framework/typography.md).
 
+## Disabling darkmode or lightmode site wide
+
+Remove light={lightTheme} or dark={darkTheme} from the
+`<DarkLightModeThemeProvider />` in \_app.tsx to disable darkmode or lightmode
+site wide.
+
 ## Next steps
 
 - Learn about [icons](../framework/icons.md) in GraphCommerce

package/getting-started/pages.md

@@ -93,9 +93,9 @@ AboutUs.pageOptions = pageOptions
 
 export default AboutUs
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const layout = staticClient.query({
@@ -210,9 +210,9 @@ AboutUs.pageOptions = pageOptions
 
 export default AboutUs
 
-export const getStaticProps: GetPageStaticProps = async ({ locale }) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const page = hygraphPageContent(staticClient, 'about/about-us')
@@ -259,12 +259,10 @@ export const getStaticPaths: GetPageStaticPaths = (context) => ({
   fallback: 'blocking',
 })
 
-export const getStaticProps: GetPageStaticProps = async ({
-  locale,
-  params,
-}) => {
-  const client = graphqlSharedClient(locale)
-  const staticClient = graphqlSsrClient(locale)
+export const getStaticProps: GetPageStaticProps = async (context) => {
+  const { params } = context
+  const client = graphqlSharedClient(context)
+  const staticClient = graphqlSsrClient(context)
 
   const conf = client.query({ query: StoreConfigDocument })
   const page = hygraphPageContent(staticClient, `about/${params?.url}`)

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": true,
   "peerDependencies": {
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9"
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/roadmap.md

@@ -11,26 +11,16 @@ roadmap.
 
 [Upcoming in the next release](https://github.com/graphcommerce-org/graphcommerce/releases?q=prerelease%3Atrue&expanded=true)
 
-- [ ] Google Datalayer improvements to better handling gtag.js or GTM
 - [ ] Product page gallery improvements: Grid of images, animated thumbnails,
       Video support + disable zoom feature.
-- [ ] Web Vitals: Reduce Total Blocking Time, to improve INP metic.
-- [ ] Web Vitals: Defer rendering of elements further on the page, to improve
-      INP metic.
-- [ ] Magento Open Source GraphQL API Coverage with detailed GraphQL analysis
-      per version.
 - [ ] Create a generic CMS integration framework, removing the hard Hygraph
       requirement
 - [ ] Web Migration to next/image in favor of @graphcommerce/image
-- [ ] Improved category navigation: Navigate to sibling categories + Category
-      tree navigation in sidebar.
-- [ ] i18n configuration separation from URL structure.
 - [ ] Improved cache invalidation logic for category and product pages by using
       the Varnish PURGE functionality of Magento.
-- [ ] Customer specific pricing support for category and product pages.
 - [ ] Support for very large carts with 100+ items.
-- [ ] Plugin system redesign so typescript correctly identifies plugins and can
-      type check all the integrations.
+- [ ] Abstractions for integration with multiple catalog/search API's like
+      Algolia, Magento Live Search and various layered navigation modules.
 
 ## Considering / researching
 
@@ -44,13 +34,26 @@ roadmap.
 - [ ] Store locator
 - [ ] PageBuilder support
       [depends on ↗](https://github.com/magento/magento2/issues/37768)
-- [ ] Abstractions for integration with multiple catalog/search API's like
-      Algolia, Magento Live Search and various layered navigation modules.
 
 ## Released
 
 [See all releases](https://github.com/graphcommerce-org/graphcommerce/releases?q=prerelease%3Afalse+&expanded=true)
 
+- [x] Web Vitals: Reduce Total Blocking Time, to improve INP metic.
+- [x] Web Vitals: Defer rendering of elements further on the page, to improve
+      INP metic.
+- [x] Magento Open Source GraphQL API Coverage with detailed GraphQL analysis
+      per version.
+- [x] Plugin system redesign so typescript correctly identifies plugins and can
+      type check all the integrations.
+- [x] Google Datalayer improvements to better handling gtag.js or GTM
+- [x] Improved category navigation: Navigate to sibling categories + Category
+      tree navigation in sidebar.
+- [x] i18n configuration separation from URL structure.
+- [x] Customer specific pricing support for category and product pages.
+
+---
+
 - [x] Product page gallery improvements: Thumbnails
 - [x] Major improvements to Accessibility
       [issue ↗](https://github.com/graphcommerce-org/graphcommerce/issues/1995)