@0.3.1

added optional agent prop to all Block components ensured all Block comps pass className to top element added className and agent to Content factory so it can pass to all comps Enhanced Image hangling on mobile made 'alt' not optional in ImageBlock (since it's not in Next) fixed some typography settings
hanzoai · Feb 6, 2024 · 8d7336a · 8d7336a
1 parent 6ce7a9c
commit 8d7336a
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 36 deletions.
diff --git a/pkgs/luxdefi-ui/blocks/components/block-component-props.ts b/pkgs/luxdefi-ui/blocks/components/block-component-props.ts
@@ -3,6 +3,7 @@ import type { Block } from "../def";
 interface BlockComponentProps {
   block: Block
   className?: string
+  agent?: string
 }
 
 export {

diff --git a/pkgs/luxdefi-ui/blocks/components/card-block.tsx b/pkgs/luxdefi-ui/blocks/components/card-block.tsx
@@ -29,6 +29,7 @@ import ImageBlockComponent from './image-block'
 import VideoBlockComponent from './video-block'
 import CTABlockComponent from './cta-block'
 import type BlockComponentProps from './block-component-props'
+import { cn } from '../../util'
 
 const ArrowLinkElement: React.FC<{
   def: LinkDef,
@@ -190,15 +191,15 @@ const CardBlockComponent: React.FC<
   )))
 
   return (
-    <Card className={
+    <Card className={cn(
       'flex flex-col self-stretch ' + 
       (contentOnHover ? 'group relative' : '') + 
       disabledBorder + 
       outerBorder + 
       bgclx + 
-      mainGap + 
+      mainGap, 
       className
-    }>
+    )}>
       <Header className={(contentOnHover ? ' absolute top-[0px] left-[0px] w-full hidden ' : '')}/>
       <MediaAndContent className={(contentOnHover ? 
         ' bg-gradient-to-t from-secondary to-65%' + 

diff --git a/pkgs/luxdefi-ui/blocks/components/content.tsx b/pkgs/luxdefi-ui/blocks/components/content.tsx
@@ -27,29 +27,33 @@ const registerBlockType = (key: string, type: ComponentType<BlockComponentProps>
   map.set(key, type)
 }
 
-const renderBlock = (block: B.Block, 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
   }
   const CompType = map.get(block.blockType)
   if (!CompType) return null
-  return <CompType block={block} key={keyStr ?? ''} /> 
+  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
+  blocks,
+  className='',
+  agent=''
 }) => {
   if (!blocks) return null
   if (Array.isArray(blocks)) {
     return (
       blocks.map((block, index) => (
-        renderBlock(block, `content-block-${block.blockType}-${index}`)
+        renderBlock(block, className, agent, `content-block-${block.blockType}-${index}`)
       ))
     )
   }
-  return renderBlock(blocks)
+  return renderBlock(blocks, className, agent)
 }
 
 export {

diff --git a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx
@@ -8,15 +8,18 @@ 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
+  renderButton,
+  agent
 }) => {
 
   if (block.blockType !== 'cta') {
@@ -25,10 +28,10 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
 
   const { elements, specifiers } = block as CTABlock
   let wrapperClasses = ''
-  let itemClasses = ''
+  let itemclx = ''
   if (containsToken(specifiers, 'fill')) {
     wrapperClasses += 'w-full '
-    itemClasses += 'grow ' 
+    itemclx += 'grow ' 
   }
   else if (containsToken(specifiers, 'left')) {
     wrapperClasses += 'sm:justify-start '
@@ -37,10 +40,17 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
     wrapperClasses += 'sm:justify-end '
   }
 
+  const twoColsOnMobile = containsToken(specifiers, '2-cols-on-mobile') && elements.length === 2
+  const containerclx = (twoColsOnMobile && agent === 'phone') ? 
+    'grid grid-cols-2 gap-2 self-stretch'
+    :
+    'flex flex-col items-stretch gap-2 self-stretch sm:flex-row sm:justify-center '
+
   return (
     <div className={cn(
-      'flex flex-col items-stretch gap-2 self-stretch sm:flex-row sm:justify-center ', 
-      wrapperClasses
+      containerclx, 
+      wrapperClasses,
+      className
     )}>
     {elements.map((element, index) => {
       if ((element as any).title) {
@@ -50,7 +60,7 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
             def={def}
             key={index}
             size={itemSize}
-            className={className}
+            className={cn(itemclx, itemClasses)}
           />
         )
       } 
@@ -61,7 +71,7 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
             def={def}
             key={index}
             size={itemSize}
-            className={className}
+            className={cn(itemclx, itemClasses)}
           />
         ) 
       }

diff --git a/pkgs/luxdefi-ui/blocks/components/heading-block.tsx b/pkgs/luxdefi-ui/blocks/components/heading-block.tsx
@@ -73,10 +73,11 @@ const HeadingBlockComponent: React.FC<BlockComponentProps> = ({
       BylineTag = BylineTag ?? 'h5'
     }
   }
+
     // Had to do this way, since tw typo plugin does support overrding typo styling wiithout .not-typography
   return (
-    <ApplyTypography>
-      <Tag className={className}>{heading.heading}</Tag>
+    <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}`} />}

diff --git a/pkgs/luxdefi-ui/blocks/components/image-block.tsx b/pkgs/luxdefi-ui/blocks/components/image-block.tsx
@@ -13,16 +13,17 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
 }> = ({
   block,
   className='',
+  agent,
   constraint
 }) => {
 
   if (block.blockType !== 'image') {
     return <>image block required</>
   }
 
-  const {src, dim, props} = block as ImageBlock
+  const {src, alt, dim, props, fullWidthOnMobile} = block as ImageBlock
   const toSpread: any = {}
-  if (dim) {
+  if (dim && !!!props?.fill) {
     const dimCon = (constraint ? constrain(dim, constraint) : dim)
     toSpread.width = dimCon.w
     toSpread.height = dimCon.h
@@ -48,12 +49,34 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
     delete props.objectPosition
   }
 
+    // https://nextjs.org/docs/app/building-your-application/optimizing/images#responsive
+  if (agent === 'phone' && fullWidthOnMobile) {
+    const toSpread: any =  {
+      style: {
+        width: '100%',
+        height: 'auto'
+      },
+      sizes: '100vw',
+    }
+
+    if (dim) {
+      toSpread.width = dim.w
+      toSpread.height = dim.h
+    } 
+
+    return (
+      <div className='flex flex-col items-center w-full'>
+        <Image src={src} alt={alt} {...toSpread} className={className}/>
+      </div>
+    )
+  }
+
   return (props?.fill) ? (
     <div className='relative w-full h-full'>
-      <Image src={src} {...toSpread} {...props} className={className}/>
+      <Image src={src} alt={alt} {...toSpread} {...props} className={className}/>
     </div>
   ) : (
-    <Image src={src} {...toSpread} {...props} className={className}/>   
+    <Image src={src} alt={alt} {...toSpread} {...props} className={className}/>   
   )
 }
 

diff --git a/pkgs/luxdefi-ui/blocks/def/image-block.ts b/pkgs/luxdefi-ui/blocks/def/image-block.ts
@@ -5,11 +5,12 @@ import type Block from './block'
 interface ImageBlock extends Block {
   blockType: 'image'
   src: string      
+  alt: string
   dim?:  Dimensions 
-    // cf: next/Image documentation, and type, as well as React.ImgHTMLAttributes
+  fullWidthOnMobile?: boolean
+  // cf: next/Image documentation, and type, as well as React.ImgHTMLAttributes
   props?: {
     sizes?: string
-    alt?: string
     fill?: boolean 
     objectFit?: string
     objectPosition?: string

diff --git a/pkgs/luxdefi-ui/primitives/apply-typography.tsx b/pkgs/luxdefi-ui/primitives/apply-typography.tsx
@@ -2,7 +2,7 @@ import React, { type PropsWithChildren } from 'react'
 
 import { cn } from '../util'
 
-type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' // if t-shirt size, do *not* be responsive
+type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl' // if t-shirt size, do *not* be responsive
 
 const ApplyTypography: React.FC<
   PropsWithChildren & {
@@ -19,11 +19,12 @@ const ApplyTypography: React.FC<
 
     // responsive version by default
   let typoClasses = 
-  'typography gap-3 ' +
-  'xs:typography-sm ' + 
-  'sm:typography sm:gap-4 ' +
-  'lg:typography-lg lg:gap-5 ' + 
-  'typography-headings:font-heading ' // only effects h1-h3 (in plugin)
+    'typography gap-3 ' +
+    'xs:typography-sm ' + 
+    'sm:typography sm:gap-4 ' +
+    'lg:typography-lg lg:gap-5 ' + 
+    'xl:typography-xl xl:gap-6 ' + 
+    'typography-headings:font-heading ' // only effects h1-h3 (in plugin)
 
   switch (size) {
     case 'sm': {
@@ -35,6 +36,9 @@ const ApplyTypography: React.FC<
     case 'lg': {
       typoClasses = 'typography typography-lg gap-5 typography-headings:font-heading typography-p:text-lg '
     } break
+    case 'xl': {
+      typoClasses = 'typography typography-xl gap-6 typography-headings:font-heading typography-p:text-lg '
+    } break
   }
 
   const Tag = asTag

diff --git a/pkgs/luxdefi-ui/tailwind/typo-plugin/get-plugin-styles.js b/pkgs/luxdefi-ui/tailwind/typo-plugin/get-plugin-styles.js
@@ -199,8 +199,6 @@ const defaultCSS = {
     width: '100%',
     tableLayout: 'auto',
     textAlign: 'left',
-    marginTop: pxToEm(32, 16),
-    marginBottom: pxToEm(32, 16),
   },
   thead: {
     borderBottomWidth: '1px',
@@ -212,11 +210,8 @@ const defaultCSS = {
     verticalAlign: 'bottom',
   },
   'tbody tr': {
-    borderBottomWidth: '1px',
-    borderBottomColor: 'var(--tw-prose-td-borders)',
   },
   'tbody tr:last-child': {
-    borderBottomWidth: '0',
   },
   'tbody td': {
     verticalAlign: 'baseline',
@@ -528,11 +523,11 @@ const defaultModifiers = (base) => ({
         '> ul > li p': {},
         hr: {},
         h1: {
-          fontSize: pxToRem(55, base),
+          fontSize: pxToRem(45, base),
           lineHeight: 1.1,
         },
         h2: {
-          fontSize: pxToRem(45, base),
+          fontSize: pxToRem(40, base),
           lineHeight: 1.1,
         },
         h3: {
@@ -587,6 +582,88 @@ const defaultModifiers = (base) => ({
       }
     ],
   },
+  xl: {
+    css: [
+      {
+        p: {},
+        'p:first-child': {},
+        'p:last-child': {},
+        a: {},
+        'a:hover': {},
+        blockquote: {},
+          //'blockquote::before': {},
+          //'blockquote::after': {},
+        'blockquote p:first-of-type::before': {},
+        'blockquote p:last-of-type::after': {},
+        cite: {},
+        ol: {},
+        ul: {},
+        li: {},
+        'ol > li': {},
+        'ul > li': {},
+        'ul > li:last-child': {},
+        '> ul > li p': {},
+        hr: {},
+        h1: {
+          fontSize: pxToRem(52, base),
+          lineHeight: 1.1,
+        },
+        h2: {
+          fontSize: pxToRem(45, base),
+          lineHeight: 1.1,
+        },
+        h3: {
+          fontSize: pxToRem(40, base),
+          lineHeight: 1.1,
+        },
+        h4: {
+          fontSize: pxToRem(28, base),
+          marginTop: pxToRem(13, base),
+          marginBottom: pxToRem(13, base),
+          fontWeight: 500
+        },
+        h5: {
+          fontSize: pxToRem(22, base),
+          marginTop: pxToRem(11, base),
+          marginBottom: pxToRem(11, base),
+          fontWeight: 400
+        },
+        h6: {},
+        'hr + *': {},
+        'h2 + *': {},
+        'h3 + *': {},
+        'h4 + *': {},
+        img: {},
+        'img:first-child': {},
+        'img:last-child': {},
+        picture: {},
+        'picture > img': {},
+        video: {},
+        kbd: {},
+        code: {},
+        'h2 code': {},
+        'h3 code': {},
+        pre: {},
+                /*
+        '> ul > li > *:first-child': {},
+        '> ul > li > *:last-child': {},
+        '> ol > li > *:first-child': {},
+        '> ol > li > *:last-child': {},
+        */
+        'ul ul, ul ol, ol ul, ol ol': {},
+        dl: {},
+        dt:{},
+        dd:{},
+        table: {},
+        'thead th': {},
+        'thead th:first-child': {},
+        'thead th:last-child': {},
+        'tbody td, tfoot td': {},
+        'tbody td:first-child, tfoot td:first-child': {},
+        'tbody td:last-child, tfoot td:last-child': {},
+      }
+    ],
+  },
 })
 
 const getStyles = (baseFontSize) => ({
@@ -599,6 +676,7 @@ const getStyles = (baseFontSize) => ({
   },
   sm: defaultModifiers(baseFontSize).sm,
   lg: defaultModifiers(baseFontSize).lg,
+  xl: defaultModifiers(baseFontSize).xl,
 })
 
 export default getStyles