@hanzo/commerce 7.3.0 → 7.3.2

package/components/item-selector/button.tsx

@@ -1,188 +1,188 @@
-'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 { accessItemOptions, 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}
-      data-vaul-no-drag 
-      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 {
-    showPrice, 
-    showQuantity,
-    showFamilyInOption,
-    buttonType,
-    horizButtons,
-    showButtonIfOnlyOne
-  } = accessItemOptions(options)
-
-  const showImage = buttonType !== 'text'
-  const showText = buttonType !== 'image' 
-  const showBoth = buttonType === 'image-and-text' 
-
-  const labelAndPrice = (item : LineItem) => (
-    (showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showPrice ? ((showFamilyInOption ? ': ' : ', ') + 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 = (showBoth) ?  '' : 'justify-center'
-      // If no image, the Label must fill the entire button since it has to be
-      // clickable all the way to the border
-    const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2' ) : '' 
-    let bgClx = '' 
-    let borderClx = ''
-    if (scrollable) {
-      borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
-    }
-    else if (!showImage) {
-      borderClx += 'border rounded-lg ' 
-      borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
-      bgClx += 'hover:bg-level-2' 
-    }
-
-    const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
-
-    return (
-      <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
-        <ImageRadioGroupItem 
-          item={item} 
-          constrainTo={DEFAULT_CONSTRAINT} 
-          className={cn(
-            cursorClx,
-            (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
-            showBoth ? 'mr-2' : (showImage ? '' : 'hidden') 
-          )}
-        />
-        <Label htmlFor={item.sku} className={cn(
-          showQuantity ? 'flex items-center' : 'block',
-          textClx, 
-          cursorClx,
-          (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'),
-          (showText ? '' : 'hidden') 
-        )}>
-          <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 showButtonIfOnlyOne || items.length > 1 ? (
-    <RadioGroup
-      className={cn( 
-        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
-        (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'),
-        (mobile && showText) ? 'min-w-pr-50' : '',
-        clx,
-      )}
-      onValueChange={selectSku}
-      value={itemRef.item ? itemRef.item.sku : ''}
-      data-vaul-no-drag 
-    >
-    {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
+'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 { accessItemOptions, 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}
+      data-vaul-no-drag 
+      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 {
+    showPrice, 
+    showQuantity,
+    showFamilyInOption,
+    buttonType,
+    horizButtons,
+    showButtonIfOnlyOne
+  } = accessItemOptions(options)
+
+  const showImage = buttonType !== 'text'
+  const showText = buttonType !== 'image' 
+  const showBoth = buttonType === 'image-and-text' 
+
+  const labelAndPrice = (item : LineItem) => (
+    (showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showPrice ? ((showFamilyInOption ? ': ' : ', ') + 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 = (showBoth) ?  '' : 'justify-center'
+      // If no image, the Label must fill the entire button since it has to be
+      // clickable all the way to the border
+    const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2' ) : '' 
+    let bgClx = '' 
+    let borderClx = ''
+    if (scrollable) {
+      borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
+    }
+    else if (!showImage) {
+      borderClx += 'border rounded-lg ' 
+      borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
+      bgClx += 'hover:bg-level-2' 
+    }
+
+    const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
+
+    return (
+      <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
+        <ImageRadioGroupItem 
+          item={item} 
+          constrainTo={DEFAULT_CONSTRAINT} 
+          className={cn(
+            cursorClx,
+            (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
+            showBoth ? 'mr-2' : (showImage ? '' : 'hidden') 
+          )}
+        />
+        <Label htmlFor={item.sku} className={cn(
+          showQuantity ? 'flex items-center' : 'block',
+          textClx, 
+          cursorClx,
+          (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'),
+          (showText ? '' : 'hidden') 
+        )}>
+          <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 showButtonIfOnlyOne || items.length > 1 ? (
+    <RadioGroup
+      className={cn( 
+        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
+        (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'),
+        (mobile && showText) ? 'min-w-pr-50' : '',
+        clx,
+      )}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+      data-vaul-no-drag 
+    >
+    {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