@0.2.15: expandable registry for types drives ContentComponent

pkgs/luxdefi-ui/blocks/components/accordian-block.tsx

@@ -10,12 +10,10 @@ import {
 
 import { cn } from '../../util'
 
-import type { Block, AccordianBlock } from '../def'
+import type { AccordianBlock } from '../def'
+import type BlockComponentProps from './block-component-props'
 
-const AccordianBlockComponent: React.FC<{
-  block: Block
-  className?: string
-}> = ({
+const AccordianBlockComponent: React.FC<BlockComponentProps> = ({
   block,
   className=''
 }) => {

pkgs/luxdefi-ui/blocks/components/block-component-props.ts

@@ -0,0 +1,10 @@
+import type { Block } from "../def";
+
+interface BlockComponentProps {
+  block: Block
+  className?: string
+}
+
+export {
+  type BlockComponentProps as default
+}

pkgs/luxdefi-ui/blocks/components/card-block.tsx

@@ -28,6 +28,7 @@ import type { Block, CardBlock } from '../def'
 import ImageBlockComponent from './image-block'
 import VideoBlockComponent from './video-block'
 import CTABlockComponent from './cta-block'
+import type BlockComponentProps from './block-component-props'
 
 const ArrowLinkElement: React.FC<{
   def: LinkDef,
@@ -63,9 +64,8 @@ const getSmallIconDim = (s: string): Dimensions | undefined => (
   ) 
 )
 
-const CardBlockComponent: React.FC<{
-  block: Block
-  className?: string
+const CardBlockComponent: React.FC<
+  BlockComponentProps & {
   contentClassName?: string
 }> = ({
   block,

pkgs/luxdefi-ui/blocks/components/content.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ComponentType, type ReactNode} from 'react'
 
 import type * as B from '../def'
 
@@ -11,45 +11,29 @@ import VideoBlockComponent from './video-block'
 import AccordianBlockComponent from './accordian-block'
 import GroupBlockComponent from './group-block'
 
-const BlockFactory: React.FC<{
-  block: B.Block
-  className?: string
-}> = ({
-  block,
-  className=''
-}) => {
+import type BlockComponentProps from './block-component-props'
 
-  switch (block.blockType) {
-    case 'group': {
-      return <GroupBlockComponent block={block} className={className} />
-    }
-    case 'card': {
-      return <CardBlockComponent block={block} className={className} />
-    }
-    case 'cta': {
-      return <CTABlockComponent block={block} itemClassName={className}/>
-    }
-    case 'heading': {
-      return <HeadingBlockComponent block={block} className={className}/>
-    }
-    case 'space': {
-      return <SpaceBlockComponent block={block} className={className} />
-    }
-    case 'video': {
-      return <VideoBlockComponent block={block} className={className} />
-    }
-    case 'image':  {
-      return <ImageBlockComponent block={block} className={className} />
-    }
-    case 'accordian': {
-      return <AccordianBlockComponent block={block} className={className} />
-    }
-    case 'element': {
-      return (block as B.ElementBlock).element
-    }
-  }
+const map = new Map<string, ComponentType<BlockComponentProps>>()
+map.set('card', CardBlockComponent)
+map.set('heading', HeadingBlockComponent)
+map.set('cta', CTABlockComponent)
+map.set('space', SpaceBlockComponent)
+map.set('image', ImageBlockComponent)
+map.set('video', VideoBlockComponent)
+map.set('accordian', AccordianBlockComponent)
+map.set('group', GroupBlockComponent)
 
-  return <>unknown block type</>
+const registerBlockType = (key: string, type: ComponentType<BlockComponentProps>): void => {
+  map.set(key, type)
+}
+
+const renderBlock = (block: B.Block, 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} key={keyStr ?? ''} /> 
 }
 
 const ContentComponent: React.FC<{
@@ -59,15 +43,16 @@ const ContentComponent: React.FC<{
 }) => {
   if (!blocks) return null
   if (Array.isArray(blocks)) {
-    return (<>
-      {blocks.map((block, index) => {
-        return (<BlockFactory block={block} key={`content-block-${index}`}/>)
-      })}
-    </>)
+    return (
+      blocks.map((block, index) => (
+        renderBlock(block, `content-block-${block.blockType}-${index}`)
+      ))
+    )
   }
-  return (
-    (<BlockFactory block={blocks}/>)   
-  )
+  return renderBlock(blocks)
 }
 
-export default ContentComponent
+export {
+  ContentComponent as default,
+  registerBlockType
+}

pkgs/luxdefi-ui/blocks/components/cta-block.tsx

@@ -2,18 +2,18 @@ import React from 'react'
 
 import type { LinkDef, ButtonDef} from '../../types'
 import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
-import type { Block, CTABlock } from '../def'
+import type { CTABlock } from '../def'
 import { cn, containsToken } from '../../util'
 
-const CtaBlockComponent: React.FC<{
-  block: Block,
-  itemClassName?: string,
+import type BlockComponentProps from './block-component-props'
+
+const CtaBlockComponent: React.FC<BlockComponentProps & {
   itemSize?: ButtonSizes,
   renderLink?: (def: LinkDef, key: any) => JSX.Element
   renderButton?: (def: ButtonDef, key: any) => JSX.Element
 }> = ({
   block,
-  itemClassName='',
+  className='', // assigned to each item
   itemSize, // do not provide default.  this is an override to the def
   renderLink,
   renderButton
@@ -50,7 +50,7 @@ const CtaBlockComponent: React.FC<{
             def={def}
             key={index}
             size={itemSize}
-            className={itemClassName}
+            className={className}
           />
         )
       } 
@@ -61,7 +61,7 @@ const CtaBlockComponent: React.FC<{
             def={def}
             key={index}
             size={itemSize}
-            className={itemClassName}
+            className={className}
           />
         ) 
       }

pkgs/luxdefi-ui/blocks/components/heading-block.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
-import type { Block, HeadingBlock } from '../def'
-import { cn } from '../../util'
+import type { HeadingBlock } from '../def'
 import { ApplyTypography } from '../../primitives'
 
-const HeadingBlockComponent: React.FC<{
-  block: Block,
-  className?: string
-}> = ({
+import type BlockComponentProps from './block-component-props'
+
+const HeadingBlockComponent: React.FC<BlockComponentProps> = ({
   block,
   className=''
 }) => {

pkgs/luxdefi-ui/blocks/components/image-block.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import Image from 'next/image'
 
 import type { Dimensions } from '../../types'
-import type { Block, ImageBlock } from '../def'
-import { cn, constrain, containsToken } from '../../util'
+import type { ImageBlock } from '../def'
+import { constrain } from '../../util'
 
-const ImageBlockComponent: React.FC<{
-  block: Block
-  className?: string
+import type BlockComponentProps from './block-component-props'
+
+
+const ImageBlockComponent: React.FC<BlockComponentProps & {
   constraint?: Dimensions
 }> = ({
   block,

pkgs/luxdefi-ui/blocks/components/index.ts

@@ -1,5 +1,5 @@
 import AccordianBlock from './accordian-block'
-import Content from './content'
+import { default as ContentComponent, registerBlockType} from './content'
 import Blocks from './content'
 import CardBlock from './card-block'
 import CTABlock from './cta-block'
@@ -8,10 +8,12 @@ import HeadingBlock from './heading-block'
 import ImageBlock from './image-block'
 import VideoBlock from './video-block'
 import SpaceBlock from './space-block'
+import type BlockComponentProps from './block-component-props'
 
 export { 
    AccordianBlock as AccordianBlockComponent, 
-   Content as ContentComponent,
+   ContentComponent,
+   registerBlockType,
    Blocks as BlocksComponent,
    CardBlock as CardBlockComponent,
    CTABlock as CTABlockComponent,
@@ -20,4 +22,5 @@ export {
    ImageBlock as ImageBlockComponent,
    VideoBlock as VideoBlockComponent,
    SpaceBlock as SpaceBlockComponent,
+   type BlockComponentProps
 }

pkgs/luxdefi-ui/blocks/components/space-block.tsx

@@ -2,11 +2,9 @@ import React from 'react'
 
 import type { Block, SpaceBlock } from '../def'
 import { ApplyTypography } from '../../primitives'
+import type BlockComponentProps from './block-component-props'
 
-const SpaceBlockComponent: React.FC<{
-  block?: Block
-  className?: string
-}> = ({
+const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
   block,
   className=''
 }) => {
@@ -15,7 +13,7 @@ const SpaceBlockComponent: React.FC<{
     return <>space block required</>
   }
 
-  const size = (block) ? ((block as SpaceBlock).level ?? 0) : 0
+  const size = (block as SpaceBlock).level ?? 0
 
   let Tag: React.ElementType = 'div' // corresponds to 0
 

pkgs/luxdefi-ui/blocks/components/video-block.tsx

@@ -5,12 +5,12 @@ import Image from 'next/image'
 
 import type { Dimensions, TShirtSize, TShirtDimensions } from '../../types'
 import { constrain, asNum } from '../../util'
-import type { Block, VideoBlock } from '../def'
+import type { VideoBlock } from '../def'
 import { VideoPlayer } from '../../primitives'
 
-const VideoBlockComponent: React.FC<{
-  block: Block
-  className?: string
+import type BlockComponentProps from './block-component-props'
+
+const VideoBlockComponent: React.FC<BlockComponentProps & {
   usePoster?: boolean
   size?: TShirtSize
   constraint?: Dimensions

pkgs/luxdefi-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",