@snowcone-app/ui 0.1.42 → 0.2.0

package/src/composed/ProductOptions.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import React, { useCallback } from "react";
+import { useProduct } from "../patterns/Product";
+import {
+  prepareOptionRenderData,
+  handleOptionChange,
+  resolveBestCombination,
+} from "@snowcone-app/sdk";
+import { Button } from "../primitives/Button";
+
+/**
+ * ProductOptions - Product variant selector with theme-aware styling
+ *
+ * ⚠️ **IMPORTANT: Must be used within a `<Product>` context provider!**
+ *
+ * A composed component that renders interactive UI for selecting product variants
+ * (size, color, material, etc.). Uses inline implementations with custom theme-aware
+ * styling for maximum control and visual quality.
+ *
+ * **Context Requirements:**
+ * - Reads product options, combinations, and current selection from Product context
+ * - Automatically updates context when user selects options
+ * - Returns `null` if product has no options
+ *
+ * Features:
+ * - Theme-aware borders using CSS variables
+ * - Custom color swatches with subtle borders (ring-border/30)
+ * - Smooth hover transitions and opacity states
+ * - Size buttons with proper spacing and rounded corners
+ * - Theme-controlled internal spacing via CSS variables
+ * - Inline implementations for full style control (no primitives)
+ *
+ * Spacing:
+ * - Internal spacing controlled by CSS variables:
+ *   - `--spacing-option-groups` (default: 1rem) - gap between option groups
+ *   - `--spacing-option-items` (default: 0.5rem) - gap between label and choices
+ * - External spacing should be controlled by parent container
+ *
+ * @example
+ * ```tsx
+ * // ✅ CORRECT - Basic usage within Product context
+ * <Product productId="shirt-123">
+ *   <ProductOptions />
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // ✅ CORRECT - Recommended layout with proper spacing
+ * <Product productId="shirt-123">
+ *   <div className="flex flex-col gap-6">
+ *     <ProductImage />
+ *     <ProductOptions />
+ *     <ProductPrice />
+ *     <AddToCart />
+ *   </div>
+ * </Product>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // ❌ WRONG - Missing Product context (will throw error!)
+ * <ProductOptions />  // ❌ useProduct() will throw!
+ * ```
+ *
+ * @example
+ * ```css
+ * // Customize internal spacing via CSS
+ * :root {
+ *   --spacing-option-groups: 1.5rem;  // Increase spacing between Size and Color
+ *   --spacing-option-items: 0.75rem;  // Increase spacing between label and buttons
+ * }
+ * ```
+ */
+export function ProductOptions({ className }: { className?: string }) {
+  const context = useProduct();
+  const { optionAttributes, combinations, selection, updateSelection } =
+    context;
+
+  if (!optionAttributes || Object.keys(optionAttributes).length === 0) {
+    return null;
+  }
+
+  const optionRenderData = prepareOptionRenderData(
+    optionAttributes,
+    selection || {},
+    combinations || []
+  );
+
+  // Memoized handler to prevent unnecessary re-renders of child components
+  const handleChange = useCallback(
+    (attributeName: string, value: string) => {
+      const nextSelection = handleOptionChange(
+        attributeName,
+        value,
+        selection || {},
+        optionAttributes
+      );
+      const best = resolveBestCombination(
+        nextSelection,
+        optionAttributes,
+        combinations || []
+      );
+
+      if (updateSelection) {
+        updateSelection(nextSelection);
+      }
+    },
+    [selection, optionAttributes, combinations, updateSelection]
+  );
+
+  return (
+    <div
+      className={`flex flex-col ${className || ""}`}
+      style={{ gap: 'var(--spacing-option-groups, 1rem)' }}
+    >
+      {optionRenderData.map((optionData) => (
+        <div
+          key={optionData.key}
+          className="flex flex-col"
+          style={{ gap: 'var(--spacing-option-items, 0.5rem)' }}
+        >
+          <label className="flex items-center gap-3 text-base font-label">
+            {optionData.label}
+            {optionData.value && optionData.type === "swatch" && (
+              <span className="text-base font-caption ml-1 text-primary">
+                {optionData.value}
+              </span>
+            )}
+          </label>
+          <OptionGroup
+            optionData={optionData}
+            onChange={(value) => handleChange(optionData.key, value)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Internal component that renders different UI types based on option data
+function OptionGroup({
+  optionData,
+  onChange,
+}: {
+  optionData: any;
+  onChange: (value: string) => void;
+}) {
+  switch (optionData.type) {
+    case "color-picker":
+      return <ColorPicker optionData={optionData} onChange={onChange} />;
+
+    case "swatch":
+      return <ColorSwatches optionData={optionData} onChange={onChange} />;
+
+    case "select":
+    default:
+      // Always use buttons, never dropdowns
+      return <OptionButtons optionData={optionData} onChange={onChange} />;
+  }
+}
+
+// Color picker with rainbow gradient border
+function ColorPicker({
+  optionData,
+  onChange,
+}: {
+  optionData: any;
+  onChange: (value: string) => void;
+}) {
+  const inputId = `color-picker-${optionData.key}`;
+
+  return (
+    <div className="flex items-center gap-3">
+      <label
+        htmlFor={inputId}
+        aria-label={`Select color for ${optionData.label}`}
+        className="relative h-12 w-12 cursor-pointer rounded-full"
+        style={{
+          background: `conic-gradient(from 0deg,
+            hsl(0, 100%, 50%),
+            hsl(30, 100%, 50%),
+            hsl(60, 100%, 50%),
+            hsl(90, 100%, 50%),
+            hsl(120, 100%, 50%),
+            hsl(150, 100%, 50%),
+            hsl(180, 100%, 50%),
+            hsl(210, 100%, 50%),
+            hsl(240, 100%, 50%),
+            hsl(270, 100%, 50%),
+            hsl(300, 100%, 50%),
+            hsl(330, 100%, 50%),
+            hsl(360, 100%, 50%))`,
+          padding: "3px",
+        }}
+      >
+        <input
+          id={inputId}
+          type="color"
+          value={optionData.value || "#000000"}
+          onChange={(e) => onChange(e.target.value)}
+          className="sr-only"
+        />
+        <div
+          className="w-full h-full rounded-full border-2 border-background"
+          style={{ backgroundColor: optionData.value || "#000000" }}
+        />
+      </label>
+      <div className="text-base font-caption text-muted-foreground ml-1">
+        {optionData.label}
+      </div>
+    </div>
+  );
+}
+
+// Color swatches using Button primitive with option-swatch variant
+function ColorSwatches({
+  optionData,
+  onChange,
+}: {
+  optionData: any;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {optionData.choices.map((choice: any) => (
+        <Button
+          key={choice.value}
+          variant="option-swatch"
+          size="none"
+          selected={choice.selected}
+          disabled={choice.disabled}
+          onClick={() => onChange(choice.value)}
+          aria-label={choice.label}
+          aria-pressed={choice.selected}
+          role="radio"
+          aria-checked={choice.selected}
+          title={choice.label}
+        >
+          <span
+            className={`absolute ${
+              choice.selected
+                ? "inset-[3px]"
+                : "inset-0"
+            } rounded-full block bg-cover bg-center`}
+            style={{
+              backgroundColor: choice.hex || "var(--color-border, #ccc)",
+              backgroundImage: choice.imageUrl
+                ? `url(${choice.imageUrl})`
+                : undefined,
+            }}
+          />
+          {choice.disabled && (
+            <>
+              {/* Diagonal X lines using foreground color */}
+              <span
+                className="absolute inset-0 rounded-full pointer-events-none opacity-80"
+                style={{
+                  background: `linear-gradient(45deg, transparent calc(50% - 1.5px), var(--color-foreground) calc(50% - 1.5px), var(--color-foreground) calc(50% + 1.5px), transparent calc(50% + 1.5px))`,
+                }}
+              />
+              <span
+                className="absolute inset-0 rounded-full pointer-events-none opacity-80"
+                style={{
+                  background: `linear-gradient(-45deg, transparent calc(50% - 1.5px), var(--color-foreground) calc(50% - 1.5px), var(--color-foreground) calc(50% + 1.5px), transparent calc(50% + 1.5px))`,
+                }}
+              />
+              {/* Semi-transparent overlay to dim the color - uses background for contrast */}
+              <span className="absolute inset-0 rounded-full pointer-events-none bg-background opacity-40" />
+            </>
+          )}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+// Option buttons using Button primitive with option-text variant
+function OptionButtons({
+  optionData,
+  onChange,
+}: {
+  optionData: any;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {optionData.choices.map((choice: any) => (
+        <Button
+          key={choice.value}
+          variant="option-text"
+          selected={choice.selected}
+          disabled={choice.disabled}
+          onClick={() => onChange(choice.value)}
+          aria-pressed={choice.selected}
+          role="radio"
+          aria-checked={choice.selected}
+        >
+          {choice.label}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/src/composed/RealtimeMockup.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useRealtimeMockup } from '@snowcone-app/sdk/react';
+import type { WebSocketConfig } from '@snowcone-app/sdk';
+
+export interface RealtimeMockupProps {
+  config: WebSocketConfig;
+  onMockupRendered?: (mockupUrl: string) => void;
+  className?: string;
+  showStatus?: boolean;
+  showLogs?: boolean;
+  autoConnect?: boolean;
+}
+
+export const RealtimeMockup: React.FC<RealtimeMockupProps> = ({
+  config,
+  onMockupRendered,
+  className = '',
+  showStatus = false,
+  showLogs = false,
+  autoConnect = true
+}) => {
+  const [currentMockupUrl, setCurrentMockupUrl] = useState<string>('');
+  const configSentRef = useRef(false);
+
+  const {
+    isConnected,
+    sessionId,
+    isConfigured,
+    mockupResults,
+    status,
+    logs,
+    connect,
+    disconnect,
+    sendConfig,
+    clearLogs,
+    clearMockups
+  } = useRealtimeMockup({
+    onMockupRendered: (result) => {
+      setCurrentMockupUrl(result.imageUrl);
+      onMockupRendered?.(result.imageUrl);
+    }
+  });
+
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+    return () => disconnect();
+  }, [autoConnect]);
+
+  useEffect(() => {
+    if (isConnected && sessionId && !configSentRef.current) {
+      sendConfig(config);
+      configSentRef.current = true;
+    }
+  }, [isConnected, sessionId, config]);
+
+  useEffect(() => {
+    configSentRef.current = false;
+  }, [config.variantId]);
+
+  return (
+    <div className={`realtime-mockup ${className || ""}`}>
+      {currentMockupUrl && (
+        <div className="mockup-display">
+          <img
+            src={currentMockupUrl}
+            alt="Product mockup"
+            crossOrigin="anonymous"
+            style={{ maxWidth: '100%', height: 'auto' }}
+          />
+        </div>
+      )}
+
+      {showStatus && (
+        <div className="status-display">
+          <p>Status: {status}</p>
+          {sessionId && <p>Session: {sessionId}</p>}
+          <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
+          <p>Configured: {isConfigured ? 'Yes' : 'No'}</p>
+          <p>Mockups rendered: {mockupResults.length}</p>
+        </div>
+      )}
+
+      {showLogs && (
+        <div className="logs-display">
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <h4>Logs</h4>
+            <button onClick={clearLogs}>Clear</button>
+          </div>
+          <div style={{ 
+            maxHeight: '200px', 
+            overflowY: 'auto', 
+            fontSize: '12px',
+            fontFamily: 'monospace',
+            backgroundColor: 'var(--color-muted, #f5f5f5)',
+            padding: '8px',
+            borderRadius: '4px'
+          }}>
+            {logs.map((log, index) => (
+              <div key={index}>{log}</div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!autoConnect && (
+        <div className="controls">
+          {!isConnected ? (
+            <button onClick={connect}>Connect</button>
+          ) : (
+            <button onClick={disconnect}>Disconnect</button>
+          )}
+          <button onClick={clearMockups}>Clear Mockups</button>
+        </div>
+      )}
+    </div>
+  );
+};