@luxfi/core 5.3.7 → 10.0.1

package/components/commerce/_to_deprecate_checkout-widget/index.tsx_

@@ -1,188 +0,0 @@
-'use client'
-import React, { useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { usePathname, useRouter } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { useStepAnimation } from '@hanzo/ui/util-client'
-
-import { Image } from '@hanzo/ui/primitives'
-
-import CheckoutButton from '../checkout-button'
-import useAnimationClxSet from './use-anim-clx-set'
-import CONST from './const'
-import type { LineItem } from '@hanzo/commerce/types'
-
-const transStyle = (t: { transition: string, from : string, to: string } | undefined) : any => (
-  t ? {
-    transitionProperty: t.transition,
-    transitionTimingFunction: CONST.animTimingFn,
-    transitionDuration: `${CONST.animDurationMs}ms`
-  } : {}        
-)
-
-const transClx = (on: boolean, t: { transition: string, from : string, to: string } | undefined) : string => (
-  on ? (t?.from ?? '') : (t?.to ?? '')
-)
-
-const VARS: any = {
-  BR: {
-    pos: 'bottom-[24px] right-[66px]',
-    width: 'w-initial', 
-    centerText: false,
-    coClx: 'w-auto',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100 origin-right', 
-        to: 'scale-x-0 opacity-0 origin-right'
-      }
-    },
-    showArrow: true
-  },
-  TR: {
-    pos: 'top-[48px] md:top-[80px] right-[28px]',
-    width: 'w-initial', 
-    centerText: false,
-    showQuantity: false,
-    showArrow: true,
-    coClx: 'w-auto px-3 gap-1',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform',
-        from : 'scale-x-100 origin-right', 
-        to: 'scale-x-0 origin-right'
-      }
-    },
-  },
-  TRIO: {
-    pos: 'top-[48px] md:top-[70px] right-[28px]',
-    centerText: false,
-    showQuantity: true,
-    showArrow: true,
-    width: 'w-initial', 
-    coClx: 'hidden',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100', 
-        to: 'scale-x-50 opacity-0'
-      }
-    },
-  }
-}
-
-const v = 'TR'
-
-const CheckoutWidget: React.FC<{
-  clx?: string
-}> = observer(({
-  clx=''
-}) => {
-
-  const router = useRouter()
-
-  const isCheckout = usePathname() === '/checkout'
-  const clxSet = useAnimationClxSet(isCheckout)
-
-    // for rendering content after recentActivity.item() would return false
-  const persistentRef = useRef<LineItem | undefined>(undefined)
-
-    // Doing double duty of being initial step fn for StepAnimation,
-    // and also capturing the item for persistentRef :)
-  const initialStepFn = (): boolean => {
-    if (!!recentActivity.item && !persistentRef.current) {
-      persistentRef.current = recentActivity.item
-    }  
-    return !!recentActivity.item
-  }
-  const steps = useStepAnimation(initialStepFn, [CONST.animDurationMs, CONST.animDurationMs, CONST.animDurationMs])
-
-  const handleCheckout = () => { router.push('/checkout')}
-
-  return globalThis?.document?.body && createPortal(
-    (<div 
-      className={cn(
-        VARS[v].width,
-        'z-below-modal-2 fixed ',
-        VARS[v].pos,
-        'rounded-lg',
-        'flex',
-        steps.notPast(0) ? 'bg-background' : '',
-        steps.notPast(1) ? 'gap-2' : '',
-        clxSet.asArray.join(' ')
-      )}
-      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
-    >
-      <div 
-        className={cn(
-          'flex flex-row justify-between items-center', 
-          transClx(steps.notPast(0), VARS[v].activeItemAnim.info),
-          VARS[v].itemClx, 
-          steps.notPast(1) ? 'px-3 border rounded-lg bg-level-1 border-muted-3' : '' 
-        )}
-        style={transStyle(VARS[v].activeItemAnim.info)}
-      >
-        {steps.notPast(1) && persistentRef.current?.img && (
-          <Image def={persistentRef.current.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
-        )} 
-        {steps.notPast(1) && persistentRef.current && (<div className='text-foreground grow ml-1'>
-          <p className='whitespace-nowrap text-ellipsis text-sm'>{persistentRef.current.title}</p>
-          <p className='whitespace-nowrap text-clip text-xxs' >recently added...</p>
-        </div>)}
-      </div>
-      <CheckoutButton 
-        handleCheckout={handleCheckout} 
-        centerText={VARS[v].centerText ?? !steps.notPast(0)}
-        variant='primary' 
-        rounded='lg' 
-        showQuantity={VARS[v].showQuantity ?? true}
-        showArrow={VARS[v].showArrow ?? true}
-        className={cn(
-            // for setting and unsetting 'gap'
-          transClx((VARS[v].activeItemAnim.coText ? steps.notPast(3) : true), VARS[v].activeItemAnim.co),
-          VARS[v].coClx
-        )} 
-        style={transStyle(VARS[v].activeItemAnim.co)}
-      >
-        <div 
-          className={cn(
-            'overflow-hidden',
-            'flex justify-center items-center',
-            transClx(steps.notPast(2), VARS[v].activeItemAnim.coText),
-          )} 
-          style={transStyle(VARS[v].activeItemAnim.coText)}
-        >
-          Checkout
-        </div>
-      </CheckoutButton>
-    </div>),
-    globalThis?.document?.body
-  )
-})
-
-export default CheckoutWidget

package/components/commerce/_to_deprecate_checkout-widget/obs-string-set.ts

@@ -1,48 +0,0 @@
-import { 
-  action, 
-  computed, 
-  makeObservable, 
-  observable 
-} from 'mobx'
-
-class ObsStringSet {
-
-  private _set = observable.set(new Set<string>())
-
-  constructor(initial: string[] = []) {
-    initial.forEach((el)  => {this._set.add(el)})
-    makeObservable(this, {
-      add: action,
-      remove: action,   
-      asArray: computed
-    })
-  }  
-
-  add = (v: string | string[]): void => {
-    if (Array.isArray(v)) {
-      v.forEach((el)  => {this._set.add(el)})
-    }
-    else {
-      this._set.add(v) 
-    }
-  }
-
-  remove = (v: string | string[]): void => {
-    if (Array.isArray(v)) {
-      v.forEach((el)  => {this._set.delete(el)})
-    }
-    else {
-      this._set.delete(v) 
-    }
-  }
-
-  has = (v: string): boolean => (
-    this._set.has(v)
-  )
-
-  get asArray() {
-    return Array.from(this._set)
-  }
-}
-
-export default ObsStringSet

package/components/commerce/_to_deprecate_checkout-widget/use-anim-clx-set.ts

@@ -1,59 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { reaction, runInAction} from 'mobx'
-
-import { useCommerce } from '@hanzo/commerce'
-
-import ObsStringSet from './obs-string-set'
-import { useSelectAndBuy } from '../../../commerce/ui/context'
-
-export default (isCheckout: boolean): ObsStringSet => {
-
-  const ui = useSelectAndBuy()
-  const cmmc = useCommerce()
-
-  const clxSetRef = useRef<ObsStringSet>(new ObsStringSet(
-    (cmmc.cartEmpty || ui.currentSkuPath || isCheckout) ? ['hidden'] : []
-  ))
-
-  useEffect(() => (
-    reaction(
-      () => ({
-        microOpen: !(cmmc.cartEmpty || !!ui.currentSkuPath || isCheckout),
-        buyOpen: !!ui.currentSkuPath
-      }),
-      (val, prev) => {
-
-        runInAction(() => {
-          if (!val.microOpen && prev.microOpen) {
-            clxSetRef.current.add('checkout-widget-disappears')   
-          }
-          else if (val.microOpen && !prev.microOpen) {
-            clxSetRef.current.remove('hidden')   
-            clxSetRef.current.add('checkout-widget-appears')   
-          }
-          if (!val.buyOpen && prev.buyOpen) {
-            clxSetRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
-          }
-          else {
-            clxSetRef.current.remove('checkout-widget-appears-after-buy-drawer-closes')   
-          }
-        })
-
-        setTimeout(() => {runInAction(() => {
-          clxSetRef.current.remove(['checkout-widget-appears', 'checkout-widget-appears-after-buy-drawer-closes'])   
-          if (clxSetRef.current.has('checkout-widget-disappears') ) {
-            clxSetRef.current.remove('checkout-widget-disappears')   
-            clxSetRef.current.add('hidden')   
-          }
-        })}, 800)
-      },
-      {equals: (val, prev) => (
-        val.microOpen === prev.microOpen 
-        && 
-        val.buyOpen === prev.buyOpen
-      )}
-    )
-  ), [isCheckout])
-
-  return clxSetRef.current
-}

package/components/commerce/bag-button.tsx

@@ -1,98 +0,0 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const BagButton: React.FC<{
-  showIfEmpty?: boolean  
-  animateOnHover?: boolean
-  animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
-  className?: string
-  iconClx?: string
-  onClick?: () => void
-}> = observer(({
-  showIfEmpty=false,
-  animateOnHover=true,
-  animateOnQuantityChange=true,
-  size='default',
-  className='',
-  iconClx='',
-  onClick
-}) => {
-
-  const c = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (c.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more')})   
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')})   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none')})    
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-    // undefined means context is not installed, ie commerce functions are not in use
-  if (!c || (!showIfEmpty && c.cartEmpty)) {
-    return <div /> // trigger code needs non-null 
-  }
-
-
-  return (
-    <div
-      aria-label="Bag"
-      role='button'
-      onClick={onClick}
-      className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
-          // Overides the bg change on hover --not a "hover effect" 
-        'relative group p-0 aspect-square hover:bg-background', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-        className
-      )}
-    >
-    {!c.cartEmpty && (
-      <div className={
-        'z-above-content flex flex-col justify-center items-center  ' +
-        'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-primary-fg text-xs ' 
-      }>
-        <div className='h-[3px] w-full' />
-        <div>{c.cartQuantity}</div>
-      </div>
-    )}
-      <Icons.bag width='24' height='28' className={cn(
-        'relative -top-[3px] fill-primary',
-        iconClx,
-        (animateOnHover ? 
-          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-          : 
-          ''
-        ) 
-      )} aria-hidden="true" />
-    </div>            
-  )
-})
-
-export default BagButton

package/components/commerce/buy-button.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { type VariantProps } from '@hanzo/ui/util'
-
-import { cn } from '@hanzo/ui/util'
-import { useSelectAndBuy } from '../../commerce/ui/context'
-
-const BuyButton: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-  {
-    skuPath: string
-    className?: string 
-  }
-> = ({
-  skuPath,
-  children,
-  className='',
-  ...rest
-}) => {
-
-  const buyOptions = useSelectAndBuy()
-  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
-  
-  return (
-    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
-      {children}
-    </Button>
-  )
-}
-
-export default BuyButton

package/components/commerce/checkout-button.tsx

@@ -1,129 +0,0 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { Button, type ButtonProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const IconAndQuantity: React.FC<{
-  animateOnQuantityChange?: boolean
-  showArrow?: boolean
-  showQuantity?: boolean
-  clx?: string
-  iconClx?: string
-  digitClx?: string
-}> = observer(({
-  animateOnQuantityChange=false,
-  showArrow=true,
-  showQuantity=true,
-  clx='',
-  iconClx='',
-  digitClx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (cmmc.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more') })  
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')  })  
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none') })   
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-  return (
-    <div className={cn('flex items-center justify-center', clx)}>
-    {showQuantity && (
-      <div className={cn(
-        'relative flex items-center justify-center mr-1', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-      )} >
-        {cmmc.cartQuantity > 0 && (
-        <div className={cn(
-          'z-above-content flex flex-col justify-center items-center',
-          'absolute left-0 right-0 top-0 bottom-0',
-          digitClx
-        )}>
-          <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
-        </div>
-        )}
-        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
-    )}
-      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
-    </div>
-  )
-})  
-
-const CheckoutButton: React.FC<ButtonProps & {
-  handleCheckout: () => void
-  showQuantity?: boolean
-  showArrow?: boolean
-  animateOnQuantityChange?: boolean
-  centerText?: boolean
-}> = ({
-  handleCheckout,
-  variant='primary',
-  rounded='lg',
-  className,
-  showQuantity=true,
-  showArrow=true,
-  animateOnQuantityChange=true,
-  centerText=true,
-  children,
-  ...rest
-}) => {
-
-  return (
-    <Button 
-      {...rest}
-      onClick={handleCheckout} 
-      variant={variant}
-      rounded={rounded}
-      className={cn(
-        'flex justify-between items-stretch group', 
-        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
-        className, 
-      )}
-    >
-      {centerText && ( // must scale this one too, as it effects layout
-        <IconAndQuantity 
-          showArrow={showArrow} 
-          showQuantity={showQuantity}
-          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
-        />
-      )}
-      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
-      <IconAndQuantity 
-        clx='group-hover:scale-105 transition-scale transition-duration-300'
-        animateOnQuantityChange={animateOnQuantityChange}
-        showArrow={showArrow} 
-        showQuantity={showQuantity}
-        iconClx='fill-background'
-        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
-      />
-    </Button>
-  )
-}
-
-export default CheckoutButton

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -1,66 +0,0 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  clx?: string
-  triggerClx?: string
-  panelClx?: string
-  scrollAfter: number
-  scrollHeightClx: string
-}> = observer(({
-  icon,
-  clx='',
-  panelClx='',
-  triggerClx='',
-  scrollAfter,
-  scrollHeightClx
-}) => { 
-  const cmmc = useCommerce()
-  return (
-    <Accordion type="single" collapsible className={clx}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </div>
-          <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className={cn('w-full', panelClx)} 
-            scrollAfter={scrollAfter}
-            scrollHeightClx={scrollHeightClx}
-            listClx='mt-0'
-            itemClx='mt-0.5 mb-0'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian

package/components/commerce/checkout-panel/checkout-panel-props.ts

@@ -1,10 +0,0 @@
-interface CheckoutPanelProps {
-  step: number
-  stepNames: string[]
-  onLeave:() => void
-  clx?: string
-}
-
-export {
-  type CheckoutPanelProps as default 
-}

package/components/commerce/checkout-panel/desktop-bag-carousel.tsx

@@ -1,36 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { 
-  useCommerce, 
-  CarouselItemSelector, 
-  type CarouselItemSelectorPropsExt 
-} from '@hanzo/commerce'
-
-const DesktopBagCarousel: React.FC<{
-  constrainTo: {w: number, h: number}
-  className?: string
-}> = observer(({
-  constrainTo,
-  className=''
-  
-}) => {
-  const cmmc = useCommerce()
-  return (
-    <CarouselItemSelector 
-      items={cmmc.cartItems} 
-      selectedItemRef={cmmc}
-      scrollable={false} // ignored
-      selectSku={cmmc.setCurrentItem.bind(cmmc)}
-      clx={className}
-      ext={{
-        options: {loop: true},  
-        constrainTo,  
-        imageOnly: true
-      } satisfies CarouselItemSelectorPropsExt}
-    />
-  )
-})
-
-export default DesktopBagCarousel