@luxfi/ui 5.3.7

package/components/commerce/desktop-nav-menu.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { cn } from '@hanzo/ui/util'
+import type { ChildMenu, LinkDefExtended } from "../../site-def/main-nav"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@hanzo/ui/primitives'
+
+const DesktopNav: React.FC<{
+  links: LinkDefExtended[],
+  isMenuOpened: boolean,
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({ links, isMenuOpened, setIsMenuOpen }) => {
+
+  React.useEffect(() => {
+    const preventScroll = (e: WheelEvent | TouchEvent) => {
+      e.preventDefault();
+    };
+
+    if (isMenuOpened) {
+      window.addEventListener('wheel', preventScroll, { passive: false });
+      window.addEventListener('touchmove', preventScroll, { passive: false });
+      window.addEventListener('keydown', preventScrollKeys, { passive: false });
+    } else {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    }
+
+    return () => {
+      window.removeEventListener('wheel', preventScroll);
+      window.removeEventListener('touchmove', preventScroll);
+      window.removeEventListener('keydown', preventScrollKeys);
+    };
+  }, [isMenuOpened]);
+
+  const preventScrollKeys = (e: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleMouseEnter = React.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+
+  return links.length > 0 ? (
+    <NavigationMenu>
+      <NavigationMenuList>
+        {links.map((el, index) => (
+          <NavigationMenuItem key={index} className="!m-0">
+            {el.isAIMenu ? (
+              <Link href={el.href} legacyBehavior passHref>
+                <NavigationMenuLink className={cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent')}>
+                  {el.title}
+                </NavigationMenuLink>
+              </Link>
+            ) : el.title === "Cards" ? (
+              <>
+                <NavigationMenuTrigger
+                  className="text-muted-1 bg-transparent"
+                  onMouseEnter={handleMouseEnter}
+                  onFocus={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  onBlur={handleMouseLeave}
+                >
+                  <Link href={el.href} legacyBehavior passHref>
+                    {el.title}
+                  </Link>
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <div className="flex justify-center items-start">
+                    <div className="grid xl:grid-cols-3 w-full justify-center max-w-[750px]">
+                      {GroupChildMenu({ childs: el.childMenu, isCards: true })}
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </>
+            ) : (
+              <>
+                <NavigationMenuTrigger
+                  className="text-muted-1 bg-transparent"
+                  onMouseEnter={handleMouseEnter}
+                  onFocus={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  onBlur={handleMouseLeave}
+                >
+                  {
+                    el.href && el.href !== "" ?
+                      <Link href={el.href} legacyBehavior passHref>
+                        {el.title}
+                      </Link> : <>{el.title}</>
+                  }
+                </NavigationMenuTrigger>
+                <NavigationMenuContent
+                  className={cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass)}
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <div className="flex flex-row w-full justify-center">
+                    {GroupChildMenu({ childs: el.childMenu })}
+                  </div>
+                </NavigationMenuContent>
+              </>
+            )}
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  ) : null;
+};
+
+export default DesktopNav
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => (
+  <li key={title}>
+    <NavigationMenuLink asChild>
+      <a
+        ref={ref}
+        className={cn(
+          "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
+          className
+        )}
+        {...props}
+      >
+        <div className="text-sm font-medium leading-none">{title}</div>
+        <p className="line-clamp-3 text-sm leading-snug text-muted-1">
+          {children}
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+));
+ListItem.displayName = "ListItem"
+
+const GroupChildMenu = (params: { childs: ChildMenu[] | undefined, isCards?: boolean }) => {
+  const { childs, isCards = false } = params;
+
+  if (!childs) {
+    return null;
+  }
+
+  const groupedChildMenus = childs.reduce((grouped: Record<string, ChildMenu[]>, childLink) => {
+    if (childLink.groupName) {
+      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
+      grouped[childLink.groupName].push(childLink);
+    }
+    return grouped;
+  }, {});
+
+  const getChildExtraClass = (index: number) => {
+    if (isCards && (index === 3 || index === 4)) {
+      return "xl:-mt-32"
+    }
+    return ""
+  };
+
+  return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => (
+    <div key={groupName} className={cn("py-4 px-4 ", getChildExtraClass(index))}>
+      <h2 className="text-muted-1">{groupName}</h2>
+      <ul className="w-[200px] gap-3 md:w-[250px] lg:w-[250px]">
+        {childLinks.map((link) => (
+          <div className="flex justify-start items-center" key={link.title}>
+            {link.icon}
+            <ListItem key={link.title} title={link.title} href={link.href} className="ml-[14px]">
+              {link.contents}
+            </ListItem>
+          </div>
+        ))}
+      </ul>
+    </div>
+  ));
+};

package/components/commerce/drawer/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { CarouselBuyCard } from '@hanzo/commerce'
+
+import { 
+  useSelectAndBuy, 
+  useCommerceDrawer, 
+} from '../../../commerce/ui/context'
+
+import CommerceDrawer from './shell'
+import CheckoutButton from '../checkout-button'
+import Micro from './micro'
+
+const CommerceUIComponent: React.FC = observer(() => {
+
+  const buy = useSelectAndBuy()
+  const drawer = useCommerceDrawer()
+  const router = useRouter()
+
+  const handleCheckout = (): void => {
+    router.push('/checkout')
+  }
+
+  const handleHandleClicked = (): void => {
+
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+    }
+    else if (drawer.state === 'micro') {
+      buy.showRecentVariants()
+    }
+  }
+
+  const handleItemClicked = () => {
+    buy.showRecentVariants()
+  }
+
+  const handleCloseGesture = (): boolean => {
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+      return true // "handled!"
+    }
+    return false
+  }
+
+  return (
+    <CommerceDrawer 
+      handleHandleClicked={handleHandleClicked}
+      handleCloseGesture={handleCloseGesture}
+      drawerClx='flex flex-col'
+    >
+      {drawer.state === 'full' && (
+        /* The actual drawer is larger than the visible area (due to awkward
+        vaul impl.  So we have to ask the drawer for its currect snappoint 
+        and constrain layout to that.  
+        */
+        <div style={{height: drawer.snapPointPx - 24 /* fudge factor for handle area */}} >
+          <CarouselBuyCard 
+            skuPath={buy.currentSkuPath!} 
+            checkoutButton={
+              <CheckoutButton 
+                handleCheckout={handleCheckout} 
+                className='w-full min-w-[160px] sm:max-w-[320px]'
+              />
+            }
+            clx='justify-between h-full pb-3 gap-8'
+            addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
+            buttonsAreaClx='grow-0 shrink-0 mt-0'
+            selectorClx='max-w-[475px] justify-between grow'
+            
+          />
+        </div>
+      )}
+      {drawer.state === 'micro' && (
+        <Micro 
+          handleCheckout={handleCheckout}
+          handleItemClicked={handleItemClicked}
+          clx='w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]'
+        />
+      )}
+    </CommerceDrawer>
+  )
+})
+
+export default CommerceUIComponent

package/components/commerce/drawer/micro.tsx

@@ -0,0 +1,145 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, Image } from '@hanzo/ui/primitives'
+import { cn,  } from '@hanzo/ui/util'
+import type { LineItem } from '@hanzo/commerce/types'
+import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
+
+import CheckoutButton from '../checkout-button'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
+
+const CN = {
+    // h: mind padding!
+  mobile: { w: 36, h: 32 },
+  sm:  { w: 60, h: 34 },
+  desktop: { w: 60, h: 32 },
+}
+
+const Info: React.FC<{
+  item: LineItem
+  clx?: string
+}> = ({
+  item,
+  clx=''
+}) => {
+
+  const cmmc = useCommerce()
+  const family = cmmc.getFamilyById(item.familyId)
+
+  let topLine = family!.title
+  if (item.sku.startsWith('LXM-AG') || item.sku.startsWith('LXM-AU')) {
+    topLine = family!.parentTitle + ', ' + family!.title   
+  }
+
+  const optionLabel = item.optionLabelShort ?? item.optionLabel
+  const priceStr = formatCurrencyValue(item.price)
+
+  return (<>
+    <div className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
+      <p className='text-left text-xs'>{topLine}</p>
+      <div className='flex justify-between text-xxs'>
+        <div>{optionLabel}</div>
+        <div className='pl-2.5'>{priceStr}</div>
+      </div>
+    </div>
+    <div className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
+      <p className='text-left'>{topLine}</p>
+      <div className='flex justify-between'>
+        <div>{optionLabel}</div>
+        <div className='pl-2.5'>{priceStr}</div>
+      </div>
+    </div>
+  </>)
+}
+
+const PROMPT_COMMON_CLX = 'block absolute top-0 left-0 bg-transparent duration-400 transition-opacity' 
+
+const Micro: React.FC<{
+  clx?: string
+  handleCheckout: () => void
+  handleItemClicked: () => void 
+}> = observer(({
+  clx='',
+  handleCheckout,
+  handleItemClicked 
+}) => {
+
+  const drawer = useCommerceDrawer()
+  const cmmc = useCommerce()
+
+  return (        
+    <div className={cn(
+      (drawer.showRecent ? 'grid grid-cols-2' : 'flex justify-center items-center '),
+      (drawer.showRecent ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
+      'gap-2 md:gap-3 relative',
+      clx
+    )}>
+    {drawer.showRecent && (
+      <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
+        <p className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
+          <span className='invisible'>scrictly for layout</span>
+          {drawer.isMobile ? (
+            <span className={PROMPT_COMMON_CLX}>tap for options:</span>
+          ) : (<>
+            <span className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</span>
+            <span className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</span>
+          </>)}
+        </p>
+        <Button 
+          variant='ghost'
+          rounded={drawer.isMobile ? 'md' : 'lg'}
+          size={drawer.isMobile ? 'sm' : 'default'}
+          onClick={handleItemClicked}
+          className={cn(
+            'box-content',
+            'flex flex-row justify-between items-center gap-1',
+            '-ml-1.5',
+            'overflow-hidden ', 
+            'px-1 md:px-2 py-[2px]',
+            'border border-transparent group-hover:border-muted-3',
+            'group-hover:!bg-transparent',
+            '!min-w-0'
+          )}
+        >
+          {cmmc.recentItem?.item.img && (<>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
+          </>)} 
+          {cmmc.recentItem && (
+            <div className='grow w-full'>
+              <Info item={cmmc.recentItem.item} clx='w-full'/>
+            </div>
+          )}
+        </Button>
+      </div>
+    )}
+    {drawer.showCheckout && (
+      <div className={cn(
+        'flex flex-col w-full', 
+        (drawer.showRecent ? 'items-stretch' : 'items-center' ),
+        (drawer.isMobile ? 'justify-start' : 'justify-center')
+      )}>
+        {drawer.showRecent && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
+        <CheckoutButton 
+          handleCheckout={handleCheckout} 
+          variant='primary' 
+          size={drawer.isMobile ? 'xs' : 'lg'}
+          rounded={drawer.isMobile ? 'md' : 'lg'}
+          centerText={drawer.isMobile ? !drawer.showRecent : true}
+          className={cn(drawer.isMobile ? 
+            (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
+            :
+            (drawer.showRecent ? '' : 'w-[320px]'),
+            'text-sm font-semibold'
+          )} 
+        />
+      </div>
+    )}
+    </div>
+  )
+})
+
+export default Micro

package/components/commerce/drawer/shell.tsx

@@ -0,0 +1,85 @@
+'use client'
+import React, {type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  Drawer, 
+  DrawerContent, 
+  DrawerHandle,
+  type DrawerProps,
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import '../../../style/drawer-handle-overrides.css'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
+
+const CommerceDrawer: React.FC<PropsWithChildren & 
+  Omit<DrawerProps, 
+    'onOpenChange' | 
+    'open' | 
+    'snapPoints' | 
+    'modal' |
+    'setActiveSnapPoint' | 
+    'activeSnapPoint' 
+  > & 
+  {
+    handleHandleClicked: () => void
+    drawerClx?: string
+  }
+> = observer(({
+  children,
+  handleHandleClicked,
+  drawerClx='',
+  ...rest
+}) => {
+  
+  const drawer = useCommerceDrawer()
+
+  return (
+    <Drawer 
+      open={drawer.open} 
+      onOpenChange={() => {}} 
+      modal={drawer.modal} 
+      snapPoints={drawer.points}
+      activeSnapPoint={drawer.activePoint}
+      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
+      fastDragSkipsToEnd={false}
+      dragHandleOnly={true}
+      handleHandleClicked={handleHandleClicked}
+      extendHandleDragRegion={false}
+  //    debugOutput
+      {...rest}
+    >
+      <DrawerContent 
+        defaultHandle={false} 
+        className={cn(
+          'border-0',
+          drawer.isMobile ? 'pt-5' : 'pt-6',
+          'w-full h-full',
+        )}
+        // https://github.com/radix-ui/primitives/discussions/935
+        onOpenAutoFocus={(e) => {e.preventDefault()}}
+      >
+        <DrawerHandle 
+          className={cn(
+            'absolute top-0 left-0 right-0 mx-auto z-10',
+            'flex justify-center items-start',
+            'border-t rounded-t-lg border-muted-3',
+            drawer.isMobile ? 'h-5 touch-pan-y' : 'h-6',
+          )} 
+        >
+          <div className={cn(
+              // pseudo-handle
+            'rounded-[3px] bg-level-3',
+            drawer.isMobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
+            !drawer.isMobile ? 'cursor-grab active:cursor-grabbing' : '',
+          )} />
+        </DrawerHandle>
+        {children}
+      </DrawerContent>
+    </Drawer>
+  )
+})
+
+
+export default CommerceDrawer

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

@@ -0,0 +1,51 @@
+'use client'
+import React from 'react'
+
+import { Drawer, DrawerContent} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { CartPanel } from '@hanzo/commerce'
+
+import BagButton from './bag-button'
+
+const MobileBagDrawer: React.FC<{
+  open: boolean,
+  setOpen: (b: boolean) => void
+  handleCheckout: () => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  handleCheckout,
+  className='',
+}) => {
+  
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerContent className={cn('rounded-t-xl mt-6 pb-12 h-auto', className)} >
+        <CartPanel 
+          handleCheckout={handleCheckout} 
+          className='mt-4 mb-4 border-none py-0 px-4 w-full '
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          itemClx='mt-2'
+          totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <BagButton 
+              animateOnHover={false} 
+              showIfEmpty 
+              className=
+              'mr-2 relative w-6 h-7'
+              iconClx='fill-foreground '
+            />
+            <p className='font-heading text-foreground text-default'>Your Bag</p>
+          </div>
+          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
+        </CartPanel>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default MobileBagDrawer

package/components/commerce/mobile-login-button.tsx

@@ -0,0 +1,108 @@
+'use client'
+import React from "react"
+import { observer } from "mobx-react-lite"
+
+import {
+    Button,
+    LinkElement,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Separator
+} from '@hanzo/ui/primitives'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+
+import { useAuth } from "@hanzo/auth/service"
+
+import { Ethereum } from "@hanzo/auth/icons"
+import { Icons } from ".."
+
+const MobileAuthWidget: React.FC<{
+    noLogin?: boolean
+    className?: string
+    handleLogin?: () => void
+}> = observer(({
+    noLogin = false,
+    className
+}) => {
+    const auth = useAuth()
+    const handleLogin = () => {
+        window.location.href = "https://lux.id";
+      };
+
+    if (!auth) {
+        return null
+    }
+    if (!auth.loggedIn && typeof window !== 'undefined') {
+        return (noLogin ? null : (
+            (handleLogin) ? (
+                <div className="flex items-center py-1 px-1 gap-1">
+                    <Button
+                        variant='primary'
+                        className='text-base font-semibold !min-w-0 self-center flex-1'
+                        onClick={handleLogin}
+                    >
+                        Sign Up
+                    </Button>
+                    <Button
+                        variant='outline'
+                        className=' text-base font-semibold !min-w-0 self-center flex-1'
+                        onClick={handleLogin}
+                    >
+                        Log In
+                    </Button>
+                </div>
+            ) : (
+                <LinkElement
+                    def={{
+                        href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
+                        title: 'Login',
+                        variant: 'primary',
+                        newTab: false
+                    } satisfies LinkDef}
+                    className='h-8 w-fit !min-w-0'
+                />
+            )
+        ))
+    }
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    size='icon'
+                    className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+                >{auth.user?.email[0]}</Button>
+            </PopoverTrigger>
+            <PopoverContent className='bg-level-0'>
+                <div className="grid gap-4">
+                    <div className="space-y-2 truncate">
+                        {auth.user?.displayName ? (
+                            <>
+                                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
+                                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
+                            </>
+                        ) : (
+                            <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
+                        )}
+                        {auth.user?.walletAddress ? (
+                            <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
+                        ) : (
+                            <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+                                <Ethereum height={20} />Connect your wallet
+                            </Button>
+                        )}
+                    </div>
+                    <Separator />
+                    <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+
+})
+
+export default MobileAuthWidget