@hanzo/ui 0.5.10

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

@@ -0,0 +1,115 @@
+import React, { type 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 {
+    modifiers += 'justify-start ' 
+  }
+
+  if (agent === 'phone' && specified('mobile-center-headings')) {
+    modifiers += 'typography-headings:text-center '  
+  }
+
+  return (
+    <div className={cn('flex flex-col justify-center ' + modifiers, className)} >
+      <ContentComponent blocks={blocks} agent={agent} />
+    </div>
+  )
+}  
+
+const Content: React.FC<{
+  block: ScreenfulBlock
+  agent?: string
+  className?: string
+}> = ({
+  block: b,
+  agent,
+  className='',
+}) => {
+
+
+  const layoutClx = 'flex flex-col gap-6 ' + ((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,77 @@
+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'
+
+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
+  className?: string
+}> = ({
+  block,
+  agent,
+  initialInView=false,
+  snapTile=false,
+  className=''
+}) => {
+
+  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
+
+    // content wrapper clx:
+    // [
+    //    positioning, 
+    //    p&m, 
+    //    p&m-modifiers
+    // ]
+  const cwclx = [
+    'z-10 absolute left-0 right-0  top-0 bottom-0 xl:mx-auto max-w-screen-xl overflow-y-hidden ',
+      // desktop header: 80px / pt-20
+      // mobile header: 44px / pt-11  
+    narrowGutters ? 
+      'px-6 lg:px-8 2xl:px-2 pb-6 pt-15 md:pt-26 lg:pt-28 ' 
+      : 
+      '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 className={cn('h-[100vh]', (snapTile ? 'snap-start snap-always' : ''), className)}>
+      <ApplyTypography className={tileHeight + 'w-full flex flex-row justify-center self-stretch'} >
+        <Poster banner={b.banner}>
+        {hasBannerVideo() && (
+          <Video 
+            block={b.banner! as VideoBlock} 
+            className='z-0 absolute top-0 left-0 bottom-0 right-0' 
+            initialInView={initialInView}
+          />
+        )}
+        <div className={cn(...cwclx)} >
+          <Content block={b} agent={agent}  className='w-full'/>
+          {b.footer}
+        </div>
+      </Poster>
+      </ApplyTypography>
+    </section>
+  )
+}
+
+export default ScreenfulComponent

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

@@ -0,0 +1,34 @@
+import React, { type 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 } 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'
+
+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={`invisible w-[1px] h-${b.sizes}` } /> 
+    }
+    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={'invisible w-[1px] ' +  clx} />
+  }
+
+  const Tag = TAGS[b.level]
+  const heightClx = (b.level === (0 satisfies HeadingLevel as HeadingLevel)) ? 'h-4' : ''
+
+  return (
+    <ApplyTypography>
+      <Tag className={'invisible m-0 ' + heightClx} >&nbsp;</Tag> 
+    </ApplyTypography>
+  )
+}
+
+export default SpaceBlockComponent

package/blocks/components/video-block.tsx

@@ -0,0 +1,137 @@
+'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'
+
+import type BlockComponentProps from './block-component-props'
+
+const VideoBlockComponent: React.FC<BlockComponentProps & {
+  usePoster?: boolean
+  size?: TShirtSize
+  constraint?: Dimensions
+}> = ({
+  block,
+  className='',
+  agent,
+  usePoster=false,
+  size='md',
+  constraint
+}) => {
+
+  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 = asNum(b.dim.md.w) / asNum(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) * asNum(_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) * asNum(_dim.h))
+      const dim  = {
+        h: height,
+        w: height * ar
+      }
+      return ((
+        <VideoPlayer 
+          className={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 = (constraint ? constrain(dim, constraint) : dim) 
+  return usePoster ? (
+    <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
+  ) : (
+    <VideoPlayer 
+      className={className} 
+      sources={b.sources} 
+      width={conDim.w} 
+      height={conDim.h} 
+      {...b.videoProps} 
+    />
+  )
+}
+
+export default VideoBlockComponent

package/blocks/def/accordian-block.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+import type Block from './block'
+
+interface AccordianBlock extends Block {
+  blockType: 'accordian'
+  items: {
+    trigger: string
+    content: React.ReactNode 
+  }[]
+}
+
+export {
+  type AccordianBlock as default
+}

package/blocks/def/block.ts

@@ -0,0 +1,7 @@
+interface Block {
+  blockType: string
+}
+
+export {
+  type Block as default
+}

package/blocks/def/bullet-cards-block.ts

@@ -0,0 +1,20 @@
+import type Block from './block'
+
+import type { BulletItem, GridDef } from '../../types'
+
+interface BulletCardsBlock extends Block {
+  blockType: 'bullet-cards'
+    /**
+     * borders-muted-1 / borders-muted-3 
+     * default: 2 
+     */
+  specifiers?: string
+  grid: GridDef
+  cards: BulletItem[]
+    /** in px */
+  iconSize?: number 
+}
+
+export {
+  type BulletCardsBlock as default
+}

package/blocks/def/card-block.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { type Icon } from '../../types'
+
+import type CTABlock from './cta-block'
+import type Block from './block'
+import type ImageBlock from './image-block'
+import type VideoBlock from './video-block'
+
+interface CardBlock extends Block {
+  blockType: 'card'
+  specifiers?: string // 'media-left' or 'appear-disabled' or 'no-borders', etc... can be combined
+  title?: string
+  byline?: string
+  icon?: Icon // for title area
+  iconAfter?: boolean
+  media?: ImageBlock | VideoBlock
+  content?: React.ReactNode
+  cta?: CTABlock
+}
+
+export {
+  type CardBlock as default
+}

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

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

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

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

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

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

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

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