@hanzo/commerce 7.3.1 → 7.3.2

package/components/buy/multi-family/family-carousel/slide.tsx

@@ -1,83 +1,83 @@
-'use client'
-import React from 'react'
-
-import {
-  ApplyTypography,
-  MediaStack
-} from '@hanzo/ui/primitives'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
-import { ButtonItemSelector } from '../../..'
-import { cn } from '@hanzo/ui/util'
-
-const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
-  family: Family
-  mediaConstraint: Dimensions
-  clx?: string
-  mobile?: boolean,
-  options?: ItemSelectorOptions
-}> = ({
-  family,
-  selectedItemRef,
-  selectSku,
-  mediaConstraint: cnst = {w: 200, h: 200},
-  clx='',
-  mobile=false,
-  options={}
-}) => {
-
-  const titleSpec = 'title' in options ? options.title : 'short'
-  const showByline = 'showByline' in options ? options.showByline : true
-  const title = titleSpec === 'long' ? 
-    family.title 
-    : 
-    (
-      titleSpec === 'short' ? 
-        (family.titleShort ? family.titleShort : family.title ) 
-        : 
-        undefined
-    )
-
-  const byline = (showByline && family.byline) ? family.byline : undefined
-  /*
-  let byline: string | undefined = undefined
-  if (showByline) {
-    if (family.byline) {
-        // if byline names another field thats a function, call it
-      if (family.byline in family && typeof (family as any)[family.byline] === 'function') {
-        byline = (family as any)[family.byline]() as string
-      }
-      else {
-        byline = family.byline
-      }
-    }
-  }
-  */
-
-  return (
-    <div className={cn('flex flex-col items-center gap-4', clx)}  data-vaul-no-drag >
-      {title && (
-        <ApplyTypography className='flex flex-col items-center !gap-1 [&>*]:!m-0' data-vaul-no-drag >
-          <h6 className='font-bold text-lg'>{title}</h6>
-          {byline && (<p className={''}>{byline}</p>)}
-        </ApplyTypography>
-      )}
-      <MediaStack 
-        media={selectedItemRef.item!} 
-        constrainTo={cnst}
-      />
-      <ButtonItemSelector
-        items={family.products as LineItem[]}
-        selectedItemRef={selectedItemRef}
-        selectSku={selectSku}
-        scrollable={false}
-        mobile={mobile}
-        options={options}
-        itemClx='text-sm'
-      />
-    </div>
-  )
-}
-
-export default FamilySlide
+'use client'
+import React from 'react'
+
+import {
+  ApplyTypography,
+  MediaStack
+} from '@hanzo/ui/primitives'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
+import { ButtonItemSelector } from '../../..'
+import { cn } from '@hanzo/ui/util'
+
+const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
+  family: Family
+  mediaConstraint: Dimensions
+  clx?: string
+  mobile?: boolean,
+  options?: ItemSelectorOptions
+}> = ({
+  family,
+  selectedItemRef,
+  selectSku,
+  mediaConstraint: cnst = {w: 200, h: 200},
+  clx='',
+  mobile=false,
+  options={}
+}) => {
+
+  const titleSpec = 'title' in options ? options.title : 'short'
+  const showByline = 'showByline' in options ? options.showByline : true
+  const title = titleSpec === 'long' ? 
+    family.title 
+    : 
+    (
+      titleSpec === 'short' ? 
+        (family.titleShort ? family.titleShort : family.title ) 
+        : 
+        undefined
+    )
+
+  const byline = (showByline && family.byline) ? family.byline : undefined
+  /*
+  let byline: string | undefined = undefined
+  if (showByline) {
+    if (family.byline) {
+        // if byline names another field thats a function, call it
+      if (family.byline in family && typeof (family as any)[family.byline] === 'function') {
+        byline = (family as any)[family.byline]() as string
+      }
+      else {
+        byline = family.byline
+      }
+    }
+  }
+  */
+
+  return (
+    <div className={cn('flex flex-col items-center gap-4', clx)}  data-vaul-no-drag >
+      {title && (
+        <ApplyTypography className='flex flex-col items-center !gap-1 [&>*]:!m-0' data-vaul-no-drag >
+          <h6 className='font-bold text-lg'>{title}</h6>
+          {byline && (<p className={''}>{byline}</p>)}
+        </ApplyTypography>
+      )}
+      <MediaStack 
+        media={selectedItemRef.item!} 
+        constrainTo={cnst}
+      />
+      <ButtonItemSelector
+        items={family.products as LineItem[]}
+        selectedItemRef={selectedItemRef}
+        selectSku={selectSku}
+        scrollable={false}
+        mobile={mobile}
+        options={options}
+        itemClx='text-sm'
+      />
+    </div>
+  )
+}
+
+export default FamilySlide

package/components/buy/multi-family/family-carousel/state.ts

@@ -1,87 +1,87 @@
-import type { Family, LineItem, ObsLineItemRef, Product } from '../../../../types'
-import { observable, action, computed, makeObservable } from 'mobx'
-
-class SlideState implements ObsLineItemRef {
-
-  _fam: Family
-  _item: Product
-  _syncSku: (sku: string) => void
-  _selected: boolean
-
-  constructor(fam: Family, initiallySelected: boolean, sync: (sku: string) => void) {
-    this._fam = fam
-    this._item = fam.products[0]
-    this._selected = initiallySelected
-    this._syncSku = sync
-
-    makeObservable(this, {
-      _item: observable,
-      item: computed,
-      selectSku: action
-    })
-  }
-
-  selectSku = (sku: string) => {
-    if (this._item.sku === sku) return;
-    const found = this._fam.products.find((i) => (i.sku === sku))
-    if (found) {
-      this._item = found
-      if (this._selected) {
-        this._syncSku(sku)
-      }
-    }
-    else {
-      throw new Error('SlideState.selectSku(): no item found!')
-    }
-  }
-
-  setSelected = (b: boolean) => {this._selected = b}
-
-  get id(): string {return (this._fam.id)}
-
-  get item(): LineItem | undefined {
-    return this._item as LineItem
-  }
-}
-
-class FamilyCarouselState {
-
-  _map = new Map<string, SlideState>()
-  _syncSku: (sku: string) => void
-
-  constructor(
-    fams: Family[], 
-//    initialFamilyId: string,
-    syncSkuToCurrentSlide: (sku: string) => void
-  ) {
-
-    fams.forEach((f, index) => {this._map.set(f.id, new SlideState(
-      f,
-      (index === 0),
-      syncSkuToCurrentSlide
-    ))})
-    this._syncSku = syncSkuToCurrentSlide
-  }
-
-  setCurrentFamily = (id: string) => {
-
-    this._map.forEach((s) => {
-      s.setSelected(s.id === id)
-    })
-
-    const slideState = this._map.get(id)
-    if (slideState) {
-      this._syncSku(slideState.item!.sku)
-    }
-    else {
-      throw new Error(`FamilyCarouselState.setCurrentFamily: no state object for id '${id}'!`)
-    }
-  }
-
-  getSlideState = (familyId: string): SlideState | undefined => (this._map.get(familyId))
-}
-
-export {
-  SlideState,
-  FamilyCarouselState
-} 
+import type { Family, LineItem, ObsLineItemRef, Product } from '../../../../types'
+import { observable, action, computed, makeObservable } from 'mobx'
+
+class SlideState implements ObsLineItemRef {
+
+  _fam: Family
+  _item: Product
+  _syncSku: (sku: string) => void
+  _selected: boolean
+
+  constructor(fam: Family, initiallySelected: boolean, sync: (sku: string) => void) {
+    this._fam = fam
+    this._item = fam.products[0]
+    this._selected = initiallySelected
+    this._syncSku = sync
+
+    makeObservable(this, {
+      _item: observable,
+      item: computed,
+      selectSku: action
+    })
+  }
+
+  selectSku = (sku: string) => {
+    if (this._item.sku === sku) return;
+    const found = this._fam.products.find((i) => (i.sku === sku))
+    if (found) {
+      this._item = found
+      if (this._selected) {
+        this._syncSku(sku)
+      }
+    }
+    else {
+      throw new Error('SlideState.selectSku(): no item found!')
+    }
+  }
+
+  setSelected = (b: boolean) => {this._selected = b}
+
+  get id(): string {return (this._fam.id)}
+
+  get item(): LineItem | undefined {
+    return this._item as LineItem
+  }
+}
+
+class FamilyCarouselState {
+
+  _map = new Map<string, SlideState>()
+  _syncSku: (sku: string) => void
+
+  constructor(
+    fams: Family[], 
+//    initialFamilyId: string,
+    syncSkuToCurrentSlide: (sku: string) => void
+  ) {
+
+    fams.forEach((f, index) => {this._map.set(f.id, new SlideState(
+      f,
+      (index === 0),
+      syncSkuToCurrentSlide
+    ))})
+    this._syncSku = syncSkuToCurrentSlide
+  }
+
+  setCurrentFamily = (id: string) => {
+
+    this._map.forEach((s) => {
+      s.setSelected(s.id === id)
+    })
+
+    const slideState = this._map.get(id)
+    if (slideState) {
+      this._syncSku(slideState.item!.sku)
+    }
+    else {
+      throw new Error(`FamilyCarouselState.setCurrentFamily: no state object for id '${id}'!`)
+    }
+  }
+
+  getSlideState = (familyId: string): SlideState | undefined => (this._map.get(familyId))
+}
+
+export {
+  SlideState,
+  FamilyCarouselState
+} 

package/components/buy/multi-family/index.ts

@@ -1,2 +1,2 @@
-export { default as FamilyCarousel } from './family-carousel'
-export { default as AllVariantsCarousel } from './all-variants-carousel'
+export { default as FamilyCarousel } from './family-carousel'
+export { default as AllVariantsCarousel } from './all-variants-carousel'

package/components/buy/single-family-selector.tsx

@@ -1,90 +1,90 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { MediaStack, Skeleton } from '@hanzo/ui/primitives'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import { useCommerce } from '../..'
-
-import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
-import TitleAndByline from './title-and-byline'
-import { accessItemOptions } from '../../util'
-import { cn } from '@hanzo/ui/util'
-
-
-const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
-
-const SingleFamilySelector: React.FC<{
-  items: LineItem[] // these may be sorted, so are we can't just use currentFamily.products
-  Selector: React.ComponentType<ItemSelectorProps>
-  selOptions: ItemSelectorOptions | undefined
-  scrollable?: boolean
-  showItemMedia?: boolean
-  mediaConstraint?: Dimensions
-  mobile?: boolean
-  clx?: string
-  titleAreaClx?: string
-}> = ({
-  items,
-  Selector,
-  selOptions,
-  scrollable=false,
-  showItemMedia=true,
-  mediaConstraint=DEF_MEDIA_CONSTRAINT,
-  mobile=false,
-  clx='',
-  titleAreaClx=''
-}) => {
-  
-  const cmmc = useCommerce()
-
-
-  const MyTitleAndByline: React.FC<{clx?: string}> = observer(({
-    clx=''
-  }) => {
-    const { familyTitle, showFamilyByline } = accessItemOptions(selOptions)
-    const title = (familyTitle === 'none' ? 
-      undefined 
-      : 
-      (familyTitle === 'long' ? 
-        cmmc.currentFamily?.title 
-        : 
-        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
-      ) 
-    )
-    const byline = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
-    return ( <TitleAndByline clx={clx} title={title} byline={byline}/> )
-  })
-
-  const ItemMedia: React.FC = observer(() => (
-    cmmc.currentItem ? (
-      <MediaStack 
-        media={cmmc.currentItem!} 
-        constrainTo={mediaConstraint} 
-        clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
-      />
-    ) : (
-      <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>
-    )
-  ))
-
-  return (
-    <div className={cn(clx, 'flex flex-col items-center', (scrollable ? 'shrink' : ''))}>
-      <MyTitleAndByline clx={cn(titleAreaClx, (scrollable ? 'shrink-0' : ''))} />
-      {showItemMedia && (<ItemMedia />)}
-      {items && (
-        <Selector 
-          items={items}
-          selectedItemRef={cmmc}
-          selectSku={cmmc.setCurrentItem.bind(cmmc)}
-          scrollable={scrollable}
-          mobile={mobile}
-          options={selOptions}
-          clx={(scrollable ? 'shrink' : '')}
-        />  
-      )}
-    </div>
-  )
-}
-
-export default SingleFamilySelector
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MediaStack, Skeleton } from '@hanzo/ui/primitives'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import { useCommerce } from '../..'
+
+import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
+import TitleAndByline from './title-and-byline'
+import { accessItemOptions } from '../../util'
+import { cn } from '@hanzo/ui/util'
+
+
+const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
+
+const SingleFamilySelector: React.FC<{
+  items: LineItem[] // these may be sorted, so are we can't just use currentFamily.products
+  Selector: React.ComponentType<ItemSelectorProps>
+  selOptions: ItemSelectorOptions | undefined
+  scrollable?: boolean
+  showItemMedia?: boolean
+  mediaConstraint?: Dimensions
+  mobile?: boolean
+  clx?: string
+  titleAreaClx?: string
+}> = ({
+  items,
+  Selector,
+  selOptions,
+  scrollable=false,
+  showItemMedia=true,
+  mediaConstraint=DEF_MEDIA_CONSTRAINT,
+  mobile=false,
+  clx='',
+  titleAreaClx=''
+}) => {
+  
+  const cmmc = useCommerce()
+
+
+  const MyTitleAndByline: React.FC<{clx?: string}> = observer(({
+    clx=''
+  }) => {
+    const { familyTitle, showFamilyByline } = accessItemOptions(selOptions)
+    const title = (familyTitle === 'none' ? 
+      undefined 
+      : 
+      (familyTitle === 'long' ? 
+        cmmc.currentFamily?.title 
+        : 
+        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
+      ) 
+    )
+    const byline = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
+    return ( <TitleAndByline clx={clx} title={title} byline={byline}/> )
+  })
+
+  const ItemMedia: React.FC = observer(() => (
+    cmmc.currentItem ? (
+      <MediaStack 
+        media={cmmc.currentItem!} 
+        constrainTo={mediaConstraint} 
+        clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
+      />
+    ) : (
+      <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>
+    )
+  ))
+
+  return (
+    <div className={cn(clx, 'flex flex-col items-center', (scrollable ? 'shrink' : ''))}>
+      <MyTitleAndByline clx={cn(titleAreaClx, (scrollable ? 'shrink-0' : ''))} />
+      {showItemMedia && (<ItemMedia />)}
+      {items && (
+        <Selector 
+          items={items}
+          selectedItemRef={cmmc}
+          selectSku={cmmc.setCurrentItem.bind(cmmc)}
+          scrollable={scrollable}
+          mobile={mobile}
+          options={selOptions}
+          clx={(scrollable ? 'shrink' : '')}
+        />  
+      )}
+    </div>
+  )
+}
+
+export default SingleFamilySelector

package/components/buy/title-and-byline.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
-
-import { ApplyTypography } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const TitleAndByline: React.FC<{
-  title: string | undefined
-  byline?: string | undefined
-  clx?: string
-  bylineClx?: string
-}> = ({
-  title,
-  byline,
-  clx='',
-  bylineClx=''
-}) => ( (title || byline) ? (
-    <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
-      <h4>{title}</h4>
-      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
-    </ApplyTypography>
-  ) : (null)
-)
-
-export default TitleAndByline
-
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const TitleAndByline: React.FC<{
+  title: string | undefined
+  byline?: string | undefined
+  clx?: string
+  bylineClx?: string
+}> = ({
+  title,
+  byline,
+  clx='',
+  bylineClx=''
+}) => ( (title || byline) ? (
+    <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
+      <h4>{title}</h4>
+      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
+    </ApplyTypography>
+  ) : (null)
+)
+
+export default TitleAndByline
+