@snowcone-app/ui 0.1.42 → 0.2.0

package/src/design-system/ThemeSwitcher.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+'use client';
+
+/**
+ * ThemeSwitcher - Dropdown to switch between preset themes
+ *
+ * Works standalone without any context - applies themes directly to the DOM.
+ * Also watches for data-theme attribute changes in case theme is applied after mount.
+ */
+
+import { useState, useEffect } from 'react';
+import { baseThemes, findTheme, findThemeById, getThemeVariant, applyTheme, getBaseThemeName } from '../themes';
+import type { ThemeConfig } from '../themes';
+
+interface ThemeSwitcherProps {
+  className?: string;
+  /** Show only base themes (not dark variants separately) */
+  showBaseThemesOnly?: boolean;
+}
+
+/**
+ * Read current theme from DOM
+ */
+function readThemeFromDOM(): { themeName: string; isDark: boolean } {
+  if (typeof document === 'undefined') {
+    return { themeName: 'Linear', isDark: false };
+  }
+
+  const root = document.documentElement;
+  const themeId = root.getAttribute('data-theme');
+  const dark = root.classList.contains('dark');
+
+  if (themeId) {
+    const theme = findThemeById(themeId);
+    if (theme) {
+      const baseName = getBaseThemeName(theme);
+      return { themeName: baseName, isDark: theme.isDark || dark };
+    }
+  }
+
+  return { themeName: 'Linear', isDark: dark };
+}
+
+export function ThemeSwitcher({ className = '', showBaseThemesOnly = true }: ThemeSwitcherProps) {
+  const [currentTheme, setCurrentTheme] = useState<string>('Linear');
+  const [isDark, setIsDark] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Initialize and watch for data-theme attribute changes
+  useEffect(() => {
+    // Read initial theme
+    const { themeName, isDark: dark } = readThemeFromDOM();
+    setCurrentTheme(themeName);
+    setIsDark(dark);
+
+    // Watch for attribute changes (theme may be applied after mount by ThemeProvider)
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' &&
+            (mutation.attributeName === 'data-theme' || mutation.attributeName === 'class')) {
+          const { themeName: newName, isDark: newDark } = readThemeFromDOM();
+          setCurrentTheme(newName);
+          setIsDark(newDark);
+          break;
+        }
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'class'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleThemeSelect = (themeName: string) => {
+    // Find the base theme
+    const theme = findTheme(themeName);
+    if (!theme) return;
+
+    // Get the appropriate variant based on current dark mode
+    const targetTheme = getThemeVariant(theme, isDark);
+
+    const config: ThemeConfig = { name: targetTheme.name };
+    applyTheme(config);
+    setCurrentTheme(themeName);
+    setIsOpen(false);
+  };
+
+  const handleDarkModeToggle = () => {
+    const newIsDark = !isDark;
+    setIsDark(newIsDark);
+
+    // Find the current base theme
+    const theme = findTheme(currentTheme);
+    if (!theme) return;
+
+    // Get the target variant (light or dark)
+    const targetTheme = getThemeVariant(theme, newIsDark);
+
+    const config: ThemeConfig = { name: targetTheme.name };
+    applyTheme(config);
+  };
+
+  const themes = showBaseThemesOnly ? baseThemes : baseThemes;
+
+  return (
+    <div className={`flex items-center gap-3 ${className}`}>
+      {/* Theme Dropdown */}
+      <div className="relative">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+          </svg>
+          <span className="font-medium">{currentTheme}</span>
+          <svg className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        {isOpen && (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 z-40"
+              onClick={() => setIsOpen(false)}
+            />
+
+            {/* Dropdown */}
+            <div className="absolute top-full left-0 mt-2 w-56 max-h-80 overflow-auto bg-card border border-border rounded-lg shadow-lg z-50">
+              {themes.map((theme) => (
+                <button
+                  key={theme.name}
+                  onClick={() => handleThemeSelect(theme.name)}
+                  className={`w-full px-4 py-2 text-left hover:bg-muted transition-colors flex items-center gap-3 ${
+                    currentTheme === theme.name ? 'bg-muted' : ''
+                  }`}
+                >
+                  <div
+                    className="w-4 h-4 rounded-full border border-border"
+                    style={{ backgroundColor: theme.primaryColor || '#888' }}
+                  />
+                  <span className="text-foreground">{theme.name}</span>
+                  {currentTheme === theme.name && (
+                    <svg className="w-4 h-4 ml-auto text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Dark Mode Toggle */}
+      <button
+        onClick={handleDarkModeToggle}
+        className="flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground"
+        title={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+      >
+        {isDark ? (
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <circle cx="12" cy="12" r="5" />
+            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+          </svg>
+        ) : (
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        )}
+        <span className="text-sm">{isDark ? 'Light' : 'Dark'}</span>
+      </button>
+    </div>
+  );
+}

package/src/design-system/TypographyScale.tsx

@@ -0,0 +1,106 @@
+/**
+ * TypographyScale - Displays font families and type scale
+ */
+
+const FONT_SAMPLES = [
+  {
+    name: 'Heading',
+    cssVar: '--font-heading',
+    sample: 'The quick brown fox jumps over the lazy dog',
+    sizes: ['text-4xl', 'text-3xl', 'text-2xl', 'text-xl'],
+  },
+  {
+    name: 'Body',
+    cssVar: '--font-body',
+    sample: 'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.',
+    sizes: ['text-lg', 'text-base', 'text-sm'],
+  },
+  {
+    name: 'Label',
+    cssVar: '--font-label',
+    sample: 'CATEGORY · PRODUCT NAME · $99.00',
+    sizes: ['text-sm', 'text-xs'],
+  },
+  {
+    name: 'Button',
+    cssVar: '--font-button',
+    sample: 'Add to Cart · Buy Now · Learn More',
+    sizes: ['text-base', 'text-sm'],
+  },
+  {
+    name: 'Caption',
+    cssVar: '--font-caption',
+    sample: 'Image caption · Timestamp · Fine print',
+    sizes: ['text-sm', 'text-xs'],
+  },
+];
+
+interface TypographyScaleProps {
+  className?: string;
+}
+
+export function TypographyScale({ className = '' }: TypographyScaleProps) {
+  return (
+    <div className={`space-y-8 ${className}`}>
+      {FONT_SAMPLES.map((font) => (
+        <section key={font.name} className="bg-card rounded-lg border border-border p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-foreground">{font.name}</h3>
+            <code className="text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded">
+              {font.cssVar}
+            </code>
+          </div>
+
+          <div className="space-y-4">
+            {font.sizes.map((size) => (
+              <div key={size} className="flex items-baseline gap-4">
+                <span className="text-xs text-muted-foreground w-20 flex-shrink-0">
+                  {size}
+                </span>
+                <p
+                  className={`${size} text-foreground`}
+                  style={{ fontFamily: `var(${font.cssVar})` }}
+                >
+                  {font.sample}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+const RADIUS_SAMPLES = [
+  { name: 'None', value: '0px' },
+  { name: 'Small', cssVar: '--radius-small' },
+  { name: 'Medium', cssVar: '--radius-medium' },
+  { name: 'Large', cssVar: '--radius-large' },
+  { name: 'Full', value: '9999px' },
+];
+
+export function RadiusScale({ className = '' }: { className?: string }) {
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="grid grid-cols-5 gap-4">
+        {RADIUS_SAMPLES.map((radius) => (
+          <div key={radius.name} className="flex flex-col items-center gap-2">
+            <div
+              className="h-16 w-16 bg-primary"
+              style={{
+                borderRadius: radius.cssVar
+                  ? `var(${radius.cssVar})`
+                  : radius.value,
+              }}
+            />
+            <span className="text-sm font-medium text-foreground">{radius.name}</span>
+            <code className="text-xs text-muted-foreground font-mono">
+              {radius.cssVar || radius.value}
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/design-system/index.ts

@@ -0,0 +1,5 @@
+export { DesignSystemPage } from './DesignSystemPage';
+export { ColorPalette } from './ColorPalette';
+export { ColorTokenSwatch, ColorRow } from './ColorSwatch';
+export { TypographyScale, RadiusScale } from './TypographyScale';
+export { ThemeSwitcher } from './ThemeSwitcher';

package/src/ecommerce/stories/HeroProductImage.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { HeroProductImage } from '../../composed/HeroProductImage';
+
+const meta: Meta<typeof HeroProductImage> = {
+  title: 'Layouts/Hero Product Image',
+  component: HeroProductImage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof HeroProductImage>;
+
+// Mock product data
+const mockProduct = {
+  id: "test-product",
+  placements: [
+    { label: "Front", type: "image", width: 1000, height: 1000 }
+  ]
+};
+
+export const Default: Story = {
+  args: {
+    width: 600,
+    className: "w-[600px] h-[600px] bg-gray-50",
+    artwork: {
+      type: "regular",
+      src: "https://placehold.co/600x600/png?text=Artwork"
+    },
+    product: mockProduct,
+    placement: "Front",
+    mockupId: "mockup-1",
+    variantId: "default",
+  },
+  render: (args) => (
+    <div className="w-[600px] h-[600px] border border-gray-200 rounded-lg overflow-hidden">
+        <HeroProductImage {...args} />
+    </div>
+  )
+};
+
+export const Loading: Story = {
+  args: {
+    width: 600,
+    className: "w-[600px] h-[600px] bg-gray-50",
+    artwork: {
+      type: "regular",
+      src: "https://placehold.co/600x600/png?text=Artwork"
+    },
+    product: mockProduct,
+    placement: "Front",
+    mockupId: "mockup-1",
+    variantId: "default",
+  },
+  render: (args) => (
+    <div className="w-[600px] h-[600px] border border-gray-200 rounded-lg overflow-hidden">
+        {/* Simulate initial loading state by not providing enough info or forcing load state if possible */}
+        {/* Actually, the component handles loading shimmer when artwork is present but image not ready */}
+        <HeroProductImage {...args} />
+    </div>
+  )
+};
+

package/src/ecommerce/stories/PDPHeroGallery.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Icon } from '@iconify/react';
+
+/**
+ * PDPHeroGallery - Product Detail Page Hero Image Gallery
+ *
+ * The main product image area showing large mockups that stack vertically.
+ * On desktop, the info panel overlaps these images on the right side.
+ *
+ * Features:
+ * - Full-width hero images that stack vertically
+ * - Each image takes ~70vh height
+ * - Placement label in bottom left
+ * - Click to trigger zoom/lightbox
+ */
+
+// Demo mockup images
+const demoMockups = [
+  { id: 'front', label: 'Front' },
+  { id: 'back', label: 'Back' },
+  { id: 'detail', label: 'Detail' },
+];
+
+interface PDPHeroGalleryProps {
+  mockups?: { id: string; label: string }[];
+  onImageClick?: (mockupId: string) => void;
+}
+
+const PDPHeroGallery = ({
+  mockups = demoMockups,
+  onImageClick,
+}: PDPHeroGalleryProps) => {
+  return (
+    <div className="w-full">
+      {mockups.map((mockup) => (
+        <div
+          key={mockup.id}
+          className="relative w-full cursor-pointer"
+          style={{ height: '70vh' }}
+          onClick={() => onImageClick?.(mockup.id)}
+        >
+          {/* Placeholder gradient - in real usage this is HeroProductImage */}
+          <div className="w-full h-full bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center">
+            <div className="text-center text-muted-foreground">
+              <Icon
+                icon="gravity-ui:t-shirt"
+                className="w-24 h-24 mx-auto mb-4 opacity-20"
+              />
+              <p className="text-lg font-medium opacity-60">{mockup.label} View</p>
+              <p className="text-sm opacity-40">Product mockup</p>
+            </div>
+          </div>
+
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta<typeof PDPHeroGallery> = {
+  title: 'Layouts/PDP Hero Gallery',
+  component: PDPHeroGallery,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+The PDP Hero Gallery displays large product mockup images in a vertical stack.
+
+## Layout
+
+- Images are full-width and stack vertically
+- Each image is approximately 70vh tall
+- The info panel (not shown here) overlaps on the right side on desktop
+
+## Usage
+
+In the actual PDP, this is used with \`HeroProductImage\` components:
+
+\`\`\`tsx
+{heroImages.map((image) => (
+  <HeroProductImage
+    key={image.mockupId}
+    mockupId={image.mockupId}
+    placement={image.placement}
+    onClick={() => openLightbox(image)}
+  />
+))}
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onImageClick: (id) => console.log(`Clicked: ${id}`),
+  },
+};