@luxfi/core 4.5.3 → 5.0.0

package/components/chat-widget.tsx

@@ -47,7 +47,7 @@ const ChatWidget: React.FC<{
   return (<>
     <div className={
       'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
-      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-above-floating ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
       (showChatbot ? 'flex' : 'hidden')
     }>
       <Card className='flex flex-col h-full w-full'>
@@ -66,7 +66,8 @@ const ChatWidget: React.FC<{
       height={28}
       onClick={onClick}
       className={cn(
-        'fixed bottom-5 right-5 z-floating transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+        'fixed bottom-5 right-5 z-below-modal-3 transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
         showChatbot ? 'rotate-180' : ''
       )}
       strokeWidth={1}

package/components/commerce/bag-button.tsx

@@ -1,23 +1,26 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
-import { buttonVariants, type ButtonSizes } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+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  
-  noHoverEffects?: boolean
-  size?: ButtonSizes
+  animateOnHover?: boolean
+  animateOnQuantityChange?: boolean
+  size?: VariantProps<typeof buttonVariants>['size']
   className?: string
   iconClx?: string
   onClick?: () => void
 }> = observer(({
   showIfEmpty=false,
-  noHoverEffects=false,
+  animateOnHover=true,
+  animateOnQuantityChange=true,
   size='default',
   className='',
   iconClx='',
@@ -25,12 +28,34 @@ const BagButton: React.FC<{
 }) => {
 
   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) {
+          wiggleRef.current.set('more')   
+        }
+        else {
+          wiggleRef.current.set('less')   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          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"
@@ -40,6 +65,10 @@ const BagButton: React.FC<{
         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
       )}
     >
@@ -53,12 +82,14 @@ const BagButton: React.FC<{
         <div>{c.cartQuantity}</div>
       </div>
     )}
-      <Icons.bag className={cn(
-        'relative -top-[3px] fill-primary w-6 h-7 ',
+      <Icons.bag width='24' height='28' className={cn(
+        'relative -top-[3px] fill-primary',
         iconClx,
-        (noHoverEffects ? '' : (
+        (animateOnHover ? 
           'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-        )) 
+          : 
+          ''
+        ) 
       )} aria-hidden="true" />
     </div>            
   )

package/components/commerce/buy-drawer/checkout.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 32 40" >
+  <path d="M27.724,27.85a3.4,3.4,0,0,0,.825-2.672l-1.8-14.4A3.405,3.405,0,0,0,23.375,7.8h-.521a5.173,5.173,0,0,0-10.32,0H3.894a1,1,0,0,0,0,2H8.929a3.316,3.316,0,0,0-.29.978l-.382,3.055a.889.889,0,0,0-.163-.033h-3a1,1,0,0,0,0,2H8.011L6.839,25.178A3.4,3.4,0,0,0,10.212,29H25.175A3.4,3.4,0,0,0,27.724,27.85ZM17.694,5a3.2,3.2,0,0,1,3.16,2.8h-6.32A3.194,3.194,0,0,1,17.694,5ZM9.163,26.526a1.384,1.384,0,0,1-.34-1.1l1.8-14.4A1.4,1.4,0,0,1,12.013,9.8h.481V13a1,1,0,0,0,2,0V9.8h6.4V13a1,1,0,0,0,2,0V9.8h.481a1.4,1.4,0,0,1,1.39,1.226l1.8,14.4A1.4,1.4,0,0,1,25.175,27H10.212A1.38,1.38,0,0,1,9.163,26.526Z"/>
+  <path d="M7.894,11.8a1,1,0,0,0-1-1h-3a1,1,0,0,0,0,2h3A1,1,0,0,0,7.894,11.8Z"/>
+</svg>

package/components/commerce/buy-drawer/drawer.tsx

@@ -0,0 +1,44 @@
+'use client'
+import React, {type PropsWithChildren } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import { Button, Drawer, DrawerContent, type DrawerProps } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const CommerceDrawer: React.FC<PropsWithChildren & 
+  Omit<DrawerProps, 'onOpenChange'> & 
+  {
+    setOpen: (b: boolean) => void
+    drawerClx?: string
+  }
+> = ({
+  children,
+  open,
+  setOpen,
+  modal,
+  drawerClx='',
+  ...rest
+}) => (
+    // @ts-ignore
+  <Drawer open={open} onOpenChange={setOpen} modal={modal} {...rest}>
+    <DrawerContent modal={modal} className={cn(
+      'rounded-t-xl mt-6 pt-6',
+      drawerClx
+    )}>
+      {children}
+      <Button
+        variant='ghost'
+        size='icon'
+        onClick={() => {setOpen(false)}}
+        className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
+      >
+        <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
+      </Button>    
+    </DrawerContent>
+  </Drawer>
+)
+
+
+export default CommerceDrawer
+

package/components/commerce/buy-drawer/index.tsx

@@ -0,0 +1,192 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useRouter, usePathname } from 'next/navigation'
+import { ObservableSet, observable, reaction, type IReactionDisposer, runInAction} from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
+
+import { useCommerce, useCommerceUI, CarouselBuyCard, LineItemRef } from '@hanzo/commerce'
+import type { LineItem } from '@hanzo/commerce/types'
+
+import CommerceDrawer from './drawer'
+import CheckoutButton from '../checkout-button'
+
+const DEF_IMG_CONSTRAINT={w: 40, h: 24}
+const CO_ANIM_DURATION = 400
+const CO_ANIM_TIMING_FN = 'cubic-bezier(0.4, 0, 0.2, 1)'
+const CO_WIDGET_W_CLX = {
+  checkout: 'w-pr-40',
+  itemInfo: 'w-pr-60'
+}
+
+const CO_WIDGET_SHADOW_STYLE = {
+  border: '1px solid rgb(100 100 100)',
+  boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
+}
+
+const CommerceUIComponent: React.FC = observer(() => {
+
+  const ui = useCommerceUI()
+  const cmmc = useCommerce()
+  const router = useRouter()
+  const isCheckout = usePathname() === '/checkout'
+
+  const animClxRef = useRef<ObservableSet<string>>(observable.set(new Set<string>(
+    (cmmc.cartEmpty || ui.buyOptionsSkuPath || isCheckout) ? ['hidden'] : []
+  )))
+
+    // a ref that is synced to ui.activeItem, but persists for CO_ANIM_DURATION longer
+    // so ui does not jump while animating "out"
+  const laggingActiveItemRef = useRef<LineItemRef>(new LineItemRef())
+  const disposersRef = useRef<IReactionDisposer[]>([])
+
+  useEffect(() => {
+    disposersRef.current.push(
+      reaction(
+        () => (ui.activeItem),
+        (item: LineItem | undefined) => {
+          if (item) { 
+            laggingActiveItemRef.current.set(item) 
+          }
+          else { 
+            setTimeout(() => { laggingActiveItemRef.current.set(undefined) }, CO_ANIM_DURATION) 
+          }
+        },
+        {equals: (val, prev) => (val?.sku === prev?.sku)}
+      )
+    )
+
+    disposersRef.current.push(
+      reaction(
+        () => ({
+          microOpen: !(cmmc.cartEmpty || !!ui.buyOptionsSkuPath || isCheckout),
+          buyOpen: !!ui.buyOptionsSkuPath
+        }),
+        (val, prev) => {
+
+          runInAction(() => {
+            if (!val.microOpen && prev.microOpen) {
+              animClxRef.current.add('checkout-widget-disappears')   
+            }
+            else if (val.microOpen && !prev.microOpen) {
+              animClxRef.current.delete('hidden')   
+              animClxRef.current.add('checkout-widget-appears')   
+            }
+            if (!val.buyOpen && prev.buyOpen) {
+              animClxRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
+            }
+            else {
+              animClxRef.current.delete('checkout-widget-appears-after-buy-drawer-closes')   
+            }
+          })
+
+          setTimeout(() => {runInAction(() => {
+            animClxRef.current.delete('checkout-widget-appears')   
+            animClxRef.current.delete('checkout-widget-appears-after-buy-drawer-closes')   
+            if (animClxRef.current.has('checkout-widget-disappears') ) {
+              animClxRef.current.delete('checkout-widget-disappears')   
+              animClxRef.current.add('hidden')   
+            }
+          })}, 800)
+        },
+        {equals: (val, prev) => (
+          val.microOpen === prev.microOpen 
+          && 
+          val.buyOpen === prev.buyOpen
+        )}
+      )
+    )
+
+    return () => {
+      disposersRef.current.forEach((d) => {d()}) 
+    }
+  }, [])
+
+
+
+  const handleCheckout = () => {
+  //  router.push('/checkout')
+  }
+
+    // Should only ever be called internally to close
+  const reallyOnlyCloseDrawer = (b: boolean) => {
+    if (!b ) {
+      ui.hideBuyOptions()
+    }
+  }
+
+  return (<>
+    <CommerceDrawer 
+      open={!!ui.buyOptionsSkuPath} 
+      setOpen={reallyOnlyCloseDrawer}
+      modal={true}
+      drawerClx={'w-full md:max-w-[550px] md:mx-auto lg:max-w-[50vw]'}
+    >
+      <CarouselBuyCard 
+        skuPath={ui.buyOptionsSkuPath!} 
+        checkoutButton={
+          <CheckoutButton handleCheckout={handleCheckout} className='w-full min-w-[160px] sm:max-w-[320px]'/>
+        }
+        clx='w-full'
+        addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
+        selectorClx='max-w-[475px]'
+      />
+    </CommerceDrawer>
+    {globalThis?.document?.body && createPortal(
+      <div 
+        className={cn(
+          'min-w-[160px] sm:max-w-[320px] w-[calc(100%-32px)] mx-auto !h-10',
+          'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
+          'rounded-lg bg-background',
+          'flex',
+          ui.activeItem ? 'gap-2' : '',
+          Array.from(animClxRef.current).join(' ')
+        )}
+        style={laggingActiveItemRef.current.item ? {} : CO_WIDGET_SHADOW_STYLE}
+      >
+        <div 
+          className={cn(
+            'flex flex-row justify-between items-center', 
+            ui.activeItem ? CO_WIDGET_W_CLX.itemInfo : 'w-0',
+            laggingActiveItemRef.current.item ? 'px-3 border rounded-lg border-muted-3' : '' 
+          )}
+          style={{
+            transitionProperty: 'width',
+            transitionTimingFunction: CO_ANIM_TIMING_FN,
+            transitionDuration: `${CO_ANIM_DURATION}ms`
+          }}
+        >
+          {laggingActiveItemRef.current.item?.img ? (
+            <Image def={laggingActiveItemRef.current.item.img} constrainTo={DEF_IMG_CONSTRAINT} preload className='grow-0 shrink-0'/>
+          ) : ( // placeholder so things align
+            <div style={{height: DEF_IMG_CONSTRAINT.h, width: DEF_IMG_CONSTRAINT.w}} className='bg-level-3 grow-0 shrink-0'/>
+          )}
+
+          <div className='text-muted grow ml-1'>
+            {laggingActiveItemRef.current.item && (<>
+              <p className='whitespace-nowrap text-sm'>{laggingActiveItemRef.current.item.title}</p>
+              <p className='whitespace-nowrap text-xxs' >recently added...</p>
+            </>)}
+          </div>
+        </div>
+        <CheckoutButton 
+          handleCheckout={handleCheckout} 
+          centerText={!!!ui.activeItem}
+          variant='primary' rounded='lg' 
+          className={cn(ui.activeItem ? CO_WIDGET_W_CLX.checkout : 'w-full')} 
+          style={{
+            transitionProperty: 'width',
+            transitionTimingFunction: CO_ANIM_TIMING_FN,
+            transitionDuration: `${CO_ANIM_DURATION}ms`
+          }}
+        />        
+      </div>,
+      globalThis?.document?.body
+    )}
+  </>)
+})
+
+export default CommerceUIComponent

package/components/commerce/checkout-button.tsx

@@ -0,0 +1,116 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { type LucideProps } from 'lucide-react'
+
+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
+  clx?: string
+  iconClx?: string
+  digitClx?: string
+}> = observer(({
+  animateOnQuantityChange=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) {
+          wiggleRef.current.set('more')   
+        }
+        else {
+          wiggleRef.current.set('less')   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          wiggleRef.current.set('none')   
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+  return (
+    <div className={cn('flex items-center justify-center', clx)}>
+      <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>            
+      <span style={{fontSize: '17px',}}>&rsaquo;</span>
+    </div>
+  )
+})  
+
+const CheckoutButton: React.FC<ButtonProps & {
+  handleCheckout: () => void
+  showQuantity?: boolean
+  animateOnQuantityChange?: boolean
+  centerText?: boolean
+}> = ({
+  handleCheckout,
+  variant='primary',
+  rounded='lg',
+  className,
+  showQuantity=true,
+  animateOnQuantityChange=true,
+  centerText=true,
+  ...rest
+}) => {
+
+  return (
+    <Button 
+      {...rest}
+      onClick={handleCheckout} 
+      variant={variant}
+      rounded={rounded}
+      className={cn(
+        className, 
+        'flex justify-between items-stretch', 
+        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : ''
+      )}
+    >
+      {showQuantity && centerText && (
+        <IconAndQuantity clx='invisible' />
+      )}
+      <div className='flex justify-center items-center'>Checkout</div>
+      {showQuantity && (
+        <IconAndQuantity 
+          animateOnQuantityChange={animateOnQuantityChange}
+          iconClx='fill-fg-foreground'
+          digitClx='text-primary-fg leading-none font-bold font-sans' 
+        />
+      )}
+    </Button>
+  )
+}
+
+export default CheckoutButton

package/components/commerce/checkout-panel/mb-checkout-panel.tsx

@@ -32,12 +32,11 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & {
     <CartAccordian 
       icon={
         <BagButton 
-          noHoverEffects 
+          animateOnHover={false} 
           showIfEmpty 
           size='sm'
-          className=
-          'mr-1 relative w-5 h-6 sm:w-6 sm:h-7 '
-          iconClx='fill-foreground '
+          className='mr-1 relative w-5 h-6 sm:w-6 sm:h-7'
+          iconClx='fill-foreground'
         />
       } 
       className='flex items-center justify-center w-full' 

package/components/commerce/mobile-bag-drawer.tsx

@@ -33,7 +33,7 @@ const MobileBagDrawer: React.FC<{
         >
           <div className='flex flex-row items-center flex-none justify-center '>
             <BagButton 
-              noHoverEffects 
+              animateOnHover={false} 
               showIfEmpty 
               className=
               'mr-2 relative w-6 h-7'

package/components/header/desktop.tsx

@@ -25,7 +25,7 @@ const DesktopHeader: React.FC<{
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
   return (
-    <header className={cn('bg-background sticky z-header top-0  ', className)} >
+    <header className={cn('bg-background fixed z-header top-0 left-0 right-0', className)} >
       {/* md or larger */}
       <div className={
         'flex flex-row h-[80px] items-center  justify-between ' +

package/components/index.ts

@@ -10,7 +10,10 @@ export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
 
+
+export { default as BuyDrawer } from './commerce/buy-drawer'
 export { default as CheckoutPanel } from './commerce/checkout-panel'
+export { default as CheckoutButton } from './commerce/checkout-button'
 export { default as LoginPanel } from './auth/login-panel'
 export { default as AuthListener } from './auth/auth-listener'
 export { default as Scripts } from './scripts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.5.3",
+  "version": "5.0.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@hanzo/auth": "2.4.6",
-    "@hanzo/commerce": "6.4.7",
-    "@hanzo/ui": "3.6.5",
+    "@hanzo/commerce": "7.0.0",
+    "@hanzo/ui": "3.7.0",
     "@next/third-parties": "^14.1.0",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -47,6 +47,9 @@
     "react-social-icons": "^6.4.0"
   },
   "peerDependencies": {
+    "@hanzo/auth": "2.4.6",
+    "@hanzo/commerce": "6.4.7",
+    "@hanzo/ui": "3.6.5",
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "^0.344.0",
     "next": "14.1.3",

package/style/cart-animation.css

@@ -0,0 +1,29 @@
+@keyframes wiggle-larger {
+    0% { transform: rotate(0deg); }
+    18% { transform: rotate(10deg) scale(0.9); }
+    32% { transform: rotate(0deg) scale(1.05);; }
+    50% { transform: rotate(-10deg) scale(1.05); }
+    68% { transform: rotate(0deg) scale(1.1); }
+    84% { transform: rotate(10deg) scale(1); }
+  100% { transform: rotate(0deg) scale(1);}
+}
+
+@keyframes wiggle-smaller {
+    0% { transform: rotate(0deg); }
+    18% { transform: rotate(10deg) scale(1.05); }
+    32% { transform: rotate(0deg) scale(0.9);; }
+    50% { transform: rotate(-10deg) scale(0.9); }
+    68% { transform: rotate(0deg) scale(0.85); }
+    84% { transform: rotate(10deg) scale(1); }
+  100% { transform: rotate(0deg) scale(1);}
+}
+
+.wiggle-larger-animation,
+.item-added-to-cart-animation {
+  animation: wiggle-larger 350ms; 
+}
+
+.wiggle-smaller-animation,
+.item-removed-from-cart-animation  {
+  animation: wiggle-smaller 300ms; 
+}

package/style/checkout-animation.css

@@ -0,0 +1,23 @@
+@keyframes checkout-widget-fade-in {
+    0% { transform: scale(0.5); opacity: 0; }
+  100% { transform: scale(1); opacity: 1;}
+}
+
+.checkout-widget-appears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms; 
+}
+
+.checkout-widget-disappears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms; 
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+}
+
+.checkout-widget-appears-after-buy-drawer-closes {
+  animation-fill-mode: backwards;
+    /* Drawer is hardcoded to open in 0.5s.  We can start slightly sooner. */
+  animation-delay: 400ms;  
+}
+

package/style/lux-global.css

@@ -10,7 +10,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-.nextjs-toast-errors-parent {
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   display: none;
 }