Added support for default values in the Config.graphqls files for the documentation

Related PR for the actual schema generation Code-Hex/graphql-codegen-typescript-validation-schema#398

Author: paales

.changeset/weak-carrots-check.md

@@ -0,0 +1,10 @@
+---
+'@graphcommerce/graphql-codegen-markdown-docs': patch
+'@graphcommerce/demo-magento-graphcommerce': patch
+'@graphcommerce/magento-compare': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/next-config': patch
+'@graphcommerce/docs': patch
+---
+
+Added support for default values in the Config.graphqls files for the documentation

docs/framework/config.md

@@ -115,7 +115,7 @@ When Magento's StoreConfig adds this value, this can be replaced.
 
 Use compare functionality
 
-#### `compareVariant: [CompareVariant](#CompareVariant)`
+#### `compareVariant: [CompareVariant](#CompareVariant) (default: ICON)`
 
 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
@@ -132,7 +132,7 @@ This value should match Magento 2's configuration value for
 
 Debug configuration for GraphCommerce
 
-#### `demoMode: Boolean`
+#### `demoMode: Boolean (default: true)`
 
 Enables some demo specific code that is probably not useful for a project:
 
@@ -214,7 +214,7 @@ Limit the static generation of SSG when building
 
 To enable next.js' preview mode, configure the secret you'd like to use.
 
-#### `productFiltersLayout: [ProductFiltersLayout](#ProductFiltersLayout)`
+#### `productFiltersLayout: [ProductFiltersLayout](#ProductFiltersLayout) (default: DEFAULT)`
 
 Layout how the filters are rendered.
 DEFAULT: Will be rendered as horzontal chips on desktop and mobile

packages/demo-magento-graphcommerce/Config.graphqls

@@ -6,5 +6,5 @@ extend input GraphCommerceConfig {
   - Adds "dominant_color" attribute swatches to the product list items.
   - Creates a big list items in the product list.
   """
-  demoMode: Boolean
+  demoMode: Boolean = true
 }

packages/magento-compare/Config.graphqls

@@ -13,5 +13,5 @@ extend input GraphCommerceConfig {
   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
   """
-  compareVariant: CompareVariant
+  compareVariant: CompareVariant = ICON
 }

packages/magento-product/Config.graphqls

@@ -24,7 +24,7 @@ extend input GraphCommerceConfig {
   DEFAULT: Will be rendered as horzontal chips on desktop and mobile
   SIDEBAR: Will be rendered as a sidebar on desktop and horizontal chips on mobile
   """
-  productFiltersLayout: ProductFiltersLayout
+  productFiltersLayout: ProductFiltersLayout = DEFAULT
 
   """
   By default we route products to /p/[url] but you can change this to /product/[url] if you wish.

packagesDev/graphql-codegen-markdown-docs/dist/index.js

@@ -25,12 +25,19 @@ const plugin = (schema, _documents, config) => {
             leave: (node) => possibleScalars.includes(node.name) ? node.name : `[${node.name}](#${node.name})`,
         },
         StringValue: { leave: (node) => node.value },
+        BooleanValue: { leave: (node) => node.value },
+        EnumValue: { leave: (node) => node.value },
+        IntValue: { leave: (node) => node.value },
+        FloatValue: { leave: (node) => node.value },
         ListType: { leave: (node) => `[${node.type}]` },
         NonNullType: {
             leave: (node) => `${node.type}!`,
         },
         InputValueDefinition: {
-            leave: (node) => `\`${node.name}: ${node.type}\`${descriptionText(node)}`,
+            leave: (node) => {
+                const defaultValue = node.defaultValue ? ` (default: ${node.defaultValue})` : '';
+                return `\`${node.name}: ${node.type}${defaultValue}\`${descriptionText(node)}`;
+            },
         },
         InputObjectTypeDefinition: {
             enter: (node) => ({

packagesDev/graphql-codegen-markdown-docs/src/index.ts

@@ -1,5 +1,8 @@
-import { PluginFunction, Types } from '@graphql-codegen/plugin-helpers'
-import { getCachedDocumentNodeFromSchema } from '@graphql-codegen/plugin-helpers'
+import {
+  PluginFunction,
+  Types,
+  getCachedDocumentNodeFromSchema,
+} from '@graphql-codegen/plugin-helpers'
 import { GraphQLSchema, visit } from 'graphql'
 import { MarkdownDocsPluginConfig } from './config'
 
@@ -35,12 +38,19 @@ export const plugin: PluginFunction<MarkdownDocsPluginConfig, Types.ComplexPlugi
         possibleScalars.includes(node.name) ? node.name : `[${node.name}](#${node.name})`,
     }, // String, Boolean, GraphCommerceDebugConfig, etc.
     StringValue: { leave: (node) => node.value },
+    BooleanValue: { leave: (node) => node.value },
+    EnumValue: { leave: (node) => node.value },
+    IntValue: { leave: (node) => node.value },
+    FloatValue: { leave: (node) => node.value },
     ListType: { leave: (node) => `[${node.type}]` },
     NonNullType: {
       leave: (node) => `${node.type}!`,
     },
     InputValueDefinition: {
-      leave: (node) => `\`${node.name}: ${node.type}\`${descriptionText(node)}`,
+      leave: (node) => {
+        const defaultValue = node.defaultValue ? ` (default: ${node.defaultValue})` : ''
+        return `\`${node.name}: ${node.type}${defaultValue}\`${descriptionText(node)}`
+      },
     },
     InputObjectTypeDefinition: {
       enter: (node) => ({

packagesDev/next-config/dist/config/demoConfig.js

@@ -19,6 +19,7 @@ exports.demoConfig = {
         { locale: 'en-ca', magentoStoreCode: 'en_CA' },
     ],
     productFiltersPro: true,
+    productFiltersLayout: 'DEFAULT',
     robotsAllow: false,
     demoMode: true,
     limitSsg: true,

packagesDev/next-config/src/config/demoConfig.ts

@@ -21,6 +21,7 @@ export const demoConfig: PartialDeep<GraphCommerceConfig, { recurseIntoArrays: t
     { locale: 'en-ca', magentoStoreCode: 'en_CA' },
   ],
   productFiltersPro: true,
+  productFiltersLayout: 'DEFAULT',
   robotsAllow: false,
   demoMode: true,
   limitSsg: true,