@luxfi/ui 5.5.3 → 6.0.0

package/components/commerce/drawer/shell.tsx

@@ -1,85 +0,0 @@
-'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/contact-dialog/contact-form.tsx

@@ -1,116 +0,0 @@
-'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 {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@hanzo/ui/form'
-
-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>
-    <div className="flex flex-row justify-start items-stretch gap-2">
-      <FormMessage />
-    </div>
-  </FormItem>
-)
-
-  return (
-    <Form {...form}>
-      <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 className="mr-2 h-4 w-4 animate-spin" />
-              Please wait
-              </>
-            ) : (
-              <>Submit</>
-            )}
-          </Button>
-        </div>
-      </form>
-    </Form>
-  )
-}
-
-export default ContactForm

package/components/contact-dialog/disclaimer.tsx

@@ -1,13 +0,0 @@
-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/components/contact-dialog/index.tsx

@@ -1,64 +0,0 @@
-'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)
-    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?.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/components/copyright.tsx

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

package/components/drawer-margin.tsx

@@ -1,28 +0,0 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@hanzo/ui/util'
-import { useCommerceDrawer } from '@luxfi/ui/commerce'
-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 (
-    <div 
-      className={cn('transition-height', clx)} 
-      style={{
-        height: drawer.state === 'micro' ? drawer.microHeight : 0
-      }}
-    />
-  )
-})
-
-export default DrawerMargin

package/components/footer.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { NavItems } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import Copyright from './copyright'
-import type { SiteDef } from '../site-def'
-import { legal } from '../site-def/footer/legal'
-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 (
-    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
-      <div 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='text-only' />
-        </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 (
-            <NavItems
-              items={defs} 
-              currentAs={siteDef.currentAs}
-              as='nav' 
-              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}
-              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'
-              )}
-            /> 
-          )
-        })}
-      </div>
-      <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>
-    </footer>
-  )
-}
-
-export default Footer
-// flex flex-col justify-between gap-6

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

@@ -1,204 +0,0 @@
-'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 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} 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]'
-                      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} 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'
-                    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>
-      <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/header/desktop.tsx

@@ -1,65 +0,0 @@
-import React, { type PropsWithChildren } from 'react'
-
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
-
-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='text-only'
-}) => {
-    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 (
-      <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 */}
-        <div className={
-          'flex flex-row h-[80px] items-center justify-between ' +
-          'mx-[24px] w-full max-w-screen'
-        }>
-          <Logo size={logoVariant === 'logo-only' ? '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' />} />
-            )}
-            <AuthWidget noLogin={noAuth}/>
-            {children}
-          </div>
-        </div>
-      </header>
-    )
-  }
-
-export default DesktopHeader
-
-