@hanzo/ui 4.7.0 → 4.8.2

package/blocks/components/content.tsx

@@ -0,0 +1,70 @@
+import React, { ComponentType, type ReactNode} from 'react'
+
+import type * as B from '../def'
+
+import AccordianBlockComponent from './accordian-block'
+import BulletCardsBlockComponent from './bullet-cards-block'
+import CTABlockComponent from './cta-block'
+import CardBlockComponent from './card-block'
+import CarteBlancheBlockComponent from './carte-blanche-block'
+import EnhHeadingBlockComponent from './enh-heading-block'
+import HeadingBlockComponent from './heading-block'
+import GroupBlockComponent from './group-block'
+import GridBlockComponent from './grid-block'
+import ImageBlockComponent from './image-block'
+import SpaceBlockComponent from './space-block'
+import VideoBlockComponent from './video-block'
+
+import type BlockComponentProps from './block-component-props'
+
+const map = new Map<string, ComponentType<BlockComponentProps>>()
+map.set('accordian', AccordianBlockComponent)
+map.set('bullet-cards', BulletCardsBlockComponent)
+map.set('card', CardBlockComponent)
+map.set('carte-blanche', CarteBlancheBlockComponent)
+map.set('cta', CTABlockComponent)
+map.set('heading', HeadingBlockComponent)
+map.set('enh-heading', EnhHeadingBlockComponent as ComponentType<BlockComponentProps>)
+map.set('space', SpaceBlockComponent)
+map.set('image', ImageBlockComponent)
+map.set('video', VideoBlockComponent)
+map.set('group', GroupBlockComponent)
+map.set('grid', GridBlockComponent)
+
+const registerBlockType = (key: string, type: ComponentType<BlockComponentProps>): void => {
+  map.set(key, type)
+}
+
+const renderBlock = (block: B.Block, className: string, agent?: string, keyStr?: string): ReactNode => {
+  if (block.blockType === 'element') {
+    return (block as B.ElementBlock).element
+  }
+  const CompType = map.get(block.blockType)
+  if (!CompType) return null
+  return <CompType block={block} className={className} agent={agent} key={keyStr ?? ''} /> 
+}
+
+const ContentComponent: React.FC<{
+  blocks: B.Block | B.Block[] | undefined
+  className?: string
+  agent?: string
+}> = ({
+  blocks,
+  className='',
+  agent
+}) => {
+  if (!blocks) return null
+  if (Array.isArray(blocks)) {
+    return (
+      blocks.map((block, index) => (
+        renderBlock(block, className, agent, `content-block-${block.blockType}-${index}`)
+      ))
+    )
+  }
+  return renderBlock(blocks, className, agent)
+}
+
+export {
+  ContentComponent as default,
+  registerBlockType
+}

package/blocks/components/cta-block.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+
+import type { LinkDef, ButtonDef} from '../../types'
+import  { buttonVariants, ActionButton, LinkElement } from '../../primitives/index-next'
+import type { CTABlock } from '../def'
+import { cn, containsToken, type VariantProps } from '../../util'
+
+import type BlockComponentProps from './block-component-props'
+
+const CtaBlockComponent: React.FC<BlockComponentProps & {
+  itemClasses?: string
+  itemSize?: VariantProps<typeof buttonVariants>['size'],
+  renderLink?: (def: LinkDef, key: any) => JSX.Element
+  renderButton?: (def: ButtonDef, key: any) => JSX.Element
+}> = ({
+  block,
+  className='', // assigned to each item
+  itemClasses='',
+  itemSize, // do not provide default.  this is an override to the def
+  renderLink,
+  renderButton,
+  agent
+}) => {
+  
+  if (block.blockType !== 'cta') {
+    return <>cta block required</>
+  }
+
+  const { elements, specifiers } = block as CTABlock
+  let wrapperClasses = ''
+  let itemclx = ''
+  if (containsToken(specifiers, 'fill')) {
+    wrapperClasses += 'w-full '
+    itemclx += 'grow shrink !min-w-0' 
+  }
+  else if (containsToken(specifiers, 'left')) {
+    wrapperClasses += 'md:justify-start '
+  }
+  else if (containsToken(specifiers, 'right')) {
+    wrapperClasses += 'md:justify-end '
+  }
+  else {
+    wrapperClasses += 'md:justify-center '
+  }
+
+  const mobile2Columns = containsToken(specifiers, 'mobile-2-columns')
+    // normally 'default' buttons have a min width only at > lg.
+    // generally if more than one we don't want this and override it,
+    // but this specifier asks to observe the default behavior.
+  const fillEvenly = !containsToken(specifiers, 'desktop-dont-fill')
+  const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd')
+  const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width')
+  
+  let layoutclx: string | undefined = undefined
+  if (elements.length > 1) {
+    let resetMinWidth = false
+    if (mobile2Columns) {
+      layoutclx = 'grid grid-cols-2 gap-2 self-stretch '   
+      resetMinWidth = true 
+    }
+    if (fillEvenly) {
+      layoutclx = (layoutclx ?? 'grid grid-cols-2 gap-2 self-stretch') 
+      resetMinWidth = true 
+    }
+    else {
+      layoutclx = layoutclx ? (layoutclx + 'md:flex md:flex-row md:justify-center ') : 'flex flex-row justify-center '    
+    }
+    itemclx += resetMinWidth ? '!min-w-0 ' : ''
+  }
+  layoutclx = layoutclx ?? 'flex flex-col items-stretch gap-2 self-stretch md:flex-row sm:justify-center '  
+
+  const getMobileColSpanClx = (index: number, total: number) => {
+    const indexToCenter = (total % 2 === 0) ? -1 : (mobileCenterFirstIfOdd) ? 0 : total - 1
+    const widthclx = mobileOddFullWidth ? 'w-full ' : 'w-3/5 mx-auto '
+    return (
+      (agent === 'phone' && mobile2Columns && (index === indexToCenter)) ? ('col-span-2 ' + widthclx) : ''  
+    )
+  } 
+
+  return (
+    <div className={cn(
+      layoutclx, 
+      wrapperClasses,
+      className
+    )}>
+    {elements.map((element, index) => {
+      const twoColClx = getMobileColSpanClx(index, elements.length)
+      if ((element as any).title) {
+        const def = element as LinkDef
+        return renderLink ? renderLink(def, index) : (
+          <LinkElement 
+            def={def}
+            key={index}
+            size={itemSize}
+            className={cn(itemclx, itemClasses, twoColClx)}
+          />
+        )
+      } 
+      else {
+        const def = element as ButtonDef
+        return renderButton ? renderButton(def, index) : (
+          <ActionButton 
+            def={def}
+            key={index}
+            size={itemSize}
+            className={cn(itemclx, itemClasses, twoColClx)}
+          />
+        ) 
+      }
+    })}
+    </div>
+  )
+}
+
+export default CtaBlockComponent

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