@cooperco/cooper-component-library 0.1.60 → 0.1.62

package/README.md

@@ -1,11 +1,113 @@
-# Vue 3 + Vite
+# Cooper Component Library
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+A Vue 3 component library built with TypeScript, Vite, and Tailwind CSS. Published as `@cooperco/cooper-component-library` and designed for integration with Contentful CMS via GraphQL.
+
+## Tech Stack
+
+- **Vue 3.5+** - Composition API with `<script setup>`
+- **TypeScript 5.3+** - Strict mode enabled
+- **Tailwind CSS 3.4+** - Utility-first styling
+- **Vite 5.2+** - Library build mode
+- **Storybook 8.2+** - Component documentation
+- **GraphQL** - Contentful CMS integration
+- **pnpm** - Package manager
 
 ## Recommended IDE Setup
 
 - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
 
-### TODO issues
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook dev server
+pnpm run dev
+
+# Run linter
+pnpm run lint
+
+# Fix linting issues
+pnpm run lint:fix
+
+# Type check
+pnpm run check-types
+```
+
+## Testing Locally
+
+To test the component library in a consuming project before publishing:
+
+```bash
+# 1. Build and pack the library
+pnpm run local-test
+```
+
+This creates a `.tgz` file in the root directory (e.g., `cooperco-cooper-component-library-0.1.61.tgz`)
+
+```bash
+# 2. In the consuming project, install the local package
+pnpm add /path/to/cooperco-cooper-component-library-0.1.61.tgz
+```
+
+This allows you to test changes locally before publishing to npm.
+
+## Building and Publishing
+
+The build and publish process needs to happen manually when changes are merged to `main`:
+
+### Workflow
+
+1. **Merge to main** - Merge your feature branch to `main`
+2. **Patch version** - Update version number using `npm version patch` (or `minor`/`major`)
+3. **Publish** - Run `npm publish` to publish to npm registry
+4. **Push** - Push changes and tags to GitHub
+
+### Build Process
+
+When you run `pnpm run build`, the following happens in order:
+
+1. **`build:types`** - Compiles Vue component TypeScript definitions
+2. **`build:cms`** - Compiles GraphQL queries for Contentful
+3. **`vite build`** - Builds the component library bundle
+
+All build artifacts are output to the `dist/` directory.
+
+### Package Exports
+
+The package exports multiple entry points:
+
+- **Components:** `@cooperco/cooper-component-library` - Main component library
+- **Styles:** `@cooperco/cooper-component-library/css/main.css` - Main styles
+- **Theme:** `@cooperco/cooper-component-library/css/theme.css` - Theme variables
+- **Queries:** `@cooperco/cooper-component-library/cms/contentful/graphql` - GraphQL queries
+
+## Project Structure
+
+```
+├── src/
+│   ├── components/          # Vue components
+│   │   ├── ComponentName/
+│   │   │   ├── ComponentName.vue
+│   │   │   └── ComponentName.ts
+│   │   ├── components.ts    # Component exports
+│   │   └── types.ts         # Type exports
+│   ├── config/              # Configuration (color palettes, passthroughs)
+│   └── utils/               # Utility functions
+├── cms/
+│   └── contentful/
+│       └── queries/         # GraphQL queries (see cms/contentful/queries/README.md)
+├── .storybook/              # Storybook configuration
+│   └── components/          # Component stories
+└── dist/                    # Build output (generated)
+```
+
+## Documentation
+
+- **Component Documentation:** Run `pnpm run dev` to view Storybook
+- **GraphQL Queries:** See [cms/contentful/queries/README.md](cms/contentful/queries/README.md)
+
+## TODO Issues
 
-- There are many places where `class` is not recognized by Typescript. Examples are "start"/"end" in ContainerModule. This is because we are not defining `class` on the component types. Defining them explicitly overrides the default Attribute Inheritance behavior of Vue. Need to find a way to get around this
+- There are many places where `class` is not recognized by TypeScript. Examples are "start"/"end" in ContainerModule. This is because we are not defining `class` on the component types. Defining them explicitly overrides the default Attribute Inheritance behavior of Vue. Need to find a way to get around this

package/dist/cms/0001-init.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+	up: async function (migration) {
+		const versionTrackingContentType = migration.createContentType(
+			'migrationVersionTracker',
+			{
+				name: 'Migration Version Tracker',
+				displayField: 'entryName',
+			}
+		)
+
+		versionTrackingContentType
+			.createField('entryName')
+			.name('Entry Name')
+			.type('Symbol')
+			.localized(false)
+			.required(true)
+			.validations([
+				{
+					unique: true,
+				},
+			])
+			.disabled(false)
+			.omitted(false)
+
+		versionTrackingContentType
+			.createField('version')
+			.name('Version')
+			.type('Integer')
+			.required(true)
+			.validations([])
+			.disabled(true)
+			.omitted(false)
+
+		versionTrackingContentType.changeFieldControl(
+			'version',
+			'builtin',
+			'numberEditor',
+			{}
+		)
+	},
+}

package/dist/cms/0002-create-image.cjs

@@ -0,0 +1,34 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const image = migration.createContentType('image', {
+			name: 'Image',
+			displayField: 'entryName',
+			description: 'Manage an image asset',
+		})
+
+		// Add required entryName field
+		addEntryNameField(image)
+
+		// Add required image asset field
+		image
+			.createField('media')
+			.name('Media')
+			.type('Link')
+			.linkType('Asset')
+			.required(true)
+			.validations([
+				{
+					linkMimetypeGroup: ['image'],
+				},
+			])
+
+		image.createField('altTag').name('Alt Tag').type('Symbol').required(false)
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('image')
+	},
+}

package/dist/cms/0003-create-video.cjs

@@ -0,0 +1,52 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const video = migration.createContentType('video', {
+			name: 'Video',
+			displayField: 'entryName',
+			description: 'Manage a video asset',
+		})
+
+		// Add required assetName field
+		addEntryNameField(video)
+
+		// Add required url field
+		video
+			.createField('url')
+			.name('Url')
+			.type('Symbol')
+			.required(true)
+			.validations([
+				{
+					regexp: {
+						pattern:
+							'^(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-/]))?$',
+						flags: null,
+					},
+				},
+			])
+
+		// add help text to 'url' field
+		video.changeFieldControl('url', 'builtin', 'urlEditor', {
+			helpText: 'The URL of the video',
+		})
+
+		video
+			.createField('thumbnail')
+			.name('Thumbnail')
+			.type('Link')
+			.linkType('Entry')
+			.validations([
+				{
+					linkContentType: ['image'],
+				},
+			])
+			.required(true)
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('video')
+	},
+}

package/dist/cms/0004-create-testimonial.cjs

@@ -0,0 +1,56 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const testimonialModule = migration.createContentType('testimonialModule', {
+			name: 'Testimonial Module',
+			displayField: 'entryName',
+			description: 'Testimonial module with text and media',
+		})
+
+		// Add mandatory assetName field
+		addEntryNameField(testimonialModule)
+
+		// Add headline field
+		testimonialModule
+			.createField('headline')
+			.name('Headline')
+			.type('Symbol')
+			.required(false)
+
+		testimonialModule
+			.createField('media')
+			.name('Media')
+			.type('Link')
+			.linkType('Entry')
+			.validations([
+				{
+					linkContentType: ['image', 'video'],
+				},
+			])
+			.required(false)
+
+		testimonialModule
+			.createField('quote')
+			.name('Quote')
+			.type('Symbol')
+			.required(true)
+
+		testimonialModule
+			.createField('author')
+			.name('Author')
+			.type('Symbol')
+			.required(false)
+
+		testimonialModule
+			.createField('details')
+			.name('Details')
+			.type('Text')
+			.required(false)
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('testimonialModule')
+	},
+}

package/dist/cms/0005-create-tile-label.cjs

@@ -0,0 +1,41 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const tileLabel = migration.createContentType('tileLabel', {
+			name: 'Tile Label',
+			displayField: 'entryName',
+			description: 'Label for tiles',
+		})
+
+		// Add mandatory assetName field
+		addEntryNameField(tileLabel)
+
+		// Add mandatory copy field
+		tileLabel.createField('copy').name('Copy').type('Symbol').required(false)
+
+		tileLabel
+			.createField('color')
+			.name('Color')
+			.type('Symbol')
+			.validations([
+				{
+					in: ['Primary', 'Secondary', 'Tertiary'],
+				},
+			])
+			.defaultValue({
+				'en-US': 'Primary',
+			})
+			.required(true)
+
+		tileLabel.changeFieldControl('color', 'builtin', 'dropdown', {
+			helpText:
+				'These colors are determined by the background color of the tile, based on the design system.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('tileLabel')
+	},
+}

package/dist/cms/0006-create-accordion-item.cjs

@@ -0,0 +1,83 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const accordionItem = migration.createContentType('accordionItem', {
+			name: 'Accordion Item',
+			displayField: 'entryName',
+			description: 'Items for an accordion module',
+		})
+
+		// Add required assetName field
+		addEntryNameField(accordionItem)
+
+		// Add required headline field
+		accordionItem
+			.createField('headline')
+			.name('Headline')
+			.type('Symbol')
+			.required(true)
+
+		// Add required body copy field
+		accordionItem
+			.createField('bodyCopy')
+			.name('Body Copy')
+			.type('RichText')
+			.required(true)
+			.validations([
+				{
+					enabledMarks: ['bold', 'italic', 'underline'],
+					message: 'Only bold, italic, and underline marks are allowed',
+				},
+				{
+					enabledNodeTypes: [
+						'ordered-list',
+						'unordered-list',
+						'hr',
+						'hyperlink',
+					],
+				},
+				{
+					nodes: {},
+				},
+			])
+
+		// Icon Reference
+		accordionItem
+			.createField('icon')
+			.name('Icon')
+			.type('Link')
+			.linkType('Entry')
+			.validations([
+				{
+					linkContentType: ['image'],
+				},
+			])
+			.required(false)
+
+		// Color
+		accordionItem
+			.createField('color')
+			.name('Color')
+			.type('Symbol')
+			.validations([
+				{
+					in: ['Primary', 'Secondary', 'Tertiary'],
+				},
+			])
+			.defaultValue({
+				'en-US': 'Primary',
+			})
+			.required(true)
+
+		accordionItem.changeFieldControl('color', 'builtin', 'dropdown', {
+			helpText:
+				'These colors are determined by the background color of the tile, based on the design system.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('accordionItem')
+	},
+}

package/dist/cms/0007-create-accordion.cjs

@@ -0,0 +1,45 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const accordion = migration.createContentType('accordion', {
+			name: 'Accordion',
+			displayField: 'entryName',
+		})
+
+		// Add required assetName field
+		addEntryNameField(accordion)
+
+		accordion
+			.createField('accordionItem')
+			.name('Accordion Item')
+			.type('Array')
+			.items({
+				type: 'Link',
+				validations: [
+					{
+						linkContentType: ['accordionItem'],
+					},
+				],
+				linkType: 'Entry',
+			})
+			.required(true)
+
+		accordion
+			.createField('accordionType')
+			.name('Accordion Type')
+			.type('Symbol')
+			.validations([
+				{
+					in: ['List', 'Tile'],
+				},
+			])
+
+		accordion.changeFieldControl('accordionType', 'builtin', 'dropdown')
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('accordion')
+	},
+}

package/dist/cms/0008-create-page-metadata.cjs

@@ -0,0 +1,69 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const pageMetadata = migration.createContentType('pageMetadata', {
+			name: 'Page Metadata',
+			displayField: 'entryName',
+			description: 'Page metadata to be used for SEO and social sharing',
+		})
+
+		// Add mandatory entryName field
+		addEntryNameField(pageMetadata)
+
+		// Add required title field
+		pageMetadata
+			.createField('title')
+			.name('Title')
+			.type('Symbol')
+			.required(true)
+
+		// Add required description field
+		pageMetadata
+			.createField('description')
+			.name('Description')
+			.type('Text')
+			.required(true)
+		pageMetadata.changeFieldControl('description', 'builtin', 'multipleLine')
+
+		// Keywords
+		pageMetadata.createField('keywords', {
+			name: 'Keywords',
+			type: 'Array',
+			items: {
+				type: 'Symbol',
+				validations: [],
+			},
+		})
+		pageMetadata.changeFieldControl('keywords', 'builtin', 'list')
+
+		// Add required social image field
+		pageMetadata
+			.createField('socialImage')
+			.name('Social Image')
+			.type('Link')
+			.linkType('Entry')
+			.required(true)
+			.validations([
+				{
+					linkContentType: ['image'],
+				},
+			])
+
+		// Add help text to socialImage field
+		pageMetadata.changeFieldControl(
+			'socialImage',
+			'builtin',
+			'entryLinkEditor',
+			{
+				helpText:
+					'This image is what will appear when the link to the page is shared on any social post.',
+			}
+		)
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('pageMetadata')
+	},
+}

package/dist/cms/0009-create-page.cjs

@@ -0,0 +1,57 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const page = migration.createContentType('page', {
+			name: 'Page',
+			displayField: 'entryName',
+		})
+
+		// Add required entryName field
+		addEntryNameField(page)
+
+		// Add required title field
+		page.createField('title').name('Title').type('Symbol').required(true)
+
+		// Slug
+		page.createField('slug', {
+			name: 'Slug',
+			type: 'Symbol',
+			required: true,
+			validations: [
+				{
+					regexp: {
+						pattern: '^\\/([\\w#!:.?+=&%@!\\-/])*$',
+						flags: null,
+					},
+					message:
+						'Slug must begin with a forward slash and use standard symbols. e.g a-z, 0-9, _#!:.?+=&%@!-/',
+				},
+			],
+		})
+
+		// Page Modules
+		page.createField('pageModules', {
+			name: 'Page Modules',
+			type: 'Array',
+			items: {
+				type: 'Link',
+				validations: [],
+				linkType: 'Entry',
+			},
+		})
+
+		// Metadata
+		page.createField('metadata', {
+			name: 'Metadata',
+			type: 'Link',
+			linkType: 'Entry',
+			validations: [{ linkContentType: ['pageMetadata'] }],
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('page')
+	},
+}

package/dist/cms/0010-create-link.cjs

@@ -0,0 +1,86 @@
+const addEntryNameField = require('../helpers/addEntryNameField.cjs')
+
+module.exports = {
+	// @ts-check
+	/** @type { import('contentful-migration').MigrationFunction } */
+	up: async function (migration) {
+		const link = migration.createContentType('link', {
+			name: 'Link',
+			description:
+				'General link type. Can point to an external url or internal page',
+			displayField: 'entryName',
+		})
+
+		// Add required assetName field
+		addEntryNameField(link)
+
+		// Page
+		link.createField('page', {
+			name: 'Page',
+			type: 'Link',
+			linkType: 'Entry',
+			validations: [{ linkContentType: ['page'] }],
+		})
+		link.changeFieldControl('page', 'builtin', 'entryLinkEditor', {
+			helpText:
+				"Use Page OR External URL. If both are set, Page will be used. If neither are set, the link won't work.",
+		})
+
+		// Anchor
+		link.createField('anchor', { name: 'Anchor', type: 'Symbol' })
+		link.changeFieldControl('anchor', 'builtin', 'singleLine', {
+			helpText: 'Set the anchor (#) for the url set by the Page reference.',
+		})
+
+		// External URL
+		link.createField('externalUrl', {
+			name: 'External URL',
+			type: 'Symbol',
+		})
+		link.changeFieldControl('externalUrl', 'builtin', 'urlEditor', {
+			helpText:
+				"Use Page OR External URL. If both are set, Page will be used. If neither are set, the link won't work.",
+		})
+
+		// Target
+		link.createField('target', {
+			name: 'Target',
+			type: 'Symbol',
+			required: true,
+			validations: [
+				{
+					in: ['Default', 'New Tab', 'Same Tab'],
+				},
+			],
+			defaultValue: {
+				'en-US': 'Default',
+			},
+		})
+
+		link.changeFieldControl('target', 'builtin', 'dropdown', {
+			helpText:
+				'Set target attribute to override default behavior. (i.e internal pages in same tab, external pages in new tab).',
+		})
+
+		// Aria Label
+		link.createField('ariaLabel', {
+			name: 'Aria Label',
+			type: 'Symbol',
+		})
+		link.changeFieldControl('ariaLabel', 'builtin', 'singleLine', {
+			helpText: 'Aria label.',
+		})
+
+		// Aria Description
+		link.createField('ariaDescription', {
+			name: 'Aria Description',
+			type: 'Symbol',
+		})
+		link.changeFieldControl('ariaDescription', 'builtin', 'singleLine', {
+			helpText: 'Aria description.',
+		})
+	},
+	down: async function (migration) {
+		await migration.deleteContentType('link')
+	},
+}