@hanzo/ui 0.5.24 → 0.6.16

package/blocks/components/content.tsx

@@ -1,70 +0,0 @@
-import React, { type 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

@@ -1,98 +0,0 @@
-import React from 'react'
-
-import type { LinkDef, ButtonDef} from '../../types'
-import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
-import type { CTABlock } from '../def'
-import { cn, containsToken } from '../../util'
-
-import type BlockComponentProps from './block-component-props'
-
-const CtaBlockComponent: React.FC<BlockComponentProps & {
-  itemClasses?: string
-  itemSize?: ButtonSizes,
-  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')
-  const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd')
-  const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width')
-  
-  const layoutclx = (mobile2Columns && elements.length > 1) ? 
-    'grid grid-cols-2 gap-2 self-stretch md:flex md:flex-sm md:justify-center '
-    :
-    '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

@@ -1,205 +0,0 @@
-import React, {type ElementType} from 'react'
-
-import type { Icon } from '../../types'
-import type { EnhHeadingBlock } from '../def'
-import { ApplyTypography } from '../../primitives'
-import { cn, containsToken } from '../../util'
-
-import type BlockComponentProps from './block-component-props'
-import InlineIcon from '../../primitives/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?: Icon
-  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, { type 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'
-
-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