Version 0.2.1 (#3)

SiteConf --> SiteDef ActionButton, DrawerMenu, LinkElement, YouTubeEmbed => primitives moved next-fonts into next Significant improvement of next font API and tw font config
hanzoai · Jan 26, 2024 · dc194d7 · dc194d7
1 parent 8e55e31
commit dc194d7
Show file tree

Hide file tree

Showing 40 changed files with 1,041 additions and 602 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "editor.gotoLocation.multipleDefinitions": "goto"
+}
diff --git a/pkgs/luxdefi-ui/blocks/components/card-block.tsx b/pkgs/luxdefi-ui/blocks/components/card-block.tsx
@@ -10,13 +10,11 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  LinkElement,
   type TypographySize
 } from '../../primitives'
 
-import {
-  Icons,
-  LinkElement
-} from '../../common'
+import { Icons } from '../../common'
 
 import {
   getSpecifierData, 

diff --git a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 
 import type { LinkDef, ButtonDef} from '../../types'
-import type { ButtonSizes } from '../../primitives'
-import { ActionButton, LinkElement } from '../../common'
+import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
 import type { Block, CTABlock } from '../def'
 
 const CtaBlockComponent: React.FC<{

diff --git a/pkgs/luxdefi-ui/common/copyright.tsx b/pkgs/luxdefi-ui/common/copyright.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 
+const FIRST = 2023
+
 const Copyright: React.FC = () => {
 
   const year = new Date().getFullYear()
-  const yearString = (year > 2023) ? `2023 - ${year}` : '2023'
+  const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
 
   return (
     <>{`Copyright © ${yearString} Lux Partners Ltd. `} <br className='sm:hidden'/> All rights reserved.</> 

diff --git a/pkgs/luxdefi-ui/common/footer.tsx b/pkgs/luxdefi-ui/common/footer.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
 
 import type { ButtonVariants } from '../primitives'
-import type { LinkDef, SiteConf } from '../types'
+import type { LinkDef, SiteDef } from '../types'
 import { Copyright, NavItems } from '../common'
 
 import Logo from './logo'
 
 const Footer: React.FC<{
-  conf: SiteConf,
+  siteDef: SiteDef,
   className?: string,
   noHorizPadding?: boolean
 }> = ({
-  conf,
+  siteDef,
   className='',
   noHorizPadding=false
 }) => (
@@ -23,26 +23,29 @@ const Footer: React.FC<{
       'md:w-full md:mx-0 ' +
       'lg:flex lg:flex-row lg:justify-between lg:gap-8 lg:w-full' + 
       'max-w-screen-2xl ' + 
-      `lg:columns-${conf.footer.length + 1}` // must safelist these! see tailwind docs
+      `lg:columns-${siteDef.footer.length + 1}` // must safelist these! see tailwind docs
     }>
       <div className='hidden lg:flex flex-col' key={0}>
         <Logo size='md' />
       </div>
-      {conf.footer.map((defs: LinkDef[], index, arr) => {
+      {siteDef.footer.map((defs: LinkDef[], index, arr) => {
         const colSpan = ((index === arr.length - 1) && (arr.length % 2 === 1)) ? 'col-span-2 mx-auto items-center sm:col-span-1 sm:mx-0 sm:items-start' : ''
         return (
-        <NavItems
-          items={defs} 
-          currentAs={conf.currentAs}
-          as='nav' 
-          className={'w-fit flex flex-col justify-start items-start gap-[11px] sm:gap-[12px] md:gap-[15px] ' + colSpan} 
-          key={index + 1}
-          itemClassName={'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'}
-          itemClassNameFromVariant={(variant: ButtonVariants) => ( variant === 'linkFG' ? 
-            'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal' 
-          : '')}
-        /> 
-      )})}
+          <NavItems
+            items={defs} 
+            currentAs={siteDef.currentAs}
+            as='nav' 
+            className={'w-fit flex flex-col justify-start items-start gap-[11px] sm:gap-[12px] md:gap-[15px] ' + colSpan} 
+            key={index + 1}
+            itemClassName={'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'}
+            itemClassNameFromVariant={
+              (variant: ButtonVariants) => ( 
+                variant === 'linkFG' ? 'font-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal' : ''
+              )
+            }
+          /> 
+        )
+      })}
     </div>
     <div className='text-sm text-center text-muted-3'>
       <Copyright />

diff --git a/pkgs/luxdefi-ui/common/head-metadata/index.tsx b/pkgs/luxdefi-ui/common/head-metadata/index.tsx
@@ -13,6 +13,11 @@ import type {
 import type { OpenGraph, OGImage } from './from-next/opengraph-types'
 import type { Twitter, TwitterImage } from './from-next/twitter-types'
 
+/*
+  NOTE: This is ONLY for sites that use the pages router in next.  
+  The app router does this automatically
+*/
+
 const getURLasString = (url: string | URL) => {
   return (
     (typeof url === 'string') ? (url as string) : (url.href)  
@@ -170,10 +175,7 @@ export const TwitterComponent: React.FC<{
   {tw.site && (<meta name="twitter:site" content={tw.site} />)}
 </Head>))
 
-
-  // For use with pages router only.
-  // App router does this automatically if you export the metadata object
-
+  /* See NOTE at top of file! */
   // https://stackoverflow.com/questions/68746228/next-head-wont-render-meta-tags-inside-of-fragment
 const HeadMetadataComponent: React.FC<{
   metadata: Metadata
@@ -185,7 +187,6 @@ const HeadMetadataComponent: React.FC<{
   return (<>
     <Head>
       {mainTitle && (<title>{mainTitle}</title>) /* must be here, directly under Head component */}
-
       {metadata.description && (      
         <meta name="description" content={metadata.description} />
       )}

diff --git a/pkgs/luxdefi-ui/common/header/index.tsx b/pkgs/luxdefi-ui/common/header/index.tsx
@@ -1,52 +1,48 @@
 import React from 'react'
 
-import type SiteConf from '../../types/site-conf'
-
+import type { SiteDef } from '../../types'
 import Logo from '../logo'
-import type { ButtonVariants } from '../../primitives'
-import { NavItems, LinkElement, DrawerMenu } from '../../common'
+import { type ButtonVariants, LinkElement, DrawerMenu } from '../../primitives'
+import { NavItems, Icons } from '../../common'
 import MobileNav from './mobile-nav'
 
 const Header: React.FC<{
-  conf: SiteConf
+  siteDef: SiteDef
 }> = ({
-  conf
+  siteDef
 }) => (
   <header className="bg-background sticky z-10 top-0">
     <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={conf.currentAs}
-        items={conf.mainNav.full} 
+        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={conf.currentAs}
-        items={conf.mainNav.short ?? conf.mainNav.full} 
+        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'
       />
-      { conf.mainNav.aux && /* TODO unhack */ (
-        <LinkElement def={conf.mainNav.aux[0]} size='sm' className='min-w-0 hidden md:flex lg:hidden' />
+      { 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='burger' 
-        triggerProps={{
-          className: 'h-7 w-7 text-primary'
-        }}
+        triggerIcon={<Icons.burger className='h-7 w-7 text-primary'/>} 
       >
         <MobileNav 
-          conf={conf}
+          siteDef={siteDef}
           itemVariant='link' 
           className='pt-12' 
           itemClassName='px-8 text-xl h-14 justify-start border-b' 
@@ -56,4 +52,5 @@ const Header: React.FC<{
   </header>
 )
 
+
 export default Header
diff --git a/pkgs/luxdefi-ui/common/header/mobile-nav.tsx b/pkgs/luxdefi-ui/common/header/mobile-nav.tsx
@@ -1,36 +1,35 @@
 'use client'
 import React from 'react'
 
-import { LinkElement }  from '../../common'
-import type { ButtonVariants }  from '../../primitives'
-import type { SiteConf } from '../../types'
+import { type ButtonVariants, LinkElement }  from '../../primitives'
+import type { SiteDef } from '../../types'
 
 const MobileNav: React.FC<{
-  conf: SiteConf
+  siteDef: SiteDef
   itemVariant?: ButtonVariants
   className?: string
   itemClassName?: string
-  onAction?: () => void // for close functionality
+  onAction?: () => void // eg, for close functionality
 }> = ({
-  conf,
+  siteDef,
   onAction,
   className='',
   itemClassName='',
   itemVariant
 }) => (
-  conf.mainNav.full.length ? (
+  siteDef.mainNav.full.length ? (
     <nav className={className} >
-      {conf.mainNav.full.map((el, index) => (
-        <LinkElement 
-          def={el}
-          key={index}
-          size='lg'
-          className={itemClassName}
-          variant={itemVariant}
-          onClick = {onAction} 
-        />
-      ))}
-      </nav>
+    {siteDef.mainNav.full.map((el, index) => (
+      <LinkElement 
+        def={el}
+        key={index}
+        size='lg'
+        className={itemClassName}
+        variant={itemVariant}
+        onClick = {onAction}  // in adition to the link action itself
+      />
+    ))}
+    </nav>
   ) 
   : null
 )

diff --git a/pkgs/luxdefi-ui/common/index.ts b/pkgs/luxdefi-ui/common/index.ts
@@ -5,13 +5,9 @@ export { default as Main } from './main'
 export { default as Footer } from './footer'
 export { default as Header } from './header'
 export { default as MiniChart } from './mini-chart'
-export { default as ActionButton } from './action-button'
 export { default as Copyright} from './copyright'
-export { default as DrawerMenu} from './drawer-menu'
-export { default as LinkElement} from './link-element'
 export { default as HeadMetadata, getTitleFromTemplateString, TwitterComponent} from './head-metadata'
 export { default as NavItems} from './nav-items'
-export { default as YouTubeEmbed} from './youtube-embed'
 
 
 
diff --git a/pkgs/luxdefi-ui/common/logo.tsx b/pkgs/luxdefi-ui/common/logo.tsx
@@ -12,7 +12,7 @@ const Logo: React.FC<{
   className?: string
 }> = ({
   size,
-  href, // no default please
+  href, // no default please!
   className='',
   logoOnly=false
 }) => {

diff --git a/pkgs/luxdefi-ui/common/main.tsx b/pkgs/luxdefi-ui/common/main.tsx
@@ -5,11 +5,7 @@ const c = 'max-w-screen-2xl 2xl:w-[1500px] lg:mx-auto ' +
   'flex flex-col justify-start items-stretch ' +
   'p-4 md:px-6 lg:px-8 '
 
-const Main: React.FC<
-  PropsWithChildren & { 
-    className?: string 
-  }
-> = ({
+const Main: React.FC<PropsWithChildren & { className?: string }> = ({
   children,
   className='',
 }) => (