@hanzo/ui 4.6.0 → 4.7.0

package/blocks/components/image-block.tsx

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

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

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

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

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

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

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

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

package/blocks/def/accordian-block.ts

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

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