@luxfi/ui 5.3.7 → 5.3.9

package/components/back-button.tsx

@@ -1,49 +1,49 @@
-'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
+'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 +1,85 @@
-'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
-  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
+'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
+  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/_to_deprecate_checkout-widget/const.ts

@@ -1,13 +1,13 @@
-export default {
-  itemImgConstraint: { w: 40, h: 24 },
-  animDurationMs: 400,
-  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  compWidthClx: {
-    checkout: 'w-pr-40',
-    itemInfo: 'w-pr-60'
-  },
-  shadowStyle: {
-    border: '1px solid rgb(100 100 100)',
-    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
-  }
-} 
+export default {
+  itemImgConstraint: { w: 40, h: 24 },
+  animDurationMs: 400,
+  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  compWidthClx: {
+    checkout: 'w-pr-40',
+    itemInfo: 'w-pr-60'
+  },
+  shadowStyle: {
+    border: '1px solid rgb(100 100 100)',
+    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
+  }
+} 

package/components/commerce/_to_deprecate_checkout-widget/index.tsx_

@@ -1,188 +1,188 @@
-'use client'
-import React, { useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { usePathname, useRouter } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { useStepAnimation } from '@hanzo/ui/util-client'
-
-import { Image } from '@hanzo/ui/primitives'
-
-import CheckoutButton from '../checkout-button'
-import useAnimationClxSet from './use-anim-clx-set'
-import CONST from './const'
-import type { LineItem } from '@hanzo/commerce/types'
-
-const transStyle = (t: { transition: string, from : string, to: string } | undefined) : any => (
-  t ? {
-    transitionProperty: t.transition,
-    transitionTimingFunction: CONST.animTimingFn,
-    transitionDuration: `${CONST.animDurationMs}ms`
-  } : {}        
-)
-
-const transClx = (on: boolean, t: { transition: string, from : string, to: string } | undefined) : string => (
-  on ? (t?.from ?? '') : (t?.to ?? '')
-)
-
-const VARS: any = {
-  BR: {
-    pos: 'bottom-[24px] right-[66px]',
-    width: 'w-initial', 
-    centerText: false,
-    coClx: 'w-auto',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100 origin-right', 
-        to: 'scale-x-0 opacity-0 origin-right'
-      }
-    },
-    showArrow: true
-  },
-  TR: {
-    pos: 'top-[48px] md:top-[80px] right-[28px]',
-    width: 'w-initial', 
-    centerText: false,
-    showQuantity: false,
-    showArrow: true,
-    coClx: 'w-auto px-3 gap-1',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      co: { 
-        transition: 'none',
-        from : 'px-3 gap-2.5', 
-        to: ''
-      },
-      coText: {
-        transition: 'max-width',
-        from : 'max-w-[100px]', 
-        to: 'max-w-[0px]'
-      },
-      info: { 
-        transition: 'transform',
-        from : 'scale-x-100 origin-right', 
-        to: 'scale-x-0 origin-right'
-      }
-    },
-  },
-  TRIO: {
-    pos: 'top-[48px] md:top-[70px] right-[28px]',
-    centerText: false,
-    showQuantity: true,
-    showArrow: true,
-    width: 'w-initial', 
-    coClx: 'hidden',
-    infoClx: 'w-auto',
-    activeItemAnim: {
-      info: { 
-        transition: 'transform, opacity',
-        from : 'scale-x-100 opacity-100', 
-        to: 'scale-x-50 opacity-0'
-      }
-    },
-  }
-}
-
-const v = 'TR'
-
-const CheckoutWidget: React.FC<{
-  clx?: string
-}> = observer(({
-  clx=''
-}) => {
-
-  const router = useRouter()
-
-  const isCheckout = usePathname() === '/checkout'
-  const clxSet = useAnimationClxSet(isCheckout)
-
-    // for rendering content after recentActivity.item() would return false
-  const persistentRef = useRef<LineItem | undefined>(undefined)
-
-    // Doing double duty of being initial step fn for StepAnimation,
-    // and also capturing the item for persistentRef :)
-  const initialStepFn = (): boolean => {
-    if (!!recentActivity.item && !persistentRef.current) {
-      persistentRef.current = recentActivity.item
-    }  
-    return !!recentActivity.item
-  }
-  const steps = useStepAnimation(initialStepFn, [CONST.animDurationMs, CONST.animDurationMs, CONST.animDurationMs])
-
-  const handleCheckout = () => { router.push('/checkout')}
-
-  return globalThis?.document?.body && createPortal(
-    (<div 
-      className={cn(
-        VARS[v].width,
-        'z-below-modal-2 fixed ',
-        VARS[v].pos,
-        'rounded-lg',
-        'flex',
-        steps.notPast(0) ? 'bg-background' : '',
-        steps.notPast(1) ? 'gap-2' : '',
-        clxSet.asArray.join(' ')
-      )}
-      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
-    >
-      <div 
-        className={cn(
-          'flex flex-row justify-between items-center', 
-          transClx(steps.notPast(0), VARS[v].activeItemAnim.info),
-          VARS[v].itemClx, 
-          steps.notPast(1) ? 'px-3 border rounded-lg bg-level-1 border-muted-3' : '' 
-        )}
-        style={transStyle(VARS[v].activeItemAnim.info)}
-      >
-        {steps.notPast(1) && persistentRef.current?.img && (
-          <Image def={persistentRef.current.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
-        )} 
-        {steps.notPast(1) && persistentRef.current && (<div className='text-foreground grow ml-1'>
-          <p className='whitespace-nowrap text-ellipsis text-sm'>{persistentRef.current.title}</p>
-          <p className='whitespace-nowrap text-clip text-xxs' >recently added...</p>
-        </div>)}
-      </div>
-      <CheckoutButton 
-        handleCheckout={handleCheckout} 
-        centerText={VARS[v].centerText ?? !steps.notPast(0)}
-        variant='primary' 
-        rounded='lg' 
-        showQuantity={VARS[v].showQuantity ?? true}
-        showArrow={VARS[v].showArrow ?? true}
-        className={cn(
-            // for setting and unsetting 'gap'
-          transClx((VARS[v].activeItemAnim.coText ? steps.notPast(3) : true), VARS[v].activeItemAnim.co),
-          VARS[v].coClx
-        )} 
-        style={transStyle(VARS[v].activeItemAnim.co)}
-      >
-        <div 
-          className={cn(
-            'overflow-hidden',
-            'flex justify-center items-center',
-            transClx(steps.notPast(2), VARS[v].activeItemAnim.coText),
-          )} 
-          style={transStyle(VARS[v].activeItemAnim.coText)}
-        >
-          Checkout
-        </div>
-      </CheckoutButton>
-    </div>),
-    globalThis?.document?.body
-  )
-})
-
-export default CheckoutWidget
+'use client'
+import React, { useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { usePathname, useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { useStepAnimation } from '@hanzo/ui/util-client'
+
+import { Image } from '@hanzo/ui/primitives'
+
+import CheckoutButton from '../checkout-button'
+import useAnimationClxSet from './use-anim-clx-set'
+import CONST from './const'
+import type { LineItem } from '@hanzo/commerce/types'
+
+const transStyle = (t: { transition: string, from : string, to: string } | undefined) : any => (
+  t ? {
+    transitionProperty: t.transition,
+    transitionTimingFunction: CONST.animTimingFn,
+    transitionDuration: `${CONST.animDurationMs}ms`
+  } : {}        
+)
+
+const transClx = (on: boolean, t: { transition: string, from : string, to: string } | undefined) : string => (
+  on ? (t?.from ?? '') : (t?.to ?? '')
+)
+
+const VARS: any = {
+  BR: {
+    pos: 'bottom-[24px] right-[66px]',
+    width: 'w-initial', 
+    centerText: false,
+    coClx: 'w-auto',
+    infoClx: 'w-auto',
+    activeItemAnim: {
+      co: { 
+        transition: 'none',
+        from : 'px-3 gap-2.5', 
+        to: ''
+      },
+      coText: {
+        transition: 'max-width',
+        from : 'max-w-[100px]', 
+        to: 'max-w-[0px]'
+      },
+      info: { 
+        transition: 'transform, opacity',
+        from : 'scale-x-100 opacity-100 origin-right', 
+        to: 'scale-x-0 opacity-0 origin-right'
+      }
+    },
+    showArrow: true
+  },
+  TR: {
+    pos: 'top-[48px] md:top-[80px] right-[28px]',
+    width: 'w-initial', 
+    centerText: false,
+    showQuantity: false,
+    showArrow: true,
+    coClx: 'w-auto px-3 gap-1',
+    infoClx: 'w-auto',
+    activeItemAnim: {
+      co: { 
+        transition: 'none',
+        from : 'px-3 gap-2.5', 
+        to: ''
+      },
+      coText: {
+        transition: 'max-width',
+        from : 'max-w-[100px]', 
+        to: 'max-w-[0px]'
+      },
+      info: { 
+        transition: 'transform',
+        from : 'scale-x-100 origin-right', 
+        to: 'scale-x-0 origin-right'
+      }
+    },
+  },
+  TRIO: {
+    pos: 'top-[48px] md:top-[70px] right-[28px]',
+    centerText: false,
+    showQuantity: true,
+    showArrow: true,
+    width: 'w-initial', 
+    coClx: 'hidden',
+    infoClx: 'w-auto',
+    activeItemAnim: {
+      info: { 
+        transition: 'transform, opacity',
+        from : 'scale-x-100 opacity-100', 
+        to: 'scale-x-50 opacity-0'
+      }
+    },
+  }
+}
+
+const v = 'TR'
+
+const CheckoutWidget: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const router = useRouter()
+
+  const isCheckout = usePathname() === '/checkout'
+  const clxSet = useAnimationClxSet(isCheckout)
+
+    // for rendering content after recentActivity.item() would return false
+  const persistentRef = useRef<LineItem | undefined>(undefined)
+
+    // Doing double duty of being initial step fn for StepAnimation,
+    // and also capturing the item for persistentRef :)
+  const initialStepFn = (): boolean => {
+    if (!!recentActivity.item && !persistentRef.current) {
+      persistentRef.current = recentActivity.item
+    }  
+    return !!recentActivity.item
+  }
+  const steps = useStepAnimation(initialStepFn, [CONST.animDurationMs, CONST.animDurationMs, CONST.animDurationMs])
+
+  const handleCheckout = () => { router.push('/checkout')}
+
+  return globalThis?.document?.body && createPortal(
+    (<div 
+      className={cn(
+        VARS[v].width,
+        'z-below-modal-2 fixed ',
+        VARS[v].pos,
+        'rounded-lg',
+        'flex',
+        steps.notPast(0) ? 'bg-background' : '',
+        steps.notPast(1) ? 'gap-2' : '',
+        clxSet.asArray.join(' ')
+      )}
+      style={steps.notPast(1) ? {} : VARS[v].coClx?.includes('hidden') ? {} : CONST.shadowStyle}
+    >
+      <div 
+        className={cn(
+          'flex flex-row justify-between items-center', 
+          transClx(steps.notPast(0), VARS[v].activeItemAnim.info),
+          VARS[v].itemClx, 
+          steps.notPast(1) ? 'px-3 border rounded-lg bg-level-1 border-muted-3' : '' 
+        )}
+        style={transStyle(VARS[v].activeItemAnim.info)}
+      >
+        {steps.notPast(1) && persistentRef.current?.img && (
+          <Image def={persistentRef.current.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
+        )} 
+        {steps.notPast(1) && persistentRef.current && (<div className='text-foreground grow ml-1'>
+          <p className='whitespace-nowrap text-ellipsis text-sm'>{persistentRef.current.title}</p>
+          <p className='whitespace-nowrap text-clip text-xxs' >recently added...</p>
+        </div>)}
+      </div>
+      <CheckoutButton 
+        handleCheckout={handleCheckout} 
+        centerText={VARS[v].centerText ?? !steps.notPast(0)}
+        variant='primary' 
+        rounded='lg' 
+        showQuantity={VARS[v].showQuantity ?? true}
+        showArrow={VARS[v].showArrow ?? true}
+        className={cn(
+            // for setting and unsetting 'gap'
+          transClx((VARS[v].activeItemAnim.coText ? steps.notPast(3) : true), VARS[v].activeItemAnim.co),
+          VARS[v].coClx
+        )} 
+        style={transStyle(VARS[v].activeItemAnim.co)}
+      >
+        <div 
+          className={cn(
+            'overflow-hidden',
+            'flex justify-center items-center',
+            transClx(steps.notPast(2), VARS[v].activeItemAnim.coText),
+          )} 
+          style={transStyle(VARS[v].activeItemAnim.coText)}
+        >
+          Checkout
+        </div>
+      </CheckoutButton>
+    </div>),
+    globalThis?.document?.body
+  )
+})
+
+export default CheckoutWidget