@hanzo/commerce 5.1.2 → 6.0.0

package/components/buy-item/buy-item-mobile-drawer.tsx

@@ -1,54 +0,0 @@
-'use client'
-import React, { useState, type ReactNode } from 'react'
-
-//import { X as LucideX} from 'lucide-react'
-//import { Sheet, SheetContent, SheetTrigger } from '@hanzo/ui/primitives'
-
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
-import BuyItemCard from './buy-item-card'
-
-const BuyItemMobileDrawer: React.FC<{
-  skuPath: string
-  trigger: ReactNode
-  triggerClx?: string  
-  drawerClx?: string
-  cardClx?: string
-}> = ({
-  skuPath,
-  trigger,
-  triggerClx='',
-  drawerClx='',
-  cardClx=''
-}) => {
-
-  const [open, setOpen] = useState<boolean>(false)
-
-  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
-    if (oldV === 0 && newV === 1) {
-      setTimeout(() => {setOpen(false)}, 150)
-    }
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen} >
-      <DrawerTrigger asChild className={triggerClx}>
-        {trigger}
-      </DrawerTrigger>
-      <DrawerContent 
-        className={cn('rounded-tl-xl rounded-tr-xl p-0 overflow-hidden', drawerClx)}
-       // side="bottom" 
-      >
-        <BuyItemCard skuPath={skuPath} mobile onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-export default BuyItemMobileDrawer

package/components/buy-item/select-category-and-item-widget.tsx

@@ -1,83 +0,0 @@
-'use client'
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ApplyTypography, ListBox } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetValueDesc, FacetsValue, LineItem } from '../../types'
-import { useCommerce } from '../../service/context'
-import { formatCurrencyValue } from '../../util'
-
-import FacetTogglesWidget from '../facet-values-widget'
-
-const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
-  `${item.titleAsOption}, ${formatCurrencyValue(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
-)
-
-const SelectCategoryAndItemWidget: React.FC<{
-  categoryLevel: number
-  parentLevelToken: string
-  categoryLevelValues: FacetValueDesc[]
-  className?: string
-}> = observer(({
-  categoryLevel, 
-  parentLevelToken,
-  categoryLevelValues,
-  className=''
-}) => {
-  const comm = useCommerce()
-
-  useEffect(() => {
-    const facets: FacetsValue = {}
-    facets[categoryLevel - 1] = [parentLevelToken]
-    facets[categoryLevel] = [categoryLevelValues[0].value]
-    comm.setFacets(facets)
-    comm.setCurrentItem(comm.specifiedCategories[0].products[0].sku)
-  }, [])
-
-  const onFacetTokenChanged = (token: string): void => {
-    const facets: FacetsValue = {}
-    facets[categoryLevel - 1] = [parentLevelToken]
-    facets[categoryLevel] = [token]
-    comm.setFacets(facets)
-  }
-
-  const currentFacetToken = (): string | null => {
-    if (comm.specifiedCategories.length === 0) return null
-    const skuPath = comm.specifiedCategories[0].id
-    const skuPathTokens = skuPath.split('-')
-    return skuPathTokens.length > 0 ? skuPathTokens[skuPathTokens.length - 1] : null
-  }
-
-  return (
-    <div className={cn('flex flex-col justify-start gap-4 items-start pt-3', className)}>
-      <FacetTogglesWidget 
-        facetValues={categoryLevelValues} 
-        mutator={{
-          get: currentFacetToken, // computed's are accessed through their get()
-          set: onFacetTokenChanged
-        }} 
-      />
-      {comm.specifiedItems.length === 0 ? (
-        <ApplyTypography>
-          <h3>No Items</h3>
-        </ApplyTypography>
-      ) : comm.specifiedItems.length === 1 ? (
-        <ApplyTypography>
-          <h4>{formatItem(comm.specifiedItems[0])}</h4>
-        </ApplyTypography>
-      ) : (
-        <ListBox<string> 
-          values={comm.specifiedItems.map((it) => (it.sku))}   
-          labels={comm.specifiedItems.map((it) => (formatItem(it)))}   
-          isEqual={(v1: string, v2: string) => (v1 === v2)}
-          value={comm.currentItem?.sku}
-          onValueChange={comm.setCurrentItem.bind(comm)}
-        />
-      )}
-    </div>
-  )
-})
-
-export default SelectCategoryAndItemWidget

package/components/category-item-radio-selector.tsx

@@ -1,55 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import type { ItemSelector, LineItem, Product } from '../types'
-import { formatCurrencyValue } from '../util'
-import { cn } from '@hanzo/ui/util'
-
-const CategoryItemRadioSelector: React.FC<ItemSelector & {
-  groupClx?: string
-  itemClx?: string
-}> = observer(({
-  category,
-  selectedItemRef: itemRef,
-  selectSku,
-  groupClx='',
-  itemClx='',
-  showPrice=true,
-  showQuantity=true
-}) => {
-
-  const Choice: React.FC<{
-    item: Product
-    className?: string
-  }> = ({
-    item,
-    className=''
-  }) => (
-    <div className={cn(className, itemClx)}>
-      <RadioGroupItem value={item.sku} id={item.sku} />
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
-    </div>
-  )
-
-  return ( category.products.length > 1 ? (
-      <RadioGroup
-        className={cn(showQuantity ? 'table' : '', groupClx)}
-        onValueChange={selectSku}
-        value={itemRef.item ? itemRef.item.sku : ''}
-      >
-      {(category.products as LineItem[]).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}/>
-      )))}
-      </RadioGroup>
-    ) : (<p>TODO</p>)
-  )
-})
-
-export default CategoryItemRadioSelector

package/components/category-item-scroll-selector.tsx

@@ -1,40 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { ScrollArea } from '@hanzo/ui/primitives'
-
-import type { ItemSelector } from '../types'
-import { formatCurrencyValue } from '../util'
-
-
-const CategoryItemScrollSelector: React.FC<ItemSelector & {
-  outerClx?: string
-  itemClx?: string
-}> = observer(({
-  category,
-  selectedItemRef: iRef,
-  selectSku,
-  outerClx='',
-  itemClx=''
-}) => {
-
-  return (
-    <ScrollArea className={cn('border border-muted-4 rounded-lg', outerClx)}>
-      {category.products.map((prod) => (
-        <div key={prod.sku} onClick={() => {selectSku(prod.sku)}}>
-          <div className={cn(
-            'h-10 border-b flex flex-col justify-center px-4',
-            (iRef.item?.sku === prod.sku) ? 'font-semibold text-accent' : 'text-muted', 
-            itemClx
-          )}>
-            {prod.titleAsOption + ', ' + formatCurrencyValue(prod.price)}
-          </div>
-        </div>
-      ))}
-    </ScrollArea>
-  )
-})
-
-export default CategoryItemScrollSelector

package/components/item-carousel.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-
-import Spline from '@splinetool/react-spline'
-
-import { cn } from '@hanzo/ui/util'
-
-import {
-  type CarouselOptionsType,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext
-} from '@hanzo/ui/primitives'
-
-import {
-  VideoBlockComponent,
-  ImageBlockComponent,
-  type ImageBlock,
-  type Block,
-  type VideoBlock
-} from '@hanzo/ui/blocks'
-
-import type { LineItem } from '../types'
-import type { Dimensions } from '@hanzo/ui/types'
-
-  // Order of precedence of visuals: 3D > MP4 > Image
-const ItemCarousel: React.FC<{
-  items: LineItem[]
-  constrainTo: Dimensions
-  options?: CarouselOptionsType 
-  className?: string
-  itemClx?: string  
-}> = ({ 
-  items,
-  options,
-  className='',
-  constrainTo,
-  itemClx=''
-}) => ( 
-  // className: 'w-full max-w-sm mx-auto 
-  // itemClx:  'flex aspect-square items-center justify-center '
-  <Carousel options={options} className={cn('px-2', className)} >
-    <CarouselContent>
-    {items.map(({title, img, video, animation}, index) => (
-      <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
-      {animation ? (
-        <Spline
-          scene={animation}
-          className='pointer-events-none' // !aspect-[12/10] 
-          style={{
-            width: (6/5 * (typeof constrainTo.h === 'number' ? constrainTo.h as number : parseInt(constrainTo.h as string)) ),
-            height: constrainTo.h
-          }}
-        />
-      ) : video ? (
-        <VideoBlockComponent
-          constraint={constrainTo}
-          block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
-        />
-      ) : (
-        <ImageBlockComponent
-          block={{
-            blockType: 'image',
-            src: img ?? '',
-            alt: title + ' image',
-            dim: constrainTo
-          } satisfies ImageBlock as Block} 
-          className='m-auto'
-        />
-      )}
-      </CarouselItem>
-    ))}
-    </CarouselContent>
-    <CarouselPrevious className='left-1'/>
-    <CarouselNext className='right-1'/>
-  </Carousel>
-)
-
-export default ItemCarousel

package/types/facet.ts

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react'
-
-interface FacetValueDesc {
-  value: string             // a token in the sku
-  label: string
-  img? : string | ReactNode  // icon is required 
-  imgAR? : number           // helps with svgs
-  sub?: FacetValueDesc[]
-}
-
-/* *** FOR EXAMPLE **
-{
-  1: [ {
-      token: 'AG',
-      label: 'Silver',
-      img: '/assets/img/cart/ui/facets/silver-swatch-200x200.png'
-    },
-    ... more FaceValues describing the "type" level (Silver, Gold)
-  ],
-  2 [
-    {
-      token: 'B'
-      label: 'Minted Bar
-    },
-    ... more FaceValues describing the "form" level (Bar, Coin, )
-  ]
-}
-*/
-  // Which facets tokens are on at each level
-type FacetsValue = Record<number, string[]>
-
-export type {
-  FacetValueDesc,
-  FacetsValue
-}