Add in ui package

.nvmrc

@@ -1 +1 @@
-v18.17.0
+v18

package.json

@@ -1,11 +1,10 @@
 {
-  "name": "@luxdefi/ui",
+  "name": "@luxdefi/ui/cli",
   "version": "0.0.1",
-  "private": true,
   "license": "MIT",
   "type": "module",
   "author": {
-    "name": "luxdefi",
+    "name": "@lx/ui",
     "url": "https://twitter.com/luxdefi"
   },
   "workspaces": [

packages/cli/package.json

@@ -1,4 +1,5 @@
-  "name": "luxdefi-ui",
+{
+  "name": "@luxdefi/ui/cli",
   "version": "0.6.0",
   "description": "Add components to your apps.",
   "publishConfig": {

packages/ui/blocks/components/accordian-block.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { 
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography
+} from '../../primitives'
+
+import { cn } from '../../util'
+
+import type { Block, AccordianBlock } from '../def'
+
+const AccordianBlockComponent: React.FC<{
+  block: Block
+  className?: string
+}> = ({
+  block,
+  className=''
+}) => {
+
+  if (block.blockType !== 'accordian') {
+    return <>accordian block required</>
+  }
+
+  const accordian = block as AccordianBlock
+
+  return (
+    <Accordion type="single" collapsible className={cn('w-full border rounded-xl overflow-hidden', className)}>
+      {accordian.items.map((item, index) => (
+      <AccordionItem className='border-b last:border-0 overflow-hidden' value={`value-${index}`} key={index}>
+        <AccordionTrigger className='px-3 md:px-4 lg:px-6 hover:no-underline hover:bg-level-3' >
+          <ApplyTypography>
+            {/* styles specific to accordion.  From old site */}
+            <h6 className='leading-[1.2] text-[1.05rem] font-semibold ' >{item.trigger}</h6>
+          </ApplyTypography>
+        </AccordionTrigger>
+        <AccordionContent className='p-4 border-t bg-level-1'>
+        <ApplyTypography className='flex flex-col justify-start items-start '>
+          {(typeof item.content === 'string') ? (<p>{item.content}</p>) : item.content} 
+        </ApplyTypography>
+        </AccordionContent>
+      </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+export default AccordianBlockComponent

packages/ui/blocks/components/banner-block.tsx

@@ -0,0 +1,103 @@
+
+import React  from 'react'
+
+import { Dimensions, type TShirtSize } from '../../types'
+import type { Block, BannerBlock } from '../def'
+
+import VideoBlockComponent from './video-block'
+import CTABlockComponent from './cta-block'
+
+type BannerGrouping = 'all-separate' | 'title-media-cta' | 'titleAndMedia-cta'
+
+const BannerBlockComponent: React.FC<{
+  block: Block,
+  videoSize?: TShirtSize
+  videoConstraint?: Dimensions
+  grouping?: BannerGrouping
+  groupingClasses?: string[] // count should match number of siblings in the chosen grouping 
+  ctaItemClassName?: string
+}> = ({
+  block,
+  grouping = 'titleAndMedia-cta',
+  groupingClasses=[],
+  ctaItemClassName='',
+  videoSize='md',
+  videoConstraint
+}) => {
+
+  if (block.blockType !== 'banner') {
+    return <>banner block required</>
+  }
+  const banner = block as BannerBlock
+
+  if (grouping === 'title-media-cta') {
+    const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
+    const mediaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
+    const ctaClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : ''
+    return (<>
+      <div className={titleClasses}>
+        <h1>{banner.title}</h1>
+        {banner.byline && (<h5 className='text-center'>{banner.byline}</h5>)}
+      </div>
+      <div className={'self-center flex flex-col justify-start items-center ' + mediaClasses}>
+        {banner.contentBefore && banner.contentBefore}
+        {banner.video && (
+          <VideoBlockComponent className='self-center mt-6 not-typography' block={banner.video} size={videoSize} constraint={videoConstraint}/>
+        )}
+        {banner.contentAfter && banner.contentAfter }
+      </div>
+      {banner.cta && (
+        <div className={'flex flex-row items-stretch gap-2 sm:gap-6 sm:justify-center ' + ctaClasses}>
+          <CTABlockComponent block={banner.cta} itemClassName={ctaItemClassName} itemSize='lg'/>
+        </div>  
+      )}
+    </>)
+  }
+  else if (grouping === 'titleAndMedia-cta') {
+    const titleAndMediaClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
+    const ctaClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
+    return (<>
+      <div className={'self-center flex flex-col justify-start items-center ' + titleAndMediaClasses} >
+        <h1>{banner.title}</h1>
+        {banner.byline && (<h5 className='text-center'>{banner.byline}</h5>)}
+        {banner.contentBefore && banner.contentBefore}
+        {banner.video && (
+          <VideoBlockComponent className='self-center mt-6 not-typography' block={banner.video} size={videoSize} constraint={videoConstraint}/>
+        )}
+        {banner.contentAfter && banner.contentAfter }
+      </div>
+      {banner.cta && (
+        <div className={'flex flex-row items-stretch gap-2 sm:gap-6 justify-center ' + ctaClasses}>
+          <CTABlockComponent block={banner.cta} itemClassName={'xs:w-1/2 ' + ctaItemClassName} itemSize='lg'  />
+        </div>  
+      )}
+    </>)
+  }
+
+  const titleClasses = (groupingClasses && groupingClasses[0]) ? groupingClasses[0] : ''
+  const bylineClasses = (groupingClasses && groupingClasses[1]) ? groupingClasses[1] : ''
+  const contentBeforeClasses = (groupingClasses && groupingClasses[2]) ? groupingClasses[2] : ''
+  const mediaClasses = (groupingClasses && groupingClasses[3]) ? groupingClasses[3] : ''
+  const contentAfterClasses = (groupingClasses && groupingClasses[4]) ? groupingClasses[4] : ''
+  const ctaClasses = (groupingClasses && groupingClasses[5]) ? groupingClasses[5] : ''
+
+  return (<>
+    <h1 className={titleClasses}>{banner.title}</h1>
+    {banner.byline && (<h5 className={'text-center ' + bylineClasses}>{banner.byline}</h5>)}
+    {banner.contentBefore && (<div className={contentBeforeClasses}>banner.contentBefore</div>)}
+    {banner.video && (
+      <VideoBlockComponent className={'self-center mt-6 not-typography ' + mediaClasses} block={banner.video} size={videoSize} constraint={videoConstraint}/>
+    )}
+    {banner.contentAfter && (<div className={contentAfterClasses}>banner.contentAfter</div>)}
+    {banner.cta && (
+      <div className={'flex flex-col gap-4 items-stretch sm:flex-row sm:gap-6 sm:justify-center ' + ctaClasses}>
+        <CTABlockComponent block={banner.cta} itemClassName={ctaItemClassName} itemSize='lg' />
+      </div>  
+    )}
+  </>)
+}
+
+export {
+  BannerBlockComponent as default,
+  type BannerGrouping as AssetBannderGroupingType
+}

packages/ui/blocks/components/block-factory.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import type * as B from '../def'
+
+import CardBlockComponent from './card-block'
+import HeadingBlockComponent from './heading-block'
+import CTABlockComponent from './cta-block'
+import SpaceBlockComponent from './space-block'
+import ImageBlockComponent from './image-block'
+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=''
+}) => {
+
+  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} />
+    }
+  }
+
+  return <>unknown block type</>
+}
+
+export default BlockFactory