@graphcommerce/next-config 8.1.0-canary.40 → 8.1.0-canary.42

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 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
 
 ### Minor Changes

package/__tests__/config/utils/__snapshots__/mergeEnvIntoConfig.ts.snap

@@ -62,6 +62,7 @@ exports[`traverses a schema and returns a list of env variables that match 1`] =
   "GC_PREVIEW_SECRET",
   "GC_PRODUCT_FILTERS_LAYOUT",
   "GC_PRODUCT_FILTERS_PRO",
+  "GC_PRODUCT_LIST_PAGINATION_VARIANT",
   "GC_PRODUCT_ROUTE",
   "GC_RECENTLY_VIEWED_PRODUCTS",
   "GC_RECENTLY_VIEWED_PRODUCTS_ENABLED",

package/__tests__/interceptors/findPlugins.ts

@@ -163,6 +163,14 @@ it('finds plugins', () => {
         "targetModule": "@graphcommerce/magento-product",
         "type": "component",
       },
+      {
+        "enabled": true,
+        "sourceExport": "previewModeDefaults",
+        "sourceModule": "@graphcommerce/graphcms-ui/plugins/hygraphPreviewModeDefaults",
+        "targetExport": "previewModeDefaults",
+        "targetModule": "@graphcommerce/ecommerce-ui",
+        "type": "function",
+      },
       {
         "enabled": true,
         "sourceExport": "plugin",
@@ -171,6 +179,14 @@ it('finds plugins', () => {
         "targetModule": "@graphcommerce/graphql",
         "type": "function",
       },
+      {
+        "enabled": true,
+        "sourceExport": "PreviewModeToolbar",
+        "sourceModule": "@graphcommerce/graphcms-ui/plugins/HygraphPreviewModeToolbar",
+        "targetExport": "PreviewModeToolbar",
+        "targetModule": "@graphcommerce/ecommerce-ui",
+        "type": "component",
+      },
       {
         "enabled": true,
         "sourceExport": "plugin",
@@ -397,6 +413,15 @@ it('finds plugins', () => {
         "targetModule": "@graphcommerce/magento-product",
         "type": "component",
       },
+      {
+        "enabled": false,
+        "ifConfig": "previewSecret",
+        "sourceExport": "FramerNextPages",
+        "sourceModule": "@graphcommerce/ecommerce-ui/plugins/PreviewModeFramerNextPages",
+        "targetExport": "FramerNextPages",
+        "targetModule": "@graphcommerce/framer-next-pages",
+        "type": "component",
+      },
       {
         "enabled": false,
         "ifConfig": "googleTagmanagerId",

package/__tests__/interceptors/generateInterceptors.ts

@@ -405,21 +405,31 @@ it('adds debug logging to interceptors for components', async () => {
   expectOriginal(interceptors['packages/graphql/config']?.template).toMatchInlineSnapshot(`
     "import { ApolloLink, TypePolicies } from '@apollo/client'
     import type { GraphCommerceStorefrontConfig } from '@graphcommerce/next-config'
+    import type { SetRequired } from 'type-fest'
     import { MigrateCache } from './components/GraphQLProvider/migrateCache'
+    export interface PreviewData {}
+    export type PreviewConfig = {
+      preview?: boolean
+      previewData?: PreviewData & Record<string, unknown>
+    }
     export type ApolloClientConfigInput = {
       storefront: GraphCommerceStorefrontConfig
       links?: ApolloLink[]
       policies?: TypePolicies[]
       migrations?: MigrateCache[]
-    }
-    export type ApolloClientConfig = Required<ApolloClientConfigInput>
+    } & PreviewConfig
+    export type ApolloClientConfig = SetRequired<
+      ApolloClientConfigInput,
+      'links' | 'policies' | 'migrations'
+    >
     export function graphqlConfigOriginal(config: ApolloClientConfigInput): ApolloClientConfig {
-      const { storefront, links = [], policies = [], migrations = [] } = config
+      const { storefront, links = [], policies = [], migrations = [], ...rest } = config
       return {
         storefront,
         links,
         policies,
         migrations,
+        ...rest,
       }
     }"
   `)

package/dist/config/demoConfig.js

@@ -36,6 +36,7 @@ exports.demoConfig = {
     ],
     productFiltersPro: true,
     productFiltersLayout: 'DEFAULT',
+    productListPaginationVariant: 'COMPACT',
     compareVariant: 'ICON',
     robotsAllow: false,
     demoMode: true,
@@ -47,4 +48,5 @@ exports.demoConfig = {
     recentlyViewedProducts: { enabled: true, maxCount: 20 },
     breadcrumbs: false,
     customerDeleteEnabled: true,
+    previewSecret: 'SECRET',
 };

package/dist/generated/config.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarGalleryConfigSchema = exports.RecentlyViewedProductsConfigSchema = exports.MagentoConfigurableVariantValuesSchema = exports.GraphCommerceStorefrontConfigSchema = exports.GraphCommerceDebugConfigSchema = exports.GraphCommerceConfigSchema = exports.DatalayerConfigSchema = exports.SidebarGalleryPaginationVariantSchema = exports.ProductFiltersLayoutSchema = exports.CompareVariantSchema = exports.definedNonNullAnySchema = exports.isDefinedNonNullAny = void 0;
+exports.SidebarGalleryConfigSchema = exports.RecentlyViewedProductsConfigSchema = exports.MagentoConfigurableVariantValuesSchema = exports.GraphCommerceStorefrontConfigSchema = exports.GraphCommerceDebugConfigSchema = exports.GraphCommerceConfigSchema = exports.DatalayerConfigSchema = exports.SidebarGalleryPaginationVariantSchema = exports.ProductFiltersLayoutSchema = exports.PaginationVariantSchema = exports.CompareVariantSchema = exports.definedNonNullAnySchema = exports.isDefinedNonNullAny = void 0;
 /* eslint-disable */
 const zod_1 = require("zod");
 const isDefinedNonNullAny = (v) => v !== undefined && v !== null;
 exports.isDefinedNonNullAny = isDefinedNonNullAny;
 exports.definedNonNullAnySchema = zod_1.z.any().refine((v) => (0, exports.isDefinedNonNullAny)(v));
 exports.CompareVariantSchema = zod_1.z.enum(['CHECKBOX', 'ICON']);
+exports.PaginationVariantSchema = zod_1.z.enum(['COMPACT', 'EXTENDED']);
 exports.ProductFiltersLayoutSchema = zod_1.z.enum(['DEFAULT', 'SIDEBAR']);
 exports.SidebarGalleryPaginationVariantSchema = zod_1.z.enum(['DOTS', 'THUMBNAILS_BOTTOM']);
 function DatalayerConfigSchema() {
@@ -46,6 +47,7 @@ function GraphCommerceConfigSchema() {
         previewSecret: zod_1.z.string().nullish(),
         productFiltersLayout: exports.ProductFiltersLayoutSchema.default("DEFAULT").nullish(),
         productFiltersPro: zod_1.z.boolean().nullish(),
+        productListPaginationVariant: exports.PaginationVariantSchema.default("COMPACT").nullish(),
         productRoute: zod_1.z.string().nullish(),
         recentlyViewedProducts: RecentlyViewedProductsConfigSchema().nullish(),
         robotsAllow: zod_1.z.boolean().nullish(),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-config",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.40",
+  "version": "8.1.0-canary.42",
   "type": "commonjs",
   "main": "dist/index.js",
   "types": "src/index.ts",

package/src/config/demoConfig.ts

@@ -38,6 +38,7 @@ export const demoConfig: PartialDeep<GraphCommerceConfig, { recurseIntoArrays: t
   ],
   productFiltersPro: true,
   productFiltersLayout: 'DEFAULT',
+  productListPaginationVariant: 'COMPACT',
   compareVariant: 'ICON',
   robotsAllow: false,
 
@@ -50,4 +51,5 @@ export const demoConfig: PartialDeep<GraphCommerceConfig, { recurseIntoArrays: t
   recentlyViewedProducts: { enabled: true, maxCount: 20 },
   breadcrumbs: false,
   customerDeleteEnabled: true,
+  previewSecret: 'SECRET',
 }

package/src/generated/config.ts

@@ -167,6 +167,7 @@ export type GraphCommerceConfig = {
   customerCompanyFieldsEnable?: InputMaybe<Scalars['Boolean']['input']>;
   /** Enable customer account deletion through the account section */
   customerDeleteEnabled?: InputMaybe<Scalars['Boolean']['input']>;
+  /** Datalayer config */
   dataLayer?: InputMaybe<DatalayerConfig>;
   /** Debug configuration for GraphCommerce */
   debug?: InputMaybe<GraphCommerceDebugConfig>;
@@ -293,6 +294,13 @@ export type GraphCommerceConfig = {
   productFiltersLayout?: InputMaybe<ProductFiltersLayout>;
   /** Product filters with better UI for mobile and desktop. */
   productFiltersPro?: InputMaybe<Scalars['Boolean']['input']>;
+  /**
+   * Pagination variant for the product listings.
+   *
+   * COMPACT means: "< Page X of Y >"
+   * EXTENDED means: "< 1 2 ... 4 [5] 6 ... 10 11 >"
+   */
+  productListPaginationVariant?: InputMaybe<PaginationVariant>;
   /**
    * By default we route products to /p/[url] but you can change this to /product/[url] if you wish.
    *
@@ -422,6 +430,10 @@ export type MagentoConfigurableVariantValues = {
   url?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
+export type PaginationVariant =
+  | 'COMPACT'
+  | 'EXTENDED';
+
 export type ProductFiltersLayout =
   | 'DEFAULT'
   | 'SIDEBAR';
@@ -458,6 +470,8 @@ export const definedNonNullAnySchema = z.any().refine((v) => isDefinedNonNullAny
 
 export const CompareVariantSchema = z.enum(['CHECKBOX', 'ICON']);
 
+export const PaginationVariantSchema = z.enum(['COMPACT', 'EXTENDED']);
+
 export const ProductFiltersLayoutSchema = z.enum(['DEFAULT', 'SIDEBAR']);
 
 export const SidebarGalleryPaginationVariantSchema = z.enum(['DOTS', 'THUMBNAILS_BOTTOM']);
@@ -499,6 +513,7 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     previewSecret: z.string().nullish(),
     productFiltersLayout: ProductFiltersLayoutSchema.default("DEFAULT").nullish(),
     productFiltersPro: z.boolean().nullish(),
+    productListPaginationVariant: PaginationVariantSchema.default("COMPACT").nullish(),
     productRoute: z.string().nullish(),
     recentlyViewedProducts: RecentlyViewedProductsConfigSchema().nullish(),
     robotsAllow: z.boolean().nullish(),