@luxfi/ui 5.5.4 → 5.5.6

package/commerce/ui/context.tsx

@@ -12,13 +12,17 @@ import { usePathname } from 'next/navigation'
 import { useDebounceCallback } from 'usehooks-ts'
 
 
-import { preset as twConfig } from '@hanzo/ui/tailwind'
 import { useCommerce } from '@hanzo/commerce'
 
 import type { CommerceDrawer, SelectAndBuy } from './store'
 import { CommerceUIStore } from './store'
 import conf from './conf'
 
+/** The `md` rung: below this the commerce drawer behaves as a mobile sheet.
+ *  It used to be read out of a Tailwind preset's `screens.md`, which is one
+ *  more place for a number that belongs in one. */
+const DESKTOP_MIN = 768
+
 const LOG = false ////////////////////
 const log = (s: string) => {
   if (LOG) {
@@ -48,23 +52,16 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
   const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
   const prevPathRef = useRef<string>('initial')
 
-  const onResize = () => { 
-    const width = window.innerWidth 
-    let desktopMin = 0
-    if (twConfig.theme?.screens) {
-        // expected form: { md: '768px' }
-      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
-        desktopMin = parseInt(twConfig.theme?.screens.md)
-      }
-      if (width < desktopMin) {
-        if (!storeRef.current.isMobile) {
-          storeRef.current.setMobile(true)
-        }
-      }
-      else if (storeRef.current.isMobile) {
-        storeRef.current.setMobile(false)
+  const onResize = () => {
+    const width = window.innerWidth
+    if (width < DESKTOP_MIN) {
+      if (!storeRef.current.isMobile) {
+        storeRef.current.setMobile(true)
       }
     }
+    else if (storeRef.current.isMobile) {
+      storeRef.current.setMobile(false)
+    }
     storeRef.current.setViewportHeight(window.innerHeight)
   }
 

package/components/access-code-input.tsx

@@ -2,8 +2,7 @@
 
 import { useState } from 'react'
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 const AccessCodeInput: React.FC<{
   onSuccess?: () => void
   onFail?: () => void
@@ -35,7 +34,7 @@ const AccessCodeInput: React.FC<{
   }
 
   return (
-    <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
+    <Box className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
       <InputOTP
         className='mx-auto'
         maxLength={6}
@@ -64,7 +63,7 @@ const AccessCodeInput: React.FC<{
           null
         }
       </p>
-    </div>
+    </Box>
   )
 }
 

package/components/analytics.tsx

@@ -1,23 +1,14 @@
 'use client'
 
-import { useEffect } from 'react'
 import { GoogleAnalytics } from '@next/third-parties/google'
-import { FacebookPixel } from '../next/analytics'
-
-const Analytics = () => {
 
-  useEffect(() => {
-    document.body.style.display = 'flex'
-  }, [])
+import { FacebookPixel } from '../next/analytics'
 
-  return (
-    <>
-      <FacebookPixel />
-      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
-    </>
-  )
-}
+const Analytics = () => (
+  <>
+    <FacebookPixel />
+    <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
+  </>
+)
 
-export {
-  Analytics as default
-}
+export { Analytics as default }

package/components/auth/callback.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { useIam } from '@hanzo/iam/react'
+
+import { resume } from './resume'
+
+  /**
+   * The site's OAuth redirect target. IAM sends the authorization code here and
+   * this redeems it for tokens with the PKCE verifier the browser kept, then
+   * returns the visitor to the page they left.
+   */
+const Callback = () => {
+
+  const { handleCallback } = useIam()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    handleCallback()
+      .then(() => { window.location.replace(resume()) })
+      .catch((e: Error) => { setError(e.message) })
+      /* Runs once: the authorization code is single-use. */
+  }, [])
+
+  return (
+    <main className='flex min-h-screen items-center justify-center p-8 text-center'>
+      {error ? (
+        <div className='flex flex-col gap-4'>
+          <p role='alert'>{error}</p>
+          <a href='/' className='underline'>Back to the site</a>
+        </div>
+      ) : (
+        <p>Signing you in…</p>
+      )}
+    </main>
+  )
+}
+
+export default Callback

package/components/auth/login-panel.tsx

@@ -1,58 +1,28 @@
 'use client'
 
+import React from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation'
-import { setCookie } from 'cookies-next'
 
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
-import { LoginPanel as Login } from '@hanzo/auth/components'
 
-import { LuxLogo } from '../icons'
+import Login from './login'
+import { LuxLogo } from '@luxfi/logo'
 import Logo from '../logo'
-import { EmblaAutoplay } from '..'
 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 }[]
-  setIsLogin?: React.Dispatch<React.SetStateAction<boolean>>
 }> = ({
   close,
-  getStartedUrl = '/',
-  redirectUrl,
   className = '',
-  reviews,
-  setIsLogin
+  reviews
 }) => {
-    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)}>
+      <Box 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'>
@@ -61,12 +31,14 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='w-fit !min-w-0 p-2'
               >
-                <Logo size='md' textClx='!cursor-pointer' variant='text-only' />
+                <Logo size='md' variant='wordmark' />
               </Button>
               <Carousel
-                options={{ align: 'center', loop: true }}
+                // Autoplay is an option now, not a plugin — and it holds while the
+                  // pointer is over the carousel or focus is inside it, which is
+                  // what `stopOnInteraction` was asking for.
+                  options={{ align: 'center', loop: true, autoplay: 5000 }}
                 className='w-full'
-                plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
               >
                 <CarouselContent>
                   {reviews.map(({ text, author, href }, index) => (
@@ -90,21 +62,21 @@ const LoginPanel: React.FC<{
                 onClick={close}
                 className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
               >
-                <LuxLogo className='w-5 h-5' />
+                <LuxLogo variant='white' size={20} />
               </Button>
-              <Login
-                getStartedUrl={getStartedUrl}
-                redirectUrl={redirectUrl}
-                className='w-full max-w-sm'
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-                onLoginChanged={onLogin}
-                setIsLogin={setIsLogin}
-              />
+              <Login className='w-full max-w-sm' />
+              <p className='text-sm opacity-50'>
+                {legal.map(({ title, href }, index) => (
+                  <React.Fragment key={href}>
+                    {index > 0 && ' · '}
+                    <Link href={href} className='underline'>{title}</Link>
+                  </React.Fragment>
+                ))}
+              </p>
             </div>
           </div>
         </div>
-      </div>
+      </Box>
     )
   }
 

package/components/auth/login.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { cn } from '@hanzo/ui'
+import { Login as IamLogin, useIam } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+  /**
+   * Sign-in rendered in place, on this site's own domain: IAM mints an
+   * authorization code bound to a PKCE challenge and the form navigates to
+   * /auth/callback to redeem it. No credential ever reaches this bundle's
+   * origin, and there is one sign-in surface rather than one per app.
+   */
+const Login: React.FC<{
+  className?: string
+  onSuccess?: (token: string) => void
+}> = ({
+  className,
+  onSuccess
+}) => {
+
+  const { config } = useIam()
+    /* OIDC anti-CSRF nonce, one per mounted form. */
+  const [state] = useState(() => crypto.randomUUID())
+
+    /* Sign-in leaves for /auth/callback, so record the page holding this form to
+      come back to. */
+  useEffect(remember, [])
+
+  return (
+    <IamLogin
+      serverUrl={config.serverUrl}
+      clientId={config.clientId}
+      redirectUri={config.redirectUri}
+      organization={config.organization}
+      state={state}
+        /* Naming a class replaces the view's own, so keep both: the site skins
+          .hanzo-iam-* once, in lux-global.css. */
+      className={cn('hanzo-iam-card', className)}
+      onSuccess={onSuccess}
+    />
+  )
+}
+
+export default Login

package/components/auth/provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { type PropsWithChildren } from 'react'
+
+import { IamProvider } from '@hanzo/iam/react'
+import { BRAND_SERVER_URLS } from '@hanzo/iam/paths'
+import type { IAMConfig } from '@hanzo/iam/browser'
+
+  /* These are Lux sites, so they sign in at Lux's own issuer. Naming another
+    brand's would send a Lux user to a login page that has never heard of the
+    redirect_uri they came from. */
+const ORG = 'lux'
+
+  /* Where the authorization code comes back. Every site mounts <Callback/> here. */
+const CALLBACK = '/auth/callback'
+
+  /* The OAuth client a site presents itself as: the `<org>-<app>` pair registered
+    on lux.id, so lux.shop is `lux-shop`. */
+const configure = (app: string): IAMConfig => ({
+  serverUrl: BRAND_SERVER_URLS[ORG],
+  organization: ORG,
+  clientId: `${ORG}-${app}`,
+    /* Read per render rather than at module load: one bundle serves the real
+      host and any preview of it, and each must redeem its code back to itself. */
+  redirectUri: (typeof window === 'undefined' ? '' : window.location.origin) + CALLBACK,
+})
+
+  /* Provider is memoized on the config's values, not its identity, so building a
+    fresh object here does not rebuild the SDK. */
+const Auth: React.FC<{ app: string } & PropsWithChildren> = ({ app, children }) => (
+  <IamProvider config={configure(app)}>{children}</IamProvider>
+)
+
+export default Auth

package/components/auth/resume.ts

@@ -0,0 +1,16 @@
+  /* Where the visitor was when they chose to sign in. The OIDC round-trip lands
+    on /auth/callback, so without this every sign-in would end at the home page.
+    Session-scoped: it describes one trip through the browser, not a preference. */
+const KEY = 'lux-auth-resume'
+
+const remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search)
+}
+
+const resume = (): string => {
+  const to = sessionStorage.getItem(KEY)
+  sessionStorage.removeItem(KEY)
+  return to ?? '/'
+}
+
+export { remember, resume }

package/components/auth/widget.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React, { useContext } from 'react'
+
+import { Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui'
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+interface Props {
+    /** Hide the sign-in button, leaving only the profile of an already signed-in
+      user. Checkout wants this: it has its own sign-in step. */
+  noLogin?: boolean
+  className?: string
+    /** Sign in in place instead of leaving for lux.id — the mobile drawer opens
+      its own panel. */
+  handleLogin?: () => void
+}
+
+const Widget: React.FC<Props> = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+
+  const { isAuthenticated, isLoading, login, logout } = useIam()
+  const identity = useIamIdentity()
+
+    /* Say nothing until the stored token has been read, rather than flashing
+      "Login" at someone who is already signed in. */
+  if (isLoading) {
+    return null
+  }
+
+  if (!isAuthenticated) {
+    return noLogin ? null : (
+      <Button
+        variant='primary'
+        className={cn('h-8 w-fit !min-w-0', className)}
+        onClick={handleLogin ?? (() => { remember(); void login() })}
+      >
+        Login
+      </Button>
+    )
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          size='icon'
+          className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+        >{identity?.initials}</Button>
+      </PopoverTrigger>
+      <PopoverContent className='bg-level-0'>
+        <div className='grid gap-4'>
+          <div className='space-y-2 truncate'>
+            <h4 className='font-medium leading-none truncate'>{identity?.name}</h4>
+            {identity?.email && identity.email !== identity.name && (
+              <p className='text-sm opacity-50 truncate'>{identity.email}</p>
+            )}
+          </div>
+          <Separator />
+          <Button variant='outline' onClick={() => { logout() }}>Logout</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+  /* The widget rides in shared chrome, and not every site mounts <Auth> —
+    app/credit carries its own root layout. A site that offers no sign-in shows
+    no sign-in, which is why the context is read before any hook that needs it. */
+const AuthWidget: React.FC<Props> = (props) => (
+  useContext(IamContext) ? <Widget {...props} /> : null
+)
+
+export default AuthWidget

package/components/back-button.tsx

@@ -4,17 +4,14 @@ import { useRouter } from 'next/navigation'
 
 import { ChevronLeft } from 'lucide-react'
 
-
 import { 
   Button, 
   buttonVariants, 
 } from '@hanzo/ui/primitives'
-
-import type { VariantProps } from '@hanzo/ui/util'
-
+import { css, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 const BackButton: React.FC<{
-  variant?: VariantProps<typeof buttonVariants>['variant']
-  size?: VariantProps<typeof buttonVariants>['size']
+  variant?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['variant']
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
   onBack?: () => void
   clx?: string
   iconClx?: string
@@ -41,7 +38,7 @@ const BackButton: React.FC<{
       onClick={back}
       className={clx}
     >
-      <ChevronLeft className={iconClx}/>
+      <ChevronLeft style={css(iconClx)}/>
     </Button> 
   )
 }

package/components/chat-widget.tsx

@@ -2,9 +2,8 @@
 import React from 'react'
 
 import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { LuxLogo } from './icons'
+import { Box, cn } from '@hanzo/ui'
+import { LuxLogo } from '@luxfi/logo'
 import type { ChatbotSuggestedQuestion } from '../types'
 
 const ChatWidget: React.FC<{
@@ -49,7 +48,7 @@ const ChatWidget: React.FC<{
   const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
 
   return (<>
-    <div className={
+    <Box 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')
@@ -58,16 +57,14 @@ const ChatWidget: React.FC<{
         <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}/>
+            <LuxLogo variant='white' size={24}/>
           </Button>
         </div>
         <iframe src={iframeSrc} className='h-full' />
       </Card>
-    </div>
+    </Box>
 
-    <LuxLogo
-      width={28}
-      height={28}
+    <Box tag="span"
       onClick={onClick}
       className={cn(
           // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
@@ -77,8 +74,9 @@ const ChatWidget: React.FC<{
         showChatbot ? 'rotate-180' : '',
         buttonClx
       )}
-      strokeWidth={1}
-    />
+    >
+      <LuxLogo variant='white' size={28} />
+    </Box>
   </>)
 }
 

package/components/commerce/bag-button.tsx

@@ -4,7 +4,7 @@ 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 { Box, cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 import { useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'
@@ -13,7 +13,7 @@ const BagButton: React.FC<{
   showIfEmpty?: boolean  
   animateOnHover?: boolean
   animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
   className?: string
   iconClx?: string
   onClick?: () => void
@@ -57,12 +57,13 @@ const BagButton: React.FC<{
 
 
   return (
-    <div
+    <Box
       aria-label="Bag"
       role='button'
       onClick={onClick}
       className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
+        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') ? 
@@ -73,14 +74,14 @@ const BagButton: React.FC<{
       )}
     >
     {!c.cartEmpty && (
-      <div className={
+      <Box 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>
+      </Box>
     )}
       <Bag width='24' height='28' className={cn(
         'relative -top-[3px] fill-primary',
@@ -91,7 +92,7 @@ const BagButton: React.FC<{
           ''
         ) 
       )} aria-hidden="true" />
-    </div>            
+    </Box>            
   )
 })
 

package/components/commerce/buy-button.tsx

@@ -2,14 +2,13 @@
 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 { cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 import { useSelectAndBuy } from '../../commerce/ui/context'
 
 const BuyButton: React.FC<
   PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
+  { variant?: ButtonVariant | null; size?: ButtonSize | null } & 
   {
     skuPath: string
     className?: string