@hanzo/ui 0.5.24 → 0.6.16

package/blocks/components/image-block.tsx

@@ -1,108 +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 & {
-  constraint?: Dimensions
-}> = ({
-  block,
-  className='',
-  agent,
-  constraint
-}) => {
-  
-  if (block.blockType !== 'image') {
-    return <>image block required</>
-  }
-
-  const {
-    src, 
-    alt, 
-    dim, 
-    props, 
-    fullWidthOnMobile, 
-    svgFillClass,
-    specifiers
-  } = block as ImageBlock
-
-  const specified = (s: string): boolean => (containsToken(specifiers, s)) 
-
-  const toSpread: any = {}
-  if (props?.fill === undefined) {
-    const dimCon = (constraint ? constrain(dim, constraint) : dim)
-    toSpread.width = dimCon.w
-    toSpread.height = dimCon.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>
-      )
-    }
-    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) {
-        if (dim) {
-          toSpread.width = +dim.w * .75
-          toSpread.height = +dim.h * .75
-        } 
-      }
-    }
-  }
-
-  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,120 +0,0 @@
-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 {
-    if (specified('mobile-vert-center')) {
-      modifiers += 'justify-center ' 
-    }
-    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

@@ -1,79 +0,0 @@
-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 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' : '' 
-  ]
-
-  const spreadId = (b.anchorId) ? {id: b.anchorId} : {}
-
-  return (
-    <section {...spreadId} className={cn((snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen'), className)}>
-      <ApplyTypography className={cn('w-full flex flex-row justify-center self-stretch', snapTile ? tileHeight : '')} >
-        <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, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full')} >
-          <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

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

@@ -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'
-
-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,137 +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'
-
-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={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 = (constraint ? constrain(dim, constraint) : 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
-}

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

@@ -1,21 +0,0 @@
-import type Block from './block'
-
-import type { BulletItem, GridDef } from '../../types'
-
-interface BulletCardsBlock extends Block {
-  blockType: 'bullet-cards'
-    /**
-     * no-card-border
-     * 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

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