@luxfi/ui 8.0.0 → 8.2.0

package/src/site/components/commerce/drawer/shell.tsx

@@ -0,0 +1,83 @@
+'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 { Box, cn } from '@hanzo/ui'
+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: Event) => { 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',
+          )} 
+        >
+          <Box 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/src/site/components/contact-dialog/contact-form.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import React, { useTransition } from 'react'
+
+import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+  // @ts-ignore
+import validator from 'validator'
+
+import { Loader2 } from 'lucide-react'
+
+import {
+  Button,
+  Input,
+} from '@hanzo/ui/primitives'
+
+import { Box, Form, FormControl, FormField, FormItem, FormMessage, css } from '@hanzo/ui'
+import type { SubmitServerAction } from '@hanzo/ui/types'
+import type { ContactInfo } from '../../types'
+
+const ContactFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "Email must be provided." })
+    .email("Invalid email."),
+  phone: z
+    .string()
+    .min(1, { message: "Telephone must be provided." })
+    .refine(validator.isMobilePhone, { message: "Invalid format." })
+})
+
+type ContactFormSchemaType = z.infer<typeof ContactFormSchema>
+
+const ContactForm: React.FC<{
+  onSubmit: (data: ContactFormSchemaType, enc: any) => void
+  enclosure: any
+}> = ({
+  onSubmit: _onSubmit,
+  enclosure
+}) => {
+
+  const form = useForm<ContactFormSchemaType>({
+    resolver: zodResolver(ContactFormSchema),
+    defaultValues: {
+      email: '',
+      phone: '',
+    },
+  })
+
+  const [isPending, startTransition] = useTransition()
+
+  const onSubmit: SubmitHandler<ContactFormSchemaType> = (data) => {
+    // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
+    // @ts-ignore
+    startTransition(async () => {
+      await _onSubmit(data, enclosure)
+    })
+  }
+
+  const MyFormItem: React.FC<{ 
+    field: ControllerRenderProps<ContactFormSchemaType, 'email'> | ControllerRenderProps<ContactFormSchemaType, 'phone'>  
+    placeholder: string
+  }> = ({
+    field,
+    placeholder
+  }) => (
+  <FormItem className="space-y-0" >
+    <FormControl>
+      <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
+    </FormControl>
+    <Box className="flex flex-row justify-start items-stretch gap-2">
+      <FormMessage />
+    </Box>
+  </FormItem>
+)
+
+  return (
+    <Form {...form}>
+      <Box tag="form" onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
+        <div className='flex flex-col justify-start items-stretch mt-4'>
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
+        />
+        <FormField
+          control={form.control}
+          name='phone'
+            // @ts-ignore
+          render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
+        />
+          <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
+            {isPending ? (<>
+              <Loader2 style={css('mr-2 h-4 w-4 animate-spin')} />
+              Please wait
+              </>
+            ) : (
+              <>Submit</>
+            )}
+          </Button>
+        </div>
+      </Box>
+    </Form>
+  )
+}
+
+export default ContactForm

package/src/site/components/contact-dialog/disclaimer.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Disclaimer: React.FC = () => (
+  <div>
+    By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
+    Message and data rates may apply. Message frequency varies. 
+    You can unsubscribe at any time by replying STOP. 
+    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
+  </div>
+)
+
+export default Disclaimer
+

package/src/site/components/contact-dialog/index.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import type { ButtonModalProps} from '@hanzo/ui/types'
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@hanzo/ui/primitives'
+
+import ContactForm from './contact-form'
+import Disclaimer from './disclaimer'
+
+const ContactDialog: React.FC<ButtonModalProps> = ({
+  open,
+  onOpenChange,
+  buttonText,
+  buttonProps,
+  title,
+  byline,
+  action,
+  actionEnclosure
+}) => {
+  const [success, setSuccess] = useState(false)
+
+  const onSubmit = async (formData: any, enclosure: any) => {
+    const result = (await action(formData, enclosure)) as { success?: boolean }
+    if (result.success) {
+      setSuccess(true)
+    }
+  }
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} >
+      <DialogTrigger asChild>
+        <Button {...buttonProps} >{buttonText}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
+        <DialogHeader className='py-6 text-foreground'>
+          <DialogTitle className='text-4xl text-center text-inherit'>{title}</DialogTitle>
+          {byline && (<DialogDescription className='text-inherit text-lg text-center'>{byline} </DialogDescription>)}
+        </DialogHeader>
+        <div className='px-8 pb-8 rounded-e-lg flex flex-col justify-start items-center'>
+          {success ? (
+            <p>{(actionEnclosure as { reply?: string } | undefined)?.reply}</p>
+          ) : (
+            <ContactForm onSubmit={onSubmit} enclosure={actionEnclosure}/>
+          )}
+          <div className='text-muted-1 text-xs mt-4' >
+            <Disclaimer />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ContactDialog

package/src/site/components/copyright.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Box } from '@hanzo/ui'
+
+const FIRST = 2020
+
+const Copyright: React.FC<{
+  className?: string
+}> = ({
+  className=''
+}) => {
+
+  const year = new Date().getFullYear()
+  const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
+
+  return (
+    <Box className={className}>
+      {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Industries Inc.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
+    </Box>
+  )
+}
+
+export default Copyright

package/src/site/components/drawer-margin.tsx

@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+
+import { Box, cn } from '@hanzo/ui'
+import { useCommerceDrawer } from '../commerce/ui/context'
+import { observer } from 'mobx-react-lite'
+
+const DrawerMargin: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const drawer = useCommerceDrawer()
+  if (!drawer) {
+    throw new Error("DrawerMargin must be used with a CommerceUIContext!")
+  }
+  return (
+    <Box 
+      className={cn('transition-height', clx)} 
+      style={{
+        height: drawer.state === 'micro' ? drawer.microHeight : 0
+      }}
+    />
+  )
+})
+
+export default DrawerMargin

package/src/site/components/footer-nav.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { NavItems } from '@hanzo/ui/primitives'
+
+  // NavItems styles each item via a callback, and a callback cannot cross the
+  // server/client boundary. Creating it here keeps Footer itself on the server.
+const FooterNav: React.FC<{
+  items: LinkDef[]
+  currentAs?: string
+  className?: string
+}> = ({
+  items,
+  currentAs,
+  className = ''
+}) => (
+  <NavItems
+    items={items}
+    currentAs={currentAs}
+    as='nav'
+    className={className}
+    itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
+      'font-nav text-[15px]/[1.3] font-medium tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500'
+      :
+      'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500'
+    )}
+  />
+)
+
+export default FooterNav

package/src/site/components/footer.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { NavItems } from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+import Copyright from './copyright'
+import type { SiteDef } from '../site-def'
+import { legal } from '../site-def/footer/legal'
+import FooterNav from './footer-nav'
+import Logo from './logo'
+
+const Footer: React.FC<{
+  siteDef: SiteDef,
+  className?: string,
+  noHorizPadding?: boolean
+}> = ({
+  siteDef,
+  className='',
+  noHorizPadding=false
+}) => {
+
+  const { footer, aboveCopyright } = siteDef
+  const smGridCols = Math.floor(footer.length/2)
+  const smGridColsClx = `sm:grid-cols-${smGridCols} `
+  const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
+
+  return (
+    <Box tag="footer" className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+      <Box className={
+        (noHorizPadding ? '' : 'px-5 md:px-8 ') +
+        'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
+        'md:w-full sm:justify-items-center md:mx-0 lg:w-full ' +
+        'md:flex md:flex-row md:justify-between px-[24px]' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' variant='wordmark' />
+        </div>
+        {footer.map((defs: LinkDef[], index: number) => {
+
+          const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ? 
+            'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
+
+          return (
+            <FooterNav
+              items={defs}
+              currentAs={siteDef.currentAs}
+              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' +
+                'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
+                xsColSpanClx
+              )}
+              key={index + 1}
+            />
+          )
+        })}
+      </Box>
+      <div className='md:mt-[2vh]'>
+      {_aboveCopyright.length > 0 && (
+        <NavItems
+          items={_aboveCopyright} 
+          as='div' 
+          className="flex flex-row justify-center gap-4 mb-2" 
+          itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
+        />
+      )} 
+        <Copyright className='text-sm text-center text-muted-3'/>
+      </div>
+    </Box>
+  )
+}
+
+export default Footer
+// flex flex-col justify-between gap-6

package/src/site/components/header/desktop-nav-menu.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+import { Box, cn, css } from '@hanzo/ui'
+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 handleContentMouseMove = () => {
+    setIsMenuOpen(false)
+  }
+
+  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} style={css(cn(navigationMenuTriggerStyle(), ' text-muted-1 bg-transparent'))}>
+                {el.title}
+              </Link>
+            ) : el.title === 'Cards' ? (
+              <>
+                <NavigationMenuTrigger
+                  className='text-muted-1 bg-transparent'
+                  onMouseEnter={handleMouseEnter}
+                  onFocus={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  onBlur={handleMouseLeave}
+                >
+                  <Link href={el.href}>
+                    {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]'
+                      onMouseLeave={handleContentMouseMove}
+                    >
+                      {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}>
+                        {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'
+                    onMouseLeave={handleContentMouseMove}
+                  >
+                    {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>
+      <Box tag="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>
+      </Box>
+    </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) => (
+    <Box 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>
+    </Box>
+  ))
+}

package/src/site/components/header/desktop.tsx

@@ -0,0 +1,65 @@
+import React, { type PropsWithChildren } from 'react'
+
+import { Box, cn } from '@hanzo/ui'
+import AuthWidget from '../auth/widget'
+
+import Logo, { type LogoVariant } from '../logo'
+
+import DesktopBagPopup from '../commerce/desktop-bag-popup'
+import BagButton from '../commerce/bag-button'
+import DesktopNav from './desktop-nav-menu'
+
+
+import type { LinkDef } from '@hanzo/ui/types'
+
+const DesktopHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+  noAuth?: boolean
+  noCommerce?: boolean
+  logoVariant?: LogoVariant
+} & PropsWithChildren> = ({
+  links,
+  className = '',
+  noAuth=false,
+  noCommerce=false,
+  children,
+  logoVariant='full'
+}) => {
+    const [isMenuOpened, setIsMenuOpen] = React.useState(false);
+
+    // 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 (
+      <Box tag="header"  id='DESKTOP_HEADER' className={cn(
+        'bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', 
+        className, 
+        isMenuOpened ? ' h-full' : ''
+      )} >
+        {/* md or larger */}
+        <Box className={
+          'flex flex-row h-[80px] items-center justify-between ' +
+          'mx-[24px] w-full max-w-screen'
+        }>
+          <Logo size={logoVariant === 'mark' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
+          <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant={logoVariant} />
+          {/* md or larger */}
+          <div className='flex w-full gap-4 items-center justify-center'>
+            <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
+          </div>
+          <div className='flex items-center'>
+            {!noCommerce && (
+              <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+            )}
+            {!noAuth && <AuthWidget />}
+            {children}
+          </div>
+        </Box>
+      </Box>
+    )
+  }
+
+export default DesktopHeader
+
+