@luxfi/core 5.1.3 → 5.1.4

package/components/auth/login-panel.tsx

@@ -1,104 +1,104 @@
-'use client'
-
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-
-import Autoplay from 'embla-carousel-autoplay'
-import { setCookie } from 'cookies-next'
-
-import { cn } from '@hanzo/ui/util'
-import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login } from '@hanzo/auth/components'
-
-import Logo from '../logo'
-import LuxLogo from '../icons/lux-logo'
-import { legal } from '../../site-def/footer'
-
-const LoginPanel: React.FC<{
-  close: () => void
-  getStartedUrl?: string
-  redirectUrl?: string
-  className?: string
-  reviews: { text: string, author: string, href: string }[]
-}> = ({
-  close,
-  getStartedUrl='/',
-  redirectUrl,
-  className='',
-  reviews
-}) => {
-  const router = useRouter()
-
-  const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
-  const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
-
-  const onLogin = (token: string) => {
-    setCookie('auth-token', token, {
-      domain: 'lux.services',
-      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-level-1 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' spanClassName='!cursor-pointer' layout='text-only'/>
-            </Button>
-            <Carousel
-              options={{ align: 'center', loop: true }}
-              className='w-full'
-              plugins={[Autoplay({ 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>
-            <Login
-              getStartedUrl={getStartedUrl}
-              redirectUrl={redirectUrl}
-              className='w-full max-w-sm'
-              termsOfServiceUrl={termsOfServiceUrl}
-              privacyPolicyUrl={privacyPolicyUrl}
-              onLoginChanged={onLogin}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default LoginPanel
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+import Autoplay from 'embla-carousel-autoplay'
+import { setCookie } from 'cookies-next'
+
+import { cn } from '@hanzo/ui/util'
+import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
+import { LoginPanel as Login } from '@hanzo/auth/components'
+
+import Logo from '../logo'
+import LuxLogo from '../icons/lux-logo'
+import { legal } from '../../site-def/footer'
+
+const LoginPanel: React.FC<{
+  close: () => void
+  getStartedUrl?: string
+  redirectUrl?: string
+  className?: string
+  reviews: { text: string, author: string, href: string }[]
+}> = ({
+  close,
+  getStartedUrl='/',
+  redirectUrl,
+  className='',
+  reviews
+}) => {
+  const router = useRouter()
+
+  const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
+  const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
+
+  const onLogin = (token: string) => {
+    setCookie('auth-token', token, {
+      domain: 'lux.services',
+      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-level-1 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' spanClassName='!cursor-pointer' layout='text-only'/>
+            </Button>
+            <Carousel
+              options={{ align: 'center', loop: true }}
+              className='w-full'
+              plugins={[Autoplay({ 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>
+            <Login
+              getStartedUrl={getStartedUrl}
+              redirectUrl={redirectUrl}
+              className='w-full max-w-sm'
+              termsOfServiceUrl={termsOfServiceUrl}
+              privacyPolicyUrl={privacyPolicyUrl}
+              onLoginChanged={onLogin}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LoginPanel

package/components/chat-widget.tsx

@@ -1,80 +1,80 @@
-'use client'
-import React from 'react'
-
-import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import LuxLogo from './icons/lux-logo'
-import type { ChatbotSuggestedQuestion } from '../types'
-
-const ChatWidget: React.FC<{
-  title: string,
-  chatbotUrl: string,
-  subtitle?: string,
-  question?: 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
-}) => {
-
-  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'>
-          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
-          <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-5 z-below-modal-3 transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
-        showChatbot ? 'rotate-180' : ''
-      )}
-      strokeWidth={1}
-    />
-  </>)
-}
-
-export default ChatWidget
+'use client'
+import React from 'react'
+
+import { Button, Card } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import LuxLogo from './icons/lux-logo'
+import type { ChatbotSuggestedQuestion } from '../types'
+
+const ChatWidget: React.FC<{
+  title: string,
+  chatbotUrl: string,
+  subtitle?: string,
+  question?: 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
+}) => {
+
+  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'>
+          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
+          <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-5 z-below-modal-3 transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
+        showChatbot ? 'rotate-180' : ''
+      )}
+      strokeWidth={1}
+    />
+  </>)
+}
+
+export default ChatWidget

package/components/commerce/bag-button.tsx

@@ -1,98 +1,98 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction } 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 * as Icons 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 ? reaction(
-      () => (c.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          wiggleRef.current.set('more')   
-        }
-        else {
-          wiggleRef.current.set('less')   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          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>
-    )}
-      <Icons.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
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction } 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 * as Icons 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 ? reaction(
+      () => (c.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          wiggleRef.current.set('more')   
+        }
+        else {
+          wiggleRef.current.set('less')   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          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>
+    )}
+      <Icons.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-drawer/drawer.tsx

@@ -1,44 +1,44 @@
-'use client'
-import React, {type PropsWithChildren } from 'react'
-
-import { X as LucideX} from 'lucide-react'
-
-import { Button, Drawer, DrawerContent, type DrawerProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const CommerceDrawer: React.FC<PropsWithChildren & 
-  Omit<DrawerProps, 'onOpenChange'> & 
-  {
-    setOpen: (b: boolean) => void
-    drawerClx?: string
-  }
-> = ({
-  children,
-  open,
-  setOpen,
-  modal,
-  drawerClx='',
-  ...rest
-}) => (
-    // @ts-ignore
-  <Drawer open={open} onOpenChange={setOpen} modal={modal} {...rest}>
-    <DrawerContent modal={modal} className={cn(
-      'rounded-t-xl mt-6 pt-6',
-      drawerClx
-    )}>
-      {children}
-      <Button
-        variant='ghost'
-        size='icon'
-        onClick={() => {setOpen(false)}}
-        className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
-      >
-        <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
-      </Button>    
-    </DrawerContent>
-  </Drawer>
-)
-
-
-export default CommerceDrawer
-
+'use client'
+import React, {type PropsWithChildren } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import { Button, Drawer, DrawerContent, type DrawerProps } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const CommerceDrawer: React.FC<PropsWithChildren & 
+  Omit<DrawerProps, 'onOpenChange'> & 
+  {
+    setOpen: (b: boolean) => void
+    drawerClx?: string
+  }
+> = ({
+  children,
+  open,
+  setOpen,
+  modal,
+  drawerClx='',
+  ...rest
+}) => (
+    // @ts-ignore
+  <Drawer open={open} onOpenChange={setOpen} modal={modal} {...rest}>
+    <DrawerContent modal={modal} className={cn(
+      'rounded-t-xl mt-6 pt-6',
+      drawerClx
+    )}>
+      {children}
+      <Button
+        variant='ghost'
+        size='icon'
+        onClick={() => {setOpen(false)}}
+        className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
+      >
+        <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
+      </Button>    
+    </DrawerContent>
+  </Drawer>
+)
+
+
+export default CommerceDrawer
+