@0.3.0 (#5)

Header / Main Nav / SiteDef: cleaned up handling of featured CTA (eg, "Enter App") DrawerMenu improvements: Now in common, as it is configured for our apps (supports logo, opens from the right) closeElement (icon) is passed in. primitives/Sheet (underlying DrawerMenu) now also supports a centerElement, which we now use for an optional logo MobileNav: uses better fonts and colors, reflects siteDef.currentAs, and displays CTA properly Logo: added xs size (for mobile menu impl) TShirtSize, TShirtDimensions, added xs and xl (admin: started to use semver for this module, so calling this 0.3.0)
hanzoai · Feb 5, 2024 · 6ce7a9c · 6ce7a9c
1 parent 8666d61
commit 6ce7a9c
Show file tree

Hide file tree

Showing 14 changed files with 219 additions and 159 deletions.
diff --git a/pkgs/luxdefi-ui/blocks/components/space-block.tsx b/pkgs/luxdefi-ui/blocks/components/space-block.tsx
@@ -13,7 +13,7 @@ const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
     return <>space block required</>
   }
 
-  const size = (block as SpaceBlock).level ?? 0
+  const size = (block as SpaceBlock).level ?? 3
 
   let Tag: React.ElementType = 'div' // corresponds to 0
 

diff --git a/pkgs/luxdefi-ui/common/drawer-menu.tsx b/pkgs/luxdefi-ui/common/drawer-menu.tsx
@@ -0,0 +1,51 @@
+'use client'
+import React, { type PropsWithChildren, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import Logo from './logo'
+import { Sheet, SheetContent, SheetTrigger } from '../primitives/sheet'
+
+const DrawerMenu: React.FC<PropsWithChildren & {
+  trigger: ReactNode
+  className?: string
+  showLogo?: boolean
+}> = ({
+  trigger,
+  children,
+  className='',
+  showLogo=true
+}) => {
+
+  const [open, setOpen] = React.useState(false)
+
+  const onAction = () => { setOpen(false) }
+
+    // https://stackoverflow.com/a/49052730/11645689
+  const updatedChildren = React.Children.map(
+    children,
+    (child) => (React.cloneElement(
+      child as any, { onAction }
+    ))
+  )
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} >
+      <SheetTrigger>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent 
+        side="right" 
+        className={className} 
+        closeButtonClass='text-inherit opacity-90' 
+        onClick={onAction}
+        closeElement={<LucideX className='h-6 w-6 text-inherit'/>}
+        centerElement={showLogo ? <Logo size='xs' className='' /> : null}
+      >
+        {updatedChildren}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export default DrawerMenu
diff --git a/pkgs/luxdefi-ui/common/header/index.tsx b/pkgs/luxdefi-ui/common/header/index.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import type { SiteDef } from '../../types'
 import Logo from '../logo'
-import { type ButtonVariants, LinkElement, DrawerMenu } from '../../primitives'
-import { NavItems, Icons } from '../../common'
+import { type ButtonVariants } from '../../primitives'
+import { NavItems, Icons, DrawerMenu } from '../../common'
 import MobileNav from './mobile-nav'
 
 import { cn } from '../../util'
@@ -14,47 +14,52 @@ const Header: React.FC<{
 }> = ({
   siteDef,
   className = ''
-}) => (
-  <header className={cn('bg-background sticky z-10 top-0 ', className)} >
-    <div className="hidden md:flex flex-row md:h-[80px] items-center justify-between px-[32px] 2xl:mx-auto max-w-screen-2xl">
-      <Logo size='md' className='hidden lg:flex' key='two'/>
-      <Logo size='sm' className='hidden md:flex lg:hidden' key='one'/>
-      <NavItems 
-        currentAs={siteDef.currentAs}
-        items={siteDef.mainNav.full} 
-        className='hidden lg:flex justify-between gap-[24px] text-[13px]/[13px] min-w-[690px]' 
-        itemClassName='font-heading h-[32px] tracking-[-0.3px]' 
-        itemClassNameFromVariant={(variant: ButtonVariants) => (variant === 'primary' ? 'min-w-[174px]' : '')}
-        key='three'
-      />
-      <NavItems 
-        currentAs={siteDef.currentAs}
-        items={siteDef.mainNav.short ?? siteDef.mainNav.full} 
-        className='hidden md:flex lg:hidden gap-4' 
-        itemClassName='text-sm font-heading'  
-        itemClassNameFromVariant={(variant: ButtonVariants) => (variant === 'link' ? 'text-muted-1' : '')}
-        key='four'
-      />
-      { siteDef.mainNav.aux && /* TODO unhack */ (
-        <LinkElement def={siteDef.mainNav.aux[0]} size='sm' className='min-w-0 hidden md:flex lg:hidden' />
-      )}
-    </div>
-    <div className="flex md:hidden h-[44px] items-center justify-between px-2">
-      <Logo size='sm' />
-      <DrawerMenu 
-        className='p-0 text-primary' // ui has 'text-inherit', so need this for close buttons to appear.
-        triggerIcon={<Icons.burger className='h-7 w-7 text-primary'/>} 
-      >
-        <MobileNav 
-          siteDef={siteDef}
-          itemVariant='link' 
-          className='pt-12' 
-          itemClassName='px-8 text-xl h-14 justify-start border-b' 
-        />
-      </DrawerMenu>
-    </div>
-  </header>
-)
+}) => {
+
+  const { nav: {elements, featuredCTA}} = siteDef
+  const allElements = (featuredCTA) ? [...elements, featuredCTA] : elements
 
+  return (
+    <header className={cn('bg-background sticky z-10 top-0 ', className)} >
+      {/* md or larger */}
+      <div className="hidden md:flex flex-row md:h-[80px] items-center justify-between px-[32px] 2xl:mx-auto max-w-screen-2xl">
+        <Logo size='md' className='hidden lg:flex' key='two'/>
+        <Logo size='sm' className='hidden md:flex lg:hidden' key='one'/>
+        {/* lg or larger */}
+        <NavItems 
+          currentAs={siteDef.currentAs}
+          items={allElements} 
+          className='hidden lg:flex justify-between gap-[24px] text-[13px]/[13px] min-w-[690px]' 
+          itemClassName='font-heading h-[32px] tracking-[-0.3px]' 
+          itemClassNameFromVariant={(variant: ButtonVariants) => (variant === 'primary' ? 'min-w-[174px]' : '')}
+          key='three'
+        />
+        {/* md exactly */}
+        <NavItems 
+          currentAs={siteDef.currentAs}
+          items={allElements} 
+          className='hidden md:flex lg:hidden gap-4 text-[13px]/[13px] ' 
+          itemClassName='font-heading h-[32px] tracking-[-0.3px]'  
+          itemClassNameFromVariant={(variant: ButtonVariants) => (variant === 'primary' ? 'min-w-0 text-[13px]/[13px]' : '')}
+          key='four'
+        />
+      </div>
+      {/* smaller than md: mobile style drawer menu */}
+      <div className="flex md:hidden h-[44px] items-center justify-between px-2">
+        <Logo size='sm' />
+        <DrawerMenu 
+          className='p-0 text-primary' // ui has 'text-inherit', so need this for close buttons to appear.
+          trigger={<Icons.burger className='h-7 w-7 text-inherit'/>}
+        >
+          <MobileNav 
+            siteDef={siteDef}
+            className='pt-12' 
+            navElementClasses='px-10 text-l h-10 justify-start border-b rounded-none' 
+          />
+        </DrawerMenu>
+      </div>
+    </header>
+  )
+}
 
 export default Header
diff --git a/pkgs/luxdefi-ui/common/header/mobile-nav.tsx b/pkgs/luxdefi-ui/common/header/mobile-nav.tsx
@@ -3,35 +3,66 @@ import React from 'react'
 
 import { type ButtonVariants, LinkElement }  from '../../primitives'
 import type { SiteDef } from '../../types'
+import { cn } from '../../util'
 
+// onAction is *in addition* to the link's navigation 
+  // action itself.  eg, for also closing the modal menu
 const MobileNav: React.FC<{
   siteDef: SiteDef
-  itemVariant?: ButtonVariants
   className?: string
-  itemClassName?: string
-  onAction?: () => void // eg, for close functionality
+  navElementClasses?: string
+  onAction?: () => void 
 }> = ({
   siteDef,
   onAction,
   className='',
-  itemClassName='',
-  itemVariant
-}) => (
-  siteDef.mainNav.full.length ? (
+  navElementClasses='',
+}) => {
+
+  const {nav: {elements, featuredCTA}} = siteDef
+
+  return (elements.length || featuredCTA) ? (
     <nav className={className} >
-    {siteDef.mainNav.full.map((el, index) => (
+    {elements.map((el, index) => {
+      const variant = el.variant ?? 'link'
+      let extraClasses = '' 
+        // note that linkFG (or any other variant of 'link') 
+        // will not get assigned these classes,
+        // and will remain styles is 'foreground' (hence the name)
+      if (variant === 'link') {
+        extraClasses+= ' text-nav hover:text-nav-hover active:text-nav-hover '
+        if (siteDef.currentAs && siteDef.currentAs === el.href) {
+          extraClasses += ' text-nav-current'
+        }
+      } 
+      else {
+        extraClasses+= ' min-w-0'   
+      }
+      if (siteDef.currentAs && siteDef.currentAs === el.href) {
+        extraClasses += ' pointer-events-none'
+      }
+      return (
+        <LinkElement 
+          def={el}
+          key={index}
+          size='lg'
+          className={cn(navElementClasses, extraClasses)}
+          onClick = {onAction}  
+        />
+      )
+    })}
+    {featuredCTA && (
       <LinkElement 
-        def={el}
-        key={index}
+        def={featuredCTA}
+        key='featuredCTA'
         size='lg'
-        className={itemClassName}
-        variant={itemVariant}
-        onClick = {onAction}  // in adition to the link action itself
+        className='mt-6 w-4/5 mx-auto'
+        onClick = {onAction}  
       />
-    ))}
+    )}
     </nav>
   ) 
   : null
-)
+}
 
 export default MobileNav
diff --git a/pkgs/luxdefi-ui/common/index.ts b/pkgs/luxdefi-ui/common/index.ts
@@ -4,6 +4,7 @@ export { default as Logo } from './logo'
 export { default as Main } from './main'
 export { default as Footer } from './footer'
 export { default as Header } from './header'
+export { default as DrawerMenu } from './drawer-menu'
 export { default as MiniChart } from './mini-chart'
 export { default as Copyright} from './copyright'
 export { default as HeadMetadata, getTitleFromTemplateString, TwitterComponent} from './head-metadata'

diff --git a/pkgs/luxdefi-ui/common/logo.tsx b/pkgs/luxdefi-ui/common/logo.tsx
@@ -24,7 +24,7 @@ const Logo: React.FC<{
     span: '',
     icon: ''
   }
-  if (size === 'lg') {
+  if (size === 'lg' || size === 'xl' ) { // for safety
     classes.icon = 'h-10 w-10 mr-4 color-inherit' + toAdd.icon
     classes.span = 'text-3xl' + toAdd.span
   }
@@ -33,12 +33,17 @@ const Logo: React.FC<{
     classes.icon = 'h-[32px] w-[32px] mr-[12px] color-inherit' + toAdd.icon
     classes.span = 'text-[26px]/[26px] tracking-tighter' + toAdd.span
   }
-  else {
+  else if (size === 'sm' ) {
     classes.icon = 'h-6 w-6 mr-2 color-inherit' + toAdd.icon
     classes.span = 'text-lg' + toAdd.span
   }
+    // xs
+  else {
+    classes.icon = 'h-4 w-4 mr-1 color-inherit' + toAdd.icon
+    classes.span = 'text-base' + toAdd.span
+  }
 
-  const outerClasses = 'flex items-center ' + className
+  const outerClasses = 'flex flex-row items-center ' + className
   const spanClasses = 'inline-block font-bold font-heading ' 
     + (href ? 'hover:text-accent ' : 'cursor-default ') 
     + classes.span 

diff --git a/pkgs/luxdefi-ui/package.json b/pkgs/luxdefi-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.15",
+  "version": "0.3.0",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/pkgs/luxdefi-ui/primitives/drawer-menu.tsx b/pkgs/luxdefi-ui/primitives/drawer-menu.tsx
diff --git a/pkgs/luxdefi-ui/primitives/index.ts b/pkgs/luxdefi-ui/primitives/index.ts
@@ -10,7 +10,6 @@ export {
   buttonVariants,
 } from './button'
 
-
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'
 export { default as DialogVideoController } from './dialog-video-controller'
 export {
@@ -26,9 +25,6 @@ export {
   DialogDescription,
 } from './dialog'
 
-export { default as DrawerMenu } from './drawer-menu'
-
-
 export {
   useFormField,
   Form,