@luxfi/core 5.3.7 → 10.0.0

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

@@ -1,102 +0,0 @@
-'use client'
-import React from 'react'
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
-import MobileNavMenuAI from './mobile-nav-menu-ai'
-import MobileNavMenuItem from './mobile-nav-menu-item'
-import MobileAuthWidget from './mobile-login-button'
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
-import { ChevronDown } from 'lucide-react'
-import Link from 'next/link'
-
-const MobileNav: React.FC<{
-  currentAs: string | undefined
-  links: LinkDefExtended[]
-  className?: string
-  commonItemClx?: string | ((def: LinkDef) => string)
-  setChatbotOpen: (open: boolean) => void
-  setMenuOpen: (open: boolean) => void
-  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
-}> = ({
-  currentAs,
-  links,
-  setMenuState,
-  className = '',
-  commonItemClx,
-  setChatbotOpen,
-  setMenuOpen
-}) => (
-    links.length > 0 ? (
-      <div className={cn('flex flex-col h-full', className)}>
-        <MobileNavMenuAI setMenuOpen={setMenuOpen} />
-        <div className="flex flex-col flex-1 overflow-auto">
-          <Accordion type="single" collapsible className='w-full h-full'>
-            {links.map((el, index) => {
-              const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
-              const variant = el.variant ?? 'link'
-              let internalClx = variant === 'link'
-                ? ' text-muted hover:text-foreground active:text-accent rounded-none'
-                : ' min-w-0'
-
-              if (currentAs && currentAs === el.href) {
-                internalClx += ' pointer-events-none'
-                if (variant === 'link') {
-                  internalClx += ' text-accent'
-                }
-              }
-
-              if (!el.isAIMenu) {
-                return (
-                  <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0 px-6'>
-                    <AccordionTrigger className={cn(internalClx, itemClx, '')}>
-                      <div className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
-                        {el.title}
-                      </div>
-                      <ChevronDown className="w-4 h-4 mr-3" />
-                    </AccordionTrigger>
-                    <AccordionContent>
-                      {el.childMenu && (
-                        <div className="px-4">
-                          {Object.entries(el.childMenu.reduce((acc, child) => {
-                            const group = acc[child.groupName ? child.groupName : ""] || []
-                            group.push(child)
-                            acc[child.groupName ? child.groupName : ""] = group
-                            return acc
-                          }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
-                            <div key={groupName}>
-                              <div className="mt-4 mb-4 font-light text-muted-1">{groupName}</div>
-                              {children.map((child, childIndex) => (
-                                <div key={childIndex} className="m-2">
-                                  <div className="flex items-center py-1">
-                                    <span>
-                                      {child.icon && child.icon}
-                                    </span>
-                                    <Link
-                                      href={child.href}
-                                      className="text-muted-2 hover:underline ml-5 hover:text-primary"
-                                      target={child.newTab ? '_blank' : '_self'}
-                                      rel="noopener noreferrer"
-                                    >
-                                      {child.title}
-                                    </Link>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </AccordionContent>
-                  </AccordionItem>
-                )
-              }
-            })}
-          </Accordion>
-        </div>
-        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
-      </div>
-    ) : null
-  );
-
-export default MobileNav;

package/components/contact-dialog/contact-form.tsx

@@ -1,113 +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,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@hanzo/ui/primitives'
-
-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/core/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.tsx

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

package/components/header/index.tsx

@@ -1,50 +0,0 @@
-'use client'
-import React from 'react'
-
-import type { SiteDef } from '../../site-def'
-
-import DesktopHeader from './desktop'
-import MobileHeader from './mobile'
-import { cn } from '@hanzo/ui/util'
-import { ChatWidget } from '../../components'
-
-const Header: React.FC<{
-  siteDef: SiteDef
-  className?: string
-}> = ({
-  siteDef,
-  className = ''
-}) => {
-
-    // TODO
-    const [open, setOpen] = React.useState<boolean>(false);
-
-    const { nav: { common, featured }, currentAs } = siteDef
-    const links = (featured) ? [...common, ...featured] : common
-    const isDesktopView = (): boolean => {
-      if (typeof window === 'undefined') return false 
-      return window.innerWidth > 768 
-    }
-
-    return (<>
-      <DesktopHeader
-        className={cn(className, 'hidden md:flex')}
-        links={links}
-        currentAs={currentAs}
-      />
-      <MobileHeader
-        className={cn(className, 'md:hidden')}
-        links={links}
-        currentAs={currentAs}
-        setChatbotOpen={setOpen}
-      />
-        <ChatWidget
-          title='LUX'
-          subtitle='AI'
-          chatbotUrl='https://lux.chat/iframe'
-          suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
-        />
-    </>)
-  }
-
-export default Header

package/components/header/mobile.tsx

@@ -1,163 +0,0 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { AuthWidget, LoginPanel } from '@hanzo/auth/components'
-import sendGAEvent from '../../next/analytics/google-analytics'
-import * as Icons from '../icons'
-
-import { Logo } from '..'
-
-import MenuToggleButton from '../commerce/mobile-menu-toggle-button'
-import BagButton from '../commerce/bag-button'
-import MobileBagDrawer from '../commerce/mobile-bag-drawer'
-import NavMenu from '../commerce/mobile-nav-menu'
-
-const bagClx = 'mt-4 mb-8 border-none py-0 px-4 w-full ' +
-  'sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] ' +
-  'sm:animate-in sm:zoom-in-90 '
-
-const MobileHeader: React.FC<{
-  currentAs: string | undefined
-  links: LinkDef[]
-  className?: string,
-  setChatbotOpen: (open: boolean) => void,
-}> = ({
-  currentAs,
-  links,
-  className = '',
-  setChatbotOpen,
-}) => {
-    const cmmc = useCommerce()
-    const [menuState, setMenuState] = useState<'closed' | 'nav' | 'login' | 'bag'>('closed')
-    const [bagDrawerOpen, setBagDrawerOpen] = useState<boolean>(false)
-    const router = useRouter()
-
-    useEffect(() => {
-      if (menuState === 'bag' || bagDrawerOpen) {
-        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',
-        })
-      }
-    }, [menuState, bagDrawerOpen])
-
-    const menuOpen = () => (menuState !== 'closed')
-
-    const onLoginChanged = (token: string) => {
-      // by def, menu was in state 'login'
-      if (!!token) { setMenuState('nav') }
-    }
-
-    const setMenuOpen = (open: boolean) => {
-      if (!open) {
-        setMenuState('closed')
-      }
-      else {
-        setMenuState('nav')
-      }
-    }
-
-    const handleCheckout = () => {
-      setMenuState('closed')
-      setBagDrawerOpen(false)
-      router.push('/checkout')
-    }
-
-    const openBag = () => {
-      if (menuOpen()) {
-        setMenuState('bag')
-      }
-      else {
-        setBagDrawerOpen(true)
-      }
-    }
-    // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
-    return (<>
-      <header className={cn(
-        `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
-        className
-      )}>
-        {/* smaller than md: mobile style drawer menu; h-11 is 44px, the standard mobile header height */}
-        <div className='w-full h-full flex flex-row justify-between items-center font-bold pr-5'>
-          <Logo href='/' size='md' outerClx={'p-6 h-full'} variant='text-only' />
-          {/* Not that key to the cross-fade effect 
-            is that this is **on top of** the logo. */}
-          {menuOpen() && (
-            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
-            'flex flex-row ' +
-            'bg-background animate-mobile-menu-open'
-          }>
-              <Icons.Avatar className='self-center ' />
-            </div>
-          )}
-          <div className='flex gap-0 flex-row'>
-            <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
-            <MenuToggleButton className='text-foreground' open={menuOpen()} setOpen={setMenuOpen} />
-          </div>
-
-        </div>
-      </header>
-      <MobileBagDrawer
-        className=''
-        open={bagDrawerOpen}
-        setOpen={setBagDrawerOpen}
-        handleCheckout={handleCheckout}
-      />
-      {menuOpen() && (
-        <div className={
-          'fixed top-0 left-0 w-full h-full ' +
-          // z must below header itself
-          'flex flex-column bg-background z-below-header animate-mobile-menu-open'
-        }>
-          {menuState === 'login' ? (
-            <LoginPanel noHeading onLoginChanged={onLoginChanged} className='sm:animate-in sm:zoom-in-90' />
-          ) : (
-            menuState === 'bag' ? (
-
-              <CartPanel
-                handleCheckout={() => { router.push('/checkout') }}
-                className={bagClx}
-                listClx='rounded-sm'
-                scrollAfter={6}
-                scrollHeightClx='h-[80vh]'
-                itemClx='mt-2'
-                totalClx='sticky px-1 pr-2 border rounded-sm -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-4 h-5 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>
-
-            ) : ( /* menuState === 'nav' */
-              <NavMenu
-                currentAs={currentAs}
-                links={links}
-                className='sm:animate-in sm:zoom-in-90 w-full'
-                commonItemClx='px-0 text-xl h-16 justify-start '
-                setMenuState={setMenuState}
-                setChatbotOpen={setChatbotOpen}
-                setMenuOpen={setMenuOpen}
-              />
-            )
-          )}
-        </div>
-      ) /* menuOpen */}
-    </>)
-  }
-
-export default MobileHeader