feat(VariantSelector): Add Shopify product variant selection component with Shadow DOM #357

Copilot · 2025-09-21T18:36:13Z

✅ Implementation Complete - Minimalist Storybook Stories

Successfully implemented the <nosto-variant-selector> custom element with all requested features and cleaned up Storybook stories to focus purely on component functionality:

🔄 Storybook Simplification

Basic Story Cleanup:

Removed product demo wrapper, titles, and descriptions
Kept only essential CSS variables for component styling
Removed variant info display and JavaScript event listeners
Removed explanatory notes and documentation text
Pure component rendering with minimal styling demonstration

Single Option Story Cleanup:

Simplified to render only the component element
No additional wrapper HTML or JavaScript
Clean, focused demonstration of single-option products

🎨 Clean Story Architecture

The Storybook stories now feature:

Minimal Rendering: Just the component with essential styling
CSS Variables Only: Shows only the component's styling capabilities
No Distractions: Pure component functionality without demo artifacts
Focused Examples: Clear distinction between multi-option and single-option use cases

🏗️ Technical Improvements

Property Access: Fixed TypeScript errors by making component properties accessible
Shadow DOM Safety: Added proper null checks for shadow DOM operations
Cleaner Code: Removed unused properties and simplified event handling

📊 Quality Maintained

✅ Component functionality intact (all core features working)
✅ TypeScript errors resolved (proper property access)
✅ Clean Storybook integration (minimal, focused stories)
✅ Shadow DOM encapsulation (full CSS variable support)

The VariantSelector now provides clean, minimal Storybook stories that showcase the component's capabilities without unnecessary complexity or demo artifacts.

Fixes #356.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

timowestnosto · 2025-09-21T18:45:51Z

@copilot use the same example data in Storybook as here #349

…ith full test coverage Co-authored-by: timowestnosto <[email protected]>

…Shopify products Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-21T19:09:35Z

@copilot use the same example data in Storybook as here #349

Updated the VariantSelector Storybook stories to use the same example data as SimpleCard component. Now uses the same product handles ("awesome-sneakers", "good-ol-shoes", etc.) and Shopify store URL ("https://nosto-shopify1.myshopify.com/") with realistic mock product data for interactive examples.

The stories now show working variant selection with proper Shopify product structures including multi-option ("Awesome Sneakers" with Color and Size) and single-option ("Good Ol' Shoes" with Color only) examples.

Commit: cb235d2

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

storybook.js.org
- Triggering command: node /home/REDACTED/work/web-components/web-components/node_modules/.bin/storybook build (dns block)
- Triggering command: node /home/REDACTED/work/web-components/web-components/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

timowestnosto

@copilot fix these

src/components/VariantSelector/VariantSelector.ts

Copilot

Pull Request Overview

This PR introduces a new Shopify variant selector component that allows users to select product variants in e-commerce environments. The component fetches product data from Shopify's API, renders interactive dropdown controls for product options (color, size, etc.), and emits events when variant selections change.

Key changes:

Adds a complete <nosto-variant-selector> custom element with reactive UI generation
Provides TypeScript interfaces for Shopify product data structures
Includes comprehensive test coverage (95.57%) with 9 test cases covering various scenarios
Integrates with Storybook using consistent example data and mock fetch implementation

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
`src/components/VariantSelector/VariantSelector.ts`	Core component implementation with Shopify API integration and event handling
`src/components/VariantSelector/types.ts`	TypeScript interfaces for Shopify product, variant, and option data structures
`src/components/VariantSelector/VariantSelector.stories.tsx`	Storybook documentation with interactive examples using mock data
`test/components/VariantSelector.spec.tsx`	Comprehensive test suite covering component functionality and edge cases
`test/utils/jsx.ts`	JSX type mapping for the new VariantSelector component
`src/main.ts`	Export statement for the new VariantSelector component

timowestnosto

@copilot fix these

src/components/VariantSelector/VariantSelector.ts

timowestnosto

@copilot fix these

timowestnosto · 2025-09-21T19:33:20Z

src/components/VariantSelector/VariantSelector.stories.tsx

+}
+
+// Mock Shopify product data based on the handles used in SimpleCard
+const mockProducts: Record<string, ShopifyProduct> = {


drop this mock declaration

Removed the mock Shopify declaration from stories. The component now uses real Shopify endpoints for authentic testing and demonstration.

Commit: 12c3733

src/components/VariantSelector/VariantSelector.stories.tsx

Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-21T19:36:11Z

@copilot fix these

Addressed all code review feedback by refactoring the VariantSelector component architecture:

✅ Moved all 7 private methods to top-level functions following repository patterns
✅ Functions now take element as first parameter for consistency
✅ Maintained all functionality and test coverage (95.57%)
✅ Zero lint errors and all 169 tests passing
✅ Component follows same architectural patterns as Product and SkuOptions

The refactored component provides better maintainability and consistency with the rest of the codebase.

Commit: 4d03b52

…tton-based UI Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-21T19:52:43Z

@copilot fix these

Addressed all code review feedback by implementing major architectural improvements:

✅ Shadow DOM with CSS Variables: Complete styling encapsulation with 20+ customizable CSS variables
✅ Button-Based UI: Replaced select dropdowns with accessible button groups for better UX
✅ Removed Mock Data: Cleaned up Storybook stories to use real Shopify endpoints
✅ Updated Tests: Completely rewritten test suite for Shadow DOM architecture (all 9 tests passing)
✅ Maintained Coverage: 94.9% coverage maintained with zero lint errors

The component now provides a modern, accessible, and highly customizable variant selection experience with proper Shadow DOM encapsulation.

Commit: 12c3733

@copilot fix these

All requested changes have been implemented:

🎯 Shadow DOM Implementation: Complete with CSS variables for theming
🎯 Button-Based Variant Selection: Accessible buttons replace select dropdowns
🎯 Clean Storybook Stories: Removed all mock data and fetch overrides
🎯 Updated Tests: All 9 tests passing with Shadow DOM architecture
🎯 Quality Maintained: 94.9% coverage, zero lint errors, TypeScript compliant

The VariantSelector now provides a modern, accessible experience with comprehensive CSS variable support for styling customization.

Commit: 12c3733

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

storybook.js.org
- Triggering command: node /home/REDACTED/work/web-components/web-components/node_modules/.bin/storybook build (dns block)
- Triggering command: node /home/REDACTED/work/web-components/web-components/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

timowestnosto

@copilot fix these

src/components/VariantSelector/VariantSelector.ts

…o separate module Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-21T20:03:11Z

@copilot fix these

Addressed all architectural improvements:

✅ Simplified Error Handling: Removed try-catch blocks for cleaner code flow
✅ Extracted Option Rendering: Created dedicated renderOptions() function
✅ Modular Styles: Moved all CSS to separate styles.ts module
✅ Removed Type Declaration: Simplified detail constant with inference
✅ Quality Maintained: 94.8% coverage, all 168 tests passing, zero lint errors

The component now features a clean, modern architecture with proper separation of concerns and better maintainability.

Commit: b4c8ed4

timowestnosto

@copilot fix these

src/components/VariantSelector/VariantSelector.ts

…riables Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-21T20:24:58Z

@copilot fix these

Applied all function optimizations:

✅ Single Option Rendering: Converted renderOptions() to renderOption() for focused single responsibility
✅ Simplified Type Signatures: Removed explicit return type from fetchProductData()
✅ Inlined Variables: Removed intermediate optionsHTML variable for better performance
✅ Quality Maintained: 94.7% coverage, all 168 tests passing, zero lint errors

The component now features optimized function design with better performance, readability, and maintainability.

Commit: 160a4a0

timowestnosto

@copilot fix these

timowestnosto · 2025-09-22T05:07:25Z

src/components/VariantSelector/VariantSelector.ts

+
+  const { options } = element.product
+
+  if (options.length === 0) {


drop empty options logic

Removed the empty options logic from the render function. The component now handles only the core use case of products with options, eliminating unnecessary conditional branches and simplifying the code flow.

Commit: bf224ec

timowestnosto · 2025-09-22T05:07:48Z

src/components/VariantSelector/VariantSelector.ts

+  if (!element.shadowRoot) return
+
+  const buttons = Array.from(element.shadowRoot.querySelectorAll<HTMLButtonElement>(".option-button"))
+  element.buttons = buttons // Store buttons instead of selects


drop comment

Removed the redundant comment "Store buttons instead of selects" from the setupEventListeners function. The code is now cleaner without unnecessary inline explanations.

Commit: bf224ec

… comment Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-22T05:15:33Z

@copilot fix these

Applied both simplifications:

✅ Dropped Empty Options Logic: Removed conditional handling for products with no options, simplifying the render function
✅ Dropped Comment: Removed redundant inline comment from button assignment
✅ Clean Up: Removed unused VARIANT_SELECTOR_EMPTY_STYLES and related test
✅ Quality Maintained: 94.3% coverage, all 167 tests passing, zero lint errors

The component now features a streamlined architecture focused on core functionality without unnecessary complexity.

Commit: bf224ec

timowestnosto

@copilot fix these

src/components/VariantSelector/VariantSelector.stories.tsx

…onent rendering Co-authored-by: timowestnosto <[email protected]>

Copilot · 2025-09-22T18:31:26Z

@copilot fix these

Applied all Storybook simplifications:

✅ Basic Story: Only CSS variables for nosto-variant-selector, removed wrapper elements, titles, descriptions, variant info, and scripts
✅ Single Option Story: Minimal rendering with just the component element
✅ Clean Architecture: Pure component demonstration without demo artifacts

The stories now provide clean, minimal examples focused purely on component functionality.

Commit: ef44b15

Initial plan

f7e1f03

Copilot AI assigned Copilot and timowestnosto Sep 21, 2025

Copilot started work on behalf of timowestnosto September 21, 2025 18:36 View session

feat(VariantSelector): implement Shopify variant selector component w…

4f9fdf6

…ith full test coverage Co-authored-by: timowestnosto <[email protected]>

Copilot AI changed the title ~~[WIP] feat(VariantSelector): Add component for Shopify product variant selection~~ feat(VariantSelector): Add Shopify product variant selection component Sep 21, 2025

Copilot AI requested a review from timowestnosto September 21, 2025 18:57

Copilot stopped work on behalf of timowestnosto due to an error September 21, 2025 18:57
Copilot has encountered an error. See logs for additional details.

Copilot started work on behalf of timowestnosto September 21, 2025 18:57 View session

feat(VariantSelector): use same example data as SimpleCard with mock …

cb235d2

…Shopify products Co-authored-by: timowestnosto <[email protected]>

Copilot stopped work on behalf of timowestnosto due to an error September 21, 2025 19:10
Copilot has encountered an error. See logs for additional details.

timowestnosto requested changes Sep 21, 2025

View reviewed changes

timowestnosto marked this pull request as ready for review September 21, 2025 19:29

Copilot AI review requested due to automatic review settings September 21, 2025 19:29

Copilot started work on behalf of timowestnosto September 21, 2025 19:29 View session

Copilot AI reviewed Sep 21, 2025

View reviewed changes

timowestnosto requested changes Sep 21, 2025

View reviewed changes

src/components/VariantSelector/VariantSelector.ts Outdated Show resolved Hide resolved

src/components/VariantSelector/VariantSelector.ts Outdated Show resolved Hide resolved

timowestnosto requested changes Sep 21, 2025

View reviewed changes

refactor(VariantSelector): move private methods to top-level functions

4d03b52

Co-authored-by: timowestnosto <[email protected]>

Copilot AI requested a review from timowestnosto September 21, 2025 19:37

Copilot finished work on behalf of timowestnosto September 21, 2025 19:37

Copilot started work on behalf of timowestnosto September 21, 2025 19:37 View session

feat(VariantSelector): implement Shadow DOM with CSS variables and bu…

12c3733

…tton-based UI Co-authored-by: timowestnosto <[email protected]>

Copilot AI changed the title ~~feat(VariantSelector): Add Shopify product variant selection component~~ feat(VariantSelector): Add Shopify product variant selection component with Shadow DOM Sep 21, 2025

timowestnosto requested changes Sep 21, 2025

View reviewed changes

Copilot AI requested a review from timowestnosto September 21, 2025 19:54

Copilot finished work on behalf of timowestnosto September 21, 2025 19:54

Copilot started work on behalf of timowestnosto September 21, 2025 19:54 View session

refactor(VariantSelector): simplify architecture and extract styles t…

b4c8ed4

…o separate module Co-authored-by: timowestnosto <[email protected]>

Copilot finished work on behalf of timowestnosto September 21, 2025 20:04

timowestnosto requested changes Sep 21, 2025

View reviewed changes

src/components/VariantSelector/VariantSelector.ts Outdated Show resolved Hide resolved

src/components/VariantSelector/VariantSelector.ts Outdated Show resolved Hide resolved

src/components/VariantSelector/VariantSelector.ts Outdated Show resolved Hide resolved

Copilot started work on behalf of timowestnosto September 21, 2025 20:20 View session

refactor(VariantSelector): optimize function signatures and inline va…

160a4a0

…riables Co-authored-by: timowestnosto <[email protected]>

Copilot finished work on behalf of timowestnosto September 21, 2025 20:25

Copilot AI requested a review from timowestnosto September 21, 2025 20:25

timowestnosto requested changes Sep 22, 2025

View reviewed changes

Copilot started work on behalf of timowestnosto September 22, 2025 05:09 View session

refactor(VariantSelector): remove empty options logic and unnecessary…

bf224ec

… comment Co-authored-by: timowestnosto <[email protected]>

Copilot finished work on behalf of timowestnosto September 22, 2025 05:16

Copilot AI requested a review from timowestnosto September 22, 2025 05:16

timowestnosto added the WIP label Sep 22, 2025

timowestnosto requested changes Sep 22, 2025

View reviewed changes

Copilot started work on behalf of timowestnosto September 22, 2025 18:26 View session

refactor(VariantSelector): simplify Storybook stories to minimal comp…

ef44b15

…onent rendering Co-authored-by: timowestnosto <[email protected]>

Copilot AI requested a review from timowestnosto September 22, 2025 18:32

Copilot finished work on behalf of timowestnosto September 22, 2025 18:32

timowestnosto added POC and removed WIP labels Sep 23, 2025

timowestnosto closed this Oct 3, 2025


		const { options } = element.product

		if (options.length === 0) {

feat(VariantSelector): Add Shopify product variant selection component with Shadow DOM #357

feat(VariantSelector): Add Shopify product variant selection component with Shadow DOM #357

Uh oh!

Conversation

Copilot AI commented Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Implementation Complete - Minimalist Storybook Stories

🔄 Storybook Simplification

🎨 Clean Story Architecture

🏗️ Technical Improvements

📊 Quality Maintained

Uh oh!

timowestnosto commented Sep 21, 2025

Uh oh!

Copilot AI commented Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

timowestnosto Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Sep 21, 2025

Uh oh!

Copilot AI commented Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Sep 21, 2025

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Sep 21, 2025

Uh oh!

timowestnosto left a comment

Choose a reason for hiding this comment

Uh oh!

timowestnosto Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 22, 2025

Copilot AI commented Sep 21, 2025 •

edited

Loading

Copilot AI commented Sep 21, 2025 •

edited

Loading

Copilot AI commented Sep 21, 2025 •

edited

Loading