@instockng/storefront-ui 1.0.10 → 1.0.12

package/src/components/ProductCard.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCard, type ProductCardProduct } from './ProductCard';
+
+const meta = {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProductCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock product data
+const mockProduct: ProductCardProduct = {
+  id: '1',
+  name: 'Premium Cotton T-Shirt',
+  description: 'Comfortable and stylish cotton t-shirt perfect for everyday wear',
+  imageUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+  brand: {
+    name: 'Fashion Brand',
+    logoUrl: 'https://via.placeholder.com/100x50',
+  },
+  variants: [
+    {
+      id: 'v1',
+      name: 'Small - Blue',
+      price: 29.99,
+      sku: 'TSHIRT-SM-BLUE',
+      stock: 15,
+    },
+    {
+      id: 'v2',
+      name: 'Medium - Blue',
+      price: 29.99,
+      sku: 'TSHIRT-MD-BLUE',
+      stock: 20,
+    },
+    {
+      id: 'v3',
+      name: 'Large - Blue',
+      price: 29.99,
+      sku: 'TSHIRT-LG-BLUE',
+      stock: 8,
+    },
+  ],
+};
+
+export const Default: Story = {
+  args: {
+    product: mockProduct,
+    onAddToCart: (variantId, quantity) => {
+      console.log('Add to cart:', variantId, quantity);
+    },
+    showStock: true,
+  },
+};
+
+export const OutOfStock: Story = {
+  args: {
+    product: {
+      ...mockProduct,
+      variants: mockProduct.variants.map((v) => ({ ...v, stock: 0 })),
+    },
+    showStock: true,
+  },
+};
+
+export const LowStock: Story = {
+  args: {
+    product: {
+      ...mockProduct,
+      variants: [
+        {
+          id: 'v1',
+          name: 'Last One!',
+          price: 29.99,
+          sku: 'TSHIRT-SM-RED',
+          stock: 2,
+        },
+      ],
+    },
+    showStock: true,
+  },
+};
+
+export const SingleVariant: Story = {
+  args: {
+    product: {
+      ...mockProduct,
+      variants: [mockProduct.variants[0]],
+    },
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    product: {
+      ...mockProduct,
+      imageUrl: undefined,
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    product: mockProduct,
+    isAddingToCart: true,
+  },
+};

package/src/components/ProductCard.tsx

@@ -0,0 +1,195 @@
+/**
+ * ProductCard Component
+ *
+ * Displays a product with image, name, price, and add to cart button.
+ * Handles variant selection if product has multiple variants.
+ */
+
+import { useState } from 'react';
+import { Card, CardContent, CardFooter } from './ui/card';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { ShoppingCart, Package } from 'lucide-react';
+import { formatCurrency, cn } from '../lib/utils';
+
+// Simplified product type based on common OMS structure
+export interface ProductCardProduct {
+  id: string;
+  name: string;
+  description?: string;
+  imageUrl?: string;
+  brand?: {
+    name: string;
+    logoUrl?: string;
+  };
+  variants: Array<{
+    id: string;
+    name: string;
+    price: number;
+    sku: string;
+    stock?: number;
+  }>;
+}
+
+export interface ProductCardProps {
+  product: ProductCardProduct;
+  /** Callback when add to cart is clicked */
+  onAddToCart?: (variantId: string, quantity: number) => void;
+  /** Show stock information */
+  showStock?: boolean;
+  /** Custom class names */
+  className?: string;
+  /** Image class name */
+  imageClassName?: string;
+  /** Disable add to cart button */
+  disableAddToCart?: boolean;
+  /** Loading state for add to cart */
+  isAddingToCart?: boolean;
+  /** Click handler for card */
+  onClick?: () => void;
+}
+
+export function ProductCard({
+  product,
+  onAddToCart,
+  showStock = true,
+  className,
+  imageClassName,
+  disableAddToCart = false,
+  isAddingToCart = false,
+  onClick,
+}: ProductCardProps) {
+  const [selectedVariantId, setSelectedVariantId] = useState<string>(
+    product.variants[0]?.id || ''
+  );
+  const [quantity, setQuantity] = useState(1);
+
+  const selectedVariant = product.variants.find((v) => v.id === selectedVariantId);
+  const hasMultipleVariants = product.variants.length > 1;
+
+  // Check if product is in stock
+  const isInStock = selectedVariant
+    ? selectedVariant.stock === undefined || selectedVariant.stock > 0
+    : false;
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (selectedVariant && onAddToCart) {
+      onAddToCart(selectedVariant.id, quantity);
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        'group overflow-hidden transition-all hover:shadow-lg',
+        onClick && 'cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      {/* Product Image */}
+      <div className="relative aspect-square overflow-hidden bg-gray-100">
+        {product.imageUrl ? (
+          <img
+            src={product.imageUrl}
+            alt={product.name}
+            className={cn(
+              'h-full w-full object-cover transition-transform group-hover:scale-105',
+              imageClassName
+            )}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Package className="h-16 w-16 text-gray-400" />
+          </div>
+        )}
+
+        {/* Out of stock badge */}
+        {!isInStock && (
+          <Badge className="absolute right-2 top-2 bg-red-600">Out of Stock</Badge>
+        )}
+
+        {/* Stock badge */}
+        {showStock && isInStock && selectedVariant?.stock !== undefined && selectedVariant.stock < 10 && (
+          <Badge className="absolute right-2 top-2 bg-orange-600">
+            Only {selectedVariant.stock} left
+          </Badge>
+        )}
+      </div>
+
+      <CardContent className="p-4">
+        {/* Product Name */}
+        <h3 className="mb-1 font-semibold line-clamp-2">{product.name}</h3>
+
+        {/* Description */}
+        {product.description && (
+          <p className="mb-2 text-sm text-gray-600 line-clamp-2">{product.description}</p>
+        )}
+
+        {/* Variant Selector */}
+        {hasMultipleVariants && (
+          <div className="mb-3">
+            <label className="mb-1 block text-xs font-medium text-gray-700">
+              Select Option
+            </label>
+            <select
+              value={selectedVariantId}
+              onChange={(e) => {
+                e.stopPropagation();
+                setSelectedVariantId(e.target.value);
+              }}
+              className="w-full rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {product.variants.map((variant) => (
+                <option key={variant.id} value={variant.id}>
+                  {variant.name} - {formatCurrency(variant.price)}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Price */}
+        <div className="mb-3 text-2xl font-bold text-blue-600">
+          {selectedVariant && formatCurrency(selectedVariant.price)}
+        </div>
+
+        {/* Quantity Selector */}
+        <div className="flex items-center gap-2">
+          <label className="text-xs font-medium text-gray-700">Qty:</label>
+          <input
+            type="number"
+            min="1"
+            max={selectedVariant?.stock || 999}
+            value={quantity}
+            onChange={(e) => {
+              e.stopPropagation();
+              setQuantity(Math.max(1, parseInt(e.target.value) || 1));
+            }}
+            onClick={(e) => e.stopPropagation()}
+            className="w-20 rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          />
+        </div>
+      </CardContent>
+
+      <CardFooter className="p-4 pt-0">
+        <Button
+          onClick={handleAddToCart}
+          disabled={disableAddToCart || !isInStock || isAddingToCart}
+          className="w-full"
+        >
+          {isAddingToCart ? (
+            <>Adding...</>
+          ) : (
+            <>
+              <ShoppingCart className="mr-2 h-4 w-4" />
+              Add to Cart
+            </>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/components/ProductGrid.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductGrid } from './ProductGrid';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fn } from '@storybook/test';
+
+// Mock products data
+const mockProductsResponse = {
+  data: [
+    {
+      id: '1',
+      name: 'Premium Cotton T-Shirt',
+      description: 'Comfortable and stylish cotton t-shirt',
+      thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+      variants: [
+        { id: 'v1', name: 'Small - Blue', price: 29.99, sku: 'TSHIRT-SM-BLUE', stock: 15 },
+        { id: 'v2', name: 'Medium - Blue', price: 29.99, sku: 'TSHIRT-MD-BLUE', stock: 20 },
+        { id: 'v3', name: 'Large - Blue', price: 29.99, sku: 'TSHIRT-LG-BLUE', stock: 8 },
+      ],
+    },
+    {
+      id: '2',
+      name: 'Slim Fit Jeans',
+      description: 'Classic denim jeans with modern fit',
+      thumbnailUrl: 'https://images.unsplash.com/photo-1542272604-787c3835535d?w=400',
+      variants: [
+        { id: 'v4', name: 'Medium - Black', price: 59.99, sku: 'JEANS-MD-BLACK', stock: 12 },
+        { id: 'v5', name: 'Large - Black', price: 59.99, sku: 'JEANS-LG-BLACK', stock: 5 },
+      ],
+    },
+    {
+      id: '3',
+      name: 'Casual Sneakers',
+      description: 'Comfortable everyday sneakers',
+      thumbnailUrl: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400',
+      variants: [
+        { id: 'v6', name: 'Size 9 - White', price: 79.99, sku: 'SNEAKER-9-WHITE', stock: 0 },
+        { id: 'v7', name: 'Size 10 - White', price: 79.99, sku: 'SNEAKER-10-WHITE', stock: 3 },
+      ],
+    },
+    {
+      id: '4',
+      name: 'Leather Wallet',
+      description: 'Premium leather wallet with multiple compartments',
+      thumbnailUrl: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=400',
+      variants: [
+        { id: 'v8', name: 'Brown', price: 39.99, sku: 'WALLET-BROWN', stock: 25 },
+      ],
+    },
+  ],
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      queryFn: async () => mockProductsResponse,
+    },
+  },
+});
+
+const meta: Meta<typeof ProductGrid> = {
+  title: 'Components/ProductGrid',
+  component: ProductGrid,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof ProductGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ThreeColumns: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 3,
+    onAddToCart: fn(),
+  },
+};
+
+export const TwoColumns: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 2,
+    onAddToCart: fn(),
+  },
+};
+
+export const FourColumns: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 4,
+    onAddToCart: fn(),
+  },
+};
+
+export const WithStockInfo: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 3,
+    showStock: true,
+    onAddToCart: fn(),
+  },
+};
+
+export const WithoutStockInfo: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 3,
+    showStock: false,
+    onAddToCart: fn(),
+  },
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 3,
+    onAddToCart: fn(),
+    onProductClick: fn(),
+  },
+};
+
+export const CustomCurrency: Story = {
+  args: {
+    brandId: 'brand-1',
+    columns: 3,
+    onAddToCart: fn(),
+  },
+};

package/src/components/ProductGrid.tsx

@@ -0,0 +1,141 @@
+/**
+ * ProductGrid Component
+ *
+ * Displays a grid of products using ProductCard.
+ * Handles loading, empty states, and integrates with useGetProducts hook.
+ */
+
+import { useGetProducts } from '@oms/api-client';
+import { ProductCard, type ProductCardProduct } from './ProductCard';
+import { Loader2, Package } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export interface ProductGridProps {
+  /** Brand UUID to fetch products for */
+  brandId: string;
+  /** Callback when add to cart is clicked */
+  onAddToCart?: (variantId: string, quantity: number) => void;
+  /** Callback when product card is clicked */
+  onProductClick?: (product: ProductCardProduct) => void;
+  /** Number of columns in grid */
+  columns?: 2 | 3 | 4;
+  /** Show stock information */
+  showStock?: boolean;
+  /** Custom class name for grid container */
+  className?: string;
+  /** Custom class name for product cards */
+  cardClassName?: string;
+  /** Show loading state */
+  showLoading?: boolean;
+  /** Custom empty state message */
+  emptyMessage?: string;
+  /** Custom error message */
+  errorMessage?: string;
+  /** Loading variant ID (to show loading state on specific card) */
+  loadingVariantId?: string;
+}
+
+export function ProductGrid({
+  brandId,
+  onAddToCart,
+  onProductClick,
+  columns = 3,
+  showStock = true,
+  className,
+  cardClassName,
+  showLoading = true,
+  emptyMessage = 'No products available at the moment.',
+  errorMessage = 'Failed to load products. Please try again later.',
+  loadingVariantId,
+}: ProductGridProps) {
+  const { data, isLoading, error } = useGetProducts(brandId);
+
+  // Loading state
+  if (isLoading && showLoading) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="mx-auto mb-4 h-12 w-12 animate-spin text-blue-600" />
+          <p className="text-gray-600">Loading products...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="text-center">
+          <Package className="mx-auto mb-4 h-12 w-12 text-red-600" />
+          <p className="text-red-600">{errorMessage}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Get products array from response
+  const products = data || [];
+
+  // Empty state
+  if (products.length === 0) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="text-center">
+          <Package className="mx-auto mb-4 h-12 w-12 text-gray-400" />
+          <p className="text-gray-600">{emptyMessage}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Column class mapping
+  const gridColsClass = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  };
+
+  return (
+    <div
+      className={cn(
+        'grid gap-6',
+        gridColsClass[columns],
+        className
+      )}
+    >
+      {products.map((product: any) => {
+        // Convert product to ProductCardProduct format
+        const productCardData: ProductCardProduct = {
+          id: product.id,
+          name: product.name,
+          description: product.description || undefined,
+          imageUrl: product.thumbnailUrl || undefined,
+          brand: undefined, // Brand info not included in product response
+          variants: product.variants.map((v: any) => ({
+            id: v.id,
+            name: v.name || v.sku,
+            price: typeof v.price === 'string' ? parseFloat(v.price) : v.price,
+            sku: v.sku,
+            stock: v.stock || undefined,
+          })),
+        };
+
+        // Check if any variant of this product is currently being added to cart
+        const isAddingToCart = product.variants.some((v: any) => v.id === loadingVariantId);
+
+        return (
+          <ProductCard
+            key={product.id}
+            product={productCardData}
+            onAddToCart={onAddToCart}
+            onClick={onProductClick ? () => onProductClick(productCardData) : undefined}
+            showStock={showStock}
+            className={cardClassName}
+            isAddingToCart={isAddingToCart}
+          />
+        );
+      })}
+    </div>
+  );
+}