@luxfi/ui 5.5.3 → 6.0.0

package/components/auth/signup-panel.tsx

@@ -1,113 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-
-import { setCookie } from 'cookies-next'
-
-import { cn } from '@hanzo/ui/util'
-import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login, SignupPanel as Signup } from '@hanzo/auth/components'
-
-import { LuxLogo } from '../icons'
-import Logo from '../logo'
-import { EmblaAutoplay } from '..'
-import { legal } from '../../site-def/footer'
-
-const SignupPanel: React.FC<{
-  close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
-  className?: string
-  reviews: { text: string, author: string, href: string }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({
-  close,
-  getStartedUrl = '/',
-  redirectUrl,
-  className = '',
-  reviews,
-  setIsLogin
-}) => {
-    const router = useRouter()
-
-    const termsOfServiceUrl = legal.find(({ title }) => title === 'Terms and Conditions')?.href || ''
-    const privacyPolicyUrl = legal.find(({ title }) => title === 'Privacy Policy')?.href || ''
-    const domains = ['lux.id', 'lux.credit', 'lux.market', 'lux.network', 'lux.shop', 'wallet.lux.network', 'safe.lux.network', 'lux.finance', 'lux.exchange', 'lux.quest']
-
-    // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
-    // Otherwise, the functionality is split across modules! (and client/fw!) 
-    // (This was never my intent w the onLoginChanged callback.)
-    const onLogin = (token: string) => {
-      for (let i = 0; i < domains.length; i++) {
-        setCookie('auth-token', token, {
-          domain: domains[i],
-          path: '/',
-          sameSite: 'none',
-          secure: true,
-          httpOnly: false,
-          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
-        })
-      }
-
-      redirectUrl && router.push(redirectUrl)
-    }
-
-    return (
-      <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
-        <div className='hidden md:flex w-full h-full bg-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] flex-row items-end justify-end overflow-y-auto min-h-screen'>
-          <div className='h-full w-full max-w-[750px] px-8 pt-0'>
-            <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
-              <Button
-                variant='ghost'
-                onClick={close}
-                className='w-fit !min-w-0 p-2'
-              >
-                <Logo size='md' textClx='!cursor-pointer' variant='text-only' />
-              </Button>
-              <Carousel
-                options={{ align: 'center', loop: true }}
-                className='w-full'
-                plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
-              >
-                <CarouselContent>
-                  {reviews.map(({ text, author, href }, index) => (
-                    <CarouselItem key={index}>
-                      <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
-                        <p>“{text}“</p>
-                        <p className='text-sm'>{author}</p>
-                      </Link>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-              </Carousel>
-            </div>
-          </div>
-        </div>
-        <div className='w-full h-full bg-background flex flex-row items-center'>
-          <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
-            <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
-              <Button
-                variant='ghost'
-                onClick={close}
-                className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
-              >
-                <LuxLogo className='w-5 h-5' />
-              </Button>
-              <Signup
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-export default SignupPanel

package/components/back-button.tsx

@@ -1,49 +0,0 @@
-'use client'
-import React from 'react'
-import { useRouter } from 'next/navigation'
-
-import { ChevronLeft } from 'lucide-react'
-
-
-import { 
-  Button, 
-  buttonVariants, 
-} from '@hanzo/ui/primitives'
-
-import type { VariantProps } from '@hanzo/ui/util'
-
-const BackButton: React.FC<{
-  variant?: VariantProps<typeof buttonVariants>['variant']
-  size?: VariantProps<typeof buttonVariants>['size']
-  onBack?: () => void
-  clx?: string
-  iconClx?: string
-}> = ({
-  variant='ghost',
-  size='default',
-  clx='',
-  iconClx='',
-  onBack
-}) => {
-
-  const router = useRouter()
-  const back = () => {
-    if (onBack) {
-      onBack()
-    }
-    router.back()
-  }
-
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      onClick={back}
-      className={clx}
-    >
-      <ChevronLeft className={iconClx}/>
-    </Button> 
-  )
-}
-
-export default BackButton

package/components/chat-widget.tsx

@@ -1,85 +0,0 @@
-'use client'
-import React from 'react'
-
-import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { LuxLogo } from './icons'
-import type { ChatbotSuggestedQuestion } from '../types'
-
-const ChatWidget: React.FC<{
-  title: string
-  chatbotUrl: string
-  subtitle?: string
-  question?: string
-  buttonClx?: string
-  /* 
-    ChatBotSuggestQuestion.icon
-    Currently supports these icons from remix icons (https://remixicon.com/):
-      GlobalLineIcon,
-      ShieldFlashLineIcon,
-      BankCardLineIcon,
-      GroupLineIcon,
-      QuestionnaireLineIcon
-  */
-  suggestedQuestions?: ChatbotSuggestedQuestion[]
-}> = ({
-  title,
-  chatbotUrl,
-  subtitle,
-  question,
-  suggestedQuestions,
-  buttonClx=''
-}) => {
-
-  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
-
-  const onClick = () => { setShowChatbot(!showChatbot) }
-
-  const searchParams = new URLSearchParams()
-  if (question) {
-    searchParams.append('question', question)
-  }
-  if (suggestedQuestions) {
-    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
-    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
-    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
-  }
-
-  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
-
-  return (<>
-    <div className={
-      'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
-      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
-      (showChatbot ? 'flex' : 'hidden')
-    }>
-      <Card className='flex flex-col h-full w-full'>
-        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
-          <h1 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h1>
-          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
-            <LuxLogo width={24} height={24}/>
-          </Button>
-        </div>
-        <iframe src={iframeSrc} className='h-full' />
-      </Card>
-    </div>
-
-    <LuxLogo
-      width={28}
-      height={28}
-      onClick={onClick}
-      className={cn(
-          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
-        'fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer',
-        'hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
-        'transition-transform', 
-        showChatbot ? 'rotate-180' : '',
-        buttonClx
-      )}
-      strokeWidth={1}
-    />
-  </>)
-}
-
-export default ChatWidget

package/components/commerce/bag-button.tsx

@@ -1,98 +0,0 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import { Bag } from '../icons'
-
-const BagButton: React.FC<{
-  showIfEmpty?: boolean  
-  animateOnHover?: boolean
-  animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
-  className?: string
-  iconClx?: string
-  onClick?: () => void
-}> = observer(({
-  showIfEmpty=false,
-  animateOnHover=true,
-  animateOnQuantityChange=true,
-  size='default',
-  className='',
-  iconClx='',
-  onClick
-}) => {
-
-  const c = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    (animateOnQuantityChange && c) ? reaction(
-      () => (c.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more')})   
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')})   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none')})    
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-    // undefined means context is not installed, ie commerce functions are not in use
-  if (!c || (!showIfEmpty && c.cartEmpty)) {
-    return <div /> // trigger code needs non-null 
-  }
-
-
-  return (
-    <div
-      aria-label="Bag"
-      role='button'
-      onClick={onClick}
-      className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
-          // Overides the bg change on hover --not a "hover effect" 
-        'relative group p-0 aspect-square hover:bg-background', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-        className
-      )}
-    >
-    {!c.cartEmpty && (
-      <div className={
-        'z-above-content flex flex-col justify-center items-center  ' +
-        'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-primary-fg text-xs ' 
-      }>
-        <div className='h-[3px] w-full' />
-        <div>{c.cartQuantity}</div>
-      </div>
-    )}
-      <Bag width='24' height='28' className={cn(
-        'relative -top-[3px] fill-primary',
-        iconClx,
-        (animateOnHover ? 
-          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-          : 
-          ''
-        ) 
-      )} aria-hidden="true" />
-    </div>            
-  )
-})
-
-export default BagButton

package/components/commerce/buy-button.tsx

@@ -1,34 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { type VariantProps } from '@hanzo/ui/util'
-
-import { cn } from '@hanzo/ui/util'
-import { useSelectAndBuy } from '../../commerce/ui/context'
-
-const BuyButton: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-  {
-    skuPath: string
-    className?: string 
-  }
-> = ({
-  skuPath,
-  children,
-  className='',
-  ...rest
-}) => {
-
-  const buyOptions = useSelectAndBuy()
-  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
-  
-  return (
-    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
-      {children}
-    </Button>
-  )
-}
-
-export default BuyButton

package/components/commerce/checkout-button.tsx

@@ -1,129 +0,0 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { Button, type ButtonProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import { Bag } from '../icons'
-
-const IconAndQuantity: React.FC<{
-  animateOnQuantityChange?: boolean
-  showArrow?: boolean
-  showQuantity?: boolean
-  clx?: string
-  iconClx?: string
-  digitClx?: string
-}> = observer(({
-  animateOnQuantityChange=false,
-  showArrow=true,
-  showQuantity=true,
-  clx='',
-  iconClx='',
-  digitClx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (cmmc.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more') })  
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')  })  
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none') })   
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-  return (
-    <div className={cn('flex items-center justify-center', clx)}>
-    {showQuantity && (
-      <div className={cn(
-        'relative flex items-center justify-center mr-1', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-      )} >
-        {cmmc.cartQuantity > 0 && (
-        <div className={cn(
-          'z-above-content flex flex-col justify-center items-center',
-          'absolute left-0 right-0 top-0 bottom-0',
-          digitClx
-        )}>
-          <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
-        </div>
-        )}
-        <Bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
-    )}
-      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
-    </div>
-  )
-})  
-
-const CheckoutButton: React.FC<ButtonProps & {
-  handleCheckout: () => void
-  showQuantity?: boolean
-  showArrow?: boolean
-  animateOnQuantityChange?: boolean
-  centerText?: boolean
-}> = ({
-  handleCheckout,
-  variant='primary',
-  rounded='lg',
-  className,
-  showQuantity=true,
-  showArrow=true,
-  animateOnQuantityChange=true,
-  centerText=true,
-  children,
-  ...rest
-}) => {
-
-  return (
-    <Button 
-      {...rest}
-      onClick={handleCheckout} 
-      variant={variant}
-      rounded={rounded}
-      className={cn(
-        'flex justify-between items-stretch group', 
-        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
-        className, 
-      )}
-    >
-      {centerText && ( // must scale this one too, as it effects layout
-        <IconAndQuantity 
-          showArrow={showArrow} 
-          showQuantity={showQuantity}
-          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
-        />
-      )}
-      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
-      <IconAndQuantity 
-        clx='group-hover:scale-105 transition-scale transition-duration-300'
-        animateOnQuantityChange={animateOnQuantityChange}
-        showArrow={showArrow} 
-        showQuantity={showQuantity}
-        iconClx='fill-background'
-        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
-      />
-    </Button>
-  )
-}
-
-export default CheckoutButton

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -1,66 +0,0 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  clx?: string
-  triggerClx?: string
-  panelClx?: string
-  scrollAfter: number
-  scrollHeightClx: string
-}> = observer(({
-  icon,
-  clx='',
-  panelClx='',
-  triggerClx='',
-  scrollAfter,
-  scrollHeightClx
-}) => { 
-  const cmmc = useCommerce()
-  return (
-    <Accordion type="single" collapsible className={clx}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </div>
-          <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className={cn('w-full', panelClx)} 
-            scrollAfter={scrollAfter}
-            scrollHeightClx={scrollHeightClx}
-            listClx='mt-0'
-            itemClx='mt-0.5 mb-0'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian

package/components/commerce/checkout-panel/checkout-panel-props.ts

@@ -1,10 +0,0 @@
-interface CheckoutPanelProps {
-  step: number
-  stepNames: string[]
-  onLeave:() => void
-  clx?: string
-}
-
-export {
-  type CheckoutPanelProps as default 
-}

package/components/commerce/checkout-panel/desktop-bag-carousel.tsx

@@ -1,36 +0,0 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { 
-  useCommerce, 
-  CarouselItemSelector, 
-  type CarouselItemSelectorPropsExt 
-} from '@hanzo/commerce'
-
-const DesktopBagCarousel: React.FC<{
-  constrainTo: {w: number, h: number}
-  className?: string
-}> = observer(({
-  constrainTo,
-  className=''
-  
-}) => {
-  const cmmc = useCommerce()
-  return (
-    <CarouselItemSelector 
-      items={cmmc.cartItems} 
-      selectedItemRef={cmmc}
-      scrollable={false} // ignored
-      selectSku={cmmc.setCurrentItem.bind(cmmc)}
-      clx={className}
-      ext={{
-        options: {loop: true},  
-        constrainTo,  
-        imageOnly: true
-      } satisfies CarouselItemSelectorPropsExt}
-    />
-  )
-})
-
-export default DesktopBagCarousel