Add storefront component types and ProductTabs for multi-tenant product pages

[Copilot]

Implements type definitions for tenant-configurable storefront layouts and adds a reusable ProductTabs component for product detail pages. Existing components (StoreHeader, ProductCard, ImageGallery, AddToCartButton) already meet requirements.

New Files

Type System

• src/types/storefront-config.ts - Interfaces for tenant homepage configuration (hero, categories, featured products, newsletter, trust badges, theme, SEO)
• src/lib/storefront/get-default-config.ts - Generates sensible defaults from store name/description

Components

• src/app/store/[slug]/components/product-tabs.tsx - Client component with Description/Specifications/Reviews tabs
  • Accepts reviews and averageRating props for API integration
  • Calculates rating from reviews array if not provided
  • Falls back to mock data for development
  • Empty state handling

Changes

Updated

• src/app/store/[slug]/products/[productSlug]/page.tsx - Replaced inline tabs with ProductTabs component

Usage

<ProductTabs
  description={product.description}
  sku={product.sku}
  barcode={product.barcode}
  weight={product.weight}
  dimensions={{ length, width, height }}
  reviews={productReviews}  // Optional - uses mock data if omitted
  averageRating={4.5}       // Optional - auto-calculated from reviews
/>

Notes

• All components use shadcn/ui primitives (Tabs, Card, Dialog, NavigationMenu)
• Server/Client component separation maintained (product page is RSC, interactive parts are client)
• No external dependencies added

Original prompt

Summary

Add a set of reusable, shadcn/ui + Tailwind components and a product-detail template to the multi-tenant storefront. These components are theme-aware, optimized for Next.js App Router (RSC where possible), and follow the project's existing patterns (store layout, ProductGrid, product-card). This PR implements the following files and updates the storefront components folder under src/app/store/[slug]/ and src/components/storefront.

Goals

• Provide a production-ready ProductCard component with skeleton and multi-tenant theming.
• Provide a multi-tenant StoreHeader (client component) with navigation, search (Command palette), cart indicator, and responsive mobile sheet.
• Add a product detail page template using server components and shadcn/ui primitives that integrates ImageGallery, ProductTabs, and AddToCart hooks/components.
• Add supporting client components: ImageGallery and ProductTabs.
• Add storefront configuration types to src/types/storefront-config.ts.

Files to add (exact content provided in PR):

1. src/app/store/[slug]/components/product-card.tsx

• Reusable RSC-compatible ProductCard component
• Skeleton loader
• Includes image, title, price, badges, quick actions (wishlist, quick view, add-to-cart)
• Theme-aware via CSS variables and className props

2. src/components/storefront/store-header.tsx

• Client component with tenant branding, responsive navigation, command search palette, Sheet for mobile
• Uses shadcn/ui primitives: Sheet, DropdownMenu, Command, NavigationMenu
• Integrates cart state via existing zustand store (useCart)

3. src/app/store/[slug]/products/[productSlug]/page.tsx

• Server component product detail page template
• Fetches product and store using headers (x-store-id fallback to slug)
• Renders ImageGallery (client), ProductTabs (client), AddToCartButton (assumed existing or to be implemented) and RelatedProducts via Suspense
• Includes generateMetadata for SEO and revalidate property

4. src/app/store/[slug]/components/image-gallery.tsx (client)

• Image gallery with carousel thumbnails and zoom dialog
• Uses shadcn/ui Dialog + Carousel primitives

5. src/app/store/[slug]/components/product-tabs.tsx (client)

• Tabs for Description, Specifications, Reviews; review list with write call-to-action

6. src/types/storefront-config.ts

• Shared types for tenant-configurable homepage and theme defaults including getDefaultStorefrontConfig utility

Notes and Implementation Details

• All components follow shadcn/ui composition and Tailwind utility classes to align with the codebase.
• ProductCard is implemented as a Server Component (no client-side state) to be used in server-rendered lists; interactive child controls (Add to wishlist/cart) are rendered as links or buttons that can be hydrated as needed.
• StoreHeader is a client component ("use client") because it manages local UI state and keyboard shortcuts.
• Product detail page intentionally defers heavy interactive parts to client components (ImageGallery, ProductTabs, AddToCartButton) and uses Suspense for RelatedProducts to improve perceived performance.
• The PR adds the types file for consistent tenant configuration and provides a getDefaultStorefrontConfig helper to generate sensible defaults for stores without custom configuration.

Testing & Acceptance Criteria

• The ProductCard renders correctly in ProductGrid and supports the default/compact/featured variants.
• Header displays tenant logo/name from store prop and shows cart count from useCart.
• Product detail page fetches product by slug and store context (x-store-id header) and renders gallery, price, variants, CTAs, and tabs.
• No external UI libraries beyond shadcn/ui, Radix-derived primitives, lucide-react, and existing project utilities are introduced.

If any of the referenced helper components (AddToCartButton, VariantSelector, RelatedProducts) are missing in the repo they will be left as TODO imports (the PR scaffolds the page with placeholders and documented integration points). If you want, I can also add simple implementations for those in the same PR.

Notes for reviewers

• This change is additive and places new files under the store route and components area. No existing files are modified other than imports where necessary.
• Please check bundle size for client components (StoreHeader, ImageGallery, ProductTabs) — these are intentionally client-only.

-- End of problem statement --

This pull request was created as a result of the following prompt from Copilot chat.

Summary

Add a set of reusable, shadcn/ui + Tailwind components and a product-detail template to the multi-tenant storefront. These components are theme-aware, optimized for Next.js App Router (RSC where possible), and follow the project's existing patterns (store layout, ProductGrid, product-card). This PR implements the following files and updates the storefront components folder under src/app/store/[slug]/ and src/components/storefront.

Goals

• Provide a production-ready ProductCard component with skeleton and multi-tenant theming.
• Provide a multi-tenant StoreHeader (client component) with navigation, search (Command palette), cart indicator, and responsive mobile sheet.
• Add a product detail page template using server components and shadcn/ui primitives that integrates ImageGallery, ProductTabs, and AddToCart hooks/components.
• Add supporting client components: ImageGallery and ProductTabs.
• Add storefront configuration types to src/types/storefront-config.ts.

Files to add (exact content provided in PR):

1. src/app/store/[slug]/components/product-card.tsx

• Reusable RSC-compatible ProductCard component
• Skeleton loader
• Includes image, title, price, badges, quick actions (wishlist, quick view, add-to-cart)
• Theme-aware via CSS variables and className props

2. src/components/storefront/store-header.tsx

• Client component with tenant branding, responsive navigation, command search palette, Sheet for mobile
• Uses shadcn/ui primitives: Sheet, DropdownMenu, Command, NavigationMenu
• Integrates cart state via existing zustand store (useCart)

3. src/app/store/[slug]/products/[productSlug]/page.tsx

• Server component product detail page template
• Fetches product and store using headers (x-store-id fallback to slug)
• Renders ImageGallery (client), ProductTabs (client), AddToCartButton (assumed existing or to be implemented) and RelatedProducts via Suspense
• Includes generateMetadata for SEO and revalidate property

4. src/app/store/[slug]/components/image-gallery.tsx (client)

• Image gallery with carousel thumbnails and zoom dialog
• Uses shadcn/ui Dialog + Carousel primitives

5. src/app/store/[slug]/components/product-tabs.tsx (client)

• Tabs for Description, Specifications, Reviews; review list with write call-to-action

6. src/types/storefront-config.ts

• Shared types for tenant-configurable homepage and theme defaults including getDefaultStorefrontConfig utility

Notes and Implementation Details

• All components follow shadcn/ui composition and Tailwind utility classes to align with the codebase.
• ProductCard is implemented as a Server Component (no client-side state) to be used in server-rendered lists; interactive child controls (Add to wishlist/cart) are rendered as links or buttons that can be hydrated as needed.
• StoreHeader is a client component ("use client") because it manages local UI state and keyboard shortcuts.
• Product detail page intentionally defers heavy interactive parts to client components (ImageGallery, ProductTabs, AddToCartButton) and uses Suspense for RelatedProducts to improve perceived performance.
• The PR adds the types file for consistent tenant configuration and provides a getDefaultStorefrontConfig helper to generate sensible defaults for stores without custom configuration.

Testing & Acceptance Criteria

• The ProductCard renders correctly in ProductGrid and supports the default/compact/featured variants.
• Header displays tenant logo/name from store prop and shows cart count from useCart.
• Product detail page fetches product by slug and store context (x-store-id header) and renders gallery, price, variants, CTAs, and tabs.
• No external UI libraries beyond shadcn/ui, Radix-derived primitives, lucide-react, and existing project utilities are introduced.

If any of the referenced helper components (AddToCartButton, VariantSelector, RelatedProducts) are missing in the repo they will be left as TODO imports (the PR scaffolds the page with placeholders and documented integration points). If you want, I can also add simple implementations for those in the same PR.

Notes for reviewers

• This change is additive and places new files under the store route and components area. No existing files are modified other than imports where necessary.
• Please check bundle size for client components (StoreHeader, ImageGallery, ProductTabs) — these are intentionally client-only.

-- End of problem statement --

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stormcomui	Error			Dec 6, 2025 11:33pm