@luxfi/ui 5.3.7 → 5.3.9

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

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