@hanzo/commerce 6.1.13 → 6.2.1

package/components/item-selector/button.tsx

@@ -0,0 +1,175 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { 
+  Image, 
+  Label, 
+  RadioGroup, 
+  ScrollArea 
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+
+import QuantityIndicator from '../quantity-indicator'
+
+const DEFAULT_CONSTRAINT = {h: 36, w: 72} // // Apple suggest 42px for clickability
+
+const ImageRadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
+    item: LineItem,
+    constrainTo: Dimensions  
+  }
+>(({ 
+  item,
+  constrainTo,
+  className, 
+  ...props 
+}, ref) => {
+
+  const img = item.optionImg ? item.optionImg : item.img
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+        'overflow-hidden',
+        img?.rounded ? `rounded-${img.rounded}` : 'rounded-sm'
+      )}
+      {...props}
+      id={item.sku}
+      value={item.sku}
+    >
+      {img ? (
+        <Image def={img} constrainTo={constrainTo} preload className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: constrainTo.h, width: constrainTo.w}}/>
+      )}
+    </RadioGroupPrimitive.Item>
+  )
+})
+ImageRadioGroupItem.displayName = 'ImageRadioGroupItem'
+
+const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  scrollable=false,
+  mobile=false,
+  options={}
+}) => {
+
+  const imageButtons = 'imageButtons' in options ? options.imageButtons : false
+  const showFamily = 'showFamily' in options ? options.showFamily : false
+  const showPrice = 'showPrice' in options ? options.showPrice : true
+  const showQuantity = 'showQuantity' in options ? options.showQuantity : false
+  const horizButtons = 'horizButtons' in options ? options.horizButtons : false
+
+  const labelAndPrice = (item : LineItem) => (
+    (showFamily ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showPrice ? ((showFamily ? ': ' : ', ') + formatCurrencyValue(item.price)) : '')
+  )
+
+  const Item: React.FC<{ 
+    item: LineItem
+    selected: boolean
+  }> = observer(({
+    item,
+    selected
+  }) => {
+    
+    const textClx = (selected) ? 'text-accent ' : 'text-muted'
+    const cursorClx = (selected) ? 'hover:cursor-default' : 'hover:cursor-pointer' 
+    const justifyClx = (!imageButtons) ? 'justify-center ' : ''
+    const paddingClx = (imageButtons) ? (scrollable ? 'px-4' : 'px-2' ) : ''
+    let bgClx = '' 
+    let borderClx = ''
+    if (scrollable) {
+      borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
+    }
+    else if (!imageButtons) {
+      borderClx += 'border rounded-lg ' 
+      borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
+      bgClx += 'hover:bg-level-2' 
+    }
+
+    const outerClx = ['h-10 py-2 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
+
+    return (
+      <div className={cn(...outerClx, itemClx )}>
+        <ImageRadioGroupItem 
+          item={item} 
+          constrainTo={DEFAULT_CONSTRAINT} 
+          className={cn(
+            cursorClx,
+            (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
+            imageButtons ? 'mr-2' : 'hidden'
+          )}
+        />
+        <Label htmlFor={item.sku} className={cn(
+          showQuantity ? 'flex items-center' : 'block',
+          textClx, 
+          cursorClx,
+        )}>
+          <div className={showQuantity ? 'grow' : ''}>{labelAndPrice(item)}</div>
+          {showQuantity && (
+            <QuantityIndicator 
+              item={item} 
+              clx='grow-0 shrink-0 h-[20px] ml-2' 
+              iconClx={selected ? 'fill-foreground' : 'fill-muted'}
+              digitClx='font-semibold text-primary-fg leading-none font-sans text-xxs' 
+            />
+          )}
+        </Label>
+      </div>
+    )
+  })
+ 
+  return items.length > 1 ? (
+    <RadioGroup
+      className={cn('flex', 
+        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
+        (horizButtons ? 'flex-row gap-0' : 'flex-col'),
+        (mobile && !imageButtons) ? 'min-w-pr-50' : '',
+        clx,
+      )}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+    >
+    {scrollable ? (
+      <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2' data-vaul-no-drag>
+      {items.map((item) => (
+        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
+      ))}
+      </ScrollArea>
+    ) : (<>
+      {items.map((item) => (
+        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
+      ))}
+    </>)}
+    </RadioGroup>
+  ) : (
+    <div className={cn(showQuantity ? 'flex items-center' : 'block', soleItemClx )}>
+      <div className={showQuantity ? 'grow' : ''}>
+        {labelAndPrice(items[0])}
+      </div>
+        {showQuantity && (
+          <QuantityIndicator item={items[0]} clx='grow-0 shrink-0 font-semibold text-sm leading-none px-2' />
+        )}
+    </div>
+  )
+})
+
+export default ButtonItemSelector

package/components/item-selector/carousel.tsx

@@ -0,0 +1,162 @@
+'use client'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import {
+  type CarouselOptions,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  ApplyTypography,
+  MediaStack
+} from '@hanzo/ui/primitives'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+
+import QuantityIndicator from '../quantity-indicator'
+
+const DEFAULT_CONSTRAINT = {w: 250, h: 250}
+
+interface CarouselItemSelectorPropsExt {
+  constrainTo: Dimensions
+  options?: CarouselOptions 
+    /** Do not show Family and / or Item title and Price */
+  imageOnly?: boolean
+}
+
+const ItemSlide: React.FC<{
+  item: LineItem,
+  constrainTo: Dimensions
+  imageOnly: boolean
+  showFamily: boolean
+  showPrice: boolean
+  showQuantity: boolean
+  clx?: string
+}> = ({
+  item,
+  constrainTo,
+  showFamily,
+  imageOnly,
+  showPrice,
+  showQuantity,
+  clx=''
+}) => {
+
+  return (
+    <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
+      {!imageOnly && (
+        <ApplyTypography className='flex flex-col items-center !gap-2 [&>*]:!m-0'>
+          {showFamily && (<h4>{item.familyTitle}</h4>)}
+          <h6>{item.optionLabel}</h6>
+          {item.byline && (<p>{item.byline}</p>)}
+        </ApplyTypography>
+      )}
+      <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
+      {!imageOnly && (showPrice || showQuantity) && (
+        <ApplyTypography className='flex flex-row items-center !gap-2 [&>*]:!m-0'>
+          {showPrice && (<p>{formatCurrencyValue(item.price)}</p>)}
+          {showQuantity && (
+            <QuantityIndicator 
+              item={item} 
+              clx='h-[26px] ml-1' 
+              iconClx='fill-foreground'
+              digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
+            />
+          )}
+        </ApplyTypography>
+      )}
+    </CarouselItem>
+  ) 
+}
+
+const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
+  items,
+  selectSku,
+  selectedItemRef: itemRef,
+  scrollable, // ignored
+  clx='',
+  itemClx='',
+  options={},
+  ext={
+    options: {loop: true},
+    constrainTo: DEFAULT_CONSTRAINT,
+    imageOnly: false 
+  } satisfies CarouselItemSelectorPropsExt
+}) => {
+
+  const showFamily = 'showFamily' in options ? options.showFamily! : false
+  const showPrice = 'showPrice' in options ? options.showPrice! : true
+  const showQuantity = 'showQuantity' in options ? options.showQuantity! : false
+
+  const carouselOptions = 'options' in ext ? ext.options : undefined
+  const constrainTo = 'constrainTo' in ext ? ext.constrainTo : DEFAULT_CONSTRAINT
+  const imageOnly = 'imageOnly' in ext ? ext.imageOnly : false
+
+  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
+  const dontRespondRef = useRef<boolean>(false)
+
+  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
+
+  const onSelect = useCallback((emblaApi: CarouselApi) => {
+    if (dontRespondRef.current) {
+      dontRespondRef.current = false
+      return
+    }
+    const index = emblaApi.selectedScrollSnap()
+    if (index !== -1) {
+      selectSku(items[index].sku)
+    }
+    dontRespondRef.current = false
+  }, [])
+
+  useEffect(() => {
+    return reaction(
+      () => ({item: itemRef.item}),
+      ({item}) => {
+        if (elbaApiRef.current) {
+          const index = items.findIndex((el) => (el.sku === item?.sku))  
+          if (index !== -1) {
+            dontRespondRef.current = true
+            elbaApiRef.current.scrollTo(index) 
+          }
+        }
+      }  
+    )
+  }, [])
+
+  return ( 
+    <Carousel options={carouselOptions} className={cn('w-full px-2', clx)} onCarouselSelect={onSelect} setApi={setApi}>
+      <CarouselContent>
+      {items.map((item) => (
+        <ItemSlide 
+          key={item.sku} 
+          item={item}
+          {...{
+            showFamily,
+            showPrice,
+            showQuantity,
+            constrainTo,
+            imageOnly
+          }}
+          clx={itemClx}
+        />
+      ))}
+      </CarouselContent>
+      <CarouselPrevious className='left-1'/>
+      <CarouselNext className='right-1'/>
+    </Carousel>
+  )
+})
+
+export {
+  type CarouselItemSelectorPropsExt,
+  CarouselItemSelector as default 
+}

package/components/item-selector/index.ts

@@ -0,0 +1,5 @@
+export { default as ButtonItemSelector } from './button'
+export { 
+  default as CarouselItemSelector,
+  type CarouselItemSelectorPropsExt
+} from './carousel'

package/components/quantity-indicator.tsx

@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { type LucideProps } from 'lucide-react'
+
+import { cn } from '@hanzo/ui/util'
+import type { LineItem } from '../types'
+
+  // Generalize this.
+const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg fill="currentColor" viewBox='0 0 20 23' {...props}>
+    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
+  </svg>
+)
+
+const QuantityIndicator: React.FC<{
+  item: LineItem
+  clx?: string
+  iconClx?: string
+  digitClx?: string
+}> = observer(({
+  item,
+  clx='',
+  iconClx='',
+  digitClx=''
+}) => {
+
+  if (!item.isInCart) {
+    return <div /> 
+  }
+
+  return (
+    <div className={cn('relative aspect-square flex items-center justify-center', clx)} >
+      <div className={cn(
+        'z-above-content flex flex-col justify-center items-center',
+        'absolute left-0 right-0 top-0 bottom-0',
+        digitClx
+      )}>
+        <div className='h-[1px] w-full' />
+        <div style={{color: 'black' /* tailwind bug */}}>{item.quantity}</div>
+      </div>
+      <BagIcon className={cn('relative -top-[12%] h-full ', iconClx, )} aria-hidden="true" />
+    </div>            
+  )
+}) // -top-[3px] 
+
+export default QuantityIndicator

package/components/select-family/family-carousel/index.tsx

@@ -1,78 +1,87 @@
 'use client'
-import React, { useCallback, useEffect, useRef } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
+import React, { useCallback, useRef } from 'react'
 
 import { cn } from '@hanzo/ui/util'
 
 import {
-  type CarouselOptions,
   type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-  ApplyTypography,
-  MediaStack
 } from '@hanzo/ui/primitives'
+import type { Dimensions } from '@hanzo/ui/types'
 
-import type { Family, LineItem, ProductTreeNode } from '../../../types'
-import { formatCurrencyValue } from '../../../util'
+import type { Family, FamilyCarouselSlideOptions } from '../../../types'
 
+import FamilySlide from './slide'
+import {
+  SlideState,
+  FamilyCarouselState
+} from './state'
+
+import { useCommerce } from '../../..'
 
 const FamilyCarousel: React.FC<{
-  skuPath: string
+  families: Family[]
   clx?: string
   itemClx?: string
-  options?: CarouselOptions
-  mediaConstraint?: {w: number, h: number}
-  getBylineText?: (c: Family) => string
-  variantOrientation?: 'vert' | 'horiz' 
-  showVariantImage?: boolean
-  showVariantPrice?: boolean
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+  slideOptions?: FamilyCarouselSlideOptions
+  mediaConstraint?: Dimensions
   mobile?: boolean
-}> = observer(({ 
-  skuPath,
+}> = ({ 
+  families,
   clx='',
   itemClx='',
-  options={loop: true},
+  slideOptions, 
   mediaConstraint={w: 250, h: 250},
-  variantOrientation='vert',
-  showVariantImage=true,
-  showVariantPrice=true,
-  onQuantityChanged,
   mobile=false,
 }) => {
 
-  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
-  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
+  const cmmc = useCommerce()
+  const stateRef = useRef<FamilyCarouselState>(
+    new FamilyCarouselState(families, cmmc.setCurrentItem.bind(cmmc))
+  )
 
   const onSelect = useCallback((emblaApi: CarouselApi) => {
     const index = emblaApi.selectedScrollSnap()
     if (index !== -1) {
-      //selectSku(items[index].sku)
-      // cmmc.selectPath
+      stateRef.current.setCurrentFamily(families[index].id)
     }
-  }, [])
-
-  const TEST = ["one", "two", "three"]
+  }, [stateRef.current])
 
   return ( 
-    <Carousel options={options} className={cn('w-full px-2', clx)} onCarouselSelect={onSelect} setApi={setApi}>
+    <Carousel 
+      className={cn('px-2', clx)}
+      options={{loop: false}}  
+      onCarouselSelect={onSelect} 
+    >
       <CarouselContent>
-
-      {/*items.map((item, index) => (
-        <CarouselItem key={index} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
-          <FamilySlide cat
-        </CarouselItem>
-      ))*/}
+      {families.map((family) => {
+        const slideState = stateRef.current.getSlideState(family.id)
+        if (!slideState) {
+          throw new Error(`FamilyCarousel: no SlideState for family '${family.id}'!`)
+        }
+        return (
+          <CarouselItem key={family.id} className='p-2 flex flex-col justify-center items-center'>
+            <FamilySlide 
+              family={family}
+              selectedItemRef={slideState}
+              selectSku={slideState.selectSku.bind(slideState)}
+              mediaConstraint={mediaConstraint}
+              options={slideOptions}
+              mobile={mobile}
+              clx={itemClx}
+            />
+          </CarouselItem>
+        )}
+      )}
       </CarouselContent>
       <CarouselPrevious className='left-1'/>
       <CarouselNext className='right-1'/>
     </Carousel>
   )
-})
+}
 
 export default FamilyCarousel

package/components/select-family/family-carousel/slide.tsx

@@ -0,0 +1,83 @@
+'use client'
+import React from 'react'
+
+import {
+  ApplyTypography,
+  MediaStack
+} from '@hanzo/ui/primitives'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import type { FamilyCarouselSlideOptions, Family, LineItem, ItemSelector } from '../../../types'
+import { ButtonItemSelector } from '../..'
+import { cn } from '@hanzo/ui/util'
+
+const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
+  family: Family
+  mediaConstraint: Dimensions
+  clx?: string
+  mobile?: boolean,
+  options?: FamilyCarouselSlideOptions
+}> = ({
+  family,
+  selectedItemRef,
+  selectSku,
+  mediaConstraint: cnst = {w: 200, h: 200},
+  clx='',
+  mobile=false,
+  options={}
+}) => {
+
+  const titleSpec = 'title' in options ? options.title : 'short'
+  const showByline = 'showByline' in options ? options.showByline : true
+  const title = titleSpec === 'long' ? 
+    family.title 
+    : 
+    (
+      titleSpec === 'short' ? 
+        (family.titleShort ? family.titleShort : family.title ) 
+        : 
+        undefined
+    )
+
+  const byline = (showByline && family.byline) ? family.byline : undefined
+  /*
+  let byline: string | undefined = undefined
+  if (showByline) {
+    if (family.byline) {
+        // if byline names another field thats a function, call it
+      if (family.byline in family && typeof (family as any)[family.byline] === 'function') {
+        byline = (family as any)[family.byline]() as string
+      }
+      else {
+        byline = family.byline
+      }
+    }
+  }
+  */
+
+  return (
+    <div className={cn('flex flex-col items-center gap-4', clx)}>
+      {title && (
+        <ApplyTypography className='flex flex-col items-center !gap-1 [&>*]:!m-0'>
+          <h6 className='font-bold text-lg'>{title}</h6>
+          {byline && (<p className={''}>{byline}</p>)}
+        </ApplyTypography>
+      )}
+      <MediaStack 
+        media={selectedItemRef.item!} 
+        constrainTo={cnst}
+      />
+      <ButtonItemSelector
+        items={family.products as LineItem[]}
+        selectedItemRef={selectedItemRef}
+        selectSku={selectSku}
+        scrollable={false}
+        mobile={mobile}
+        options={options}
+        itemClx='text-sm'
+      />
+    </div>
+  )
+}
+
+export default FamilySlide

package/components/select-family/family-carousel/state.ts

@@ -0,0 +1,83 @@
+import type { Family, LineItem, ObsLineItemRef, Product } from '../../../types'
+import { observable, action, computed, makeObservable } from 'mobx'
+
+class SlideState implements ObsLineItemRef {
+
+  _fam: Family
+  _item: Product
+  _syncSku: (sku: string) => void
+  _selected: boolean
+
+  constructor(fam: Family, initiallySelected: boolean, sync: (sku: string) => void) {
+    this._fam = fam
+    this._item = fam.products[0]
+    this._selected = initiallySelected
+    this._syncSku = sync
+
+    makeObservable(this, {
+      _item: observable,
+      item: computed,
+      selectSku: action
+    })
+  }
+
+  selectSku = (sku: string) => {
+    if (this._item.sku === sku) return;
+    const found = this._fam.products.find((i) => (i.sku === sku))
+    if (found) {
+      this._item = found
+      if (this._selected) {
+        this._syncSku(sku)
+      }
+    }
+    else {
+      throw new Error('SlideState.selectSku(): no item found!')
+    }
+  }
+
+  setSelected = (b: boolean) => {this._selected = b}
+
+  get id(): string {return (this._fam.id)}
+
+  get item(): LineItem | undefined {
+    return this._item as LineItem
+  }
+}
+
+class FamilyCarouselState {
+
+  _map = new Map<string, SlideState>()
+  _syncSku: (sku: string) => void
+
+  constructor(fams: Family[], syncSkuToCurrentSlide: (sku: string) => void) {
+
+    fams.forEach((f, index) => {this._map.set(f.id, new SlideState(
+      f,
+      (index === 0),
+      syncSkuToCurrentSlide
+    ))})
+    this._syncSku = syncSkuToCurrentSlide
+  }
+
+  setCurrentFamily = (id: string) => {
+
+    this._map.forEach((s) => {
+      s.setSelected(s.id === id)
+    })
+
+    const slideState = this._map.get(id)
+    if (slideState) {
+      this._syncSku(slideState.item!.sku)
+    }
+    else {
+      throw new Error(`FamilyCarouselState.setCurrentFamily: no state object for id '${id}'!`)
+    }
+  }
+
+  getSlideState = (familyId: string): SlideState | undefined => (this._map.get(familyId))
+}
+
+export {
+  SlideState,
+  FamilyCarouselState
+} 

package/components/select-family/level-nodes-widget/index.tsx

@@ -4,11 +4,11 @@ import React, { useState } from 'react'
 import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
-import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../../types'
+import type { CategoryNode, StringMutator, StringArrayMutator } from '../../../types'
 import NodeImage from './node-image'
 
 const LevelNodesWidget: React.FC<{
-  levelNodes: ProductTreeNode[]
+  levelNodes: CategoryNode[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string