Storefront component enhancements - ProductGrid and ProductCard

[pbennett1-godaddy]

Summary

Overview

This PR significantly enhances the ProductCard and ProductGrid components with dynamic data loading, flexible filtering options, and improved developer experience.

Key Features

1. Dynamic ProductCard Loading

• Added optional productId prop to load product data dynamically
• Made product prop optional - component now accepts either product or productId
• Integrated React Query for efficient data fetching with caching
• Added loading skeleton state during data fetch
• Supports both prop-based and function-based href generation via getProductHref

API:
// Load by product data (existing)

  <ProductCard product={productData} />

// Load by product ID (new)

  <ProductCard productId="prod_123" getProductHref={(id) => `/products/${id}`} />

2. ProductGrid Filtering

• Added productIds prop to filter by specific product IDs
• Added categoryIds prop to filter by categories (internally maps to GraphQL's listId)
• Filters can be combined for more precise product selection
• All filters use plural-first API for consistency

API:
// Show specific products

  <ProductGrid productIds={["prod_1", "prod_2"]} />

// Show products from categories

  <ProductGrid categoryIds={["summer-collection", "sale"]} />

// Combine filters

  <ProductGrid productIds={["prod_1"]} categoryIds={["featured"]} />

3. Pagination Support

• Added enablePagination prop to ProductGrid
• Cursor-based pagination with page size selector (12/24/36/48 items)
• New Pagination UI component with accessible navigation
• Smart page number display with ellipsis
• Maintains pagination state across filter changes

4. GraphQL Query Enhancements

• Updated SkuGroupsQuery to support listId filtering
• Added totalCount field for pagination calculations
• Properly typed with SkuGroupsInput for type safety

Technical Improvements

• Backward compatible: Existing usage continues to work without changes
• Developer-friendly naming: Uses categoryIds (intuitive) instead of listIds (GraphQL internal)
• Localization ready: Added translations for pagination controls across all supported locales

Files Changed

• packages/react/src/components/storefront/product-card.tsx - Dynamic loading and flexible href handling
• packages/react/src/components/storefront/product-grid.tsx - Filtering and pagination
• packages/react/src/components/ui/pagination.tsx - New pagination component
• packages/react/src/lib/godaddy/catalog-storefront-queries.ts - Enhanced GraphQL query
• packages/localizations/src/*.ts - Added pagination translations for all locales

Migration Notes

No breaking changes. All existing usage patterns continue to work. New features are opt-in via additional props.

Changeset

• Changeset added (docs)

Test Plan

[changeset-bot]

🦋 Changeset detected

Latest commit: 0257a01

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@godaddy/localizations	Patch
@godaddy/react	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR