@luxfi/core 5.2.2 → 5.2.5

package/components/commerce/desktop-bag-popup.tsx

@@ -1,78 +1,78 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import { X } from 'lucide-react'
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverClose,
-} from "@hanzo/ui/primitives"
-
-import { cn } from '@hanzo/ui/util'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-import sendGAEvent from '../../next/analytics/google-analytics'
-
-const DesktopBagPopup: React.FC<{
-  triggerClx?: string  
-  popupClx?: string
-  trigger: React.ReactNode
-}> = ({
-  triggerClx='',
-  popupClx='',
-  trigger
-}) => {
-  const cmmc = useCommerce()
-
-  const [bagOpen, setBagOpen] = useState<boolean>(false)
-  const router = useRouter()
-
-  useEffect(() => {
-    if (bagOpen) {
-      sendGAEvent('view_cart', {
-        items: cmmc.cartItems.map((item) => ({
-          item_id: item.sku,
-          item_name: item.title,
-          item_category: item.familyId,
-          price: item.price,
-          quantity: item.quantity
-        })),
-        value: cmmc.cartTotal,
-        currency: 'USD',
-      })
-    }
-  }, [bagOpen])
-
-  return (
-    <Popover open={bagOpen} onOpenChange={setBagOpen}>
-      <PopoverTrigger className={triggerClx}>
-        {trigger}
-      </PopoverTrigger>
-      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
-        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <CartPanel 
-          handleCheckout={() => {router.push('/checkout')}} 
-          className='mt-4 mb-4 border-none py-0 px-4'
-          listClx='rounded-sm pr-3'
-          scrollAfter={5}
-          scrollHeightClx='h-[70vh]'
-          itemClx='mt-3'
-          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
-          buttonClx='max-w-[220px] flex-none'
-        >
-          <div className='flex flex-row items-center flex-none justify-center '>
-            <Icons.bag  className='mr-2 relative w-6 h-7 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>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export default DesktopBagPopup
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui/util'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+const DesktopBagPopup: React.FC<{
+  triggerClx?: string  
+  popupClx?: string
+  trigger: React.ReactNode
+}> = ({
+  triggerClx='',
+  popupClx='',
+  trigger
+}) => {
+  const cmmc = useCommerce()
+
+  const [bagOpen, setBagOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent('view_cart', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD',
+      })
+    }
+  }, [bagOpen])
+
+  return (
+    <Popover open={bagOpen} onOpenChange={setBagOpen}>
+      <PopoverTrigger className={triggerClx}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <CartPanel 
+          handleCheckout={() => {router.push('/checkout')}} 
+          className='mt-4 mb-4 border-none py-0 px-4'
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          scrollHeightClx='h-[70vh]'
+          itemClx='mt-3'
+          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <Icons.bag  className='mr-2 relative w-6 h-7 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>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopBagPopup

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

@@ -0,0 +1,235 @@
+"use client"
+
+import * as React from "react"
+
+import Link from "next/link"
+import { cn } from '@hanzo/ui/util'
+import type { LinkDef } from '@hanzo/ui/types'
+import type { LinkDefExtended } from "../../site-def/main-nav"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@hanzo/ui/primitives'
+import Warpcast from "../icons/warpcast"
+
+// const components: { title: string; href: string; description: string }[] = [
+//   {
+//     title: "Alert Dialog",
+//     href: "/docs/primitives/alert-dialog",
+//     description:
+//       "A modal dialog that interrupts the user with important content and expects a response.",
+//   },
+//   {
+//     title: "Hover Card",
+//     href: "/docs/primitives/hover-card",
+//     description:
+//       "For sighted users to preview content available behind a link.",
+//   },
+//   {
+//     title: "Progress",
+//     href: "/docs/primitives/progress",
+//     description:
+//       "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+//   },
+//   {
+//     title: "Scroll-area",
+//     href: "/docs/primitives/scroll-area",
+//     description: "Visually or semantically separates content.",
+//   },
+//   {
+//     title: "Tabs",
+//     href: "/docs/primitives/tabs",
+//     description:
+//       "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+//   },
+//   {
+//     title: "Tooltip",
+//     href: "/docs/primitives/tooltip",
+//     description:
+//       "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+//   },
+// ]
+
+// export function NavigationMenuDemo() {
+//   return (
+//     <NavigationMenu>
+//       <NavigationMenuList>
+//         <NavigationMenuItem>
+//           <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+//           <NavigationMenuContent>
+//             <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+//               <li className="row-span-3">
+//                 <NavigationMenuLink asChild>
+//                   <a
+//                     className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+//                     href="/"
+//                   >
+//                     {/* <Icons.logo className="h-6 w-6" /> */}
+//                     <div className="mb-2 mt-4 text-lg font-medium">
+//                       shadcn/ui
+//                     </div>
+//                     <p className="text-sm leading-tight text-muted-foreground">
+//                       Beautifully designed components that you can copy and
+//                       paste into your apps. Accessible. Customizable. Open
+//                       Source.
+//                     </p>
+//                   </a>
+//                 </NavigationMenuLink>
+//               </li>
+//               <ListItem href="/docs" title="Introduction">
+//                 Re-usable components built using Radix UI and Tailwind CSS.
+//               </ListItem>
+//               <ListItem href="/docs/installation" title="Installation">
+//                 How to install dependencies and structure your app.
+//               </ListItem>
+//               <ListItem href="/docs/primitives/typography" title="Typography">
+//                 Styles for headings, paragraphs, lists...etc
+//               </ListItem>
+//             </ul>
+//           </NavigationMenuContent>
+//         </NavigationMenuItem>
+//         <NavigationMenuItem>
+//           <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+//           <NavigationMenuContent>
+//             <ul className="w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-1 lg:w-[600px] ">
+//               {components.map((component) => (
+//                 <ListItem
+//                   key={component.title}
+//                   title={component.title}
+//                   href={component.href}
+//                 >
+//                   {component.description}
+//                 </ListItem>
+//               ))}
+//             </ul>
+//           </NavigationMenuContent>
+//         </NavigationMenuItem>
+//         <NavigationMenuItem>
+//           <Link href="/docs" legacyBehavior passHref>
+//             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+//               Documentation
+//             </NavigationMenuLink>
+//           </Link>
+//         </NavigationMenuItem>
+//       </NavigationMenuList>
+//     </NavigationMenu>
+//   )
+// }
+
+
+const DesktopNav: React.FC<{
+  links: LinkDefExtended[],
+}> = ({
+  links
+
+}) => (
+    links.length > 0 ? (
+      <NavigationMenu>
+        <NavigationMenuList>
+          {links.map((el, index) => {
+
+            if (el.isAIMenu) {
+              return (
+                <NavigationMenuItem>
+                  <Link href={el.href} legacyBehavior passHref>
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                      {el.title}
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              )
+            } else if (el.title == 'Community') {
+              return (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid md:grid-cols-2 gap-3 p-6 md:w-[400px] lg:w-[500px]">
+                      <li className="row-span-3">
+                        <NavigationMenuLink asChild>
+                          <a
+                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                            href={el.href}
+                          >
+                            <Warpcast />
+                            <div className="mb-2 mt-4 text-lg font-medium">
+                              {el.title}
+                            </div>
+                            <p className="text-sm leading-tight text-muted-foreground">
+                              {el.details}
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                      {el.childMenu?.map((component) => (
+                        <div className="relative flex items-center my-2">
+                          <div className="mr-2 mt-0">
+                          {component.icon}
+                          </div>
+                          <ListItem href={component.href} title={component.title}>
+                            {component.contents}
+                          </ListItem>
+                        </div>
+                      ))}
+
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              )
+            } else {
+              return (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[500px] ">
+                      {el.childMenu?.map((component) => (
+                        <ListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
+                          {component.contents}
+                        </ListItem>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              )
+            }
+
+          })}
+        </NavigationMenuList>
+      </NavigationMenu>
+    ) : null
+  )
+export default DesktopNav
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <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:bg-level-1 hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-3 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"

package/components/commerce/drawer/index.tsx

@@ -1,116 +1,116 @@
-'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, 
-  useRecentActivity 
-} 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 recent = useRecentActivity()
-  const router = useRouter()
-  
-
-  const handleCheckout = (): void => {
-    router.push('/checkout')
-  }
-
-    // see handleCloseGesture()
-  const setOpen = (b: boolean): void => {
-    if (!b) {
-      if (!drawer.closedByUser) {
-        drawer.setClosedByUser(true)
-      }
-    }
-  }
-
-  const handleHandleClicked = (): void => {
-
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-    }
-    else if (drawer.state === 'micro') {
-      if (drawer.showAdded) {
-        buy.showVariants(recent.item?.sku ?? '')
-      }
-        // checkout only
-      else {
-        drawer.setClosedByUser(true)
-      }
-    }
-  }
-
-  const handleItemClicked = () => {
-    buy.showVariants(recent.item?.sku ?? '')
-  }
-
-  const handleCloseGesture = (): boolean => {
-    if (drawer.state === 'full') {
-      buy.hideVariants()
-      return true // "handled!"
-    }
-    return false
-  }
-
-
-  return (
-    <CommerceDrawer 
-      open={drawer.open} 
-      setOpen={setOpen}
-      snapPoints={drawer.points}
-      modal={drawer.modal}
-      activeSnapPoint={drawer.activePoint}
-      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
-      handleHandleClicked={handleHandleClicked}
-      handleCloseGesture={handleCloseGesture}
-      micro={drawer.state === 'micro'}
-      mobile={drawer.isMobile}
-      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]'
-              />
-            }
-            onQuantityChanged={recent.quantityChanged.bind(recent)}
-            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
+'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, 
+  useRecentActivity 
+} 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 recent = useRecentActivity()
+  const router = useRouter()
+  
+
+  const handleCheckout = (): void => {
+    router.push('/checkout')
+  }
+
+    // see handleCloseGesture()
+  const setOpen = (b: boolean): void => {
+    if (!b) {
+      if (!drawer.closedByUser) {
+        drawer.setClosedByUser(true)
+      }
+    }
+  }
+
+  const handleHandleClicked = (): void => {
+
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+    }
+    else if (drawer.state === 'micro') {
+      if (drawer.showAdded) {
+        buy.showVariants(recent.item?.sku ?? '')
+      }
+        // checkout only
+      else {
+        drawer.setClosedByUser(true)
+      }
+    }
+  }
+
+  const handleItemClicked = () => {
+    buy.showVariants(recent.item?.sku ?? '')
+  }
+
+  const handleCloseGesture = (): boolean => {
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+      return true // "handled!"
+    }
+    return false
+  }
+
+
+  return (
+    <CommerceDrawer 
+      open={drawer.open} 
+      setOpen={setOpen}
+      snapPoints={drawer.points}
+      modal={drawer.modal}
+      activeSnapPoint={drawer.activePoint}
+      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
+      handleHandleClicked={handleHandleClicked}
+      handleCloseGesture={handleCloseGesture}
+      micro={drawer.state === 'micro'}
+      mobile={drawer.isMobile}
+      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]'
+              />
+            }
+            onQuantityChanged={recent.quantityChanged.bind(recent)}
+            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