@hanzo/ui 0.5.23 → 0.6.15

package/blocks/def/carte-blanche-block.ts

@@ -1,21 +0,0 @@
-
-import type Block from './block'
-import type CTABlock from './cta-block'
-import type EnhHeadingBlock from './enh-heading-block'
-
-interface CarteBlancheBlock extends Block {
-  blockType: 'carte-blanche'
-    // big-padding
-    // no-outer-borders
-    // no-internal-borders
-    // style-ghost (no-internal-borders, no outer border, no padding)
-  specifiers?: string 
-  topContent?: Block[] 
-  heading?: EnhHeadingBlock
-  content?: Block[] 
-  cta?: CTABlock
-}
-
-export {
-  type CarteBlancheBlock as default
-}

package/blocks/def/cta-block.ts

@@ -1,19 +0,0 @@
-import type { LinkDef, ButtonDef } from '../../types'
-import type Block from './block'
-
-interface CTABlock extends Block {
-  blockType: 'cta'
-    // fill: fills the parent width with the elements
-    // left / right: (>= md) left or right justify the elements (default is center)
-    // mobile-2-columns: mobile defaults to rendering each element full width,
-    //   on it's own line. This renders them in two columns instead. 
-    // mobile-center-first-if-odd: if (mobile-2-columns) and length is odd, 
-    //   default is to center last 
-    // mobile-odd-full-width: fills the full two columns w the centered element
-  specifiers?: string
-  elements: (LinkDef | ButtonDef)[]
-}
-
-export {
-  type CTABlock as default
-}

package/blocks/def/element-block.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-import type Block from './block'
-
-interface ElementBlock extends Block {
-  blockType: 'element'
-  element: React.ReactNode | JSX.Element
-}
-
-export {
-  type ElementBlock as default 
-}

package/blocks/def/enh-heading-block.ts

@@ -1,45 +0,0 @@
-import type Icon from '../../types/icon'
-import type Block from './block'
-
-  // level is heading tag level. 1 renders as <h1>, etc... 0 renders as <p>
-  //
-  // mb: is bottom margin in tw units. 'mb-1' produces 0.25rem, so a value of 4 would produce 1rem
-  //    These are dynamically generated from a template string. mb-1 --> mb-12 have been safelisted.
-  //    Any higher values used would have to explicitly safelisted in tailwind config. 
-  //    The margin will only be applied if the next element down is present. 
-  //    (eg, heading mb applies only if there is a byline.) 
-
-interface EnhHeadingBlock extends Block {
-  blockType: 'enh-heading'
-    // tbd: icon-w-heading (if preheading is present), 
-    // tbd: icon-w-byline (if preheading and heading is present), 
-    // tbd: icon-above: above first element
-    // tbd: icon-to-right: to right of corresponding element or right justified if 'icon-above'
-    // mobile-heading-centered
-    // left / right / center for preheading and heading (byline stays left)
-    // byline-left / byline-right / byline-center
-    // preheading-heading-font
-  specifiers?: string  
-    // By default, appears inline to left of first element (preheading or heading) 
-    // unless indicated otherwise in specifiers 
-  icon?: Icon | string  // ReactNode or url string to asset
-  iconSize?: number     // if url string, this sets the size
-  preheading?: {
-    text: string
-    level?: number  // default: 4 
-    mb?: number     // default: 2    
-  }
-  heading: {
-    text: string
-    level?: number  // default: 1
-    mb?: number     // default: 2
-  }
-  byline?: {
-    text: string
-    level?: number  // default: 6
-  }
-}
-
-export {
-  type EnhHeadingBlock as default 
-}

package/blocks/def/grid-block.ts

@@ -1,16 +0,0 @@
-import type Block from "./block"
-import type GridDef from "../../types/grid-def"
-
-interface GridBlock {
-  blockType: 'grid'
-  specifiers?: string
-  grid: GridDef
-    /**
-     * Ignored if children are supplied to the GridBlockComp
-     */ 
-  cells?: Block[] 
-}
-
-export {
-  type GridBlock as default
-}

package/blocks/def/group-block.ts

@@ -1,11 +0,0 @@
-import type Block from './block'
-
-interface GroupBlock extends Block {
-  blockType: 'group'
-  specifiers?: string // grid-2 slider disabled or whatever
-  elements: Block[]
-}
-
-export {
-  type GroupBlock as default
-}

package/blocks/def/heading-block.ts

@@ -1,15 +0,0 @@
-import type Block from './block'
-
-interface HeadingBlock extends Block {
-  blockType: 'heading'
-  heading: string
-  byline?: string
-  level?: number
-  bylineLevel?: number
-  spaceBetween?: number 
-  spaceAfter?: number 
-}
-
-export {
-  type HeadingBlock as default 
-}

package/blocks/def/image-block.ts

@@ -1,31 +0,0 @@
-import type { ImageDef } from '../../types'
-import type Block from './block'
-
-  /**
-   * See {@link ImageDef}
-   * see https://nextjs.org/docs/app/api-reference/components/image
-   * as well as React.ImgHTMLAttributes. 
-   */
-interface ImageBlock extends Block, ImageDef {
-  blockType: 'image'
-
-  /**
-   * Alignement: 'left' (default) / 'right' / 'center' (must be in flex-col parent)
-   * 'mobile-no-scale': By default, scales to 3/4 height (mobile and w < 'md')
-   * 'mobile-full-width': Overrides dim, etc. and renders full width (maintaining aspect ratio)
-   */
-  specifiers?: string
-    /** @deprecated Please use 'mobile-full-width' in specifiers  */
-  fullWidthOnMobile?: boolean
-    /** Next props */
-  props?: {
-    sizes?: string
-      /** if true, any alignement specifiers are ignored */
-    fill?: boolean  
-    style?: any
-  }
-}
-
-export {
-  type ImageBlock as default,
-}

package/blocks/def/index.ts

@@ -1,35 +0,0 @@
-import type AccordianBlock from './accordian-block'
-import type Block from './block'
-import type BulletCardsBlock from './bullet-cards-block'
-import type CardBlock from './card-block'
-import type CarteBlancheBlock from './carte-blanche-block'
-import type CTABlock from './cta-block'
-import type ElementBlock from './element-block'
-import type GridBlock from './grid-block'
-import type GroupBlock from './group-block'
-import type EnhHeadingBlock from './enh-heading-block'
-import type HeadingBlock from './heading-block'
-import type ImageBlock from './image-block'
-import type VideoBlock from './video-block'
-import type SpaceBlock from './space-block'
-import { SPACE_DEFAULTS } from './space-block'
-import type ScreenfulBlock from './screenful-block'
-
-export { 
-   type AccordianBlock, 
-   type Block,
-   type BulletCardsBlock,
-   type CardBlock,
-   type CarteBlancheBlock,
-   type CTABlock,
-   type ElementBlock,
-   type GridBlock,
-   type GroupBlock,
-   type HeadingBlock,
-   type EnhHeadingBlock, 
-   type ImageBlock,
-   type VideoBlock,
-   type SpaceBlock,
-   type ScreenfulBlock,
-   SPACE_DEFAULTS
-}

package/blocks/def/screenful-block.ts

@@ -1,54 +0,0 @@
-import type { ReactNode } from 'react'
-
-import type Block from './block'
-import type VideoBlock from './video-block'
-
-  /**
-   * A common screenful of content
-   * An optional banner image or video
-   * Content can be in columns
-   */
-interface ScreenfulBlock extends Block {
-  blockType: 'screenful'
-
-
-    /**
-     * Either an image URL, or a Video Block
-     * 
-     * If VideoBlock, then it's poster will be rendered server-side
-     * and the <video> component will be lazy-loaded client-side.
-     * 
-     * If in a scrolling situation, the video will autoplay when 75% in view
-     */
-  banner?: string | VideoBlock 
-    
-    /** Specifies rendering and layout hints and variants for block as a whole */ 
-  specifiers?: string
-
-    /** Specifies rendering and layout hints and variants for corresponding column */ 
-  columnSpecifiers?: string[]
-
-    /**
-     * Mobile: The order in the single column mobile layout in which the columns appear.
-     * Overrides column order.
-     * eg, if you want the second tile of three at the top: [1, 0, 2] 
-     */
-  mobileOrder?: number[]
-
-    /**
-     * Content Blocks for 1-3 columns. 
-     * (More than that is allowed, but impractical at many resolutions!) 
-     * If > 1, it will be enclosed in a 'grid grid-cols-<x>' div. 
-     */
-  contentColumns: Block[][]
-
-    /** optional footer element below the grid */
-  footer?: ReactNode
-
-    /** optional id for linking to this slide / screenful */
-  anchorId?: string  
-}
-
-export {
-  type ScreenfulBlock as default
-}

package/blocks/def/space-block.ts

@@ -1,64 +0,0 @@
-import type { Breakpoint } from '../../types'
-
-import type Block from './block'
-
-type TWSpaceUnit = number // TODO, pull from tw conf 
-type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6
-
-const SPACE_DEFAULTS = {
-  xs: 2,
-  sm: 4,
-  md: 5,
-  lg: 6,
-  xl: 8
-} satisfies {
-  [key in (Breakpoint)]?: TWSpaceUnit
-}
-
-
-interface SpaceBlock extends Block {
-  blockType: 'space'
-
-  /**
-   * TW units of vertical space, applied at Breakpoints
-   * or
-   * if just a number, that number at all Breakpoints
-   * 
-   * default {
-   *  xs: 2,
-   *  sm: 4,
-   *  md: 5,
-   *  lg: 6,
-   *  xl: 8
-   * }
-   * 
-   * Any provided values will be merge w the defaults
-   * And applied as if they were tw classes in ascending
-   * order. 
-   * 
-   * impl: <div className='invisible w-[1px] xs:h-<xsval> sm:h-<smval> etc...' />
-   */
-  sizes?: {
-    [key in (Breakpoint)]?: TWSpaceUnit
-  } | TWSpaceUnit
-
-  /**
-   * Heading levels.  Gives the vertical space that the corresponding
-   * h tag would give. 
-   * default: 3 (height of <h3>) 
-   * 0 = 1rem (plus any gaps), 
-   * For example, 1 = <h1 style={visibility: hidden}>&nbsp;</h1> 
-   *   As <ApplyTypography> would render it, plus any gap.
-   */
-  level?: HeadingLevel
-
-  test?: boolean
-
-}
-
-export {
-  type SpaceBlock as default,
-  type TWSpaceUnit,
-  type HeadingLevel,
-  SPACE_DEFAULTS
-}

package/blocks/def/video-block.ts

@@ -1,28 +0,0 @@
-import type { TShirtDimensions } from '../../types'
-import type Block from './block'
-
-interface VideoBlock extends Block {
-  blockType: 'video'
-  videoProps?: any   // For example,
-    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      videoProps: {
-        autoPlay: true, 
-        loop: true, 
-        muted: true, 
-        playsInline: true
-      }, 
-
-      Valueless props are boolean.  
-      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
-    ~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-  poster?: string      
-  sources?: string[]
-  dim: TShirtDimensions 
-    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
-  sizing?: any
-}
-
-export {
-  type VideoBlock as default,
-}

package/blocks/index.ts

@@ -1,2 +0,0 @@
-export * from './def'
-export * from './components'

package/common/chat-widget.tsx

@@ -1,75 +0,0 @@
-'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

@@ -1,111 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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

@@ -1,48 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-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