@hanzo/commerce 7.3.2 → 7.3.4

package/components/item-selector/carousel/index.tsx

@@ -1,197 +1,197 @@
-'use client'
-import React, { useCallback, useEffect, useRef, useState } 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 {
-  ApplyTypography,
-  type CarouselOptions,
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  MediaStack,
-} from '@hanzo/ui/primitives'
-
-import type { ItemSelectorProps, LineItem } from '../../../types'
-import { formatCurrencyValue, accessItemOptions } from '../../../util'
-
-import QuantityIndicator from '../quantity-indicator'
-import ItemCarouselSlider from './slider'
-
-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
-  clx?: string
-}> = ({
-  item,
-  constrainTo,
-  clx=''
-}) => (
-  <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
-    <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
-  </CarouselItem>
-) 
-
-const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
-  items,
-  selectSku,
-  selectedItemRef: itemRef,
-  clx='',
-  itemClx='',
-  options={},
-  ext={
-    options: {loop: true},
-    constrainTo: DEFAULT_CONSTRAINT,
-    imageOnly: false 
-  } satisfies CarouselItemSelectorPropsExt
-}) => {
-
-  const {
-    showPrice, 
-    showQuantity,
-    showFamilyInOption,
-    showByline,
-    showSlider,
-  } = accessItemOptions(options)
-    
-  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
-  const scrollToRef = useRef<((index: number) => void) | undefined>(undefined)
-  const dontRespondRef = useRef<boolean>(false)
-
-  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
-  const setScrollTo = (scrollTo: (index: number) => void) => { scrollToRef.current = scrollTo}
-
-  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 onSelect = useCallback((emblaApi: CarouselApi) => {
-    if (dontRespondRef.current) {
-      dontRespondRef.current = false
-      return
-    }
-    const index = emblaApi.selectedScrollSnap()
-    if (index !== -1) {
-      selectSku(items[index].sku)
-      if (scrollToRef.current) {
-        scrollToRef.current(index)
-      }
-    }
-    dontRespondRef.current = false
-  }, [scrollToRef.current ])
-
-  useEffect(() => {
-    return reaction(
-      () => (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 optionLabel = () => (
-    showFamilyInOption ? 
-      (itemRef.item?.familyTitle + ', ' + itemRef.item?.optionLabel) 
-      : 
-      itemRef.item?.optionLabel 
-  )
-
-  const debugBorder = (c: 'r' | 'g' | 'b'): string => {
-     return ''
-
-    switch (c) {
-      case 'r': return ' border border-[#ffaaaa] '
-      case 'g': return ' border border-[#aaffaa] '
-      case 'b': return ' border border-[#aaaaff] '
-    }
-  }
-
-  const onScrollIndexChange = (index: number) => {
-    dontRespondRef.current = true
-    selectSku(items![index].sku)
-    elbaApiRef.current?.scrollTo(index) 
-  }
-
-  return ( 
-    <div className={cn('w-full flex flex-col items-center', clx)}>
-      <Carousel 
-        options={showSlider ? {...carouselOptions, loop: false} : carouselOptions } 
-        className={'w-full px-2' + debugBorder('r')} 
-        onCarouselSelect={onSelect} 
-        setApi={setApi}
-      >
-        <CarouselContent>
-        {items.map((item) => (
-          <ItemSlide key={item.sku} item={item} constrainTo={constrainTo} clx={itemClx} />
-        ))}
-        </CarouselContent>
-        {!showSlider && (<>
-          <CarouselPrevious className='left-1'/>
-          <CarouselNext className='right-1'/>
-        </>)}
-      </Carousel>
-     
-      {(!imageOnly && itemRef.item) && (<>
-        <ApplyTypography className='flex flex-col items-center [&>*]:!m-0 !gap-1 '>
-          <div className={
-            'flex items-center gap-1 [&>*]:!m-0 ' + debugBorder('g') + 
-            (showFamilyInOption ? 'flex-col' : 'flex-row')
-          }>
-            <h6 className='font-semibold'>
-              {optionLabel() + (showPrice && !showFamilyInOption ? ',' : '')}
-            </h6>
-            <div className={
-              'flex items-center gap-1 [&>*]:!m-0 flex-row ' +  debugBorder('b') +  
-              (showFamilyInOption ? 'w-full justify-between' : '')
-            }>
-              {showPrice && (<p>{formatCurrencyValue(itemRef.item.price)}</p>)}
-              {showQuantity && (
-                <QuantityIndicator 
-                  item={itemRef.item} 
-                  clx='h-[22px] ml-4' 
-                  iconClx='fill-foreground'
-                  digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
-                />
-              )}
-            </div>
-          </div>
-          {showByline && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
-        </ApplyTypography>
-        {showSlider && items.length > 1 && (
-          <ItemCarouselSlider 
-            clx='mt-5 w-[320px]' 
-            numStops={items.length}  
-            setScrollTo={setScrollTo}
-            onIndexChange={onScrollIndexChange}
-          />
-        )}
-      </>)}
-    </div>
-  )
-})
-
-export {
-  type CarouselItemSelectorPropsExt,
-  CarouselItemSelector as default 
-}
+'use client'
+import React, { useCallback, useEffect, useRef, useState } 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 {
+  ApplyTypography,
+  type CarouselOptions,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  MediaStack,
+} from '@hanzo/ui/primitives'
+
+import type { ItemSelectorProps, LineItem } from '../../../types'
+import { formatCurrencyValue, accessItemOptions } from '../../../util'
+
+import QuantityIndicator from '../quantity-indicator'
+import ItemCarouselSlider from './slider'
+
+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
+  clx?: string
+}> = ({
+  item,
+  constrainTo,
+  clx=''
+}) => (
+  <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
+    <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
+  </CarouselItem>
+) 
+
+const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
+  items,
+  selectSku,
+  selectedItemRef: itemRef,
+  clx='',
+  itemClx='',
+  options={},
+  ext={
+    options: {loop: true},
+    constrainTo: DEFAULT_CONSTRAINT,
+    imageOnly: false 
+  } satisfies CarouselItemSelectorPropsExt
+}) => {
+
+  const {
+    showPrice, 
+    showQuantity,
+    showFamilyInOption,
+    showByline,
+    showSlider,
+  } = accessItemOptions(options)
+    
+  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
+  const scrollToRef = useRef<((index: number) => void) | undefined>(undefined)
+  const dontRespondRef = useRef<boolean>(false)
+
+  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
+  const setScrollTo = (scrollTo: (index: number) => void) => { scrollToRef.current = scrollTo}
+
+  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 onSelect = useCallback((emblaApi: CarouselApi) => {
+    if (dontRespondRef.current) {
+      dontRespondRef.current = false
+      return
+    }
+    const index = emblaApi.selectedScrollSnap()
+    if (index !== -1) {
+      selectSku(items[index].sku)
+      if (scrollToRef.current) {
+        scrollToRef.current(index)
+      }
+    }
+    dontRespondRef.current = false
+  }, [scrollToRef.current ])
+
+  useEffect(() => {
+    return reaction(
+      () => (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 optionLabel = () => (
+    showFamilyInOption ? 
+      (itemRef.item?.familyTitle + ', ' + itemRef.item?.optionLabel) 
+      : 
+      itemRef.item?.optionLabel 
+  )
+
+  const debugBorder = (c: 'r' | 'g' | 'b'): string => {
+     return ''
+
+    switch (c) {
+      case 'r': return ' border border-[#ffaaaa] '
+      case 'g': return ' border border-[#aaffaa] '
+      case 'b': return ' border border-[#aaaaff] '
+    }
+  }
+
+  const onScrollIndexChange = (index: number) => {
+    dontRespondRef.current = true
+    selectSku(items![index].sku)
+    elbaApiRef.current?.scrollTo(index) 
+  }
+
+  return ( 
+    <div className={cn('w-full flex flex-col items-center', clx)}>
+      <Carousel 
+        options={showSlider ? {...carouselOptions, loop: false} : carouselOptions } 
+        className={'w-full px-2' + debugBorder('r')} 
+        onCarouselSelect={onSelect} 
+        setApi={setApi}
+      >
+        <CarouselContent>
+        {items.map((item) => (
+          <ItemSlide key={item.sku} item={item} constrainTo={constrainTo} clx={itemClx} />
+        ))}
+        </CarouselContent>
+        {!showSlider && (<>
+          <CarouselPrevious className='left-1'/>
+          <CarouselNext className='right-1'/>
+        </>)}
+      </Carousel>
+     
+      {(!imageOnly && itemRef.item) && (<>
+        <ApplyTypography className='flex flex-col items-center [&>*]:!m-0 !gap-1 '>
+          <div className={
+            'flex items-center gap-1 [&>*]:!m-0 ' + debugBorder('g') + 
+            (showFamilyInOption ? 'flex-col' : 'flex-row')
+          }>
+            <h6 className='font-semibold'>
+              {optionLabel() + (showPrice && !showFamilyInOption ? ',' : '')}
+            </h6>
+            <div className={
+              'flex items-center gap-1 [&>*]:!m-0 flex-row ' +  debugBorder('b') +  
+              (showFamilyInOption ? 'w-full justify-between' : '')
+            }>
+              {showPrice && (<p>{formatCurrencyValue(itemRef.item.price)}</p>)}
+              {showQuantity && (
+                <QuantityIndicator 
+                  item={itemRef.item} 
+                  clx='h-[22px] ml-4' 
+                  iconClx='fill-foreground'
+                  digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
+                />
+              )}
+            </div>
+          </div>
+          {showByline && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
+        </ApplyTypography>
+        {showSlider && items.length > 1 && (
+          <ItemCarouselSlider 
+            clx='mt-5 w-[320px]' 
+            numStops={items.length}  
+            setScrollTo={setScrollTo}
+            onIndexChange={onScrollIndexChange}
+          />
+        )}
+      </>)}
+    </div>
+  )
+})
+
+export {
+  type CarouselItemSelectorPropsExt,
+  CarouselItemSelector as default 
+}

package/components/item-selector/carousel/slider.tsx

@@ -1,40 +1,40 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-
-import { Slider } from '@hanzo/ui/primitives'
-
-const ItemCarouselSlider: React.FC<{
-  clx?: string
-  setScrollTo: (scrollTo: (index: number) => void) => void
-  onIndexChange: (i: number) => void
-  numStops: number
-}> = ({
-  clx='',
-  setScrollTo,
-  onIndexChange,
-  numStops,
-}) => {
-
-  const [index, setIndex] = useState<number>(0)
-  useEffect(() => { setScrollTo(setIndex) }, [setScrollTo])
-
-  const onValueChange = (v: number[]) => { setIndex(v[0]); onIndexChange(v[0]) }
-
-  return ( 
-    <Slider 
-      className={clx} 
-      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
-      trackBgClx='bg-level-3'
-      rangeBgClx='bg-level-3'
-      thumbSlidingClx='bg-muted-2' 
-      defaultValue={[0]} 
-      min={0}
-      max={numStops - 1} 
-      step={1} 
-      value={[index]}
-      onValueChange={onValueChange}
-    />
-  )
-}
-
-export default ItemCarouselSlider
+'use client'
+import React, { useEffect, useState } from 'react'
+
+import { Slider } from '@hanzo/ui/primitives'
+
+const ItemCarouselSlider: React.FC<{
+  clx?: string
+  setScrollTo: (scrollTo: (index: number) => void) => void
+  onIndexChange: (i: number) => void
+  numStops: number
+}> = ({
+  clx='',
+  setScrollTo,
+  onIndexChange,
+  numStops,
+}) => {
+
+  const [index, setIndex] = useState<number>(0)
+  useEffect(() => { setScrollTo(setIndex) }, [setScrollTo])
+
+  const onValueChange = (v: number[]) => { setIndex(v[0]); onIndexChange(v[0]) }
+
+  return ( 
+    <Slider 
+      className={clx} 
+      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
+      trackBgClx='bg-level-3'
+      rangeBgClx='bg-level-3'
+      thumbSlidingClx='bg-muted-2' 
+      defaultValue={[0]} 
+      min={0}
+      max={numStops - 1} 
+      step={1} 
+      value={[index]}
+      onValueChange={onValueChange}
+    />
+  )
+}
+
+export default ItemCarouselSlider

package/components/item-selector/index.ts

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

package/components/item-selector/quantity-indicator.tsx

@@ -1,48 +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
+'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