@hanzo/ui 5.0.0 → 5.0.1

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

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

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

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

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

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

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

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

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

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

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