Flatten config

graphcommerce-org · Dec 2, 2024 · 7edd9e6 · 7edd9e6
1 parent de7e5f9
commit 7edd9e6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 74 deletions.
diff --git a/docs/framework/config.md b/docs/framework/config.md
@@ -288,9 +288,15 @@ GC_HYGRAPH_WRITE_ACCESS_TOKEN="AccessTokenFromHygraph"
 yarn graphcommerce hygraph-migrate
 ```
 
-#### layout: [GraphCommerceLayoutConfig](#GraphCommerceLayoutConfig)
+#### layoutMaxWidth: CONTAINED | CONTENT_ONLY | DEFAULT = `DEFAULT`
 
-Configures the layout settings.
+Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
+Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
+
+DEFAULT: Page is full width
+CONTENT_ONLY: Only content is contained
+CONTAINED: Page is contained
+Default: DEFAULT
 
 #### limitSsg: boolean
 
@@ -390,18 +396,6 @@ The package name of the Android app.
 
 The sha256 certificate fingerprint of the Android app.
 
-### GraphCommerceLayoutConfig
-
-#### maxWidth: CONTAINED | CONTENT_ONLY | DEFAULT = `DEFAULT`
-
-Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
-Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
-
-DEFAULT: Page is full width
-CONTENT_ONLY: Only content is contained
-CONTAINED: Page is contained
-Default: DEFAULT
-
 ### GraphCommercePermissions
 
 Permissions input

diff --git a/examples/magento-graphcms/components/theme.ts b/examples/magento-graphcms/components/theme.ts
@@ -180,10 +180,10 @@ const createThemeWithPalette = (palette: PaletteOptions) =>
       headerHeightMd: '100px',
       appBarHeightMd: '80px',
       appBarInnerHeightMd: '46px',
-      maxWidth: import.meta.graphCommerce.layout?.maxWidth === 'CONTAINED' ? 'lg' : false,
+      maxWidth: import.meta.graphCommerce.layoutMaxWidth === 'CONTAINED' ? 'lg' : false,
       maxWidthContent:
-        import.meta.graphCommerce.layout?.maxWidth === 'CONTENT_ONLY' ||
-        import.meta.graphCommerce.layout?.maxWidth === 'CONTAINED'
+        import.meta.graphCommerce.layoutMaxWidth === 'CONTENT_ONLY' ||
+        import.meta.graphCommerce.layoutMaxWidth === 'CONTAINED'
           ? 'lg'
           : false,
     },

diff --git a/packages/next-ui/Config.graphqls b/packages/next-ui/Config.graphqls
@@ -10,9 +10,15 @@ extend input GraphCommerceConfig {
   breadcrumbs: Boolean = false
 
   """
-  Configures the layout settings.
+  Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
+  Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
+
+  DEFAULT: Page is full width
+  CONTENT_ONLY: Only content is contained
+  CONTAINED: Page is contained
+  Default: DEFAULT
   """
-  layout: GraphCommerceLayoutConfig
+  layoutMaxWidth: LayoutMaxWidth = DEFAULT
 }
 
 """
@@ -33,21 +39,8 @@ input SidebarGalleryConfig {
   paginationVariant: SidebarGalleryPaginationVariant
 }
 
-enum MaxWidthOptions {
+enum LayoutMaxWidth {
   DEFAULT
   CONTENT_ONLY
   CONTAINED
 }
-
-input GraphCommerceLayoutConfig {
-  """
-  Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
-  Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
-
-  DEFAULT: Page is full width
-  CONTENT_ONLY: Only content is contained
-  CONTAINED: Page is contained
-  Default: DEFAULT
-  """
-  maxWidth: MaxWidthOptions = DEFAULT
-}
diff --git a/packagesDev/next-config/dist/generated/config.js b/packagesDev/next-config/dist/generated/config.js
@@ -30,21 +30,18 @@ _export(exports, {
     GraphCommerceGooglePlaystoreConfigSchema: function() {
         return GraphCommerceGooglePlaystoreConfigSchema;
     },
-    GraphCommerceLayoutConfigSchema: function() {
-        return GraphCommerceLayoutConfigSchema;
-    },
     GraphCommercePermissionsSchema: function() {
         return GraphCommercePermissionsSchema;
     },
     GraphCommerceStorefrontConfigSchema: function() {
         return GraphCommerceStorefrontConfigSchema;
     },
+    LayoutMaxWidthSchema: function() {
+        return LayoutMaxWidthSchema;
+    },
     MagentoConfigurableVariantValuesSchema: function() {
         return MagentoConfigurableVariantValuesSchema;
     },
-    MaxWidthOptionsSchema: function() {
-        return MaxWidthOptionsSchema;
-    },
     PaginationVariantSchema: function() {
         return PaginationVariantSchema;
     },
@@ -87,7 +84,7 @@ const CustomerAccountPermissionsSchema = _zod.z.enum([
     'DISABLE_REGISTRATION',
     'ENABLED'
 ]);
-const MaxWidthOptionsSchema = _zod.z.enum([
+const LayoutMaxWidthSchema = _zod.z.enum([
     'CONTAINED',
     'CONTENT_ONLY',
     'DEFAULT'
@@ -139,7 +136,7 @@ function GraphCommerceConfigSchema() {
         hygraphManagementApi: _zod.z.string().nullish(),
         hygraphProjectId: _zod.z.string().nullish(),
         hygraphWriteAccessToken: _zod.z.string().nullish(),
-        layout: GraphCommerceLayoutConfigSchema().nullish(),
+        layoutMaxWidth: LayoutMaxWidthSchema.default("DEFAULT").nullish(),
         limitSsg: _zod.z.boolean().nullish(),
         magentoEndpoint: _zod.z.string().min(1),
         magentoVersion: _zod.z.number(),
@@ -171,11 +168,6 @@ function GraphCommerceGooglePlaystoreConfigSchema() {
         sha256CertificateFingerprint: _zod.z.string().min(1)
     });
 }
-function GraphCommerceLayoutConfigSchema() {
-    return _zod.z.object({
-        maxWidth: MaxWidthOptionsSchema.default("DEFAULT").nullish()
-    });
-}
 function GraphCommercePermissionsSchema() {
     return _zod.z.object({
         cart: CartPermissionsSchema.nullish(),

diff --git a/packagesDev/next-config/src/generated/config.ts b/packagesDev/next-config/src/generated/config.ts
@@ -286,8 +286,16 @@ export type GraphCommerceConfig = {
    * ```
    */
   hygraphWriteAccessToken?: InputMaybe<Scalars['String']['input']>;
-  /** Configures the layout settings. */
-  layout?: InputMaybe<GraphCommerceLayoutConfig>;
+  /**
+   * Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
+   * Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
+   *
+   * DEFAULT: Page is full width
+   * CONTENT_ONLY: Only content is contained
+   * CONTAINED: Page is contained
+   * Default: DEFAULT
+   */
+  layoutMaxWidth?: InputMaybe<LayoutMaxWidth>;
   /**
    * Limit the static generation of SSG when building.
    *
@@ -381,19 +389,6 @@ export type GraphCommerceGooglePlaystoreConfig = {
   sha256CertificateFingerprint: Scalars['String']['input'];
 };
 
-export type GraphCommerceLayoutConfig = {
-  /**
-   * Sets the maximum width for the layout. You can set the max width breakpoint in the theme.ts file
-   * Tip: if you want to use pixels instead of breakpoints, change the width of the breakpoint.
-   *
-   * DEFAULT: Page is full width
-   * CONTENT_ONLY: Only content is contained
-   * CONTAINED: Page is contained
-   * Default: DEFAULT
-   */
-  maxWidth?: InputMaybe<MaxWidthOptions>;
-};
-
 /** Permissions input */
 export type GraphCommercePermissions = {
   /** Changes the availability of the add to cart buttons and the cart page to either customer only or completely disables it. */
@@ -473,6 +468,11 @@ export type GraphCommerceStorefrontConfig = {
   robotsAllow?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
+export type LayoutMaxWidth =
+  | 'CONTAINED'
+  | 'CONTENT_ONLY'
+  | 'DEFAULT';
+
 /** Options to configure which values will be replaced when a variant is selected on the product page. */
 export type MagentoConfigurableVariantValues = {
   /** Use the name, description, short description and meta data from the configured variant */
@@ -490,11 +490,6 @@ export type MagentoConfigurableVariantValues = {
   url?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
-export type MaxWidthOptions =
-  | 'CONTAINED'
-  | 'CONTENT_ONLY'
-  | 'DEFAULT';
-
 export type PaginationVariant =
   | 'COMPACT'
   | 'EXTENDED';
@@ -542,7 +537,7 @@ export const CompareVariantSchema = z.enum(['CHECKBOX', 'ICON']);
 
 export const CustomerAccountPermissionsSchema = z.enum(['DISABLED', 'DISABLE_REGISTRATION', 'ENABLED']);
 
-export const MaxWidthOptionsSchema = z.enum(['CONTAINED', 'CONTENT_ONLY', 'DEFAULT']);
+export const LayoutMaxWidthSchema = z.enum(['CONTAINED', 'CONTENT_ONLY', 'DEFAULT']);
 
 export const PaginationVariantSchema = z.enum(['COMPACT', 'EXTENDED']);
 
@@ -585,7 +580,7 @@ export function GraphCommerceConfigSchema(): z.ZodObject<Properties<GraphCommerc
     hygraphManagementApi: z.string().nullish(),
     hygraphProjectId: z.string().nullish(),
     hygraphWriteAccessToken: z.string().nullish(),
-    layout: GraphCommerceLayoutConfigSchema().nullish(),
+    layoutMaxWidth: LayoutMaxWidthSchema.default("DEFAULT").nullish(),
     limitSsg: z.boolean().nullish(),
     magentoEndpoint: z.string().min(1),
     magentoVersion: z.number(),
@@ -620,12 +615,6 @@ export function GraphCommerceGooglePlaystoreConfigSchema(): z.ZodObject<Properti
   })
 }
 
-export function GraphCommerceLayoutConfigSchema(): z.ZodObject<Properties<GraphCommerceLayoutConfig>> {
-  return z.object({
-    maxWidth: MaxWidthOptionsSchema.default("DEFAULT").nullish()
-  })
-}
-
 export function GraphCommercePermissionsSchema(): z.ZodObject<Properties<GraphCommercePermissions>> {
   return z.object({
     cart: CartPermissionsSchema.nullish(),