@hanzo/ui 4.8.5 → 5.0.0

package/blocks/components/enh-heading-block.tsx

@@ -1,204 +0,0 @@
-import React, {type ElementType} from 'react'
-
-import type { EnhHeadingBlock } from '../def'
-import { ApplyTypography } from '../../primitives/index-common'
-import { cn, containsToken } from '../../util'
-
-import type BlockComponentProps from './block-component-props'
-import InlineIcon from '../../primitives/next/inline-icon'
-
-const DEFAULTS = {
-  preheading: {
-    tag: 'h4' as ElementType,
-    mb: 2
-  },
-  heading: {
-    tag: 'h1' as ElementType,
-    mb: 2
-  },
-  byline: {
-    tag: 'h6' as ElementType,
-  }
-}
-
-const tagFromLevel = (level: number): ElementType => {
-  switch (level) {
-    case 1: {
-      return 'h1'
-    } 
-    case 2: {
-      return 'h2'
-    } 
-    case 3: {
-      return 'h3'
-    } 
-    case 4: {
-      return 'h4'
-    } 
-    case 5: {
-      return 'h5'
-    } 
-    case 6: {
-      return 'h6'
-    } 
-  }
-  return 'p'
-}
-
-  // TODO Impl icon support
-const Element: React.FC<{
-  asTag: ElementType 
-  text: string
-  icon?: React.ReactNode
-  iconLeft?: boolean
-  className?: string
-}> = ({
-  asTag: Tag,
-  text,
-  icon,
-  iconLeft=true,
-  className : elClassName=''
-}) => (
-  <Tag className={elClassName}>{text}</Tag>
-)
-
-const getPositionClx = (
-  specified: (s: string) => boolean,
-  agent: string | undefined
-): {
-  preheading: string 
-  heading: string
-  byline: string
-} => {
-
-  const mobileHeadingCentered = specified('mobile-heading-centered')
-  const mobileHeadingLeft = specified('mobile-heading-left')
-  const headingCentered = specified('center')
-  const headingRight = specified('right')
-  const bylineCentered = specified('byline-center')
-  const bylineRight = specified('byline-right')
-  const mobileBylineLeft = specified('mobile-byline-left')
-
-  let headerclx = ''
-  let bylineclx = (bylineCentered) ? 
-    'self-center !text-center' : (bylineRight ? 'self-end !text-right' : 'self-start !text-left')
-
-  if (agent === 'phone') {
-    if (mobileHeadingLeft) {
-      headerclx = 'self-start text-left'
-    } else {
-      headerclx = (mobileHeadingCentered || headingCentered) ? 
-        'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left')
-    }
-
-    if (mobileBylineLeft) {
-      bylineclx = 'self-start !text-left'
-    }
-  }
-  else {
-    const largerclx = (headingCentered) ? 
-      'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left')
-
-    if (mobileHeadingCentered) {
-      headerclx = 'self-center text-center md:' + largerclx.split(' ').join(' md:')
-    }
-    else {
-      headerclx = largerclx 
-    }
-  }
-
-  return {
-    preheading: headerclx,
-    heading: headerclx,
-    byline: bylineclx
-  }
-}
-
-const EnhHeadingBlockComponent: React.FC<
-  BlockComponentProps & {
-  applyTypography?: boolean
-  extraSpecifiers?: string
-}> = ({
-  block,
-  className='',
-  agent,
-  applyTypography=true,
-  extraSpecifiers=''
-}) => {
-
-  if (block.blockType !== 'enh-heading') {
-    return <>enhance heading block required</>
-  }
-  const b = block as EnhHeadingBlock
-  const specified = (s: string) => (containsToken(b.specifiers + extraSpecifiers, s))
-  const preheadingHeadingFont = specified('preheading-heading-font')
-  const phFontClx = preheadingHeadingFont ? 'font-heading' : ''
-  const alignMiddleClx = specified('align-middle') ? 'my-auto' : ''
-
-  const positionclx = getPositionClx(specified, agent)
-
-  const Inner: React.FC = () => {
-    const toRender = [
-      {
-        tag: (b.preheading) ? 
-          (b.preheading.level !== undefined  ? tagFromLevel(b.preheading.level) : DEFAULTS.preheading.tag) 
-          : 
-          undefined, 
-        clx: (b.preheading) ? 
-          (b.preheading.mb !== undefined ? 
-            `mb-${b.preheading.mb}` : `mb-${DEFAULTS.preheading.mb}`) + ' ' + positionclx.preheading + ' ' + phFontClx
-          : 
-          positionclx.preheading + ' ' + phFontClx,
-        text: (b.preheading) ? (b.preheading.text ) : undefined,
-      },
-      {
-        tag: (b.heading.level !== undefined ? tagFromLevel(b.heading.level) : DEFAULTS.heading.tag), 
-        clx: (b.heading.mb !== undefined ? `mb-${b.heading.mb}` : `mb-${DEFAULTS.heading.mb}`) + ' ' + positionclx.heading,
-        text: b.heading.text,
-      },
-      {
-        tag: (b.byline) ? 
-          (b.byline.level !== undefined ? tagFromLevel(b.byline.level) : DEFAULTS.byline.tag) 
-          : 
-          undefined, 
-        clx: positionclx.byline,
-        text: (b.byline) ? (b.byline.text ) : undefined,
-      },
-    ] as {
-      tag: ElementType
-      clx: string
-      text: string
-    }[]
-
-    let iconRendered = false
-    return <>
-      {toRender.map(({tag, clx, text}, index) => {
-        if (!tag) return null
-        if (b.icon && !iconRendered) {
-          iconRendered = true
-          return (
-            <div className={cn('flex flex-row items-center gap-2 sm:gap-4', clx)} key={`div-${index}`}>
-              <InlineIcon icon={b.icon} size={b.iconSize ?? 32} agent={agent}/>
-              <Element asTag={tag} text={text} />
-            </div>
-          )
-        }
-        return (
-          (<Element asTag={tag} text={text} className={clx} key={`el-${index}`}/>)
-        )
-      })}
-    </>
-  }
-
-  return applyTypography ? (
-    <ApplyTypography className={cn('flex flex-col w-full !gap-0', className, alignMiddleClx)}>
-      <Inner />
-    </ApplyTypography>
-  ) : (
-    <div className={cn('flex flex-col w-full gap-0', className, alignMiddleClx)}>
-      <Inner />  
-    </div>
-  )
-}
-
-export default EnhHeadingBlockComponent

package/blocks/components/grid-block/grid-block-mutator.ts

@@ -1,12 +0,0 @@
-interface GridBlockMutator {
-  gapClx?: string 
-  getCellClx?: (
-    cellIndex: number, 
-    cellCount: number, 
-    colCount: number
-  ) => string
-}
-
-export {
-  type GridBlockMutator as default
-}

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

@@ -1,83 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-
-import { cn, containsToken } from '../../../util'
-import type { GridBlock } from '../../def'
-import type { GridColumnSpec } from '../../../types'
-
-import Content from '../content'
-import type BlockComponentProps from '../block-component-props'
-
-import getMutator from './mutator-registry'
-
-  // These must be / are safelisted in tailwind.config
-const gridClx = (d: GridColumnSpec, prefix?: string ): string => (
-  (typeof d === 'number') ? 
-    `${(prefix ?? '')}grid-cols-${d} ` 
-    : 
-    `${(prefix ?? '')}grid-cols-${d.columns} ${(prefix ?? '')}gap-${d.gap} ` 
-)
-
-  /**
-   * A component that lays out the Blocks in 'cells' on a grid.  
-   * If invoked directly, and children are supplied, 
-   * block.cells is ignore and the children are rendered.
-   */
-const GridBlockComponent: React.FC<
-  BlockComponentProps & PropsWithChildren
-> = ({
-  block,
-  className='',
-  agent,
-  children
-}) => {
-
-  if (block.blockType !== 'grid') {
-    return <>grid block required</>
-  }
-
-  const { cells, grid, specifiers } = block as GridBlock
-  const specified = (s: string) => (containsToken(specifiers, s))
-  const mutator = specified('style-table-borders') ? getMutator('style-table-borders') : undefined
-
-    // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
-    // All variants in use MUST be in style/safelist.tailwind.js
-  let clx = 'grid '
-  if (agent === 'phone') {
-    const d = (grid.mobile) ? grid.mobile : (grid.at.xs ? grid.at.xs : (grid.at.sm ?? 1))
-    clx += gridClx(d)
-  }
-  else {
-    let defaultSet = false
-    for (const [key, value] of Object.entries(grid.at)) {
-      if (!defaultSet) {
-          // ts brain fart!
-        clx += gridClx(value as GridColumnSpec)
-        defaultSet = true
-      }
-      else {
-          // ts brain fart!
-        clx += gridClx(value  as GridColumnSpec, `${key}:`)
-      }
-    }   
-  }
-
-  let getMutatorCellClx = (ignore: number): string => ('')
-  if (mutator?.getCellClx) {
-    const colCount = (typeof grid.at.md! === 'number') ? grid.at.md! as number : grid.at.md!.columns
-    const cellCount = cells?.length  
-    if (!colCount || !cellCount) {
-      throw new Error('GridBlockComponent: using mutator, but colCount and / or cellCount is invalid!')
-    }
-    getMutatorCellClx = (cellIndex: number) => ( mutator!.getCellClx!(cellIndex, cellCount, colCount) )
-  }
-  
-  return (
-    <div className={cn('grid gap-2 md:gap-4 xl:gap-6', clx, (mutator?.gapClx ?? ''), className)}>
-    {React.Children.count(children) > 0 ? children : cells?.map((cell, index) => (
-      <Content blocks={cell} agent={agent} key={`cell-${index}`} className={getMutatorCellClx(index)}/>
-    ))}
-    </div>
-  )
-}
-
-export default GridBlockComponent

package/blocks/components/grid-block/mutator-registry.ts

@@ -1,10 +0,0 @@
-import type GridBlockMutator from './grid-block-mutator'
-
-import tableBorders from './table-borders.mutator'
-
-const map = new Map<string, GridBlockMutator>()
-map.set('style-table-borders', tableBorders)
-
-  // get 
-export default (key: string): GridBlockMutator | undefined => (map.get(key))
-

package/blocks/components/grid-block/table-borders.mutator.ts

@@ -1,47 +0,0 @@
-import type GridBlockMutator from './grid-block-mutator'
-
-const getCellClx = (
-  cellIndex: number, 
-  cellCount: number, 
-  colCount: number
-): string => {
-
-  const isFirstRow = (): boolean  => (cellIndex < colCount)
-  const isFirstColumn = (): boolean  => (cellIndex % colCount === 0)
-  const isTLCorner = (): boolean  => (cellIndex === 0)
-  const isTRCorner = (): boolean  => (cellIndex === colCount -1 )
-  const isBLCorner = (): boolean  => (cellIndex === cellCount - colCount)
-  const isBRCorner = (): boolean  => (cellIndex === cellCount - 1)
-
-    // all get a right and bottom border and padding, 
-    // other borders are a special base
-  let clx = 'border-b md:border-r p-4 md:p-8 lg:p-12 '
-  if (isFirstRow()) {
-    clx += 'border-t '
-  }
-  if (isFirstColumn()) {
-    clx += 'md:border-l '
-  }
-    // on mobile this will be the first (top) cell
-  if (isTLCorner()) {
-    clx += 'border-t md:rounded-tl-lg '
-  }
-  else if (isTRCorner()) {
-    clx += 'md:rounded-tr-lg '
-  }
-  else if (isBLCorner()) {
-    clx += 'md:rounded-bl-lg '
-  }
-  else if (isBRCorner()) {
-    clx += 'md:rounded-br-lg '
-  }
-
-  return clx
-} 
-
-const gapClx = 'gap-0 md:gap-0 xl:gap-0'
-
-export default {
-  getCellClx,
-  gapClx
-} as GridBlockMutator

package/blocks/components/group-block.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-
-import { Breakpoints} from '../../types'
-import { cn } from '../../util'
-
-import type { Block, GroupBlock } from '../def'
-import Content from './content'
-
-  // eg: 'layout-grid-2-starting-md'
-  // see comments below regarding dynamic classes and the safelist
-const getLayoutInfo = (s: string): {
-  layout: string
-  spec: any
-} | undefined => {
-  const tokenArray = s.split(' ')
-  const layoutToken = tokenArray.find((tok) => (tok.startsWith('layout-')))
-  if (layoutToken) {
-    const subtokens = layoutToken.split('-')
-    const layout = subtokens[1]
-    let spec: any = {}
-    switch (layout) {
-      case 'grid': {
-        const columns = parseInt(subtokens[2], 10)
-        const starting = subtokens[4]
-        if (Number.isNaN(columns) || columns < 2 || columns > 6 || !Breakpoints.includes(starting)) {
-          return undefined
-        }
-        spec = {
-          columns,
-          starting
-        }
-      } break
-      // no other types supported yet
-    } 
-    return {
-      layout,
-      spec
-    }
-  }
-  return undefined
-}
-
-const GroupBlockComponent: React.FC<{
-  block: Block
-  className?: string,
-}> = ({
-  block,
-  className=''
-}) => {
-
-  if (block.blockType !== 'group') {
-    return <>group block required</>
-  }
-
-  const group = block as GroupBlock
-
-    // only one supported so fat
-  if (group.specifiers?.includes('layout')) {
-    const layoutSpec = getLayoutInfo(group.specifiers)
-    if (!layoutSpec) {
-      return <>invalid or missing layout specifier in group block!</>
-    }
-
-    if (layoutSpec.layout === 'grid') {
-      const { elements } = group
-      const { spec: {starting, columns} } = layoutSpec 
-
-        // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
-        // All variants in use MUST be in style/safelist.tailwind.js
-      const clazzName = cn('grid xs:grid-cols-1 gap-2 sm:gap-3',
-        `${starting}:grid-cols-${columns} `, 
-        className)
-      return (
-        <div className={clazzName}>
-          <Content blocks={elements} />
-        </div>
-      )
-    }
-  }
-  return null
-}
-
-export default GroupBlockComponent

package/blocks/components/heading-block.tsx

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

@@ -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,
-}