# Create Hydrogen project
npm create @shopify/hydrogen@latest my-hydrogen-store
cd my-hydrogen-store

# Install Weaverse integration
npm install @weaverse/hydrogen

// ProductCard.tsx - Built for both code and visual editing
import { forwardRef } from 'react'
import { Image } from '@shopify/hydrogen'
import type { Product } from '@shopify/hydrogen/storefront-api-types'

interface ProductCardProps {
  product: Product
  showQuickView?: boolean
  imageAspectRatio?: 'square' | 'portrait' | 'landscape'
  showVendor?: boolean
}

export let ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(
  ({ product, showQuickView = false, imageAspectRatio = 'square', showVendor = false }, ref) => {
    return (
      <div ref={ref} className="product-card group">
        <div className="relative overflow-hidden">
          <Image
            data={product.featuredImage}
            aspectRatio={imageAspectRatio}
            className="w-full h-full object-cover transition-transform group-hover:scale-105"
          />
          {showQuickView && (
            <button className="absolute inset-x-4 bottom-4 bg-black text-white py-2 rounded opacity-0 group-hover:opacity-100 transition-opacity">
              Quick View
            </button>
          )}
        </div>
        <div className="mt-4">
          {showVendor && (
            <p className="text-sm text-gray-600">{product.vendor}</p>
          )}
          <h3 className="font-medium">{product.title}</h3>
          <p className="text-lg font-semibold">
            {product.priceRange.minVariantPrice.amount}
          </p>
        </div>
      </div>
    )
  }
)

// Weaverse Schema - Makes component visually editable
import { createSchema } from '@weaverse/hydrogen'

export let schema = createSchema({
  type: 'product-card',
  title: 'Product Card',
  settings: [
    {
      group: 'Product Display',
      inputs: [
        {
          type: 'product',
          name: 'product',
          label: 'Product',
        },
        {
          type: 'toggle',
          name: 'showQuickView',
          label: 'Show Quick View',
          defaultValue: false,
        },
        {
          type: 'select',
          name: 'imageAspectRatio',
          label: 'Image Aspect Ratio',
          options: [
            { value: 'square', label: 'Square (1:1)' },
            { value: 'portrait', label: 'Portrait (3:4)' },
            { value: 'landscape', label: 'Landscape (4:3)' },
          ],
          defaultValue: 'square',
        },
        {
          type: 'toggle',
          name: 'showVendor',
          label: 'Show Vendor',
          defaultValue: false,
        },
      ],
    },
  ],
})

// ShoppingCartProvider.tsx - Stateful component with visual settings
import { createContext, useContext, useState } from 'react'
import { createSchema } from '@weaverse/hydrogen'

interface CartSettings {
  showMiniCart: boolean
  cartSlideDirection: 'left' | 'right'
  enableQuickAdd: boolean
  maxQuantityPerItem: number
}

export function ShoppingCartProvider({
  children,
  showMiniCart = true,
  cartSlideDirection = 'right',
  enableQuickAdd = false,
  maxQuantityPerItem = 10
}: CartSettings & { children: React.ReactNode }) {
  let [isOpen, setIsOpen] = useState(false)
  let [items, setItems] = useState([])

  // Complex cart logic here...

  return (
    <CartContext.Provider value={{
      isOpen, setIsOpen, items,
      showMiniCart, cartSlideDirection,
      enableQuickAdd, maxQuantityPerItem
    }}>
      {children}
    </CartContext.Provider>
  )
}

export let schema = createSchema({
  type: 'cart-provider',
  title: 'Shopping Cart Settings',
  settings: [
    {
      group: 'Cart Behavior',
      inputs: [
        {
          type: 'toggle',
          name: 'showMiniCart',
          label: 'Show Mini Cart',
          defaultValue: true,
        },
        {
          type: 'select',
          name: 'cartSlideDirection',
          label: 'Cart Slide Direction',
          options: [
            { value: 'left', label: 'Slide from Left' },
            { value: 'right', label: 'Slide from Right' },
          ],
          defaultValue: 'right',
        },
        {
          type: 'toggle',
          name: 'enableQuickAdd',
          label: 'Enable Quick Add to Cart',
          defaultValue: false,
        },
        {
          type: 'range',
          name: 'maxQuantityPerItem',
          label: 'Max Quantity per Item',
          min: 1,
          max: 50,
          step: 1,
          defaultValue: 10,
        },
      ],
    },
  ],
})

// Advanced: Generate Weaverse schemas based on product types
export function generateProductSchema(productType: string) {
  let baseSchema = {
    type: `product-${productType.toLowerCase()}`,
    title: `${productType} Product Display`,
    settings: [
      // Base product settings
    ]
  }
  
  // Add type-specific settings
  if (productType === 'Apparel') {
    baseSchema.settings.push({
      group: 'Size Guide',
      inputs: [
        { type: 'toggle', name: 'showSizeGuide', label: 'Show Size Guide' },
        { type: 'url', name: 'sizeGuideUrl', label: 'Size Guide URL' }
      ]
    })
  }
  
  return createSchema(baseSchema)
}

# Quick start with Weaverse
npx @weaverse/cli create my-hydrogen-store
cd my-hydrogen-store
npm run dev