@hanzo/ui 4.9.0 → 5.0.1

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

package/blocks/components/video-block.tsx

@@ -0,0 +1,138 @@
+'use client'
+import React, { useEffect, useLayoutEffect, useState } from 'react'
+
+import Image from 'next/image'
+
+import type { Dimensions, TShirtSize, TShirtDimensions } from '../../types'
+import { constrain, asNum, cn } from '../../util'
+import type { VideoBlock } from '../def'
+import { VideoPlayer } from '../../primitives/index-common'
+
+import type BlockComponentProps from './block-component-props'
+
+const VideoBlockComponent: React.FC<BlockComponentProps & {
+  usePoster?: boolean
+  size?: TShirtSize
+  constrainTo?: Dimensions
+}> = ({
+  block,
+  className='',
+  agent,
+  usePoster=false,
+  size='md',
+  constrainTo
+}) => {
+
+  const [_dim, setDim] = useState<Dimensions | undefined>(undefined)
+
+  const onResize = () => { 
+    setDim({
+      w: window.innerWidth,
+      h: window.innerHeight
+    }) 
+  } 
+
+  const windowDefined = typeof window !== 'undefined'
+
+  useEffect(() => { 
+    if (window && agent === 'desktop') {
+      window.addEventListener('resize', onResize) 
+      return () => window.removeEventListener('resize', onResize) 
+    }
+  }, [windowDefined]) 
+
+  useLayoutEffect(() => { 
+    onResize() 
+  }, [])
+
+
+  if (block.blockType !== 'video') {
+    return <>video block required</>
+  }
+
+  const b = block as VideoBlock
+  const ar = b.dim.md.w / b.dim.md.h
+  if (agent === 'phone') {
+    if (b.sizing?.mobile?.vw) {
+      // serverside, or at least while the video is loading,
+      // generate the css for the correctly sized poster image
+      if (!_dim) {
+        const width = `${b.sizing.mobile.vw}vw`
+        return <div className='dummy-div' style={{
+          maxWidth: '100%',
+          maxHeight: '100%',
+          width,
+          height: `calc(${width}/${ar})`,
+          backgroundImage: `url(${b.poster!})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat', 
+        }} />
+      }
+      else {
+        const width = ((b.sizing.mobile.vw / 100) * _dim.w)
+        const dim  = {
+          h: width / ar,
+          w: width
+        }
+        return ((
+          <VideoPlayer 
+            className={cn('mx-auto', className)} 
+            sources={b.sources} 
+            width={dim.w} 
+            height={dim.h} 
+            {...b.videoProps} 
+          />
+        ))
+      }
+    }
+  }
+  else if (b.sizing?.vh) {
+      // serverside, generate the css for the correctly sized poster image
+    if (!_dim) {
+      const height = `${b.sizing.vh}vh`
+      return <div className='dummy-div' style={{
+        maxWidth: '100%',
+        maxHeight: '100%',
+        height: height,
+        width: `calc(${height}*${ar})`,
+        backgroundImage: `url(${b.poster!})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat', 
+      }} />
+    }
+    else {
+
+      const height = ((b.sizing.vh / 100) * _dim.h)
+      const dim  = {
+        h: height,
+        w: height * ar
+      }
+      return ((
+        <VideoPlayer 
+          className={cn('mx-auto', className)} 
+          sources={b.sources} 
+          width={dim.w} 
+          height={dim.h} 
+          {...b.videoProps} 
+        />
+      ))
+    }
+  }
+  
+  const videoDims = b.dim as TShirtDimensions
+  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as Dimensions
+  const conDim = (constrainTo ? constrain(dim, constrainTo) : dim) 
+  return usePoster ? (
+    <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
+  ) : (
+    <VideoPlayer 
+      className={cn('mx-auto', className)} 
+      sources={b.sources} 
+      width={conDim.w} 
+      height={conDim.h} 
+      {...b.videoProps} 
+    />
+  )
+}
+
+export default VideoBlockComponent