@hanzo/ui 2.0.5 → 2.5.0

package/blocks/components/card-block.tsx

@@ -14,7 +14,7 @@ import {
   type TypographySize
 } from '../../primitives'
 
-import { Icons } from '../../primitives'
+import { Icons } from '../../common'
 
 import {
   getSpecifierData, 

package/blocks/components/screenful-block/index.tsx

@@ -36,6 +36,8 @@ const ScreenfulComponent: React.FC<{
 
   const specified = (s: string) => (containsToken(b.specifiers, s))
   const narrowGutters = specified('narrow-gutters') // eg, for a table object that is large
+  const noGutters = specified('no-gutters')
+  const vertCenter = specified('vert-center')
 
     // content wrapper clx:
     // [
@@ -49,6 +51,8 @@ const ScreenfulComponent: React.FC<{
       // mobile header: 44px / pt-11  
     narrowGutters ? 
       'px-6 lg:px-8 2xl:px-2 pb-6 ' + (snapTile  ? 'pt-15 md:pt-26 lg:pt-28 ' : '') // otherwise assume there is a Main
+    : noGutters ? 
+      'px-0 pb-0 ' + (snapTile  ? 'pt-11 lg:pt-20 ' : '') // otherwise assume there is a Main
       : 
       'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
 
@@ -68,7 +72,13 @@ const ScreenfulComponent: React.FC<{
             initialInView={initialInView}
           />
         )}
-        <div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClx)} >
+        <div className={cn(
+            ...cwclx,
+            snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full',
+            contentClx,
+            vertCenter ? '!py-0 self-center' : ''
+          )}
+        >
           <Content block={b} agent={agent}  className='w-full'/>
           {b.footer}
         </div>

package/common/chat-widget.tsx

@@ -0,0 +1,75 @@
+'use client'
+import React from 'react'
+
+import { X } from 'lucide-react'
+
+import LuxLogo from './icons/lux-logo'
+import { Button, Card } from '../primitives'
+
+const ChatWidget: React.FC<{
+  title: string,
+  chatbotUrl: string,
+  subtitle?: string,
+  question?: string,
+  /* 
+    Currently supports these icons from remix icons (https://remixicon.com/):
+      GlobalLineIcon,
+      ShieldFlashLineIcon,
+      BankCardLineIcon,
+      GroupLineIcon,
+      QuestionnaireLineIcon
+  */
+  suggestedQuestions?: { heading: string, message: string, icon?: string }[]
+}> = ({
+  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-20 right-0 w-full h-full ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1002] ' +
+      (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'>
+            <X />
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </div>
+
+    <Button
+      variant='outline'
+      size='link'
+      onClick={onClick}
+      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full z-[1001]'
+    >
+      {showChatbot ? <X /> : <LuxLogo width={24} height={24} className='mt-2' />}
+    </Button>
+  </>)
+}
+
+export default ChatWidget

package/common/contact-dialog/contact-form.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import React, { useTransition } from 'react'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
+import * as z from 'zod'
+  // @ts-ignore
+import validator from 'validator'
+
+import { Loader2 } from 'lucide-react'
+
+import {
+  Button,
+  Input,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '../../primitives'
+
+import type { ContactInfo, SubmitServerAction } from '../../types'
+
+const ValidationSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "Email must be provided." })
+    .email("Invalid email."),
+  phone: z
+    .string()
+    .min(1, { message: "Telephone must be provided." })
+    .refine(validator.isMobilePhone, { message: "Invalid format." })
+})
+
+const ContactForm: React.FC<{
+  onSubmit: SubmitServerAction
+  enclosure: any
+}> = ({
+  onSubmit,
+  enclosure
+}) => {
+
+  const form = useForm<ContactInfo>({
+      // @ts-ignore (pnpm linking / tsc bug )
+    resolver: zodResolver(ValidationSchema),
+    defaultValues: {
+      email: '',
+      phone: '',
+    },
+  })
+
+  const [isPending, startTransition] = useTransition()
+
+  const onFormSubmit: SubmitHandler<ContactInfo> = (data) => {
+    // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
+    // @ts-ignore
+    startTransition(async () => {
+      await onSubmit(data, enclosure)
+    })
+  }
+
+  const MyFormItem: React.FC<{ 
+    field: ControllerRenderProps<ContactInfo, 'email'> | ControllerRenderProps<ContactInfo, 'phone'>  
+    placeholder: string
+  }> = ({
+    field,
+    placeholder
+  }) => (
+  <FormItem className="space-y-0" >
+    <FormControl>
+      <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
+    </FormControl>
+    <div className="flex flex-row justify-start items-stretch gap-2">
+      <FormMessage />
+    </div>
+  </FormItem>
+)
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)} className="w-3/4">
+        <div className='flex flex-col justify-start items-stretch mt-4'>
+        <FormField
+          control={form.control}
+          name='email'
+            // @ts-ignore
+          render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
+        />
+        <FormField
+          control={form.control}
+          name='phone'
+            // @ts-ignore
+          render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
+        />
+          <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
+            {isPending ? (<>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Please wait
+              </>
+            ) : (
+              <>Submit</>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default ContactForm

package/common/contact-dialog/disclaimer.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Disclaimer: React.FC = () => (
+  <div>
+    By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
+    Message and data rates may apply. Message frequency varies. 
+    You can unsubscribe at any time by replying STOP. 
+    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
+  </div>
+)
+
+export default Disclaimer
+

package/common/contact-dialog/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+
+import type { ButtonModalProps} from '../../types'
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../primitives'
+
+import ContactForm from './contact-form'
+import Disclaimer from './disclaimer'
+
+const ContactDialog: React.FC<ButtonModalProps> = ({
+  open,
+  onOpenChange,
+  buttonText,
+  buttonProps,
+  title,
+  byline,
+  action,
+  actionEnclosure
+}) => (
+  <Dialog open={open} onOpenChange={onOpenChange} >
+    <DialogTrigger asChild>
+      <Button {...buttonProps} >{buttonText}</Button>
+    </DialogTrigger>
+    <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
+      <DialogHeader className='py-6 text-foreground'>
+        <DialogTitle className='text-4xl font-heading text-center text-inherit'>{title}</DialogTitle>
+        {byline && (<DialogDescription className='text-inherit text-xl text-center'>{byline} </DialogDescription>)}
+      </DialogHeader>
+      <div className='p-8 rounded-e-lg flex flex-col justify-start items-center'>
+        <ContactForm onSubmit={action} enclosure={actionEnclosure}/>
+        <div className='text-muted-1 text-xs mt-4' >
+          <Disclaimer />
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+)
+
+export default ContactDialog

package/common/copyright.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const FIRST = 2020
+
+const Copyright: React.FC<{
+  className?: string
+}> = ({
+  className='' 
+}) => {
+
+  const year = new Date().getFullYear()
+  const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
+
+  return (
+    <div className={className}>
+      {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Ltd.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
+    </div> 
+  )
+}
+
+export default Copyright

package/common/drawer-menu.tsx

@@ -0,0 +1,54 @@
+'use client'
+import React, { type PropsWithChildren, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import Logo from './logo'
+import { Sheet, SheetContent, SheetTrigger } from '../primitives/sheet'
+
+const DrawerMenu: React.FC<PropsWithChildren & {
+  trigger: ReactNode
+  className?: string
+  showLogo?: boolean,
+  propogate?: boolean
+  asChild?: boolean
+}> = ({
+  trigger,
+  children,
+  className='',
+  showLogo=true,
+  propogate=true,
+  asChild=false
+}) => {
+
+  const [open, setOpen] = React.useState(false)
+
+  const onAction = () => { setOpen(false) }
+
+    // https://stackoverflow.com/a/49052730/11645689
+  const updatedChildren = React.Children.map(
+    children,
+    (child) => (React.cloneElement(
+      child as any, { onAction }
+    ))
+  )
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} >
+      <SheetTrigger className={className} asChild={asChild}>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent 
+        side="right" 
+        closeButtonClass='text-inherit opacity-90' 
+        onClick={propogate ? onAction : () => {}}
+        closeElement={<LucideX className='h-6 w-6 text-inherit'/>}
+        centerElement={showLogo ? <Logo size='xs' className='' /> : null}
+      >
+        {updatedChildren}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export default DrawerMenu

package/common/footer.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import type { LinkDef, SiteDef } from '../types'
+import { Copyright } from '.'
+import { NavItems } from '../primitives'
+import { legal } from '../siteDef/footer/legal'
+
+import Logo from './logo'
+import { cn } from '../util'
+
+const Footer: React.FC<{
+  siteDef: SiteDef,
+  className?: string,
+  noHorizPadding?: boolean
+}> = ({
+  siteDef,
+  className='',
+  noHorizPadding=false
+}) => {
+
+  const { footer, aboveCopyright } = siteDef
+  const smGridCols = Math.floor(footer.length/2)
+  const smGridColsClx = `sm:grid-cols-${smGridCols} `
+  const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
+
+  return (
+    <footer className={cn('grow flex flex-col justify-end gap-6 pb-[2vh]', className)}> 
+      <div className={
+        (noHorizPadding ? '' : 'px-5 md:px-8 ') +
+        'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +  
+        'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
+        'md:flex md:flex-row md:justify-between ' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' />
+        </div>
+        {footer.map((defs: LinkDef[], index) => {
+
+          const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ? 
+            'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
+
+          return (
+            <NavItems
+              items={defs} 
+              currentAs={siteDef.currentAs}
+              as='nav' 
+              className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' + 
+                'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
+                xsColSpanClx
+              )} 
+              key={index + 1}
+              itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
+                'font-nav text-[15px]/[1.3] font-medium text-foreground tracking-normal'
+                : 
+                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
+              )}
+            /> 
+          )
+        })}
+      </div>
+      <div className='md:mt-[2vh]'>
+      {_aboveCopyright.length > 0 && (
+        <NavItems
+          items={_aboveCopyright} 
+          as='div' 
+          className={'flex flex-row justify-center gap-4 mb-2'} 
+          itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
+        />
+      )} 
+        <Copyright className='text-sm text-center text-muted-3'/>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
+// flex flex-col justify-between gap-6

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

@@ -0,0 +1,158 @@
+/**
+ *
+ * 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
+}