@snowcone-app/ui 0.1.43 → 0.2.0

package/src/ecommerce/stories/PDPInfoPanel.stories.tsx

@@ -0,0 +1,472 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { Product } from '../../patterns/Product';
+import { ProductOptions } from '../../composed/ProductOptions';
+import { AddToCart } from '../../composed/AddToCart';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../../primitives/accordion';
+import type { CatalogProduct } from '@snowcone-app/sdk';
+
+/**
+ * PDPInfoPanel - Product Detail Page Info Panel
+ *
+ * The right-side panel on a Product Detail Page (PDP) that displays:
+ * - Product name and price
+ * - Rating and favorite button
+ * - Artwork customizer (optional)
+ * - Product options (size, color, etc.) - uses real ProductOptions component
+ * - Add to Cart button - uses real AddToCart component
+ * - Product details accordion (description, materials, care, shipping)
+ *
+ * This story uses REAL components with Product context.
+ */
+
+// Helper to generate all combinations for sizes and colors
+const sizes = ['XS', 'S', 'M', 'L', 'XL', '2XL'];
+const colors = ['Black', 'White', 'Navy', 'Heather Gray'];
+
+const generateCombinations = (sizeList: string[], colorList: string[], price: number) => {
+  const combinations: { price: number; variantId: string; Size: string; Color: string }[] = [];
+  for (const size of sizeList) {
+    for (const color of colorList) {
+      combinations.push({
+        price,
+        variantId: `${size.toLowerCase()}-${color.toLowerCase().replace(' ', '-')}`,
+        Size: size,
+        Color: color,
+      });
+    }
+  }
+  return combinations;
+};
+
+// Mock product data that matches CatalogProduct interface
+const mockProduct: CatalogProduct = {
+  id: 'classic-cotton-tshirt',
+  name: 'Classic Cotton T-Shirt',
+  slug: 'classic-cotton-tshirt',
+  price: 2999, // $29.99 in cents
+  options: {
+    attributes: {
+      Size: {
+        type: 'select',
+        affectsCombinations: true,
+        choices: sizes.map(label => ({ label })),
+      },
+      Color: {
+        type: 'swatch',
+        affectsCombinations: true,
+        choices: [
+          { label: 'Black', hex: '#1a1a1a' },
+          { label: 'White', hex: '#ffffff' },
+          { label: 'Navy', hex: '#1e3a5f' },
+          { label: 'Heather Gray', hex: '#9ca3af' },
+        ],
+      },
+    },
+    combinations: generateCombinations(sizes, colors, 2999),
+    attributesList: ['Size', 'Color'],
+  },
+  description: ['Premium quality with exceptional comfort and style.'],
+};
+
+// Product with minimal options
+const minimalProduct: CatalogProduct = {
+  id: 'simple-product',
+  name: 'Simple Product',
+  slug: 'simple-product',
+  price: 1999,
+  options: {
+    attributes: {
+      Size: {
+        type: 'select',
+        affectsCombinations: true,
+        choices: [{ label: 'One Size' }],
+      },
+      Color: {
+        type: 'swatch',
+        affectsCombinations: true,
+        choices: [{ label: 'Natural', hex: '#f5f5dc' }],
+      },
+    },
+    combinations: [{ price: 1999, variantId: 'one-size-natural' }],
+    attributesList: ['Size', 'Color'],
+  },
+};
+
+// Product with many colors
+const manyColorsSizes = ['S', 'M', 'L'];
+const manyColorsColors = ['Black', 'White', 'Navy', 'Red', 'Green', 'Purple', 'Orange', 'Pink'];
+const manyColorsProduct: CatalogProduct = {
+  id: 'colorful-product',
+  name: 'Colorful T-Shirt',
+  slug: 'colorful-product',
+  price: 2999,
+  options: {
+    attributes: {
+      Size: {
+        type: 'select',
+        affectsCombinations: true,
+        choices: manyColorsSizes.map(label => ({ label })),
+      },
+      Color: {
+        type: 'swatch',
+        affectsCombinations: true,
+        choices: [
+          { label: 'Black', hex: '#1a1a1a' },
+          { label: 'White', hex: '#ffffff' },
+          { label: 'Navy', hex: '#1e3a5f' },
+          { label: 'Red', hex: '#dc2626' },
+          { label: 'Green', hex: '#16a34a' },
+          { label: 'Purple', hex: '#9333ea' },
+          { label: 'Orange', hex: '#ea580c' },
+          { label: 'Pink', hex: '#ec4899' },
+        ],
+      },
+    },
+    combinations: generateCombinations(manyColorsSizes, manyColorsColors, 2999),
+    attributesList: ['Size', 'Color'],
+  },
+};
+
+interface PDPInfoPanelProps {
+  product: CatalogProduct;
+  tag?: string;
+  rating?: number;
+  reviewCount?: number;
+  originalPrice?: string;
+  showArtworkCustomizer?: boolean;
+  onAddToCart?: (cartDetail: any) => void;
+  className?: string;
+}
+
+const PDPInfoPanel = ({
+  product,
+  tag,
+  rating = 4.2,
+  reviewCount = 143,
+  originalPrice,
+  showArtworkCustomizer = false,
+  onAddToCart,
+  className,
+}: PDPInfoPanelProps) => {
+  const [isFavorite, setIsFavorite] = React.useState(false);
+
+  // Format price from cents
+  const formatPrice = (cents: number) => `$${(cents / 100).toFixed(2)}`;
+
+  return (
+    <Product productData={product} initialSelection={{ Size: 'M', Color: product.options?.attributes?.Color?.choices?.[0]?.label || 'Black' }}>
+      <div
+        className={`bg-background/85 backdrop-blur-sm rounded-3xl p-6 shadow-lg max-h-[calc(100vh-11rem)] overflow-y-auto ${className || ''}`}
+      >
+        <div className="flex flex-col gap-6">
+          {/* Tag, Product Name and Price */}
+          <div className="flex flex-col gap-3">
+            {/* Tag */}
+            {tag && (
+              <span className="text-sm font-medium text-primary">{tag}</span>
+            )}
+
+            {/* Name and Price */}
+            <div className="flex items-end justify-between gap-4">
+              <h1 className="text-2xl font-bold text-foreground leading-tight">{product.name}</h1>
+              <div className="flex items-baseline gap-2 shrink-0">
+                <span className="text-lg font-semibold text-foreground">
+                  {formatPrice(product.price)}
+                </span>
+                {originalPrice && (
+                  <span className="text-sm text-muted-foreground line-through">
+                    {originalPrice}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Rating and Favorite */}
+            <div className="flex items-center justify-start gap-2">
+              <button
+                onClick={() => setIsFavorite(!isFavorite)}
+                className="w-10 h-10 bg-foreground/5 rounded-full flex items-center justify-center hover:bg-foreground/10 transition-colors"
+              >
+                <Icon
+                  icon={isFavorite ? 'gravity-ui:heart-fill' : 'gravity-ui:heart'}
+                  className={`w-5 h-5 ${isFavorite ? 'text-red-500' : 'text-muted-foreground/60'}`}
+                />
+              </button>
+              <div className="h-10 bg-foreground/5 rounded-full px-3 flex items-center gap-1 text-sm font-caption text-muted-foreground">
+                <Icon
+                  icon="gravity-ui:star"
+                  className="w-4 h-4 text-muted-foreground"
+                />
+                <span className="text-sm font-medium">{rating}</span>
+                <span className="text-sm">({reviewCount})</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Artwork Customizer Placeholder */}
+          {showArtworkCustomizer && (
+            <div className="flex flex-col gap-4">
+              <div className="aspect-square bg-muted rounded-2xl flex items-center justify-center border-2 border-dashed border-border">
+                <div className="text-center text-muted-foreground">
+                  <Icon icon="gravity-ui:picture" className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                  <p className="text-sm">Artwork Customizer</p>
+                  <p className="text-xs opacity-70">Drag to position artwork</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Product Options - REAL COMPONENT */}
+          <ProductOptions />
+
+          {/* Add to Cart - REAL COMPONENT */}
+          <AddToCart onClick={onAddToCart} />
+
+          {/* Product Details Accordion */}
+          <Accordion type="single" collapsible className="w-full [&>*]:border-0">
+            <AccordionItem value="description">
+              <AccordionTrigger className="text-left text-lg font-bold text-foreground hover:no-underline">
+                Description
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="text-base font-caption text-muted-foreground leading-relaxed">
+                  {product.description?.[0] || 'Premium quality with exceptional comfort and style.'}
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="materials">
+              <AccordionTrigger className="text-left text-lg font-bold text-foreground hover:no-underline">
+                Materials
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="text-base font-caption text-muted-foreground leading-relaxed">
+                  100% organic cotton with sustainable manufacturing process.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="care">
+              <AccordionTrigger className="text-left text-lg font-bold text-foreground hover:no-underline">
+                Care Instructions
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="text-base font-caption text-muted-foreground leading-relaxed">
+                  Machine wash cold, tumble dry low. Do not bleach.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="shipping">
+              <AccordionTrigger className="text-left text-lg font-bold text-foreground hover:no-underline">
+                Shipping & Returns
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="text-base font-caption text-muted-foreground leading-relaxed">
+                  Free shipping on orders over $50. 30-day return policy.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+    </Product>
+  );
+};
+
+const meta: Meta<typeof PDPInfoPanel> = {
+  title: 'Layouts/PDP Info Panel',
+  component: PDPInfoPanel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The PDP Info Panel uses **real ProductOptions and AddToCart components** with Product context.
+
+## Structure
+
+1. **Header Section**: Product name, price, and discount
+2. **Social Actions**: Favorite button and rating display
+3. **Artwork Customizer** (optional): For print-on-demand products
+4. **Product Options**: Real \`<ProductOptions />\` component with context
+5. **Add to Cart**: Real \`<AddToCart />\` component with validation
+6. **Details Accordion**: Description, materials, care, shipping
+
+## Usage
+
+\`\`\`tsx
+<Product productData={productData}>
+  <div className="bg-background/85 backdrop-blur-sm rounded-3xl p-6">
+    {/* Product Name + Price */}
+    {/* Rating + Favorite */}
+    <ProductOptions />
+    <AddToCart onClick={(detail) => console.log(detail)} />
+    {/* Accordion */}
+  </div>
+</Product>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tag: {
+      control: 'text',
+      description: 'Product tag/badge (e.g., "Upgraded", "New", "Sale")',
+    },
+    showArtworkCustomizer: {
+      control: 'boolean',
+      description: 'Show artwork customizer placeholder',
+    },
+    rating: {
+      control: { type: 'number', min: 0, max: 5, step: 0.1 },
+      description: 'Product rating (0-5)',
+    },
+    reviewCount: {
+      control: 'number',
+      description: 'Number of reviews',
+    },
+    originalPrice: {
+      control: 'text',
+      description: 'Original price (for showing discount)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    product: mockProduct,
+    tag: 'Upgraded',
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+export const WithArtworkCustomizer: Story = {
+  args: {
+    product: mockProduct,
+    showArtworkCustomizer: true,
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+export const OnSale: Story = {
+  args: {
+    product: mockProduct,
+    originalPrice: '$39.99',
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+export const HighlyRated: Story = {
+  args: {
+    product: mockProduct,
+    rating: 4.9,
+    reviewCount: 2847,
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+export const MinimalOptions: Story = {
+  args: {
+    product: minimalProduct,
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+export const ManyColors: Story = {
+  args: {
+    product: manyColorsProduct,
+  },
+  render: (args) => (
+    <div className="w-[380px]">
+      <PDPInfoPanel {...args} />
+    </div>
+  ),
+};
+
+// Full panel in context (simulating desktop layout with overlapping panel)
+const demoMockups = [
+  { id: 'front', label: 'Front' },
+  { id: 'back', label: 'Back' },
+  { id: 'detail', label: 'Detail' },
+];
+
+export const InContext: Story = {
+  args: {
+    product: mockProduct,
+    tag: 'Upgraded',
+    showArtworkCustomizer: true,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => (
+    <div className="min-h-screen bg-background relative">
+      {/* Full-width Hero Images - content centered in visible area (left of panel) */}
+      <div className="w-full">
+        {demoMockups.map((mockup) => (
+          <div
+            key={mockup.id}
+            className="relative w-full"
+            style={{ height: '70vh' }}
+          >
+            <div className="w-full h-full bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center">
+              {/* Content offset to left to center in visible area */}
+              <div
+                className="text-center text-muted-foreground"
+                style={{ marginRight: '30%' }}
+              >
+                <Icon
+                  icon="gravity-ui:t-shirt"
+                  className="w-32 h-32 mx-auto mb-4 opacity-20"
+                />
+                <p className="text-xl font-medium opacity-60">{mockup.label} View</p>
+                <p className="text-sm opacity-40">Product mockup</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Overlapping Info Panel - fixed on right side */}
+      <div
+        className="hidden md:block fixed right-8 top-8 w-[30%] xl:w-[35%] max-w-96 z-10"
+        style={{ maxHeight: 'calc(100vh - 4rem)' }}
+      >
+        <PDPInfoPanel {...args} />
+      </div>
+    </div>
+  ),
+};