@luxfi/ui 5.5.4 → 5.5.6

package/style/lux-global.css

@@ -1,21 +1,105 @@
-/* Note, preflight is applied first:
-  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
-*/
-@import "tailwindcss/base";
-
-/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
-/* @import "@hanzo/ui/style/hanzo-common"; */
-@import "lux-colors";
+/* The Lux surface.
+ *
+ * No utility engine. @hanzo/ui ships the reset and the token scale (theme.css +
+ * styles.css, imported by name in each app's layout), so what is left here is
+ * what is actually Lux: the colour set, the display face, the one place Hanzo
+ * IAM's unskinned sign-in markup meets this surface, and a few corrections to
+ * third-party widgets.
+ *
+ * The Tailwind layers this used to open with — base, components, utilities —
+ * generated every class the chrome was written against. Removing them without
+ * the rest of the migration is what leaves a site rendering with browser
+ * defaults, so `body` states its own ground here.
+ */
+@import "./lux-colors.css";
 
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+body {
+  background: var(--background);
+  color: var(--foreground);
+  min-height: 100%;
+  /* One column, floored at 0 so long content wraps instead of widening the
+     page. A row track of 1fr lets a short page still fill the viewport. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
 
 div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   display: none;
 }
 
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose --
+   a transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
 .font-heading {
-  @apply uppercase;
+  font-family: var(--font-zen-sans), var(--font-inter), sans-serif;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
+}
+
+/* Hanzo IAM's sign-in views ship structure, not skin. This is the one place
+ * that markup meets the Lux surface -- colours come from lux-colors so the
+ * form follows the theme like everything else.
+ */
+.hanzo-iam-card,
+.hanzo-iam-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.hanzo-iam-form input {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+
+.hanzo-iam-btn {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+
+.hanzo-iam-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.hanzo-iam-divider {
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-error {
+  font-size: var(--text-sm);
+  color: hsl(0 70% 60%);
 }
 
 /* Specific style fixes for react-square-web-payments-sdk -
@@ -30,7 +114,6 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   margin-bottom: 0 !important;
 }
 
-
 .element-container:hover .icon-container-nor {
   display: none;
 }
@@ -46,6 +129,7 @@ div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
 .element-container:hover .text-container {
   background: transparent;
 }
-.overflow-scroll::-webkit-scrollbar{
-  display:none;
-}
+
+.overflow-scroll::-webkit-scrollbar {
+  display: none;
+}

package/tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "../tsconfig.modules.base.json",
+  // An `.mdx` import is a React component; the bundler learns that from
+
+  // @next/mdx and the type checker does not. Shared with every app —
+
+  // referenced, not copied.
+
+  "files": ["../../mdx.d.ts"],
+
   "include": [
     "**/*.ts",
     "**/*.tsx", "components/commerce/_to_deprecate_checkout-widget/index.tsx_",

package/types/site-def.ts

@@ -7,6 +7,13 @@ import type ChatbotConfig from './chatbot-config'
 
 interface SiteDef {
 
+    /**
+     * Short name of this site, which with the org names the IAM application it
+     * signs in as: 'quest' is the client `lux-quest` on lux.id. Required, so a
+     * site cannot ship a login button that belongs to no one.
+     */
+  app: string
+
     /** url of this site.  All nav links in the system will show it in 'current' state */
   currentAs?: string
 

package/components/auth/auth-listener.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useAuth } from '@hanzo/auth/service'
-import { getCookie } from 'cookies-next'
-
-const AuthListener = () => {
-  const auth = useAuth()
-
-  useEffect(() => {
-    // Sites that do not share a login origin leave this unset; without it there
-    // is nothing to ask, so asking would only fetch the string "undefined".
-    const loginSite = process.env.NEXT_PUBLIC_LOGIN_SITE_URL
-    if (!loginSite) return
-
-    fetch(`${loginSite}/api/auth/get-auth-token`, {
-      method: 'GET',
-      credentials: 'include',
-    })
-    .then(response => response.json())
-    .then((data: any) => {
-      const token = data.reqToken
-      if (!!token) {
-        auth.loginWithCustomToken(token)
-      }
-    })
-    .catch(() => { /* no shared session available */ })
-  }, [auth])
-
-  return ( <></> )
-}
-
-export default AuthListener

package/components/auth/auth-token/clear-auth-token.tsx

@@ -1,12 +0,0 @@
-import domains from '../common-auth-domains'
-
-const ClearAuthToken = () => {
-  return (<>
-    {domains.map(({url}) => (
-      /* Clear auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/clear-auth-token`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default ClearAuthToken

package/components/auth/auth-token/set-auth-token.tsx

@@ -1,16 +0,0 @@
-import domains from '../common-auth-domains'
-
-const SetAuthToken: React.FC<{
-  authToken: string
-}> = ({
-  authToken,
-}) => {
-  return (<>
-    {!!authToken && domains.map(({url}) => (
-      /* Set auth-token cookie across all Lux domains */
-      <img src={`${url}/api/auth/set-auth-token?token=${authToken}`} className='absolute hidden'/>
-    ))}
-  </>)
-}
-
-export default SetAuthToken

package/components/auth/common-auth-domains.ts

@@ -1,17 +0,0 @@
-const domains = [
-  { id: 'lux.market', url: 'https://lux.market' },
-  { id: 'lux.shop', url: 'https://lux.shop' },
-  { id: 'lux.credit', url: 'https://lux.credit' },
-  { id: 'lux.network', url: 'https://lux.network' },
-  { id: 'wallet.lux.network', url: 'https://wallet.lux.network' },
-  { id: 'safe.lux.network', url: 'https://safe.lux.network' },
-  { id: 'lux.finance', url: 'https://lux.finance' },
-  { id: 'lux.exchange', url: 'https://lux.exchange' },
-  { id: 'lux.quest', url: 'https://lux.quest' },
-  { id: 'lux.id', url: 'https://lux.id' },
-  { id: 'lux.chat', url: 'https://lux.chat' }
-]
-
-export {
-  domains as default
-}

package/components/auth/mobile-login-button.tsx

@@ -1,112 +0,0 @@
-'use client'
-import React from "react"
-import { observer } from "mobx-react-lite"
-
-import {
-    Button,
-    LinkElement,
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-    Separator
-} from '@hanzo/ui/primitives'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
-import { useAuth } from "@hanzo/auth/service"
-
-import { Ethereum } from "@hanzo/auth/icons"
-
-const MobileAuthWidget: React.FC<{
-    noLogin?: boolean
-    className?: string
-    handleLogin?: () => void
-}> = observer(({
-    noLogin = false,
-    className
-}) => {
-    const auth = useAuth()
-    const handleLogin = () => {
-        window.location.href = "https://lux.id";
-      };
-
-    if (!auth) {
-        return null
-    }
-    if (!auth.loggedIn && typeof window !== 'undefined') {
-        return (noLogin ? null : (
-            (handleLogin) ? (
-                <div className="flex items-center py-1 px-1 gap-1">
-                    <Button
-                        variant='primary'
-                        className='text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Sign Up
-                    </Button>
-                    <Button
-                        variant='outline'
-                        className=' text-base font-semibold !min-w-0 self-center flex-1'
-                        onClick={handleLogin}
-                    >
-                        Log In
-                    </Button>
-                </div>
-            ) : (
-                // Without a login origin there is nowhere to send them, and the
-                // link would read `undefined?redirectUrl=…` — which next/link
-                // prefetches, so every page fetches a 404 it can never use.
-                process.env.NEXT_PUBLIC_LOGIN_SITE_URL ? (
-                    <LinkElement
-                        def={{
-                            href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
-                            title: 'Login',
-                            variant: 'primary',
-                            newTab: false
-                        } satisfies LinkDef}
-                        className='h-8 w-fit !min-w-0'
-                    />
-                ) : null
-            )
-        ))
-    }
-
-    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)}
-                >{auth.user?.email[0]}</Button>
-            </PopoverTrigger>
-            <PopoverContent className='bg-level-0'>
-                <div className="grid gap-4">
-                    <div className="space-y-2 truncate">
-                        {auth.user?.displayName ? (
-                            <>
-                                <h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
-                                <p className="text-sm opacity-50 truncate">{auth.user.email}</p>
-                            </>
-                        ) : (
-                            <h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
-                        )}
-                        {auth.user?.walletAddress ? (
-                            <p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
-                        ) : (
-                            <Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
-                                <Ethereum height={20} />Connect your wallet
-                            </Button>
-                        )}
-                    </div>
-                    <Separator />
-                    <Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
-                </div>
-            </PopoverContent>
-        </Popover>
-    )
-
-})
-
-export default MobileAuthWidget

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/icons/lux-logo.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const LuxLogo: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"  {...props}>
-    <polygon points="25,46.65 50,3.35 0,3.35" fill="white" stroke='black' strokeWidth={props.strokeWidth}/>
-  </svg>
-)
-
-export default LuxLogo

package/next/head-metadata/from-next/metadata-types.ts

@@ -1,158 +0,0 @@
-/**
- *
- * Metadata types
- *
- */
-
-export interface DeprecatedMetadataFields {
-  /**
-   * Deprecated options that have a preferred method
-   * @deprecated Use appWebApp to configure apple-mobile-web-app-capable which provides
-   * @see https://www.appsloveworld.com/coding/iphone/11/difference-between-apple-mobile-web-app-capable-and-apple-touch-fullscreen-ipho
-   */
-  'apple-touch-fullscreen'?: never
-
-  /**
-   * Obsolete since iOS 7.
-   * @see https://web.dev/apple-touch-icon/
-   * @deprecated use icons.apple or instead
-   */
-  'apple-touch-icon-precomposed'?: never
-}
-
-export type TemplateString =
-  | DefaultTemplateString
-  | AbsoluteTemplateString
-  | AbsoluteString
-export type DefaultTemplateString = {
-  default: string
-  template: string
-}
-export type AbsoluteTemplateString = {
-  absolute: string
-  template: string | null
-}
-export type AbsoluteString = {
-  absolute: string
-}
-
-export type Author = {
-  // renders as <link rel="author"...
-  url?: string | URL
-  // renders as <meta name="author"...
-  name?: string
-}
-
-// does not include "unsafe-URL". to use this users should
-// use '"unsafe-URL" as ReferrerEnum'
-export type ReferrerEnum =
-  | 'no-referrer'
-  | 'origin'
-  | 'no-referrer-when-downgrade'
-  | 'origin-when-cross-origin'
-  | 'same-origin'
-  | 'strict-origin'
-  | 'strict-origin-when-cross-origin'
-
-export type ColorSchemeEnum =
-  | 'normal'
-  | 'light'
-  | 'dark'
-  | 'light dark'
-  | 'dark light'
-  | 'only light'
-
-type RobotsInfo = {
-  // all and none will be inferred from index/follow boolean options
-  index?: boolean
-  follow?: boolean
-
-  /** @deprecated set index to false instead */
-  noindex?: never
-  /** @deprecated set follow to false instead */
-  nofollow?: never
-
-  noarchive?: boolean
-  nosnippet?: boolean
-  noimageindex?: boolean
-  nocache?: boolean
-  notranslate?: boolean
-  indexifembedded?: boolean
-  nositelinkssearchbox?: boolean
-  unavailable_after?: string
-  'max-video-preview'?: number | string
-  'max-image-preview'?: 'none' | 'standard' | 'large'
-  'max-snippet'?: number
-}
-export type Robots = RobotsInfo & {
-  // if you want to specify an alternate robots just for google
-  googleBot?: string | RobotsInfo
-}
-
-export type ResolvedRobots = {
-  basic: string | null
-  googleBot: string | null
-}
-
-export type IconURL = string | URL
-export type Icon = IconURL | IconDescriptor
-export type IconDescriptor = {
-  url: string | URL
-  type?: string
-  sizes?: string
-  color?: string
-  /** defaults to rel="icon" unless superseded by Icons map */
-  rel?: string
-  media?: string
-  /**
-   * @see https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority
-   */
-  fetchPriority?: 'high' | 'low' | 'auto'
-}
-
-export type Icons = {
-  /** rel="icon" */
-  icon?: Icon | Icon[]
-  /** rel="shortcut icon" */
-  shortcut?: Icon | Icon[]
-  /**
-   * @see https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
-   * rel="apple-touch-icon"
-   */
-  apple?: Icon | Icon[]
-  /** rel inferred from descriptor, defaults to "icon" */
-  other?: IconDescriptor | IconDescriptor[]
-}
-
-export type Verification = {
-  google?: null | string | number | (string | number)[]
-  yahoo?: null | string | number | (string | number)[]
-  yandex?: null | string | number | (string | number)[]
-  me?: null | string | number | (string | number)[]
-  // if you ad-hoc additional verification
-  other?: {
-    [name: string]: string | number | (string | number)[]
-  }
-}
-
-export type ResolvedVerification = {
-  google?: null | (string | number)[]
-  yahoo?: null | (string | number)[]
-  yandex?: null | (string | number)[]
-  me?: null | (string | number)[]
-  other?: {
-    [name: string]: (string | number)[]
-  }
-}
-
-export type ResolvedIcons = {
-  icon: IconDescriptor[]
-  apple: IconDescriptor[]
-  shortcut?: IconDescriptor[]
-  other?: IconDescriptor[]
-}
-
-export type ThemeColorDescriptor = {
-  color: string
-  media?: string
-}