@0.4.0: Streamlined and enhanced components (#9)

CartBlancheBlock, a better CardBlock, EnhHeadingBlock a better HeadingBlock, GridBlock, a more complete and useful GroupBlock BulletCardsBlock: common simple case InlineIcon ImageBlock now auto scales to 0.75 on mobile VideoBlock: support for mobile sizing using 'vw' eg: {mobile: {vw: 60}} common/ChatWidget (from PR #7) Removed esbuild step and single entry point (client code must import using subdirs) Minor cleanup in tsconfig --------- Co-authored-by: artem ash <[email protected]> --------- Co-authored-by: Erik Rakušček <[email protected]>
hanzoai · Feb 9, 2024 · 9a0a7d7 · 9a0a7d7
1 parent eb2fe26
commit 9a0a7d7
Show file tree

Hide file tree

Showing 32 changed files with 877 additions and 116 deletions.
diff --git a/pkgs/luxdefi-ui/esbuild.mjs → pkgs/luxdefi-ui/_esbuild.mjs b/pkgs/luxdefi-ui/esbuild.mjs → pkgs/luxdefi-ui/_esbuild.mjs
diff --git a/pkgs/luxdefi-ui/blocks/components/bullet-cards-block.tsx b/pkgs/luxdefi-ui/blocks/components/bullet-cards-block.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import type BlockComponentProps from './block-component-props'
+import GridBlockComponent from './grid-block'
+import type { Block, BulletCardsBlock } from '../def'
+import InlineIcon from './inline-icon'
+
+const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
+  block,
+  className='',
+  agent
+}) => {
+
+  if (block.blockType !== 'bullet-cards') {
+    return <>bullet cards block required</>
+  }
+  const b = block as BulletCardsBlock
+
+  return (
+    <GridBlockComponent block={{blockType: 'grid', grid: b.grid} as Block} className={className} agent={agent}>
+    {b.cards.map((card, index) => (
+      <div key={index} className='md:border md:border-muted-2 rounded px-6 py-1 md:py-4 flex flex-row justify-start items-center not-typography'>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent}/>
+        <p className='m-0'>{card.text}</p>
+      </div>
+    ))}
+    </GridBlockComponent>
+  )
+}
+
+export default BulletCardsBlockComponent
diff --git a/pkgs/luxdefi-ui/blocks/components/carte-blanche-block/index.tsx b/pkgs/luxdefi-ui/blocks/components/carte-blanche-block/index.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '../../../primitives'
+
+import { cn, containsToken } from '../../../util'
+
+import {
+  getSpecifierData, 
+  getPrimaryStartingWith, 
+  getDim, 
+} from '../../../util/specifier'
+
+import type CarteBlancheBlock from '../../def/carte-blanche-block'
+
+import CTABlockComponent from '../cta-block'
+import Content from '../content'
+import type BlockComponentProps from '../block-component-props'
+import { EnhHeadingBlockComponent } from '..'
+
+type CardSection = 'entire' | 'header' | 'content' | 'footer'
+
+const _getClx = (specifier: string, section: CardSection): string => {
+  let result = ''
+  if (specifier === 'big-padding') {
+    switch (section) {
+        // defaults: p-4 lg:p-6 xl:p-8 
+      case 'header': {
+        result = 'md:p-8 lg:p-12 xl:p-16'
+      } break
+    }
+  }
+  else if (specifier === 'no-inner-borders') {
+    switch (section) {
+      case 'header': {
+        result = 'border-none'
+      } break
+    }
+  }
+
+  return result
+}
+
+const CarteBlancheBlockComponent: React.FC<
+  BlockComponentProps 
+> = ({
+  block,
+  className='',
+  agent,
+}) => {
+
+  if (block.blockType !== 'carte-blanche') {
+    return <>carte blanche block required</>
+  }
+
+  const b = block as CarteBlancheBlock
+
+  const specified = (s: string): boolean => (containsToken(b.specifiers, s))
+  const getClx = (specifier: string, section: CardSection): string => (
+    (specified(specifier)) ? _getClx(specifier, section) : ''
+  )
+
+  //const bigPadding = specified('big-padding')
+
+  const headingclx = [
+    getClx('big-padding', 'header'),
+    getClx('no-inner-borders', 'header'),
+  ].join(' ')
+
+  return (
+    <Card className={cn('flex flex-col ', className)} >
+    {b.heading && (
+      <CardHeader className={cn('typography-img:m-0', headingclx)} >
+      {b.topContent && (
+        <Content blocks={b.topContent} agent={agent} className=''/>
+      )}
+        <EnhHeadingBlockComponent block={b.heading} className='text-accent' agent={agent}/>
+      </CardHeader>
+    )}
+    {b.content && (
+      <CardContent className={cn('typography flex flex-col justify-center', className)}>
+        <Content blocks={b.content} agent={agent}/>
+      </CardContent>
+    )}
+    {b.cta && (
+      <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
+        <CTABlockComponent block={b.cta} agent={agent}/>
+      </CardFooter>
+    )}
+    </Card> 
+  )
+}
+
+export default CarteBlancheBlockComponent
diff --git a/pkgs/luxdefi-ui/blocks/components/content.tsx b/pkgs/luxdefi-ui/blocks/components/content.tsx
@@ -2,32 +2,40 @@ 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 CTABlockComponent from './cta-block'
-import SpaceBlockComponent from './space-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 AccordianBlockComponent from './accordian-block'
-import GroupBlockComponent from './group-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('heading', HeadingBlockComponent)
+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('accordian', AccordianBlockComponent)
 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 => {
+const renderBlock = (block: B.Block, className: string, agent?: string, keyStr?: string): ReactNode => {
   if (block.blockType === 'element') {
     return (block as B.ElementBlock).element
   }
@@ -43,7 +51,7 @@ const ContentComponent: React.FC<{
 }> = ({
   blocks,
   className='',
-  agent=''
+  agent
 }) => {
   if (!blocks) return null
   if (Array.isArray(blocks)) {

diff --git a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx
@@ -31,26 +31,41 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
   let itemclx = ''
   if (containsToken(specifiers, 'fill')) {
     wrapperClasses += 'w-full '
-    itemclx += 'grow ' 
+    itemclx += 'grow shrink !min-w-0' 
   }
   else if (containsToken(specifiers, 'left')) {
-    wrapperClasses += 'sm:justify-start '
+    wrapperClasses += 'md:justify-start '
   }
   else if (containsToken(specifiers, 'right')) {
-    wrapperClasses += 'sm:justify-end '
+    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 containerclx = (
     agent === 'phone'
     &&
-    containsToken(specifiers, 'mobile-2-columns') 
+    mobile2Columns
     && 
     elements.length > 1 
   ) 
     ? 
     'grid grid-cols-2 gap-2 self-stretch'
     :
-    'flex flex-col items-stretch gap-2 self-stretch sm:flex-row sm: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 = (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(
@@ -59,14 +74,15 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
       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)}
+            className={cn(itemclx, itemClasses, twoColClx)}
           />
         )
       } 
@@ -77,7 +93,7 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
             def={def}
             key={index}
             size={itemSize}
-            className={cn(itemclx, itemClasses)}
+            className={cn(itemclx, itemClasses, twoColClx)}
           />
         ) 
       }