From dd2ccaae0e25910d74aa1ec5a9072799049ebb4a Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:19:19 -0300 Subject: [PATCH 01/10] feat(index.ts): sku matrix examples --- .../faststore-components/SKUMatrix/README.md | 89 ++++++++ .../SKUMatrix/SKUMatrixBasicUsage.tsx | 24 ++ .../SKUMatrix/SKUMatrixEcommerce.tsx | 105 +++++++++ .../SKUMatrix/SKUMatrixLoading.tsx | 33 +++ .../SKUMatrix/SKUMatrixMultiColumn.tsx | 39 ++++ .../SKUMatrix/SKUMatrixStockQuantity.tsx | 35 +++ .../SKUMatrix/SKUMatrixWholesale.tsx | 97 ++++++++ .../SKUMatrix/mockSKUMatrixData.ts | 212 ++++++++++++++++++ .../SKUMatrix/useMockSKUMatrix.tsx | 62 +++++ src/components/faststore-components/index.ts | 6 + 10 files changed, 702 insertions(+) create mode 100644 src/components/faststore-components/SKUMatrix/README.md create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx create mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx create mode 100644 src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts create mode 100644 src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx diff --git a/src/components/faststore-components/SKUMatrix/README.md b/src/components/faststore-components/SKUMatrix/README.md new file mode 100644 index 000000000..a4bf38c72 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/README.md @@ -0,0 +1,89 @@ +# SKU Matrix Components for Documentation + +This folder contains all the example components for the SKU Matrix documentation. + +## Files Created + +### Example Components +1. **SKUMatrixBasicUsage.tsx** - Basic implementation with single specification column +2. **SKUMatrixMultiColumn.tsx** - Example with multiple specification columns (Size, Color, Material) +3. **SKUMatrixStockQuantity.tsx** - Example showing exact stock quantities +4. **SKUMatrixLoading.tsx** - Example with loading state and skeleton loaders +5. **SKUMatrixEcommerce.tsx** - Real-world e-commerce implementation +6. **SKUMatrixWholesale.tsx** - B2B/Wholesale example with bulk ordering + +### Supporting Files +- **useMockSKUMatrix.tsx** - Custom hook providing mock data and shared logic +- **mockSKUMatrixData.ts** - Mock variant product data for examples + +## How These Components Work + +All example components are wrapped in `UIProvider` in the documentation to provide: +- Modal state management +- Toast notifications +- Fade effects + +The `useMockSKUMatrix` hook: +- Loads mock variant products when the sidebar opens +- Provides common configurations (columns, formatter, buyProps, ImageComponent) +- Can be customized for each example + +## Mock Data Structure + +The mock data in `mockSKUMatrixData.ts` includes 5 t-shirt variants: +- Small, Medium, Large, X-Large (all in stock) +- XX-Large (out of stock) + +Each variant includes: +- Product information (id, name, image) +- Inventory and availability +- Pricing (with and without taxes) +- Specifications (size, color, material, packsize) +- Offers data structure + +## Usage in Documentation + +In the `sku-matrix.mdx` documentation file, examples are rendered as: + +```mdx + + + + + +``` + +## Exports + +All components are exported in the main `index.ts` file: +- SKUMatrixBasicUsage +- SKUMatrixMultiColumn +- SKUMatrixStockQuantity +- SKUMatrixLoading +- SKUMatrixEcommerce +- SKUMatrixWholesale + +## Testing the Components + +To test these components locally: +1. Run the devportal development server +2. Navigate to the SKU Matrix documentation page +3. Click the trigger buttons to open the sidebars +4. Interact with the quantity selectors and add to cart buttons + +## Customization + +To create new examples: +1. Create a new component file in this folder +2. Import and use the `useMockSKUMatrix` hook +3. Customize the `columns` configuration as needed +4. Export the component in `index.ts` +5. Add the component to the documentation file + +## Notes + +- The CssSyntaxError linter warnings are false positives (CSS linter checking TypeScript files) +- All components use the same mock data for consistency +- Images use VTEX placeholder images from the existing mock data +- Price formatting uses USD with 2 decimal places + diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx new file mode 100644 index 000000000..b87f89638 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx @@ -0,0 +1,24 @@ +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +const SKUMatrixBasicUsage = () => { + const { columns, buyProps, formatter, ImageComponent } = useMockSKUMatrix() + + return ( + + + Buy Multiple Sizes + + + + + ) +} + +export default SKUMatrixBasicUsage diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx new file mode 100644 index 000000000..df04c913f --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx @@ -0,0 +1,105 @@ +import { useState } from 'react' +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import Image from 'next/image' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +interface ImageProps { + src: string + alt: string + width?: number + height?: number +} + +const SKUMatrixEcommerce = () => { + const [loading, setLoading] = useState(false) + const { formatter } = useMockSKUMatrix() + + const columns = { + name: 'Variant', + additionalColumns: [ + { label: 'Size', value: 'size' }, + { label: 'Color', value: 'color' }, + ], + availability: { + label: 'Availability', + stockDisplaySettings: 'showAvailability' as const, + }, + price: 'Price', + quantitySelector: 'Qty', + } + + const handleAddToCart = async () => { + setLoading(true) + try { + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 1000)) + console.log('Items successfully added to cart!') + } catch (error) { + console.error('Failed to add items:', error) + } finally { + setLoading(false) + } + } + + const buyProps = { + 'data-testid': 'sku-matrix-add-to-cart', + 'data-sku': 't-shirt-classic-cotton', + 'data-seller': 'default-seller', + onClick: handleAddToCart, + } + + const CustomImage = ({ src, alt }: ImageProps) => ( + {alt} + ) + + return ( +
+ + + + + + + Buy Multiple Sizes & Colors + + + + +
+

+ Select the quantities you need for each variant. Available in + multiple sizes and colors. +

+
+ + +
+ ) +} + +export default SKUMatrixEcommerce diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx new file mode 100644 index 000000000..92b3604ae --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx @@ -0,0 +1,33 @@ +import { useState, useEffect } from 'react' +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +const SKUMatrixLoading = () => { + const [loading, setLoading] = useState(true) + const { columns, buyProps, formatter, ImageComponent } = useMockSKUMatrix() + + useEffect(() => { + // Simulate API call + const timer = setTimeout(() => setLoading(false), 2000) + return () => clearTimeout(timer) + }, []) + + return ( + + + Select Variants + + + + + ) +} + +export default SKUMatrixLoading diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx new file mode 100644 index 000000000..ea7541757 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx @@ -0,0 +1,39 @@ +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +const SKUMatrixMultiColumn = () => { + const { buyProps, formatter, ImageComponent } = useMockSKUMatrix() + + const columns = { + name: 'Product', + additionalColumns: [ + { label: 'Size', value: 'size' }, + { label: 'Color', value: 'color' }, + { label: 'Material', value: 'material' }, + ], + availability: { + label: 'Availability', + stockDisplaySettings: 'showAvailability' as const, + }, + price: 'Unit Price', + quantitySelector: 'Quantity', + } + + return ( + + + Order Multiple Variants + + + + + ) +} + +export default SKUMatrixMultiColumn diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx new file mode 100644 index 000000000..8ac08b204 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx @@ -0,0 +1,35 @@ +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +const SKUMatrixStockQuantity = () => { + const { buyProps, formatter, ImageComponent } = useMockSKUMatrix() + + const columns = { + name: 'Product', + additionalColumns: [{ label: 'Size', value: 'size' }], + availability: { + label: 'In Stock', + stockDisplaySettings: 'showStockQuantity' as const, + }, + price: 'Price', + quantitySelector: 'Order Qty', + } + + return ( + + + View All Sizes + + + + + ) +} + +export default SKUMatrixStockQuantity diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx new file mode 100644 index 000000000..b75a9a461 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx @@ -0,0 +1,97 @@ +import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' +import { useMockSKUMatrix } from './useMockSKUMatrix' + +const SKUMatrixWholesale = () => { + const { ImageComponent } = useMockSKUMatrix() + + const columns = { + name: 'SKU', + additionalColumns: [ + { label: 'Size', value: 'size' }, + { label: 'Pack Size', value: 'packSize' }, + ], + availability: { + label: 'Stock Units', + stockDisplaySettings: 'showStockQuantity' as const, + }, + price: 'Unit Price', + quantitySelector: 'Units', + } + + const handleWholesaleOrder = () => { + console.log('Wholesale order submitted') + } + + const formatWholesalePrice = (price: number) => { + const formattedPrice = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }).format(price) + return `${formattedPrice}/unit` + } + + const buyProps = { + 'data-testid': 'wholesale-order-submit', + 'data-sku': 'office-paper-bulk', + 'data-seller': 'wholesale-supplier', + onClick: handleWholesaleOrder, + } + + return ( +
+
+

Wholesale Office Supplies

+

+ Order multiple variants at wholesale prices +

+
+ + + + Open Bulk Order Form + + + +
+

+ Wholesale Pricing Active +

+

+ Minimum order: 10 units per SKU. Volume discounts applied + automatically. +

+
+ + +
+ ) +} + +export default SKUMatrixWholesale diff --git a/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts b/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts new file mode 100644 index 000000000..cdd2ccccd --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts @@ -0,0 +1,212 @@ +export const mockVariantProducts = [ + { + id: 'sku-001', + name: 'Classic T-Shirt - Small', + image: { + url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=1759260622', + alternateName: 'T-Shirt Small', + }, + inventory: 50, + availability: 'inStock', + price: 29.99, + listPrice: 39.99, + priceWithTaxes: 32.99, + listPriceWithTaxes: 43.99, + specifications: { + size: 'Small', + color: 'Blue', + material: 'Cotton', + packsize: '1 unit', + }, + selectedCount: 0, + offers: { + highPrice: 39.99, + lowPrice: 29.99, + lowPriceWithTaxes: 32.99, + offerCount: 1, + priceCurrency: 'USD', + offers: [ + { + listPrice: 39.99, + listPriceWithTaxes: 43.99, + sellingPrice: 29.99, + priceCurrency: 'USD', + price: 29.99, + priceWithTaxes: 32.99, + priceValidUntil: '2025-12-31', + itemCondition: 'NewCondition', + availability: 'https://schema.org/InStock', + quantity: 50, + }, + ], + }, + }, + { + id: 'sku-002', + name: 'Classic T-Shirt - Medium', + image: { + url: 'https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1759260622', + alternateName: 'T-Shirt Medium', + }, + inventory: 75, + availability: 'inStock', + price: 29.99, + listPrice: 39.99, + priceWithTaxes: 32.99, + listPriceWithTaxes: 43.99, + specifications: { + size: 'Medium', + color: 'Blue', + material: 'Cotton', + packsize: '1 unit', + }, + selectedCount: 0, + offers: { + highPrice: 39.99, + lowPrice: 29.99, + lowPriceWithTaxes: 32.99, + offerCount: 1, + priceCurrency: 'USD', + offers: [ + { + listPrice: 39.99, + listPriceWithTaxes: 43.99, + sellingPrice: 29.99, + priceCurrency: 'USD', + price: 29.99, + priceWithTaxes: 32.99, + priceValidUntil: '2025-12-31', + itemCondition: 'NewCondition', + availability: 'https://schema.org/InStock', + quantity: 75, + }, + ], + }, + }, + { + id: 'sku-003', + name: 'Classic T-Shirt - Large', + image: { + url: 'https://storeframework.vtexassets.com/arquivos/ids/190935/magic-side.jpg?v=1759260622', + alternateName: 'T-Shirt Large', + }, + inventory: 60, + availability: 'inStock', + price: 29.99, + listPrice: 39.99, + priceWithTaxes: 32.99, + listPriceWithTaxes: 43.99, + specifications: { + size: 'Large', + color: 'Blue', + material: 'Cotton', + packsize: '1 unit', + }, + selectedCount: 0, + offers: { + highPrice: 39.99, + lowPrice: 29.99, + lowPriceWithTaxes: 32.99, + offerCount: 1, + priceCurrency: 'USD', + offers: [ + { + listPrice: 39.99, + listPriceWithTaxes: 43.99, + sellingPrice: 29.99, + priceCurrency: 'USD', + price: 29.99, + priceWithTaxes: 32.99, + priceValidUntil: '2025-12-31', + itemCondition: 'NewCondition', + availability: 'https://schema.org/InStock', + quantity: 60, + }, + ], + }, + }, + { + id: 'sku-004', + name: 'Classic T-Shirt - X-Large', + image: { + url: 'https://storeframework.vtexassets.com/arquivos/ids/190934/magic-mouse-back.jpg?v=1759260622', + alternateName: 'T-Shirt X-Large', + }, + inventory: 40, + availability: 'inStock', + price: 31.99, + listPrice: 39.99, + priceWithTaxes: 35.19, + listPriceWithTaxes: 43.99, + specifications: { + size: 'X-Large', + color: 'Blue', + material: 'Cotton', + packsize: '1 unit', + }, + selectedCount: 0, + offers: { + highPrice: 39.99, + lowPrice: 31.99, + lowPriceWithTaxes: 35.19, + offerCount: 1, + priceCurrency: 'USD', + offers: [ + { + listPrice: 39.99, + listPriceWithTaxes: 43.99, + sellingPrice: 31.99, + priceCurrency: 'USD', + price: 31.99, + priceWithTaxes: 35.19, + priceValidUntil: '2025-12-31', + itemCondition: 'NewCondition', + availability: 'https://schema.org/InStock', + quantity: 40, + }, + ], + }, + }, + { + id: 'sku-005', + name: 'Classic T-Shirt - XX-Large', + image: { + url: 'https://storeframework.vtexassets.com/arquivos/ids/190933/Magic_Mouse_Black_Pure_Top_Screen__USEN_1.png?v=1759260622', + alternateName: 'T-Shirt XX-Large', + }, + inventory: 0, + availability: 'outOfStock', + price: 31.99, + listPrice: 39.99, + priceWithTaxes: 35.19, + listPriceWithTaxes: 43.99, + specifications: { + size: 'XX-Large', + color: 'Blue', + material: 'Cotton', + packsize: '1 unit', + }, + selectedCount: 0, + offers: { + highPrice: 39.99, + lowPrice: 31.99, + lowPriceWithTaxes: 35.19, + offerCount: 1, + priceCurrency: 'USD', + offers: [ + { + listPrice: 39.99, + listPriceWithTaxes: 43.99, + sellingPrice: 31.99, + priceCurrency: 'USD', + price: 31.99, + priceWithTaxes: 35.19, + priceValidUntil: '2025-12-31', + itemCondition: 'NewCondition', + availability: 'https://schema.org/OutOfStock', + quantity: 0, + }, + ], + }, + }, +] diff --git a/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx b/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx new file mode 100644 index 000000000..745593d80 --- /dev/null +++ b/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx @@ -0,0 +1,62 @@ +import { useEffect } from 'react' +import { useSKUMatrix } from '@faststore/ui' +import Image from 'next/image' +import { mockVariantProducts } from './mockSKUMatrixData' + +interface ImageComponentProps { + src: string + alt: string + width?: number + height?: number +} + +export const useMockSKUMatrix = () => { + const { setAllVariantProducts, isOpen } = useSKUMatrix() + + useEffect(() => { + if (isOpen) { + setAllVariantProducts(mockVariantProducts) + } + }, [isOpen, setAllVariantProducts]) + + const columns = { + name: 'Product', + additionalColumns: [{ label: 'Size', value: 'size' }], + availability: { + label: 'Stock', + stockDisplaySettings: 'showAvailability' as const, + }, + price: 'Price', + quantitySelector: 'Qty', + } + + const formatter = (price: number) => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 2, + }).format(price) + } + + const handleAddToCart = () => { + console.log('Items added to cart') + } + + const buyProps = { + 'data-testid': 'sku-matrix-buy', + 'data-sku': 'product-123', + 'data-seller': 'seller-1', + onClick: handleAddToCart, + } + + const ImageComponent = ({ src, alt }: ImageComponentProps) => ( + {alt} + ) + + return { + columns, + formatter, + buyProps, + ImageComponent, + } +} diff --git a/src/components/faststore-components/index.ts b/src/components/faststore-components/index.ts index 7b343542a..1ba880bf0 100644 --- a/src/components/faststore-components/index.ts +++ b/src/components/faststore-components/index.ts @@ -67,3 +67,9 @@ export { default as GiftTemplateIcon } from './Gift/GiftTemplateIcon' export { default as GiftTemplateWithoutBadge } from './Gift/GiftTemplateWithoutBadge' export { default as GiftTemplateWithoutIcon } from './Gift/GiftTemplateWithoutIcon' export { default as NewsletterUsage } from './Newsletter/NewsletterUsage' +export { default as SKUMatrixBasicUsage } from './SKUMatrix/SKUMatrixBasicUsage' +export { default as SKUMatrixMultiColumn } from './SKUMatrix/SKUMatrixMultiColumn' +export { default as SKUMatrixStockQuantity } from './SKUMatrix/SKUMatrixStockQuantity' +export { default as SKUMatrixLoading } from './SKUMatrix/SKUMatrixLoading' +export { default as SKUMatrixEcommerce } from './SKUMatrix/SKUMatrixEcommerce' +export { default as SKUMatrixWholesale } from './SKUMatrix/SKUMatrixWholesale' From 07924f1c8e5d0711af2183ef8a838514fd3b5e72 Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:46:43 -0300 Subject: [PATCH 02/10] feat(useMockSKUMatrix.tsx): add mock data for SKUMatrix --- .../SKUMatrix/useMockSKUMatrix.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx b/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx index 745593d80..b71386c1b 100644 --- a/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx +++ b/src/components/faststore-components/SKUMatrix/useMockSKUMatrix.tsx @@ -11,14 +11,6 @@ interface ImageComponentProps { } export const useMockSKUMatrix = () => { - const { setAllVariantProducts, isOpen } = useSKUMatrix() - - useEffect(() => { - if (isOpen) { - setAllVariantProducts(mockVariantProducts) - } - }, [isOpen, setAllVariantProducts]) - const columns = { name: 'Product', additionalColumns: [{ label: 'Size', value: 'size' }], @@ -60,3 +52,15 @@ export const useMockSKUMatrix = () => { ImageComponent, } } + +export const MockSKUMatrixInitializer = () => { + const { setAllVariantProducts, isOpen } = useSKUMatrix() + + useEffect(() => { + if (isOpen) { + setAllVariantProducts(mockVariantProducts) + } + }, [isOpen, setAllVariantProducts]) + + return null +} From 86f3920cad5ec9f858beeb736ff78731a699ec48 Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:48:37 -0300 Subject: [PATCH 03/10] feat(SKUMatrixWholesale.tsx): add example for b2b scenario --- .../faststore-components/SKUMatrix/SKUMatrixWholesale.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx index b75a9a461..6ecb5ac56 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx @@ -1,5 +1,5 @@ import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import { useMockSKUMatrix } from './useMockSKUMatrix' +import { useMockSKUMatrix, MockSKUMatrixInitializer } from './useMockSKUMatrix' const SKUMatrixWholesale = () => { const { ImageComponent } = useMockSKUMatrix() @@ -54,6 +54,7 @@ const SKUMatrixWholesale = () => { + Open Bulk Order Form From ab3034bdc433e7dcae44830ff6004fbd283d19ef Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:50:09 -0300 Subject: [PATCH 04/10] feat(SKUMatrixMultiColumn.tsx): add new examples for skumatrix --- .../faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx | 3 ++- .../faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx index ea7541757..1649f6126 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx @@ -1,5 +1,5 @@ import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import { useMockSKUMatrix } from './useMockSKUMatrix' +import { useMockSKUMatrix, MockSKUMatrixInitializer } from './useMockSKUMatrix' const SKUMatrixMultiColumn = () => { const { buyProps, formatter, ImageComponent } = useMockSKUMatrix() @@ -21,6 +21,7 @@ const SKUMatrixMultiColumn = () => { return ( + Order Multiple Variants diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx index 8ac08b204..babf9d26f 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx @@ -1,5 +1,5 @@ import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import { useMockSKUMatrix } from './useMockSKUMatrix' +import { useMockSKUMatrix, MockSKUMatrixInitializer } from './useMockSKUMatrix' const SKUMatrixStockQuantity = () => { const { buyProps, formatter, ImageComponent } = useMockSKUMatrix() @@ -17,6 +17,7 @@ const SKUMatrixStockQuantity = () => { return ( + View All Sizes From 16e8ff3f7dd78f76c5c58b9c77e8026dd7d1c3e9 Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:51:14 -0300 Subject: [PATCH 05/10] feat(SKUMatrixBasicUsage.tsx): add basic example for skumatrix --- .../faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx index b87f89638..e1075f4b9 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx @@ -1,11 +1,12 @@ import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import { useMockSKUMatrix } from './useMockSKUMatrix' +import { useMockSKUMatrix, MockSKUMatrixInitializer } from './useMockSKUMatrix' const SKUMatrixBasicUsage = () => { const { columns, buyProps, formatter, ImageComponent } = useMockSKUMatrix() return ( + Buy Multiple Sizes From f7ed8750fc38ff45b07457fc062c714deebd103c Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:52:44 -0300 Subject: [PATCH 06/10] feat(mockSkuMatrixData.ts): data for skumatrix --- .../SKUMatrix/mockSKUMatrixData.ts | 76 +++++-------------- 1 file changed, 17 insertions(+), 59 deletions(-) diff --git a/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts b/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts index cdd2ccccd..e9ef23659 100644 --- a/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts +++ b/src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts @@ -1,10 +1,10 @@ export const mockVariantProducts = [ { id: 'sku-001', - name: 'Classic T-Shirt - Small', + name: 'Wireless Mouse - Compact', image: { url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=1759260622', - alternateName: 'T-Shirt Small', + alternateName: 'Wireless Mouse Small', }, inventory: 50, availability: 'inStock', @@ -14,8 +14,8 @@ export const mockVariantProducts = [ listPriceWithTaxes: 43.99, specifications: { size: 'Small', - color: 'Blue', - material: 'Cotton', + color: 'White', + material: 'Plastic', packsize: '1 unit', }, selectedCount: 0, @@ -43,10 +43,10 @@ export const mockVariantProducts = [ }, { id: 'sku-002', - name: 'Classic T-Shirt - Medium', + name: 'Wireless Mouse - Standard', image: { url: 'https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1759260622', - alternateName: 'T-Shirt Medium', + alternateName: 'Wireless Mouse Medium', }, inventory: 75, availability: 'inStock', @@ -56,8 +56,8 @@ export const mockVariantProducts = [ listPriceWithTaxes: 43.99, specifications: { size: 'Medium', - color: 'Blue', - material: 'Cotton', + color: 'Black', + material: 'Plastic', packsize: '1 unit', }, selectedCount: 0, @@ -85,10 +85,10 @@ export const mockVariantProducts = [ }, { id: 'sku-003', - name: 'Classic T-Shirt - Large', + name: 'Wireless Mouse - Ergonomic', image: { url: 'https://storeframework.vtexassets.com/arquivos/ids/190935/magic-side.jpg?v=1759260622', - alternateName: 'T-Shirt Large', + alternateName: 'Wireless Mouse Large', }, inventory: 60, availability: 'inStock', @@ -98,8 +98,8 @@ export const mockVariantProducts = [ listPriceWithTaxes: 43.99, specifications: { size: 'Large', - color: 'Blue', - material: 'Cotton', + color: 'White', + material: 'Plastic', packsize: '1 unit', }, selectedCount: 0, @@ -125,54 +125,12 @@ export const mockVariantProducts = [ ], }, }, - { - id: 'sku-004', - name: 'Classic T-Shirt - X-Large', - image: { - url: 'https://storeframework.vtexassets.com/arquivos/ids/190934/magic-mouse-back.jpg?v=1759260622', - alternateName: 'T-Shirt X-Large', - }, - inventory: 40, - availability: 'inStock', - price: 31.99, - listPrice: 39.99, - priceWithTaxes: 35.19, - listPriceWithTaxes: 43.99, - specifications: { - size: 'X-Large', - color: 'Blue', - material: 'Cotton', - packsize: '1 unit', - }, - selectedCount: 0, - offers: { - highPrice: 39.99, - lowPrice: 31.99, - lowPriceWithTaxes: 35.19, - offerCount: 1, - priceCurrency: 'USD', - offers: [ - { - listPrice: 39.99, - listPriceWithTaxes: 43.99, - sellingPrice: 31.99, - priceCurrency: 'USD', - price: 31.99, - priceWithTaxes: 35.19, - priceValidUntil: '2025-12-31', - itemCondition: 'NewCondition', - availability: 'https://schema.org/InStock', - quantity: 40, - }, - ], - }, - }, { id: 'sku-005', - name: 'Classic T-Shirt - XX-Large', + name: 'Wireless Mouse - Ergonomic', image: { url: 'https://storeframework.vtexassets.com/arquivos/ids/190933/Magic_Mouse_Black_Pure_Top_Screen__USEN_1.png?v=1759260622', - alternateName: 'T-Shirt XX-Large', + alternateName: 'Wireless Mouse XX-Large', }, inventory: 0, availability: 'outOfStock', @@ -181,9 +139,9 @@ export const mockVariantProducts = [ priceWithTaxes: 35.19, listPriceWithTaxes: 43.99, specifications: { - size: 'XX-Large', - color: 'Blue', - material: 'Cotton', + size: 'Medium', + color: 'Black', + material: 'Plastic', packsize: '1 unit', }, selectedCount: 0, From ada9d52866a415e7332711855e5fee479658dba2 Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:57:34 -0300 Subject: [PATCH 07/10] feat(index.ts): add SKUMatrix components --- src/components/faststore-components/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/faststore-components/index.ts b/src/components/faststore-components/index.ts index 1ba880bf0..ce83383ee 100644 --- a/src/components/faststore-components/index.ts +++ b/src/components/faststore-components/index.ts @@ -70,6 +70,4 @@ export { default as NewsletterUsage } from './Newsletter/NewsletterUsage' export { default as SKUMatrixBasicUsage } from './SKUMatrix/SKUMatrixBasicUsage' export { default as SKUMatrixMultiColumn } from './SKUMatrix/SKUMatrixMultiColumn' export { default as SKUMatrixStockQuantity } from './SKUMatrix/SKUMatrixStockQuantity' -export { default as SKUMatrixLoading } from './SKUMatrix/SKUMatrixLoading' -export { default as SKUMatrixEcommerce } from './SKUMatrix/SKUMatrixEcommerce' export { default as SKUMatrixWholesale } from './SKUMatrix/SKUMatrixWholesale' From 36ebfb5c1172f3be8d3b0fcbdbaa74d3435cc4bf Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 11:48:58 -0300 Subject: [PATCH 08/10] fix(SKUMatrixBasicUsage.tsx): fix skumatrixsidebar --- .../faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx | 6 +++++- .../faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx | 6 +++++- .../SKUMatrix/SKUMatrixStockQuantity.tsx | 6 +++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx index e1075f4b9..7834cf36a 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx @@ -17,7 +17,11 @@ const SKUMatrixBasicUsage = () => { formatter={formatter} buyProps={buyProps} ImageComponent={ImageComponent} - /> + direction="rightSide" + size="partial" + > + {/* Optional additional content can be added here */} + ) } diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx index 1649f6126..8fc9758bd 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx @@ -32,7 +32,11 @@ const SKUMatrixMultiColumn = () => { formatter={formatter} buyProps={buyProps} ImageComponent={ImageComponent} - /> + direction="rightSide" + size="partial" + > + {/* Optional additional content can be added here */} + ) } diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx index babf9d26f..4350d5059 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx @@ -28,7 +28,11 @@ const SKUMatrixStockQuantity = () => { formatter={formatter} buyProps={buyProps} ImageComponent={ImageComponent} - /> + direction="rightSide" + size="partial" + > + {/* Optional additional content can be added here */} + ) } From 124bccc85fba98e0706d5b2971a641ac7466adbe Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 12:11:59 -0300 Subject: [PATCH 09/10] fix(SKUMatrixEcommerce): remoe unused examples --- .../SKUMatrix/SKUMatrixEcommerce.tsx | 105 ------------------ .../SKUMatrix/SKUMatrixLoading.tsx | 33 ------ 2 files changed, 138 deletions(-) delete mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx delete mode 100644 src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx deleted file mode 100644 index df04c913f..000000000 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixEcommerce.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { useState } from 'react' -import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import Image from 'next/image' -import { useMockSKUMatrix } from './useMockSKUMatrix' - -interface ImageProps { - src: string - alt: string - width?: number - height?: number -} - -const SKUMatrixEcommerce = () => { - const [loading, setLoading] = useState(false) - const { formatter } = useMockSKUMatrix() - - const columns = { - name: 'Variant', - additionalColumns: [ - { label: 'Size', value: 'size' }, - { label: 'Color', value: 'color' }, - ], - availability: { - label: 'Availability', - stockDisplaySettings: 'showAvailability' as const, - }, - price: 'Price', - quantitySelector: 'Qty', - } - - const handleAddToCart = async () => { - setLoading(true) - try { - // Simulate API call - await new Promise((resolve) => setTimeout(resolve, 1000)) - console.log('Items successfully added to cart!') - } catch (error) { - console.error('Failed to add items:', error) - } finally { - setLoading(false) - } - } - - const buyProps = { - 'data-testid': 'sku-matrix-add-to-cart', - 'data-sku': 't-shirt-classic-cotton', - 'data-seller': 'default-seller', - onClick: handleAddToCart, - } - - const CustomImage = ({ src, alt }: ImageProps) => ( - {alt} - ) - - return ( -
- - - - - - - Buy Multiple Sizes & Colors - - - - -
-

- Select the quantities you need for each variant. Available in - multiple sizes and colors. -

-
- - -
- ) -} - -export default SKUMatrixEcommerce diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx deleted file mode 100644 index 92b3604ae..000000000 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixLoading.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useState, useEffect } from 'react' -import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui' -import { useMockSKUMatrix } from './useMockSKUMatrix' - -const SKUMatrixLoading = () => { - const [loading, setLoading] = useState(true) - const { columns, buyProps, formatter, ImageComponent } = useMockSKUMatrix() - - useEffect(() => { - // Simulate API call - const timer = setTimeout(() => setLoading(false), 2000) - return () => clearTimeout(timer) - }, []) - - return ( - - - Select Variants - - - - - ) -} - -export default SKUMatrixLoading From 435acd46c52e510ceed3718507bc96b80a6f96d4 Mon Sep 17 00:00:00 2001 From: mariana-caetano <67270558+mariana-caetano@users.noreply.github.com> Date: Tue, 28 Oct 2025 12:35:10 -0300 Subject: [PATCH 10/10] fix(SKUMatrixBasicUsage): fix skumatrixsidebar --- .../faststore-components/SKUMatrix/README.md | 89 ------------------- .../SKUMatrix/SKUMatrixBasicUsage.tsx | 2 +- .../SKUMatrix/SKUMatrixMultiColumn.tsx | 2 +- .../SKUMatrix/SKUMatrixStockQuantity.tsx | 2 +- 4 files changed, 3 insertions(+), 92 deletions(-) delete mode 100644 src/components/faststore-components/SKUMatrix/README.md diff --git a/src/components/faststore-components/SKUMatrix/README.md b/src/components/faststore-components/SKUMatrix/README.md deleted file mode 100644 index a4bf38c72..000000000 --- a/src/components/faststore-components/SKUMatrix/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# SKU Matrix Components for Documentation - -This folder contains all the example components for the SKU Matrix documentation. - -## Files Created - -### Example Components -1. **SKUMatrixBasicUsage.tsx** - Basic implementation with single specification column -2. **SKUMatrixMultiColumn.tsx** - Example with multiple specification columns (Size, Color, Material) -3. **SKUMatrixStockQuantity.tsx** - Example showing exact stock quantities -4. **SKUMatrixLoading.tsx** - Example with loading state and skeleton loaders -5. **SKUMatrixEcommerce.tsx** - Real-world e-commerce implementation -6. **SKUMatrixWholesale.tsx** - B2B/Wholesale example with bulk ordering - -### Supporting Files -- **useMockSKUMatrix.tsx** - Custom hook providing mock data and shared logic -- **mockSKUMatrixData.ts** - Mock variant product data for examples - -## How These Components Work - -All example components are wrapped in `UIProvider` in the documentation to provide: -- Modal state management -- Toast notifications -- Fade effects - -The `useMockSKUMatrix` hook: -- Loads mock variant products when the sidebar opens -- Provides common configurations (columns, formatter, buyProps, ImageComponent) -- Can be customized for each example - -## Mock Data Structure - -The mock data in `mockSKUMatrixData.ts` includes 5 t-shirt variants: -- Small, Medium, Large, X-Large (all in stock) -- XX-Large (out of stock) - -Each variant includes: -- Product information (id, name, image) -- Inventory and availability -- Pricing (with and without taxes) -- Specifications (size, color, material, packsize) -- Offers data structure - -## Usage in Documentation - -In the `sku-matrix.mdx` documentation file, examples are rendered as: - -```mdx - - - - - -``` - -## Exports - -All components are exported in the main `index.ts` file: -- SKUMatrixBasicUsage -- SKUMatrixMultiColumn -- SKUMatrixStockQuantity -- SKUMatrixLoading -- SKUMatrixEcommerce -- SKUMatrixWholesale - -## Testing the Components - -To test these components locally: -1. Run the devportal development server -2. Navigate to the SKU Matrix documentation page -3. Click the trigger buttons to open the sidebars -4. Interact with the quantity selectors and add to cart buttons - -## Customization - -To create new examples: -1. Create a new component file in this folder -2. Import and use the `useMockSKUMatrix` hook -3. Customize the `columns` configuration as needed -4. Export the component in `index.ts` -5. Add the component to the documentation file - -## Notes - -- The CssSyntaxError linter warnings are false positives (CSS linter checking TypeScript files) -- All components use the same mock data for consistency -- Images use VTEX placeholder images from the existing mock data -- Price formatting uses USD with 2 decimal places - diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx index 7834cf36a..9347b9944 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx @@ -20,7 +20,7 @@ const SKUMatrixBasicUsage = () => { direction="rightSide" size="partial" > - {/* Optional additional content can be added here */} +
SKU Matrix Content
 ) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx index 8fc9758bd..3d350e25d 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx @@ -35,7 +35,7 @@ const SKUMatrixMultiColumn = () => { direction="rightSide" size="partial" > - {/* Optional additional content can be added here */} +
SKU Matrix Content
) diff --git a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx index 4350d5059..a82b7701f 100644 --- a/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx +++ b/src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx @@ -31,7 +31,7 @@ const SKUMatrixStockQuantity = () => { direction="rightSide" size="partial" > - {/* Optional additional content can be added here */} + <> )