@hanzo/ui 4.7.0 → 4.8.2

package/blocks/components/heading-block.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import type { HeadingBlock } from '../def'
+import { ApplyTypography } from '../../primitives/index-common'
+
+import type BlockComponentProps from './block-component-props'
+
+const HeadingBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className=''
+}) => {
+
+  if (block.blockType !== 'heading') {
+    return <>heading block required</>
+  }
+  const heading = block as HeadingBlock
+
+  let Tag: React.ElementType  
+  let BylineTag: React.ElementType | undefined = undefined 
+  
+  switch (heading.bylineLevel) {
+    case 0: {
+      BylineTag = 'p'
+    } break
+    case 1: {
+      BylineTag = 'h1'
+    } break
+    case 2: {
+      BylineTag = 'h2'
+    } break
+    case 3: {
+      BylineTag = 'h3'
+    } break
+    case 4: {
+      BylineTag = 'h4'
+    } break
+    case 5: {
+      BylineTag = 'h5'
+    } break
+    case 6: {
+      BylineTag = 'h6'
+    } break
+  }
+    // bylineLevel default is two levels below the main heading
+  switch (heading.level) {
+    case 0: {
+      Tag = 'p'
+      BylineTag = BylineTag ?? 'p'
+    } break
+    case 1: {
+      Tag = 'h1'
+      BylineTag = BylineTag ?? 'h3'
+    } break
+    case 2: {
+      Tag = 'h2'
+      BylineTag = BylineTag ?? 'h4'
+    } break
+    // 3 is default
+    case 4: {
+      Tag = 'h4'
+      BylineTag = BylineTag ?? 'h6'
+    } break
+    case 5: {
+      Tag = 'h5'
+      BylineTag = BylineTag ?? 'p'
+    } break
+    case 6: {
+      Tag = 'h6'
+      BylineTag = BylineTag ?? 'p'
+    } break
+    default: {
+      Tag = 'h3'
+      BylineTag = BylineTag ?? 'h5'
+    }
+  }
+
+    // Had to do this way, since tw typo plugin does support overrding typo styling wiithout .not-typography
+  return (
+    <ApplyTypography className={className}>
+      <Tag >{heading.heading}</Tag>
+      {heading.spaceBetween && <div className={'w-[1px] ' + `h-${heading.spaceBetween}`} />}
+      {heading.byline && (<BylineTag>{heading.byline}</BylineTag>)}
+      {heading.spaceAfter && <div className={'w-[1px] ' + `h-${heading.spaceAfter}`} />}
+    </ApplyTypography>
+  )
+}
+
+export default HeadingBlockComponent

package/blocks/components/image-block.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import Image from 'next/image'
+
+import type { Dimensions } from '../../types'
+import type { ImageBlock } from '../def'
+import { constrain, containsToken, cn } from '../../util'
+
+import type BlockComponentProps from './block-component-props'
+
+
+const ImageBlockComponent: React.FC<BlockComponentProps & {
+  constraintTo?: Dimensions
+}> = ({
+  block,
+  className='',
+  agent,
+  constraintTo
+}) => {
+  
+  if (block.blockType !== 'image') {
+    return <>image block required</>
+  }
+
+  const {
+    src, 
+    alt, 
+    dim, 
+    props, 
+    sizes,
+    fullWidthOnMobile, 
+    svgFillClass,
+    specifiers
+  } = block as ImageBlock
+
+  const specified = (s: string): boolean => (containsToken(specifiers, s)) 
+
+  const toSpread: any = {}
+  if (props?.fill === undefined) {
+    const resolved = constraintTo ? constrain(dim, constraintTo) : dim
+    toSpread.width = resolved.w
+    toSpread.height = resolved.h
+  } 
+
+  let _alt: string
+  if (alt) {
+    _alt = alt
+  }
+  else {
+    const tokens = src.split('/')
+      // Something remotely meaningful
+    _alt = (tokens.length > 0) ? tokens[tokens.length] : src
+  }
+
+  const _svgFillClass = svgFillClass ?? ''
+
+    // TODO: use two elements with 'md:hidden' for 3/4 size
+    // https://nextjs.org/docs/app/building-your-application/optimizing/images#responsive
+  if (agent === 'phone' ) {
+    if (specified('mobile-full-width') || fullWidthOnMobile) {
+      const toSpread: any =  {
+        style: {
+          width: '100%',
+          height: 'auto',
+          maxWidth: '420px'
+        },
+        sizes: '100vw',
+      }
+        // only for aspect ratio and to satisfy parser
+      toSpread.width = dim.w
+      toSpread.height = dim.h
+
+      return (
+        <div className='flex flex-col items-center w-full'>
+          <Image src={src} alt={_alt} {...toSpread} className={cn(_svgFillClass, className)}/>
+        </div>
+      )
+    }
+      // TODO use constraint
+    else if (!specified('mobile-no-scale')) {
+      if (props?.style?.width === 'auto' && typeof props.style.height === 'number' ) {
+        props.style.height = props.style.height *.75 
+      }
+      else if (props?.style?.height === 'auto' && typeof props?.style?.width === 'number' ) {
+        props.style.width = props.style.width *.75 
+      }
+      else if (props?.style && !props?.style.width) {
+        toSpread.width = dim.w * .75
+        toSpread.height = dim.h * .75
+      }
+    }
+  }
+  if (sizes) {
+    toSpread.sizes = sizes
+  }
+
+  const right = containsToken(specifiers, 'right')
+  const center = containsToken(specifiers, 'center')
+
+  const alignSelfClx = right ? 'self-end' : (center ? 'self-center' : 'self-start')
+
+  return (props?.fill) ? (
+    <div className='relative w-full h-full'>
+      <Image src={src} alt={_alt} {...toSpread} {...props} className={cn(_svgFillClass, 'max-w-[70vw] mx-auto', className)}/>
+    </div>
+  ) : (
+    <Image src={src} alt={_alt} {...toSpread} {...props} className={cn(alignSelfClx, _svgFillClass, 'max-w-[70vw] mx-auto', className)}/>   
+  )
+}
+
+export default ImageBlockComponent
+

package/blocks/components/index.ts

@@ -0,0 +1,30 @@
+import AccordianBlock from './accordian-block'
+import type BlockComponentProps from './block-component-props'
+import Blocks from './content'
+import CardBlock from './card-block'
+import { default as ContentComponent, registerBlockType} from './content'
+import CTABlock from './cta-block'
+import EnhHeadingBlock from './enh-heading-block'
+import GroupBlock from './group-block'
+import HeadingBlock from './heading-block'
+import ImageBlock from './image-block'
+import SpaceBlock from './space-block'
+import ScreenfulBlock from './screenful-block'
+import VideoBlock from './video-block'
+
+export { 
+   AccordianBlock as AccordianBlockComponent, 
+   type BlockComponentProps,
+   Blocks as BlocksComponent,
+   CardBlock as CardBlockComponent,
+   ContentComponent,
+   CTABlock as CTABlockComponent,
+   EnhHeadingBlock as EnhHeadingBlockComponent,
+   GroupBlock as GroupBlockComponent,
+   HeadingBlock as HeadingBlockComponent,
+   ImageBlock as ImageBlockComponent,
+   registerBlockType,
+   SpaceBlock as SpaceBlockComponent,
+   ScreenfulBlock as ScreenfulBlockComponent,
+   VideoBlock as VideoBlockComponent,
+}

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

@@ -0,0 +1,123 @@
+import React, { PropsWithChildren } from 'react'
+
+import type { Block, ScreenfulBlock} from '../../def'
+import { containsToken, cn } from '../../../util'
+import ContentComponent from '../content'
+
+const ContentColumn: React.FC<{
+  blocks: Block[]
+  specifiers?: string
+  agent?: string
+  className?: string
+}> = ({
+  blocks,
+  specifiers,
+  agent,
+  className='',
+}) => {
+
+  const specified = (s: string) => (containsToken(specifiers, s))
+
+  let modifiers = ''
+
+  if (agent !== 'phone') {
+    if (specified('right')) {
+      modifiers += 'items-end ' 
+      
+    }
+    else if (specified('center')) {
+      modifiers += 'items-center '
+    }
+    // default to left
+    else {
+      modifiers += 'items-start '
+    } 
+  }
+    // default to left
+  else {
+    modifiers += 'items-start '
+  } 
+
+  if (agent !== 'phone') {
+    if (specified('bottom')) {
+      modifiers += 'justify-end ' 
+    }
+    else if (specified('vert-center')) {
+      modifiers += 'justify-center ' 
+    }
+      // default to top 
+    else {
+      modifiers += 'justify-start ' 
+    } 
+    // right aligned text looks shitty on mobile 
+    if (specified('text-align-right')) {
+      modifiers += 'text-right '  
+    }
+    else {
+      modifiers += 'text-left '  
+    }
+  }
+  else {
+    if (specified('mobile-vert-center')) {
+      modifiers += 'justify-center ' 
+    }
+    else {
+      modifiers += 'justify-start ' 
+    }
+  }
+
+  if (agent === 'phone' && specified('mobile-center-headings')) {
+    modifiers += 'typography-headings:text-center '  
+  }
+
+  /* ContentComponent's parent div needs h-full class in order for vertical alignment with flexbox to work.
+  *  This affects specifiers: bottom, vert-center, mobile-vert-center
+  */
+  return (
+    <div className={cn('flex flex-col justify-center h-full', modifiers, className)} >
+      <ContentComponent blocks={blocks} agent={agent} />
+    </div>
+  )
+}  
+
+const Content: React.FC<{
+  block: ScreenfulBlock
+  agent?: string
+  className?: string
+}> = ({
+  block: b,
+  agent,
+  className='',
+}) => {
+
+  // We need to set h-full when we have more than 1 column too, so the grid takes full height - Firefox and Safari fix.
+  const layoutClx = 'flex flex-col gap-2 sm:gap-4 h-full ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
+
+  const orderclx = (columnIndex: number): string => {
+    const orderIndex = b.mobileOrder?.indexOf(columnIndex)
+    return (orderIndex && orderIndex >= 0) ? `order-${orderIndex} md:order-none` : '' // one-based in flexbox slec
+  }
+
+  return  b.contentColumns.length == 1 ? (
+    <ContentColumn 
+      blocks={b.contentColumns[0]} 
+      specifiers={b.columnSpecifiers?.[0]} 
+      agent={agent} 
+      className={cn(className)}
+    />
+  ) : (
+    <div className={cn(layoutClx, className)}>
+    {b.contentColumns.map((column, index) => (
+      <ContentColumn 
+        blocks={column} 
+        specifiers={b.columnSpecifiers?.[index]} 
+        agent={agent} 
+        className={orderclx(index)}
+        key={index}
+      />
+    ))}  
+    </div>
+  )
+}
+
+export default Content

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

@@ -0,0 +1,107 @@
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+
+import type { Block, ScreenfulBlock, VideoBlock } from '../../def'
+import { containsToken, cn } from '../../../util'
+import { ApplyTypography } from '../../../primitives/index-common'
+
+import Poster from './poster-background'
+import Content from './content'
+const Video = dynamic(() => (import('./video-background')), {ssr: false, loading: () => (<></>)})
+
+const ScreenfulComponent: React.FC<{
+  block: Block
+  agent?: string
+  initialInView?: boolean
+  snapTile?: boolean
+  clx?: string
+  contentClx?: string
+  bottom?: React.ReactNode
+}> = ({
+  block,
+  agent,
+  initialInView=false,
+  snapTile=false,
+  clx='',
+  contentClx='',
+  bottom
+}) => {
+
+  if (block.blockType !== 'screenful') {
+    return <>screenful block required</>
+  }
+  const b = block as ScreenfulBlock 
+
+  const hasBannerVideo = (): boolean => (!!b.banner && (typeof b.banner === 'object'))
+
+  const tileHeight = (agent === 'desktop') ? 'h-full ' : 'h-[100svh] '
+
+  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 fullScreenWidth = specified('full-screen-width')
+  const vertCenter = specified('vert-center') // at the main level, it seems only useful w one column
+  const oneColumn = b.contentColumns.length === 1
+
+    // content wrapper clx:
+    // [
+    //    positioning, 
+    //    p&m, 
+    //    p&m-modifiers
+    // ]
+  const cwclx = [
+    'xl:mx-auto overflow-y-hidden h-full',
+    fullScreenWidth ? '' : 'max-w-screen-xl',
+      // desktop header: 80px / pt-20
+      // mobile header: 44px / pt-11  
+    narrowGutters ? 
+      'px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8 ' + (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)] ',
+
+    (agent && agent !== 'desktop') ? 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8' : '' 
+  ]
+
+  return (
+    <section {...((b.anchorId) ? {id: b.anchorId} : {})} className={cn(
+      snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', 
+      bottom ? 'flex flex-col' : '',
+      clx
+    )}>
+      <ApplyTypography className={cn(
+        'w-full flex flex-row justify-center self-stretch', 
+        snapTile ? tileHeight : '',
+        bottom ? 'grow' : ''
+      )}>
+        <Poster banner={b.banner}>
+        {hasBannerVideo() && (
+          <Video 
+            block={b.banner! as VideoBlock} 
+            className='absolute top-0 left-0 bottom-0 right-0' 
+            initialInView={initialInView}
+          />
+        )}
+        <div className={cn(
+            ...cwclx,
+            snapTile ? 'absolute left-0 right-0 top-0 bottom-0 ' : 'flex min-h-screen w-full',
+            contentClx,
+              // TODO :aa py-0 breaks padding for header!  Investigate why I would have done this!
+            vertCenter ? 'self-center ' + (oneColumn ? '!py-0' : '' ) : ''
+          )}
+        >
+          <Content block={b} agent={agent}  className='w-full'/>
+          {b.footer}
+        </div>
+      </Poster>
+      </ApplyTypography>
+      {bottom}
+    </section>
+  )
+}
+
+export default ScreenfulComponent

package/blocks/components/screenful-block/poster-background.tsx

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react'
+
+import type { VideoBlock } from '../../def'
+import { cn } from '../../../util'
+
+const Poster: React.FC<{
+  banner: VideoBlock | string | undefined,
+  className?: string
+} & PropsWithChildren> = ({
+  children,
+  banner,
+  className=''
+}) => (
+  banner ? (
+    <div 
+      className={cn('relative', className)} 
+      style={{
+        height: '100%',
+        width: '100%',
+        backgroundImage: `url(${(typeof banner === 'string') ? banner : banner.poster!})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+      }} 
+    >
+      {children}
+    </div>
+  ) : (
+    <div className={cn('bg-transparent h-full w-full relative', className)}>
+      {children}  
+    </div>
+  )
+)
+
+export default Poster

package/blocks/components/screenful-block/video-background.tsx

@@ -0,0 +1,45 @@
+'use client'
+import React from 'react'
+
+import { useInView } from 'react-intersection-observer'
+
+import type { VideoBlock } from '../../def'
+
+const VideoBG: React.FC<{
+  block: VideoBlock,
+  className?: string,
+  initialInView: boolean
+}> = ({
+  block,
+  className='',
+  initialInView
+}) => {
+  const { ref, inView } = useInView({
+    threshold: 0.75,
+    initialInView,
+  })
+
+  return block ? (
+    <div ref={ref} className={className}>
+    {inView && (
+      <video
+        autoPlay
+        loop
+        muted
+        style={{
+          margin: 0,
+          height: '100%',
+          width: '100%',
+          objectFit: 'cover',
+        }} 
+      >
+      {block.sources?.map((src, index) => (  
+        <source key={index} src={src} />
+      ))} 
+      </video>
+    )}
+    </div>
+  ) : null
+}
+
+export default VideoBG

package/blocks/components/space-block.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { ldMerge, cn } from '../../util'
+
+import type { Breakpoint } from '../../types'
+import { SPACE_DEFAULTS , type TWSpaceUnit, type HeadingLevel} from '../def/space-block'
+import type SpaceBlock from  '../def/space-block' 
+import { ApplyTypography } from '../../primitives/index-common'
+
+import type BlockComponentProps from './block-component-props'
+
+const TAGS = [
+  'div',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+] satisfies React.ElementType[]
+
+const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className=''
+}) => {
+  
+  if (block && block.blockType !== 'space') {
+    return <>space block required</>
+  }
+
+  const b = block as SpaceBlock
+
+    // This code path should handle a undefined or empty sizes field.
+  if (!b.level) {
+    if (typeof b.sizes == 'number') {
+      return <div className={cn(`invisible w-[1px] h-${b.sizes}`, className) } /> 
+    }
+    const _sizes: {
+      [key in (Breakpoint)]?: TWSpaceUnit
+    } = {}
+    ldMerge(_sizes, SPACE_DEFAULTS, b.sizes)
+
+    let clx = ''
+    for (const [key, value] of Object.entries(_sizes)) {
+          // ts brain fart!
+        clx += `${key}:h-${value as TWSpaceUnit} `
+    }   
+
+    if (b.test) {
+      console.log(clx)
+    }
+
+    return <div className={cn('invisible w-[1px] ' +  clx, className)} />
+  }
+
+  const Tag = TAGS[b.level]
+  const heightClx = (b.level === (0 satisfies HeadingLevel as HeadingLevel)) ? 'h-4' : ''
+
+  return (
+    <ApplyTypography className={className}>
+      <Tag className={'invisible m-0 ' + heightClx} >&nbsp;</Tag> 
+    </ApplyTypography>
+  )
+}
+
+export default SpaceBlockComponent