@hanzo/commerce 2.1.0 → 3.0.0

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

@@ -1,25 +1,27 @@
 'use client'
 import React, { useState } from 'react'
 
-import { ToggleGroup, ToggleGroupItem, type toggleVariants} from "@hanzo/ui/primitives"
+import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
 import type { FacetValueDesc, StringMutator, StringArrayMutator } from '../../types'
 import FacetImage from './facet-image'
 
-const FacetTogglesWidget: React.FC<{
+const FacetValuesWidget: React.FC<{
   facetValues: FacetValueDesc[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
   buttonClx?: string
+  itemClx?: string
   isMobile?: boolean
   tabSize?: string
 }> = ({
   facetValues,
   mutator,
-  multiple='',
+  multiple=false,
   buttonClx='',
+  itemClx='',
   className='',
   isMobile=false,
   tabSize
@@ -73,7 +75,7 @@ const FacetTogglesWidget: React.FC<{
           {...roundedToSpread}
           className={buttonClx}
         >
-          <span className={cn('flex flex-row justify-center gap-1 h-4 items-center')} >
+          <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
             <FacetImage facetValueDesc={fv} />
             {(!isMobile || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
           </span>
@@ -85,4 +87,4 @@ const FacetTogglesWidget: React.FC<{
 }
 // hidden md:block 
 
-export default FacetTogglesWidget
+export default FacetValuesWidget

package/components/index.ts

@@ -1,12 +1,14 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as Cart } from './cart'
-export { default as CartLineItem } from './cart-line-item'
-export { default as FacetsWidget } from './facets-widget'
-export { default as FacetTogglesWidget } from './facet-toggles-widget'
+export { default as BuyItemButton } from './buy-item/buy-item-button'
+export { default as BuyItemCard } from './buy-item/buy-item-card'
+export { default as BuyItemPopup } from './buy-item/buy-item-popup'
+export { default as CartPanel } from './cart-panel'
+export { default as CheckoutPanel } from './checkout-panel'
+export { default as CategoryItemIOSWheelSelector } from './category-item-ios-wheel-selector'
+export { default as CategoryItemRadioSelector } from './category-item-radio-selector'
+export { default as FacetValuesWidget } from './facet-values-widget'
 export { default as ProductCard } from './product-card'
-export { default as ProductSelectionMobilePicker } from './product-selection-mobile-picker'
-export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
-export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
-export { default as SelectItemInCategoryView } from './select-item-in-category-view'
-export { default as Checkout } from './checkout'
+export { default as SelectCategoryAndItemWidget } from './buy-item/select-category-and-item-widget'
+export { default as SelectCategoryItemCard } from './buy-item/select-category-item-card'
+export { default as SelectCategoryItemPanel } from './select-category-item-panel'
 export { Icons } from './Icons'

package/components/{select-item-in-category-view.tsx → select-category-item-panel.tsx}

@@ -6,35 +6,36 @@ import { observer } from 'mobx-react-lite'
 import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
-import type { Category, ObsLineItemRef } from '../types'
+import type { ItemSelector } from '../types'
 import { formatPrice } from '../util'
 import { Icons } from './Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
-import ProductSelectionRadioGroup from './product-selection-radio-group'
-import ProductSelectionMobilePicker from './product-selection-mobile-picker'
-
-const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> & {
-  category: Category
-  lineItemRef: ObsLineItemRef
-  handleItemSelected: (sku: string) => void 
-  isLoading?: boolean
-  mobile?: boolean
-}> = ({
+import CategoryItemRadioSelector from './category-item-radio-selector'
+import CategoryItemIOSWheelSelector from './category-item-ios-wheel-selector'
+
+const SelectCategoryItemPanel: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & ItemSelector &   
+  {
+    isLoading?: boolean
+    mobile?: boolean
+  }
+> = /* NOT observer */ ({
   category,
-  lineItemRef,
-  handleItemSelected, 
+  selectedItemRef,
+  selectSku, 
   className, 
+  showQuantity=true,
   isLoading = false, 
   mobile = false, 
   ...props
 }) => {
 
-  const waiting = (): boolean => (isLoading) // keep for convenience for now
+  const soleOption = category.products.length === 1
 
   const CategoryImage: React.FC<{ className?: string }> = ({ className = '' }) => {
 
-    if (waiting()) {
+    if (isLoading) {
       // deliberately not Skeleton to have a better overall pulse effect.
       return <div className={cn(
         'bg-level-1 rounded-xl aspect-square w-full min-h-1 ', // +
@@ -42,25 +43,13 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
         className)} />
     }
 
-    if (!category.img) {
-      return (
-        <div
-          aria-label='Placeholder'
-          role='img'
-          aria-roledescription='placeholder'
-          className={cn('w-full flex items-center justify-center aspect-square' , className)}
-        >
-          <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
-        </div>
-      )
-    }
-
-    return (
+    return category.img ? (
+      // TODO: Why so many div's?
       <div className={cn('flex flex-col justify-start', className)}>
         <div className={cn('w-full border rounded-xl p-6 ')}>
           <div className={cn('w-full aspect-square  relative')}>
             <Image
-              src={category.img!}
+              src={category.img}
               fill
               sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
               alt={category.title}
@@ -70,81 +59,88 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
           </div>
         </div>
       </div>
+    ) : (
+      <div
+        aria-label='Placeholder'
+        role='img'
+        aria-roledescription='placeholder'
+        className={cn('w-full flex items-center justify-center aspect-square' , className)}
+      >
+        <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
+      </div>
     )
   }
 
   const AvailableAmounts: React.FC<{ className?: string }> = observer(({ className = '' }) => {
 
-    const soleOption = !waiting() && category.products.length === 1
-    const mobilePicker = !waiting() && (mobile && category.products.length > 8) 
+    if (soleOption) return null
+    const mobilePicker = (mobile && category.products.length > 8) 
 
-    return waiting() ? (
+    return isLoading ? (
       <Skeleton className={'min-h-[120px] w-pr-60 mx-auto ' + className} />
     ) : (
       <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
         'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
-        (soleOption ? 'gap-2' : mobilePicker ? 'gap-4' : 'gap-8'),
+        (mobilePicker ? 'gap-4' : 'gap-8'),
         className
       )}>
         <div className='w-full flex flex-col justify-start items-center'>
-          <h6 className='text-center font-semibold'>{`Available size${soleOption ? '' : 's'}`}</h6>
-          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-80') } />
+          <h6 className='text-center font-semibold'>Available options</h6>
+          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
-        {soleOption ? (
-          <p>{category.products[0].titleAsOption}</p>
-        ) : ( mobilePicker ? (
-            <ProductSelectionMobilePicker
-              products={category.products}
-              selectedSku={lineItemRef.item?.sku ?? undefined}  
-              onValueChange={handleItemSelected}
-              height={180}
-              itemHeight={30}
-              outerClx='mb-4'
-            />
-          ) : (
-            <ProductSelectionRadioGroup 
-              products={category.products}
-              selectedSku={lineItemRef.item?.sku ?? undefined}  
-              onValueChange={handleItemSelected}
-              groupClx='grid grid-cols-2 gap-0 gap-y-3 gap-x-8 '
-              itemClx='flex flex-row gap-2 items-center'
-            />
-          )
+        {mobilePicker ? (
+          <CategoryItemIOSWheelSelector
+            category={category}
+            selectedItemRef={selectedItemRef}  
+            selectSku={selectSku}
+            showQuantity={showQuantity}
+            height={180}
+            itemHeight={30}
+            outerClx='mb-4'
+          />
+        ) : (
+          <CategoryItemRadioSelector 
+            category={category}
+            selectedItemRef={selectedItemRef}  
+            selectSku={selectSku}
+            showQuantity={showQuantity}
+            groupClx='block columns-2 gap-4'
+            itemClx='flex flex-row gap-2 items-center mb-2.5'
+          />
         )}
       </div>
     )
   })
 
   const AddToCartArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-    (lineItemRef.item && !isLoading) ? (
-      <AddToCartWidget size='default' item={lineItemRef.item} className={className}/>
+    (selectedItemRef.item && !isLoading) ? (
+      <AddToCartWidget size='default' item={selectedItemRef.item} className={className}/>
     ) : (
       <div className={cn('h-6 w-12 invisible', className)} />
     )
   ))
 
   const TitleArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
-    waiting() ? (<Skeleton className={'h-12 w-pr-80 mx-auto ' + className} />) : (
-
-      <div className={cn('flex flex-col justify-start items-center mb-6', className)}>
-        <h3 className='text-base md:text-lg lg:text-2xl md:mt-[2vw] font-nav text-center'>
-          <span className='xs:inline md:hidden'>
-            {category.title.split(', ').map((s, i) => (<p key={i}>{s}</p>))}
-          </span>
-          <span className='xs:hidden md:inline '>
-            {category.title}
-          </span>
+
+    isLoading ? (<Skeleton className={'h-12 w-pr-80 mx-auto ' + className} />) : (
+
+      <div className={cn('flex flex-col justify-start items-center', className)}>
+        <h3 className='text-base md:text-lg lg:text-2xl font-nav text-center'>
+        {category.parentTitle && (
+          <span>{category.parentTitle}<br className='md:hidden' /><span className='xs:hidden md:inline '>,&nbsp;</span></span>
+        )}
+          <span>{category.title}</span>
         </h3>
-        {lineItemRef.item?.sku ? (
+        {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
-            {lineItemRef.item.titleAsOption + ': ' + formatPrice(lineItemRef.item.price)}
+            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatPrice(selectedItemRef.item.price)}
           </h6>
         ) : ''}
       </div>
   )))
 
   const Desc: React.FC<{ className?: string }> = ({ className = '' }) => (
-    waiting() ? (
+    isLoading ? (
       <Skeleton className={'min-h-20 w-full grow mx-auto ' + className} />
     ) : (
       <p className={cn('text-base lg:text-lg mb-6 xs:mb-0', className)}>{category.desc}</p>
@@ -161,7 +157,7 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
       {...props}
     >
       <div /* id='CV_TITLE_AND_IMAGE_ROW' */ className='flex flex-row justify-between items-start w-full'>
-      {waiting() ? ( <Skeleton className={'min-h-30 w-full '} /> ) : (<>
+      {isLoading ? ( <Skeleton className={'min-h-30 w-full '} /> ) : (<>
         <CategoryImage className='w-pr-33' />
         <TitleArea className='grow pt-3 mb-0' />
       </>)}
@@ -176,17 +172,17 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
         <div /* id='CV_IMAGE_COL_SEP' */ className={'relative ' + (!isLoading ? 'md:hidden sm:min-w-[185px] xl:flex xl:w-pr-40' : '')}>
           <CategoryImage className='w-full' />
         </div>
-        <div /* id='CV_CONTENT_COL */ className='flex flex-col gap-y-6 xl:w-pr-60'>
+        <div /* id='CV_CONTENT_COL */ className={'flex flex-col xl:w-pr-60 justify-center ' + (soleOption ? '' : 'gap-6') }>
           <div /* id='CV_MD_IMAGE_AND_TITLE */ className='hidden md:flex xl:hidden flex-row gap-x-3'>
             <CategoryImage className='min-w-pr-30' />
             <TitleArea className='grow' />
           </div>
-          
+         
           <div /*  id='CV_CONTENT' */ className={'flex flex-col gap-2.5 ' + (isLoading ? 'justify-between h-full' : '')}>
             <TitleArea className='md:hidden xl:flex' />
             <Desc className='' />
           </div>
-          <div /* id='CV_CTA_AREA_BIG' */ className='hidden lg:flex p-4 flex-col justify-start items-center gap-6'>
+          <div /* id='CV_CTA_AREA_BIG' */ className='hidden lg:flex flex-col justify-start items-center gap-6'>
             <AvailableAmounts />
             <AddToCartArea className='' />
           </div>
@@ -201,4 +197,4 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
 }
 
 
-export default SelectItemInCategoryView
+export default SelectCategoryItemPanel

package/index.ts

@@ -1,4 +1,4 @@
-export * from './types'
 export * from './service/context'
+export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSyncSkuParamWithCurrentItem } from './util'
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatPrice } from './util'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -26,6 +26,10 @@
     "tc": "tsc",
     "clean": "rm -rf dist && rm -rf node_modules"
   },
+  "exports": {
+    ".": "./index.ts",
+    "./types": "./types/index.ts"
+  },
   "dependencies": {
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
@@ -34,13 +38,14 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.0.1",
-    "@hanzo/ui": "^3.0.0",
+    "@hanzo/auth": "^2.0.2",
+    "@hanzo/ui": "^3.0.2",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
+    "mobx-utils": "^6.0.8",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/service/context.tsx

@@ -9,7 +9,7 @@ enableStaticRendering(typeof window === "undefined")
 import type CommerceService from '../types/commerce-service'
 import type { ServiceOptions } from '..'
 import getServiceSingleton from './impls'
-import type { Category, FacetsDesc } from '../types'
+import type { Category, FacetValueDesc } from '../types'
 
 const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
 
@@ -20,16 +20,16 @@ const useCommerce = (): CommerceService => {
 
 const CommerceServiceProvider: React.FC<PropsWithChildren & {
   productsByCategory: Category[]
-  facets: FacetsDesc
+  rootFacet: FacetValueDesc
   options?: ServiceOptions
 }> = ({ 
   children,
   productsByCategory,
-  facets,
+  rootFacet,
   options
 }) => {
 
-  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, facets, options))
+  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootFacet, options))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>
       {children}

package/service/impls/standalone/index.ts

@@ -1,6 +1,6 @@
 import { enableStaticRendering } from 'mobx-react-lite'
 
-import type { CommerceService, Category, FacetsDesc } from '../../../types'
+import type { CommerceService, Category, FacetValueDesc } from '../../../types'
 import StandaloneService, {type StandaloneServiceOptions} from './standalone-service'
 
 import { readSnapshot, listenAndWriteSnapshots } from './localStorage'
@@ -19,7 +19,7 @@ let instance: StandaloneService | undefined =  undefined
 
 export const getInstance = (
   categories: Category[], 
-  facets: FacetsDesc, 
+  rootFacet: FacetValueDesc, 
   options?: StandaloneServiceOptions
 ): CommerceService => {
 
@@ -31,7 +31,7 @@ export const getInstance = (
     //_log("NEW INSTANCE FOR SERVER")
     return new StandaloneService(
       categories, 
-      facets, 
+      rootFacet, 
       options
     )
   }
@@ -42,7 +42,7 @@ export const getInstance = (
     const snapShot = readSnapshot()
     instance = new StandaloneService(
       categories, 
-      facets, 
+      rootFacet, 
       options,
       snapShot
     )