@cooperco/cooper-component-library 0.1.94 → 0.1.96

package/dist/cms/0082-add-body-copy-alignment-to-content-module.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+
+		contentModule.createField('bodyCopyAlignment', {
+			name: 'Body Copy Alignment',
+			type: 'Symbol',
+			validations: [
+				{
+					in: ['Left', 'Center', 'Right'],
+				},
+			],
+		})
+
+		contentModule.changeFieldControl(
+			'bodyCopyAlignment',
+			'builtin',
+			'dropdown',
+			{
+				helpText:
+					'Override the body copy text alignment independently from the general alignment. If not set, body copy will follow the general alignment.',
+			}
+		)
+
+		contentModule.moveField('bodyCopyAlignment').afterField('bodyCopy')
+	},
+
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	down: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+		contentModule.deleteField('bodyCopyAlignment')
+	},
+}

package/dist/cms/0083-create-placeholder-module.cjs

@@ -0,0 +1,44 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const placeholderModule = migration.createContentType('placeholderModule', {
+			name: 'Placeholder Module',
+			displayField: 'entryName',
+			description: 'Manage the placeholder module component',
+		})
+
+		// Add required entryName field
+		addEntryNameField(placeholderModule)
+
+		// Module Name dropdown field
+		placeholderModule
+			.createField('moduleName')
+			.name('Module Name')
+			.type('Symbol')
+			.required(false)
+			.validations([
+				{
+					in: ['Contact Us', 'Contact Us Form'],
+				},
+			])
+		placeholderModule.changeFieldControl('moduleName', 'builtin', 'dropdown', {
+			helpText: 'Select the placeholder module to render.',
+		})
+
+		// Custom Module Name field
+		placeholderModule
+			.createField('customModuleName')
+			.name('Custom Module Name')
+			.type('Symbol')
+			.required(false)
+		placeholderModule.changeFieldControl('customModuleName', 'builtin', 'singleLine', {
+			helpText: 'This will overwrite the dropdown selection if used. Confirm with the team before using this field.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('placeholderModule')
+	},
+}

package/dist/cms/README.md

@@ -1,42 +1,112 @@
-# Migrations
+# GraphQL Queries
 
-## Prerequisites
+This directory contains GraphQL queries for fetching content from Contentful CMS.
 
-- Run `pnpm install`
-- Obtain a Contentful CMA token
-- Confirm and double check what space and environment you should be running these in
-- Run `pnpm exec contentful-cli-migrations --environment-id <your-env-name> --space-id <space-id> --management-token <CMA-TOKEN> --initialise` on environment if not already and update `.env`
+## Directory Structure
 
+```
+cms/contentful/queries/
+├── index.ts                    # Barrel export file (manual updates required)
+├── fragments.ts                # Shared GraphQL fragments
+├── *.query.ts                  # Individual component queries
+└── README.md                   # This file
+```
 
-## Helpful Docs
+## How Queries Are Exported
 
-- [Contentful Migration](https://github.com/contentful/contentful-migration)
-- [Contentful Migration Reference Docs](https://github.com/contentful/contentful-migration/blob/main/README.md#reference-documentation)
-- [Contentful Data Model](https://www.contentful.com/developers/docs/concepts/data-model/)
+The query export system in this project is **semi-automatic**:
 
-### Instructions
+### The Process
 
-- Create your migration file in the scripts folder with the following format: `0002-description.cjs`
-- Write your migrations
-  - This should be with an up and a down function
-  - The up function updates the model
-  - The down function reversts your changes
-- Run your migration on a test environment with the following command: `pnpm exec contentful-cli-migrations --environment-id <your-env-name> --space-id <space-id> --management-token <CMA-TOKEN>`
-  - Optional Flags:
-    - `--rollback`: Rolls back one migration.
+1. **Individual Query Files** - Queries are defined in individual files with the pattern `*.query.ts`
+   - Example: `accordion.query.ts`, `carousel.query.ts`
 
-### Gotchas
+2. **Manual Barrel Export** - Queries are re-exported through `index.ts`
+   - Uses wildcard exports: `export * from './accordion.query.js'`
+   - **Note:** Exports use `.js` extensions even though source files are `.ts` (ESM compatibility)
 
-- Currently the rollback may change the version counter even if the migration doesnt run.
-  - for this just update the counter to the correct counter in contentful and rerun.
-- The migration may run and create a content type even if the whole migration doesnt run correctly.
-  - To fix you will need to delete the content type and re-run
+3. **Package-Level Export** - The barrel export is exposed via `package.json`:
+   ```json
+   "./cms/contentful/graphql": {
+     "import": "./dist/cms/contentful/queries/index.js",
+     "types": "./dist/cms/contentful/queries/index.d.ts"
+   }
+   ```
 
-### TODO
+## Creating a New Query
 
-- Fix rollback versioning
-  - This flag should cause a rollback to that specific version, in this case 0001 `--version 0001`
-  - It should be used with `--rollback`
-  - It should update dthe versionTracker entry on successful rollback
-- Run migration error handling
-  - runMigration is currently not working as expected and bumping the counter when the migration was aborted
+### Steps Required
+
+1. **Create Query File** - Add your query file: `yourComponent.query.ts`
+
+2. **Define Query** - Follow the established pattern:
+   ```typescript
+   import { gql } from 'graphql-tag'
+   import type { DocumentNode } from 'graphql'
+   import { someFragment } from './fragments.js' // If needed
+
+   export const getYourComponent: DocumentNode = gql`
+     ${someFragment}  // Include fragments if needed
+     query yourComponentQuery($id: String!, $preview: Boolean = false) {
+       yourComponent(id: $id, preview: $preview) {
+         __typename
+         # Add your fields here
+       }
+     }
+   `
+   ```
+
+3. **Update Barrel Export** - **MANUALLY ADD** export to `index.ts`:
+   ```typescript
+   export * from './yourComponent.query.js'
+   ```
+   - Maintain alphabetical order for consistency
+   - Use `.js` extension (not `.ts`)
+
+### Query Naming Conventions
+
+- **File Name:** `componentName.query.ts` (camelCase)
+- **Export Name:** `getComponentName` (camelCase with `get` prefix)
+- **Query Name:** `componentNameQuery` (camelCase with `Query` suffix)
+
+### Example
+
+```typescript
+// accordion.query.ts
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+import { accordionItemFragment } from './fragments.js'
+
+export const getAccordion: DocumentNode = gql`
+  ${accordionItemFragment}
+  query accordionQuery($id: String!, $preview: Boolean = false) {
+    accordion(id: $id, preview: $preview) {
+      __typename
+      headline
+      accordionType
+      loadMoreButtonTitle
+      startOpen
+      accordionItemCollection {
+        items {
+          ...accordionItemFragment
+        }
+      }
+    }
+  }
+`
+```
+
+## Using Queries in Consumer Projects
+
+Queries are consumed via the package export:
+
+```typescript
+import { getAccordion, getCarousel } from '@cooperco/cooper-component-library/cms/contentful/graphql'
+```
+
+## Important Notes
+
+- **Manual Export Required:** The system is NOT fully automatic - you MUST manually update `index.ts` when adding new queries
+- **ESM Extensions:** Always use `.js` extensions in exports (even for `.ts` source files)
+- **Preview Mode:** All queries support a `preview` parameter for Contentful preview API
+- **Fragments:** Shared fragments are defined in `fragments.ts` and can be reused across queries

package/dist/cms/contentModule.query.ts

@@ -64,6 +64,7 @@ export const getContentModule: DocumentNode = gql`
 			}
 			backgroundColor
 			alignment
+			bodyCopyAlignment
 			placeholderModule
 		}
 	}

package/dist/cms/contentful/migrations/scripts/0082-add-body-copy-alignment-to-content-module.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+
+		contentModule.createField('bodyCopyAlignment', {
+			name: 'Body Copy Alignment',
+			type: 'Symbol',
+			validations: [
+				{
+					in: ['Left', 'Center', 'Right'],
+				},
+			],
+		})
+
+		contentModule.changeFieldControl(
+			'bodyCopyAlignment',
+			'builtin',
+			'dropdown',
+			{
+				helpText:
+					'Override the body copy text alignment independently from the general alignment. If not set, body copy will follow the general alignment.',
+			}
+		)
+
+		contentModule.moveField('bodyCopyAlignment').afterField('bodyCopy')
+	},
+
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	down: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+		contentModule.deleteField('bodyCopyAlignment')
+	},
+}

package/dist/cms/contentful/migrations/scripts/0083-create-placeholder-module.cjs

@@ -0,0 +1,44 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const placeholderModule = migration.createContentType('placeholderModule', {
+			name: 'Placeholder Module',
+			displayField: 'entryName',
+			description: 'Manage the placeholder module component',
+		})
+
+		// Add required entryName field
+		addEntryNameField(placeholderModule)
+
+		// Module Name dropdown field
+		placeholderModule
+			.createField('moduleName')
+			.name('Module Name')
+			.type('Symbol')
+			.required(false)
+			.validations([
+				{
+					in: ['Contact Us', 'Contact Us Form'],
+				},
+			])
+		placeholderModule.changeFieldControl('moduleName', 'builtin', 'dropdown', {
+			helpText: 'Select the placeholder module to render.',
+		})
+
+		// Custom Module Name field
+		placeholderModule
+			.createField('customModuleName')
+			.name('Custom Module Name')
+			.type('Symbol')
+			.required(false)
+		placeholderModule.changeFieldControl('customModuleName', 'builtin', 'singleLine', {
+			helpText: 'This will overwrite the dropdown selection if used. Confirm with the team before using this field.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('placeholderModule')
+	},
+}

package/dist/cms/contentful/queries/contentModule.query.js

@@ -62,6 +62,7 @@ export const getContentModule = gql `
 			}
 			backgroundColor
 			alignment
+			bodyCopyAlignment
 			placeholderModule
 		}
 	}

package/dist/cms/contentful/queries/contentModule.query.ts

@@ -64,6 +64,7 @@ export const getContentModule: DocumentNode = gql`
 			}
 			backgroundColor
 			alignment
+			bodyCopyAlignment
 			placeholderModule
 		}
 	}

package/dist/cms/contentful/queries/helloBanner.query.d.ts

@@ -0,0 +1,3 @@
+import type { DocumentNode } from 'graphql';
+export declare const getHelloBanner: DocumentNode;
+export declare const helloBannerFragment: DocumentNode;

package/dist/cms/contentful/queries/helloBanner.query.js

@@ -0,0 +1,30 @@
+import { gql } from 'graphql-tag';
+import { ctaFragment } from './fragments.js';
+export const getHelloBanner = gql `
+	${ctaFragment}
+	query helloBannerQuery($id: String!, $preview: Boolean = false) {
+		helloBanner(id: $id, preview: $preview) {
+			__typename
+			entryName
+			active
+			fullCopy
+			mobileCollapsed
+			cta {
+				...ctaFragment
+			}
+		}
+	}
+`;
+export const helloBannerFragment = gql `
+	${ctaFragment}
+	fragment helloBannerFragment on HelloBanner {
+		__typename
+		entryName
+		active
+		fullCopy
+		mobileCollapsed
+		cta {
+			...ctaFragment
+		}
+	}
+`;

package/dist/cms/contentful/queries/helloBanner.query.ts

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+import { ctaFragment } from './fragments.js'
+
+export const getHelloBanner: DocumentNode = gql`
+	${ctaFragment}
+	query helloBannerQuery($id: String!, $preview: Boolean = false) {
+		helloBanner(id: $id, preview: $preview) {
+			__typename
+			entryName
+			active
+			fullCopy
+			mobileCollapsed
+			cta {
+				...ctaFragment
+			}
+		}
+	}
+`
+
+export const helloBannerFragment = gql`
+	${ctaFragment}
+	fragment helloBannerFragment on HelloBanner {
+		__typename
+		entryName
+		active
+		fullCopy
+		mobileCollapsed
+		cta {
+			...ctaFragment
+		}
+	}
+`

package/dist/cms/contentful/queries/index.d.ts

@@ -17,3 +17,5 @@ export * from './testimonial.query.js';
 export * from './tileCollection.query.js';
 export * from './video.query.js';
 export * from './chartModule.query.js';
+export * from './helloBanner.query.js';
+export * from './placeholderModule.query.js';

package/dist/cms/contentful/queries/index.js

@@ -17,3 +17,5 @@ export * from './testimonial.query.js';
 export * from './tileCollection.query.js';
 export * from './video.query.js';
 export * from './chartModule.query.js';
+export * from './helloBanner.query.js';
+export * from './placeholderModule.query.js';

package/dist/cms/contentful/queries/index.ts

@@ -17,3 +17,5 @@ export * from './testimonial.query.js'
 export * from './tileCollection.query.js'
 export * from './video.query.js'
 export * from './chartModule.query.js'
+export * from './helloBanner.query.js'
+export * from './placeholderModule.query.js'

package/dist/cms/contentful/queries/placeholderModule.query.d.ts

@@ -0,0 +1,3 @@
+import type { DocumentNode } from 'graphql';
+export declare const getPlaceholderModule: DocumentNode;
+export declare const placeholderModuleFragment: DocumentNode;

package/dist/cms/contentful/queries/placeholderModule.query.js

@@ -0,0 +1,19 @@
+import { gql } from 'graphql-tag';
+export const getPlaceholderModule = gql `
+	query placeholderModuleQuery($id: String!, $preview: Boolean = false) {
+		placeholderModule(id: $id, preview: $preview) {
+			__typename
+			entryName
+			moduleName
+			customModuleName
+		}
+	}
+`;
+export const placeholderModuleFragment = gql `
+	fragment placeholderModuleFragment on PlaceholderModule {
+		__typename
+		entryName
+		moduleName
+		customModuleName
+	}
+`;

package/dist/cms/contentful/queries/placeholderModule.query.ts

@@ -0,0 +1,22 @@
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+
+export const getPlaceholderModule: DocumentNode = gql`
+	query placeholderModuleQuery($id: String!, $preview: Boolean = false) {
+		placeholderModule(id: $id, preview: $preview) {
+			__typename
+			entryName
+			moduleName
+			customModuleName
+		}
+	}
+`
+
+export const placeholderModuleFragment = gql`
+	fragment placeholderModuleFragment on PlaceholderModule {
+		__typename
+		entryName
+		moduleName
+		customModuleName
+	}
+`

package/dist/cms/helloBanner.query.ts

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+import { ctaFragment } from './fragments.js'
+
+export const getHelloBanner: DocumentNode = gql`
+	${ctaFragment}
+	query helloBannerQuery($id: String!, $preview: Boolean = false) {
+		helloBanner(id: $id, preview: $preview) {
+			__typename
+			entryName
+			active
+			fullCopy
+			mobileCollapsed
+			cta {
+				...ctaFragment
+			}
+		}
+	}
+`
+
+export const helloBannerFragment = gql`
+	${ctaFragment}
+	fragment helloBannerFragment on HelloBanner {
+		__typename
+		entryName
+		active
+		fullCopy
+		mobileCollapsed
+		cta {
+			...ctaFragment
+		}
+	}
+`

package/dist/cms/index.ts

@@ -17,3 +17,5 @@ export * from './testimonial.query.js'
 export * from './tileCollection.query.js'
 export * from './video.query.js'
 export * from './chartModule.query.js'
+export * from './helloBanner.query.js'
+export * from './placeholderModule.query.js'

package/dist/cms/migrations/scripts/0082-add-body-copy-alignment-to-content-module.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+
+		contentModule.createField('bodyCopyAlignment', {
+			name: 'Body Copy Alignment',
+			type: 'Symbol',
+			validations: [
+				{
+					in: ['Left', 'Center', 'Right'],
+				},
+			],
+		})
+
+		contentModule.changeFieldControl(
+			'bodyCopyAlignment',
+			'builtin',
+			'dropdown',
+			{
+				helpText:
+					'Override the body copy text alignment independently from the general alignment. If not set, body copy will follow the general alignment.',
+			}
+		)
+
+		contentModule.moveField('bodyCopyAlignment').afterField('bodyCopy')
+	},
+
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	down: function (migration) {
+		const contentModule = migration.editContentType('contentModule')
+		contentModule.deleteField('bodyCopyAlignment')
+	},
+}

package/dist/cms/migrations/scripts/0083-create-placeholder-module.cjs

@@ -0,0 +1,44 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const placeholderModule = migration.createContentType('placeholderModule', {
+			name: 'Placeholder Module',
+			displayField: 'entryName',
+			description: 'Manage the placeholder module component',
+		})
+
+		// Add required entryName field
+		addEntryNameField(placeholderModule)
+
+		// Module Name dropdown field
+		placeholderModule
+			.createField('moduleName')
+			.name('Module Name')
+			.type('Symbol')
+			.required(false)
+			.validations([
+				{
+					in: ['Contact Us', 'Contact Us Form'],
+				},
+			])
+		placeholderModule.changeFieldControl('moduleName', 'builtin', 'dropdown', {
+			helpText: 'Select the placeholder module to render.',
+		})
+
+		// Custom Module Name field
+		placeholderModule
+			.createField('customModuleName')
+			.name('Custom Module Name')
+			.type('Symbol')
+			.required(false)
+		placeholderModule.changeFieldControl('customModuleName', 'builtin', 'singleLine', {
+			helpText: 'This will overwrite the dropdown selection if used. Confirm with the team before using this field.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('placeholderModule')
+	},
+}

package/dist/cms/placeholderModule.query.ts

@@ -0,0 +1,22 @@
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+
+export const getPlaceholderModule: DocumentNode = gql`
+	query placeholderModuleQuery($id: String!, $preview: Boolean = false) {
+		placeholderModule(id: $id, preview: $preview) {
+			__typename
+			entryName
+			moduleName
+			customModuleName
+		}
+	}
+`
+
+export const placeholderModuleFragment = gql`
+	fragment placeholderModuleFragment on PlaceholderModule {
+		__typename
+		entryName
+		moduleName
+		customModuleName
+	}
+`

package/dist/cms/queries/contentModule.query.ts

@@ -64,6 +64,7 @@ export const getContentModule: DocumentNode = gql`
 			}
 			backgroundColor
 			alignment
+			bodyCopyAlignment
 			placeholderModule
 		}
 	}

package/dist/cms/queries/helloBanner.query.ts

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-tag'
+import type { DocumentNode } from 'graphql'
+import { ctaFragment } from './fragments.js'
+
+export const getHelloBanner: DocumentNode = gql`
+	${ctaFragment}
+	query helloBannerQuery($id: String!, $preview: Boolean = false) {
+		helloBanner(id: $id, preview: $preview) {
+			__typename
+			entryName
+			active
+			fullCopy
+			mobileCollapsed
+			cta {
+				...ctaFragment
+			}
+		}
+	}
+`
+
+export const helloBannerFragment = gql`
+	${ctaFragment}
+	fragment helloBannerFragment on HelloBanner {
+		__typename
+		entryName
+		active
+		fullCopy
+		mobileCollapsed
+		cta {
+			...ctaFragment
+		}
+	}
+`

package/dist/cms/queries/index.ts

@@ -17,3 +17,5 @@ export * from './testimonial.query.js'
 export * from './tileCollection.query.js'
 export * from './video.query.js'
 export * from './chartModule.query.js'
+export * from './helloBanner.query.js'
+export * from './placeholderModule.query.js'