@hanzo/commerce 6.0.0 → 6.1.0

package/components/item/product-card.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import Image from 'next/image'
 
 import { 
   Card,
@@ -13,9 +12,9 @@ import { cn } from '@hanzo/ui/util'
 
 import { formatCurrencyValue } from '../../util'
 import type { LineItem } from '../../types'
-import { Icons } from '../Icons'
 
 import AddToCartWidget from '../buy/add-to-cart-widget'
+import ItemMedia from './item-media'
 
 interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
   item: LineItem
@@ -25,53 +24,25 @@ const ProductCard: React.FC<ProductCardProps> = ({
   item,
   className,
   ...props
-}) => {
+}) => (
+  <Card
+    className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
+    {...props}
+  >
+    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
+      <ItemMedia item={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+    </CardHeader>
+    <CardContent className='grid gap-2.5 p-4'>
+      <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
+        {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
+        <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
+      </CardTitle>
+    </CardContent>
+    <CardFooter className='p-4 flex flex-row justify-center'>
+      <AddToCartWidget item={item}/>
+    </CardFooter>
+  </Card>
+)
 
-  const ProductImage: React.FC<{className?: string}> = ({className=''}) => (
-    <Image
-      src={item.img!}
-      alt={item.title}
-      className={className}
-      loading='lazy'
-//          width={700}
-//          height={700}
-      fill
-      style={{
-        objectFit: 'contain',
-      }}
-    />
-  )
-    
-  return (
-    <Card
-      className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-      {...props}
-    >
-      <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      {item.img ? (
-        <ProductImage className='p-6' />
-      ) : (
-          <div
-            aria-label='Placeholder'
-            role='img'
-            aria-roledescription='placeholder'
-            className='flex h-full items-center justify-center bg-background'
-          >
-            <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
-          </div>
-      )}
-      </CardHeader>
-      <CardContent className='grid gap-2.5 p-4'>
-        <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
-          {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
-          <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
-        </CardTitle>
-      </CardContent>
-      <CardFooter className='p-4 flex flex-row justify-center'>
-        <AddToCartWidget item={item}/>
-      </CardFooter>
-    </Card>
-  )
-}
 
 export default ProductCard

package/components/{facet-values-widget → level-nodes-widget}/index.tsx

@@ -5,10 +5,10 @@ import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
 import type { ProductTreeNode, StringMutator, StringArrayMutator } from '../../types'
-import FacetImage from './facet-image'
+import NodeImage from './node-image'
 
-const FacetValuesWidget: React.FC<{
-  facetValues: ProductTreeNode[]
+const LevelNodesWidget: React.FC<{
+  levelNodes: ProductTreeNode[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
@@ -18,7 +18,7 @@ const FacetValuesWidget: React.FC<{
   tabSize?: string
   show?: 'image' | 'label' | 'image-and-label'
 }> = ({
-  facetValues,
+  levelNodes,
   mutator,
   multiple=false,
   buttonClx='',
@@ -61,25 +61,25 @@ const FacetValuesWidget: React.FC<{
       className={className}
       {...roundedToSpread}
     >
-    {facetValues.map((fv, index) => {
+    {levelNodes.map((treeNode, index) => {
       const roundedToSpread: any = {}
       if (!multiple) {
         roundedToSpread.rounded = 'none'   
         if (index === 0) { roundedToSpread.rounded = 'llg' }
-        else if (index === facetValues.length - 1) { roundedToSpread.rounded = 'rlg' } 
+        else if (index === levelNodes.length - 1) { roundedToSpread.rounded = 'rlg' } 
       }
       return (
         <ToggleGroupItem 
-          key={fv.skuToken}
-          value={fv.skuToken} 
-          disabled={(last && last === fv.skuToken || fv.skuToken === mutator.get())} 
-          aria-label={`Select ${fv.label}`}
+          key={treeNode.skuToken}
+          value={treeNode.skuToken} 
+          disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} 
+          aria-label={`Select ${treeNode.label}`}
           {...roundedToSpread}
           className={buttonClx}
         >
           <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
-            {!(show === 'label') && (<FacetImage facetValueDesc={fv} />) }
-            {(!(show === 'image') || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
+            {!(show === 'label') && (<NodeImage treeNode={treeNode} />) }
+            {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
           </span>
         </ToggleGroupItem>
       )
@@ -88,4 +88,4 @@ const FacetValuesWidget: React.FC<{
   )
 }
 
-export default FacetValuesWidget
+export default LevelNodesWidget

package/components/level-nodes-widget/node-image.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+
+import type { ProductTreeNode } from '../../types'
+
+const ICON_SIZE = 20
+
+const NodeImage: React.FC<{
+  treeNode: ProductTreeNode
+}> = ({
+  treeNode: {
+    img,
+    imgAR: ar,
+    label
+  }
+}) => {
+
+  if (!img) { return null }
+    // treat as URL
+  return (typeof img === 'string') ? (
+    <Image 
+      src={img as string} 
+      alt={`Toggle ${label}`} 
+      className={'block mr-1 '} 
+      width={ar ?  ar * ICON_SIZE : ICON_SIZE}
+      height={ICON_SIZE}
+    />
+  ) : (img as React.ReactNode) 
+} 
+
+export default NodeImage

package/components/select/carousel-selector.tsx

@@ -1,54 +1,102 @@
-import React from 'react'
+'use client'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
 
-import Spline from '@splinetool/react-spline'
-
-import type { Dimensions } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
 import ItemMedia from '../item/item-media'
 
 import {
   type CarouselOptionsType,
+  type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
-  CarouselNext
+  CarouselNext,
+  ApplyTypography
 } from '@hanzo/ui/primitives'
 
-import {
-  VideoBlockComponent,
-  ImageBlockComponent,
-  type ImageBlock,
-  type Block,
-  type VideoBlock
-} from '@hanzo/ui/blocks'
-
-import type { ItemSelectorProps } from '../../types'
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
 
 interface CarouselItemSelectorPropsExt {
-  constrainTo: Dimensions
+  constrainTo: {w: number, h: number}
   options?: CarouselOptionsType 
-  noSelection?: boolean // "display only" mode
+    /** Do not show Category and / or Item title and Price */
+  imageOnly?: boolean
 }
   
-const CarouselItemSelector: React.FC<ItemSelectorProps> = ({ 
+const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
   items,
+  selectSku,
+  selectedItemRef: itemRef,
+  scrollList, // ignored
   clx='',
   itemClx='',
+  showCategory=false,
   ext={
-    options: {},
-    constrainTo: {w: 250, h: 250} 
+    options: {loop: true},
+    constrainTo: {w: 250, h: 250},
+    imageOnly: false 
   } satisfies CarouselItemSelectorPropsExt
 }) => {
 
-  const { options, constrainTo} = ext
+  const { options, constrainTo, imageOnly} = ext
+
+  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) 
+          }
+        }
+      }  
+    )
+  }, [])
+
+  const ItemInfo: React.FC<{
+    item: LineItem
+    clx?: string
+  }> = ({
+    item,
+    clx
+  }) => (
+    <ApplyTypography className={cn(clx, 'flex flex-col items-center !gap-2 [&>*]:!m-0')}>
+      {showCategory && (<h4>{item.categoryTitle}</h4>)}
+      <p>{item.optionLabel}</p>
+      <p>{formatCurrencyValue(item.price)}</p>
+    </ApplyTypography>
+  )
 
   return ( 
-    <Carousel options={options} className={cn('px-2', clx)} >
+    <Carousel options={options} className={cn('w-full px-2', clx)} onSelect={onSelect} setApi={setApi}>
       <CarouselContent>
       {items.map((item, index) => (
-        <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
+        <CarouselItem key={index} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
           <ItemMedia item={item} constrainTo={constrainTo} clx='' />
+          {!imageOnly && (<ItemInfo item={item} clx=''/>)}
         </CarouselItem>
       ))}
       </CarouselContent>
@@ -56,7 +104,7 @@ const CarouselItemSelector: React.FC<ItemSelectorProps> = ({
       <CarouselNext className='right-1'/>
     </Carousel>
   )
-}
+})
 
 export {
   type CarouselItemSelectorPropsExt,

package/components/select/image-selector.tsx

@@ -1,50 +1,33 @@
 'use client'
 import React from 'react'
-import Image from 'next/image'
 import { observer } from 'mobx-react-lite'
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+
+import { 
+  Image, 
+  Label, 
+  RadioGroup, 
+  ScrollArea 
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
 import type { ItemSelectorProps, LineItem } from '../../types'
 import { formatCurrencyValue } from '../../util'
-import { cn } from '@hanzo/ui/util'
-import type { Dimensions } from '@hanzo/ui/types'
 
 const ImageRadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
     item: LineItem,
-    imgSizePx: number  
+    constrainTo: {w: number, h: number}  
   }
 >(({ 
   item,
-  imgSizePx,
+  constrainTo,
   className, 
   ...props 
 }, ref) => {
 
-  let dim: Dimensions 
-  if (item.imgAR) {
-    if (item.imgAR >= 1) {
-      dim = {
-        w: imgSizePx,
-        h: imgSizePx / item.imgAR
-      }
-    }
-    else {
-      dim = {
-        w: imgSizePx * item.imgAR,
-        h: imgSizePx
-      }
-    }
-  }
-  else {
-    dim = {
-      w: imgSizePx,
-      h: imgSizePx
-    }
-  }
-
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
@@ -56,10 +39,10 @@ const ImageRadioGroupItem = React.forwardRef<
       id={item.sku}
       value={item.sku}
     >
-      {!!item.img ? (
-        <Image src={item.img} alt={item.title + ' image'} height={dim.h} width={dim.w} className=''/>
+      {item.img ? (
+        <Image def={item.img} constrainTo={constrainTo} preload className=''/>
       ) : ( // placeholder so things align
-        <div style={{height: dim.h, width: dim.w}}/>
+        <div style={{height: constrainTo.h, width: constrainTo.w}}/>
       )}
     </RadioGroupPrimitive.Item>
   )
@@ -73,52 +56,106 @@ const ImageItemSelector: React.FC<ItemSelectorProps> = observer(({
   clx='',
   itemClx='',
   soleItemClx='',
-  showPrice=true,
-  showQuantity=true
+  showCategory=false,
+  showQuantity=false,
+  scrollList=false
 }) => {
 
-  const Choice: React.FC<{
+  const LabelText: React.FC<{item: LineItem}> = ({item}) => (
+    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+  )
+
+  const ItemAndPrice: React.FC<{
     item: LineItem
+    listBoxMode: boolean
+    selected: boolean
     className?: string
   }> = ({
     item,
+    listBoxMode,
+    selected,
     className=''
   }) => (
-    <div className={cn('flex items-center mb-1', className, itemClx)}>
-      <ImageRadioGroupItem item={item} imgSizePx={40} className='mr-2 border-2 border-transparent rounded-sm data-[state=checked]:border-foreground'/>
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
+    <div className={cn(
+      'flex items-center', 
+      className, 
+      itemClx,
+    )}>
+      <ImageRadioGroupItem 
+        item={item} 
+        constrainTo={{h: 36, w: 72}} // Apple suggest 42px 
+        className={
+          'mr-2 ' +  (listBoxMode ?  '' : 
+          'border-transparent border-2 rounded-sm data-[state=checked]:border-foreground')
+        }
+      />
+      <Label htmlFor={item.sku} className={selected && listBoxMode ? 'text-accent' : ''}>
+        <LabelText item={item} />
+      </Label>
     </div>
   )
-
-  const SoleChoice: React.FC<{
+ 
+  const Item: React.FC<{
     item: LineItem
-    className?: string
+    selected: boolean
+    listBoxMode: boolean
+    clx?: string
   }> = ({
     item,
-    className=''
-  }) => (
-    <div className={cn(className, soleItemClx)}>
-      {item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}
-    </div>
-  )
+    selected,
+    listBoxMode,
+    clx=''
+  }) => {
+
+    const outClx = [
+      (listBoxMode ? 'border-b border-muted-3 py-1' : 'mb-3'),
+      (selected && listBoxMode ? 'border border-foreground rounded-sm' : ''),
+    ]
+
+    return (showQuantity ? (
+      <div key={item.sku} className={cn('flex flex-row items-center', ...outClx, clx )}>
+        <ItemAndPrice item={item} selected={selected} listBoxMode={listBoxMode} className='grow'/>
+        <div className='grow-0 shrink-0 font-semibold text-sm leading-none px-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
+      </div>
+    ) : (
+      <ItemAndPrice 
+        key={item.sku} 
+        item={item} 
+        selected={selected} 
+        listBoxMode={listBoxMode} 
+        className={cn(...outClx, 
+        listBoxMode ? '' : 'mb-1',
+        clx)} 
+      />
+    ))
+  }
 
   return items.length > 1 ? (
     <RadioGroup
-      className={cn('gap-0', showQuantity ? 'table' : '', clx)}
+      className={cn('flex flex-col gap-0', 
+        (scrollList ? 'shrink min-h-0' : ''), 
+        clx,
+      )}
       onValueChange={selectSku}
       value={itemRef.item ? itemRef.item.sku : ''}
     >
-    {items.map((item) => (showQuantity ? (
-      <div className='table-row' key={item.sku}>
-        <Choice item={item} className='table-cell pr-2 align-text-top pb-3'/>
-        <div className='table-cell font-semibold text-sm leading-none align-text-top pb-3'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
-      </div>
-    ) : (
-      <Choice item={item} className='mb-3'  key={item.sku}/>
-    )))}
+      {scrollList ? (
+        <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2 rounded-sm '>
+          {items.map((item) => (
+            <Item item={item} listBoxMode={true} selected={itemRef.item?.sku === item.sku}/>
+          ))}
+        </ScrollArea>
+      ) : (<>
+        {items.map((item) => (
+          <Item item={item} listBoxMode={false} selected={itemRef.item?.sku === item.sku}/>
+        ))}
+      </>)}
     </RadioGroup>
   ) : (
-    <SoleChoice item={items[0]} className=''/>
+    <div className={soleItemClx}>
+      <LabelText item={items[0]} />
+    </div>
   )
 })
 

package/components/select/radio-selector.tsx

@@ -2,10 +2,16 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
+import { 
+  Label, 
+  RadioGroup, 
+  RadioGroupItem,
+  ScrollArea 
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
 import type { ItemSelectorProps, LineItem } from '../../types'
 import { formatCurrencyValue } from '../../util'
-import { cn } from '@hanzo/ui/util'
 
 const RadioItemSelector: React.FC<ItemSelectorProps> = observer(({
   items,
@@ -14,52 +20,105 @@ const RadioItemSelector: React.FC<ItemSelectorProps> = observer(({
   clx='',
   itemClx='',
   soleItemClx='',
-  showPrice=true,
-  showQuantity=true
+  showCategory=false,
+  showQuantity=false,
+  scrollList=false
 }) => {
 
-  const Choice: React.FC<{
+  const LabelText: React.FC<{item: LineItem}> = ({item}) => (
+    (showCategory ? (item.categoryTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showCategory ? ': ' : ', ') + formatCurrencyValue(item.price)
+  )
+
+  const ItemAndPrice: React.FC<{
     item: LineItem
+    listBoxMode: boolean
+    selected: boolean
     className?: string
   }> = ({
     item,
+    listBoxMode,
+    selected,
     className=''
   }) => (
-    <div className={cn(className, itemClx)}>
-      <RadioGroupItem value={item.sku} id={item.sku} className='mr-2'/>
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
+    <div className={cn(
+      'flex items-center', 
+      className, 
+      itemClx,
+    )}>
+      <RadioGroupItem
+        value={item.sku} 
+        larger
+        id={item.sku} 
+        className={'mr-2 ' + (listBoxMode ?  'hidden' : '')}
+      />
+      <Label htmlFor={item.sku} className={selected ? 'text-accent' : ''}>
+        <LabelText item={item} />
+      </Label>
     </div>
   )
-
-  const SoleChoice: React.FC<{
+ 
+  const Item: React.FC<{
     item: LineItem
-    className?: string
+    selected: boolean
+    listBoxMode: boolean
+    clx?: string
   }> = ({
     item,
-    className=''
-  }) => (
-    <div className={cn(className, soleItemClx)}>
-      {item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}
-    </div>
-  )
+    selected,
+    listBoxMode,
+    clx=''
+  }) => {
+
+    const outClx = [
+      'h-10',
+      (listBoxMode ? 'border-b border-muted-3 py-1 pl-2' : 'mb-3'),
+      (selected && listBoxMode ? 'border border-foreground rounded-sm' : ''),
+    ]
+
+    return (showQuantity ? (
+      <div key={item.sku} className={cn('flex flex-row items-center', ...outClx, clx )}>
+        <ItemAndPrice item={item} selected={selected} listBoxMode={listBoxMode} className='grow'/>
+        <div className='grow-0 shrink-0 font-semibold text-sm leading-none px-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
+      </div>
+    ) : (
+      <ItemAndPrice 
+        key={item.sku} 
+        item={item} 
+        selected={selected} 
+        listBoxMode={listBoxMode} 
+        className={cn(...outClx, 
+        listBoxMode ? '' : 'mb-1',
+        clx)} 
+      />
+    ))
+  }
 
   return items.length > 1 ? (
     <RadioGroup
-      className={cn('gap-0', showQuantity ? 'table' : '', clx)}
+      className={cn('flex flex-col gap-0', 
+        (scrollList ? 'shrink min-h-0' : ''), 
+        clx,
+      )}
       onValueChange={selectSku}
       value={itemRef.item ? itemRef.item.sku : ''}
     >
-    {items.map((item) => (showQuantity ? (
-      <div className='table-row' key={item.sku}>
-        <Choice item={item} className='table-cell pr-2 align-text-top pb-2'/>
-        <div className='table-cell font-semibold text-sm leading-none align-text-top pb-2'>{ item.quantity > 0 ? `(${item.quantity})` : ' '}</div>
-      </div>
-    ) : (
-      <Choice item={item} className='mb-2'  key={item.sku}/>
-    )))}
+      {scrollList ? (
+        <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2 rounded-sm '>
+          {items.map((item) => (
+            <Item item={item} listBoxMode={true} selected={itemRef.item?.sku === item.sku}/>
+          ))}
+        </ScrollArea>
+      ) : (<>
+        {items.map((item) => (
+          <Item item={item} listBoxMode={false} selected={itemRef.item?.sku === item.sku}/>
+        ))}
+      </>)}
     </RadioGroup>
   ) : (
-    <SoleChoice item={items[0]} className=''/>
+    <div className={soleItemClx}>
+      <LabelText item={items[0]} />
+    </div>
   )
 })