Feat/SKU matrix

src/components/faststore-components/SKUMatrix/SKUMatrixBasicUsage.tsx

@@ -0,0 +1,29 @@
+import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui'
+import { useMockSKUMatrix, MockSKUMatrixInitializer } from './useMockSKUMatrix'
+
+const SKUMatrixBasicUsage = () => {
+  const { columns, buyProps, formatter, ImageComponent } = useMockSKUMatrix()
+
+  return (
+    <SKUMatrix>
+      <MockSKUMatrixInitializer />
+      <SKUMatrixTrigger style={{ width: '15rem' }}>
+        Buy Multiple Sizes
+      </SKUMatrixTrigger>
+
+      <SKUMatrixSidebar
+        title="T-Shirt Variants"
+        columns={columns}
+        formatter={formatter}
+        buyProps={buyProps}
+        ImageComponent={ImageComponent}
+        direction="rightSide"
+        size="partial"
+      >
+        <div>SKU Matrix Content</div>
+      </SKUMatrixSidebar>
+    </SKUMatrix>
+  )
+}
+
+export default SKUMatrixBasicUsage

src/components/faststore-components/SKUMatrix/SKUMatrixMultiColumn.tsx

@@ -0,0 +1,44 @@
+import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui'
+import { useMockSKUMatrix, MockSKUMatrixInitializer } 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 (
+    <SKUMatrix>
+      <MockSKUMatrixInitializer />
+      <SKUMatrixTrigger variant="primary" style={{ width: '15rem' }}>
+        Order Multiple Variants
+      </SKUMatrixTrigger>
+
+      <SKUMatrixSidebar
+        title="Premium Polo Shirts - Select Variants"
+        columns={columns}
+        formatter={formatter}
+        buyProps={buyProps}
+        ImageComponent={ImageComponent}
+        direction="rightSide"
+        size="partial"
+      >
+        <div>SKU Matrix Content</div>
+      </SKUMatrixSidebar>
+    </SKUMatrix>
+  )
+}
+
+export default SKUMatrixMultiColumn

src/components/faststore-components/SKUMatrix/SKUMatrixStockQuantity.tsx

@@ -0,0 +1,40 @@
+import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui'
+import { useMockSKUMatrix, MockSKUMatrixInitializer } 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 (
+    <SKUMatrix>
+      <MockSKUMatrixInitializer />
+      <SKUMatrixTrigger style={{ width: '15rem' }}>
+        View All Sizes
+      </SKUMatrixTrigger>
+
+      <SKUMatrixSidebar
+        title="Shoes - All Sizes"
+        columns={columns}
+        formatter={formatter}
+        buyProps={buyProps}
+        ImageComponent={ImageComponent}
+        direction="rightSide"
+        size="partial"
+      >
+        <></>
+      </SKUMatrixSidebar>
+    </SKUMatrix>
+  )
+}
+
+export default SKUMatrixStockQuantity

src/components/faststore-components/SKUMatrix/SKUMatrixWholesale.tsx

@@ -0,0 +1,98 @@
+import { SKUMatrix, SKUMatrixTrigger, SKUMatrixSidebar } from '@faststore/ui'
+import { useMockSKUMatrix, MockSKUMatrixInitializer } 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 (
+    <div
+      style={{
+        padding: '24px',
+        backgroundColor: '#fff',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+      }}
+    >
+      <div style={{ marginBottom: '16px' }}>
+        <h3 style={{ margin: '0 0 8px 0' }}>Wholesale Office Supplies</h3>
+        <p style={{ margin: 0, color: '#666', fontSize: '14px' }}>
+          Order multiple variants at wholesale prices
+        </p>
+      </div>
+
+      <SKUMatrix>
+        <MockSKUMatrixInitializer />
+        <SKUMatrixTrigger variant="primary" style={{ width: '100%' }}>
+          Open Bulk Order Form
+        </SKUMatrixTrigger>
+
+        <SKUMatrixSidebar
+          title="Bulk Order - Office Paper"
+          columns={columns}
+          formatter={formatWholesalePrice}
+          direction="rightSide"
+          size="full"
+          buyProps={buyProps}
+          ImageComponent={ImageComponent}
+        >
+          <div
+            style={{
+              padding: '20px 24px',
+              backgroundColor: '#e3f2fd',
+              borderBottom: '1px solid #90caf9',
+            }}
+          >
+            <h4
+              style={{
+                margin: '0 0 8px 0',
+                fontSize: '16px',
+                color: '#1565c0',
+              }}
+            >
+              Wholesale Pricing Active
+            </h4>
+            <p style={{ margin: 0, fontSize: '14px', color: '#424242' }}>
+              Minimum order: 10 units per SKU. Volume discounts applied
+              automatically.
+            </p>
+          </div>
+        </SKUMatrixSidebar>
+      </SKUMatrix>
+    </div>
+  )
+}
+
+export default SKUMatrixWholesale

src/components/faststore-components/SKUMatrix/mockSKUMatrixData.ts

@@ -0,0 +1,170 @@
+export const mockVariantProducts = [
+  {
+    id: 'sku-001',
+    name: 'Wireless Mouse - Compact',
+    image: {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=1759260622',
+      alternateName: 'Wireless Mouse Small',
+    },
+    inventory: 50,
+    availability: 'inStock',
+    price: 29.99,
+    listPrice: 39.99,
+    priceWithTaxes: 32.99,
+    listPriceWithTaxes: 43.99,
+    specifications: {
+      size: 'Small',
+      color: 'White',
+      material: 'Plastic',
+      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: 'Wireless Mouse - Standard',
+    image: {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1759260622',
+      alternateName: 'Wireless Mouse Medium',
+    },
+    inventory: 75,
+    availability: 'inStock',
+    price: 29.99,
+    listPrice: 39.99,
+    priceWithTaxes: 32.99,
+    listPriceWithTaxes: 43.99,
+    specifications: {
+      size: 'Medium',
+      color: 'Black',
+      material: 'Plastic',
+      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: 'Wireless Mouse - Ergonomic',
+    image: {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190935/magic-side.jpg?v=1759260622',
+      alternateName: 'Wireless Mouse Large',
+    },
+    inventory: 60,
+    availability: 'inStock',
+    price: 29.99,
+    listPrice: 39.99,
+    priceWithTaxes: 32.99,
+    listPriceWithTaxes: 43.99,
+    specifications: {
+      size: 'Large',
+      color: 'White',
+      material: 'Plastic',
+      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-005',
+    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: 'Wireless Mouse XX-Large',
+    },
+    inventory: 0,
+    availability: 'outOfStock',
+    price: 31.99,
+    listPrice: 39.99,
+    priceWithTaxes: 35.19,
+    listPriceWithTaxes: 43.99,
+    specifications: {
+      size: 'Medium',
+      color: 'Black',
+      material: 'Plastic',
+      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,
+        },
+      ],
+    },
+  },
+]